@kaizen/components 1.42.3 → 1.42.5

package/dist/cjs/Menu/subcomponents/MenuDropdown/MenuDropdown.cjs

@@ -3,6 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
+var reactFocusOn = require('react-focus-on');
 var reactPopper = require('react-popper');
 var MenuDropdown_module = require('./MenuDropdown.module.scss.cjs');
 function _interopDefault(e) {
@@ -74,19 +75,20 @@ var MenuDropdown = function (_a) {
       }
     };
   }, [autoHide, handleDocumentClickForAutoHide]);
-  return (
-    // 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__default.default.createElement("div", tslib.__assign({
-      id: id,
-      ref: setPopperElement
-    }, attributes.popper, {
-      style: popperStyles.popper,
-      className: classnames__default.default(MenuDropdown_module.menuContainer, width == "default" && MenuDropdown_module.defaultWidth),
-      onClick: handleRootClick
-    }), children)
-  );
+  return React__default.default.createElement(reactFocusOn.FocusOn, {
+    enabled: !!referenceElement,
+    scrollLock: false,
+    noIsolation: true,
+    shards: referenceElement ? [referenceElement] : undefined,
+    onEscapeKey: hideMenuDropdown
+  }, React__default.default.createElement("div", tslib.__assign({
+    id: id,
+    ref: setPopperElement
+  }, attributes.popper, {
+    style: popperStyles.popper,
+    className: classnames__default.default(MenuDropdown_module.menuContainer, width == "default" && MenuDropdown_module.defaultWidth),
+    onClick: handleRootClick
+  }), children));
 };
 MenuDropdown.displayName = "MenuDropdown";
 exports.MenuDropdown = MenuDropdown;