primereact 10.2.1 → 10.3.1

package/megamenu/megamenu.js

@@ -81,6 +81,10 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
     return obj;
   }
 
+  function _readOnlyError(name) {
+    throw new TypeError("\"" + name + "\" is read-only");
+  }
+
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
@@ -146,7 +150,8 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
         '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;
@@ -154,20 +159,29 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
         '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) {
@@ -189,18 +203,16 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
       }
       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',
@@ -208,7 +220,7 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
     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',
@@ -221,6 +233,9 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
       scrollHeight: '400px',
       start: null,
       submenuIcon: null,
+      onFocus: null,
+      onBlur: null,
+      tabIndex: 0,
       menuIcon: null,
       end: null,
       children: undefined
@@ -246,13 +261,48 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
       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';
@@ -262,7 +312,7 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
         props: props,
         state: {
           id: idState,
-          activeItem: activeItemState,
+          activeItem: activeItemState && activeItemState.item,
           attributeSelector: attributeSelectorState,
           mobileActive: mobileActiveState
         }
@@ -273,11 +323,13 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
     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
         }
       });
@@ -285,128 +337,181 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
     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));
@@ -425,13 +530,39 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
       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({
@@ -440,9 +571,442 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
         });
       }
       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({
@@ -466,14 +1030,15 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
       }
       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
         });
@@ -494,25 +1059,46 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
             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,
@@ -521,47 +1107,52 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
           };
           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));
     };
@@ -573,9 +1164,10 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
       }
       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'));
@@ -588,7 +1180,7 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
     };
     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;
@@ -597,69 +1189,92 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
     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);
         }));
       }
@@ -686,13 +1301,17 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
       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);
@@ -715,6 +1334,7 @@ this.primereact.megamenu = (function (exports, React, PrimeReact, componentbase,
       className: utils.classNames(props.className, cx('root', {
         mobileActiveState: mobileActiveState
       })),
+      id: idState,
       style: props.style
     }, MegaMenuBase.getOtherProps(props), ptm('root'));
     var menu = createMenu();