@atlaskit/dropdown-menu 12.1.4 → 12.1.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/dropdown-menu
 
+## 12.1.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.5
+
+### Patch Changes
+
+- [#42645](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42645) [`df1c4868d29`](https://bitbucket.org/atlassian/atlassian-frontend/commits/df1c4868d29) - Fix keyboard access for custom trigger.
+
 ## 12.1.4
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -118,13 +118,17 @@ var DropdownMenu = function DropdownMenu(_ref) {
     var newValue = !isLocalOpen;
     var clientX = event.clientX,
       clientY = event.clientY,
-      type = event.type;
+      type = event.type,
+      detail = event.detail;
     if (type === 'keydown') {
       setTriggeredUsingKeyboard(true);
     } else if (clientX === 0 || clientY === 0) {
       // Hitting enter/space is registered as a click
       // with both clientX and clientY === 0
       setTriggeredUsingKeyboard(true);
+    } else if (detail === 0) {
+      // Fix for Safari. clientX and clientY !== 0 in Safari
+      setTriggeredUsingKeyboard(true);
     }
     setLocalIsOpen(newValue);
     onOpenChange({
@@ -165,11 +169,13 @@ var DropdownMenu = function DropdownMenu(_ref) {
     return (0, _bindEventListener.bind)(window, {
       type: 'keydown',
       listener: function openOnKeyDown(e) {
-        // KEY_ENTER and KEY_SPACE are required to correctly recognize the keydown event in Safari
-        if (e.key === _keycodes.KEY_DOWN || e.key === KEY_ENTER || e.key === KEY_SPACE) {
+        if (e.key === _keycodes.KEY_DOWN) {
           // prevent page scroll
           e.preventDefault();
           handleTriggerClicked(e);
+        } else if ((e.key === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
+          // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
+          setTriggeredUsingKeyboard(true);
         }
       }
     });

package/dist/es2019/dropdown-menu.js

@@ -87,7 +87,8 @@ const DropdownMenu = ({
     const {
       clientX,
       clientY,
-      type
+      type,
+      detail
     } = event;
     if (type === 'keydown') {
       setTriggeredUsingKeyboard(true);
@@ -95,6 +96,9 @@ const DropdownMenu = ({
       // Hitting enter/space is registered as a click
       // with both clientX and clientY === 0
       setTriggeredUsingKeyboard(true);
+    } else if (detail === 0) {
+      // Fix for Safari. clientX and clientY !== 0 in Safari
+      setTriggeredUsingKeyboard(true);
     }
     setLocalIsOpen(newValue);
     onOpenChange({
@@ -136,11 +140,13 @@ const DropdownMenu = ({
     return bind(window, {
       type: 'keydown',
       listener: function openOnKeyDown(e) {
-        // KEY_ENTER and KEY_SPACE are required to correctly recognize the keydown event in Safari
-        if (e.key === KEY_DOWN || e.key === KEY_ENTER || e.key === KEY_SPACE) {
+        if (e.key === KEY_DOWN) {
           // prevent page scroll
           e.preventDefault();
           handleTriggerClicked(e);
+        } else if ((e.key === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
+          // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
+          setTriggeredUsingKeyboard(true);
         }
       }
     });

package/dist/esm/dropdown-menu.js

@@ -109,13 +109,17 @@ var DropdownMenu = function DropdownMenu(_ref) {
     var newValue = !isLocalOpen;
     var clientX = event.clientX,
       clientY = event.clientY,
-      type = event.type;
+      type = event.type,
+      detail = event.detail;
     if (type === 'keydown') {
       setTriggeredUsingKeyboard(true);
     } else if (clientX === 0 || clientY === 0) {
       // Hitting enter/space is registered as a click
       // with both clientX and clientY === 0
       setTriggeredUsingKeyboard(true);
+    } else if (detail === 0) {
+      // Fix for Safari. clientX and clientY !== 0 in Safari
+      setTriggeredUsingKeyboard(true);
     }
     setLocalIsOpen(newValue);
     onOpenChange({
@@ -156,11 +160,13 @@ var DropdownMenu = function DropdownMenu(_ref) {
     return bind(window, {
       type: 'keydown',
       listener: function openOnKeyDown(e) {
-        // KEY_ENTER and KEY_SPACE are required to correctly recognize the keydown event in Safari
-        if (e.key === KEY_DOWN || e.key === KEY_ENTER || e.key === KEY_SPACE) {
+        if (e.key === KEY_DOWN) {
           // prevent page scroll
           e.preventDefault();
           handleTriggerClicked(e);
+        } else if ((e.key === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
+          // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
+          setTriggeredUsingKeyboard(true);
         }
       }
     });

package/dist/types/types.d.ts

@@ -55,13 +55,13 @@ export interface DropdownMenuGroupProps extends SectionProps {
 export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> {
     /**
      * Controls the appearance of the menu.
-     * Default menu has scroll after its height exceeds the pre-defined amount.
-     * Tall menu has no scroll until the height exceeds the height of the viewport.
+     * The default menu will scroll after its height exceeds the pre-defined amount.
+     * The tall menu will not scroll until the height exceeds the height of the viewport.
      */
     appearance?: 'default' | 'tall';
     /**
      * Controls if the first menu item receives focus when menu is opened. Note that the menu has a focus lock
-     * which traps the focus within the menu. Also, the first item gets fouced automatically
+     * which traps the focus within the menu. The first item gets focus automatically
      * if the menu is triggered using the keyboard.
      *
      */
@@ -103,8 +103,11 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      */
     spacing?: Extract<MenuGroupProps['spacing'], 'cozy' | 'compact'>;
     /**
-     * Content which will trigger the dropdown menu to open and close. Use with `triggerType`
-     * to easily get a button trigger.
+     * Content that triggers the dropdown menu to open and close. Use with
+     * `triggerType` to get a button trigger. To customize the trigger element,
+     * provide a function to this prop. You can find
+     * [examples for custom triggers](components/dropdown-menu/examples#custom-triggers)
+     * in our documentation.
      */
     trigger?: string | ((triggerButtonProps: CustomTriggerProps<TriggerElement>) => ReactElement);
     /**

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

@@ -55,13 +55,13 @@ export interface DropdownMenuGroupProps extends SectionProps {
 export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> {
     /**
      * Controls the appearance of the menu.
-     * Default menu has scroll after its height exceeds the pre-defined amount.
-     * Tall menu has no scroll until the height exceeds the height of the viewport.
+     * The default menu will scroll after its height exceeds the pre-defined amount.
+     * The tall menu will not scroll until the height exceeds the height of the viewport.
      */
     appearance?: 'default' | 'tall';
     /**
      * Controls if the first menu item receives focus when menu is opened. Note that the menu has a focus lock
-     * which traps the focus within the menu. Also, the first item gets fouced automatically
+     * which traps the focus within the menu. The first item gets focus automatically
      * if the menu is triggered using the keyboard.
      *
      */
@@ -103,8 +103,11 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      */
     spacing?: Extract<MenuGroupProps['spacing'], 'cozy' | 'compact'>;
     /**
-     * Content which will trigger the dropdown menu to open and close. Use with `triggerType`
-     * to easily get a button trigger.
+     * Content that triggers the dropdown menu to open and close. Use with
+     * `triggerType` to get a button trigger. To customize the trigger element,
+     * provide a function to this prop. You can find
+     * [examples for custom triggers](components/dropdown-menu/examples#custom-triggers)
+     * in our documentation.
      */
     trigger?: string | ((triggerButtonProps: CustomTriggerProps<TriggerElement>) => ReactElement);
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "12.1.4",
+  "version": "12.1.6",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.11.0",
+    "@atlaskit/button": "^16.16.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
@@ -31,8 +31,8 @@
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
     "@atlaskit/popup": "^1.11.0",
-    "@atlaskit/primitives": "^1.6.0",
-    "@atlaskit/spinner": "^15.6.0",
+    "@atlaskit/primitives": "^1.10.0",
+    "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",