@atlaskit/dropdown-menu 12.18.0 → 12.18.2

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 (8) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/dropdown-menu.js +13 -4
  3. package/dist/cjs/internal/utils/handle-focus.js +23 -7
  4. package/dist/es2019/dropdown-menu.js +13 -4
  5. package/dist/es2019/internal/utils/handle-focus.js +23 -7
  6. package/dist/esm/dropdown-menu.js +13 -4
  7. package/dist/esm/internal/utils/handle-focus.js +23 -7
  8. package/package.json +11 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/dropdown-menu
2
2
 
3
+ ## 12.18.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#139091](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139091)
8
+ [`142645f92833a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/142645f92833a) -
9
+ Fix a bug that caused the launch button to lose the ability to focus after closing a popup window
10
+ by pressing the Tab key that opened from a dropdown menu. This problem was reproduced only when
11
+ the `platform_dst_popup-disable-focuslock` feature flag was enabled.
12
+
13
+ ## 12.18.1
14
+
15
+ ### Patch Changes
16
+
17
+ - [#138585](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138585)
18
+ [`b72c2c7f9a2fd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b72c2c7f9a2fd) -
19
+ Support to close sibling dropdown menu under feature flag
20
+ - Updated dependencies
21
+
3
22
  ## 12.18.0
4
23
 
5
24
  ### Minor Changes
package/dist/cjs/dropdown-menu.js CHANGED
@@ -147,13 +147,22 @@ var DropdownMenu = function DropdownMenu(_ref) {
147
147
  event: event
148
148
  });
149
149
  }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
150
- var handleOnClose = (0, _react.useCallback)(function (event) {
150
+ var handleOnClose = (0, _react.useCallback)(function (event, currentLevel) {
151
151
  var _event$target, _event$target$closest;
152
152
  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]"))) {
153
+ var _itemRef$current2;
153
154
  // Check if it is within dropdown and it is a trigger button
154
155
  // if it is a nested dropdown, clicking trigger won't close the dropdown
155
156
  // Dropdown can be closed by pressing Escape, Tab or Shift + Tab
156
- return;
157
+ if (!currentLevel) {
158
+ return;
159
+ }
160
+ // if currentLevel is provided, we will compare with the given item's level
161
+ // when it is available and larger than currentLevel, we will proceed the close behavior
162
+ var toCloseLevel = (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 ? void 0 : _itemRef$current2.dataset['ds-Level'];
163
+ if (toCloseLevel && Number(toCloseLevel) < currentLevel) {
164
+ return;
165
+ }
157
166
  }
158
167
 
159
168
  // transfer focus to the element specified by ref
@@ -166,8 +175,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
166
175
  });
167
176
  } else if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
168
177
  requestAnimationFrame(function () {
169
- var _itemRef$current2;
170
- (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 || _itemRef$current2.focus();
178
+ var _itemRef$current3;
179
+ (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 || _itemRef$current3.focus();
171
180
  });
172
181
  } else if (triggerRef.current) {
173
182
  requestAnimationFrame(function () {
package/dist/cjs/internal/utils/handle-focus.js CHANGED
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = handleFocus;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _keycodes = require("@atlaskit/ds-lib/keycodes");
10
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
+ var _useGeneratedId = require("./use-generated-id");
10
12
  var _actionMap;
11
13
  var actionMap = (_actionMap = {}, (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_DOWN, 'next'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_UP, 'prev'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_HOME, 'first'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_END, 'last'), _actionMap);
12
14
 
@@ -47,15 +49,29 @@ function handleFocus(refs, isLayerDisabled, onClose) {
47
49
  var _document$activeEleme;
48
50
  return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
49
51
  });
50
- if (isLayerDisabled()) {
51
- // if nested dropdown isOpen we need to close on Tab key press
52
- if (e.key === _keycodes.KEY_TAB && !e.shiftKey) {
53
- onClose(e);
52
+ if ((0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
53
+ var _document$activeEleme2;
54
+ // if we use a popup as a nested dropdown, we must prevent the dropdown from closing.
55
+ var isNestedDropdown = !!((_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest("[id^=".concat(_useGeneratedId.PREFIX, "]")));
56
+ if (isLayerDisabled() && isNestedDropdown) {
57
+ if (e.key === _keycodes.KEY_TAB && !e.shiftKey) {
58
+ onClose(e);
59
+ }
60
+
61
+ // if it is a nested dropdown and the level of the given dropdown is not the current level,
62
+ // we don't need to have focus on it
63
+ return;
54
64
  }
65
+ } else {
66
+ if (isLayerDisabled()) {
67
+ if (e.key === _keycodes.KEY_TAB && !e.shiftKey) {
68
+ onClose(e);
69
+ }
55
70
 
56
- // if it is a nested dropdown and the level of the given dropdown is not the current level,
57
- // we don't need to have focus on it
58
- return;
71
+ // if it is a nested dropdown and the level of the given dropdown is not the current level,
72
+ // we don't need to have focus on it
73
+ return;
74
+ }
59
75
  }
60
76
  var action = actionMap[e.key];
61
77
  switch (action) {
package/dist/es2019/dropdown-menu.js CHANGED
@@ -116,13 +116,22 @@ const DropdownMenu = ({
116
116
  event
117
117
  });
118
118
  }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
119
- const handleOnClose = useCallback(event => {
119
+ const handleOnClose = useCallback((event, currentLevel) => {
120
120
  var _event$target, _event$target$closest;
121
121
  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]`)) {
122
+ var _itemRef$current2;
122
123
  // Check if it is within dropdown and it is a trigger button
123
124
  // if it is a nested dropdown, clicking trigger won't close the dropdown
124
125
  // Dropdown can be closed by pressing Escape, Tab or Shift + Tab
125
- return;
126
+ if (!currentLevel) {
127
+ return;
128
+ }
129
+ // if currentLevel is provided, we will compare with the given item's level
130
+ // when it is available and larger than currentLevel, we will proceed the close behavior
131
+ const toCloseLevel = (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 ? void 0 : _itemRef$current2.dataset['ds-Level'];
132
+ if (toCloseLevel && Number(toCloseLevel) < currentLevel) {
133
+ return;
134
+ }
126
135
  }
127
136
 
128
137
  // transfer focus to the element specified by ref
@@ -135,8 +144,8 @@ const DropdownMenu = ({
135
144
  });
136
145
  } else if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
137
146
  requestAnimationFrame(() => {
138
- var _itemRef$current2;
139
- (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 ? void 0 : _itemRef$current2.focus();
147
+ var _itemRef$current3;
148
+ (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 ? void 0 : _itemRef$current3.focus();
140
149
  });
141
150
  } else if (triggerRef.current) {
142
151
  requestAnimationFrame(() => {
package/dist/es2019/internal/utils/handle-focus.js CHANGED
@@ -1,4 +1,6 @@
1
1
  import { KEY_DOWN, KEY_END, KEY_HOME, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/keycodes';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
3
+ import { PREFIX } from './use-generated-id';
2
4
  const actionMap = {
3
5
  [KEY_DOWN]: 'next',
4
6
  [KEY_UP]: 'prev',
@@ -43,15 +45,29 @@ export default function handleFocus(refs, isLayerDisabled, onClose) {
43
45
  var _document$activeEleme;
44
46
  return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
45
47
  });
46
- if (isLayerDisabled()) {
47
- // if nested dropdown isOpen we need to close on Tab key press
48
- if (e.key === KEY_TAB && !e.shiftKey) {
49
- onClose(e);
48
+ if (fg('platform_dst_popup-disable-focuslock')) {
49
+ var _document$activeEleme2;
50
+ // if we use a popup as a nested dropdown, we must prevent the dropdown from closing.
51
+ const isNestedDropdown = !!((_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest(`[id^=${PREFIX}]`));
52
+ if (isLayerDisabled() && isNestedDropdown) {
53
+ if (e.key === KEY_TAB && !e.shiftKey) {
54
+ onClose(e);
55
+ }
56
+
57
+ // if it is a nested dropdown and the level of the given dropdown is not the current level,
58
+ // we don't need to have focus on it
59
+ return;
50
60
  }
61
+ } else {
62
+ if (isLayerDisabled()) {
63
+ if (e.key === KEY_TAB && !e.shiftKey) {
64
+ onClose(e);
65
+ }
51
66
 
52
- // if it is a nested dropdown and the level of the given dropdown is not the current level,
53
- // we don't need to have focus on it
54
- return;
67
+ // if it is a nested dropdown and the level of the given dropdown is not the current level,
68
+ // we don't need to have focus on it
69
+ return;
70
+ }
55
71
  }
56
72
  const action = actionMap[e.key];
57
73
  switch (action) {
package/dist/esm/dropdown-menu.js CHANGED
@@ -138,13 +138,22 @@ var DropdownMenu = function DropdownMenu(_ref) {
138
138
  event: event
139
139
  });
140
140
  }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
141
- var handleOnClose = useCallback(function (event) {
141
+ var handleOnClose = useCallback(function (event, currentLevel) {
142
142
  var _event$target, _event$target$closest;
143
143
  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]"))) {
144
+ var _itemRef$current2;
144
145
  // Check if it is within dropdown and it is a trigger button
145
146
  // if it is a nested dropdown, clicking trigger won't close the dropdown
146
147
  // Dropdown can be closed by pressing Escape, Tab or Shift + Tab
147
- return;
148
+ if (!currentLevel) {
149
+ return;
150
+ }
151
+ // if currentLevel is provided, we will compare with the given item's level
152
+ // when it is available and larger than currentLevel, we will proceed the close behavior
153
+ var toCloseLevel = (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 ? void 0 : _itemRef$current2.dataset['ds-Level'];
154
+ if (toCloseLevel && Number(toCloseLevel) < currentLevel) {
155
+ return;
156
+ }
148
157
  }
149
158
 
150
159
  // transfer focus to the element specified by ref
@@ -157,8 +166,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
157
166
  });
158
167
  } else if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
159
168
  requestAnimationFrame(function () {
160
- var _itemRef$current2;
161
- (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 || _itemRef$current2.focus();
169
+ var _itemRef$current3;
170
+ (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 || _itemRef$current3.focus();
162
171
  });
163
172
  } else if (triggerRef.current) {
164
173
  requestAnimationFrame(function () {
package/dist/esm/internal/utils/handle-focus.js CHANGED
@@ -1,6 +1,8 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  var _actionMap;
3
3
  import { KEY_DOWN, KEY_END, KEY_HOME, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/keycodes';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
5
+ import { PREFIX } from './use-generated-id';
4
6
  var actionMap = (_actionMap = {}, _defineProperty(_actionMap, KEY_DOWN, 'next'), _defineProperty(_actionMap, KEY_UP, 'prev'), _defineProperty(_actionMap, KEY_HOME, 'first'), _defineProperty(_actionMap, KEY_END, 'last'), _actionMap);
5
7
 
6
8
  /**
@@ -40,15 +42,29 @@ export default function handleFocus(refs, isLayerDisabled, onClose) {
40
42
  var _document$activeEleme;
41
43
  return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
42
44
  });
43
- if (isLayerDisabled()) {
44
- // if nested dropdown isOpen we need to close on Tab key press
45
- if (e.key === KEY_TAB && !e.shiftKey) {
46
- onClose(e);
45
+ if (fg('platform_dst_popup-disable-focuslock')) {
46
+ var _document$activeEleme2;
47
+ // if we use a popup as a nested dropdown, we must prevent the dropdown from closing.
48
+ var isNestedDropdown = !!((_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest("[id^=".concat(PREFIX, "]")));
49
+ if (isLayerDisabled() && isNestedDropdown) {
50
+ if (e.key === KEY_TAB && !e.shiftKey) {
51
+ onClose(e);
52
+ }
53
+
54
+ // if it is a nested dropdown and the level of the given dropdown is not the current level,
55
+ // we don't need to have focus on it
56
+ return;
47
57
  }
58
+ } else {
59
+ if (isLayerDisabled()) {
60
+ if (e.key === KEY_TAB && !e.shiftKey) {
61
+ onClose(e);
62
+ }
48
63
 
49
- // if it is a nested dropdown and the level of the given dropdown is not the current level,
50
- // we don't need to have focus on it
51
- return;
64
+ // if it is a nested dropdown and the level of the given dropdown is not the current level,
65
+ // we don't need to have focus on it
66
+ return;
67
+ }
52
68
  }
53
69
  var action = actionMap[e.key];
54
70
  switch (action) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/dropdown-menu",
3
- "version": "12.18.0",
3
+ "version": "12.18.2",
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/"
@@ -16,10 +16,6 @@
16
16
  "atlaskit:src": "src/index.tsx",
17
17
  "atlassian": {
18
18
  "team": "Design System Team",
19
- "releaseModel": "continuous",
20
- "productPushConsumption": [
21
- "jira"
22
- ],
23
19
  "website": {
24
20
  "name": "Dropdown menu",
25
21
  "category": "Components"
@@ -30,11 +26,12 @@
30
26
  "@atlaskit/button": "^20.1.0",
31
27
  "@atlaskit/codemod-utils": "^4.2.0",
32
28
  "@atlaskit/ds-lib": "^2.5.0",
33
- "@atlaskit/icon": "^22.15.0",
29
+ "@atlaskit/icon": "^22.16.0",
34
30
  "@atlaskit/layering": "^0.4.0",
35
31
  "@atlaskit/menu": "^2.12.0",
36
- "@atlaskit/popup": "^1.23.0",
37
- "@atlaskit/primitives": "^12.0.0",
32
+ "@atlaskit/platform-feature-flags": "^0.3.0",
33
+ "@atlaskit/popup": "^1.25.0",
34
+ "@atlaskit/primitives": "^12.1.0",
38
35
  "@atlaskit/spinner": "^16.3.0",
39
36
  "@atlaskit/theme": "^13.0.0",
40
37
  "@atlaskit/tokens": "^1.59.0",
@@ -52,7 +49,7 @@
52
49
  "@af/visual-regression": "*",
53
50
  "@atlaskit/app-provider": "^1.4.0",
54
51
  "@atlaskit/modal-dialog": "^12.15.0",
55
- "@atlaskit/toggle": "^13.3.0",
52
+ "@atlaskit/toggle": "^13.4.0",
56
53
  "@atlaskit/visual-regression": "*",
57
54
  "@atlassian/feature-flags-test-utils": "*",
58
55
  "@testing-library/dom": "^10.1.0",
@@ -72,6 +69,11 @@
72
69
  "react",
73
70
  "ui"
74
71
  ],
72
+ "platform-feature-flags": {
73
+ "platform_dst_popup-disable-focuslock": {
74
+ "type": "boolean"
75
+ }
76
+ },
75
77
  "techstack": {
76
78
  "@atlassian/frontend": {
77
79
  "import-structure": "atlassian-conventions"