@atlaskit/dropdown-menu 13.1.0 → 14.0.1
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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,49 @@
|
|
|
1
1
|
# @atlaskit/dropdown-menu
|
|
2
2
|
|
|
3
|
+
## 14.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 14.0.0
|
|
10
|
+
|
|
11
|
+
### Major Changes
|
|
12
|
+
|
|
13
|
+
- [#134856](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134856)
|
|
14
|
+
[`948a950e395ad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/948a950e395ad) -
|
|
15
|
+
The `onOpenChange` prop type has been updated, to make the `event` parameter nullable. This
|
|
16
|
+
property is for the corresponding `event` that led to the callback being called.
|
|
17
|
+
|
|
18
|
+
This is to support programatically closing the dropdown menu.
|
|
19
|
+
|
|
20
|
+
We are also adding the native `Event` type in the type union, to better align with the underlying
|
|
21
|
+
`Popup` component that `DropdownMenu` is built on top of.
|
|
22
|
+
|
|
23
|
+
Previously, the type of `onOpenChange` was:
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
onOpenChange?: (args: {
|
|
27
|
+
isOpen: boolean;
|
|
28
|
+
event: React.MouseEvent | React.KeyboardEvent;
|
|
29
|
+
}) => void;
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
It is now:
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
onOpenChange?: (args: {
|
|
36
|
+
isOpen: boolean;
|
|
37
|
+
event: Event | React.MouseEvent | React.KeyboardEvent | null;
|
|
38
|
+
}) => void;
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
When the dropdown is closed programatically, the `event` parameter will be `null`.
|
|
42
|
+
|
|
43
|
+
### Patch Changes
|
|
44
|
+
|
|
45
|
+
- Updated dependencies
|
|
46
|
+
|
|
3
47
|
## 13.1.0
|
|
4
48
|
|
|
5
49
|
### Minor Changes
|
|
@@ -61,6 +61,9 @@ var getFallbackPlacements = function getFallbackPlacements(placement) {
|
|
|
61
61
|
return ["".concat(mainAxis, "-start"), "".concat(mainAxis, "-end"), "".concat(opposites[mainAxis]), "".concat(opposites[mainAxis], "-start"), "".concat(opposites[mainAxis], "-end"), "auto"];
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
|
+
function isKeyboardEvent(event) {
|
|
65
|
+
return event !== null && (event instanceof KeyboardEvent || 'nativeEvent' in event && event.nativeEvent instanceof KeyboardEvent);
|
|
66
|
+
}
|
|
64
67
|
|
|
65
68
|
/**
|
|
66
69
|
* __Dropdown menu__
|
|
@@ -150,8 +153,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
|
|
|
150
153
|
});
|
|
151
154
|
}, [isLocalOpen, setLocalIsOpen, onOpenChange, itemRef]);
|
|
152
155
|
var handleOnClose = (0, _react.useCallback)(function (event, currentLevel) {
|
|
153
|
-
var _event$target, _event$target
|
|
154
|
-
|
|
156
|
+
var _event$target$closest, _event$target;
|
|
157
|
+
var isTabOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape');
|
|
158
|
+
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]"))) {
|
|
155
159
|
var _itemRef$current2;
|
|
156
160
|
// Check if it is within dropdown and it is a trigger button
|
|
157
161
|
// if it is a nested dropdown, clicking trigger won't close the dropdown
|
|
@@ -175,7 +179,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
|
|
|
175
179
|
var _returnFocusRef$curre;
|
|
176
180
|
(_returnFocusRef$curre = returnFocusRef.current) === null || _returnFocusRef$curre === void 0 || _returnFocusRef$curre.focus();
|
|
177
181
|
});
|
|
178
|
-
} else if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
|
|
182
|
+
} else if (isKeyboardEvent(event) && (event.key === 'Tab' && event.shiftKey || event.key === 'Escape')) {
|
|
179
183
|
requestAnimationFrame(function () {
|
|
180
184
|
var _itemRef$current3;
|
|
181
185
|
(_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 || _itemRef$current3.focus();
|
|
@@ -46,6 +46,9 @@ const getFallbackPlacements = placement => {
|
|
|
46
46
|
return [`${mainAxis}-start`, `${mainAxis}-end`, `${opposites[mainAxis]}`, `${opposites[mainAxis]}-start`, `${opposites[mainAxis]}-end`, `auto`];
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
+
function isKeyboardEvent(event) {
|
|
50
|
+
return event !== null && (event instanceof KeyboardEvent || 'nativeEvent' in event && event.nativeEvent instanceof KeyboardEvent);
|
|
51
|
+
}
|
|
49
52
|
|
|
50
53
|
/**
|
|
51
54
|
* __Dropdown menu__
|
|
@@ -119,8 +122,9 @@ const DropdownMenu = ({
|
|
|
119
122
|
});
|
|
120
123
|
}, [isLocalOpen, setLocalIsOpen, onOpenChange, itemRef]);
|
|
121
124
|
const handleOnClose = useCallback((event, currentLevel) => {
|
|
122
|
-
var _event$target, _event$target
|
|
123
|
-
|
|
125
|
+
var _event$target$closest, _event$target;
|
|
126
|
+
const isTabOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape');
|
|
127
|
+
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]`)) {
|
|
124
128
|
var _itemRef$current2;
|
|
125
129
|
// Check if it is within dropdown and it is a trigger button
|
|
126
130
|
// if it is a nested dropdown, clicking trigger won't close the dropdown
|
|
@@ -144,7 +148,7 @@ const DropdownMenu = ({
|
|
|
144
148
|
var _returnFocusRef$curre;
|
|
145
149
|
(_returnFocusRef$curre = returnFocusRef.current) === null || _returnFocusRef$curre === void 0 ? void 0 : _returnFocusRef$curre.focus();
|
|
146
150
|
});
|
|
147
|
-
} else if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
|
|
151
|
+
} else if (isKeyboardEvent(event) && (event.key === 'Tab' && event.shiftKey || event.key === 'Escape')) {
|
|
148
152
|
requestAnimationFrame(() => {
|
|
149
153
|
var _itemRef$current3;
|
|
150
154
|
(_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 ? void 0 : _itemRef$current3.focus();
|
|
@@ -52,6 +52,9 @@ var getFallbackPlacements = function getFallbackPlacements(placement) {
|
|
|
52
52
|
return ["".concat(mainAxis, "-start"), "".concat(mainAxis, "-end"), "".concat(opposites[mainAxis]), "".concat(opposites[mainAxis], "-start"), "".concat(opposites[mainAxis], "-end"), "auto"];
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
|
+
function isKeyboardEvent(event) {
|
|
56
|
+
return event !== null && (event instanceof KeyboardEvent || 'nativeEvent' in event && event.nativeEvent instanceof KeyboardEvent);
|
|
57
|
+
}
|
|
55
58
|
|
|
56
59
|
/**
|
|
57
60
|
* __Dropdown menu__
|
|
@@ -141,8 +144,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
|
|
|
141
144
|
});
|
|
142
145
|
}, [isLocalOpen, setLocalIsOpen, onOpenChange, itemRef]);
|
|
143
146
|
var handleOnClose = useCallback(function (event, currentLevel) {
|
|
144
|
-
var _event$target, _event$target
|
|
145
|
-
|
|
147
|
+
var _event$target$closest, _event$target;
|
|
148
|
+
var isTabOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape');
|
|
149
|
+
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]"))) {
|
|
146
150
|
var _itemRef$current2;
|
|
147
151
|
// Check if it is within dropdown and it is a trigger button
|
|
148
152
|
// if it is a nested dropdown, clicking trigger won't close the dropdown
|
|
@@ -166,7 +170,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
|
|
|
166
170
|
var _returnFocusRef$curre;
|
|
167
171
|
(_returnFocusRef$curre = returnFocusRef.current) === null || _returnFocusRef$curre === void 0 || _returnFocusRef$curre.focus();
|
|
168
172
|
});
|
|
169
|
-
} else if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
|
|
173
|
+
} else if (isKeyboardEvent(event) && (event.key === 'Tab' && event.shiftKey || event.key === 'Escape')) {
|
|
170
174
|
requestAnimationFrame(function () {
|
|
171
175
|
var _itemRef$current3;
|
|
172
176
|
(_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 || _itemRef$current3.focus();
|
package/dist/types/types.d.ts
CHANGED
|
@@ -51,7 +51,11 @@ export interface CustomTriggerProps<TriggerElement extends HTMLElement = any> ex
|
|
|
51
51
|
}
|
|
52
52
|
export interface OnOpenChangeArgs {
|
|
53
53
|
isOpen: boolean;
|
|
54
|
-
|
|
54
|
+
/**
|
|
55
|
+
* The event that triggered the close.
|
|
56
|
+
* The value will be `null` when the dropdown is closed programatically and has no corresponding event.
|
|
57
|
+
*/
|
|
58
|
+
event: Event | MouseEvent | KeyboardEvent | null;
|
|
55
59
|
}
|
|
56
60
|
export interface MenuWrapperProps extends MenuGroupProps {
|
|
57
61
|
setInitialFocusRef?: ContentProps['setInitialFocusRef'];
|
|
@@ -150,6 +154,8 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
|
|
|
150
154
|
defaultOpen?: boolean;
|
|
151
155
|
/**
|
|
152
156
|
* Called when the menu should be open/closed. Receives an object with `isOpen` state.
|
|
157
|
+
*
|
|
158
|
+
* If the dropdown was closed programatically, the `event` parameter will be `null`.
|
|
153
159
|
*/
|
|
154
160
|
onOpenChange?: (args: OnOpenChangeArgs) => void;
|
|
155
161
|
/**
|
|
@@ -51,7 +51,11 @@ export interface CustomTriggerProps<TriggerElement extends HTMLElement = any> ex
|
|
|
51
51
|
}
|
|
52
52
|
export interface OnOpenChangeArgs {
|
|
53
53
|
isOpen: boolean;
|
|
54
|
-
|
|
54
|
+
/**
|
|
55
|
+
* The event that triggered the close.
|
|
56
|
+
* The value will be `null` when the dropdown is closed programatically and has no corresponding event.
|
|
57
|
+
*/
|
|
58
|
+
event: Event | MouseEvent | KeyboardEvent | null;
|
|
55
59
|
}
|
|
56
60
|
export interface MenuWrapperProps extends MenuGroupProps {
|
|
57
61
|
setInitialFocusRef?: ContentProps['setInitialFocusRef'];
|
|
@@ -150,6 +154,8 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
|
|
|
150
154
|
defaultOpen?: boolean;
|
|
151
155
|
/**
|
|
152
156
|
* Called when the menu should be open/closed. Receives an object with `isOpen` state.
|
|
157
|
+
*
|
|
158
|
+
* If the dropdown was closed programatically, the `event` parameter will be `null`.
|
|
153
159
|
*/
|
|
154
160
|
onOpenChange?: (args: OnOpenChangeArgs) => void;
|
|
155
161
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/dropdown-menu",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "14.0.1",
|
|
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/"
|
|
@@ -25,11 +25,11 @@
|
|
|
25
25
|
"runReact18": true
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@atlaskit/button": "^
|
|
28
|
+
"@atlaskit/button": "^23.0.0",
|
|
29
29
|
"@atlaskit/codemod-utils": "^4.2.0",
|
|
30
30
|
"@atlaskit/ds-lib": "^4.0.0",
|
|
31
|
-
"@atlaskit/icon": "^25.
|
|
32
|
-
"@atlaskit/layering": "^2.
|
|
31
|
+
"@atlaskit/icon": "^25.4.0",
|
|
32
|
+
"@atlaskit/layering": "^2.1.0",
|
|
33
33
|
"@atlaskit/menu": "^3.2.0",
|
|
34
34
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
35
35
|
"@atlaskit/popup": "^3.0.0",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@af/accessibility-testing": "^2.0.0",
|
|
50
50
|
"@af/integration-testing": "^0.5.0",
|
|
51
51
|
"@af/visual-regression": "^1.3.0",
|
|
52
|
-
"@atlaskit/app-provider": "^2.
|
|
52
|
+
"@atlaskit/app-provider": "^2.1.0",
|
|
53
53
|
"@atlaskit/atlassian-navigation": "^5.1.0",
|
|
54
54
|
"@atlaskit/avatar": "^25.0.0",
|
|
55
55
|
"@atlaskit/checkbox": "^17.0.0",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"@atlaskit/heading": "^5.1.0",
|
|
59
59
|
"@atlaskit/link": "^3.1.0",
|
|
60
60
|
"@atlaskit/lozenge": "^12.2.0",
|
|
61
|
-
"@atlaskit/modal-dialog": "^14.
|
|
61
|
+
"@atlaskit/modal-dialog": "^14.1.0",
|
|
62
62
|
"@atlaskit/section-message": "^8.2.0",
|
|
63
63
|
"@atlaskit/textfield": "^8.0.0",
|
|
64
64
|
"@atlaskit/toggle": "^15.0.0",
|