@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
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
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; }
|
|
3
3
|
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) { _defineProperty(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; }
|
|
4
|
-
/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
|
|
5
4
|
/**
|
|
6
5
|
* @jsxRuntime classic
|
|
7
6
|
* @jsx jsx
|
|
8
7
|
* @jsxFrag React.Fragment
|
|
9
8
|
*/
|
|
10
|
-
import
|
|
9
|
+
import { Fragment, useMemo } from 'react';
|
|
11
10
|
|
|
12
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
13
12
|
import { jsx } from '@emotion/react';
|
|
14
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
13
|
import { defaultAriaLiveMessages } from '../../accessibility';
|
|
16
14
|
import A11yText from './internal/a11y-text';
|
|
17
15
|
|
|
@@ -21,32 +19,21 @@ import A11yText from './internal/a11y-text';
|
|
|
21
19
|
|
|
22
20
|
var LiveRegion = function LiveRegion(props) {
|
|
23
21
|
var ariaSelection = props.ariaSelection,
|
|
24
|
-
focusedOption = props.focusedOption,
|
|
25
|
-
focusedValue = props.focusedValue,
|
|
26
22
|
focusableOptions = props.focusableOptions,
|
|
27
23
|
isFocused = props.isFocused,
|
|
28
24
|
selectValue = props.selectValue,
|
|
29
25
|
selectProps = props.selectProps,
|
|
30
|
-
id = props.id
|
|
31
|
-
isAppleDevice = props.isAppleDevice;
|
|
26
|
+
id = props.id;
|
|
32
27
|
var ariaLiveMessages = selectProps.ariaLiveMessages,
|
|
33
28
|
getOptionLabel = selectProps.getOptionLabel,
|
|
34
29
|
inputValue = selectProps.inputValue,
|
|
35
|
-
isMulti = selectProps.isMulti,
|
|
36
30
|
isOptionDisabled = selectProps.isOptionDisabled,
|
|
37
|
-
isSearchable = selectProps.isSearchable,
|
|
38
|
-
label = selectProps.label,
|
|
39
31
|
menuIsOpen = selectProps.menuIsOpen,
|
|
40
32
|
options = selectProps.options,
|
|
41
33
|
screenReaderStatus = selectProps.screenReaderStatus,
|
|
42
|
-
tabSelectsValue = selectProps.tabSelectsValue,
|
|
43
34
|
isLoading = selectProps.isLoading;
|
|
44
|
-
var ariaLabel = selectProps['aria-label'] || label;
|
|
45
35
|
var ariaLive = selectProps['aria-live'];
|
|
46
36
|
|
|
47
|
-
// for safari, we will use minimum support from aria-live region
|
|
48
|
-
var isA11yImprovementEnabled = fg('design_system_select-a11y-improvement') && !isAppleDevice;
|
|
49
|
-
|
|
50
37
|
// Update aria live message configuration when prop changes
|
|
51
38
|
var messages = useMemo(function () {
|
|
52
39
|
return _objectSpread(_objectSpread({}, defaultAriaLiveMessages), ariaLiveMessages || {});
|
|
@@ -55,7 +42,7 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
55
42
|
// Update aria live selected option when prop changes
|
|
56
43
|
var ariaSelected = useMemo(function () {
|
|
57
44
|
var message = '';
|
|
58
|
-
if (
|
|
45
|
+
if (menuIsOpen) {
|
|
59
46
|
// we don't need to have selected message when the menu is open
|
|
60
47
|
return '';
|
|
61
48
|
}
|
|
@@ -72,12 +59,12 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
72
59
|
|
|
73
60
|
// If there is just one item from the action then get its label
|
|
74
61
|
var selected = removedValue || option || asOption(value);
|
|
75
|
-
var
|
|
62
|
+
var label = selected ? getOptionLabel(selected) : '';
|
|
76
63
|
|
|
77
64
|
// If there are multiple items from the action then return an array of labels
|
|
78
65
|
var multiSelected = selectedOptions || removedValues || undefined;
|
|
79
66
|
var labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
|
|
80
|
-
if (
|
|
67
|
+
if (!label && !labels.length) {
|
|
81
68
|
// return empty string if no labels provided
|
|
82
69
|
return '';
|
|
83
70
|
}
|
|
@@ -85,39 +72,13 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
85
72
|
// multiSelected items are usually items that have already been selected
|
|
86
73
|
// or set by the user as a default value so we assume they are not disabled
|
|
87
74
|
isDisabled: selected && isOptionDisabled(selected, selectValue),
|
|
88
|
-
label:
|
|
75
|
+
label: label,
|
|
89
76
|
labels: labels
|
|
90
77
|
}, ariaSelection);
|
|
91
78
|
message = messages.onChange(onChangeProps);
|
|
92
79
|
}
|
|
93
80
|
return message;
|
|
94
|
-
}, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel,
|
|
95
|
-
var prevInputValue = useRef('');
|
|
96
|
-
var ariaFocused = useMemo(function () {
|
|
97
|
-
var focusMsg = '';
|
|
98
|
-
var focused = focusedOption || focusedValue;
|
|
99
|
-
var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
|
|
100
|
-
if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
|
|
101
|
-
// only announce focus option when searching when ff is on and the input value changed
|
|
102
|
-
// for safari, we will announce for all
|
|
103
|
-
return '';
|
|
104
|
-
}
|
|
105
|
-
if (focused && messages.onFocus) {
|
|
106
|
-
var onFocusProps = {
|
|
107
|
-
focused: focused,
|
|
108
|
-
label: getOptionLabel(focused),
|
|
109
|
-
isDisabled: isOptionDisabled(focused, selectValue),
|
|
110
|
-
isSelected: isSelected,
|
|
111
|
-
options: focusableOptions,
|
|
112
|
-
context: focused === focusedOption ? 'menu' : 'value',
|
|
113
|
-
selectValue: selectValue,
|
|
114
|
-
isMulti: isMulti
|
|
115
|
-
};
|
|
116
|
-
focusMsg = messages.onFocus(onFocusProps);
|
|
117
|
-
}
|
|
118
|
-
prevInputValue.current = inputValue;
|
|
119
|
-
return focusMsg;
|
|
120
|
-
}, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
|
|
81
|
+
}, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, menuIsOpen]);
|
|
121
82
|
var ariaResults = useMemo(function () {
|
|
122
83
|
var resultsMsg = '';
|
|
123
84
|
if (isLoading) {
|
|
@@ -138,43 +99,17 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
138
99
|
return resultsMsg;
|
|
139
100
|
}, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
|
|
140
101
|
var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
|
|
141
|
-
var ariaGuidance = useMemo(function () {
|
|
142
|
-
if (fg('design_system_select-a11y-improvement')) {
|
|
143
|
-
// don't announce guidance at all when ff is on
|
|
144
|
-
return '';
|
|
145
|
-
}
|
|
146
|
-
var guidanceMsg = '';
|
|
147
|
-
if (messages.guidance) {
|
|
148
|
-
var context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
|
|
149
|
-
guidanceMsg = messages.guidance({
|
|
150
|
-
'aria-label': ariaLabel,
|
|
151
|
-
context: context,
|
|
152
|
-
isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
|
|
153
|
-
isMulti: isMulti,
|
|
154
|
-
isSearchable: isSearchable,
|
|
155
|
-
tabSelectsValue: tabSelectsValue,
|
|
156
|
-
isInitialFocus: isInitialFocus
|
|
157
|
-
});
|
|
158
|
-
}
|
|
159
|
-
return guidanceMsg;
|
|
160
|
-
}, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
|
|
161
102
|
var ScreenReaderText = jsx(Fragment, null, jsx("span", {
|
|
162
103
|
id: "aria-selection"
|
|
163
104
|
}, ariaSelected), jsx("span", {
|
|
164
105
|
id: "aria-results"
|
|
165
|
-
}, ariaResults)
|
|
166
|
-
id: "aria-focused"
|
|
167
|
-
}, ariaFocused), jsx("span", {
|
|
168
|
-
id: "aria-guidance"
|
|
169
|
-
}, ariaGuidance)));
|
|
106
|
+
}, ariaResults));
|
|
170
107
|
return jsx(Fragment, null, jsx(A11yText, {
|
|
171
108
|
id: id
|
|
172
109
|
}, isInitialFocus && ScreenReaderText), jsx(A11yText, {
|
|
173
110
|
"aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
|
|
174
111
|
,
|
|
175
|
-
"
|
|
176
|
-
"aria-relevant": fg('design_system_select-a11y-improvement') ? undefined : 'additions text',
|
|
177
|
-
role: fg('design_system_select-a11y-improvement') ? 'status' : 'log'
|
|
112
|
+
role: "status"
|
|
178
113
|
}, isFocused && !isInitialFocus && ScreenReaderText));
|
|
179
114
|
};
|
|
180
115
|
|
|
@@ -8,8 +8,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
8
8
|
|
|
9
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
10
10
|
import { css, jsx } from '@emotion/react';
|
|
11
|
+
import CrossIcon from '@atlaskit/icon/core/close';
|
|
11
12
|
import LegacySelectClearIcon from '@atlaskit/icon/glyph/select-clear';
|
|
12
|
-
import CrossIcon from '@atlaskit/icon/utility/cross';
|
|
13
13
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
14
|
import { getStyleProps } from '../../utils';
|
|
15
15
|
export var multiValueCSS = function multiValueCSS(_ref) {
|
|
@@ -145,7 +145,8 @@ export function MultiValueRemove(_ref5) {
|
|
|
145
145
|
LEGACY_fallbackIcon: LegacySelectClearIcon,
|
|
146
146
|
LEGACY_primaryColor: "transparent",
|
|
147
147
|
LEGACY_secondaryColor: "inherit",
|
|
148
|
-
LEGACY_size: "small"
|
|
148
|
+
LEGACY_size: "small",
|
|
149
|
+
size: "small"
|
|
149
150
|
})))
|
|
150
151
|
);
|
|
151
152
|
}
|