@atlaskit/react-select 2.6.6 → 2.7.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 +15 -0
- package/dist/cjs/accessibility/index.js +3 -49
- package/dist/cjs/compiled/components/indicators.js +6 -4
- package/dist/cjs/compiled/components/live-region.js +8 -72
- package/dist/cjs/compiled/components/multi-value.js +4 -3
- package/dist/cjs/emotion/components/indicators.js +6 -4
- package/dist/cjs/emotion/components/live-region.js +10 -76
- package/dist/cjs/emotion/components/multi-value.js +4 -3
- package/dist/cjs/select.js +141 -99
- package/dist/es2019/accessibility/index.js +3 -50
- package/dist/es2019/compiled/components/indicators.js +6 -4
- package/dist/es2019/compiled/components/live-region.js +7 -71
- package/dist/es2019/compiled/components/multi-value.js +3 -2
- package/dist/es2019/emotion/components/indicators.js +6 -4
- package/dist/es2019/emotion/components/live-region.js +7 -72
- package/dist/es2019/emotion/components/multi-value.js +3 -2
- package/dist/es2019/select.js +117 -82
- package/dist/esm/accessibility/index.js +3 -49
- package/dist/esm/compiled/components/indicators.js +6 -4
- package/dist/esm/compiled/components/live-region.js +9 -73
- package/dist/esm/compiled/components/multi-value.js +3 -2
- package/dist/esm/emotion/components/indicators.js +6 -4
- package/dist/esm/emotion/components/live-region.js +9 -74
- package/dist/esm/emotion/components/multi-value.js +3 -2
- package/dist/esm/select.js +139 -98
- package/dist/types/accessibility/index.d.ts +0 -2
- package/dist/types/compiled/components/live-region.d.ts +0 -2
- package/dist/types/emotion/components/live-region.d.ts +0 -2
- package/dist/types/select.d.ts +5 -6
- package/dist/types-ts4.5/accessibility/index.d.ts +0 -2
- package/dist/types-ts4.5/compiled/components/live-region.d.ts +0 -2
- package/dist/types-ts4.5/emotion/components/live-region.d.ts +0 -2
- package/dist/types-ts4.5/select.d.ts +5 -6
- package/package.json +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/react-select
|
|
2
2
|
|
|
3
|
+
## 2.7.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 2.7.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#155546](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/155546)
|
|
14
|
+
[`4133da7ce5d92`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4133da7ce5d92) -
|
|
15
|
+
This cleans up the feature flag references for assistive technology improvements, making them
|
|
16
|
+
fully available to all people.
|
|
17
|
+
|
|
3
18
|
## 2.6.6
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -4,76 +4,30 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.defaultAriaLiveMessages = void 0;
|
|
7
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
8
7
|
/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
|
|
9
8
|
|
|
10
9
|
var defaultAriaLiveMessages = exports.defaultAriaLiveMessages = {
|
|
11
|
-
guidance: function guidance(props) {
|
|
12
|
-
var isSearchable = props.isSearchable,
|
|
13
|
-
isMulti = props.isMulti,
|
|
14
|
-
tabSelectsValue = props.tabSelectsValue,
|
|
15
|
-
context = props.context,
|
|
16
|
-
isInitialFocus = props.isInitialFocus;
|
|
17
|
-
switch (context) {
|
|
18
|
-
case 'menu':
|
|
19
|
-
return "Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu".concat(tabSelectsValue ? ', press Tab to select the option and exit the menu' : '', ".");
|
|
20
|
-
case 'input':
|
|
21
|
-
return isInitialFocus ? "".concat(props['aria-label'] || 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(isMulti ? ' press left to focus selected values' : '') : '';
|
|
22
|
-
case 'value':
|
|
23
|
-
return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
|
|
24
|
-
default:
|
|
25
|
-
return '';
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
10
|
onChange: function onChange(props) {
|
|
29
11
|
var action = props.action,
|
|
30
12
|
_props$label = props.label,
|
|
31
13
|
label = _props$label === void 0 ? '' : _props$label,
|
|
32
|
-
labels = props.labels,
|
|
33
14
|
isDisabled = props.isDisabled;
|
|
34
15
|
switch (action) {
|
|
35
16
|
case 'deselect-option':
|
|
36
17
|
case 'pop-value':
|
|
37
18
|
case 'remove-value':
|
|
38
|
-
return label.length
|
|
39
|
-
// TODO: this should be handled on backspace|delete if no value, but doing it here first
|
|
19
|
+
return label.length ? "option ".concat(label, ", deselected") : '';
|
|
40
20
|
case 'clear':
|
|
41
21
|
return 'All selected options have been cleared.';
|
|
42
|
-
case 'initial-input-focus':
|
|
43
|
-
return label.length && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? "option".concat(labels.length > 1 ? 's' : '', " ").concat(labels.join(','), ", selected.") : '';
|
|
44
22
|
case 'select-option':
|
|
45
|
-
return
|
|
23
|
+
return label.length && !isDisabled ? "option ".concat(label, ", selected.") : '';
|
|
46
24
|
default:
|
|
47
25
|
return '';
|
|
48
26
|
}
|
|
49
27
|
},
|
|
50
|
-
onFocus: function onFocus(props) {
|
|
51
|
-
var context = props.context,
|
|
52
|
-
focused = props.focused,
|
|
53
|
-
options = props.options,
|
|
54
|
-
_props$label2 = props.label,
|
|
55
|
-
label = _props$label2 === void 0 ? '' : _props$label2,
|
|
56
|
-
selectValue = props.selectValue,
|
|
57
|
-
isDisabled = props.isDisabled,
|
|
58
|
-
isSelected = props.isSelected;
|
|
59
|
-
var getArrayIndex = function getArrayIndex(arr, item) {
|
|
60
|
-
return arr && arr.length ? "(".concat(arr.indexOf(item) + 1, " of ").concat(arr.length, ")") : '';
|
|
61
|
-
};
|
|
62
|
-
if (context === 'value' && selectValue) {
|
|
63
|
-
return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
// No longer needed after fg('design_system_select-a11y-improvement') is cleaned up
|
|
67
|
-
if (context === 'menu' && !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
|
|
68
|
-
var disabled = isDisabled ? ' disabled' : '';
|
|
69
|
-
var status = "".concat(isSelected ? ' selected' : ' not selected').concat(disabled);
|
|
70
|
-
return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ", completion selected");
|
|
71
|
-
}
|
|
72
|
-
return '';
|
|
73
|
-
},
|
|
74
28
|
onFilter: function onFilter(props) {
|
|
75
29
|
var inputValue = props.inputValue,
|
|
76
30
|
resultsMessage = props.resultsMessage;
|
|
77
|
-
return "".concat(resultsMessage
|
|
31
|
+
return inputValue ? "".concat(resultsMessage, " for search term ").concat(inputValue, ".") : '';
|
|
78
32
|
}
|
|
79
33
|
};
|
|
@@ -14,8 +14,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
14
14
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
15
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
16
16
|
var _react2 = require("@compiled/react");
|
|
17
|
-
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/
|
|
18
|
-
var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/
|
|
17
|
+
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
|
|
18
|
+
var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle--select-clear"));
|
|
19
19
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
20
20
|
var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
|
|
21
21
|
var _utils = require("../../utils");
|
|
@@ -72,7 +72,8 @@ var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator(p
|
|
|
72
72
|
}, /*#__PURE__*/React.createElement(_chevronDown.default, {
|
|
73
73
|
color: "currentColor",
|
|
74
74
|
label: "open",
|
|
75
|
-
LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)"
|
|
75
|
+
LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)",
|
|
76
|
+
size: "small"
|
|
76
77
|
})));
|
|
77
78
|
};
|
|
78
79
|
var clearIndicatorCSS = exports.clearIndicatorCSS = function clearIndicatorCSS() {
|
|
@@ -110,7 +111,8 @@ var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
|
|
|
110
111
|
label: "",
|
|
111
112
|
color: "currentColor",
|
|
112
113
|
LEGACY_size: "small",
|
|
113
|
-
LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
|
|
114
|
+
LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)",
|
|
115
|
+
size: "small"
|
|
114
116
|
})));
|
|
115
117
|
};
|
|
116
118
|
|
|
@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
11
|
var _accessibility = require("../../accessibility");
|
|
13
12
|
var _a11yText = _interopRequireDefault(require("./internal/a11y-text"));
|
|
14
13
|
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); }
|
|
@@ -20,32 +19,21 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
20
19
|
|
|
21
20
|
var LiveRegion = function LiveRegion(props) {
|
|
22
21
|
var ariaSelection = props.ariaSelection,
|
|
23
|
-
focusedOption = props.focusedOption,
|
|
24
|
-
focusedValue = props.focusedValue,
|
|
25
22
|
focusableOptions = props.focusableOptions,
|
|
26
23
|
isFocused = props.isFocused,
|
|
27
24
|
selectValue = props.selectValue,
|
|
28
25
|
selectProps = props.selectProps,
|
|
29
|
-
id = props.id
|
|
30
|
-
isAppleDevice = props.isAppleDevice;
|
|
26
|
+
id = props.id;
|
|
31
27
|
var ariaLiveMessages = selectProps.ariaLiveMessages,
|
|
32
28
|
getOptionLabel = selectProps.getOptionLabel,
|
|
33
29
|
inputValue = selectProps.inputValue,
|
|
34
|
-
isMulti = selectProps.isMulti,
|
|
35
30
|
isOptionDisabled = selectProps.isOptionDisabled,
|
|
36
|
-
isSearchable = selectProps.isSearchable,
|
|
37
|
-
label = selectProps.label,
|
|
38
31
|
menuIsOpen = selectProps.menuIsOpen,
|
|
39
32
|
options = selectProps.options,
|
|
40
33
|
screenReaderStatus = selectProps.screenReaderStatus,
|
|
41
|
-
tabSelectsValue = selectProps.tabSelectsValue,
|
|
42
34
|
isLoading = selectProps.isLoading;
|
|
43
|
-
var ariaLabel = selectProps['aria-label'] || label;
|
|
44
35
|
var ariaLive = selectProps['aria-live'];
|
|
45
36
|
|
|
46
|
-
// for safari, we will use minimum support from aria-live region
|
|
47
|
-
var isA11yImprovementEnabled = (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && !isAppleDevice;
|
|
48
|
-
|
|
49
37
|
// Update aria live message configuration when prop changes
|
|
50
38
|
var messages = (0, _react.useMemo)(function () {
|
|
51
39
|
return _objectSpread(_objectSpread({}, _accessibility.defaultAriaLiveMessages), ariaLiveMessages || {});
|
|
@@ -54,7 +42,7 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
54
42
|
// Update aria live selected option when prop changes
|
|
55
43
|
var ariaSelected = (0, _react.useMemo)(function () {
|
|
56
44
|
var message = '';
|
|
57
|
-
if (
|
|
45
|
+
if (menuIsOpen) {
|
|
58
46
|
// we don't need to have selected message when the menu is open
|
|
59
47
|
return '';
|
|
60
48
|
}
|
|
@@ -71,12 +59,12 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
71
59
|
|
|
72
60
|
// If there is just one item from the action then get its label
|
|
73
61
|
var selected = removedValue || option || asOption(value);
|
|
74
|
-
var
|
|
62
|
+
var label = selected ? getOptionLabel(selected) : '';
|
|
75
63
|
|
|
76
64
|
// If there are multiple items from the action then return an array of labels
|
|
77
65
|
var multiSelected = selectedOptions || removedValues || undefined;
|
|
78
66
|
var labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
|
|
79
|
-
if (
|
|
67
|
+
if (!label && !labels.length) {
|
|
80
68
|
// return empty string if no labels provided
|
|
81
69
|
return '';
|
|
82
70
|
}
|
|
@@ -84,39 +72,13 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
84
72
|
// multiSelected items are usually items that have already been selected
|
|
85
73
|
// or set by the user as a default value so we assume they are not disabled
|
|
86
74
|
isDisabled: selected && isOptionDisabled(selected, selectValue),
|
|
87
|
-
label:
|
|
75
|
+
label: label,
|
|
88
76
|
labels: labels
|
|
89
77
|
}, ariaSelection);
|
|
90
78
|
message = messages.onChange(onChangeProps);
|
|
91
79
|
}
|
|
92
80
|
return message;
|
|
93
|
-
}, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel,
|
|
94
|
-
var prevInputValue = (0, _react.useRef)('');
|
|
95
|
-
var ariaFocused = (0, _react.useMemo)(function () {
|
|
96
|
-
var focusMsg = '';
|
|
97
|
-
var focused = focusedOption || focusedValue;
|
|
98
|
-
var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
|
|
99
|
-
if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
|
|
100
|
-
// only announce focus option when searching when ff is on and the input value changed
|
|
101
|
-
// for safari, we will announce for all
|
|
102
|
-
return '';
|
|
103
|
-
}
|
|
104
|
-
if (focused && messages.onFocus) {
|
|
105
|
-
var onFocusProps = {
|
|
106
|
-
focused: focused,
|
|
107
|
-
label: getOptionLabel(focused),
|
|
108
|
-
isDisabled: isOptionDisabled(focused, selectValue),
|
|
109
|
-
isSelected: isSelected,
|
|
110
|
-
options: focusableOptions,
|
|
111
|
-
context: focused === focusedOption ? 'menu' : 'value',
|
|
112
|
-
selectValue: selectValue,
|
|
113
|
-
isMulti: isMulti
|
|
114
|
-
};
|
|
115
|
-
focusMsg = messages.onFocus(onFocusProps);
|
|
116
|
-
}
|
|
117
|
-
prevInputValue.current = inputValue;
|
|
118
|
-
return focusMsg;
|
|
119
|
-
}, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
|
|
81
|
+
}, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, menuIsOpen]);
|
|
120
82
|
var ariaResults = (0, _react.useMemo)(function () {
|
|
121
83
|
var resultsMsg = '';
|
|
122
84
|
if (isLoading) {
|
|
@@ -137,43 +99,17 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
137
99
|
return resultsMsg;
|
|
138
100
|
}, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
|
|
139
101
|
var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
|
|
140
|
-
var ariaGuidance = (0, _react.useMemo)(function () {
|
|
141
|
-
if ((0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
|
|
142
|
-
// don't announce guidance at all when ff is on
|
|
143
|
-
return '';
|
|
144
|
-
}
|
|
145
|
-
var guidanceMsg = '';
|
|
146
|
-
if (messages.guidance) {
|
|
147
|
-
var context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
|
|
148
|
-
guidanceMsg = messages.guidance({
|
|
149
|
-
'aria-label': ariaLabel,
|
|
150
|
-
context: context,
|
|
151
|
-
isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
|
|
152
|
-
isMulti: isMulti,
|
|
153
|
-
isSearchable: isSearchable,
|
|
154
|
-
tabSelectsValue: tabSelectsValue,
|
|
155
|
-
isInitialFocus: isInitialFocus
|
|
156
|
-
});
|
|
157
|
-
}
|
|
158
|
-
return guidanceMsg;
|
|
159
|
-
}, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
|
|
160
102
|
var ScreenReaderText = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
161
103
|
id: "aria-selection"
|
|
162
104
|
}, ariaSelected), /*#__PURE__*/_react.default.createElement("span", {
|
|
163
105
|
id: "aria-results"
|
|
164
|
-
}, ariaResults)
|
|
165
|
-
id: "aria-focused"
|
|
166
|
-
}, ariaFocused), /*#__PURE__*/_react.default.createElement("span", {
|
|
167
|
-
id: "aria-guidance"
|
|
168
|
-
}, ariaGuidance)));
|
|
106
|
+
}, ariaResults));
|
|
169
107
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_a11yText.default, {
|
|
170
108
|
id: id
|
|
171
109
|
}, isInitialFocus && ScreenReaderText), /*#__PURE__*/_react.default.createElement(_a11yText.default, {
|
|
172
110
|
"aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
|
|
173
111
|
,
|
|
174
|
-
"
|
|
175
|
-
"aria-relevant": (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'additions text',
|
|
176
|
-
role: (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? 'status' : 'log'
|
|
112
|
+
role: "status"
|
|
177
113
|
}, isFocused && !isInitialFocus && ScreenReaderText));
|
|
178
114
|
};
|
|
179
115
|
|
|
@@ -15,8 +15,8 @@ var _runtime = require("@compiled/react/runtime");
|
|
|
15
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
16
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
17
17
|
var _react2 = require("@compiled/react");
|
|
18
|
+
var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
|
|
18
19
|
var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
|
|
19
|
-
var _cross = _interopRequireDefault(require("@atlaskit/icon/utility/cross"));
|
|
20
20
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
21
21
|
var _utils = require("../../utils");
|
|
22
22
|
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); }
|
|
@@ -89,13 +89,14 @@ function MultiValueRemove(_ref3) {
|
|
|
89
89
|
}), /*#__PURE__*/React.createElement("div", {
|
|
90
90
|
"data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon',
|
|
91
91
|
className: (0, _runtime.ax)([isDisabled && "_1e0cglyw", !isDisabled && "_1e0c1kw7"])
|
|
92
|
-
}, /*#__PURE__*/React.createElement(
|
|
92
|
+
}, /*#__PURE__*/React.createElement(_close.default, {
|
|
93
93
|
label: "",
|
|
94
94
|
color: "currentColor",
|
|
95
95
|
LEGACY_fallbackIcon: _selectClear.default,
|
|
96
96
|
LEGACY_primaryColor: "transparent",
|
|
97
97
|
LEGACY_secondaryColor: "inherit",
|
|
98
|
-
LEGACY_size: "small"
|
|
98
|
+
LEGACY_size: "small",
|
|
99
|
+
size: "small"
|
|
99
100
|
})));
|
|
100
101
|
}
|
|
101
102
|
var MultiValue = function MultiValue(props) {
|
|
@@ -9,8 +9,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
11
|
var _react = require("@emotion/react");
|
|
12
|
-
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/
|
|
13
|
-
var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/
|
|
12
|
+
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
|
|
13
|
+
var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle--select-clear"));
|
|
14
14
|
var _primitives = require("@atlaskit/primitives");
|
|
15
15
|
var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
|
|
16
16
|
var _utils = require("../../utils");
|
|
@@ -70,7 +70,8 @@ var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator(p
|
|
|
70
70
|
}, (0, _react.jsx)(_chevronDown.default, {
|
|
71
71
|
color: "currentColor",
|
|
72
72
|
label: "open",
|
|
73
|
-
LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)"
|
|
73
|
+
LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)",
|
|
74
|
+
size: "small"
|
|
74
75
|
})));
|
|
75
76
|
};
|
|
76
77
|
var clearIndicatorCSS = exports.clearIndicatorCSS = function clearIndicatorCSS(_ref2) {
|
|
@@ -103,7 +104,8 @@ var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
|
|
|
103
104
|
label: "",
|
|
104
105
|
color: "currentColor",
|
|
105
106
|
LEGACY_size: "small",
|
|
106
|
-
LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
|
|
107
|
+
LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)",
|
|
108
|
+
size: "small"
|
|
107
109
|
})));
|
|
108
110
|
};
|
|
109
111
|
|
|
@@ -1,20 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _react =
|
|
9
|
+
var _react = require("react");
|
|
11
10
|
var _react2 = require("@emotion/react");
|
|
12
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
11
|
var _accessibility = require("../../accessibility");
|
|
14
12
|
var _a11yText = _interopRequireDefault(require("./internal/a11y-text"));
|
|
15
|
-
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); }
|
|
16
13
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
17
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
|
|
18
15
|
* @jsxRuntime classic
|
|
19
16
|
* @jsx jsx
|
|
20
17
|
* @jsxFrag React.Fragment
|
|
@@ -25,32 +22,21 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
25
22
|
|
|
26
23
|
var LiveRegion = function LiveRegion(props) {
|
|
27
24
|
var ariaSelection = props.ariaSelection,
|
|
28
|
-
focusedOption = props.focusedOption,
|
|
29
|
-
focusedValue = props.focusedValue,
|
|
30
25
|
focusableOptions = props.focusableOptions,
|
|
31
26
|
isFocused = props.isFocused,
|
|
32
27
|
selectValue = props.selectValue,
|
|
33
28
|
selectProps = props.selectProps,
|
|
34
|
-
id = props.id
|
|
35
|
-
isAppleDevice = props.isAppleDevice;
|
|
29
|
+
id = props.id;
|
|
36
30
|
var ariaLiveMessages = selectProps.ariaLiveMessages,
|
|
37
31
|
getOptionLabel = selectProps.getOptionLabel,
|
|
38
32
|
inputValue = selectProps.inputValue,
|
|
39
|
-
isMulti = selectProps.isMulti,
|
|
40
33
|
isOptionDisabled = selectProps.isOptionDisabled,
|
|
41
|
-
isSearchable = selectProps.isSearchable,
|
|
42
|
-
label = selectProps.label,
|
|
43
34
|
menuIsOpen = selectProps.menuIsOpen,
|
|
44
35
|
options = selectProps.options,
|
|
45
36
|
screenReaderStatus = selectProps.screenReaderStatus,
|
|
46
|
-
tabSelectsValue = selectProps.tabSelectsValue,
|
|
47
37
|
isLoading = selectProps.isLoading;
|
|
48
|
-
var ariaLabel = selectProps['aria-label'] || label;
|
|
49
38
|
var ariaLive = selectProps['aria-live'];
|
|
50
39
|
|
|
51
|
-
// for safari, we will use minimum support from aria-live region
|
|
52
|
-
var isA11yImprovementEnabled = (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && !isAppleDevice;
|
|
53
|
-
|
|
54
40
|
// Update aria live message configuration when prop changes
|
|
55
41
|
var messages = (0, _react.useMemo)(function () {
|
|
56
42
|
return _objectSpread(_objectSpread({}, _accessibility.defaultAriaLiveMessages), ariaLiveMessages || {});
|
|
@@ -59,7 +45,7 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
59
45
|
// Update aria live selected option when prop changes
|
|
60
46
|
var ariaSelected = (0, _react.useMemo)(function () {
|
|
61
47
|
var message = '';
|
|
62
|
-
if (
|
|
48
|
+
if (menuIsOpen) {
|
|
63
49
|
// we don't need to have selected message when the menu is open
|
|
64
50
|
return '';
|
|
65
51
|
}
|
|
@@ -76,12 +62,12 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
76
62
|
|
|
77
63
|
// If there is just one item from the action then get its label
|
|
78
64
|
var selected = removedValue || option || asOption(value);
|
|
79
|
-
var
|
|
65
|
+
var label = selected ? getOptionLabel(selected) : '';
|
|
80
66
|
|
|
81
67
|
// If there are multiple items from the action then return an array of labels
|
|
82
68
|
var multiSelected = selectedOptions || removedValues || undefined;
|
|
83
69
|
var labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
|
|
84
|
-
if (
|
|
70
|
+
if (!label && !labels.length) {
|
|
85
71
|
// return empty string if no labels provided
|
|
86
72
|
return '';
|
|
87
73
|
}
|
|
@@ -89,39 +75,13 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
89
75
|
// multiSelected items are usually items that have already been selected
|
|
90
76
|
// or set by the user as a default value so we assume they are not disabled
|
|
91
77
|
isDisabled: selected && isOptionDisabled(selected, selectValue),
|
|
92
|
-
label:
|
|
78
|
+
label: label,
|
|
93
79
|
labels: labels
|
|
94
80
|
}, ariaSelection);
|
|
95
81
|
message = messages.onChange(onChangeProps);
|
|
96
82
|
}
|
|
97
83
|
return message;
|
|
98
|
-
}, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel,
|
|
99
|
-
var prevInputValue = (0, _react.useRef)('');
|
|
100
|
-
var ariaFocused = (0, _react.useMemo)(function () {
|
|
101
|
-
var focusMsg = '';
|
|
102
|
-
var focused = focusedOption || focusedValue;
|
|
103
|
-
var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
|
|
104
|
-
if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
|
|
105
|
-
// only announce focus option when searching when ff is on and the input value changed
|
|
106
|
-
// for safari, we will announce for all
|
|
107
|
-
return '';
|
|
108
|
-
}
|
|
109
|
-
if (focused && messages.onFocus) {
|
|
110
|
-
var onFocusProps = {
|
|
111
|
-
focused: focused,
|
|
112
|
-
label: getOptionLabel(focused),
|
|
113
|
-
isDisabled: isOptionDisabled(focused, selectValue),
|
|
114
|
-
isSelected: isSelected,
|
|
115
|
-
options: focusableOptions,
|
|
116
|
-
context: focused === focusedOption ? 'menu' : 'value',
|
|
117
|
-
selectValue: selectValue,
|
|
118
|
-
isMulti: isMulti
|
|
119
|
-
};
|
|
120
|
-
focusMsg = messages.onFocus(onFocusProps);
|
|
121
|
-
}
|
|
122
|
-
prevInputValue.current = inputValue;
|
|
123
|
-
return focusMsg;
|
|
124
|
-
}, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
|
|
84
|
+
}, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, menuIsOpen]);
|
|
125
85
|
var ariaResults = (0, _react.useMemo)(function () {
|
|
126
86
|
var resultsMsg = '';
|
|
127
87
|
if (isLoading) {
|
|
@@ -142,43 +102,17 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
142
102
|
return resultsMsg;
|
|
143
103
|
}, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
|
|
144
104
|
var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
|
|
145
|
-
var ariaGuidance = (0, _react.useMemo)(function () {
|
|
146
|
-
if ((0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
|
|
147
|
-
// don't announce guidance at all when ff is on
|
|
148
|
-
return '';
|
|
149
|
-
}
|
|
150
|
-
var guidanceMsg = '';
|
|
151
|
-
if (messages.guidance) {
|
|
152
|
-
var context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
|
|
153
|
-
guidanceMsg = messages.guidance({
|
|
154
|
-
'aria-label': ariaLabel,
|
|
155
|
-
context: context,
|
|
156
|
-
isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
|
|
157
|
-
isMulti: isMulti,
|
|
158
|
-
isSearchable: isSearchable,
|
|
159
|
-
tabSelectsValue: tabSelectsValue,
|
|
160
|
-
isInitialFocus: isInitialFocus
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
return guidanceMsg;
|
|
164
|
-
}, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
|
|
165
105
|
var ScreenReaderText = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
|
|
166
106
|
id: "aria-selection"
|
|
167
107
|
}, ariaSelected), (0, _react2.jsx)("span", {
|
|
168
108
|
id: "aria-results"
|
|
169
|
-
}, ariaResults)
|
|
170
|
-
id: "aria-focused"
|
|
171
|
-
}, ariaFocused), (0, _react2.jsx)("span", {
|
|
172
|
-
id: "aria-guidance"
|
|
173
|
-
}, ariaGuidance)));
|
|
109
|
+
}, ariaResults));
|
|
174
110
|
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_a11yText.default, {
|
|
175
111
|
id: id
|
|
176
112
|
}, isInitialFocus && ScreenReaderText), (0, _react2.jsx)(_a11yText.default, {
|
|
177
113
|
"aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
|
|
178
114
|
,
|
|
179
|
-
"
|
|
180
|
-
"aria-relevant": (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'additions text',
|
|
181
|
-
role: (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? 'status' : 'log'
|
|
115
|
+
role: "status"
|
|
182
116
|
}, isFocused && !isInitialFocus && ScreenReaderText));
|
|
183
117
|
};
|
|
184
118
|
|
|
@@ -9,8 +9,8 @@ exports.MultiValueRemove = MultiValueRemove;
|
|
|
9
9
|
exports.multiValueRemoveCSS = exports.multiValueLabelCSS = exports.multiValueCSS = exports.default = void 0;
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
var _react = require("@emotion/react");
|
|
12
|
+
var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
|
|
12
13
|
var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
|
|
13
|
-
var _cross = _interopRequireDefault(require("@atlaskit/icon/utility/cross"));
|
|
14
14
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
15
|
var _utils = require("../../utils");
|
|
16
16
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -145,13 +145,14 @@ function MultiValueRemove(_ref5) {
|
|
|
145
145
|
(0, _react.jsx)("div", innerProps, (0, _react.jsx)("div", {
|
|
146
146
|
css: isDisabled ? disabledStyles : enabledStyles,
|
|
147
147
|
"data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
|
|
148
|
-
}, (0, _react.jsx)(
|
|
148
|
+
}, (0, _react.jsx)(_close.default, {
|
|
149
149
|
label: "",
|
|
150
150
|
color: "currentColor",
|
|
151
151
|
LEGACY_fallbackIcon: _selectClear.default,
|
|
152
152
|
LEGACY_primaryColor: "transparent",
|
|
153
153
|
LEGACY_secondaryColor: "inherit",
|
|
154
|
-
LEGACY_size: "small"
|
|
154
|
+
LEGACY_size: "small",
|
|
155
|
+
size: "small"
|
|
155
156
|
})))
|
|
156
157
|
);
|
|
157
158
|
}
|