@kaizen/components 1.42.3 → 1.42.4

package/dist/esm/Menu/subcomponents/MenuDropdown/MenuDropdown.mjs

@@ -1,6 +1,7 @@
 import { __assign } from 'tslib';
 import React, { useState, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
+import { FocusOn } from 'react-focus-on';
 import { usePopper } from 'react-popper';
 import styles from './MenuDropdown.module.scss.mjs';
 const MenuDropdown = /*#__PURE__*/function () {
@@ -66,20 +67,20 @@ const MenuDropdown = /*#__PURE__*/function () {
         }
       };
     }, [autoHide, handleDocumentClickForAutoHide]);
-    return (
-      /*#__PURE__*/
-      // Disabling these because we don't want this to be keyboard focusable.
-      // Esc keypress should be used instead for the same behaviour (hasn't been implemented here yet)
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      React.createElement("div", __assign({
-        id: id,
-        ref: setPopperElement
-      }, attributes.popper, {
-        style: popperStyles.popper,
-        className: classnames(styles.menuContainer, width == "default" && styles.defaultWidth),
-        onClick: handleRootClick
-      }), children)
-    );
+    return /*#__PURE__*/React.createElement(FocusOn, {
+      enabled: !!referenceElement,
+      scrollLock: false,
+      noIsolation: true,
+      shards: referenceElement ? [referenceElement] : undefined,
+      onEscapeKey: hideMenuDropdown
+    }, /*#__PURE__*/React.createElement("div", __assign({
+      id: id,
+      ref: setPopperElement
+    }, attributes.popper, {
+      style: popperStyles.popper,
+      className: classnames(styles.menuContainer, width == "default" && styles.defaultWidth),
+      onClick: handleRootClick
+    }), children));
   };
   MenuDropdown.displayName = "MenuDropdown";
   return MenuDropdown;