@atlaskit/select 21.6.3 → 21.7.0
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,24 @@
|
|
|
1
1
|
# @atlaskit/select
|
|
2
2
|
|
|
3
|
+
## 21.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`2ff0f3751e4e4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2ff0f3751e4e4) -
|
|
8
|
+
Clean up the `platform_dst_nav4_layering_in_main_slot_fixes` feature gate. This change was
|
|
9
|
+
abandoned because it broke usage of fixed positioning in apps.
|
|
10
|
+
|
|
11
|
+
## 21.6.4
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`99876f547dece`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/99876f547dece) -
|
|
16
|
+
Adds support for `shouldPreventEscapePropagation` prop in PopupSelect to stop Escape keydown event
|
|
17
|
+
propagation when closing the popup. This is useful when PopupSelect is inside a modal or other
|
|
18
|
+
component that also listens for Escape key events. Feature is behind
|
|
19
|
+
`platform_navx_sllv_dropdown_escape_and_focus_fix` feature flag.
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 21.6.3
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -63,49 +63,10 @@ var modifiers = [{
|
|
|
63
63
|
altBoundary: true
|
|
64
64
|
}
|
|
65
65
|
}];
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* The new defaults match the default modifiers of `@atlaskit/popper`.
|
|
69
|
-
*
|
|
70
|
-
* In the future we should investigate using `@atlaskit/popper` instead of
|
|
71
|
-
* consuming `react-popper` directly.
|
|
72
|
-
*
|
|
73
|
-
* Previously the select popup would slide over the trigger to try to stay visible.
|
|
74
|
-
* This behavior could actually cause it to go offscreen.
|
|
75
|
-
*
|
|
76
|
-
* Now it will stay anchored above / below the trigger and cause the
|
|
77
|
-
* clipping parent to scroll if necessary. This aligns with other popups.
|
|
78
|
-
*/
|
|
79
|
-
var newDefaultModifiers = [{
|
|
80
|
-
name: 'offset',
|
|
81
|
-
options: {
|
|
82
|
-
offset: [0, 8]
|
|
83
|
-
}
|
|
84
|
-
}, {
|
|
85
|
-
name: 'preventOverflow',
|
|
86
|
-
enabled: true,
|
|
87
|
-
options: {
|
|
88
|
-
padding: 5,
|
|
89
|
-
boundary: 'clippingParents',
|
|
90
|
-
rootBoundary: 'document'
|
|
91
|
-
}
|
|
92
|
-
}, {
|
|
93
|
-
name: 'flip',
|
|
94
|
-
options: {
|
|
95
|
-
flipVariations: false,
|
|
96
|
-
padding: 5,
|
|
97
|
-
boundary: 'clippingParents',
|
|
98
|
-
rootBoundary: 'viewport'
|
|
99
|
-
}
|
|
100
|
-
}];
|
|
101
66
|
var defaultPopperProps = {
|
|
102
67
|
modifiers: modifiers,
|
|
103
68
|
placement: 'bottom-start'
|
|
104
69
|
};
|
|
105
|
-
var newDefaultPopperProps = {
|
|
106
|
-
modifiers: newDefaultModifiers,
|
|
107
|
-
placement: 'bottom-start'
|
|
108
|
-
};
|
|
109
70
|
var isEmpty = function isEmpty(obj) {
|
|
110
71
|
return Object.keys(obj).length === 0;
|
|
111
72
|
};
|
|
@@ -138,7 +99,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
138
99
|
focusLockEnabled: false,
|
|
139
100
|
isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
|
|
140
101
|
mergedComponents: _components.defaultComponents,
|
|
141
|
-
mergedPopperProps:
|
|
102
|
+
mergedPopperProps: defaultPopperProps
|
|
142
103
|
});
|
|
143
104
|
// Event Handlers
|
|
144
105
|
// ==============================
|
|
@@ -160,6 +121,9 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
160
121
|
case 'Escape':
|
|
161
122
|
case 'Esc':
|
|
162
123
|
_this.close();
|
|
124
|
+
if (_this.props.shouldPreventEscapePropagation && (0, _platformFeatureFlags.fg)('platform_navx_sllv_dropdown_escape_and_focus_fix')) {
|
|
125
|
+
event.stopPropagation();
|
|
126
|
+
}
|
|
163
127
|
break;
|
|
164
128
|
default:
|
|
165
129
|
}
|
|
@@ -360,10 +324,10 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
360
324
|
maxMenuWidth = _this$props5.maxMenuWidth,
|
|
361
325
|
minMenuWidth = _this$props5.minMenuWidth,
|
|
362
326
|
placeholder = _this$props5.placeholder,
|
|
363
|
-
|
|
327
|
+
_target = _this$props5.target,
|
|
364
328
|
testId = _this$props5.testId,
|
|
365
|
-
|
|
366
|
-
|
|
329
|
+
_onMenuOpen = _this$props5.onMenuOpen,
|
|
330
|
+
_onMenuClose = _this$props5.onMenuClose,
|
|
367
331
|
props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
|
|
368
332
|
var _this$state = _this.state,
|
|
369
333
|
focusLockEnabled = _this$state.focusLockEnabled,
|
|
@@ -518,7 +482,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
518
482
|
var newState = {};
|
|
519
483
|
|
|
520
484
|
// Merge consumer and default popper props
|
|
521
|
-
var mergedPopperProps = _objectSpread(_objectSpread({},
|
|
485
|
+
var mergedPopperProps = _objectSpread(_objectSpread({}, defaultPopperProps), props.popperProps);
|
|
522
486
|
if (!(0, _shallowEqual.shallowEqualObjects)(mergedPopperProps, state.mergedPopperProps)) {
|
|
523
487
|
newState.mergedPopperProps = mergedPopperProps;
|
|
524
488
|
}
|
|
@@ -42,49 +42,10 @@ const modifiers = [{
|
|
|
42
42
|
altBoundary: true
|
|
43
43
|
}
|
|
44
44
|
}];
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* The new defaults match the default modifiers of `@atlaskit/popper`.
|
|
48
|
-
*
|
|
49
|
-
* In the future we should investigate using `@atlaskit/popper` instead of
|
|
50
|
-
* consuming `react-popper` directly.
|
|
51
|
-
*
|
|
52
|
-
* Previously the select popup would slide over the trigger to try to stay visible.
|
|
53
|
-
* This behavior could actually cause it to go offscreen.
|
|
54
|
-
*
|
|
55
|
-
* Now it will stay anchored above / below the trigger and cause the
|
|
56
|
-
* clipping parent to scroll if necessary. This aligns with other popups.
|
|
57
|
-
*/
|
|
58
|
-
const newDefaultModifiers = [{
|
|
59
|
-
name: 'offset',
|
|
60
|
-
options: {
|
|
61
|
-
offset: [0, 8]
|
|
62
|
-
}
|
|
63
|
-
}, {
|
|
64
|
-
name: 'preventOverflow',
|
|
65
|
-
enabled: true,
|
|
66
|
-
options: {
|
|
67
|
-
padding: 5,
|
|
68
|
-
boundary: 'clippingParents',
|
|
69
|
-
rootBoundary: 'document'
|
|
70
|
-
}
|
|
71
|
-
}, {
|
|
72
|
-
name: 'flip',
|
|
73
|
-
options: {
|
|
74
|
-
flipVariations: false,
|
|
75
|
-
padding: 5,
|
|
76
|
-
boundary: 'clippingParents',
|
|
77
|
-
rootBoundary: 'viewport'
|
|
78
|
-
}
|
|
79
|
-
}];
|
|
80
45
|
const defaultPopperProps = {
|
|
81
46
|
modifiers,
|
|
82
47
|
placement: 'bottom-start'
|
|
83
48
|
};
|
|
84
|
-
const newDefaultPopperProps = {
|
|
85
|
-
modifiers: newDefaultModifiers,
|
|
86
|
-
placement: 'bottom-start'
|
|
87
|
-
};
|
|
88
49
|
const isEmpty = obj => Object.keys(obj).length === 0;
|
|
89
50
|
|
|
90
51
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
@@ -109,7 +70,7 @@ export default class PopupSelect extends PureComponent {
|
|
|
109
70
|
focusLockEnabled: false,
|
|
110
71
|
isOpen: (_this$defaultOpenStat = this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
|
|
111
72
|
mergedComponents: defaultComponents,
|
|
112
|
-
mergedPopperProps:
|
|
73
|
+
mergedPopperProps: defaultPopperProps
|
|
113
74
|
});
|
|
114
75
|
// Event Handlers
|
|
115
76
|
// ==============================
|
|
@@ -131,6 +92,9 @@ export default class PopupSelect extends PureComponent {
|
|
|
131
92
|
case 'Escape':
|
|
132
93
|
case 'Esc':
|
|
133
94
|
this.close();
|
|
95
|
+
if (this.props.shouldPreventEscapePropagation && fg('platform_navx_sllv_dropdown_escape_and_focus_fix')) {
|
|
96
|
+
event.stopPropagation();
|
|
97
|
+
}
|
|
134
98
|
break;
|
|
135
99
|
default:
|
|
136
100
|
}
|
|
@@ -336,10 +300,10 @@ export default class PopupSelect extends PureComponent {
|
|
|
336
300
|
maxMenuWidth,
|
|
337
301
|
minMenuWidth,
|
|
338
302
|
placeholder,
|
|
339
|
-
target,
|
|
303
|
+
target: _target,
|
|
340
304
|
testId,
|
|
341
|
-
onMenuOpen,
|
|
342
|
-
onMenuClose,
|
|
305
|
+
onMenuOpen: _onMenuOpen,
|
|
306
|
+
onMenuClose: _onMenuClose,
|
|
343
307
|
...props
|
|
344
308
|
} = this.props;
|
|
345
309
|
const {
|
|
@@ -424,7 +388,7 @@ export default class PopupSelect extends PureComponent {
|
|
|
424
388
|
|
|
425
389
|
// Merge consumer and default popper props
|
|
426
390
|
const mergedPopperProps = {
|
|
427
|
-
...
|
|
391
|
+
...defaultPopperProps,
|
|
428
392
|
...props.popperProps
|
|
429
393
|
};
|
|
430
394
|
if (!shallowEqualObjects(mergedPopperProps, state.mergedPopperProps)) {
|
|
@@ -55,49 +55,10 @@ var modifiers = [{
|
|
|
55
55
|
altBoundary: true
|
|
56
56
|
}
|
|
57
57
|
}];
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* The new defaults match the default modifiers of `@atlaskit/popper`.
|
|
61
|
-
*
|
|
62
|
-
* In the future we should investigate using `@atlaskit/popper` instead of
|
|
63
|
-
* consuming `react-popper` directly.
|
|
64
|
-
*
|
|
65
|
-
* Previously the select popup would slide over the trigger to try to stay visible.
|
|
66
|
-
* This behavior could actually cause it to go offscreen.
|
|
67
|
-
*
|
|
68
|
-
* Now it will stay anchored above / below the trigger and cause the
|
|
69
|
-
* clipping parent to scroll if necessary. This aligns with other popups.
|
|
70
|
-
*/
|
|
71
|
-
var newDefaultModifiers = [{
|
|
72
|
-
name: 'offset',
|
|
73
|
-
options: {
|
|
74
|
-
offset: [0, 8]
|
|
75
|
-
}
|
|
76
|
-
}, {
|
|
77
|
-
name: 'preventOverflow',
|
|
78
|
-
enabled: true,
|
|
79
|
-
options: {
|
|
80
|
-
padding: 5,
|
|
81
|
-
boundary: 'clippingParents',
|
|
82
|
-
rootBoundary: 'document'
|
|
83
|
-
}
|
|
84
|
-
}, {
|
|
85
|
-
name: 'flip',
|
|
86
|
-
options: {
|
|
87
|
-
flipVariations: false,
|
|
88
|
-
padding: 5,
|
|
89
|
-
boundary: 'clippingParents',
|
|
90
|
-
rootBoundary: 'viewport'
|
|
91
|
-
}
|
|
92
|
-
}];
|
|
93
58
|
var defaultPopperProps = {
|
|
94
59
|
modifiers: modifiers,
|
|
95
60
|
placement: 'bottom-start'
|
|
96
61
|
};
|
|
97
|
-
var newDefaultPopperProps = {
|
|
98
|
-
modifiers: newDefaultModifiers,
|
|
99
|
-
placement: 'bottom-start'
|
|
100
|
-
};
|
|
101
62
|
var isEmpty = function isEmpty(obj) {
|
|
102
63
|
return Object.keys(obj).length === 0;
|
|
103
64
|
};
|
|
@@ -130,7 +91,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
|
|
|
130
91
|
focusLockEnabled: false,
|
|
131
92
|
isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
|
|
132
93
|
mergedComponents: defaultComponents,
|
|
133
|
-
mergedPopperProps:
|
|
94
|
+
mergedPopperProps: defaultPopperProps
|
|
134
95
|
});
|
|
135
96
|
// Event Handlers
|
|
136
97
|
// ==============================
|
|
@@ -152,6 +113,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
|
|
|
152
113
|
case 'Escape':
|
|
153
114
|
case 'Esc':
|
|
154
115
|
_this.close();
|
|
116
|
+
if (_this.props.shouldPreventEscapePropagation && fg('platform_navx_sllv_dropdown_escape_and_focus_fix')) {
|
|
117
|
+
event.stopPropagation();
|
|
118
|
+
}
|
|
155
119
|
break;
|
|
156
120
|
default:
|
|
157
121
|
}
|
|
@@ -352,10 +316,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
|
|
|
352
316
|
maxMenuWidth = _this$props5.maxMenuWidth,
|
|
353
317
|
minMenuWidth = _this$props5.minMenuWidth,
|
|
354
318
|
placeholder = _this$props5.placeholder,
|
|
355
|
-
|
|
319
|
+
_target = _this$props5.target,
|
|
356
320
|
testId = _this$props5.testId,
|
|
357
|
-
|
|
358
|
-
|
|
321
|
+
_onMenuOpen = _this$props5.onMenuOpen,
|
|
322
|
+
_onMenuClose = _this$props5.onMenuClose,
|
|
359
323
|
props = _objectWithoutProperties(_this$props5, _excluded);
|
|
360
324
|
var _this$state = _this.state,
|
|
361
325
|
focusLockEnabled = _this$state.focusLockEnabled,
|
|
@@ -510,7 +474,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
|
|
|
510
474
|
var newState = {};
|
|
511
475
|
|
|
512
476
|
// Merge consumer and default popper props
|
|
513
|
-
var mergedPopperProps = _objectSpread(_objectSpread({},
|
|
477
|
+
var mergedPopperProps = _objectSpread(_objectSpread({}, defaultPopperProps), props.popperProps);
|
|
514
478
|
if (!shallowEqualObjects(mergedPopperProps, state.mergedPopperProps)) {
|
|
515
479
|
newState.mergedPopperProps = mergedPopperProps;
|
|
516
480
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/select",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.7.0",
|
|
4
4
|
"description": "Select allows users to make a single selection or multiple selections from a list of options.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -34,12 +34,12 @@
|
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@atlaskit/analytics-next": "^11.1.0",
|
|
36
36
|
"@atlaskit/ds-lib": "^5.3.0",
|
|
37
|
-
"@atlaskit/icon": "^29.
|
|
37
|
+
"@atlaskit/icon": "^29.4.0",
|
|
38
38
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
39
|
-
"@atlaskit/primitives": "^17.
|
|
40
|
-
"@atlaskit/react-select": "^3.
|
|
39
|
+
"@atlaskit/primitives": "^17.1.0",
|
|
40
|
+
"@atlaskit/react-select": "^3.13.0",
|
|
41
41
|
"@atlaskit/theme": "^21.0.0",
|
|
42
|
-
"@atlaskit/tokens": "^9.
|
|
42
|
+
"@atlaskit/tokens": "^9.1.0",
|
|
43
43
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"@compiled/react": "^0.18.6",
|
|
@@ -58,17 +58,17 @@
|
|
|
58
58
|
"@af/integration-testing": "workspace:^",
|
|
59
59
|
"@af/visual-regression": "workspace:^",
|
|
60
60
|
"@atlaskit/button": "^23.9.0",
|
|
61
|
-
"@atlaskit/checkbox": "^17.
|
|
62
|
-
"@atlaskit/docs": "^11.
|
|
61
|
+
"@atlaskit/checkbox": "^17.3.0",
|
|
62
|
+
"@atlaskit/docs": "^11.3.0",
|
|
63
63
|
"@atlaskit/drawer": "^11.0.0",
|
|
64
|
-
"@atlaskit/form": "^15.
|
|
65
|
-
"@atlaskit/link": "^3.
|
|
66
|
-
"@atlaskit/logo": "^19.
|
|
67
|
-
"@atlaskit/modal-dialog": "^14.
|
|
68
|
-
"@atlaskit/radio": "^8.
|
|
69
|
-
"@atlaskit/section-message": "^8.
|
|
64
|
+
"@atlaskit/form": "^15.3.0",
|
|
65
|
+
"@atlaskit/link": "^3.3.0",
|
|
66
|
+
"@atlaskit/logo": "^19.10.0",
|
|
67
|
+
"@atlaskit/modal-dialog": "^14.10.0",
|
|
68
|
+
"@atlaskit/radio": "^8.4.0",
|
|
69
|
+
"@atlaskit/section-message": "^8.12.0",
|
|
70
70
|
"@atlassian/ssr-tests": "workspace:^",
|
|
71
|
-
"@testing-library/react": "^
|
|
71
|
+
"@testing-library/react": "^16.3.0",
|
|
72
72
|
"@testing-library/user-event": "^14.4.3",
|
|
73
73
|
"ast-types": "^0.13.3",
|
|
74
74
|
"jest-in-case": "^1.0.2",
|
|
@@ -97,10 +97,10 @@
|
|
|
97
97
|
"platform-visual-refresh-icons": {
|
|
98
98
|
"type": "boolean"
|
|
99
99
|
},
|
|
100
|
-
"
|
|
100
|
+
"platform-dst-shape-theme-default": {
|
|
101
101
|
"type": "boolean"
|
|
102
102
|
},
|
|
103
|
-
"
|
|
103
|
+
"platform_navx_sllv_dropdown_escape_and_focus_fix": {
|
|
104
104
|
"type": "boolean"
|
|
105
105
|
}
|
|
106
106
|
},
|