primereact 10.2.1 → 10.3.1

package/panelmenu/panelmenu.js

@@ -78,35 +78,8 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
     return obj;
   }
 
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-    return arr2;
-  }
-
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-  }
-
-  function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-  }
-
-  function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-  }
-
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  function _readOnlyError(name) {
+    throw new TypeError("\"" + name + "\" is read-only");
   }
 
   function _arrayWithHoles(arr) {
@@ -141,6 +114,21 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
     }
   }
 
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+    return arr2;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
   function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
@@ -149,12 +137,25 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
+  /* eslint-disable */
+  var useUpdateEffect = function useUpdateEffect(fn, deps) {
+    var mounted = React__namespace.useRef(false);
+    return React__namespace.useEffect(function () {
+      if (!mounted.current) {
+        mounted.current = true;
+        return;
+      }
+      return fn && fn();
+    }, deps);
+  };
+  /* eslint-enable */
+
   var classes = {
     headerIcon: function headerIcon(_ref) {
       var item = _ref.item;
       return utils.classNames('p-menuitem-icon', item.icon);
     },
-    headerSubmenuIcon: 'p-panelmenu-icon',
+    headerSubmenuIcon: 'p-submenu-icon',
     headerLabel: 'p-menuitem-text',
     headerAction: 'p-panelmenu-header-link',
     panel: function panel(_ref2) {
@@ -169,12 +170,13 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
         'p-disabled': item.disabled
       });
     },
+    headerContent: 'p-panelmenu-header-content',
     menuContent: 'p-panelmenu-content',
     root: function root(_ref4) {
       var props = _ref4.props;
       return utils.classNames('p-panelmenu p-component', props.className);
     },
-    separator: 'p-menu-separator',
+    separator: 'p-menuitem-separator',
     toggleableContent: function toggleableContent(_ref5) {
       var active = _ref5.active;
       return utils.classNames('p-toggleable-content', {
@@ -186,7 +188,8 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
       return utils.classNames('p-menuitem-icon', item.icon);
     },
     label: 'p-menuitem-text',
-    submenuicon: 'p-panelmenu-icon',
+    submenuicon: 'p-submenu-icon',
+    content: 'p-menuitem-content',
     action: function action(_ref7) {
       var item = _ref7.item;
       return utils.classNames('p-menuitem-link', {
@@ -194,14 +197,19 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
       });
     },
     menuitem: function menuitem(_ref8) {
-      var item = _ref8.item;
-      return utils.classNames('p-menuitem', item.className);
+      var item = _ref8.item,
+        focused = _ref8.focused,
+        disabled = _ref8.disabled;
+      return utils.classNames('p-menuitem', item.className, {
+        'p-focus': focused,
+        'p-disabled': disabled
+      });
     },
-    menu: 'p-submenu-list',
+    menu: 'p-panelmenu-root-list',
     submenu: 'p-submenu-list',
     transition: 'p-toggleable-content'
   };
-  var styles = "\n@layer primereact {\n    .p-panelmenu .p-panelmenu-header-link {\n        display: flex;\n        align-items: center;\n        user-select: none;\n        cursor: pointer;\n        position: relative;\n        text-decoration: none;\n    }\n    \n    .p-panelmenu .p-panelmenu-header-link:focus {\n        z-index: 1;\n    }\n    \n    .p-panelmenu .p-submenu-list {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n    \n    .p-panelmenu .p-menuitem-link {\n        display: flex;\n        align-items: center;\n        user-select: none;\n        cursor: pointer;\n        text-decoration: none;\n    }\n    \n    .p-panelmenu .p-menuitem-text {\n        line-height: 1;\n    }\n}\n";
+  var styles = "\n@layer primereact {\n    .p-panelmenu .p-panelmenu-header-link {\n        display: flex;\n        align-items: center;\n        user-select: none;\n        cursor: pointer;\n        position: relative;\n        text-decoration: none;\n    }\n\n    .p-panelmenu .p-panelmenu-header-link:focus {\n        z-index: 1;\n    }\n\n    .p-panelmenu .p-submenu-list {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n\n    .p-panelmenu .p-menuitem-link {\n        display: flex;\n        align-items: center;\n        user-select: none;\n        cursor: pointer;\n        text-decoration: none;\n        text-decoration: none;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .p-panelmenu .p-menuitem-text {\n        line-height: 1;\n    }\n}\n";
   var PanelMenuBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'PanelMenu',
@@ -209,7 +217,11 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
       model: null,
       style: null,
       submenuIcon: null,
+      expandedKeys: null,
       className: null,
+      onExpandedKeysChange: null,
+      onOpen: null,
+      onClose: null,
       multiple: false,
       transitionOptions: null,
       children: undefined
@@ -222,77 +234,81 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
 
   function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-  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 PanelMenuSub = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var ptm = props.ptm,
       cx = props.cx;
+    var elementRef = React__namespace.useRef(null);
     var _ptm = function _ptm(key, options) {
       return ptm(key, _objectSpread$1({
         hostName: props.hostName
       }, options));
     };
-    var getPTOptions = function getPTOptions(item, key) {
+    var getPTOptions = function getPTOptions(processedItem, key, index) {
       return _ptm(key, {
         context: {
-          active: isItemActive(item)
+          item: processedItem,
+          index: index,
+          active: isItemActive(processedItem),
+          focused: isItemFocused(processedItem),
+          disabled: isItemDisabled(processedItem)
         }
       });
     };
-    var findActiveItem = function findActiveItem() {
-      if (props.model) {
-        if (props.multiple) {
-          return props.model.filter(function (item) {
-            return item.expanded;
-          });
-        } else {
-          var activeItem = null;
-          props.model.forEach(function (item) {
-            if (item.expanded) {
-              if (!activeItem) activeItem = item;else item.expanded = false;
-            }
-          });
-          return activeItem;
-        }
-      }
-      return null;
+    var getItemId = function getItemId(processedItem) {
+      return "".concat(props.panelId, "_").concat(processedItem.key);
     };
-    var onItemClick = function onItemClick(event, item) {
-      if (item.disabled) {
-        event.preventDefault();
-        return;
-      }
-      if (!item.url) {
+    var getItemProp = function getItemProp(processedItem, name, params) {
+      return processedItem && processedItem.item ? utils.ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
+    };
+    var isItemActive = function isItemActive(processedItem) {
+      return props.activeItemPath.some(function (path) {
+        return path.key === processedItem.key;
+      });
+    };
+    var isItemVisible = function isItemVisible(processedItem) {
+      return getItemProp(processedItem, 'visible') !== false;
+    };
+    var isItemDisabled = function isItemDisabled(processedItem) {
+      return getItemProp(processedItem, 'disabled');
+    };
+    var isItemFocused = function isItemFocused(processedItem) {
+      return props.focusedItemId === getItemId(processedItem);
+    };
+    var isItemGroup = function isItemGroup(processedItem) {
+      return utils.ObjectUtils.isNotEmpty(processedItem.items);
+    };
+    var onItemClick = function onItemClick(event, processedItem) {
+      if (!getItemProp(processedItem, 'url')) {
         event.preventDefault();
       }
-      if (item.command) {
-        item.command({
-          originalEvent: event,
-          item: item
-        });
-      }
-      var activeItem = activeItemState;
-      var active = isItemActive(item);
-      if (active) {
-        item.expanded = false;
-        setActiveItemState(props.multiple ? activeItem.filter(function (a_item) {
-          return a_item !== item;
-        }) : null);
-      } else {
-        if (!props.multiple && activeItem) {
-          activeItem.expanded = false;
-        }
-        item.expanded = true;
-        setActiveItemState(props.multiple ? [].concat(_toConsumableArray(activeItem || []), [item]) : item);
-      }
+      getItemProp(processedItem, 'command', {
+        originalEvent: event,
+        item: processedItem.item
+      });
+      onItemToggle({
+        processedItem: processedItem,
+        expanded: !isItemActive(processedItem)
+      });
     };
-    var isItemActive = function isItemActive(item) {
-      return activeItemState && (props.multiple ? activeItemState.indexOf(item) > -1 : activeItemState === item);
+    var onItemToggle = function onItemToggle(event) {
+      props.onItemToggle(event);
     };
-    hooks.useMountEffect(function () {
-      setActiveItemState(findActiveItem());
+    var getAriaSetSize = function getAriaSetSize() {
+      return props.model.filter(function (processedItem) {
+        return isItemVisible(processedItem) && !getItemProp(processedItem, 'separator');
+      }).length;
+    };
+    var getAriaPosInset = function getAriaPosInset(index) {
+      return index - props.model.slice(0, index).filter(function (processedItem) {
+        return isItemVisible(processedItem) && getItemProp(processedItem, 'separator');
+      }).length + 1;
+    };
+    React__namespace.useImperativeHandle(ref, function () {
+      return {
+        getElement: function getElement() {
+          return elementRef.current;
+        }
+      };
     });
     var createSeparator = function createSeparator(index) {
       var key = props.id + '_sep_' + index;
@@ -304,14 +320,14 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
       }, _ptm('separator'));
       return /*#__PURE__*/React__namespace.createElement("li", separatorProps);
     };
-    var createSubmenu = function createSubmenu(item, active, index) {
+    var createSubmenu = function createSubmenu(processedItem, active) {
       var submenuRef = /*#__PURE__*/React__namespace.createRef();
       var toggleableContentProps = utils.mergeProps({
         className: cx('toggleableContent', {
           active: active
         })
       }, _ptm('toggleableContent'));
-      if (item.items) {
+      if (isItemVisible(processedItem) && isItemGroup(processedItem)) {
         var transitionProps = utils.mergeProps({
           classNames: cx('transition'),
           timeout: {
@@ -326,10 +342,15 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
         }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", _extends({
           ref: submenuRef
         }, toggleableContentProps), /*#__PURE__*/React__namespace.createElement(PanelMenuSub, {
-          id: props.id + '_' + index,
+          id: getItemId(processedItem) + '_list',
+          role: "group",
+          panelId: props.panelId,
+          level: props.level + 1,
+          focusedItemId: props.focusedItemId,
+          activeItemPath: props.activeItemPath,
+          onItemToggle: onItemToggle,
           menuProps: props.menuProps,
-          model: item.items,
-          multiple: props.multiple,
+          model: processedItem.items,
           submenuIcon: props.submenuIcon,
           ptm: ptm,
           cx: cx
@@ -337,12 +358,15 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
       }
       return null;
     };
-    var createMenuItem = function createMenuItem(item, index) {
-      if (item.visible === false) {
+    var createMenuItem = function createMenuItem(processedItem, index) {
+      var item = processedItem.item;
+      if (isItemVisible(processedItem) === false) {
         return null;
       }
-      var key = item.id || props.id + '_' + index;
-      var active = isItemActive(item);
+      var key = getItemId(processedItem);
+      var active = isItemActive(processedItem);
+      var itemFocused = isItemFocused(processedItem);
+      var disabled = isItemDisabled(item);
       var linkClassName = utils.classNames('p-menuitem-link', {
         'p-disabled': item.disabled
       });
@@ -351,38 +375,35 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
         className: cx('icon', {
           item: item
         })
-      }, getPTOptions(item, 'icon'));
+      }, getPTOptions(processedItem, 'icon', index));
       var icon = utils.IconUtils.getJSXIcon(item.icon, _objectSpread$1({}, iconProps), {
         props: props.menuProps
       });
       var labelProps = utils.mergeProps({
         className: cx('label')
-      }, getPTOptions(item, 'label'));
+      }, getPTOptions(processedItem, 'label', index));
       var label = item.label && /*#__PURE__*/React__namespace.createElement("span", labelProps, item.label);
       var submenuIconClassName = 'p-panelmenu-icon';
       var submenuIconProps = utils.mergeProps({
         className: cx('submenuicon')
-      }, getPTOptions(item, 'submenuicon'));
+      }, getPTOptions(processedItem, 'submenuicon', index));
       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, index);
+      var submenu = createSubmenu(processedItem, active);
       var actionProps = utils.mergeProps({
         href: item.url || '#',
         className: cx('action', {
           item: item
         }),
         target: item.target,
-        onClick: function onClick(event) {
-          return onItemClick(event, item);
+        onFocus: function onFocus(event) {
+          return event.stopPropagation();
         },
-        role: 'menuitem',
-        'aria-disabled': item.disabled
-      }, getPTOptions(item, 'action'));
+        tabIndex: '-1',
+        'aria-hidden': true
+      }, getPTOptions(processedItem, 'action', index));
       var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, submenuIcon, icon, label);
       if (item.template) {
         var defaultContentOptions = {
-          onClick: function onClick(event) {
-            return onItemClick(event, item);
-          },
           className: linkClassName,
           labelClassName: 'p-menuitem-text',
           iconClassName: iconClassName,
@@ -394,19 +415,34 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
         };
         content = utils.ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
       }
+      var contentProps = utils.mergeProps({
+        onClick: function onClick(event) {
+          return onItemClick(event, processedItem);
+        },
+        className: cx('content')
+      }, getPTOptions(processedItem, 'content', index));
       var menuitemProps = utils.mergeProps({
         key: key,
         id: key,
         className: cx('menuitem', {
-          item: item
+          item: item,
+          focused: itemFocused,
+          disabled: disabled
         }),
         style: item.style,
-        role: 'none'
-      }, getPTOptions(item, 'menuitem'));
-      return /*#__PURE__*/React__namespace.createElement("li", menuitemProps, content, submenu);
+        role: 'treeitem',
+        'aria-label': item.label,
+        'aria-expanded': isItemGroup(item) ? active : undefined,
+        'aria-level': props.level + 1,
+        'aria-setsize': getAriaSetSize(),
+        'aria-posinset': getAriaPosInset(index),
+        'data-p-focused': itemFocused,
+        'data-p-disabled': disabled
+      }, getPTOptions(processedItem, 'menuitem', index));
+      return /*#__PURE__*/React__namespace.createElement("li", menuitemProps, /*#__PURE__*/React__namespace.createElement("div", contentProps, content), submenu);
     };
     var createItem = function createItem(item, index) {
-      return item.separator ? createSeparator(index) : createMenuItem(item, index);
+      return getItemProp(item, 'separator') ? createSeparator(index) : createMenuItem(item, index);
     };
     var createMenu = function createMenu() {
       return props.model ? props.model.map(createItem) : null;
@@ -414,13 +450,431 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
     var menu = createMenu();
     var ptKey = props.root ? 'menu' : 'submenu';
     var menuProps = utils.mergeProps({
-      className: utils.classNames(cx(ptKey), props.className),
-      role: 'tree'
+      id: props.id,
+      ref: elementRef,
+      tabIndex: props.tabIndex,
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      onKeyDown: props.onKeyDown,
+      'aria-activedescendant': props.ariaActivedescendant,
+      role: props.role,
+      className: utils.classNames(cx(ptKey), props.className)
     }, ptm(ptKey));
     return /*#__PURE__*/React__namespace.createElement("ul", menuProps, menu);
-  });
+  }));
   PanelMenuSub.displayName = 'PanelMenuSub';
 
+  var PanelMenuList = /*#__PURE__*/React__namespace.memo(function (props) {
+    var ptm = props.ptm,
+      cx = props.cx;
+    var _React$useState = React__namespace.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      focused = _React$useState2[0],
+      setFocused = _React$useState2[1];
+    var _React$useState3 = React__namespace.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      focusedItem = _React$useState4[0],
+      setFocusedItem = _React$useState4[1];
+    var _React$useState5 = React__namespace.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      focusedItemId = _React$useState6[0],
+      setFocusedItemId = _React$useState6[1];
+    var _React$useState7 = React__namespace.useState(null),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      activeItemPath = _React$useState8[0],
+      setActiveItemPath = _React$useState8[1];
+    var _React$useState9 = React__namespace.useState(null),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      processedItems = _React$useState10[0],
+      setProcessedItems = _React$useState10[1];
+    var _React$useState11 = React__namespace.useState([]),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      visibleItems = _React$useState12[0],
+      setVisibleItems = _React$useState12[1];
+    var searchValue = React__namespace.useRef(null);
+    var searchTimeout = React__namespace.useRef(null);
+    var elementRef = React__namespace.useRef(null);
+    var getItemProp = function getItemProp(processedItem, name) {
+      return processedItem && processedItem.item ? utils.ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
+    };
+    var getItemLabel = function getItemLabel(processedItem) {
+      return getItemProp(processedItem, 'label');
+    };
+    var isItemVisible = function isItemVisible(processedItem) {
+      return getItemProp(processedItem, 'visible') !== false;
+    };
+    var isItemDisabled = function isItemDisabled(processedItem) {
+      return getItemProp(processedItem, 'disabled');
+    };
+    var isItemActive = function isItemActive(processedItem) {
+      return activeItemPath.some(function (path) {
+        return path.key === processedItem.parentKey;
+      });
+    };
+    var isItemGroup = function isItemGroup(processedItem) {
+      return utils.ObjectUtils.isNotEmpty(processedItem.items);
+    };
+    var getListElement = function getListElement() {
+      return elementRef.current && elementRef.current.getElement();
+    };
+    var onFocus = function onFocus(event) {
+      setFocused(true);
+      var _focusedItem = focusedItem || (isElementInPanel(event, event.relatedTarget) ? findFirstItem() : findLastItem());
+      setFocusedItem(_focusedItem);
+    };
+    var onBlur = function onBlur() {
+      setFocused(false);
+      setFocusedItem(null);
+      searchValue.current = '';
+    };
+    var onKeyDown = function onKeyDown(event) {
+      var metaKey = event.metaKey || event.ctrlKey;
+      switch (event.code) {
+        case 'ArrowDown':
+          onArrowDownKey(event);
+          break;
+        case 'ArrowUp':
+          onArrowUpKey(event);
+          break;
+        case 'ArrowLeft':
+          onArrowLeftKey(event);
+          break;
+        case 'ArrowRight':
+          onArrowRightKey(event);
+          break;
+        case 'Home':
+          onHomeKey(event);
+          break;
+        case 'End':
+          onEndKey(event);
+          break;
+        case 'Space':
+          onSpaceKey(event);
+          break;
+        case 'Enter':
+        case 'NumpadEnter':
+          onEnterKey(event);
+          break;
+        case 'Escape':
+        case 'Tab':
+        case 'PageDown':
+        case 'PageUp':
+        case 'Backspace':
+        case 'ShiftLeft':
+        case 'ShiftRight':
+          //NOOP
+          break;
+        default:
+          if (!metaKey && utils.ObjectUtils.isPrintableCharacter(event.key)) {
+            searchItems(event, event.key);
+          }
+          break;
+      }
+    };
+    var onArrowDownKey = function onArrowDownKey(event) {
+      var processedItem = utils.ObjectUtils.isNotEmpty(focusedItem) ? findNextItem(focusedItem) : findFirstItem();
+      changeFocusedItem({
+        originalEvent: event,
+        processedItem: processedItem,
+        focusOnNext: true
+      });
+      event.preventDefault();
+    };
+    var onArrowUpKey = function onArrowUpKey(event) {
+      var processedItem = utils.ObjectUtils.isNotEmpty(focusedItem) ? findPrevItem(focusedItem) : findLastItem();
+      changeFocusedItem({
+        originalEvent: event,
+        processedItem: processedItem,
+        selfCheck: true
+      });
+      event.preventDefault();
+    };
+    var onArrowLeftKey = function onArrowLeftKey(event) {
+      if (utils.ObjectUtils.isNotEmpty(focusedItem)) {
+        var matched = activeItemPath.some(function (p) {
+          return p.key === focusedItem.key;
+        });
+        if (matched) {
+          setActiveItemPath(activeItemPath.filter(function (p) {
+            return p.key !== focusedItem.key;
+          }));
+        } else {
+          setFocusedItem(utils.ObjectUtils.isNotEmpty(focusedItem.parent) ? focusedItem.parent : focusedItem);
+        }
+        event.preventDefault();
+      }
+    };
+    var onArrowRightKey = function onArrowRightKey(event) {
+      if (utils.ObjectUtils.isNotEmpty(focusedItem)) {
+        var grouped = isItemGroup(focusedItem);
+        if (grouped) {
+          var matched = activeItemPath.some(function (p) {
+            return p.key === focusedItem.key;
+          });
+          if (matched) {
+            onArrowDownKey(event);
+          } else {
+            var _activeItemPath = activeItemPath.filter(function (p) {
+              return p.parentKey !== focusedItem.parentKey;
+            });
+            _activeItemPath.push(focusedItem);
+            setActiveItemPath(_activeItemPath);
+          }
+        }
+        event.preventDefault();
+      }
+    };
+    var onHomeKey = function onHomeKey(event) {
+      changeFocusedItem({
+        originalEvent: event,
+        processedItem: findFirstItem(),
+        allowHeaderFocus: false
+      });
+      event.preventDefault();
+    };
+    var onEndKey = function onEndKey(event) {
+      changeFocusedItem({
+        originalEvent: event,
+        processedItem: findLastItem(),
+        focusOnNext: true,
+        allowHeaderFocus: false
+      });
+      event.preventDefault();
+    };
+    var onEnterKey = function onEnterKey(event) {
+      if (utils.ObjectUtils.isNotEmpty(focusedItem)) {
+        var element = utils.DomHandler.findSingle(getListElement(), "li[id=\"".concat("".concat(focusedItemId), "\"]"));
+        var anchorElement = element && (utils.DomHandler.findSingle(element, '[data-pc-section="action"]') || utils.DomHandler.findSingle(element, 'a,button'));
+        anchorElement ? anchorElement.click() : element && element.click();
+      }
+      event.preventDefault();
+    };
+    var onSpaceKey = function onSpaceKey(event) {
+      onEnterKey(event);
+    };
+    var onItemToggle = function onItemToggle(event) {
+      var processedItem = event.processedItem,
+        expanded = event.expanded;
+      if (props.expandedKeys) {
+        props.onToggle && props.onToggle({
+          item: processedItem.item,
+          expanded: expanded
+        });
+      } else {
+        var _activeItemPath = activeItemPath.filter(function (p) {
+          return p.parentKey !== processedItem.parentKey;
+        });
+        expanded && _activeItemPath.push(processedItem);
+        setActiveItemPath(_activeItemPath);
+      }
+      utils.DomHandler.focus(getListElement());
+      setFocusedItem(processedItem);
+    };
+    var isElementInPanel = function isElementInPanel(event, element) {
+      var panel = event.currentTarget.closest('[data-pc-section="panel"]');
+      return panel && panel.contains(element);
+    };
+    var isItemMatched = function isItemMatched(processedItem) {
+      return isValidItem(processedItem) && getItemLabel(processedItem).toLocaleLowerCase().startsWith(searchValue.current.toLocaleLowerCase());
+    };
+    var isVisibleItem = function isVisibleItem(processedItem) {
+      return !!processedItem && (processedItem.level === 0 || isItemActive(processedItem)) && isItemVisible(processedItem);
+    };
+    var isValidItem = function isValidItem(processedItem) {
+      return !!processedItem && !isItemDisabled(processedItem) && !getItemProp(processedItem, 'separator');
+    };
+    var findFirstItem = function findFirstItem() {
+      return visibleItems.find(function (processedItem) {
+        return isValidItem(processedItem);
+      });
+    };
+    var findLastItem = function findLastItem() {
+      return utils.ObjectUtils.findLast(visibleItems, function (processedItem) {
+        return isValidItem(processedItem);
+      });
+    };
+    var findNextItem = function findNextItem(processedItem) {
+      var index = visibleItems.findIndex(function (item) {
+        return item.key === processedItem.key;
+      });
+      var matchedItem = index < visibleItems.length - 1 ? visibleItems.slice(index + 1).find(function (pItem) {
+        return isValidItem(pItem);
+      }) : undefined;
+      return matchedItem || processedItem;
+    };
+    var findPrevItem = function findPrevItem(processedItem) {
+      var index = visibleItems.findIndex(function (item) {
+        return item.key === processedItem.key;
+      });
+      var matchedItem = index > 0 ? utils.ObjectUtils.findLast(visibleItems.slice(0, index), function (pItem) {
+        return isValidItem(pItem);
+      }) : undefined;
+      return matchedItem || processedItem;
+    };
+    var searchItems = function searchItems(event, _char) {
+      searchValue.current = (searchValue.current || '') + _char;
+      var matchedItem = null;
+      var matched = false;
+      if (utils.ObjectUtils.isNotEmpty(focusedItem)) {
+        var focusedItemIndex = visibleItems.findIndex(function (processedItem) {
+          return processedItem.key === focusedItem.key;
+        });
+        matchedItem = visibleItems.slice(focusedItemIndex).find(function (processedItem) {
+          return isItemMatched(processedItem);
+        });
+        matchedItem = utils.ObjectUtils.isEmpty(matchedItem) ? visibleItems.slice(0, focusedItemIndex).find(function (processedItem) {
+          return isItemMatched(processedItem);
+        }) : matchedItem;
+      } else {
+        matchedItem = visibleItems.find(function (processedItem) {
+          return isItemMatched(processedItem);
+        });
+      }
+      if (utils.ObjectUtils.isNotEmpty(matchedItem)) {
+        matched = true;
+      }
+      if (utils.ObjectUtils.isEmpty(matchedItem) && utils.ObjectUtils.isEmpty(focusedItem)) {
+        matchedItem = findFirstItem();
+      }
+      if (utils.ObjectUtils.isNotEmpty(matchedItem)) {
+        changeFocusedItem({
+          originalEvent: event,
+          processedItem: matchedItem,
+          allowHeaderFocus: false
+        });
+      }
+      if (searchTimeout) {
+        clearTimeout(searchTimeout.current);
+      }
+      searchTimeout.current = setTimeout(function () {
+        searchValue.current = '';
+        searchTimeout.currentt = null;
+      }, 500);
+      return matched;
+    };
+    var changeFocusedItem = function changeFocusedItem(event) {
+      var originalEvent = event.originalEvent,
+        processedItem = event.processedItem,
+        focusOnNext = event.focusOnNext,
+        selfCheck = event.selfCheck,
+        _event$allowHeaderFoc = event.allowHeaderFocus,
+        allowHeaderFocus = _event$allowHeaderFoc === void 0 ? true : _event$allowHeaderFoc;
+      if (utils.ObjectUtils.isNotEmpty(focusedItem) && focusedItem.key !== processedItem.key) {
+        setFocusedItem(processedItem);
+        scrollInView();
+      } else if (allowHeaderFocus) {
+        props.onHeaderFocus && props.onHeaderFocus({
+          originalEvent: originalEvent,
+          focusOnNext: focusOnNext,
+          selfCheck: selfCheck
+        });
+      }
+    };
+    var scrollInView = function scrollInView() {
+      var element = utils.DomHandler.findSingle(getListElement(), "li[id=\"".concat("".concat(focusedItemId), "\"]"));
+      if (element) {
+        element.scrollIntoView && element.scrollIntoView({
+          block: 'nearest',
+          inline: 'start'
+        });
+      }
+    };
+    var autoUpdateActiveItemPath = function autoUpdateActiveItemPath(expandedKeys) {
+      var _activeItemPath = Object.entries(expandedKeys || {}).reduce(function (acc, _ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          val = _ref2[1];
+        if (val) {
+          var processedItem = findProcessedItemByItemKey(key);
+          processedItem && acc.push(processedItem);
+        }
+        return acc;
+      }, []);
+      setActiveItemPath(_activeItemPath);
+    };
+    var findProcessedItemByItemKey = function findProcessedItemByItemKey(key, processed) {
+      var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var _processedItems = processed ? processed : level === 0 && props.model;
+      if (!_processedItems) return null;
+      for (var i = 0; i < _processedItems.length; i++) {
+        var processedItem = _processedItems[i];
+        var processedKey = getItemProp(processedItem, 'key') || processedItem.key;
+        if (processedKey === key) return processedItem;
+        var matchedItem = findProcessedItemByItemKey(key, processedItem.items, level + 1);
+        if (matchedItem) return matchedItem;
+      }
+    };
+    var createProcessedItems = function createProcessedItems(items) {
+      var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+      var processedItems = [];
+      items && items.forEach(function (item, index) {
+        var key = item.key ? item.key : (parentKey !== '' ? parentKey + '_' : '') + index;
+        var newItem = {
+          item: item,
+          index: index,
+          level: level,
+          key: key,
+          parent: parent,
+          parentKey: parentKey
+        };
+        newItem['items'] = createProcessedItems(item.items, level + 1, newItem, key);
+        processedItems.push(newItem);
+      });
+      return processedItems;
+    };
+    var flatItems = function flatItems(processedItems) {
+      var processedFlattenItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      processedItems && processedItems.forEach(function (processedItem) {
+        if (isVisibleItem(processedItem)) {
+          processedFlattenItems.push(processedItem);
+          flatItems(processedItem.items, processedFlattenItems);
+        }
+      });
+      return processedFlattenItems;
+    };
+    useUpdateEffect(function () {
+      var processed = createProcessedItems(props.model);
+      setProcessedItems(processed);
+    }, [props.model]);
+    useUpdateEffect(function () {
+      var _visibleItems = flatItems(processedItems);
+      setVisibleItems(_visibleItems);
+    }, [processedItems, activeItemPath]);
+    useUpdateEffect(function () {
+      var _id = utils.ObjectUtils.isNotEmpty(focusedItem) ? "".concat(props.panelId, "_").concat(focusedItem.key) : null;
+      setFocusedItemId(_id);
+    }, [props.panelId, focusedItem]);
+    useUpdateEffect(function () {
+      autoUpdateActiveItemPath(props.expandedKeys);
+    }, [props.expandedKeys]);
+    return /*#__PURE__*/React__namespace.createElement(PanelMenuSub, {
+      hostName: "PanelMenu",
+      id: props.panelId + '_list',
+      ref: elementRef,
+      role: "tree",
+      tabIndex: -1,
+      ariaActivedescendant: focused ? focusedItemId : undefined,
+      panelId: props.panelId,
+      focusedItemId: focused ? focusedItemId : undefined,
+      model: processedItems,
+      activeItemPath: activeItemPath,
+      menuProps: props.menuProps,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      onItemToggle: onItemToggle,
+      level: 0,
+      className: cx('submenu'),
+      submenuIcon: props.submenuIcon,
+      root: true,
+      ptm: ptm,
+      cx: cx
+    });
+  });
+  PanelMenuList.displayName = 'PanelMenuList';
+
   function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
@@ -434,19 +888,20 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       activeItemState = _React$useState4[0],
       setActiveItemState = _React$useState4[1];
-    var _React$useState5 = React__namespace.useState(false),
+    var _React$useState5 = React__namespace.useState([]),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      animationDisabled = _React$useState6[0],
-      setAnimationDisabled = _React$useState6[1];
+      activeItemsState = _React$useState6[0],
+      setActiveItemsState = _React$useState6[1];
+    var _React$useState7 = React__namespace.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2);
+      _React$useState8[0];
+      var setAnimationDisabled = _React$useState8[1];
     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
+          activeItem: activeItemState
         }
       }),
       ptm = _PanelMenuBase$setMet.ptm,
@@ -455,24 +910,6 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
     componentbase.useHandleStyle(PanelMenuBase.css.styles, isUnstyled, {
       name: 'panelmenu'
     });
-    var findActiveItem = function findActiveItem() {
-      if (props.model) {
-        if (props.multiple) {
-          return props.model.filter(function (item) {
-            return item.expanded;
-          });
-        } else {
-          var activeItem = null;
-          props.model.forEach(function (item) {
-            if (item.expanded) {
-              if (!activeItem) activeItem = item;else item.expanded = false;
-            }
-          });
-          return activeItem;
-        }
-      }
-      return null;
-    };
     var onItemClick = function onItemClick(event, item) {
       if (item.disabled) {
         event.preventDefault();
@@ -487,30 +924,163 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
           item: item
         });
       }
-      var activeItem = activeItemState;
-      var active = isItemActive(item);
-      if (active) {
-        item.expanded = false;
-        setActiveItemState(props.multiple ? activeItem.filter(function (a_item) {
-          return a_item !== item;
-        }) : null);
-      } else {
-        if (!props.multiple && activeItem) {
-          activeItem.expanded = false;
-        }
-        if (item.items) {
-          item.expanded = true;
-          setActiveItemState(props.multiple ? [].concat(_toConsumableArray(activeItem || []), [item]) : item);
+      changeActiveItem(event, item);
+    };
+    var getItemProp = function getItemProp(item, name) {
+      return item ? utils.ObjectUtils.getItemValue(item[name]) : undefined;
+    };
+    var isItemActive = function isItemActive(item) {
+      return props.expandedKeys ? props.expandedKeys[getItemProp(item, 'key')] : props.multiple ? activeItemsState.some(function (subItem) {
+        return utils.ObjectUtils.equals(item, subItem);
+      }) : utils.ObjectUtils.equals(item, activeItemState);
+    };
+    var isItemVisible = function isItemVisible(item) {
+      return getItemProp(item, 'visible') !== false;
+    };
+    var isItemDisabled = function isItemDisabled(item) {
+      return getItemProp(item, 'disabled');
+    };
+    var isItemFocused = function isItemFocused(item) {
+      return utils.ObjectUtils.equals(item, activeItemState);
+    };
+    var getPanelId = function getPanelId(index) {
+      return "".concat(idState, "_").concat(index);
+    };
+    var getHeaderId = function getHeaderId(index) {
+      return "".concat(getPanelId(index), "_header");
+    };
+    var getContentId = function getContentId(index) {
+      return "".concat(getPanelId(index), "_content");
+    };
+    var onHeaderKeyDown = function onHeaderKeyDown(event, item) {
+      switch (event.code) {
+        case 'ArrowDown':
+          onHeaderArrowDownKey(event);
+          break;
+        case 'ArrowUp':
+          onHeaderArrowUpKey(event);
+          break;
+        case 'Home':
+          onHeaderHomeKey(event);
+          break;
+        case 'End':
+          onHeaderEndKey(event);
+          break;
+        case 'Enter':
+        case 'NumpadEnter':
+        case 'Space':
+          onHeaderEnterKey(event, item);
+          break;
+      }
+    };
+    var onHeaderArrowDownKey = function onHeaderArrowDownKey(event) {
+      var rootList = utils.DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? utils.DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="menu"]') : null;
+      rootList ? utils.DomHandler.focus(rootList) : updateFocusedHeader({
+        originalEvent: event,
+        focusOnNext: true
+      });
+      event.preventDefault();
+    };
+    var onHeaderArrowUpKey = function onHeaderArrowUpKey(event) {
+      var prevHeader = findPrevHeader(event.currentTarget.parentElement) || findLastHeader();
+      var rootList = utils.DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? utils.DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="menu"]') : null;
+      rootList ? utils.DomHandler.focus(rootList) : updateFocusedHeader({
+        originalEvent: event,
+        focusOnNext: false
+      });
+      event.preventDefault();
+    };
+    var onHeaderHomeKey = function onHeaderHomeKey(event) {
+      changeFocusedHeader(event, findFirstHeader());
+      event.preventDefault();
+    };
+    var onHeaderEndKey = function onHeaderEndKey(event) {
+      changeFocusedHeader(event, findLastHeader());
+      event.preventDefault();
+    };
+    var onHeaderEnterKey = function onHeaderEnterKey(event, item) {
+      var headerAction = utils.DomHandler.findSingle(event.currentTarget, '[data-pc-section="headeraction"]');
+      headerAction ? headerAction.click() : onItemClick(event, item);
+      event.preventDefault();
+    };
+    var findNextHeader = function findNextHeader(panelElement) {
+      var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling;
+      var headerElement = utils.DomHandler.findSingle(nextPanelElement, '[data-pc-section="header"]');
+      return headerElement ? utils.DomHandler.getAttribute(headerElement, 'data-p-disabled') ? findNextHeader(headerElement.parentElement) : headerElement : null;
+    };
+    var findPrevHeader = function findPrevHeader(panelElement) {
+      var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var prevPanelElement = selfCheck ? panelElement : panelElement.previousElementSibling;
+      var headerElement = utils.DomHandler.findSingle(prevPanelElement, '[data-pc-section="header"]');
+      return headerElement ? utils.DomHandler.getAttribute(headerElement, 'data-p-disabled') ? findPrevHeader(headerElement.parentElement) : headerElement : null;
+    };
+    var findFirstHeader = function findFirstHeader() {
+      return findNextHeader(elementRef.current.firstElementChild, true);
+    };
+    var findLastHeader = function findLastHeader() {
+      return findPrevHeader(elementRef.current.lastElementChild, true);
+    };
+    var updateFocusedHeader = function updateFocusedHeader(event) {
+      var originalEvent = event.originalEvent,
+        focusOnNext = event.focusOnNext,
+        selfCheck = event.selfCheck;
+      var panelElement = originalEvent.currentTarget.closest('[data-pc-section="panel"]');
+      var header = selfCheck ? utils.DomHandler.findSingle(panelElement, '[data-pc-section="header"]') : focusOnNext ? findNextHeader(panelElement) : findPrevHeader(panelElement);
+      header ? changeFocusedHeader(originalEvent, header) : focusOnNext ? onHeaderHomeKey(originalEvent) : onHeaderEndKey(originalEvent);
+    };
+    var changeActiveItem = function changeActiveItem(event, item) {
+      if (!isItemDisabled(item)) {
+        var active = isItemActive(item);
+        var isOpen = !active;
+        var _activeItemState = activeItemState && utils.ObjectUtils.equals(item, activeItemState) ? null : item;
+        setActiveItemState(_activeItemState);
+        if (props.multiple) {
+          var activeItems = activeItemsState;
+          if (activeItemsState.some(function (subItem) {
+            return utils.ObjectUtils.equals(item, subItem);
+          })) {
+            activeItemsState.filter(function (subItem) {
+              return !utils.ObjectUtils.equals(item, subItem);
+            }), _readOnlyError("activeItems");
+          } else {
+            activeItems.push(item);
+          }
+          setActiveItemsState(activeItems);
         }
+        changeExpandedKeys({
+          item: item,
+          expanded: !active
+        });
+        isOpen ? props.onOpen && props.onOpen({
+          originalEvent: event,
+          item: item
+        }) : props.onClose && props.onClose({
+          originalEvent: event,
+          item: item
+        });
       }
     };
-    var isItemActive = function isItemActive(item) {
-      return activeItemState && (props.multiple ? activeItemState.indexOf(item) > -1 : activeItemState === item);
+    var changeExpandedKeys = function changeExpandedKeys(_ref) {
+      var item = _ref.item,
+        _ref$expanded = _ref.expanded,
+        expanded = _ref$expanded === void 0 ? false : _ref$expanded;
+      if (props.expandedKeys) {
+        var _keys = _objectSpread({}, props.expandedKeys);
+        if (expanded) _keys[item.key] = true;else delete _keys[item.key];
+        props.onExpandedKeysChange && props.onExpandedKeysChange(_keys);
+      }
     };
-    var getPTOptions = function getPTOptions(item, key) {
+    var changeFocusedHeader = function changeFocusedHeader(event, element) {
+      element && utils.DomHandler.focus(element);
+    };
+    var getPTOptions = function getPTOptions(item, key, index) {
       return ptm(key, {
         context: {
-          active: isItemActive(item)
+          active: isItemActive(item),
+          focused: isItemFocused(item),
+          disabled: isItemDisabled(item),
+          index: index
         }
       });
     };
@@ -526,17 +1096,15 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
       if (!idState) {
         setIdState(utils.UniqueComponentId());
       }
-      setActiveItemState(findActiveItem());
     });
-    hooks.useUpdateEffect(function () {
+    useUpdateEffect(function () {
       setAnimationDisabled(true);
-      setActiveItemState(findActiveItem());
     }, [props.model]);
     var onEnter = function onEnter() {
       setAnimationDisabled(false);
     };
     var createPanel = function createPanel(item, index) {
-      if (item.visible === false) {
+      if (!isItemVisible(item)) {
         return null;
       }
       var key = item.id || idState + '_' + index;
@@ -546,31 +1114,25 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
         className: cx('headerIcon', {
           item: item
         })
-      }, getPTOptions(item, 'headerIcon'));
+      }, getPTOptions(item, 'headerIcon', index));
       var icon = utils.IconUtils.getJSXIcon(item.icon, _objectSpread({}, headerIconProps), {
         props: props
       });
       var submenuIconClassName = 'p-panelmenu-icon';
       var headerSubmenuIconProps = utils.mergeProps({
         className: cx('headerSubmenuIcon')
-      }, getPTOptions(item, 'headerSubmenuIcon'));
+      }, getPTOptions(item, 'headerSubmenuIcon', index));
       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: cx('headerLabel')
-      }, getPTOptions(item, 'headerLabel'));
+      }, getPTOptions(item, 'headerLabel', index));
       var label = item.label && /*#__PURE__*/React__namespace.createElement("span", headerLabelProps, item.label);
       var menuContentRef = /*#__PURE__*/React__namespace.createRef();
       var headerActionProps = utils.mergeProps({
         href: item.url || '#',
         className: cx('headerAction'),
-        onClick: function onClick(e) {
-          return onItemClick(e, item);
-        },
-        'aria-expanded': active,
-        id: headerId,
-        'aria-controls': contentId,
-        'aria-disabled': item.disabled
-      }, getPTOptions(item, 'headerAction'));
+        tabIndex: '-1'
+      }, getPTOptions(item, 'headerAction', index));
       var content = /*#__PURE__*/React__namespace.createElement("a", headerActionProps, submenuIcon, icon, label);
       if (item.template) {
         var defaultContentOptions = {
@@ -594,24 +1156,42 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
           item: item
         }),
         style: item.style
-      }, getPTOptions(item, 'panel'));
+      }, getPTOptions(item, 'panel', index));
       var headerProps = utils.mergeProps({
+        id: getHeaderId(index),
         className: cx('header', {
           active: active,
           item: item
         }),
+        'aria-label': item.label,
+        'aria-expanded': active,
+        'aria-disabled': item.disabled,
+        'aria-controls': getContentId(index),
+        tabIndex: item.disabled ? null : '0',
+        onClick: function onClick(event) {
+          return onItemClick(event, item);
+        },
+        onKeyDown: function onKeyDown(event) {
+          return onHeaderKeyDown(event, item);
+        },
+        'data-p-disabled': item.disabled,
+        'data-p-highlight': active,
+        role: 'button',
         style: item.style
-      }, getPTOptions(item, 'header'));
+      }, getPTOptions(item, 'header', index));
+      var headerContentProps = utils.mergeProps({
+        className: cx('headerContent')
+      }, getPTOptions(item, 'headerContent', index));
       var menuContentProps = utils.mergeProps({
         className: cx('menuContent')
-      }, getPTOptions(item, 'menuContent'));
+      }, getPTOptions(item, 'menuContent', index));
       var toggleableContentProps = utils.mergeProps({
         className: cx('toggleableContent', {
           active: active
         }),
         role: 'region',
-        'aria-labelledby': headerId
-      }, getPTOptions(item, 'toggleableContent'));
+        'aria-labelledby': getHeaderId(index)
+      }, getPTOptions(item, 'toggleableContent', index));
       var transitionProps = utils.mergeProps({
         classNames: cx('transition'),
         timeout: {
@@ -619,25 +1199,25 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
           exit: 450
         },
         onEnter: onEnter,
-        disabled: animationDisabled,
         "in": active,
         unmountOnExit: true,
         options: props.transitionOptions
-      }, getPTOptions(item, 'transition'));
-      return /*#__PURE__*/React__namespace.createElement("div", panelProps, /*#__PURE__*/React__namespace.createElement("div", headerProps, content), /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
+      }, getPTOptions(item, 'transition', index));
+      return /*#__PURE__*/React__namespace.createElement("div", panelProps, /*#__PURE__*/React__namespace.createElement("div", headerProps, /*#__PURE__*/React__namespace.createElement("div", headerContentProps, content)), /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
         nodeRef: menuContentRef
       }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", _extends({
-        id: contentId,
+        id: getContentId(index),
         ref: menuContentRef
-      }, toggleableContentProps), /*#__PURE__*/React__namespace.createElement("div", menuContentProps, /*#__PURE__*/React__namespace.createElement(PanelMenuSub, {
-        hostName: "PanelMenu",
-        id: key,
+      }, toggleableContentProps), /*#__PURE__*/React__namespace.createElement("div", menuContentProps, /*#__PURE__*/React__namespace.createElement(PanelMenuList, {
+        panelId: getPanelId(index),
         menuProps: props,
+        onToggle: changeExpandedKeys,
+        onHeaderFocus: updateFocusedHeader,
+        level: 0,
         model: item.items,
+        expandedKeys: props.expandedKeys,
         className: "p-panelmenu-root-submenu",
-        multiple: props.multiple,
         submenuIcon: props.submenuIcon,
-        root: true,
         ptm: ptm,
         cx: cx
       })))));
@@ -647,13 +1227,12 @@ this.primereact.panelmenu = (function (exports, React, api, componentbase, csstr
     };
     var panels = createPanels();
     var rootProps = utils.mergeProps({
+      ref: elementRef,
       className: cx('root'),
+      id: props.id,
       style: props.style
     }, PanelMenuBase.getOtherProps(props), ptm('root'));
-    return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      id: props.id,
-      ref: elementRef
-    }, rootProps), panels);
+    return /*#__PURE__*/React__namespace.createElement("div", rootProps, panels);
   }));
   PanelMenu.displayName = 'PanelMenu';