primereact 9.4.0 → 9.6.0

package/menubar/menubar.cjs.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var PrimeReact = require('primereact/api');
 var hooks = require('primereact/hooks');
+var bars = require('primereact/icons/bars');
 var utils = require('primereact/utils');
+var componentbase = require('primereact/componentbase');
 var ripple = require('primereact/ripple');
 var angleright = require('primereact/icons/angleright');
 var angledown = require('primereact/icons/angledown');
-var bars = require('primereact/icons/bars');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,19 +35,45 @@ function _interopNamespace(e) {
 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 _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 _arrayWithHoles(arr) {
@@ -104,7 +131,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var MenubarBase = {
+var MenubarBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Menubar',
     id: null,
@@ -116,63 +143,23 @@ var MenubarBase = {
     menuIcon: null,
     end: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, MenubarBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, MenubarBase.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; }
+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 MenubarSub = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   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: activeItemState === item
+      }
+    });
+  };
   var _useEventListener = hooks.useEventListener({
       type: 'click',
       listener: function listener(event) {
@@ -297,11 +284,12 @@ var MenubarSub = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   }, [props.parentActive]);
   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) {
@@ -312,7 +300,8 @@ var MenubarSub = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
         onLeafClick: onLeafClick,
         onKeyDown: onChildItemKeyDown,
         parentActive: item === activeItemState,
-        submenuIcon: props.submenuIcon
+        submenuIcon: props.submenuIcon,
+        ptm: props.ptm
       });
     }
     return null;
@@ -329,40 +318,40 @@ var MenubarSub = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       'p-disabled': item.disabled
     });
     var iconClassName = utils.classNames('p-menuitem-icon', item.icon);
-    var icon = utils.IconUtils.getJSXIcon(item.icon, {
+    var iconProps = utils.mergeProps({
       className: 'p-menuitem-icon'
-    }, {
+    }, 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-submenu-icon';
-    var submenuIcon = item.items && utils.IconUtils.getJSXIcon(!props.root ? props.submenuIcon || /*#__PURE__*/React__namespace.createElement(angleright.AngleRightIcon, {
-      className: submenuIconClassName
-    }) : props.submenuIcon || /*#__PURE__*/React__namespace.createElement(angledown.AngleDownIcon, {
-      className: submenuIconClassName
-    }), {
+    var submenuIconProps = utils.mergeProps({
       className: submenuIconClassName
-    }, {
-      props: _objectSpread({
+    }, getPTOptions(item, 'submenuIcon'));
+    var submenuIcon = item.items && utils.IconUtils.getJSXIcon(!props.root ? props.submenuIcon || /*#__PURE__*/React__namespace.createElement(angleright.AngleRightIcon, submenuIconProps) : props.submenuIcon || /*#__PURE__*/React__namespace.createElement(angledown.AngleDownIcon, submenuIconProps), _objectSpread$1({}, submenuIconProps), {
+      props: _objectSpread$1({
         menuProps: props.menuProps
       }, props)
     });
     var submenu = createSubmenu(item);
-    var content = /*#__PURE__*/React__namespace.createElement("a", {
+    var actionProps = utils.mergeProps({
       href: item.url || '#',
-      role: "menuitem",
+      role: 'menuitem',
       className: linkClassName,
       target: item.target,
-      "aria-haspopup": item.items != null,
+      'aria-haspopup': item.items != null,
       onClick: function onClick(event) {
         return onItemClick(event, item);
       },
       onKeyDown: function onKeyDown(event) {
         return onItemKeyDown(event, item);
       }
-    }, icon, label, submenuIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+    }, getPTOptions(item, 'action'));
+    var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, icon, label, submenuIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     if (item.template) {
       var defaultContentOptions = {
         onClick: function onClick(event) {
@@ -380,16 +369,17 @@ var MenubarSub = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       };
       content = utils.ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
     }
-    return /*#__PURE__*/React__namespace.createElement("li", {
+    var menuitemProps = utils.mergeProps({
       key: key,
-      role: "none",
+      role: 'none',
       id: item.id,
       className: className,
       style: item.style,
       onMouseEnter: function onMouseEnter(event) {
         return onItemMouseEnter(event, item);
       }
-    }, content, submenu);
+    }, 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);
@@ -403,16 +393,20 @@ var MenubarSub = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     'p-menubar-root-list': props.root
   });
   var submenu = createMenu();
-  return /*#__PURE__*/React__namespace.createElement("ul", {
+  var menuProps = utils.mergeProps({
     ref: ref,
     className: className,
     role: role
-  }, submenu);
+  }, props.ptm('menu'));
+  return /*#__PURE__*/React__namespace.createElement("ul", menuProps, submenu);
 }));
 MenubarSub.displayName = 'MenubarSub';
 
+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 Menubar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-  var props = MenubarBase.getProps(inProps);
+  var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+  var props = MenubarBase.getProps(inProps, context);
   var _React$useState = React__namespace.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     mobileActiveState = _React$useState2[0],
@@ -420,6 +414,13 @@ var Menubar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   var elementRef = React__namespace.useRef(null);
   var rootMenuRef = React__namespace.useRef(null);
   var menuButtonRef = React__namespace.useRef(null);
+  var _MenubarBase$setMetaD = MenubarBase.setMetaData({
+      props: props,
+      state: {
+        mobileActive: mobileActiveState
+      }
+    }),
+    ptm = _MenubarBase$setMetaD.ptm;
   var _useEventListener = hooks.useEventListener({
       type: 'click',
       listener: function listener(event) {
@@ -445,7 +446,7 @@ var Menubar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   };
   hooks.useUpdateEffect(function () {
     if (mobileActiveState) {
-      utils.ZIndexUtils.set('menu', rootMenuRef.current, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['menu']);
+      utils.ZIndexUtils.set('menu', rootMenuRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex['menu'] || PrimeReact__default["default"].zIndex['menu']);
       bindDocumentClickListener();
     } else {
       unbindDocumentClickListener();
@@ -459,7 +460,6 @@ var Menubar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     return {
       props: props,
       toggle: toggle,
-      useCustomContent: useCustomContent,
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -474,18 +474,20 @@ var Menubar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   var createStartContent = function createStartContent() {
     if (props.start) {
       var _start = utils.ObjectUtils.getJSXElement(props.start, props);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-menubar-start"
-      }, _start);
+      var startProps = utils.mergeProps({
+        className: 'p-menubar-start'
+      }, ptm('start'));
+      return /*#__PURE__*/React__namespace.createElement("div", startProps, _start);
     }
     return null;
   };
   var createEndContent = function createEndContent() {
     if (props.end) {
       var _end = utils.ObjectUtils.getJSXElement(props.end, props);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-menubar-end"
-      }, _end);
+      var endProps = utils.mergeProps({
+        className: 'p-menubar-end'
+      }, ptm('end'));
+      return /*#__PURE__*/React__namespace.createElement("div", endProps, _end);
     }
     return null;
   };
@@ -493,24 +495,28 @@ var Menubar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     if (props.model && props.model.length < 1) {
       return null;
     }
-    var icon = props.menuIcon || /*#__PURE__*/React__namespace.createElement(bars.BarsIcon, null);
-    var menuIcon = utils.IconUtils.getJSXIcon(icon, undefined, {
-      props: props
-    });
-    /* eslint-disable */
-    var button = /*#__PURE__*/React__namespace.createElement("a", {
+    var buttonProps = utils.mergeProps({
       ref: menuButtonRef,
       href: '#',
-      role: "button",
+      role: 'button',
       tabIndex: 0,
-      className: "p-menubar-button",
-      onClick: toggle
-    }, menuIcon);
+      className: 'p-menubar-button',
+      onClick: function onClick(e) {
+        return toggle(e);
+      }
+    }, ptm('button'));
+    var popupIconProps = utils.mergeProps(ptm('popupIcon'));
+    var icon = props.menuIcon || /*#__PURE__*/React__namespace.createElement(bars.BarsIcon, popupIconProps);
+    var menuIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, popupIconProps), {
+      props: props
+    });
+
+    /* eslint-disable */
+    var button = /*#__PURE__*/React__namespace.createElement("a", buttonProps, menuIcon);
     /* eslint-enable */
 
     return button;
   };
-  var otherProps = MenubarBase.getOtherProps(props);
   var className = utils.classNames('p-menubar p-component', {
     'p-menubar-mobile-active': mobileActiveState
   }, props.className);
@@ -524,13 +530,15 @@ var Menubar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     root: true,
     mobileActive: mobileActiveState,
     onLeafClick: onLeafClick,
-    submenuIcon: props.submenuIcon
+    submenuIcon: props.submenuIcon,
+    ptm: ptm
   });
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+  var rootProps = utils.mergeProps({
     id: props.id,
     className: className,
     style: props.style
-  }, otherProps), start, menuButton, submenu, end);
+  }, MenubarBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React__namespace.createElement("div", rootProps, start, menuButton, submenu, end);
 }));
 Menubar.displayName = 'Menubar';
 

package/menubar/menubar.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/hooks"),r=require("primereact/utils"),o=require("primereact/ripple"),u=require("primereact/icons/angleright"),l=require("primereact/icons/angledown"),a=require("primereact/icons/bars");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 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 s=c(e),m=i(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 p(e){if(Array.isArray(e))return e}function b(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,u,l,a=[],i=!0,c=!1;try{if(u=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;i=!1}else for(;!(i=(r=u.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&&(l=n.return(),Object(l)!==l))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 v(e,t){if(e){if("string"==typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?d(e,t):void 0}}function y(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(e,t){return p(e)||b(e,t)||v(e,t)||y()}var h={defaultProps:{__TYPE:"Menubar",id:null,model:null,style:null,className:null,start:null,submenuIcon:null,menuIcon:null,end:null,children:void 0},getProps:function(e){return r.ObjectUtils.getMergedProps(e,h.defaultProps)},getOtherProps:function(e){return r.ObjectUtils.getDiffProps(e,h.defaultProps)}};function O(e){return O="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},O(e)}function E(e,t){if("object"!==O(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==O(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function j(e){var t=E(e,"string");return"symbol"===O(t)?t:String(t)}function P(e,t,n){return(t=j(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function I(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function w(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?I(Object(n),!0).forEach((function(t){P(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):I(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var N=s.memo(s.forwardRef((function(e,t){var a=g(s.useState(null),2),i=a[0],c=a[1],m=g(n.useEventListener({type:"click",listener:function(e){t&&t.current&&!t.current.contains(e.target)&&c(null)}}),1)[0],f=function(t,n){n.disabled||e.mobileActive?t.preventDefault():e.root?(i||e.popup)&&c(n):c(n)},p=function(e,t){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),t.items?c(i&&t===i?null:t):P())},b=function(t,n){var r=t.currentTarget.parentElement;switch(t.which){case 40:e.root?n.items&&v(n,r):h(r),t.preventDefault();break;case 38:!e.root&&O(r),t.preventDefault();break;case 39:if(e.root){var o=E(r);o&&o.children[0].focus()}else n.items&&v(n,r);t.preventDefault();break;case 37:e.root&&O(r),t.preventDefault()}e.onKeyDown&&e.onKeyDown(t,r)},d=function(t,n){e.root?38===t.which&&null==n.previousElementSibling&&y(n):37===t.which&&y(n)},v=function(e,t){c(e),setTimeout((function(){t.children[1].children[0].children[0].focus()}),50)},y=function(e){c(null),e.parentElement.previousElementSibling.focus()},h=function(e){var t=E(e);t&&t.children[0].focus()},O=function(e){var t=j(e);t&&t.children[0].focus()},E=function e(t){var n=t.nextElementSibling;return n?r.DomHandler.hasClass(n,"p-disabled")||!r.DomHandler.hasClass(n,"p-menuitem")?e(n):n:null},j=function e(t){var n=t.previousElementSibling;return n?r.DomHandler.hasClass(n,"p-disabled")||!r.DomHandler.hasClass(n,"p-menuitem")?e(n):n:null},P=function(){c(null),e.onLeafClick&&e.onLeafClick()};n.useMountEffect((function(){m()})),n.useUpdateEffect((function(){!e.parentActive&&c(null)}),[e.parentActive]);var I=function(e){return s.createElement("li",{key:"separator_"+e,className:"p-menu-separator",role:"separator"})},S=function(t){return t.items?s.createElement(N,{menuProps:e.menuProps,model:t.items,mobileActive:e.mobileActive,onLeafClick:P,onKeyDown:d,parentActive:t===i,submenuIcon:e.submenuIcon}):null},D=function(t,n){if(!1===t.visible)return null;var a=t.label+"_"+n,c=r.classNames("p-menuitem",{"p-menuitem-active":i===t},t.className),m=r.classNames("p-menuitem-link",{"p-disabled":t.disabled}),d=r.classNames("p-menuitem-icon",t.icon),v=r.IconUtils.getJSXIcon(t.icon,{className:"p-menuitem-icon"},{props:e.menuProps}),y=t.label&&s.createElement("span",{className:"p-menuitem-text"},t.label),g="p-submenu-icon",h=t.items&&r.IconUtils.getJSXIcon(e.root?e.submenuIcon||s.createElement(l.AngleDownIcon,{className:g}):e.submenuIcon||s.createElement(u.AngleRightIcon,{className:g}),{className:g},{props:w({menuProps:e.menuProps},e)}),O=S(t),E=s.createElement("a",{href:t.url||"#",role:"menuitem",className:m,target:t.target,"aria-haspopup":null!=t.items,onClick:function(e){return p(e,t)},onKeyDown:function(e){return b(e,t)}},v,y,h,s.createElement(o.Ripple,null));t.template&&(E=r.ObjectUtils.getJSXElement(t.template,t,{onClick:function(e){return p(e,t)},onKeyDown:function(e){return b(e,t)},className:m,labelClassName:"p-menuitem-text",iconClassName:d,submenuIconClassName:g,element:E,props:e}));return s.createElement("li",{key:a,role:"none",id:t.id,className:c,style:t.style,onMouseEnter:function(e){return f(e,t)}},E,O)},C=function(e,t){return e.separator?I(t):D(e,t)},k=e.root?"menubar":"menu",A=r.classNames({"p-submenu-list":!e.root,"p-menubar-root-list":e.root}),U=e.model?e.model.map(C):null;return s.createElement("ul",{ref:t,className:A,role:k},U)})));N.displayName="MenubarSub";var S=s.memo(s.forwardRef((function(e,t){var o=h.getProps(e),u=g(s.useState(!1),2),l=u[0],i=u[1],c=s.useRef(null),p=s.useRef(null),b=s.useRef(null),d=g(n.useEventListener({type:"click",listener:function(e){l&&E(e)&&i(!1)}}),2),v=d[0],y=d[1],O=function(e){e.preventDefault(),i((function(e){return!e}))},E=function(e){return p.current!==e.target&&!p.current.contains(e.target)&&b.current!==e.target&&!b.current.contains(e.target)};n.useUpdateEffect((function(){l?(r.ZIndexUtils.set("menu",p.current,m.default.autoZIndex,m.default.zIndex.menu),v()):(y(),r.ZIndexUtils.clear(p.current))}),[l]),n.useUnmountEffect((function(){r.ZIndexUtils.clear(p.current)})),s.useImperativeHandle(t,(function(){return{props:o,toggle:O,useCustomContent:useCustomContent,getElement:function(){return c.current},getRootMenu:function(){return p.current},getMenuButton:function(){return b.current}}}));var j=h.getOtherProps(o),P=r.classNames("p-menubar p-component",{"p-menubar-mobile-active":l},o.className),I=function(){if(o.start){var e=r.ObjectUtils.getJSXElement(o.start,o);return s.createElement("div",{className:"p-menubar-start"},e)}return null}(),w=function(){if(o.end){var e=r.ObjectUtils.getJSXElement(o.end,o);return s.createElement("div",{className:"p-menubar-end"},e)}return null}(),S=function(){if(o.model&&o.model.length<1)return null;var e=r.IconUtils.getJSXIcon(o.menuIcon||s.createElement(a.BarsIcon,null),void 0,{props:o});return s.createElement("a",{ref:b,href:"#",role:"button",tabIndex:0,className:"p-menubar-button",onClick:O},e)}(),D=s.createElement(N,{ref:p,menuProps:o,model:o.model,root:!0,mobileActive:l,onLeafClick:function(){i(!1)},submenuIcon:o.submenuIcon});return s.createElement("div",f({id:o.id,className:P,style:o.style},j),I,S,D,w)})));S.displayName="Menubar",exports.Menubar=S;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/hooks"),r=require("primereact/icons/bars"),o=require("primereact/utils"),u=require("primereact/componentbase"),l=require("primereact/ripple"),i=require("primereact/icons/angleright"),a=require("primereact/icons/angledown");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 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 m=s(e),p=c(t);function f(e){return f="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},f(e)}function b(e,t){if("object"!==f(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==f(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function d(e){var t=b(e,"string");return"symbol"===f(t)?t:String(t)}function v(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function y(e){if(Array.isArray(e))return e}function g(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,u,l,i=[],a=!0,c=!1;try{if(u=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=u.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&&(l=n.return(),Object(l)!==l))return}finally{if(c)throw o}}return i}}function O(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 h(e,t){if(e){if("string"==typeof e)return O(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)?O(e,t):void 0}}function P(){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 E(e,t){return y(e)||g(e,t)||h(e,t)||P()}var j=u.ComponentBase.extend({defaultProps:{__TYPE:"Menubar",id:null,model:null,style:null,className:null,start:null,submenuIcon:null,menuIcon:null,end:null,children:void 0}});function w(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?w(Object(n),!0).forEach((function(t){v(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):w(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var S=m.memo(m.forwardRef((function(e,t){var r=E(m.useState(null),2),u=r[0],c=r[1],s=function(t,n){return e.ptm(n,{context:{active:u===t}})},p=E(n.useEventListener({type:"click",listener:function(e){t&&t.current&&!t.current.contains(e.target)&&c(null)}}),1)[0],f=function(t,n){n.disabled||e.mobileActive?t.preventDefault():e.root?(u||e.popup)&&c(n):c(n)},b=function(e,t){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),t.items?c(u&&t===u?null:t):w())},d=function(t,n){var r=t.currentTarget.parentElement;switch(t.which){case 40:e.root?n.items&&y(n,r):O(r),t.preventDefault();break;case 38:!e.root&&h(r),t.preventDefault();break;case 39:if(e.root){var o=P(r);o&&o.children[0].focus()}else n.items&&y(n,r);t.preventDefault();break;case 37:e.root&&h(r),t.preventDefault()}e.onKeyDown&&e.onKeyDown(t,r)},v=function(t,n){e.root?38===t.which&&null==n.previousElementSibling&&g(n):37===t.which&&g(n)},y=function(e,t){c(e),setTimeout((function(){t.children[1].children[0].children[0].focus()}),50)},g=function(e){c(null),e.parentElement.previousElementSibling.focus()},O=function(e){var t=P(e);t&&t.children[0].focus()},h=function(e){var t=j(e);t&&t.children[0].focus()},P=function e(t){var n=t.nextElementSibling;return n?o.DomHandler.hasClass(n,"p-disabled")||!o.DomHandler.hasClass(n,"p-menuitem")?e(n):n:null},j=function e(t){var n=t.previousElementSibling;return n?o.DomHandler.hasClass(n,"p-disabled")||!o.DomHandler.hasClass(n,"p-menuitem")?e(n):n:null},w=function(){c(null),e.onLeafClick&&e.onLeafClick()};n.useMountEffect((function(){p()})),n.useUpdateEffect((function(){!e.parentActive&&c(null)}),[e.parentActive]);var D=function(t){var n=o.mergeProps({key:"separator_"+t,className:"p-menu-separator",role:"separator"},e.ptm("separator"));return m.createElement("li",n)},N=function(t){return t.items?m.createElement(S,{menuProps:e.menuProps,model:t.items,mobileActive:e.mobileActive,onLeafClick:w,onKeyDown:v,parentActive:t===u,submenuIcon:e.submenuIcon,ptm:e.ptm}):null},k=function(t,n){if(!1===t.visible)return null;var r=t.label+"_"+n,c=o.classNames("p-menuitem",{"p-menuitem-active":u===t},t.className),p=o.classNames("p-menuitem-link",{"p-disabled":t.disabled}),v=o.classNames("p-menuitem-icon",t.icon),y=o.mergeProps({className:"p-menuitem-icon"},s(t,"icon")),g=o.IconUtils.getJSXIcon(t.icon,I({},y),{props:e.menuProps}),O=o.mergeProps({className:"p-menuitem-text"},s(t,"label")),h=t.label&&m.createElement("span",O,t.label),P="p-submenu-icon",E=o.mergeProps({className:P},s(t,"submenuIcon")),j=t.items&&o.IconUtils.getJSXIcon(e.root?e.submenuIcon||m.createElement(a.AngleDownIcon,E):e.submenuIcon||m.createElement(i.AngleRightIcon,E),I({},E),{props:I({menuProps:e.menuProps},e)}),w=N(t),S=o.mergeProps({href:t.url||"#",role:"menuitem",className:p,target:t.target,"aria-haspopup":null!=t.items,onClick:function(e){return b(e,t)},onKeyDown:function(e){return d(e,t)}},s(t,"action")),D=m.createElement("a",S,g,h,j,m.createElement(l.Ripple,null));t.template&&(D=o.ObjectUtils.getJSXElement(t.template,t,{onClick:function(e){return b(e,t)},onKeyDown:function(e){return d(e,t)},className:p,labelClassName:"p-menuitem-text",iconClassName:v,submenuIconClassName:P,element:D,props:e}));var k=o.mergeProps({key:r,role:"none",id:t.id,className:c,style:t.style,onMouseEnter:function(e){return f(e,t)}},s(t,"menuitem"));return m.createElement("li",k,D,w)},x=function(e,t){return e.separator?D(t):k(e,t)},C=e.root?"menubar":"menu",A=o.classNames({"p-submenu-list":!e.root,"p-menubar-root-list":e.root}),U=e.model?e.model.map(x):null,M=o.mergeProps({ref:t,className:A,role:C},e.ptm("menu"));return m.createElement("ul",M,U)})));function D(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function N(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?D(Object(n),!0).forEach((function(t){v(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):D(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}S.displayName="MenubarSub";var k=m.memo(m.forwardRef((function(e,u){var l=m.useContext(t.PrimeReactContext),i=j.getProps(e,l),a=E(m.useState(!1),2),c=a[0],s=a[1],f=m.useRef(null),b=m.useRef(null),d=m.useRef(null),v=j.setMetaData({props:i,state:{mobileActive:c}}).ptm,y=E(n.useEventListener({type:"click",listener:function(e){c&&P(e)&&s(!1)}}),2),g=y[0],O=y[1],h=function(e){e.preventDefault(),s((function(e){return!e}))},P=function(e){return b.current!==e.target&&!b.current.contains(e.target)&&d.current!==e.target&&!d.current.contains(e.target)};n.useUpdateEffect((function(){c?(o.ZIndexUtils.set("menu",b.current,l&&l.autoZIndex||p.default.autoZIndex,l&&l.zIndex.menu||p.default.zIndex.menu),g()):(O(),o.ZIndexUtils.clear(b.current))}),[c]),n.useUnmountEffect((function(){o.ZIndexUtils.clear(b.current)})),m.useImperativeHandle(u,(function(){return{props:i,toggle:h,getElement:function(){return f.current},getRootMenu:function(){return b.current},getMenuButton:function(){return d.current}}}));var w=o.classNames("p-menubar p-component",{"p-menubar-mobile-active":c},i.className),I=function(){if(i.start){var e=o.ObjectUtils.getJSXElement(i.start,i),t=o.mergeProps({className:"p-menubar-start"},v("start"));return m.createElement("div",t,e)}return null}(),D=function(){if(i.end){var e=o.ObjectUtils.getJSXElement(i.end,i),t=o.mergeProps({className:"p-menubar-end"},v("end"));return m.createElement("div",t,e)}return null}(),k=function(){if(i.model&&i.model.length<1)return null;var e=o.mergeProps({ref:d,href:"#",role:"button",tabIndex:0,className:"p-menubar-button",onClick:function(e){return h(e)}},v("button")),t=o.mergeProps(v("popupIcon")),n=o.IconUtils.getJSXIcon(i.menuIcon||m.createElement(r.BarsIcon,t),N({},t),{props:i});return m.createElement("a",e,n)}(),x=m.createElement(S,{ref:b,menuProps:i,model:i.model,root:!0,mobileActive:c,onLeafClick:function(){s(!1)},submenuIcon:i.submenuIcon,ptm:v}),C=o.mergeProps({id:i.id,className:w,style:i.style},j.getOtherProps(i),v("root"));return m.createElement("div",C,I,k,x,D)})));k.displayName="Menubar",exports.Menubar=k;

package/menubar/menubar.d.ts

@@ -9,7 +9,95 @@
  */
 import * as React from 'react';
 import { MenuItem } from '../menuitem';
-import { IconType } from '../utils/utils';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type MenubarPassThroughType<T> = PassThroughType<T, MenubarPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MenubarPassThroughMethodOptions {
+    props: MenubarProps;
+    state: MenubarState;
+    context: MenubarContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MenubarProps.pt}
+ */
+export interface MenubarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MenubarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: MenubarPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: MenubarPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: MenubarPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MenubarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: MenubarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: MenubarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: MenubarPassThroughType<React.HTMLAttributes<HTMLElement>>;
+    /**
+     * Uses to pass attributes to the mobile popup menu button's DOM element.
+     */
+    button?: MenubarPassThroughType<React.HTMLAttributes<HTMLElement>>;
+    /**
+     * Uses to pass attributes to the mobile popup menu button icon's DOM element.
+     */
+    popupIcon?: MenubarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the start of the component.
+     */
+    start?: MenubarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the end of the component.
+     */
+    end?: MenubarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines current inline state in Menubar component.
+ */
+export interface MenubarState {
+    /**
+     * Current mobile menu active state as a boolean.
+     * @defaultValue false
+     */
+    mobileActive: boolean;
+}
+
+/**
+ * Defines current options in Menubar component.
+ */
+export interface MenubarContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
 
 /**
  * Defines valid properties in Menubar component. In addition to these, all properties of HTMLDivElement can be used in this component.
@@ -41,6 +129,11 @@ export interface MenubarProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MenubarPassThroughOptions}
+     */
+    pt?: MenubarPassThroughOptions;
 }
 
 /**