@atlaskit/dropdown-menu 16.4.7 → 16.5.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/dropdown-menu
 
+## 16.5.0
+
+### Minor Changes
+
+- [`77b41dc46e2c3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/77b41dc46e2c3) -
+  Add new option `shouldPreventEscapePropagation` to prevent ESCAPE key events from propagating.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.4.7
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -102,7 +102,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
     label = _ref.label,
     interactionName = _ref.interactionName,
     strategy = _ref.strategy,
-    menuLabel = _ref.menuLabel;
+    menuLabel = _ref.menuLabel,
+    _ref$shouldPreventEsc = _ref.shouldPreventEscapePropagation,
+    shouldPreventEscapePropagation = _ref$shouldPreventEsc === void 0 ? false : _ref$shouldPreventEsc;
   var _useControlledState = (0, _useControlled.default)(isOpen, function () {
       return defaultOpen;
     }),
@@ -157,6 +159,11 @@ var DropdownMenu = function DropdownMenu(_ref) {
   var handleOnClose = (0, _react.useCallback)(function (event, currentLevel) {
     var _event$target$closest, _event$target;
     var isTabOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape');
+
+    // Stop propagation on ESCAPE key if shouldPreventEscapePropagation is true
+    if (shouldPreventEscapePropagation && isKeyboardEvent(event) && event.key === 'Escape') {
+      event.stopPropagation();
+    }
     if (event !== null && !isTabOrEscapeKey && event.target instanceof HTMLElement && (_event$target$closest = (_event$target = event.target).closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, "[id^=".concat(_useGeneratedId.PREFIX, "] [aria-haspopup]"))) {
       var _itemRef$current2;
       // Check if it is within dropdown and it is a trigger button
@@ -204,7 +211,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
       isOpen: newValue,
       event: event
     });
-  }, [itemRef, onOpenChange, returnFocusRef, setLocalIsOpen]);
+  }, [itemRef, onOpenChange, returnFocusRef, setLocalIsOpen, shouldPreventEscapePropagation]);
   var _useFocus = (0, _useFocusEvent.default)(),
     isFocused = _useFocus.isFocused,
     bindFocus = _useFocus.bindFocus;

package/dist/es2019/dropdown-menu.js

@@ -79,7 +79,8 @@ const DropdownMenu = ({
   label,
   interactionName,
   strategy,
-  menuLabel
+  menuLabel,
+  shouldPreventEscapePropagation = false
 }) => {
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
   const triggerRef = useRef(null);
@@ -128,6 +129,11 @@ const DropdownMenu = ({
   const handleOnClose = useCallback((event, currentLevel) => {
     var _event$target$closest, _event$target;
     const isTabOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape');
+
+    // Stop propagation on ESCAPE key if shouldPreventEscapePropagation is true
+    if (shouldPreventEscapePropagation && isKeyboardEvent(event) && event.key === 'Escape') {
+      event.stopPropagation();
+    }
     if (event !== null && !isTabOrEscapeKey && event.target instanceof HTMLElement && (_event$target$closest = (_event$target = event.target).closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, `[id^=${PREFIX}] [aria-haspopup]`)) {
       var _itemRef$current2;
       // Check if it is within dropdown and it is a trigger button
@@ -175,7 +181,7 @@ const DropdownMenu = ({
       isOpen: newValue,
       event
     });
-  }, [itemRef, onOpenChange, returnFocusRef, setLocalIsOpen]);
+  }, [itemRef, onOpenChange, returnFocusRef, setLocalIsOpen, shouldPreventEscapePropagation]);
   const {
     isFocused,
     bindFocus

package/dist/esm/dropdown-menu.js

@@ -94,7 +94,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
     label = _ref.label,
     interactionName = _ref.interactionName,
     strategy = _ref.strategy,
-    menuLabel = _ref.menuLabel;
+    menuLabel = _ref.menuLabel,
+    _ref$shouldPreventEsc = _ref.shouldPreventEscapePropagation,
+    shouldPreventEscapePropagation = _ref$shouldPreventEsc === void 0 ? false : _ref$shouldPreventEsc;
   var _useControlledState = useControlledState(isOpen, function () {
       return defaultOpen;
     }),
@@ -149,6 +151,11 @@ var DropdownMenu = function DropdownMenu(_ref) {
   var handleOnClose = useCallback(function (event, currentLevel) {
     var _event$target$closest, _event$target;
     var isTabOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape');
+
+    // Stop propagation on ESCAPE key if shouldPreventEscapePropagation is true
+    if (shouldPreventEscapePropagation && isKeyboardEvent(event) && event.key === 'Escape') {
+      event.stopPropagation();
+    }
     if (event !== null && !isTabOrEscapeKey && event.target instanceof HTMLElement && (_event$target$closest = (_event$target = event.target).closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, "[id^=".concat(PREFIX, "] [aria-haspopup]"))) {
       var _itemRef$current2;
       // Check if it is within dropdown and it is a trigger button
@@ -196,7 +203,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
       isOpen: newValue,
       event: event
     });
-  }, [itemRef, onOpenChange, returnFocusRef, setLocalIsOpen]);
+  }, [itemRef, onOpenChange, returnFocusRef, setLocalIsOpen, shouldPreventEscapePropagation]);
   var _useFocus = useFocus(),
     isFocused = _useFocus.isFocused,
     bindFocus = _useFocus.bindFocus;

package/dist/types/dropdown-menu.d.ts

@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, menuLabel, }: DropdownMenuProps<T>) => React.JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, menuLabel, shouldPreventEscapePropagation, }: DropdownMenuProps<T>) => React.JSX.Element;
 export default DropdownMenu;

package/dist/types/types.d.ts

@@ -185,6 +185,11 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
      * Provide an accessible label for the menu element for assistive technology.
      */
     menuLabel?: string;
+    /**
+     * When set to true, will call stopPropagation on the ESCAPE key event.
+     * This prevents the ESCAPE event from bubbling up to parent elements.
+     */
+    shouldPreventEscapePropagation?: boolean;
 }
 type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer?: false;

package/dist/types-ts4.5/dropdown-menu.d.ts

@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, menuLabel, }: DropdownMenuProps<T>) => React.JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, menuLabel, shouldPreventEscapePropagation, }: DropdownMenuProps<T>) => React.JSX.Element;
 export default DropdownMenu;

package/dist/types-ts4.5/types.d.ts

@@ -185,6 +185,11 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
      * Provide an accessible label for the menu element for assistive technology.
      */
     menuLabel?: string;
+    /**
+     * When set to true, will call stopPropagation on the ESCAPE key event.
+     * This prevents the ESCAPE event from bubbling up to parent elements.
+     */
+    shouldPreventEscapePropagation?: boolean;
 }
 type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer?: false;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "16.4.7",
+	"version": "16.5.0",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"