@atlaskit/dropdown-menu 12.1.3 → 12.1.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/dropdown-menu
 
+## 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
+
+- [#41898](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41898) [`b3c84e42159`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3c84e42159) - Fix loss of autofocus when opening with Enter and Space keys.
+
 ## 12.1.3
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.KEY_SPACE = exports.KEY_ENTER = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -42,6 +42,8 @@ var opposites = {
   auto: 'auto',
   end: 'start'
 };
+var KEY_SPACE = exports.KEY_SPACE = ' ';
+var KEY_ENTER = exports.KEY_ENTER = 'Enter';
 var getFallbackPlacements = function getFallbackPlacements(placement) {
   var placementPieces = placement.split('-');
   var mainAxis = placementPieces[0];
@@ -116,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({
@@ -167,6 +173,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
           // 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

@@ -27,6 +27,8 @@ const opposites = {
   auto: 'auto',
   end: 'start'
 };
+export const KEY_SPACE = ' ';
+export const KEY_ENTER = 'Enter';
 const getFallbackPlacements = placement => {
   const placementPieces = placement.split('-');
   const mainAxis = placementPieces[0];
@@ -85,7 +87,8 @@ const DropdownMenu = ({
     const {
       clientX,
       clientY,
-      type
+      type,
+      detail
     } = event;
     if (type === 'keydown') {
       setTriggeredUsingKeyboard(true);
@@ -93,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({
@@ -138,6 +144,9 @@ const DropdownMenu = ({
           // 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

@@ -33,6 +33,8 @@ var opposites = {
   auto: 'auto',
   end: 'start'
 };
+export var KEY_SPACE = ' ';
+export var KEY_ENTER = 'Enter';
 var getFallbackPlacements = function getFallbackPlacements(placement) {
   var placementPieces = placement.split('-');
   var mainAxis = placementPieces[0];
@@ -107,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({
@@ -158,6 +164,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
           // 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/dropdown-menu.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import type { DropdownMenuProps } from './types';
+export declare const KEY_SPACE = " ";
+export declare const KEY_ENTER = "Enter";
 /**
  * __Dropdown menu__
  *

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/dropdown-menu.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import type { DropdownMenuProps } from './types';
+export declare const KEY_SPACE = " ";
+export declare const KEY_ENTER = "Enter";
 /**
  * __Dropdown menu__
  *

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.3",
+  "version": "12.1.5",
   "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.10.0",
+    "@atlaskit/button": "^16.13.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
@@ -31,10 +31,10 @@
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
     "@atlaskit/popup": "^1.11.0",
-    "@atlaskit/primitives": "^1.6.0",
+    "@atlaskit/primitives": "^1.9.0",
     "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.27.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1"