@atlaskit/dropdown-menu 16.0.4 → 16.0.6
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 +17 -0
- package/dist/cjs/checkbox/dropdown-item-checkbox.js +2 -3
- package/dist/cjs/dropdown-menu-item.js +6 -7
- package/dist/cjs/dropdown-menu.js +1 -2
- package/dist/cjs/internal/utils/handle-focus.js +26 -70
- package/dist/cjs/radio/dropdown-item-radio.js +2 -3
- package/dist/es2019/checkbox/dropdown-item-checkbox.js +3 -4
- package/dist/es2019/dropdown-menu-item.js +9 -10
- package/dist/es2019/dropdown-menu.js +2 -3
- package/dist/es2019/internal/utils/handle-focus.js +30 -78
- package/dist/es2019/radio/dropdown-item-radio.js +3 -4
- package/dist/esm/checkbox/dropdown-item-checkbox.js +2 -3
- package/dist/esm/dropdown-menu-item.js +6 -7
- package/dist/esm/dropdown-menu.js +1 -2
- package/dist/esm/internal/utils/handle-focus.js +26 -70
- package/dist/esm/radio/dropdown-item-radio.js +2 -3
- package/package.json +3 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/dropdown-menu
|
|
2
2
|
|
|
3
|
+
## 16.0.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#171641](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/171641)
|
|
8
|
+
[`1d4741f638def`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1d4741f638def) -
|
|
9
|
+
Removed UFO metric interactionName FG from platform
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 16.0.5
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#171540](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/171540)
|
|
17
|
+
[`ff686344ec2f4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff686344ec2f4) -
|
|
18
|
+
Removed FG that fixes dropdown menu keyboard nav with disabled options
|
|
19
|
+
|
|
3
20
|
## 16.0.4
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -13,7 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
13
13
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
14
14
|
var _menu = require("@atlaskit/menu");
|
|
15
15
|
var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
|
|
16
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
16
|
var _checkboxIcon = _interopRequireDefault(require("../internal/components/checkbox-icon"));
|
|
18
17
|
var _useCheckboxState3 = _interopRequireDefault(require("../internal/hooks/use-checkbox-state"));
|
|
19
18
|
var _useRegisterItemWithFocusManager = _interopRequireDefault(require("../internal/hooks/use-register-item-with-focus-manager"));
|
|
@@ -79,9 +78,9 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
|
|
|
79
78
|
role: "menuitemcheckbox",
|
|
80
79
|
shouldDescriptionWrap: shouldDescriptionWrap,
|
|
81
80
|
shouldTitleWrap: shouldTitleWrap,
|
|
82
|
-
testId: testId
|
|
83
|
-
}, (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') && {
|
|
81
|
+
testId: testId,
|
|
84
82
|
interactionName: interactionName
|
|
83
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
85
84
|
}, rest), children));
|
|
86
85
|
};
|
|
87
86
|
var _default = exports.default = DropdownItemCheckbox;
|
|
@@ -13,7 +13,6 @@ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
|
|
|
13
13
|
var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
|
|
14
14
|
var _customItem = _interopRequireDefault(require("@atlaskit/menu/custom-item"));
|
|
15
15
|
var _linkItem = _interopRequireDefault(require("@atlaskit/menu/link-item"));
|
|
16
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
16
|
var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
|
|
18
17
|
var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef", "interactionName", "role"];
|
|
19
18
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
@@ -78,9 +77,9 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
|
|
|
78
77
|
// @ts-expect-error
|
|
79
78
|
,
|
|
80
79
|
target: target,
|
|
81
|
-
rel: rel
|
|
82
|
-
}, (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') && {
|
|
80
|
+
rel: rel,
|
|
83
81
|
interactionName: interactionName
|
|
82
|
+
// DSP-13312 TODO: remove spread props in future major release
|
|
84
83
|
}, rest), children);
|
|
85
84
|
} else if (href) {
|
|
86
85
|
return /*#__PURE__*/_react.default.createElement(_linkItem.default, (0, _extends2.default)({
|
|
@@ -98,9 +97,9 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
|
|
|
98
97
|
shouldTitleWrap: shouldTitleWrap,
|
|
99
98
|
target: target,
|
|
100
99
|
testId: testId,
|
|
101
|
-
UNSAFE_shouldDisableRouterLink: UNSAFE_shouldDisableRouterLink
|
|
102
|
-
}, (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') && {
|
|
100
|
+
UNSAFE_shouldDisableRouterLink: UNSAFE_shouldDisableRouterLink,
|
|
103
101
|
interactionName: interactionName
|
|
102
|
+
// DSP-13312 TODO: remove spread props in future major release
|
|
104
103
|
}, rest), children);
|
|
105
104
|
} else {
|
|
106
105
|
return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
|
|
@@ -120,9 +119,9 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
|
|
|
120
119
|
// @ts-expect-error
|
|
121
120
|
,
|
|
122
121
|
target: target,
|
|
123
|
-
rel: rel
|
|
124
|
-
}, (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') && {
|
|
122
|
+
rel: rel,
|
|
125
123
|
interactionName: interactionName
|
|
124
|
+
// DSP-13312 TODO: remove spread props in future major release
|
|
126
125
|
}, rest), children);
|
|
127
126
|
}
|
|
128
127
|
});
|
|
@@ -310,8 +310,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
|
|
|
310
310
|
},
|
|
311
311
|
onClick: handleTriggerClicked,
|
|
312
312
|
testId: testId && "".concat(testId, "--trigger"),
|
|
313
|
-
"aria-label": label
|
|
314
|
-
}, (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') && {
|
|
313
|
+
"aria-label": label,
|
|
315
314
|
interactionName: interactionName
|
|
316
315
|
}), _trigger);
|
|
317
316
|
},
|
|
@@ -18,26 +18,16 @@ var actionMap = (0, _defineProperty2.default)((0, _defineProperty2.default)((0,
|
|
|
18
18
|
* return undefined.
|
|
19
19
|
*/
|
|
20
20
|
var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
currentFocusedIdx++;
|
|
27
|
-
}
|
|
28
|
-
var element = refs[currentFocusedIdx].current;
|
|
29
|
-
var isValid = !!element && !element.hasAttribute('disabled');
|
|
30
|
-
if (isValid) {
|
|
31
|
-
return element;
|
|
32
|
-
}
|
|
21
|
+
for (var i = 0; i < refs.length - 1; i++) {
|
|
22
|
+
if (currentFocusedIdx + 1 === refs.length) {
|
|
23
|
+
currentFocusedIdx = 0;
|
|
24
|
+
} else {
|
|
25
|
+
currentFocusedIdx++;
|
|
33
26
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
if (_isValid) {
|
|
39
|
-
return _element;
|
|
40
|
-
}
|
|
27
|
+
var element = refs[currentFocusedIdx].current;
|
|
28
|
+
var isValid = !!element && !element.hasAttribute('disabled');
|
|
29
|
+
if (isValid) {
|
|
30
|
+
return element;
|
|
41
31
|
}
|
|
42
32
|
}
|
|
43
33
|
};
|
|
@@ -49,26 +39,16 @@ var getNextFocusableElement = function getNextFocusableElement(refs, currentFocu
|
|
|
49
39
|
* return undefined.
|
|
50
40
|
*/
|
|
51
41
|
var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
currentFocusedIdx--;
|
|
58
|
-
}
|
|
59
|
-
var element = refs[currentFocusedIdx].current;
|
|
60
|
-
var isValid = !!element && !element.hasAttribute('disabled');
|
|
61
|
-
if (isValid) {
|
|
62
|
-
return element;
|
|
63
|
-
}
|
|
42
|
+
for (var i = 0; i < refs.length - 1; i++) {
|
|
43
|
+
if (currentFocusedIdx === 0) {
|
|
44
|
+
currentFocusedIdx = refs.length - 1;
|
|
45
|
+
} else {
|
|
46
|
+
currentFocusedIdx--;
|
|
64
47
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
if (_isValid2) {
|
|
70
|
-
return _element2;
|
|
71
|
-
}
|
|
48
|
+
var element = refs[currentFocusedIdx].current;
|
|
49
|
+
var isValid = !!element && !element.hasAttribute('disabled');
|
|
50
|
+
if (isValid) {
|
|
51
|
+
return element;
|
|
72
52
|
}
|
|
73
53
|
}
|
|
74
54
|
};
|
|
@@ -110,50 +90,26 @@ function handleFocus(refs, isLayerDisabled, onClose) {
|
|
|
110
90
|
case 'next':
|
|
111
91
|
// Always cancelling the event to prevent scrolling
|
|
112
92
|
e.preventDefault();
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
_nextFocusableElement === null || _nextFocusableElement === void 0 || _nextFocusableElement.focus();
|
|
116
|
-
break;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
// Remove on FG cleanup dropdown-menu-disabled-navigation-fix
|
|
120
|
-
if (currentFocusedIdx < currentRefs.length - 1) {
|
|
121
|
-
var _nextFocusableElement2 = getNextFocusableElement(currentRefs, currentFocusedIdx);
|
|
122
|
-
_nextFocusableElement2 === null || _nextFocusableElement2 === void 0 || _nextFocusableElement2.focus();
|
|
123
|
-
} else {
|
|
124
|
-
var firstFocusableElement = getNextFocusableElement(currentRefs, -1);
|
|
125
|
-
firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
|
|
126
|
-
}
|
|
93
|
+
var nextFocusableElement = getNextFocusableElement(currentRefs, currentFocusedIdx);
|
|
94
|
+
nextFocusableElement === null || nextFocusableElement === void 0 || nextFocusableElement.focus();
|
|
127
95
|
break;
|
|
128
96
|
case 'prev':
|
|
129
97
|
// Always cancelling the event to prevent scrolling
|
|
130
98
|
e.preventDefault();
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
_prevFocusableElement === null || _prevFocusableElement === void 0 || _prevFocusableElement.focus();
|
|
134
|
-
break;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
// Remove on FG cleanup dropdown-menu-disabled-navigation-fix
|
|
138
|
-
if (currentFocusedIdx > 0) {
|
|
139
|
-
var _prevFocusableElement2 = getPrevFocusableElement(currentRefs, currentFocusedIdx);
|
|
140
|
-
_prevFocusableElement2 === null || _prevFocusableElement2 === void 0 || _prevFocusableElement2.focus();
|
|
141
|
-
} else {
|
|
142
|
-
var lastFocusableElement = getPrevFocusableElement(currentRefs, currentRefs.length);
|
|
143
|
-
lastFocusableElement === null || lastFocusableElement === void 0 || lastFocusableElement.focus();
|
|
144
|
-
}
|
|
99
|
+
var prevFocusableElement = getPrevFocusableElement(currentRefs, currentFocusedIdx);
|
|
100
|
+
prevFocusableElement === null || prevFocusableElement === void 0 || prevFocusableElement.focus();
|
|
145
101
|
break;
|
|
146
102
|
case 'first':
|
|
147
103
|
e.preventDefault();
|
|
148
104
|
// Search for first non-disabled element if first element is disabled
|
|
149
|
-
var
|
|
150
|
-
|
|
105
|
+
var firstFocusableElement = getNextFocusableElement(currentRefs, -1);
|
|
106
|
+
firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
|
|
151
107
|
break;
|
|
152
108
|
case 'last':
|
|
153
109
|
e.preventDefault();
|
|
154
110
|
// Search for last non-disabled element if last element is disabled
|
|
155
|
-
var
|
|
156
|
-
|
|
111
|
+
var lastFocusableElement = getPrevFocusableElement(currentRefs, currentRefs.length);
|
|
112
|
+
lastFocusableElement === null || lastFocusableElement === void 0 || lastFocusableElement.focus();
|
|
157
113
|
break;
|
|
158
114
|
default:
|
|
159
115
|
return;
|
|
@@ -13,7 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
13
13
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
14
14
|
var _menu = require("@atlaskit/menu");
|
|
15
15
|
var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
|
|
16
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
16
|
var _radioIcon = _interopRequireDefault(require("../internal/components/radio-icon"));
|
|
18
17
|
var _useRadioState3 = _interopRequireDefault(require("../internal/hooks/use-radio-state"));
|
|
19
18
|
var _useRegisterItemWithFocusManager = _interopRequireDefault(require("../internal/hooks/use-register-item-with-focus-manager"));
|
|
@@ -86,9 +85,9 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
|
|
|
86
85
|
// it's not in the component's prop types.
|
|
87
86
|
// @ts-expect-error
|
|
88
87
|
,
|
|
89
|
-
title: title
|
|
90
|
-
}, (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') && {
|
|
88
|
+
title: title,
|
|
91
89
|
interactionName: interactionName
|
|
90
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
92
91
|
}, rest), children));
|
|
93
92
|
};
|
|
94
93
|
var _default = exports.default = DropdownItemRadio;
|
|
@@ -3,7 +3,6 @@ import React, { useCallback } from 'react';
|
|
|
3
3
|
import noop from '@atlaskit/ds-lib/noop';
|
|
4
4
|
import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
|
|
5
5
|
import ButtonItem from '@atlaskit/menu/button-item';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import CheckboxIcon from '../internal/components/checkbox-icon';
|
|
8
7
|
import useCheckboxState from '../internal/hooks/use-checkbox-state';
|
|
9
8
|
import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
|
|
@@ -61,9 +60,9 @@ const DropdownItemCheckbox = ({
|
|
|
61
60
|
role: "menuitemcheckbox",
|
|
62
61
|
shouldDescriptionWrap: shouldDescriptionWrap,
|
|
63
62
|
shouldTitleWrap: shouldTitleWrap,
|
|
64
|
-
testId: testId
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
testId: testId,
|
|
64
|
+
interactionName: interactionName
|
|
65
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
67
66
|
}, rest), children));
|
|
68
67
|
};
|
|
69
68
|
export default DropdownItemCheckbox;
|
|
@@ -4,7 +4,6 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
|
4
4
|
import ButtonItem from '@atlaskit/menu/button-item';
|
|
5
5
|
import CustomItem from '@atlaskit/menu/custom-item';
|
|
6
6
|
import LinkItem from '@atlaskit/menu/link-item';
|
|
7
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
|
|
9
8
|
/**
|
|
10
9
|
* __Dropdown menu item__
|
|
@@ -66,9 +65,9 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
|
|
|
66
65
|
// @ts-expect-error
|
|
67
66
|
,
|
|
68
67
|
target: target,
|
|
69
|
-
rel: rel
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
rel: rel,
|
|
69
|
+
interactionName: interactionName
|
|
70
|
+
// DSP-13312 TODO: remove spread props in future major release
|
|
72
71
|
}, rest), children);
|
|
73
72
|
} else if (href) {
|
|
74
73
|
return /*#__PURE__*/React.createElement(LinkItem, _extends({
|
|
@@ -86,9 +85,9 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
|
|
|
86
85
|
shouldTitleWrap: shouldTitleWrap,
|
|
87
86
|
target: target,
|
|
88
87
|
testId: testId,
|
|
89
|
-
UNSAFE_shouldDisableRouterLink: UNSAFE_shouldDisableRouterLink
|
|
90
|
-
|
|
91
|
-
|
|
88
|
+
UNSAFE_shouldDisableRouterLink: UNSAFE_shouldDisableRouterLink,
|
|
89
|
+
interactionName: interactionName
|
|
90
|
+
// DSP-13312 TODO: remove spread props in future major release
|
|
92
91
|
}, rest), children);
|
|
93
92
|
} else {
|
|
94
93
|
return /*#__PURE__*/React.createElement(ButtonItem, _extends({
|
|
@@ -108,9 +107,9 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
|
|
|
108
107
|
// @ts-expect-error
|
|
109
108
|
,
|
|
110
109
|
target: target,
|
|
111
|
-
rel: rel
|
|
112
|
-
|
|
113
|
-
|
|
110
|
+
rel: rel,
|
|
111
|
+
interactionName: interactionName
|
|
112
|
+
// DSP-13312 TODO: remove spread props in future major release
|
|
114
113
|
}, rest), children);
|
|
115
114
|
}
|
|
116
115
|
});
|
|
@@ -282,9 +282,8 @@ const DropdownMenu = ({
|
|
|
282
282
|
})),
|
|
283
283
|
onClick: handleTriggerClicked,
|
|
284
284
|
testId: testId && `${testId}--trigger`,
|
|
285
|
-
"aria-label": label
|
|
286
|
-
|
|
287
|
-
interactionName
|
|
285
|
+
"aria-label": label,
|
|
286
|
+
interactionName: interactionName
|
|
288
287
|
}), trigger);
|
|
289
288
|
},
|
|
290
289
|
content: ({
|
|
@@ -15,30 +15,18 @@ const actionMap = {
|
|
|
15
15
|
* return undefined.
|
|
16
16
|
*/
|
|
17
17
|
const getNextFocusableElement = (refs, currentFocusedIdx) => {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
currentFocusedIdx++;
|
|
24
|
-
}
|
|
25
|
-
const {
|
|
26
|
-
current: element
|
|
27
|
-
} = refs[currentFocusedIdx];
|
|
28
|
-
const isValid = !!element && !element.hasAttribute('disabled');
|
|
29
|
-
if (isValid) {
|
|
30
|
-
return element;
|
|
31
|
-
}
|
|
18
|
+
for (let i = 0; i < refs.length - 1; i++) {
|
|
19
|
+
if (currentFocusedIdx + 1 === refs.length) {
|
|
20
|
+
currentFocusedIdx = 0;
|
|
21
|
+
} else {
|
|
22
|
+
currentFocusedIdx++;
|
|
32
23
|
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
if (isValid) {
|
|
40
|
-
return element;
|
|
41
|
-
}
|
|
24
|
+
const {
|
|
25
|
+
current: element
|
|
26
|
+
} = refs[currentFocusedIdx];
|
|
27
|
+
const isValid = !!element && !element.hasAttribute('disabled');
|
|
28
|
+
if (isValid) {
|
|
29
|
+
return element;
|
|
42
30
|
}
|
|
43
31
|
}
|
|
44
32
|
};
|
|
@@ -50,30 +38,18 @@ const getNextFocusableElement = (refs, currentFocusedIdx) => {
|
|
|
50
38
|
* return undefined.
|
|
51
39
|
*/
|
|
52
40
|
const getPrevFocusableElement = (refs, currentFocusedIdx) => {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
currentFocusedIdx--;
|
|
59
|
-
}
|
|
60
|
-
const {
|
|
61
|
-
current: element
|
|
62
|
-
} = refs[currentFocusedIdx];
|
|
63
|
-
const isValid = !!element && !element.hasAttribute('disabled');
|
|
64
|
-
if (isValid) {
|
|
65
|
-
return element;
|
|
66
|
-
}
|
|
41
|
+
for (let i = 0; i < refs.length - 1; i++) {
|
|
42
|
+
if (currentFocusedIdx === 0) {
|
|
43
|
+
currentFocusedIdx = refs.length - 1;
|
|
44
|
+
} else {
|
|
45
|
+
currentFocusedIdx--;
|
|
67
46
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
if (isValid) {
|
|
75
|
-
return element;
|
|
76
|
-
}
|
|
47
|
+
const {
|
|
48
|
+
current: element
|
|
49
|
+
} = refs[currentFocusedIdx];
|
|
50
|
+
const isValid = !!element && !element.hasAttribute('disabled');
|
|
51
|
+
if (isValid) {
|
|
52
|
+
return element;
|
|
77
53
|
}
|
|
78
54
|
}
|
|
79
55
|
};
|
|
@@ -116,50 +92,26 @@ export default function handleFocus(refs, isLayerDisabled, onClose) {
|
|
|
116
92
|
case 'next':
|
|
117
93
|
// Always cancelling the event to prevent scrolling
|
|
118
94
|
e.preventDefault();
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
|
|
122
|
-
break;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
// Remove on FG cleanup dropdown-menu-disabled-navigation-fix
|
|
126
|
-
if (currentFocusedIdx < currentRefs.length - 1) {
|
|
127
|
-
const nextFocusableElement = getNextFocusableElement(currentRefs, currentFocusedIdx);
|
|
128
|
-
nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
|
|
129
|
-
} else {
|
|
130
|
-
const firstFocusableElement = getNextFocusableElement(currentRefs, -1);
|
|
131
|
-
firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
|
|
132
|
-
}
|
|
95
|
+
const nextFocusableElement = getNextFocusableElement(currentRefs, currentFocusedIdx);
|
|
96
|
+
nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
|
|
133
97
|
break;
|
|
134
98
|
case 'prev':
|
|
135
99
|
// Always cancelling the event to prevent scrolling
|
|
136
100
|
e.preventDefault();
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
|
|
140
|
-
break;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
// Remove on FG cleanup dropdown-menu-disabled-navigation-fix
|
|
144
|
-
if (currentFocusedIdx > 0) {
|
|
145
|
-
const prevFocusableElement = getPrevFocusableElement(currentRefs, currentFocusedIdx);
|
|
146
|
-
prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
|
|
147
|
-
} else {
|
|
148
|
-
const lastFocusableElement = getPrevFocusableElement(currentRefs, currentRefs.length);
|
|
149
|
-
lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
|
|
150
|
-
}
|
|
101
|
+
const prevFocusableElement = getPrevFocusableElement(currentRefs, currentFocusedIdx);
|
|
102
|
+
prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
|
|
151
103
|
break;
|
|
152
104
|
case 'first':
|
|
153
105
|
e.preventDefault();
|
|
154
106
|
// Search for first non-disabled element if first element is disabled
|
|
155
|
-
const
|
|
156
|
-
|
|
107
|
+
const firstFocusableElement = getNextFocusableElement(currentRefs, -1);
|
|
108
|
+
firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
|
|
157
109
|
break;
|
|
158
110
|
case 'last':
|
|
159
111
|
e.preventDefault();
|
|
160
112
|
// Search for last non-disabled element if last element is disabled
|
|
161
|
-
const
|
|
162
|
-
|
|
113
|
+
const lastFocusableElement = getPrevFocusableElement(currentRefs, currentRefs.length);
|
|
114
|
+
lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
|
|
163
115
|
break;
|
|
164
116
|
default:
|
|
165
117
|
return;
|
|
@@ -3,7 +3,6 @@ import React, { useCallback } from 'react';
|
|
|
3
3
|
import noop from '@atlaskit/ds-lib/noop';
|
|
4
4
|
import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
|
|
5
5
|
import ButtonItem from '@atlaskit/menu/button-item';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import RadioIcon from '../internal/components/radio-icon';
|
|
8
7
|
import useRadioState from '../internal/hooks/use-radio-state';
|
|
9
8
|
import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
|
|
@@ -68,9 +67,9 @@ const DropdownItemRadio = ({
|
|
|
68
67
|
// it's not in the component's prop types.
|
|
69
68
|
// @ts-expect-error
|
|
70
69
|
,
|
|
71
|
-
title: title
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
title: title,
|
|
71
|
+
interactionName: interactionName
|
|
72
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
74
73
|
}, rest), children));
|
|
75
74
|
};
|
|
76
75
|
export default DropdownItemRadio;
|
|
@@ -6,7 +6,6 @@ import React, { useCallback } from 'react';
|
|
|
6
6
|
import noop from '@atlaskit/ds-lib/noop';
|
|
7
7
|
import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
|
|
8
8
|
import ButtonItem from '@atlaskit/menu/button-item';
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import CheckboxIcon from '../internal/components/checkbox-icon';
|
|
11
10
|
import useCheckboxState from '../internal/hooks/use-checkbox-state';
|
|
12
11
|
import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
|
|
@@ -70,9 +69,9 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
|
|
|
70
69
|
role: "menuitemcheckbox",
|
|
71
70
|
shouldDescriptionWrap: shouldDescriptionWrap,
|
|
72
71
|
shouldTitleWrap: shouldTitleWrap,
|
|
73
|
-
testId: testId
|
|
74
|
-
}, fg('platform_button_item-add-ufo-metrics') && {
|
|
72
|
+
testId: testId,
|
|
75
73
|
interactionName: interactionName
|
|
74
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
76
75
|
}, rest), children));
|
|
77
76
|
};
|
|
78
77
|
export default DropdownItemCheckbox;
|
|
@@ -6,7 +6,6 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
|
6
6
|
import ButtonItem from '@atlaskit/menu/button-item';
|
|
7
7
|
import CustomItem from '@atlaskit/menu/custom-item';
|
|
8
8
|
import LinkItem from '@atlaskit/menu/link-item';
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
|
|
11
10
|
/**
|
|
12
11
|
* __Dropdown menu item__
|
|
@@ -69,9 +68,9 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
69
68
|
// @ts-expect-error
|
|
70
69
|
,
|
|
71
70
|
target: target,
|
|
72
|
-
rel: rel
|
|
73
|
-
}, fg('platform_button_item-add-ufo-metrics') && {
|
|
71
|
+
rel: rel,
|
|
74
72
|
interactionName: interactionName
|
|
73
|
+
// DSP-13312 TODO: remove spread props in future major release
|
|
75
74
|
}, rest), children);
|
|
76
75
|
} else if (href) {
|
|
77
76
|
return /*#__PURE__*/React.createElement(LinkItem, _extends({
|
|
@@ -89,9 +88,9 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
89
88
|
shouldTitleWrap: shouldTitleWrap,
|
|
90
89
|
target: target,
|
|
91
90
|
testId: testId,
|
|
92
|
-
UNSAFE_shouldDisableRouterLink: UNSAFE_shouldDisableRouterLink
|
|
93
|
-
}, fg('platform_button_item-add-ufo-metrics') && {
|
|
91
|
+
UNSAFE_shouldDisableRouterLink: UNSAFE_shouldDisableRouterLink,
|
|
94
92
|
interactionName: interactionName
|
|
93
|
+
// DSP-13312 TODO: remove spread props in future major release
|
|
95
94
|
}, rest), children);
|
|
96
95
|
} else {
|
|
97
96
|
return /*#__PURE__*/React.createElement(ButtonItem, _extends({
|
|
@@ -111,9 +110,9 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
111
110
|
// @ts-expect-error
|
|
112
111
|
,
|
|
113
112
|
target: target,
|
|
114
|
-
rel: rel
|
|
115
|
-
}, fg('platform_button_item-add-ufo-metrics') && {
|
|
113
|
+
rel: rel,
|
|
116
114
|
interactionName: interactionName
|
|
115
|
+
// DSP-13312 TODO: remove spread props in future major release
|
|
117
116
|
}, rest), children);
|
|
118
117
|
}
|
|
119
118
|
});
|
|
@@ -302,8 +302,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
|
|
|
302
302
|
},
|
|
303
303
|
onClick: handleTriggerClicked,
|
|
304
304
|
testId: testId && "".concat(testId, "--trigger"),
|
|
305
|
-
"aria-label": label
|
|
306
|
-
}, fg('platform_button_item-add-ufo-metrics') && {
|
|
305
|
+
"aria-label": label,
|
|
307
306
|
interactionName: interactionName
|
|
308
307
|
}), _trigger);
|
|
309
308
|
},
|
|
@@ -11,26 +11,16 @@ var actionMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty(
|
|
|
11
11
|
* return undefined.
|
|
12
12
|
*/
|
|
13
13
|
var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
currentFocusedIdx++;
|
|
20
|
-
}
|
|
21
|
-
var element = refs[currentFocusedIdx].current;
|
|
22
|
-
var isValid = !!element && !element.hasAttribute('disabled');
|
|
23
|
-
if (isValid) {
|
|
24
|
-
return element;
|
|
25
|
-
}
|
|
14
|
+
for (var i = 0; i < refs.length - 1; i++) {
|
|
15
|
+
if (currentFocusedIdx + 1 === refs.length) {
|
|
16
|
+
currentFocusedIdx = 0;
|
|
17
|
+
} else {
|
|
18
|
+
currentFocusedIdx++;
|
|
26
19
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
if (_isValid) {
|
|
32
|
-
return _element;
|
|
33
|
-
}
|
|
20
|
+
var element = refs[currentFocusedIdx].current;
|
|
21
|
+
var isValid = !!element && !element.hasAttribute('disabled');
|
|
22
|
+
if (isValid) {
|
|
23
|
+
return element;
|
|
34
24
|
}
|
|
35
25
|
}
|
|
36
26
|
};
|
|
@@ -42,26 +32,16 @@ var getNextFocusableElement = function getNextFocusableElement(refs, currentFocu
|
|
|
42
32
|
* return undefined.
|
|
43
33
|
*/
|
|
44
34
|
var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
currentFocusedIdx--;
|
|
51
|
-
}
|
|
52
|
-
var element = refs[currentFocusedIdx].current;
|
|
53
|
-
var isValid = !!element && !element.hasAttribute('disabled');
|
|
54
|
-
if (isValid) {
|
|
55
|
-
return element;
|
|
56
|
-
}
|
|
35
|
+
for (var i = 0; i < refs.length - 1; i++) {
|
|
36
|
+
if (currentFocusedIdx === 0) {
|
|
37
|
+
currentFocusedIdx = refs.length - 1;
|
|
38
|
+
} else {
|
|
39
|
+
currentFocusedIdx--;
|
|
57
40
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
if (_isValid2) {
|
|
63
|
-
return _element2;
|
|
64
|
-
}
|
|
41
|
+
var element = refs[currentFocusedIdx].current;
|
|
42
|
+
var isValid = !!element && !element.hasAttribute('disabled');
|
|
43
|
+
if (isValid) {
|
|
44
|
+
return element;
|
|
65
45
|
}
|
|
66
46
|
}
|
|
67
47
|
};
|
|
@@ -103,50 +83,26 @@ export default function handleFocus(refs, isLayerDisabled, onClose) {
|
|
|
103
83
|
case 'next':
|
|
104
84
|
// Always cancelling the event to prevent scrolling
|
|
105
85
|
e.preventDefault();
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
_nextFocusableElement === null || _nextFocusableElement === void 0 || _nextFocusableElement.focus();
|
|
109
|
-
break;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// Remove on FG cleanup dropdown-menu-disabled-navigation-fix
|
|
113
|
-
if (currentFocusedIdx < currentRefs.length - 1) {
|
|
114
|
-
var _nextFocusableElement2 = getNextFocusableElement(currentRefs, currentFocusedIdx);
|
|
115
|
-
_nextFocusableElement2 === null || _nextFocusableElement2 === void 0 || _nextFocusableElement2.focus();
|
|
116
|
-
} else {
|
|
117
|
-
var firstFocusableElement = getNextFocusableElement(currentRefs, -1);
|
|
118
|
-
firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
|
|
119
|
-
}
|
|
86
|
+
var nextFocusableElement = getNextFocusableElement(currentRefs, currentFocusedIdx);
|
|
87
|
+
nextFocusableElement === null || nextFocusableElement === void 0 || nextFocusableElement.focus();
|
|
120
88
|
break;
|
|
121
89
|
case 'prev':
|
|
122
90
|
// Always cancelling the event to prevent scrolling
|
|
123
91
|
e.preventDefault();
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
_prevFocusableElement === null || _prevFocusableElement === void 0 || _prevFocusableElement.focus();
|
|
127
|
-
break;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
// Remove on FG cleanup dropdown-menu-disabled-navigation-fix
|
|
131
|
-
if (currentFocusedIdx > 0) {
|
|
132
|
-
var _prevFocusableElement2 = getPrevFocusableElement(currentRefs, currentFocusedIdx);
|
|
133
|
-
_prevFocusableElement2 === null || _prevFocusableElement2 === void 0 || _prevFocusableElement2.focus();
|
|
134
|
-
} else {
|
|
135
|
-
var lastFocusableElement = getPrevFocusableElement(currentRefs, currentRefs.length);
|
|
136
|
-
lastFocusableElement === null || lastFocusableElement === void 0 || lastFocusableElement.focus();
|
|
137
|
-
}
|
|
92
|
+
var prevFocusableElement = getPrevFocusableElement(currentRefs, currentFocusedIdx);
|
|
93
|
+
prevFocusableElement === null || prevFocusableElement === void 0 || prevFocusableElement.focus();
|
|
138
94
|
break;
|
|
139
95
|
case 'first':
|
|
140
96
|
e.preventDefault();
|
|
141
97
|
// Search for first non-disabled element if first element is disabled
|
|
142
|
-
var
|
|
143
|
-
|
|
98
|
+
var firstFocusableElement = getNextFocusableElement(currentRefs, -1);
|
|
99
|
+
firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
|
|
144
100
|
break;
|
|
145
101
|
case 'last':
|
|
146
102
|
e.preventDefault();
|
|
147
103
|
// Search for last non-disabled element if last element is disabled
|
|
148
|
-
var
|
|
149
|
-
|
|
104
|
+
var lastFocusableElement = getPrevFocusableElement(currentRefs, currentRefs.length);
|
|
105
|
+
lastFocusableElement === null || lastFocusableElement === void 0 || lastFocusableElement.focus();
|
|
150
106
|
break;
|
|
151
107
|
default:
|
|
152
108
|
return;
|
|
@@ -6,7 +6,6 @@ import React, { useCallback } from 'react';
|
|
|
6
6
|
import noop from '@atlaskit/ds-lib/noop';
|
|
7
7
|
import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
|
|
8
8
|
import ButtonItem from '@atlaskit/menu/button-item';
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import RadioIcon from '../internal/components/radio-icon';
|
|
11
10
|
import useRadioState from '../internal/hooks/use-radio-state';
|
|
12
11
|
import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
|
|
@@ -77,9 +76,9 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
|
|
|
77
76
|
// it's not in the component's prop types.
|
|
78
77
|
// @ts-expect-error
|
|
79
78
|
,
|
|
80
|
-
title: title
|
|
81
|
-
}, fg('platform_button_item-add-ufo-metrics') && {
|
|
79
|
+
title: title,
|
|
82
80
|
interactionName: interactionName
|
|
81
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
83
82
|
}, rest), children));
|
|
84
83
|
};
|
|
85
84
|
export default DropdownItemRadio;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/dropdown-menu",
|
|
3
|
-
"version": "16.0.
|
|
3
|
+
"version": "16.0.6",
|
|
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/"
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@atlaskit/primitives": "^14.8.0",
|
|
37
37
|
"@atlaskit/spinner": "^18.0.0",
|
|
38
38
|
"@atlaskit/theme": "^18.0.0",
|
|
39
|
-
"@atlaskit/tokens": "^5.
|
|
39
|
+
"@atlaskit/tokens": "^5.2.0",
|
|
40
40
|
"@babel/runtime": "^7.0.0",
|
|
41
41
|
"bind-event-listener": "^3.0.0"
|
|
42
42
|
},
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@atlaskit/atlassian-navigation": "^5.3.0",
|
|
53
53
|
"@atlaskit/avatar": "^25.1.0",
|
|
54
54
|
"@atlaskit/checkbox": "^17.1.0",
|
|
55
|
-
"@atlaskit/docs": "^
|
|
55
|
+
"@atlaskit/docs": "^11.0.0",
|
|
56
56
|
"@atlaskit/form": "^12.0.0",
|
|
57
57
|
"@atlaskit/heading": "^5.2.0",
|
|
58
58
|
"@atlaskit/link": "^3.2.0",
|
|
@@ -77,9 +77,6 @@
|
|
|
77
77
|
"platform_dst_popup-disable-focuslock": {
|
|
78
78
|
"type": "boolean"
|
|
79
79
|
},
|
|
80
|
-
"platform_button_item-add-ufo-metrics": {
|
|
81
|
-
"type": "boolean"
|
|
82
|
-
},
|
|
83
80
|
"platform-visual-refresh-icons": {
|
|
84
81
|
"type": "boolean"
|
|
85
82
|
},
|
|
@@ -90,9 +87,6 @@
|
|
|
90
87
|
"type": "boolean",
|
|
91
88
|
"referenceOnly": true
|
|
92
89
|
},
|
|
93
|
-
"dropdown-menu-disabled-navigation-fix": {
|
|
94
|
-
"type": "boolean"
|
|
95
|
-
},
|
|
96
90
|
"platform_design_system_team_dropdown_return_focus": {
|
|
97
91
|
"type": "boolean"
|
|
98
92
|
}
|