primereact 10.2.1 → 10.3.1

package/panelmenu/panelmenu.cjs.js

@@ -88,35 +88,8 @@ function _defineProperty(obj, key, value) {
   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) {
@@ -151,6 +124,21 @@ function _iterableToArrayLimit(r, l) {
   }
 }
 
+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.");
 }
@@ -159,12 +147,25 @@ function _slicedToArray(arr, i) {
   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) {
@@ -179,12 +180,13 @@ var classes = {
       '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', {
@@ -196,7 +198,8 @@ var classes = {
     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', {
@@ -204,14 +207,19 @@ var classes = {
     });
   },
   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',
@@ -219,7 +227,11 @@ var PanelMenuBase = componentbase.ComponentBase.extend({
     model: null,
     style: null,
     submenuIcon: null,
+    expandedKeys: null,
     className: null,
+    onExpandedKeysChange: null,
+    onOpen: null,
+    onClose: null,
     multiple: false,
     transitionOptions: null,
     children: undefined
@@ -232,77 +244,81 @@ var PanelMenuBase = componentbase.ComponentBase.extend({
 
 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;
@@ -314,14 +330,14 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
     }, _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: {
@@ -336,10 +352,15 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
       }, 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
@@ -347,12 +368,15 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
     }
     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
     });
@@ -361,38 +385,35 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
       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,
@@ -404,19 +425,34 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
       };
       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;
@@ -424,13 +460,431 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
   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) {
@@ -444,19 +898,20 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     _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,
@@ -465,24 +920,6 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   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();
@@ -497,30 +934,163 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         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
       }
     });
   };
@@ -536,17 +1106,15 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     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;
@@ -556,31 +1124,25 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       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 = {
@@ -604,24 +1166,42 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         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: {
@@ -629,25 +1209,25 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         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
     })))));
@@ -657,13 +1237,12 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   };
   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';