primereact 10.2.0 → 10.3.0

package/menu/menu.cjs.js

@@ -91,6 +91,37 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -123,21 +154,6 @@ function _iterableToArrayLimit(r, l) {
   }
 }
 
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
@@ -146,7 +162,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var styles = "\n@layer primereact {\n    .p-menu-overlay {\n        position: absolute;\n        /* Github #3122: Prevent animation flickering  */\n        top: -9999px;\n        left: -9999px;\n    }\n    \n    .p-menu ul {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n    \n    .p-menu .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-menu .p-menuitem-text {\n        line-height: 1;\n    }\n}\n";
+var styles = "\n@layer primereact {\n    .p-menu-overlay {\n        position: absolute;\n        /* Github #3122: Prevent animation flickering  */\n        top: -9999px;\n        left: -9999px;\n    }\n\n    .p-menu ul {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n\n    .p-menu .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-menu .p-menuitem-text {\n        line-height: 1;\n    }\n}\n";
 var classes = {
   root: function root(_ref) {
     var props = _ref.props,
@@ -158,15 +174,21 @@ var classes = {
     });
   },
   menu: 'p-menu-list p-reset',
+  content: 'p-menuitem-content',
   action: function action(_ref2) {
     var item = _ref2.item;
     return utils.classNames('p-menuitem-link', {
       'p-disabled': item.disabled
     });
   },
-  menuitem: 'p-menuitem',
-  submenuHeader: function submenuHeader(_ref3) {
-    var submenu = _ref3.submenu;
+  menuitem: function menuitem(_ref3) {
+    var focused = _ref3.focused;
+    return utils.classNames('p-menuitem', {
+      'p-focus': focused
+    });
+  },
+  submenuHeader: function submenuHeader(_ref4) {
+    var submenu = _ref4.submenu;
     return utils.classNames('p-submenu-header', {
       'p-disabled': submenu.disabled
     });
@@ -177,12 +199,12 @@ var classes = {
   transition: 'p-connected-overlay'
 };
 var inlineStyles = {
-  submenuHeader: function submenuHeader(_ref4) {
-    var submenu = _ref4.submenu;
+  submenuHeader: function submenuHeader(_ref5) {
+    var submenu = _ref5.submenu;
     return submenu.style;
   },
-  menuitem: function menuitem(_ref5) {
-    var item = _ref5.item;
+  menuitem: function menuitem(_ref6) {
+    var item = _ref6.item;
     return item.style;
   }
 };
@@ -190,6 +212,9 @@ var MenuBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Menu',
     id: null,
+    ariaLabel: null,
+    ariaLabelledBy: null,
+    tabIndex: 0,
     model: null,
     popup: false,
     popupAlignment: 'left',
@@ -198,6 +223,8 @@ var MenuBase = componentbase.ComponentBase.extend({
     autoZIndex: true,
     baseZIndex: 0,
     appendTo: null,
+    onFocus: null,
+    onBlur: null,
     transitionOptions: null,
     onShow: null,
     onHide: null,
@@ -238,6 +265,7 @@ var useEventListener = function useEventListener(_ref) {
     when = _ref$when === void 0 ? true : _ref$when;
   var targetRef = React__namespace.useRef(null);
   var listenerRef = React__namespace.useRef(null);
+  var prevListener = usePrevious(listener);
   var prevOptions = usePrevious(options);
   var bind = function bind() {
     var bindOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -267,11 +295,12 @@ var useEventListener = function useEventListener(_ref) {
     }
   }, [target, when]);
   React__namespace.useEffect(function () {
-    if (listenerRef.current && (listenerRef.current !== listener || prevOptions !== options)) {
+    // to properly compare functions we can implicitly converting the function to it's body's text as a String
+    if (listenerRef.current && ('' + prevListener !== '' + listener || prevOptions !== options)) {
       unbind();
       when && bind();
     }
-  }, [listener, options]);
+  }, [listener, options, when]);
   useUnmountEffect(function () {
     unbind();
   });
@@ -322,6 +351,18 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     visibleState = _React$useState4[0],
     setVisibleState = _React$useState4[1];
+  var _React$useState5 = React__namespace.useState(-1),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    focusedOptionIndex = _React$useState6[0],
+    setFocusedOptionIndex = _React$useState6[1];
+  var _React$useState7 = React__namespace.useState(-1),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    selectedOptionIndex = _React$useState8[0],
+    setSelectedOptionIndex = _React$useState8[1];
+  var _React$useState9 = React__namespace.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    focused = _React$useState10[0],
+    setFocused = _React$useState10[1];
   var _MenuBase$setMetaData = MenuBase.setMetaData({
       props: props,
       state: {
@@ -337,6 +378,7 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     name: 'menu'
   });
   var menuRef = React__namespace.useRef(null);
+  var listRef = React__namespace.useRef(null);
   var targetRef = React__namespace.useRef(null);
   useOnEscapeKey(targetRef, props.popup && props.closeOnEscape, function (event) {
     hide(event);
@@ -346,7 +388,10 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
       overlay: menuRef,
       listener: function listener(event, _ref) {
         var valid = _ref.valid;
-        valid && hide(event);
+        if (valid) {
+          hide(event);
+          setFocusedOptionIndex(-1);
+        }
       },
       when: visibleState
     }),
@@ -361,7 +406,7 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
       });
     }
   };
-  var onItemClick = function onItemClick(event, item) {
+  var onItemClick = function onItemClick(event, item, key) {
     if (item.disabled) {
       event.preventDefault();
       return;
@@ -378,32 +423,112 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     if (props.popup) {
       hide(event);
     }
+    if (!props.popup && focusedOptionIndex !== key) {
+      setFocusedOptionIndex(key);
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  var onListFocus = function onListFocus(event) {
+    setFocused(true);
+    if (!props.popup) {
+      if (selectedOptionIndex !== -1) {
+        changeFocusedOptionIndex(selectedOptionIndex);
+        setSelectedOptionIndex(-1);
+      } else changeFocusedOptionIndex(0);
+    }
+    props.onFocus && props.onFocus(event);
+  };
+  var onListBlur = function onListBlur(event) {
+    setFocused(false);
+    setFocusedOptionIndex(-1);
+    props.onBlur && props.onBlur(event);
   };
-  var onItemKeyDown = function onItemKeyDown(event, item) {
-    var listItem = event.currentTarget.parentElement;
-    switch (event.which) {
-      //down
-      case 40:
-        var nextItem = findNextItem(listItem);
-        nextItem && nextItem.children[0].focus();
-        event.preventDefault();
+  var onListKeyDown = function onListKeyDown(event) {
+    switch (event.code) {
+      case 'ArrowDown':
+        onArrowDownKey(event);
         break;
-
-      //up
-      case 38:
-        var prevItem = findPrevItem(listItem);
-        prevItem && prevItem.children[0].focus();
-        event.preventDefault();
+      case 'ArrowUp':
+        onArrowUpKey(event);
+        break;
+      case 'Home':
+        onHomeKey(event);
+        break;
+      case 'End':
+        onEndKey(event);
+        break;
+      case 'Enter':
+        onEnterKey(event);
+        break;
+      case 'Space':
+        onSpaceKey(event);
+        break;
+      case 'Escape':
+        if (props.popup) {
+          utils.DomHandler.focus(targetRef.current);
+          hide(event);
+        }
+      case 'Tab':
+        props.popup && visibleState && hide(event);
         break;
     }
   };
-  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 onArrowDownKey = function onArrowDownKey(event) {
+    var optionIndex = findNextOptionIndex(focusedOptionIndex);
+    changeFocusedOptionIndex(optionIndex);
+    event.preventDefault();
   };
-  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 onArrowUpKey = function onArrowUpKey(event) {
+    if (event.altKey && props.popup) {
+      utils.DomHandler.focus(targetRef.current);
+      hide(event);
+      event.preventDefault();
+    } else {
+      var optionIndex = findPrevOptionIndex(focusedOptionIndex);
+      changeFocusedOptionIndex(optionIndex);
+      event.preventDefault();
+    }
+  };
+  var onHomeKey = function onHomeKey(event) {
+    changeFocusedOptionIndex(0);
+    event.preventDefault();
+  };
+  var onEndKey = function onEndKey(event) {
+    changeFocusedOptionIndex(utils.DomHandler.find(menuRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
+    event.preventDefault();
+  };
+  var onEnterKey = function onEnterKey(event) {
+    var element = utils.DomHandler.findSingle(menuRef.current, "li[id=\"".concat("".concat(focusedOptionIndex), "\"]"));
+    var anchorElement = element && utils.DomHandler.findSingle(element, 'a[data-pc-section="action"]');
+    props.popup && utils.DomHandler.focus(targetRef.current);
+    anchorElement ? anchorElement.click() : element && element.click();
+    event.preventDefault();
+  };
+  var onSpaceKey = function onSpaceKey(event) {
+    onEnterKey(event);
+  };
+  var findNextOptionIndex = function findNextOptionIndex(index) {
+    var links = utils.DomHandler.find(menuRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+    var matchedOptionIndex = _toConsumableArray(links).findIndex(function (link) {
+      return link.id === index;
+    });
+    return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+  };
+  var findPrevOptionIndex = function findPrevOptionIndex(index) {
+    var links = utils.DomHandler.find(menuRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+    var matchedOptionIndex = _toConsumableArray(links).findIndex(function (link) {
+      return link.id === index;
+    });
+    return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+  };
+  var changeFocusedOptionIndex = function changeFocusedOptionIndex(index) {
+    var links = utils.DomHandler.find(menuRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+    var order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
+    order > -1 && setFocusedOptionIndex(links[order].getAttribute('id'));
+  };
+  var focusedOptionId = function focusedOptionId() {
+    return focusedOptionIndex !== -1 ? focusedOptionIndex : null;
   };
   var toggle = function toggle(event) {
     if (props.popup) {
@@ -428,6 +553,10 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     });
     utils.ZIndexUtils.set('menu', menuRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, props.baseZIndex || context && context.zIndex['menu'] || PrimeReact__default["default"].zIndex['menu']);
     utils.DomHandler.absolutePosition(menuRef.current, targetRef.current, props.popupAlignment);
+    if (props.popup) {
+      utils.DomHandler.focus(listRef.current);
+      changeFocusedOptionIndex(0);
+    }
   };
   var onEntered = function onEntered() {
     bindOverlayListener();
@@ -463,11 +592,13 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
   });
   var createSubmenu = function createSubmenu(submenu, index) {
     var key = idState + '_sub_' + index;
-    var items = submenu.items.map(createMenuItem);
+    var items = submenu.items.map(function (item, index) {
+      return createMenuItem(item, index, key);
+    });
     var submenuHeaderProps = utils.mergeProps({
       id: key,
       key: key,
-      role: 'presentation',
+      role: 'none',
       className: utils.classNames(submenu.className, cx('submenuHeader', {
         submenu: submenu
       })),
@@ -491,6 +622,7 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     return /*#__PURE__*/React__namespace.createElement("li", separatorProps);
   };
   var createMenuItem = function createMenuItem(item, index) {
+    var parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     if (item.visible === false) {
       return null;
     }
@@ -508,36 +640,36 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
       className: cx('label')
     }, ptm('label'));
     var label = item.label && /*#__PURE__*/React__namespace.createElement("span", labelProps, item.label);
-    var tabIndex = item.disabled ? null : 0;
-    var key = item.id || idState + '_' + index;
+    var key = item.id || (parentId || idState) + '_' + index;
+    var contentProps = utils.mergeProps({
+      onClick: function onClick(event) {
+        return onItemClick(event, item, key);
+      },
+      className: cx('content')
+    }, ptm('content'));
     var actionProps = utils.mergeProps({
       href: item.url || '#',
       className: cx('action', {
         item: item
       }),
-      role: 'menuitem',
-      target: item.target,
-      onClick: function onClick(event) {
-        return onItemClick(event, item);
+      onFocus: function onFocus(event) {
+        return event.stopPropagation();
       },
-      onKeyDown: function onKeyDown(event) {
-        return onItemKeyDown(event);
-      },
-      tabIndex: tabIndex,
+      target: item.target,
+      tabIndex: '-1',
+      'aria-label': item.label,
+      'aria-hidden': true,
       'aria-disabled': item.disabled,
       'data-p-disabled': item.disabled
     }, ptm('action'));
-    var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, icon, label);
+    var content = /*#__PURE__*/React__namespace.createElement("div", contentProps, /*#__PURE__*/React__namespace.createElement("a", actionProps, icon, label));
     if (item.template) {
       var defaultContentOptions = {
         onClick: function onClick(event) {
-          return onItemClick(event, item);
-        },
-        onKeyDown: function onKeyDown(event) {
-          return onItemKeyDown(event);
+          return onItemClick(event, item, key);
         },
         className: linkClassName,
-        tabIndex: tabIndex,
+        tabIndex: '-1',
         labelClassName: 'p-menuitem-text',
         iconClassName: iconClassName,
         element: content,
@@ -548,11 +680,16 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     var menuitemProps = utils.mergeProps({
       id: key,
       key: key,
-      className: utils.classNames(item.className, cx('menuitem')),
+      className: utils.classNames(item.className, cx('menuitem', {
+        focused: focusedOptionIndex === key
+      })),
       style: sx('menuitem', {
         item: item
       }),
-      role: 'none',
+      role: 'menuitem',
+      'aria-label': item.label,
+      'aria-disabled': item.disabled,
+      'data-p-focused': focusedOptionId() === key,
       'data-p-disabled': item.disabled || false
     }, ptm('menuitem'));
     return /*#__PURE__*/React__namespace.createElement("li", menuitemProps, content);
@@ -576,8 +713,17 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
         }
       }, MenuBase.getOtherProps(props), ptm('root'));
       var menuProps = utils.mergeProps({
+        ref: listRef,
         className: cx('menu'),
-        role: 'menu'
+        id: idState + '_list',
+        tabIndex: props.tabIndex || '0',
+        role: 'menu',
+        'aria-label': props.ariaLabel,
+        'aria-labelledby': props.ariaLabelledBy,
+        'aria-activedescendant': focused ? focusedOptionId() : undefined,
+        onFocus: onListFocus,
+        onKeyDown: onListKeyDown,
+        onBlur: onListBlur
       }, ptm('menu'));
       var transitionProps = utils.mergeProps({
         classNames: cx('transition'),

package/menu/menu.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/componentbase"),r=require("primereact/csstransition"),i=require("primereact/hooks"),o=require("primereact/overlayservice"),u=require("primereact/portal"),a=require("primereact/utils");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=s(e),p=l(t);function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},m.apply(this,arguments)}function f(e){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f(e)}function d(e,t){if("object"!==f(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==f(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function b(e){var t=d(e,"string");return"symbol"===f(t)?t:String(t)}function y(e){if(Array.isArray(e))return e}function v(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,u,a=[],l=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=o.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){s=!0,i=e}finally{try{if(!l&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(s)throw i}}return a}}function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function E(e,t){if(e){if("string"==typeof e)return g(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?g(e,t):void 0}}function O(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function h(e,t){return y(e)||v(e,t)||E(e,t)||O()}var x=n.ComponentBase.extend({defaultProps:{__TYPE:"Menu",id:null,model:null,popup:!1,popupAlignment:"left",style:null,className:null,autoZIndex:!0,baseZIndex:0,appendTo:null,transitionOptions:null,onShow:null,onHide:null,children:void 0,closeOnEscape:!0},css:{classes:{root:function(e){var t=e.context;return a.classNames("p-menu p-component",{"p-menu-overlay":e.props.popup,"p-input-filled":t&&"filled"===t.inputStyle||"filled"===p.default.inputStyle,"p-ripple-disabled":t&&!1===t.ripple||!1===p.default.ripple})},menu:"p-menu-list p-reset",action:function(e){return a.classNames("p-menuitem-link",{"p-disabled":e.item.disabled})},menuitem:"p-menuitem",submenuHeader:function(e){return a.classNames("p-submenu-header",{"p-disabled":e.submenu.disabled})},separator:"p-menu-separator",label:"p-menuitem-text",icon:"p-menuitem-icon",transition:"p-connected-overlay"},styles:"\n@layer primereact {\n    .p-menu-overlay {\n        position: absolute;\n        /* Github #3122: Prevent animation flickering  */\n        top: -9999px;\n        left: -9999px;\n    }\n    \n    .p-menu ul {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n    \n    .p-menu .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-menu .p-menuitem-text {\n        line-height: 1;\n    }\n}\n",inlineStyles:{submenuHeader:function(e){return e.submenu.style},menuitem:function(e){return e.item.style}}}}),P=function(e){var t,n,r,i=e.target,o=void 0===i?"document":i,u=e.type,l=e.listener,s=e.options,p=e.when,m=void 0===p||p,f=c.useRef(null),d=c.useRef(null),b=(t=s,n=c.useRef(void 0),c.useEffect((function(){n.current=t})),n.current),y=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a.ObjectUtils.isNotEmpty(e.target)&&(v(),(e.when||m)&&(f.current=a.DomHandler.getTargetElement(e.target))),!d.current&&f.current&&(d.current=function(e){return l&&l(e)},f.current.addEventListener(u,d.current,s))},v=function(){d.current&&(f.current.removeEventListener(u,d.current,s),d.current=null)};return c.useEffect((function(){m?f.current=a.DomHandler.getTargetElement(o):(v(),f.current=null)}),[o,m]),c.useEffect((function(){!d.current||d.current===l&&b===s||(v(),m&&y())}),[l,s]),r=function(){v()},c.useEffect((function(){return r}),[]),[y,v]},S=function(e,t,n){var r=h(P({type:"keydown",listener:function(e){"Esc"!==e.key&&"Escape"!==e.key||(e.stopImmediatePropagation(),n(e))}}),2),i=r[0],o=r[1];return c.useEffect((function(){if(t&&e.current)return i(),function(){o()}})),[e,n]};function j(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function w(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?j(Object(n),!0).forEach((function(t){var r,i,o;r=e,o=n[t],(i=b(i=t))in r?Object.defineProperty(r,i,{value:o,enumerable:!0,configurable:!0,writable:!0}):r[i]=o})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var N=c.memo(c.forwardRef((function(e,l){var s=c.useContext(t.PrimeReactContext),f=x.getProps(e,s),d=h(c.useState(f.id),2),b=d[0],y=d[1],v=h(c.useState(!f.popup),2),g=v[0],E=v[1],O=x.setMetaData({props:f,state:{id:b,visible:g}}),P=O.ptm,j=O.cx,N=O.sx;n.useHandleStyle(x.css.styles,O.isUnstyled,{name:"menu"});var D=c.useRef(null),I=c.useRef(null);S(I,f.popup&&f.closeOnEscape,(function(e){R(e)}));var k=h(i.useOverlayListener({target:I,overlay:D,listener:function(e,t){t.valid&&R(e)},when:g}),2),H=k[0],T=k[1],A=function(e,t){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),f.popup&&R(e))},C=function(e,t){var n=e.currentTarget.parentElement;switch(e.which){case 40:var r=_(n);r&&r.children[0].focus(),e.preventDefault();break;case 38:var i=U(n);i&&i.children[0].focus(),e.preventDefault()}},_=function e(t){var n=t.nextElementSibling;return n?a.DomHandler.getAttribute(n,'[data-p-disabled="true"]')||!a.DomHandler.getAttribute(n,'[data-pc-section="menuitem"]')?e(n):n:null},U=function e(t){var n=t.previousElementSibling;return n?a.DomHandler.getAttribute(n,'[data-p-disabled="true"]')||!a.DomHandler.getAttribute(n,'[data-pc-section="menuitem"]')?e(n):n:null},q=function(e){f.popup&&(g?R(e):M(e))},M=function(e){I.current=e.currentTarget,E(!0),f.onShow&&f.onShow(e)},R=function(e){I.current=e.currentTarget,E(!1),f.onHide&&f.onHide(e)},Z=function(){a.DomHandler.addStyles(D.current,{position:"absolute",top:"0",left:"0"}),a.ZIndexUtils.set("menu",D.current,s&&s.autoZIndex||p.default.autoZIndex,f.baseZIndex||s&&s.zIndex.menu||p.default.zIndex.menu),a.DomHandler.absolutePosition(D.current,I.current,f.popupAlignment)},z=function(){H()},L=function(){I.current=null,T()},J=function(){a.ZIndexUtils.clear(D.current)};i.useMountEffect((function(){b||y(a.UniqueComponentId())})),i.useUnmountEffect((function(){a.ZIndexUtils.clear(D.current)})),c.useImperativeHandle(l,(function(){return{props:f,toggle:q,show:M,hide:R,getElement:function(){return D.current},getTarget:function(){return I.current}}}));var K=function(e,t){var n=b+"_sub_"+t,r=e.items.map(B),i=a.mergeProps({id:n,key:n,role:"presentation",className:a.classNames(e.className,j("submenuHeader",{submenu:e})),style:N("submenuHeader",{submenu:e}),"data-p-disabled":e.disabled},P("submenuHeader"));return c.createElement(c.Fragment,{key:n},c.createElement("li",i,e.label),r)},X=function(e){var t=b+"_separator_"+e,n=a.mergeProps({id:t,key:t,className:j("separator"),role:"separator"},P("separator"));return c.createElement("li",n)},B=function(e,t){if(!1===e.visible)return null;var n=a.classNames("p-menuitem-link",{"p-disabled":e.disabled}),r=a.classNames("p-menuitem-icon",e.icon),i=a.mergeProps({className:j("icon")},P("icon")),o=a.IconUtils.getJSXIcon(e.icon,w({},i),{props:f}),u=a.mergeProps({className:j("label")},P("label")),l=e.label&&c.createElement("span",u,e.label),s=e.disabled?null:0,p=e.id||b+"_"+t,m=a.mergeProps({href:e.url||"#",className:j("action",{item:e}),role:"menuitem",target:e.target,onClick:function(t){return A(t,e)},onKeyDown:function(e){return C(e)},tabIndex:s,"aria-disabled":e.disabled,"data-p-disabled":e.disabled},P("action")),d=c.createElement("a",m,o,l);e.template&&(d=a.ObjectUtils.getJSXElement(e.template,e,{onClick:function(t){return A(t,e)},onKeyDown:function(e){return C(e)},className:n,tabIndex:s,labelClassName:"p-menuitem-text",iconClassName:r,element:d,props:f}));var y=a.mergeProps({id:p,key:p,className:a.classNames(e.className,j("menuitem")),style:N("menuitem",{item:e}),role:"none","data-p-disabled":e.disabled||!1},P("menuitem"));return c.createElement("li",y,d)},F=function(e,t){return e.separator?X(t):e.items?K(e,t):B(e,t)},G=function(){if(f.model){var e=f.model.map(F),t=a.mergeProps({className:a.classNames(f.className,j("root",{context:s})),style:f.style,onClick:function(e){return t=e,void(f.popup&&o.OverlayService.emit("overlay-click",{originalEvent:t,target:I.current}));var t}},x.getOtherProps(f),P("root")),n=a.mergeProps({className:j("menu"),role:"menu"},P("menu")),i=a.mergeProps({classNames:j("transition"),in:g,timeout:{enter:120,exit:100},options:f.transitionOptions,unmountOnExit:!0,onEnter:Z,onEntered:z,onExit:L,onExited:J},P("transition"));return c.createElement(r.CSSTransition,m({nodeRef:D},i),c.createElement("div",m({id:f.id,ref:D},t),c.createElement("ul",n,e)))}return null}();return f.popup?c.createElement(u.Portal,{element:G,appendTo:f.appendTo}):G})));N.displayName="Menu",exports.Menu=N;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("primereact/api"),t=require("primereact/componentbase"),r=require("primereact/csstransition"),a=require("primereact/hooks"),o=require("primereact/overlayservice"),i=require("primereact/portal"),u=require("primereact/utils");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var s=c(e),p=l(n);function m(){return m=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},m.apply(this,arguments)}function d(e){return d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},d(e)}function f(e,n){if("object"!==d(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==d(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function b(e){var n=f(e,"string");return"symbol"===d(n)?n:String(n)}function y(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function v(e){if(Array.isArray(e))return y(e)}function g(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function E(e,n){if(e){if("string"==typeof e)return y(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?y(e,n):void 0}}function h(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function O(e){return v(e)||g(e)||E(e)||h()}function S(e){if(Array.isArray(e))return e}function x(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,a,o,i,u=[],l=!0,c=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;l=!1}else for(;!(l=(r=o.call(t)).done)&&(u.push(r.value),u.length!==n);l=!0);}catch(e){c=!0,a=e}finally{try{if(!l&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(c)throw a}}return u}}function P(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function j(e,n){return S(e)||x(e,n)||E(e,n)||P()}var w=t.ComponentBase.extend({defaultProps:{__TYPE:"Menu",id:null,ariaLabel:null,ariaLabelledBy:null,tabIndex:0,model:null,popup:!1,popupAlignment:"left",style:null,className:null,autoZIndex:!0,baseZIndex:0,appendTo:null,onFocus:null,onBlur:null,transitionOptions:null,onShow:null,onHide:null,children:void 0,closeOnEscape:!0},css:{classes:{root:function(e){var n=e.context;return u.classNames("p-menu p-component",{"p-menu-overlay":e.props.popup,"p-input-filled":n&&"filled"===n.inputStyle||"filled"===p.default.inputStyle,"p-ripple-disabled":n&&!1===n.ripple||!1===p.default.ripple})},menu:"p-menu-list p-reset",content:"p-menuitem-content",action:function(e){return u.classNames("p-menuitem-link",{"p-disabled":e.item.disabled})},menuitem:function(e){return u.classNames("p-menuitem",{"p-focus":e.focused})},submenuHeader:function(e){return u.classNames("p-submenu-header",{"p-disabled":e.submenu.disabled})},separator:"p-menu-separator",label:"p-menuitem-text",icon:"p-menuitem-icon",transition:"p-connected-overlay"},styles:"\n@layer primereact {\n    .p-menu-overlay {\n        position: absolute;\n        /* Github #3122: Prevent animation flickering  */\n        top: -9999px;\n        left: -9999px;\n    }\n\n    .p-menu ul {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n\n    .p-menu .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-menu .p-menuitem-text {\n        line-height: 1;\n    }\n}\n",inlineStyles:{submenuHeader:function(e){return e.submenu.style},menuitem:function(e){return e.item.style}}}}),D=function(e){var n=s.useRef(void 0);return s.useEffect((function(){n.current=e})),n.current},N=function(e,n,t){var r,a,o,i,l,c,p,m,d,f,b,y,v,g,E,h=(i=void 0===(o=(r={type:"keydown",listener:function(e){"Esc"!==e.key&&"Escape"!==e.key||(e.stopImmediatePropagation(),t(e))}}).target)?"document":o,l=r.type,c=r.listener,p=r.options,d=void 0===(m=r.when)||m,f=s.useRef(null),b=s.useRef(null),y=D(c),v=D(p),g=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};u.ObjectUtils.isNotEmpty(e.target)&&(E(),(e.when||d)&&(f.current=u.DomHandler.getTargetElement(e.target))),!b.current&&f.current&&(b.current=function(e){return c&&c(e)},f.current.addEventListener(l,b.current,p))},E=function(){b.current&&(f.current.removeEventListener(l,b.current,p),b.current=null)},s.useEffect((function(){d?f.current=u.DomHandler.getTargetElement(i):(E(),f.current=null)}),[i,d]),s.useEffect((function(){!b.current||""+y==""+c&&v===p||(E(),d&&g())}),[c,p,d]),a=function(){E()},s.useEffect((function(){return a}),[]),[g,E]),O=j(h,2),S=O[0],x=O[1];return s.useEffect((function(){if(n&&e.current)return S(),function(){x()}})),[e,t]};function I(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function k(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?I(Object(t),!0).forEach((function(n){var r,a,o;r=e,o=t[n],(a=b(a=n))in r?Object.defineProperty(r,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):r[a]=o})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):I(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var H=s.memo(s.forwardRef((function(e,l){var c=s.useContext(n.PrimeReactContext),d=w.getProps(e,c),f=j(s.useState(d.id),2),b=f[0],y=f[1],v=j(s.useState(!d.popup),2),g=v[0],E=v[1],h=j(s.useState(-1),2),S=h[0],x=h[1],P=j(s.useState(-1),2),D=P[0],I=P[1],H=j(s.useState(!1),2),A=H[0],T=H[1],_=w.setMetaData({props:d,state:{id:b,visible:g}}),C=_.ptm,U=_.cx,q=_.sx;t.useHandleStyle(w.css.styles,_.isUnstyled,{name:"menu"});var R=s.useRef(null),M=s.useRef(null),Z=s.useRef(null);N(Z,d.popup&&d.closeOnEscape,(function(e){ie(e)}));var B=j(a.useOverlayListener({target:Z,overlay:R,listener:function(e,n){n.valid&&(ie(e),x(-1))},when:g}),2),L=B[0],F=B[1],z=function(e,n,t){n.disabled?e.preventDefault():(n.url||e.preventDefault(),n.command&&n.command({originalEvent:e,item:n}),d.popup&&ie(e),d.popup||S===t||x(t),e.preventDefault(),e.stopPropagation())},J=function(e){T(!0),d.popup||(-1!==D?(te(D),I(-1)):te(0)),d.onFocus&&d.onFocus(e)},K=function(e){T(!1),x(-1),d.onBlur&&d.onBlur(e)},X=function(e){switch(e.code){case"ArrowDown":G(e);break;case"ArrowUp":Y(e);break;case"Home":$(e);break;case"End":Q(e);break;case"Enter":V(e);break;case"Space":W(e);break;case"Escape":d.popup&&(u.DomHandler.focus(Z.current),ie(e));case"Tab":d.popup&&g&&ie(e)}},G=function(e){var n=ee(S);te(n),e.preventDefault()},Y=function(e){if(e.altKey&&d.popup)u.DomHandler.focus(Z.current),ie(e),e.preventDefault();else{var n=ne(S);te(n),e.preventDefault()}},$=function(e){te(0),e.preventDefault()},Q=function(e){te(u.DomHandler.find(R.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]').length-1),e.preventDefault()},V=function(e){var n=u.DomHandler.findSingle(R.current,'li[id="'.concat("".concat(S),'"]')),t=n&&u.DomHandler.findSingle(n,'a[data-pc-section="action"]');d.popup&&u.DomHandler.focus(Z.current),t?t.click():n&&n.click(),e.preventDefault()},W=function(e){V(e)},ee=function(e){var n=O(u.DomHandler.find(R.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]')).findIndex((function(n){return n.id===e}));return n>-1?n+1:0},ne=function(e){var n=O(u.DomHandler.find(R.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]')).findIndex((function(n){return n.id===e}));return n>-1?n-1:0},te=function(e){var n=u.DomHandler.find(R.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]'),t=e>=n.length?n.length-1:e<0?0:e;t>-1&&x(n[t].getAttribute("id"))},re=function(){return-1!==S?S:null},ae=function(e){d.popup&&(g?ie(e):oe(e))},oe=function(e){Z.current=e.currentTarget,E(!0),d.onShow&&d.onShow(e)},ie=function(e){Z.current=e.currentTarget,E(!1),d.onHide&&d.onHide(e)},ue=function(){u.DomHandler.addStyles(R.current,{position:"absolute",top:"0",left:"0"}),u.ZIndexUtils.set("menu",R.current,c&&c.autoZIndex||p.default.autoZIndex,d.baseZIndex||c&&c.zIndex.menu||p.default.zIndex.menu),u.DomHandler.absolutePosition(R.current,Z.current,d.popupAlignment),d.popup&&(u.DomHandler.focus(M.current),te(0))},le=function(){L()},ce=function(){Z.current=null,F()},se=function(){u.ZIndexUtils.clear(R.current)};a.useMountEffect((function(){b||y(u.UniqueComponentId())})),a.useUnmountEffect((function(){u.ZIndexUtils.clear(R.current)})),s.useImperativeHandle(l,(function(){return{props:d,toggle:ae,show:oe,hide:ie,getElement:function(){return R.current},getTarget:function(){return Z.current}}}));var pe=function(e,n){var t=b+"_sub_"+n,r=e.items.map((function(e,n){return de(e,n,t)})),a=u.mergeProps({id:t,key:t,role:"none",className:u.classNames(e.className,U("submenuHeader",{submenu:e})),style:q("submenuHeader",{submenu:e}),"data-p-disabled":e.disabled},C("submenuHeader"));return s.createElement(s.Fragment,{key:t},s.createElement("li",a,e.label),r)},me=function(e){var n=b+"_separator_"+e,t=u.mergeProps({id:n,key:n,className:U("separator"),role:"separator"},C("separator"));return s.createElement("li",t)},de=function(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;if(!1===e.visible)return null;var r=u.classNames("p-menuitem-link",{"p-disabled":e.disabled}),a=u.classNames("p-menuitem-icon",e.icon),o=u.mergeProps({className:U("icon")},C("icon")),i=u.IconUtils.getJSXIcon(e.icon,k({},o),{props:d}),l=u.mergeProps({className:U("label")},C("label")),c=e.label&&s.createElement("span",l,e.label),p=e.id||(t||b)+"_"+n,m=u.mergeProps({onClick:function(n){return z(n,e,p)},className:U("content")},C("content")),f=u.mergeProps({href:e.url||"#",className:U("action",{item:e}),onFocus:function(e){return e.stopPropagation()},target:e.target,tabIndex:"-1","aria-label":e.label,"aria-hidden":!0,"aria-disabled":e.disabled,"data-p-disabled":e.disabled},C("action")),y=s.createElement("div",m,s.createElement("a",f,i,c));e.template&&(y=u.ObjectUtils.getJSXElement(e.template,e,{onClick:function(n){return z(n,e,p)},className:r,tabIndex:"-1",labelClassName:"p-menuitem-text",iconClassName:a,element:y,props:d}));var v=u.mergeProps({id:p,key:p,className:u.classNames(e.className,U("menuitem",{focused:S===p})),style:q("menuitem",{item:e}),role:"menuitem","aria-label":e.label,"aria-disabled":e.disabled,"data-p-focused":re()===p,"data-p-disabled":e.disabled||!1},C("menuitem"));return s.createElement("li",v,y)},fe=function(e,n){return e.separator?me(n):e.items?pe(e,n):de(e,n)},be=function(){if(d.model){var e=d.model.map(fe),n=u.mergeProps({className:u.classNames(d.className,U("root",{context:c})),style:d.style,onClick:function(e){return n=e,void(d.popup&&o.OverlayService.emit("overlay-click",{originalEvent:n,target:Z.current}));var n}},w.getOtherProps(d),C("root")),t=u.mergeProps({ref:M,className:U("menu"),id:b+"_list",tabIndex:d.tabIndex||"0",role:"menu","aria-label":d.ariaLabel,"aria-labelledby":d.ariaLabelledBy,"aria-activedescendant":A?re():void 0,onFocus:J,onKeyDown:X,onBlur:K},C("menu")),a=u.mergeProps({classNames:U("transition"),in:g,timeout:{enter:120,exit:100},options:d.transitionOptions,unmountOnExit:!0,onEnter:ue,onEntered:le,onExit:ce,onExited:se},C("transition"));return s.createElement(r.CSSTransition,m({nodeRef:R},a),s.createElement("div",m({id:d.id,ref:R},n),s.createElement("ul",t,e)))}return null}();return d.popup?s.createElement(i.Portal,{element:be,appendTo:d.appendTo}):be})));H.displayName="Menu",exports.Menu=H;

package/menu/menu.d.ts

@@ -124,6 +124,10 @@ export interface MenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttrib
      * @type {CSSTransitionProps}
      */
     transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
     /**
      * Callback to invoke when a popup menu is shown.
      * @param {React.SyntheticEvent} event - Browser event.
@@ -134,6 +138,16 @@ export interface MenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttrib
      * @param {React.SyntheticEvent} event - Browser event.
      */
     onHide?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when menu receives focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onFocus?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when menu loses focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onBlur?(event: React.SyntheticEvent): void;
     /**
      * Used to get the child elements of the component.
      * @readonly