primereact 10.2.1 → 10.3.1

package/megamenu/megamenu.cjs.js

@@ -92,6 +92,10 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+function _readOnlyError(name) {
+  throw new TypeError("\"" + name + "\" is read-only");
+}
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -157,7 +161,8 @@ var classes = {
       'p-megamenu-mobile-active': mobileActiveState
     });
   },
-  separator: 'p-menu-separator',
+  content: 'p-menuitem-content',
+  separator: 'p-menuitem-separator',
   submenuIcon: 'p-submenu-icon',
   action: function action(_ref2) {
     var item = _ref2.item;
@@ -165,20 +170,29 @@ var classes = {
       'p-disabled': item.disabled
     });
   },
-  submenuItem: 'p-menuitem',
-  submenuHeader: function submenuHeader(_ref3) {
-    var submenu = _ref3.submenu;
-    return utils.classNames('p-megamenu-submenu-header', {
-      'p-disabled': submenu.disabled
+  submenuItem: function submenuItem(_ref3) {
+    var focused = _ref3.focused,
+      disabled = _ref3.disabled,
+      active = _ref3.active;
+    return utils.classNames('p-menuitem', {
+      'p-menuitem-active': active,
+      'p-focus': focused,
+      'p-disabled': disabled
     });
   },
-  submenu: 'p-megamenu-submenu',
+  submenuHeader: function submenuHeader(_ref4) {
+    var disabled = _ref4.disabled;
+    return utils.classNames('p-megamenu-submenu-header p-submenu-header', {
+      'p-disabled': disabled
+    });
+  },
+  submenu: 'p-submenu-list p-megamenu-submenu',
   panel: 'p-megamenu-panel',
   grid: 'p-megamenu-grid',
   icon: 'p-menuitem-icon',
   label: 'p-menuitem-text',
-  column: function column(_ref4) {
-    var category = _ref4.category;
+  column: function column(_ref5) {
+    var category = _ref5.category;
     var length = category.items ? category.items.length : 0;
     var columnClass;
     switch (length) {
@@ -200,18 +214,16 @@ var classes = {
     }
     return columnClass;
   },
-  headerAction: function headerAction(_ref5) {
-    var category = _ref5.category;
-    return utils.classNames('p-menuitem-link', {
-      'p-disabled': category.disabled
-    });
-  },
   menuButton: 'p-megamenu-button',
   menuitem: function menuitem(_ref6) {
     var category = _ref6.category,
-      activeItemState = _ref6.activeItemState;
+      activeItemState = _ref6.activeItemState,
+      focused = _ref6.focused,
+      disabled = _ref6.disabled;
     return utils.classNames('p-menuitem', {
-      'p-menuitem-active': category === activeItemState
+      'p-menuitem-active p-highlight': activeItemState && activeItemState.item === category,
+      'p-focus': focused,
+      'p-disabled': disabled
     });
   },
   menubar: 'p-megamenu-root-list',
@@ -219,7 +231,7 @@ var classes = {
   start: 'p-megamenu-start',
   end: 'p-megamenu-end'
 };
-var styles = "\n@layer primereact {\n    .p-megamenu {\n        display: flex;\n    }\n    \n    .p-megamenu-root-list {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n    \n    .p-megamenu-root-list > .p-menuitem {\n        position: relative;\n    }\n    \n    .p-megamenu .p-menuitem-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        text-decoration: none;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-megamenu .p-menuitem-text {\n        line-height: 1;\n    }\n    \n    .p-megamenu-panel {\n        display: none;\n        position: absolute;\n        width: auto;\n        z-index: 1;\n    }\n    \n    .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {\n        display: block;\n    }\n    \n    .p-megamenu-submenu {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n    \n    /* Horizontal */\n    .p-megamenu-horizontal {\n        align-items: center;\n    }\n    \n    .p-megamenu-horizontal .p-megamenu-root-list {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n    }\n    \n    .p-megamenu-horizontal .p-megamenu-custom,\n    .p-megamenu-horizontal .p-megamenu-end {\n        margin-left: auto;\n        align-self: center;\n    }\n    \n    /* Vertical */\n    .p-megamenu-vertical {\n        flex-direction: column;\n    }\n    \n    .p-megamenu-vertical .p-megamenu-root-list {\n        flex-direction: column;\n    }\n    \n    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {\n        left: 100%;\n        top: 0;\n    }\n    \n    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {\n        margin-left: auto;\n    }\n    \n    .p-megamenu-grid {\n        display: flex;\n    }\n    \n    .p-megamenu-col-2,\n    .p-megamenu-col-3,\n    .p-megamenu-col-4,\n    .p-megamenu-col-6,\n    .p-megamenu-col-12 {\n        flex: 0 0 auto;\n        padding: 0.5rem;\n    }\n    \n    .p-megamenu-col-2 {\n        width: 16.6667%;\n    }\n    \n    .p-megamenu-col-3 {\n        width: 25%;\n    }\n    \n    .p-megamenu-col-4 {\n        width: 33.3333%;\n    }\n    \n    .p-megamenu-col-6 {\n        width: 50%;\n    }\n    \n    .p-megamenu-col-12 {\n        width: 100%;\n    }\n    \n    .p-megamenu-button {\n        display: none;\n        cursor: pointer;\n        align-items: center;\n        justify-content: center;\n        text-decoration: none;\n    }\n}\n";
+var styles = "\n@layer primereact {\n    .p-megamenu {\n        display: flex;\n    }\n\n    .p-megamenu-root-list {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n\n    .p-megamenu-root-list > .p-menuitem {\n        position: relative;\n    }\n\n    .p-megamenu .p-menuitem-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        text-decoration: none;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-megamenu .p-menuitem-text {\n        line-height: 1;\n    }\n\n    .p-megamenu-panel {\n        display: none;\n        position: absolute;\n        width: auto;\n        z-index: 1;\n    }\n\n    .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {\n        display: block;\n    }\n\n    .p-megamenu-submenu {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n\n    /* Horizontal */\n    .p-megamenu-horizontal {\n        align-items: center;\n    }\n\n    .p-megamenu-horizontal .p-megamenu-root-list {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n    }\n\n    .p-megamenu-horizontal .p-megamenu-custom,\n    .p-megamenu-horizontal .p-megamenu-end {\n        margin-left: auto;\n        align-self: center;\n    }\n\n    /* Vertical */\n    .p-megamenu-vertical {\n        flex-direction: column;\n    }\n\n    .p-megamenu-vertical .p-megamenu-root-list {\n        flex-direction: column;\n    }\n\n    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {\n        left: 100%;\n        top: 0;\n    }\n\n    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {\n        margin-left: auto;\n    }\n\n    .p-megamenu-grid {\n        display: flex;\n    }\n\n    .p-megamenu-col-2,\n    .p-megamenu-col-3,\n    .p-megamenu-col-4,\n    .p-megamenu-col-6,\n    .p-megamenu-col-12 {\n        flex: 0 0 auto;\n        padding: 0.5rem;\n    }\n\n    .p-megamenu-col-2 {\n        width: 16.6667%;\n    }\n\n    .p-megamenu-col-3 {\n        width: 25%;\n    }\n\n    .p-megamenu-col-4 {\n        width: 33.3333%;\n    }\n\n    .p-megamenu-col-6 {\n        width: 50%;\n    }\n\n    .p-megamenu-col-12 {\n        width: 100%;\n    }\n\n    .p-megamenu-button {\n        display: none;\n        cursor: pointer;\n        align-items: center;\n        justify-content: center;\n        text-decoration: none;\n    }\n}\n";
 var MegaMenuBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'MegaMenu',
@@ -232,6 +244,9 @@ var MegaMenuBase = componentbase.ComponentBase.extend({
     scrollHeight: '400px',
     start: null,
     submenuIcon: null,
+    onFocus: null,
+    onBlur: null,
+    tabIndex: 0,
     menuIcon: null,
     end: null,
     children: undefined
@@ -257,13 +272,48 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     setActiveItemState = _React$useState4[1];
   var _React$useState5 = React__namespace.useState(null),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    attributeSelectorState = _React$useState6[0],
-    setAttributeSelectorState = _React$useState6[1];
-  var _React$useState7 = React__namespace.useState(false),
+    focused = _React$useState6[0],
+    setFocused = _React$useState6[1];
+  var _React$useState7 = React__namespace.useState({
+      index: -1,
+      key: '',
+      parentKey: ''
+    }),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    mobileActiveState = _React$useState8[0],
-    setMobileActiveState = _React$useState8[1];
+    focusedItemInfo = _React$useState8[0],
+    setFocusedItemInfo = _React$useState8[1];
+  var _React$useState9 = React__namespace.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    focusedItemId = _React$useState10[0],
+    setFocusedItemId = _React$useState10[1];
+  var _React$useState11 = React__namespace.useState(false),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    dirty = _React$useState12[0],
+    setDirty = _React$useState12[1];
+  var _React$useState13 = React__namespace.useState(null),
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    processedItems = _React$useState14[0],
+    setProcessedItems = _React$useState14[1];
+  var _React$useState15 = React__namespace.useState([]),
+    _React$useState16 = _slicedToArray(_React$useState15, 2),
+    visibleItems = _React$useState16[0],
+    setVisibleItems = _React$useState16[1];
+  var _React$useState17 = React__namespace.useState(null),
+    _React$useState18 = _slicedToArray(_React$useState17, 2),
+    attributeSelectorState = _React$useState18[0],
+    setAttributeSelectorState = _React$useState18[1];
+  var _React$useState19 = React__namespace.useState(false),
+    _React$useState20 = _slicedToArray(_React$useState19, 2),
+    mobileActiveState = _React$useState20[0],
+    setMobileActiveState = _React$useState20[1];
+  var _React$useState21 = React__namespace.useState(false),
+    _React$useState22 = _slicedToArray(_React$useState21, 2),
+    focusTrigger = _React$useState22[0],
+    setFocusTrigger = _React$useState22[1];
+  var searchValue = React__namespace.useRef('');
+  var searchTimeout = React__namespace.useRef(null);
   var elementRef = React__namespace.useRef(null);
+  var menubarRef = React__namespace.useRef(null);
   var styleElementRef = React__namespace.useRef(null);
   var menuButtonRef = React__namespace.useRef(null);
   var horizontal = props.orientation === 'horizontal';
@@ -273,7 +323,7 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       props: props,
       state: {
         id: idState,
-        activeItem: activeItemState,
+        activeItem: activeItemState && activeItemState.item,
         attributeSelector: attributeSelectorState,
         mobileActive: mobileActiveState
       }
@@ -284,11 +334,13 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   componentbase.useHandleStyle(MegaMenuBase.css.styles, isUnstyled, {
     name: 'megamenu'
   });
-  var getPTOptions = function getPTOptions(item, key, index) {
+  var getPTOptions = function getPTOptions(processedItem, key, index) {
     return ptm(key, {
       context: {
-        active: activeItemState === item,
-        item: item,
+        active: isItemActive(processedItem),
+        focused: isItemFocused(processedItem),
+        disabled: isItemDisabled(processedItem),
+        item: processedItem,
         index: index
       }
     });
@@ -296,128 +348,181 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var _useEventListener = hooks.useEventListener({
       type: 'click',
       listener: function listener(event) {
-        if ((!isMobileMode || mobileActiveState) && isOutsideClicked(event)) {
-          setActiveItemState(null);
-          setMobileActiveState(false);
+        if (isOutsideClicked(event)) {
+          hide();
         }
       }
     }),
-    _useEventListener2 = _slicedToArray(_useEventListener, 1),
-    bindDocumentClickListener = _useEventListener2[0];
+    _useEventListener2 = _slicedToArray(_useEventListener, 2),
+    bindDocumentClickListener = _useEventListener2[0],
+    unbindDocumentClickListener = _useEventListener2[1];
   var _useResizeListener = hooks.useResizeListener({
+      type: 'resize',
       listener: function listener() {
-        if (!isMobileMode || mobileActiveState) {
-          setActiveItemState(null);
-          setMobileActiveState(false);
-        }
+        hide();
       }
     }),
-    _useResizeListener2 = _slicedToArray(_useResizeListener, 1),
-    bindDocumentResizeListener = _useResizeListener2[0];
-  var onLeafClick = function onLeafClick(event, item) {
+    _useResizeListener2 = _slicedToArray(_useResizeListener, 2),
+    bindDocumentResizeListener = _useResizeListener2[0],
+    unbindDocumentResizeListener = _useResizeListener2[1];
+  var bindListeners = function bindListeners() {
+    bindDocumentClickListener();
+    bindDocumentResizeListener();
+  };
+  var unbindListeners = function unbindListeners() {
+    unbindDocumentClickListener();
+    unbindDocumentResizeListener();
+  };
+  var onLeafClick = function onLeafClick(event) {
+    var originalEvent = event.originalEvent,
+      processedItem = event.processedItem;
+    var item = processedItem.item;
     if (item.disabled) {
-      event.preventDefault();
+      originalEvent.preventDefault();
       return;
     }
     if (!item.url) {
-      event.preventDefault();
+      originalEvent.preventDefault();
     }
     if (item.command) {
       item.command({
-        originalEvent: event,
+        originalEvent: originalEvent,
         item: item
       });
     }
-    setActiveItemState(null);
-    setMobileActiveState(false);
-  };
-  var onCategoryMouseEnter = function onCategoryMouseEnter(event, item) {
-    if (item.disabled || isMobileMode) {
-      event.preventDefault();
-      return;
+    var grouped = isProccessedItemGroup(processedItem);
+    var selected = isSelected(processedItem);
+    if (selected) {
+      var index = processedItem.index,
+        key = processedItem.key,
+        parentKey = processedItem.parentKey;
+      setActiveItemState(null);
+      setFocusedItemInfo({
+        index: index,
+        key: key,
+        parentKey: parentKey
+      });
+    } else {
+      if (grouped) {
+        onItemChange(event);
+      } else {
+        var rootProcessedItemIndex = activeItemState ? activeItemState.index : -1;
+        var rootProcessedItemKey = activeItemState ? activeItemState.key : '';
+        hide(originalEvent);
+        setFocusedItemInfo({
+          index: rootProcessedItemIndex,
+          key: rootProcessedItemKey,
+          parentKey: ''
+        });
+        setMobileActiveState(false);
+      }
     }
-    if (activeItemState) {
-      setActiveItemState(item);
+  };
+  var onItemChange = function onItemChange(event) {
+    var processedItem = event.processedItem,
+      isFocus = event.isFocus;
+    if (utils.ObjectUtils.isEmpty(processedItem)) return;
+    var index = processedItem.index,
+      key = processedItem.key,
+      parentKey = processedItem.parentKey,
+      items = processedItem.items;
+    var grouped = utils.ObjectUtils.isNotEmpty(items);
+    grouped && setActiveItemState(processedItem);
+    setFocusedItemInfo({
+      index: index,
+      key: key,
+      parentKey: parentKey
+    });
+    grouped && setDirty(true);
+    isFocus && utils.DomHandler.focus(menubarRef.current);
+  };
+  var onCategoryMouseEnter = function onCategoryMouseEnter(event) {
+    if (!mobileActiveState && dirty) {
+      onItemChange(event);
     }
   };
-  var onCategoryClick = function onCategoryClick(event, item) {
+  var onCategoryClick = function onCategoryClick(event) {
+    var originalEvent = event.originalEvent,
+      processedItem = event.processedItem;
+    var item = processedItem.item;
     if (item.disabled) {
-      event.preventDefault();
+      originalEvent.preventDefault();
       return;
     }
     if (!item.url) {
-      event.preventDefault();
+      originalEvent.preventDefault();
     }
     if (item.command) {
       item.command({
-        originalEvent: event,
+        originalEvent: originalEvent,
         item: props.item
       });
-      event.preventDefault();
+      originalEvent.preventDefault();
     }
-    if (item.items) {
-      activeItemState && activeItemState === item ? setActiveItemState(null) : setActiveItemState(item);
-      event.preventDefault();
+    var grouped = isProccessedItemGroup(processedItem);
+    var root = utils.ObjectUtils.isEmpty(processedItem.parent);
+    var selected = isSelected(processedItem);
+    if (selected) {
+      var index = processedItem.index,
+        key = processedItem.key,
+        parentKey = processedItem.parentKey;
+      setActiveItemState(null);
+      setFocusedItemInfo({
+        index: index,
+        key: key,
+        parentKey: parentKey
+      });
+      setDirty(!root);
+    } else {
+      if (grouped) {
+        onItemChange(event);
+      } else {
+        var rootProcessedItem = root ? processedItem : activeItemState;
+        hide();
+        changeFocusedItemInfo(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
+        setMobileActiveState(false);
+        utils.DomHandler.focus(menubarRef.current);
+      }
     }
   };
-  var onCategoryKeyDown = function onCategoryKeyDown(event, item) {
-    var listItem = event.currentTarget.parentElement;
-    switch (event.which) {
-      //down
-      case 40:
-        horizontal ? expandMenu(item) : navigateToNextItem(listItem);
-        event.preventDefault();
-        break;
-
-      //up
-      case 38:
-        vertical ? navigateToPrevItem(listItem) : item.items && item === activeItemState && collapseMenu();
-        event.preventDefault();
-        break;
-
-      //right
-      case 39:
-        horizontal ? navigateToNextItem(listItem) : expandMenu(item);
-        event.preventDefault();
-        break;
-
-      //left
-      case 37:
-        horizontal ? navigateToPrevItem(listItem) : item.items && item === activeItemState && collapseMenu();
-        event.preventDefault();
-        break;
-    }
+  var show = function show() {
+    setFocusedItemInfo({
+      index: findFirstFocusedItemIndex(),
+      level: 0,
+      parentKey: ''
+    });
   };
-  var expandMenu = function expandMenu(item) {
-    if (item.items) {
-      setActiveItemState(item);
+  var hide = function hide(isFocus) {
+    if (mobileActiveState) {
+      setMobileActiveState(false);
+      setTimeout(function () {
+        utils.DomHandler.focus(menuButtonRef.current);
+      }, 0);
     }
-  };
-  var collapseMenu = function collapseMenu(item) {
     setActiveItemState(null);
+    if (isFocus) {
+      setFocusedItemInfo({
+        index: -1,
+        key: '',
+        parentKey: ''
+      });
+      utils.DomHandler.focus(menubarRef.current);
+    }
+    setDirty(false);
   };
   var toggle = function toggle(event) {
     event.preventDefault();
-    setMobileActiveState(function (prevMobileActive) {
-      return !prevMobileActive;
-    });
-    setActiveItemState(null);
-  };
-  var findNextItem = function findNextItem(item) {
-    var nextItem = item.nextElementSibling;
-    return nextItem ? utils.DomHandler.getAttribute(nextItem, '[data-p-disabled="true"]') || !utils.DomHandler.getAttribute(nextItem, '[data-pc-section="menuitem"]') ? findNextItem(nextItem) : nextItem : null;
-  };
-  var findPrevItem = function findPrevItem(item) {
-    var prevItem = item.previousElementSibling;
-    return prevItem ? utils.DomHandler.getAttribute(prevItem, '[data-p-disabled="true"]') || !utils.DomHandler.getAttribute(prevItem, '[data-pc-section="menuitem"]') ? findPrevItem(prevItem) : prevItem : null;
-  };
-  var navigateToNextItem = function navigateToNextItem(listItem) {
-    var nextItem = findNextItem(listItem);
-    nextItem && nextItem.children[0].focus();
-  };
-  var navigateToPrevItem = function navigateToPrevItem(listItem) {
-    var prevItem = findPrevItem(listItem);
-    prevItem && prevItem.children[0].focus();
+    if (mobileActiveState) {
+      setMobileActiveState(false);
+      utils.ZIndexUtils.clear(menubarRef.current);
+      hide();
+    } else {
+      setMobileActiveState(true);
+      utils.ZIndexUtils.set('menu', menubarRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex['menu'] || PrimeReact__default["default"].zIndex['menu']);
+      setTimeout(function () {
+        show();
+      }, 1);
+    }
   };
   var isOutsideClicked = function isOutsideClicked(event) {
     return elementRef.current && !(elementRef.current.isSameNode(event.target) || elementRef.current.contains(event.target) || menuButtonRef.current && menuButtonRef.current.contains(event.target));
@@ -436,13 +541,39 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     if (props.breakpoint) {
       !attributeSelectorState && setAttributeSelectorState(uniqueId);
     }
-    bindDocumentClickListener();
-    bindDocumentResizeListener();
   });
+  hooks.useUpdateEffect(function () {
+    if (attributeSelectorState && elementRef.current) {
+      elementRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
+    return function () {
+      destroyStyle();
+    };
+  }, [attributeSelectorState, props.breakpoint]);
+  hooks.useUpdateEffect(function () {
+    if (mobileActiveState) {
+      bindListeners();
+    } else {
+      unbindListeners();
+    }
+  }, [mobileActiveState]);
+  hooks.useUpdateEffect(function () {
+    if (focusTrigger) {
+      var itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
+      changeFocusedItemInfo(itemIndex);
+      setFocusTrigger(false);
+    }
+  }, [focusTrigger]);
   hooks.useUpdateEffect(function () {
     var currentPanel = utils.DomHandler.findSingle(elementRef.current, '.p-menuitem-active > .p-megamenu-panel');
-    if (activeItemState && !isMobileMode) {
-      utils.ZIndexUtils.set('menu', currentPanel, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex['menu'] || PrimeReact__default["default"].zIndex['menu']);
+    if (activeItemState) {
+      bindListeners();
+      if (!isMobileMode) {
+        utils.ZIndexUtils.set('menu', currentPanel, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex['menu'] || PrimeReact__default["default"].zIndex['menu']);
+      }
+    } else {
+      unbindListeners();
     }
     if (isMobileMode) {
       currentPanel && currentPanel.previousElementSibling.scrollIntoView({
@@ -451,9 +582,442 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       });
     }
     return function () {
+      unbindListeners();
       utils.ZIndexUtils.clear(currentPanel);
     };
-  }, [activeItemState]);
+  }, [activeItemState, isMobileMode]);
+  hooks.useUpdateEffect(function () {
+    var _focusedItemId = utils.ObjectUtils.isNotEmpty(focusedItemInfo.key) ? "".concat(idState, "_").concat(focusedItemInfo.key) : null;
+    setFocusedItemId(_focusedItemId);
+  }, [focusedItemInfo]);
+  React__namespace.useEffect(function () {
+    var itemsToProcess = props.model || [];
+    var processed = createProcessedItems(itemsToProcess, 0, null, '');
+    setProcessedItems(processed);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.model]);
+  hooks.useUpdateEffect(function () {
+    var processedItem = utils.ObjectUtils.isNotEmpty(activeItemState) ? activeItemState : null;
+    var _visibleItems = processedItem && processedItem.key === focusedItemInfo.parentKey ? processedItem.items.reduce(function (items, col) {
+      col.forEach(function (submenu) {
+        submenu.items.forEach(function (a) {
+          items.push(a);
+        });
+      });
+      return items;
+    }, []) : processedItems;
+    setVisibleItems(_visibleItems);
+  }, [focusedItemInfo, activeItemState, processedItems]);
+  var onFocus = function onFocus(event) {
+    setFocused(true);
+    if (focusedItemInfo.index === -1) {
+      var index = findFirstFocusedItemIndex();
+      var processedItem = findVisibleItem(index);
+      setFocusedItemInfo({
+        index: index,
+        key: processedItem.key,
+        parentKey: processedItem.parentKey
+      });
+    }
+    props.onFocus && props.onFocus(event);
+  };
+  var onBlur = function onBlur(event) {
+    setFocused(false);
+    setFocusedItemInfo({
+      index: -1,
+      key: '',
+      parentKey: ''
+    });
+    searchValue.current = '';
+    setDirty(false);
+    props.onBlur && props.onBlur(event);
+  };
+  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':
+        onEnterKey(event);
+        break;
+      case 'Escape':
+        onEscapeKey(event);
+        break;
+      case 'Tab':
+        onTabKey(event);
+        break;
+      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) {
+    event.preventDefault();
+    if (horizontal) {
+      var _focusedItemInfo = focusedItemInfo;
+      if (utils.ObjectUtils.isNotEmpty(activeItemState) && activeItemState.key === focusedItemInfo.key) {
+        (({
+          index: -1,
+          key: '',
+          parentKey: activeItemState.key
+        })), _readOnlyError("_focusedItemInfo");
+        setFocusedItemInfo(_focusedItemInfo);
+      } else {
+        var processedItem = findVisibleItem(focusedItemInfo.index);
+        var grouped = isProccessedItemGroup(processedItem);
+        if (grouped) {
+          onItemChange({
+            originalEvent: event,
+            processedItem: processedItem
+          });
+          (({
+            index: -1,
+            key: processedItem.key,
+            parentKey: processedItem.parentKey
+          })), _readOnlyError("_focusedItemInfo");
+          setFocusedItemInfo(_focusedItemInfo);
+          searchValue.current = '';
+        }
+      }
+      setTimeout(function () {
+        return setFocusTrigger(true);
+      }, 0);
+    } else {
+      var itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
+      changeFocusedItemInfo(itemIndex);
+    }
+  };
+  var onArrowUpKey = function onArrowUpKey(event) {
+    var processedItem = findVisibleItem(focusedItemInfo.index);
+    var grouped = isProccessedItemGroup(processedItem);
+    if (event.altKey && horizontal) {
+      if (focusedItemInfo.index !== -1) {
+        if (!grouped && utils.ObjectUtils.isNotEmpty(activeItemState)) {
+          if (focusedItemInfo.index === 0) {
+            setFocusedItemInfo({
+              index: activeItemState.index,
+              key: activeItemState.key,
+              parentKey: activeItemState.parentKey
+            });
+            setActiveItemState(null);
+          } else {
+            changeFocusedItemInfo(findFirstItemIndex());
+          }
+        }
+      }
+    } else {
+      var itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
+      changeFocusedItemInfo(itemIndex);
+    }
+    event.preventDefault();
+  };
+  var onArrowLeftKey = function onArrowLeftKey(event) {
+    var processedItem = findVisibleItem(focusedItemInfo.index);
+    var grouped = isProccessedItemGroup(processedItem);
+    if (grouped) {
+      if (horizontal) {
+        var itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
+        changeFocusedItemInfo(itemIndex);
+      }
+    } else {
+      if (vertical && utils.ObjectUtils.isNotEmpty(activeItemState)) {
+        if (processedItem.columnIndex === 0) {
+          setFocusedItemInfo({
+            index: activeItemState.index,
+            key: activeItemState.key,
+            parentKey: activeItemState.parentKey
+          });
+          setActiveItemState(null);
+        }
+      }
+      var columnIndex = processedItem.columnIndex - 1;
+      var _itemIndex = visibleItems.findIndex(function (item) {
+        return item.columnIndex === columnIndex;
+      });
+      _itemIndex !== -1 && changeFocusedItemInfo(_itemIndex);
+    }
+    event.preventDefault();
+  };
+  var onArrowRightKey = function onArrowRightKey(event) {
+    event.preventDefault();
+    var processedItem = findVisibleItem(focusedItemInfo.index);
+    var grouped = isProccessedItemGroup(processedItem);
+    if (grouped) {
+      if (vertical) {
+        if (utils.ObjectUtils.isNotEmpty(activeItemState) && activeItemState.key === processedItem.key) {
+          setFocusedItemInfo({
+            index: -1,
+            key: '',
+            parentKey: activeItemState.key
+          });
+        } else {
+          var _processedItem = findVisibleItem(focusedItemInfo.index);
+          var _grouped = isProccessedItemGroup(_processedItem);
+          if (_grouped) {
+            onItemChange({
+              originalEvent: event,
+              processedItem: _processedItem
+            });
+            setFocusedItemInfo({
+              index: -1,
+              key: _processedItem.key,
+              parentKey: _processedItem.parentKey
+            });
+            searchValue.current = '';
+          }
+        }
+      }
+      setTimeout(function () {
+        return setFocusTrigger(true);
+      }, 0);
+    } else {
+      var columnIndex = processedItem.columnIndex + 1;
+      var itemIndex = visibleItems.findIndex(function (item) {
+        return item.columnIndex === columnIndex;
+      });
+      itemIndex !== -1 && changeFocusedItemInfo(itemIndex);
+    }
+  };
+  var onHomeKey = function onHomeKey(event) {
+    changeFocusedItemInfo(findFirstItemIndex());
+    event.preventDefault();
+  };
+  var onEndKey = function onEndKey(event) {
+    changeFocusedItemInfo(findLastItemIndex());
+    event.preventDefault();
+  };
+  var onEnterKey = function onEnterKey(event) {
+    if (focusedItemInfo.index !== -1) {
+      var element = utils.DomHandler.findSingle(menubarRef.current, "li[id=\"".concat(focusedItemId, "\"]"));
+      var anchorElement = element && utils.DomHandler.findSingle(element, 'a[data-pc-section="action"]');
+      anchorElement ? anchorElement.click() : element && element.click();
+    }
+    event.preventDefault();
+  };
+  var onSpaceKey = function onSpaceKey(event) {
+    onEnterKey(event);
+  };
+  var onEscapeKey = function onEscapeKey(event) {
+    if (utils.ObjectUtils.isNotEmpty(activeItemState)) {
+      setFocusedItemInfo({
+        index: activeItemState.index,
+        key: activeItemState.key
+      });
+      setActiveItemState(null);
+    }
+    event.preventDefault();
+  };
+  var onTabKey = function onTabKey(event) {
+    if (focusedItemInfo.index !== -1) {
+      var processedItem = findVisibleItem(focusedItemInfo.index);
+      var grouped = isProccessedItemGroup(processedItem);
+      !grouped && onItemChange({
+        originalEvent: event,
+        processedItem: processedItem
+      });
+    }
+    hide();
+  };
+  var isItemMatched = function isItemMatched(processedItem) {
+    var label = getProccessedItemLabel(processedItem);
+    return isValidItem(processedItem) && label && label.toLocaleLowerCase().startsWith(searchValue.current.toLocaleLowerCase());
+  };
+  var isValidItem = function isValidItem(processedItem) {
+    return !!processedItem && !isItemDisabled(processedItem.item) && !isItemSeparator(processedItem.item);
+  };
+  var isValidSelectedItem = function isValidSelectedItem(processedItem) {
+    return isValidItem(processedItem) && isSelected(processedItem);
+  };
+  var isSelected = function isSelected(processedItem) {
+    return utils.ObjectUtils.isNotEmpty(activeItemState) ? activeItemState.key === processedItem.key : false;
+  };
+  var findFirstItemIndex = function findFirstItemIndex() {
+    return visibleItems.findIndex(function (processedItem) {
+      return isValidItem(processedItem);
+    });
+  };
+  var findLastItemIndex = function findLastItemIndex() {
+    return utils.ObjectUtils.findLastIndex(visibleItems, function (processedItem) {
+      return isValidItem(processedItem);
+    });
+  };
+  var findNextItemIndex = function findNextItemIndex(index) {
+    var matchedItemIndex = index < visibleItems.length - 1 ? visibleItems.slice(index + 1).findIndex(function (processedItem) {
+      return isValidItem(processedItem);
+    }) : -1;
+    return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
+  };
+  var findPrevItemIndex = function findPrevItemIndex(index) {
+    var matchedItemIndex = index > 0 ? utils.ObjectUtils.findLastIndex(visibleItems.slice(0, index), function (processedItem) {
+      return isValidItem(processedItem);
+    }) : -1;
+    return matchedItemIndex > -1 ? matchedItemIndex : index;
+  };
+  var findSelectedItemIndex = function findSelectedItemIndex() {
+    return visibleItems && visibleItems.findIndex(function (processedItem) {
+      return isValidSelectedItem(processedItem);
+    });
+  };
+  var findFirstFocusedItemIndex = function findFirstFocusedItemIndex() {
+    var selectedIndex = findSelectedItemIndex();
+    return selectedIndex < 0 ? findFirstItemIndex() : selectedIndex;
+  };
+  var findLastFocusedItemIndex = function findLastFocusedItemIndex() {
+    var selectedIndex = findSelectedItemIndex();
+    return selectedIndex < 0 ? findLastItemIndex() : selectedIndex;
+  };
+  var findVisibleItem = function findVisibleItem(index) {
+    return utils.ObjectUtils.isNotEmpty(visibleItems) ? visibleItems[index] : null;
+  };
+  var getProccessedItemLabel = function getProccessedItemLabel(processedItem) {
+    return processedItem && processedItem.item ? getItemLabel(processedItem) : undefined;
+  };
+  var searchItems = function searchItems(event, _char) {
+    searchValue.current = (searchValue.current || '') + _char;
+    var itemIndex = -1;
+    var matched = false;
+    if (focusedItemInfo.index !== -1) {
+      itemIndex = visibleItems.slice(focusedItemInfo.index).findIndex(function (processedItem) {
+        return isItemMatched(processedItem);
+      });
+      itemIndex = itemIndex === -1 ? visibleItems.slice(0, focusedItemInfo.index).findIndex(function (processedItem) {
+        return isItemMatched(processedItem);
+      }) : itemIndex + focusedItemInfo.index;
+    } else {
+      itemIndex = visibleItems.findIndex(function (processedItem) {
+        return isItemMatched(processedItem);
+      });
+    }
+    if (itemIndex !== -1) {
+      matched = true;
+    }
+    if (itemIndex === -1 && focusedItemInfo.index === -1) {
+      itemIndex = findFirstFocusedItemIndex();
+    }
+    if (itemIndex !== -1) {
+      changeFocusedItemInfo(itemIndex);
+    }
+    if (searchTimeout) {
+      clearTimeout(searchTimeout);
+    }
+    searchTimeout.current = setTimeout(function () {
+      searchValue.current = '';
+      searchTimeout.current = null;
+    }, 500);
+    return matched;
+  };
+  var changeFocusedItemInfo = function changeFocusedItemInfo(index) {
+    var processedItem = findVisibleItem(index);
+    var key = utils.ObjectUtils.isNotEmpty(processedItem) ? processedItem.key : '';
+    setFocusedItemInfo(_objectSpread(_objectSpread({}, focusedItemInfo), {}, {
+      index: index,
+      key: key
+    }));
+    scrollInView();
+  };
+  var scrollInView = function scrollInView() {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+    var id = index !== -1 ? "".concat(idState, "_").concat(index) : focusedItemId;
+    var element = utils.DomHandler.findSingle(menubarRef.current, "li[id=\"".concat(id, "\"]"));
+    if (element) {
+      element.scrollIntoView && element.scrollIntoView({
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  };
+  var getItemId = function getItemId(processedItem) {
+    return "".concat(idState, "_").concat(processedItem.key);
+  };
+  var getItemProp = function getItemProp(processedItem, name, params) {
+    return processedItem && processedItem.item ? utils.ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
+  };
+  var getItemLabel = function getItemLabel(processedItem) {
+    return getItemProp(processedItem, 'label');
+  };
+  var isItemActive = function isItemActive(processedItem) {
+    return utils.ObjectUtils.isNotEmpty(activeItemState) ? activeItemState.key === processedItem.key : false;
+  };
+  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 focusedItemId === getItemId(processedItem);
+  };
+  var isItemGroup = function isItemGroup(processedItem) {
+    return utils.ObjectUtils.isNotEmpty(processedItem.items);
+  };
+  var isItemSeparator = function isItemSeparator(item) {
+    return getItemProp(item, 'separator');
+  };
+  var isProccessedItemGroup = function isProccessedItemGroup(processedItem) {
+    return processedItem && utils.ObjectUtils.isNotEmpty(processedItem.items);
+  };
+  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;
+  };
+  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 columnIndex = arguments.length > 4 ? arguments[4] : undefined;
+    var _processedItems = [];
+    items && items.forEach(function (item, index) {
+      var key = (parentKey !== '' ? parentKey + '_' : '') + (columnIndex !== undefined ? columnIndex + '_' : '') + index;
+      var newItem = {
+        item: item,
+        index: index,
+        level: level,
+        key: key,
+        parent: parent,
+        parentKey: parentKey,
+        columnIndex: columnIndex !== undefined ? columnIndex : parent && parent.columnIndex !== undefined ? parent.columnIndex : index
+      };
+      newItem['items'] = level === 0 && item.items && item.items.length > 0 ? item.items.map(function (_items, _index) {
+        return createProcessedItems(_items, level + 1, newItem, key, _index);
+      }) : createProcessedItems(item.items, level + 1, newItem, key);
+      _processedItems.push(newItem);
+    });
+    return _processedItems;
+  };
   var createSeparator = function createSeparator(index) {
     var key = idState + '_separator__' + index;
     var separatorProps = utils.mergeProps({
@@ -477,14 +1041,15 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
     return null;
   };
-  var createSubmenuItem = function createSubmenuItem(item, index) {
+  var createSubmenuItem = function createSubmenuItem(processedItem, index) {
+    var item = processedItem.item;
     if (item.visible === false) {
       return null;
     }
     if (item.separator) {
       return createSeparator(index);
     } else {
-      var key = item.id || idState + '_' + index;
+      var key = getItemId(processedItem);
       var linkClassName = utils.classNames('p-menuitem-link', {
         'p-disabled': item.disabled
       });
@@ -505,25 +1070,46 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           item: item
         }),
         target: item.target,
-        onClick: function onClick(event) {
-          return onLeafClick(event, item);
-        },
-        role: 'menuitem',
-        'aria-disabled': item.disabled
-      }, getPTOptions(item, 'action', index));
+        tabIndex: '-1',
+        'aria-hidden': true
+      }, getPTOptions(processedItem, 'action', index));
+      var isFocused = isItemFocused(processedItem);
+      var isDisabled = isItemDisabled(processedItem);
+      var isGroup = isItemGroup(processedItem);
+      var isActive = isItemActive(processedItem);
       var submenuItemProps = utils.mergeProps({
         key: key,
         id: key,
-        className: utils.classNames(item.className, cx('submenuItem')),
+        'aria-label': getItemLabel(processedItem),
+        'aria-disabled': isDisabled,
+        'aria-haspopup': isGroup ? 'menu' : undefined,
+        'aria-level': '2',
+        'aria-expanded': isGroup ? isActive : undefined,
+        'aria-setsize': getAriaSetSize(),
+        'aria-posinset': getAriaPosInset(index),
+        'data-p-highlight': isActive,
+        'data-p-disabled': isDisabled,
+        'data-p-focused': isFocused,
+        className: utils.classNames(item.className, cx('submenuItem', {
+          focused: isFocused,
+          disabled: isDisabled,
+          active: isActive
+        })),
         style: item.style,
-        role: 'none'
-      }, getPTOptions(item, 'submenuItem', index));
+        role: 'menuitem'
+      }, getPTOptions(processedItem, 'submenuItem', index));
+      var contentProps = utils.mergeProps({
+        onClick: function onClick(event) {
+          return onLeafClick({
+            originalEvent: event,
+            processedItem: processedItem
+          });
+        },
+        className: cx('content')
+      }, getPTOptions(processedItem, 'content', index));
       var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, icon, label, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       if (item.template) {
         var defaultContentOptions = {
-          onClick: function onClick(event) {
-            return onLeafClick(event, item);
-          },
           className: linkClassName,
           labelClassName: 'p-menuitem-text',
           iconClassName: iconClassName,
@@ -532,47 +1118,52 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         };
         content = utils.ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
       }
-      return /*#__PURE__*/React__namespace.createElement("li", submenuItemProps, content);
+      return /*#__PURE__*/React__namespace.createElement("li", submenuItemProps, /*#__PURE__*/React__namespace.createElement("div", contentProps, content));
     }
   };
   var createSubmenu = function createSubmenu(submenu, index) {
-    if (submenu.visible === false) {
+    if (!isItemVisible(submenu)) {
       return null;
     }
     var items = submenu.items.map(createSubmenuItem);
     var key = submenu.id || idState + '_sub_' + index;
+    var label = getItemLabel(submenu);
+    var isDisabled = isItemDisabled(submenu);
     var submenuHeaderProps = utils.mergeProps({
       id: key,
       key: key,
       className: utils.classNames(submenu.className, cx('submenuHeader', {
-        submenu: submenu
+        disabled: isDisabled
       })),
       style: submenu.style,
       role: 'presentation',
-      'data-p-disabled': submenu.disabled
+      'data-p-disabled': isDisabled
     }, ptm('submenuHeader'));
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
       key: key
-    }, /*#__PURE__*/React__namespace.createElement("li", submenuHeaderProps, submenu.label), items);
+    }, /*#__PURE__*/React__namespace.createElement("li", submenuHeaderProps, label), items);
   };
   var createSubmenus = function createSubmenus(column) {
     return column.map(createSubmenu);
   };
-  var createColumn = function createColumn(category, column, index) {
+  var createColumn = function createColumn(processedItem, processedColumn, index) {
+    var category = processedItem.item;
     var key = category.label + '_column_' + index;
-    var submenus = createSubmenus(column);
+    var submenus = createSubmenus(processedColumn);
     var columnProps = utils.mergeProps({
       key: key,
       className: cx('column', {
         category: category
       })
     }, ptm('column'));
+    var display = activeItemState && activeItemState.item === category ? 'block' : 'none';
     var submenuProps = utils.mergeProps({
+      role: 'menu',
+      tabIndex: props.disabled ? null : props.tabIndex || '0',
       className: cx('submenu'),
       style: {
-        display: activeItemState === category ? 'block' : 'none'
-      },
-      role: 'menu'
+        display: display
+      }
     }, ptm('submenu'));
     return /*#__PURE__*/React__namespace.createElement("div", columnProps, /*#__PURE__*/React__namespace.createElement("ul", submenuProps, submenus));
   };
@@ -584,9 +1175,10 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
     return null;
   };
-  var createCategoryPanel = function createCategoryPanel(category) {
+  var createCategoryPanel = function createCategoryPanel(processedItem) {
+    var category = processedItem.item;
     if (category.items) {
-      var columns = createColumns(category);
+      var columns = createColumns(processedItem);
       var panelProps = utils.mergeProps({
         className: cx('panel')
       }, ptm('panel'));
@@ -599,7 +1191,7 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var createStyle = function createStyle() {
     if (!styleElementRef.current) {
-      styleElementRef.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce);
+      styleElementRef.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce, context && context.styleContainer);
       var selector = "".concat(attributeSelectorState);
       var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-megamenu[").concat(selector, "] > .p-megamenu-root-list .p-menuitem-active .p-megamenu-panel {\n        position: relative;\n        left: 0;\n        box-shadow: none;\n        border-radius: 0;\n        background: inherit;\n    }\n\n    .p-megamenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-megamenu[").concat(selector, "] .p-megamenu-grid {\n        flex-wrap: wrap;\n    }\n\n    ").concat(horizontal ? "\n.p-megamenu[".concat(selector, "] .p-megamenu-button {\n    display: flex;\n}\n\n.p-megamenu[").concat(selector, "].p-megamenu-horizontal {\n    position: relative;\n}\n\n.p-megamenu[").concat(selector, "].p-megamenu-horizontal .p-megamenu-root-list {\n    display: none;\n}\n\n.p-megamenu-horizontal[").concat(selector, "] div[class*=\"p-megamenu-col-\"] {\n    width: auto;\n    flex: 1;\n    padding: 0;\n}\n\n.p-megamenu[").concat(selector, "].p-megamenu-mobile-active .p-megamenu-root-list {\n    display: flex;\n    flex-direction: column;\n    position: absolute;\n    width: 100%;\n    top: 100%;\n    left: 0;\n    z-index: 1;\n}\n        ") : '', "\n\n    ").concat(vertical ? "\n.p-megamenu-vertical[".concat(selector, "] {\n    width: 100%;\n}\n\n.p-megamenu-vertical[").concat(selector, "] .p-megamenu-root-list {\n    max-height: ").concat(props.scrollHeight, ";\n    overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n}\n.p-megamenu-vertical[").concat(selector, "] div[class*=\"p-megamenu-col-\"] {\n    width: 100%;\n    padding: 0;\n}\n\n.p-megamenu-vertical[").concat(selector, "] .p-megamenu-submenu {\n    width: 100%;\n}\n\n.p-megamenu-vertical[").concat(selector, "] div[class*=\"p-megamenu-col-\"] .p-megamenu-submenu-header {\n    background: inherit;\n}\n\n.p-megamenu-vertical[").concat(selector, "] .p-submenu-icon:before {\n    content: \"\\e930\";\n}\n        ") : '', "\n}\n");
       styleElementRef.current.innerHTML = innerHTML;
@@ -608,69 +1200,92 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var destroyStyle = function destroyStyle() {
     styleElementRef.current = utils.DomHandler.removeInlineStyle(styleElementRef.current);
   };
-  hooks.useUpdateEffect(function () {
-    if (attributeSelectorState && elementRef.current) {
-      elementRef.current.setAttribute(attributeSelectorState, '');
-      createStyle();
-    }
-    return function () {
-      destroyStyle();
-    };
-  }, [attributeSelectorState, props.breakpoint]);
-  var createCategory = function createCategory(category, index) {
+  var createCategory = function createCategory(processedItem, index) {
+    var category = processedItem.item;
     var iconProps = utils.mergeProps({
       className: cx('icon')
-    }, getPTOptions(category, 'icon', index));
+    }, getPTOptions(processedItem, 'icon', index));
     var icon = utils.IconUtils.getJSXIcon(category.icon, _objectSpread({}, iconProps), {
       props: props
     });
     var labelProps = utils.mergeProps({
       className: cx('label')
-    }, getPTOptions(category, 'label', index));
+    }, getPTOptions(processedItem, 'label', index));
     var label = category.label && /*#__PURE__*/React__namespace.createElement("span", labelProps, category.label);
-    var itemContent = category.template ? utils.ObjectUtils.getJSXElement(category.template, category) : null;
     var submenuIcon = createSubmenuIcon(category);
-    var panel = createCategoryPanel(category);
+    var panel = createCategoryPanel(processedItem);
     var headerActionProps = utils.mergeProps({
       href: category.url || '#',
-      className: cx('headerAction', {
-        category: category
+      className: cx('action', {
+        item: category
       }),
       target: category.target,
-      onClick: function onClick(e) {
-        return onCategoryClick(e, category);
-      },
-      onKeyDown: function onKeyDown(e) {
-        return onCategoryKeyDown(e, category);
+      onFocus: function onFocus(event) {
+        return event.stopPropagation();
       },
-      role: 'menuitem',
-      'aria-haspopup': category.items != null,
-      'data-p-disabled': category.disabled
-    }, getPTOptions(category, 'headerAction', index));
-    var key = category.id || idState + '_cat_' + index;
-    var menuItemProps = utils.mergeProps({
+      tabIndex: '-1',
+      'aria-hidden': true
+    }, getPTOptions(processedItem, 'action', index));
+    var itemContent = category.template ? utils.ObjectUtils.getJSXElement(category.template, category, headerActionProps) : /*#__PURE__*/React__namespace.createElement("a", headerActionProps, icon, label, submenuIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+    var key = getItemId(processedItem);
+    var isFocused = isItemFocused(processedItem);
+    var isDisabled = isItemDisabled(processedItem);
+    var menuItemProps = utils.mergeProps(_defineProperty({
       key: key,
       id: key,
       className: utils.classNames(category.className, cx('menuitem', {
         category: category,
-        activeItemState: activeItemState
+        activeItemState: activeItemState,
+        focused: isFocused,
+        disabled: isDisabled
       })),
+      'aria-label': getItemLabel(category),
+      'aria-level': '1',
+      'aria-setsize': getAriaSetSize(),
+      'aria-posinset': getAriaPosInset(index),
+      'aria-expanded': isItemGroup(processedItem) ? isItemActive(processedItem) : undefined,
+      'aria-haspopup': isItemGroup(processedItem) ? 'menu' : undefined,
+      'aria-disabled': isItemDisabled(processedItem),
+      'data-p-highlight': isItemActive(category),
+      'data-p-disabled': isDisabled,
+      'data-p-focused': isFocused,
       style: category.style,
+      role: 'menuitem'
+    }, "data-p-disabled", category.disabled || false), getPTOptions(processedItem, 'menuitem', index));
+    var contentProps = utils.mergeProps({
+      onClick: function onClick(event) {
+        return onCategoryClick({
+          originalEvent: event,
+          processedItem: processedItem
+        });
+      },
       onMouseEnter: function onMouseEnter(e) {
-        return onCategoryMouseEnter(e, category);
+        return onCategoryMouseEnter({
+          originalEvent: e,
+          processedItem: processedItem
+        });
       },
-      role: 'none',
-      'data-p-disabled': category.disabled || false
-    }, getPTOptions(category, 'menuitem', index));
-    return /*#__PURE__*/React__namespace.createElement("li", menuItemProps, /*#__PURE__*/React__namespace.createElement("a", headerActionProps, icon, label, itemContent, submenuIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), panel);
+      className: cx('content')
+    }, getPTOptions(processedItem, 'content', index));
+    return /*#__PURE__*/React__namespace.createElement("li", menuItemProps, /*#__PURE__*/React__namespace.createElement("div", contentProps, itemContent), panel);
   };
   var createMenu = function createMenu() {
     var menuProps = utils.mergeProps({
+      ref: menubarRef,
+      tabIndex: props.disabled ? null : props.tabIndex || '0',
       className: cx('menu'),
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      'aria-label': props.ariaLabel,
+      'aria-labelledby': props.ariaLabelledBy,
+      'aria-orientation': vertical ? 'vertical' : 'horizontal',
+      'aria-activedescendant': focused ? focusedItemId : null,
+      id: idState + '_list',
       role: 'menubar'
     }, ptm('menu'));
-    if (props.model) {
-      return /*#__PURE__*/React__namespace.createElement("ul", menuProps, props.model.map(function (item, index) {
+    if (processedItems) {
+      return /*#__PURE__*/React__namespace.createElement("ul", menuProps, processedItems.map(function (item, index) {
         return createCategory(item, index);
       }));
     }
@@ -697,13 +1312,17 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     return null;
   };
   var createMenuButton = function createMenuButton() {
-    if (props.orientation === 'vertical' || props.model && props.model.length < 1) {
+    if (vertical || props.model && props.model.length < 1) {
       return null;
     }
     var menuButtonProps = utils.mergeProps({
       className: cx('menuButton'),
       href: '#',
       role: 'button',
+      'aria-haspopup': props.model && props.model.length > 0 ? true : false,
+      'aria-expanded': mobileActiveState,
+      'aria-controls': idState,
+      'aria-label': PrimeReact.ariaLabel('navigation'),
       tabIndex: 0,
       onClick: function onClick(e) {
         return toggle(e);
@@ -726,6 +1345,7 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     className: utils.classNames(props.className, cx('root', {
       mobileActiveState: mobileActiveState
     })),
+    id: idState,
     style: props.style
   }, MegaMenuBase.getOtherProps(props), ptm('root'));
   var menu = createMenu();