@atlaskit/dropdown-menu 13.0.6 → 14.0.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @atlaskit/dropdown-menu
 
+## 14.0.0
+
+### Major Changes
+
+- [#134856](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134856)
+  [`948a950e395ad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/948a950e395ad) -
+  The `onOpenChange` prop type has been updated, to make the `event` parameter nullable. This
+  property is for the corresponding `event` that led to the callback being called.
+
+  This is to support programatically closing the dropdown menu.
+
+  We are also adding the native `Event` type in the type union, to better align with the underlying
+  `Popup` component that `DropdownMenu` is built on top of.
+
+  Previously, the type of `onOpenChange` was:
+
+  ```ts
+  onOpenChange?: (args: {
+    isOpen: boolean;
+    event: React.MouseEvent | React.KeyboardEvent;
+  }) => void;
+  ```
+
+  It is now:
+
+  ```ts
+  onOpenChange?: (args: {
+    isOpen: boolean;
+    event: Event | React.MouseEvent | React.KeyboardEvent | null;
+  }) => void;
+  ```
+
+  When the dropdown is closed programatically, the `event` parameter will be `null`.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.1.0
+
+### Minor Changes
+
+- [#134128](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134128)
+  [`8255a77865aac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8255a77865aac) -
+  Added support for an optional role attribute on dropdown items to allow customization of ARIA
+  roles. Defaults to menuitem.
+
 ## 13.0.6
 
 ### Patch Changes

package/dist/cjs/dropdown-menu-item.js

@@ -15,7 +15,7 @@ var _customItem = _interopRequireDefault(require("@atlaskit/menu/custom-item"));
 var _linkItem = _interopRequireDefault(require("@atlaskit/menu/link-item"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
-var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef", "interactionName"];
+var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef", "interactionName", "role"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -47,6 +47,7 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     UNSAFE_shouldDisableRouterLink = _ref.UNSAFE_shouldDisableRouterLink,
     returnFocusRef = _ref.returnFocusRef,
     interactionName = _ref.interactionName,
+    role = _ref.role,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // if the dropdown item has aria-haspopup, we won't register with focus manager
   // since it is a nested trigger, we have registered inside dropdown-menu
@@ -111,7 +112,7 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       isSelected: isSelected,
       onClick: handleItemClick,
       ref: (0, _mergeRefs.default)([ref, itemRef]),
-      role: "menuitem",
+      role: role || 'menuitem',
       shouldDescriptionWrap: shouldDescriptionWrap,
       shouldTitleWrap: shouldTitleWrap,
       testId: testId

package/dist/cjs/dropdown-menu.js

@@ -61,6 +61,9 @@ var getFallbackPlacements = function getFallbackPlacements(placement) {
     return ["".concat(mainAxis, "-start"), "".concat(mainAxis, "-end"), "".concat(opposites[mainAxis]), "".concat(opposites[mainAxis], "-start"), "".concat(opposites[mainAxis], "-end"), "auto"];
   }
 };
+function isKeyboardEvent(event) {
+  return event !== null && (event instanceof KeyboardEvent || 'nativeEvent' in event && event.nativeEvent instanceof KeyboardEvent);
+}
 
 /**
  * __Dropdown menu__
@@ -150,8 +153,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
     });
   }, [isLocalOpen, setLocalIsOpen, onOpenChange, itemRef]);
   var handleOnClose = (0, _react.useCallback)(function (event, currentLevel) {
-    var _event$target, _event$target$closest;
-    if (event.key !== 'Escape' && event.key !== 'Tab' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, "[id^=".concat(_useGeneratedId.PREFIX, "] [aria-haspopup]"))) {
+    var _event$target$closest, _event$target;
+    var isTabOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape');
+    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
       // if it is a nested dropdown, clicking trigger won't close the dropdown
@@ -175,7 +179,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
         var _returnFocusRef$curre;
         (_returnFocusRef$curre = returnFocusRef.current) === null || _returnFocusRef$curre === void 0 || _returnFocusRef$curre.focus();
       });
-    } else if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
+    } else if (isKeyboardEvent(event) && (event.key === 'Tab' && event.shiftKey || event.key === 'Escape')) {
       requestAnimationFrame(function () {
         var _itemRef$current3;
         (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 || _itemRef$current3.focus();

package/dist/es2019/dropdown-menu-item.js

@@ -33,6 +33,7 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
   UNSAFE_shouldDisableRouterLink,
   returnFocusRef,
   interactionName,
+  role,
   ...rest
 }, ref) => {
   // if the dropdown item has aria-haspopup, we won't register with focus manager
@@ -98,7 +99,7 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
       isSelected: isSelected,
       onClick: handleItemClick,
       ref: mergeRefs([ref, itemRef]),
-      role: "menuitem",
+      role: role || 'menuitem',
       shouldDescriptionWrap: shouldDescriptionWrap,
       shouldTitleWrap: shouldTitleWrap,
       testId: testId

package/dist/es2019/dropdown-menu.js

@@ -46,6 +46,9 @@ const getFallbackPlacements = placement => {
     return [`${mainAxis}-start`, `${mainAxis}-end`, `${opposites[mainAxis]}`, `${opposites[mainAxis]}-start`, `${opposites[mainAxis]}-end`, `auto`];
   }
 };
+function isKeyboardEvent(event) {
+  return event !== null && (event instanceof KeyboardEvent || 'nativeEvent' in event && event.nativeEvent instanceof KeyboardEvent);
+}
 
 /**
  * __Dropdown menu__
@@ -119,8 +122,9 @@ const DropdownMenu = ({
     });
   }, [isLocalOpen, setLocalIsOpen, onOpenChange, itemRef]);
   const handleOnClose = useCallback((event, currentLevel) => {
-    var _event$target, _event$target$closest;
-    if (event.key !== 'Escape' && event.key !== 'Tab' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, `[id^=${PREFIX}] [aria-haspopup]`)) {
+    var _event$target$closest, _event$target;
+    const isTabOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape');
+    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
       // if it is a nested dropdown, clicking trigger won't close the dropdown
@@ -144,7 +148,7 @@ const DropdownMenu = ({
         var _returnFocusRef$curre;
         (_returnFocusRef$curre = returnFocusRef.current) === null || _returnFocusRef$curre === void 0 ? void 0 : _returnFocusRef$curre.focus();
       });
-    } else if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
+    } else if (isKeyboardEvent(event) && (event.key === 'Tab' && event.shiftKey || event.key === 'Escape')) {
       requestAnimationFrame(() => {
         var _itemRef$current3;
         (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 ? void 0 : _itemRef$current3.focus();

package/dist/esm/dropdown-menu-item.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef", "interactionName"];
+var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef", "interactionName", "role"];
 import React, { forwardRef, useCallback } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import ButtonItem from '@atlaskit/menu/button-item';
@@ -37,6 +37,7 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     UNSAFE_shouldDisableRouterLink = _ref.UNSAFE_shouldDisableRouterLink,
     returnFocusRef = _ref.returnFocusRef,
     interactionName = _ref.interactionName,
+    role = _ref.role,
     rest = _objectWithoutProperties(_ref, _excluded);
   // if the dropdown item has aria-haspopup, we won't register with focus manager
   // since it is a nested trigger, we have registered inside dropdown-menu
@@ -101,7 +102,7 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isSelected: isSelected,
       onClick: handleItemClick,
       ref: mergeRefs([ref, itemRef]),
-      role: "menuitem",
+      role: role || 'menuitem',
       shouldDescriptionWrap: shouldDescriptionWrap,
       shouldTitleWrap: shouldTitleWrap,
       testId: testId

package/dist/esm/dropdown-menu.js

@@ -52,6 +52,9 @@ var getFallbackPlacements = function getFallbackPlacements(placement) {
     return ["".concat(mainAxis, "-start"), "".concat(mainAxis, "-end"), "".concat(opposites[mainAxis]), "".concat(opposites[mainAxis], "-start"), "".concat(opposites[mainAxis], "-end"), "auto"];
   }
 };
+function isKeyboardEvent(event) {
+  return event !== null && (event instanceof KeyboardEvent || 'nativeEvent' in event && event.nativeEvent instanceof KeyboardEvent);
+}
 
 /**
  * __Dropdown menu__
@@ -141,8 +144,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
     });
   }, [isLocalOpen, setLocalIsOpen, onOpenChange, itemRef]);
   var handleOnClose = useCallback(function (event, currentLevel) {
-    var _event$target, _event$target$closest;
-    if (event.key !== 'Escape' && event.key !== 'Tab' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, "[id^=".concat(PREFIX, "] [aria-haspopup]"))) {
+    var _event$target$closest, _event$target;
+    var isTabOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape');
+    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
       // if it is a nested dropdown, clicking trigger won't close the dropdown
@@ -166,7 +170,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
         var _returnFocusRef$curre;
         (_returnFocusRef$curre = returnFocusRef.current) === null || _returnFocusRef$curre === void 0 || _returnFocusRef$curre.focus();
       });
-    } else if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
+    } else if (isKeyboardEvent(event) && (event.key === 'Tab' && event.shiftKey || event.key === 'Escape')) {
       requestAnimationFrame(function () {
         var _itemRef$current3;
         (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 || _itemRef$current3.focus();

package/dist/types/types.d.ts

@@ -51,7 +51,11 @@ export interface CustomTriggerProps<TriggerElement extends HTMLElement = any> ex
 }
 export interface OnOpenChangeArgs {
     isOpen: boolean;
-    event: MouseEvent | KeyboardEvent;
+    /**
+     * The event that triggered the close.
+     * The value will be `null` when the dropdown is closed programatically and has no corresponding event.
+     */
+    event: Event | MouseEvent | KeyboardEvent | null;
 }
 export interface MenuWrapperProps extends MenuGroupProps {
     setInitialFocusRef?: ContentProps['setInitialFocusRef'];
@@ -150,6 +154,8 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
     defaultOpen?: boolean;
     /**
      * Called when the menu should be open/closed. Receives an object with `isOpen` state.
+     *
+     * If the dropdown was closed programatically, the `event` parameter will be `null`.
      */
     onOpenChange?: (args: OnOpenChangeArgs) => void;
     /**
@@ -272,6 +278,13 @@ export interface DropdownItemProps {
      * An optional boolean value used to indicate if the dropdown item has popup or not.
      */
     'aria-haspopup'?: boolean | 'dialog';
+    /**
+     * An optional string value that specifies the role of the dropdown item.
+     * Use this to indicate whether the item is
+     * or presentational (e.g., 'presentation') for accessibility purposes.
+     * If not specified, it defaults to role="menuitem".
+     */
+    role?: string;
 }
 export interface DropdownItemCheckboxProps {
     /**

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

@@ -51,7 +51,11 @@ export interface CustomTriggerProps<TriggerElement extends HTMLElement = any> ex
 }
 export interface OnOpenChangeArgs {
     isOpen: boolean;
-    event: MouseEvent | KeyboardEvent;
+    /**
+     * The event that triggered the close.
+     * The value will be `null` when the dropdown is closed programatically and has no corresponding event.
+     */
+    event: Event | MouseEvent | KeyboardEvent | null;
 }
 export interface MenuWrapperProps extends MenuGroupProps {
     setInitialFocusRef?: ContentProps['setInitialFocusRef'];
@@ -150,6 +154,8 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
     defaultOpen?: boolean;
     /**
      * Called when the menu should be open/closed. Receives an object with `isOpen` state.
+     *
+     * If the dropdown was closed programatically, the `event` parameter will be `null`.
      */
     onOpenChange?: (args: OnOpenChangeArgs) => void;
     /**
@@ -272,6 +278,13 @@ export interface DropdownItemProps {
      * An optional boolean value used to indicate if the dropdown item has popup or not.
      */
     'aria-haspopup'?: boolean | 'dialog';
+    /**
+     * An optional string value that specifies the role of the dropdown item.
+     * Use this to indicate whether the item is
+     * or presentational (e.g., 'presentation') for accessibility purposes.
+     * If not specified, it defaults to role="menuitem".
+     */
+    role?: string;
 }
 export interface DropdownItemCheckboxProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "13.0.6",
+	"version": "14.0.0",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,9 +28,9 @@
 		"@atlaskit/button": "^22.0.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^25.2.0",
+		"@atlaskit/icon": "^25.3.0",
 		"@atlaskit/layering": "^2.0.0",
-		"@atlaskit/menu": "^3.1.0",
+		"@atlaskit/menu": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^3.0.0",
 		"@atlaskit/primitives": "^14.2.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/docs": "^10.0.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/link": "^3.0.0",
+		"@atlaskit/link": "^3.1.0",
 		"@atlaskit/lozenge": "^12.2.0",
 		"@atlaskit/modal-dialog": "^14.0.0",
 		"@atlaskit/section-message": "^8.2.0",