@atlaskit/dropdown-menu 12.1.4 → 12.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/dropdown-menu.js +9 -3
  3. package/dist/es2019/dropdown-menu.js +9 -3
  4. package/dist/esm/dropdown-menu.js +9 -3
  5. package/dist/types/types.d.ts +8 -5
  6. package/dist/types-ts4.5/types.d.ts +8 -5
  7. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/dropdown-menu
2
2
 
3
+ ## 12.1.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#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.
8
+
3
9
  ## 12.1.4
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/dropdown-menu.js CHANGED
@@ -118,13 +118,17 @@ var DropdownMenu = function DropdownMenu(_ref) {
118
118
  var newValue = !isLocalOpen;
119
119
  var clientX = event.clientX,
120
120
  clientY = event.clientY,
121
- type = event.type;
121
+ type = event.type,
122
+ detail = event.detail;
122
123
  if (type === 'keydown') {
123
124
  setTriggeredUsingKeyboard(true);
124
125
  } else if (clientX === 0 || clientY === 0) {
125
126
  // Hitting enter/space is registered as a click
126
127
  // with both clientX and clientY === 0
127
128
  setTriggeredUsingKeyboard(true);
129
+ } else if (detail === 0) {
130
+ // Fix for Safari. clientX and clientY !== 0 in Safari
131
+ setTriggeredUsingKeyboard(true);
128
132
  }
129
133
  setLocalIsOpen(newValue);
130
134
  onOpenChange({
@@ -165,11 +169,13 @@ var DropdownMenu = function DropdownMenu(_ref) {
165
169
  return (0, _bindEventListener.bind)(window, {
166
170
  type: 'keydown',
167
171
  listener: function openOnKeyDown(e) {
168
- // KEY_ENTER and KEY_SPACE are required to correctly recognize the keydown event in Safari
169
- if (e.key === _keycodes.KEY_DOWN || e.key === KEY_ENTER || e.key === KEY_SPACE) {
172
+ if (e.key === _keycodes.KEY_DOWN) {
170
173
  // prevent page scroll
171
174
  e.preventDefault();
172
175
  handleTriggerClicked(e);
176
+ } else if ((e.key === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
177
+ // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
178
+ setTriggeredUsingKeyboard(true);
173
179
  }
174
180
  }
175
181
  });
package/dist/es2019/dropdown-menu.js CHANGED
@@ -87,7 +87,8 @@ const DropdownMenu = ({
87
87
  const {
88
88
  clientX,
89
89
  clientY,
90
- type
90
+ type,
91
+ detail
91
92
  } = event;
92
93
  if (type === 'keydown') {
93
94
  setTriggeredUsingKeyboard(true);
@@ -95,6 +96,9 @@ const DropdownMenu = ({
95
96
  // Hitting enter/space is registered as a click
96
97
  // with both clientX and clientY === 0
97
98
  setTriggeredUsingKeyboard(true);
99
+ } else if (detail === 0) {
100
+ // Fix for Safari. clientX and clientY !== 0 in Safari
101
+ setTriggeredUsingKeyboard(true);
98
102
  }
99
103
  setLocalIsOpen(newValue);
100
104
  onOpenChange({
@@ -136,11 +140,13 @@ const DropdownMenu = ({
136
140
  return bind(window, {
137
141
  type: 'keydown',
138
142
  listener: function openOnKeyDown(e) {
139
- // KEY_ENTER and KEY_SPACE are required to correctly recognize the keydown event in Safari
140
- if (e.key === KEY_DOWN || e.key === KEY_ENTER || e.key === KEY_SPACE) {
143
+ if (e.key === KEY_DOWN) {
141
144
  // prevent page scroll
142
145
  e.preventDefault();
143
146
  handleTriggerClicked(e);
147
+ } else if ((e.key === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
148
+ // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
149
+ setTriggeredUsingKeyboard(true);
144
150
  }
145
151
  }
146
152
  });
package/dist/esm/dropdown-menu.js CHANGED
@@ -109,13 +109,17 @@ var DropdownMenu = function DropdownMenu(_ref) {
109
109
  var newValue = !isLocalOpen;
110
110
  var clientX = event.clientX,
111
111
  clientY = event.clientY,
112
- type = event.type;
112
+ type = event.type,
113
+ detail = event.detail;
113
114
  if (type === 'keydown') {
114
115
  setTriggeredUsingKeyboard(true);
115
116
  } else if (clientX === 0 || clientY === 0) {
116
117
  // Hitting enter/space is registered as a click
117
118
  // with both clientX and clientY === 0
118
119
  setTriggeredUsingKeyboard(true);
120
+ } else if (detail === 0) {
121
+ // Fix for Safari. clientX and clientY !== 0 in Safari
122
+ setTriggeredUsingKeyboard(true);
119
123
  }
120
124
  setLocalIsOpen(newValue);
121
125
  onOpenChange({
@@ -156,11 +160,13 @@ var DropdownMenu = function DropdownMenu(_ref) {
156
160
  return bind(window, {
157
161
  type: 'keydown',
158
162
  listener: function openOnKeyDown(e) {
159
- // KEY_ENTER and KEY_SPACE are required to correctly recognize the keydown event in Safari
160
- if (e.key === KEY_DOWN || e.key === KEY_ENTER || e.key === KEY_SPACE) {
163
+ if (e.key === KEY_DOWN) {
161
164
  // prevent page scroll
162
165
  e.preventDefault();
163
166
  handleTriggerClicked(e);
167
+ } else if ((e.key === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
168
+ // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
169
+ setTriggeredUsingKeyboard(true);
164
170
  }
165
171
  }
166
172
  });
package/dist/types/types.d.ts CHANGED
@@ -55,13 +55,13 @@ export interface DropdownMenuGroupProps extends SectionProps {
55
55
  export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> {
56
56
  /**
57
57
  * Controls the appearance of the menu.
58
- * Default menu has scroll after its height exceeds the pre-defined amount.
59
- * Tall menu has no scroll until the height exceeds the height of the viewport.
58
+ * The default menu will scroll after its height exceeds the pre-defined amount.
59
+ * The tall menu will not scroll until the height exceeds the height of the viewport.
60
60
  */
61
61
  appearance?: 'default' | 'tall';
62
62
  /**
63
63
  * Controls if the first menu item receives focus when menu is opened. Note that the menu has a focus lock
64
- * which traps the focus within the menu. Also, the first item gets fouced automatically
64
+ * which traps the focus within the menu. The first item gets focus automatically
65
65
  * if the menu is triggered using the keyboard.
66
66
  *
67
67
  */
@@ -103,8 +103,11 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
103
103
  */
104
104
  spacing?: Extract<MenuGroupProps['spacing'], 'cozy' | 'compact'>;
105
105
  /**
106
- * Content which will trigger the dropdown menu to open and close. Use with `triggerType`
107
- * to easily get a button trigger.
106
+ * Content that triggers the dropdown menu to open and close. Use with
107
+ * `triggerType` to get a button trigger. To customize the trigger element,
108
+ * provide a function to this prop. You can find
109
+ * [examples for custom triggers](components/dropdown-menu/examples#custom-triggers)
110
+ * in our documentation.
108
111
  */
109
112
  trigger?: string | ((triggerButtonProps: CustomTriggerProps<TriggerElement>) => ReactElement);
110
113
  /**
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -55,13 +55,13 @@ export interface DropdownMenuGroupProps extends SectionProps {
55
55
  export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> {
56
56
  /**
57
57
  * Controls the appearance of the menu.
58
- * Default menu has scroll after its height exceeds the pre-defined amount.
59
- * Tall menu has no scroll until the height exceeds the height of the viewport.
58
+ * The default menu will scroll after its height exceeds the pre-defined amount.
59
+ * The tall menu will not scroll until the height exceeds the height of the viewport.
60
60
  */
61
61
  appearance?: 'default' | 'tall';
62
62
  /**
63
63
  * Controls if the first menu item receives focus when menu is opened. Note that the menu has a focus lock
64
- * which traps the focus within the menu. Also, the first item gets fouced automatically
64
+ * which traps the focus within the menu. The first item gets focus automatically
65
65
  * if the menu is triggered using the keyboard.
66
66
  *
67
67
  */
@@ -103,8 +103,11 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
103
103
  */
104
104
  spacing?: Extract<MenuGroupProps['spacing'], 'cozy' | 'compact'>;
105
105
  /**
106
- * Content which will trigger the dropdown menu to open and close. Use with `triggerType`
107
- * to easily get a button trigger.
106
+ * Content that triggers the dropdown menu to open and close. Use with
107
+ * `triggerType` to get a button trigger. To customize the trigger element,
108
+ * provide a function to this prop. You can find
109
+ * [examples for custom triggers](components/dropdown-menu/examples#custom-triggers)
110
+ * in our documentation.
108
111
  */
109
112
  trigger?: string | ((triggerButtonProps: CustomTriggerProps<TriggerElement>) => ReactElement);
110
113
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/dropdown-menu",
3
- "version": "12.1.4",
3
+ "version": "12.1.5",
4
4
  "description": "A dropdown menu displays a list of actions or options to a user.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
23
23
  }
24
24
  },
25
25
  "dependencies": {
26
- "@atlaskit/button": "^16.11.0",
26
+ "@atlaskit/button": "^16.13.0",
27
27
  "@atlaskit/codemod-utils": "^4.2.0",
28
28
  "@atlaskit/ds-lib": "^2.2.0",
29
29
  "@atlaskit/icon": "^21.12.0",
@@ -31,7 +31,7 @@
31
31
  "@atlaskit/menu": "^2.1.0",
32
32
  "@atlaskit/platform-feature-flags": "^0.2.2",
33
33
  "@atlaskit/popup": "^1.11.0",
34
- "@atlaskit/primitives": "^1.6.0",
34
+ "@atlaskit/primitives": "^1.9.0",
35
35
  "@atlaskit/spinner": "^15.6.0",
36
36
  "@atlaskit/theme": "^12.6.0",
37
37
  "@atlaskit/tokens": "^1.28.0",