@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.
Files changed (34) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/accessibility/index.js +3 -49
  3. package/dist/cjs/compiled/components/indicators.js +6 -4
  4. package/dist/cjs/compiled/components/live-region.js +8 -72
  5. package/dist/cjs/compiled/components/multi-value.js +4 -3
  6. package/dist/cjs/emotion/components/indicators.js +6 -4
  7. package/dist/cjs/emotion/components/live-region.js +10 -76
  8. package/dist/cjs/emotion/components/multi-value.js +4 -3
  9. package/dist/cjs/select.js +141 -99
  10. package/dist/es2019/accessibility/index.js +3 -50
  11. package/dist/es2019/compiled/components/indicators.js +6 -4
  12. package/dist/es2019/compiled/components/live-region.js +7 -71
  13. package/dist/es2019/compiled/components/multi-value.js +3 -2
  14. package/dist/es2019/emotion/components/indicators.js +6 -4
  15. package/dist/es2019/emotion/components/live-region.js +7 -72
  16. package/dist/es2019/emotion/components/multi-value.js +3 -2
  17. package/dist/es2019/select.js +117 -82
  18. package/dist/esm/accessibility/index.js +3 -49
  19. package/dist/esm/compiled/components/indicators.js +6 -4
  20. package/dist/esm/compiled/components/live-region.js +9 -73
  21. package/dist/esm/compiled/components/multi-value.js +3 -2
  22. package/dist/esm/emotion/components/indicators.js +6 -4
  23. package/dist/esm/emotion/components/live-region.js +9 -74
  24. package/dist/esm/emotion/components/multi-value.js +3 -2
  25. package/dist/esm/select.js +139 -98
  26. package/dist/types/accessibility/index.d.ts +0 -2
  27. package/dist/types/compiled/components/live-region.d.ts +0 -2
  28. package/dist/types/emotion/components/live-region.d.ts +0 -2
  29. package/dist/types/select.d.ts +5 -6
  30. package/dist/types-ts4.5/accessibility/index.d.ts +0 -2
  31. package/dist/types-ts4.5/compiled/components/live-region.d.ts +0 -2
  32. package/dist/types-ts4.5/emotion/components/live-region.d.ts +0 -2
  33. package/dist/types-ts4.5/select.d.ts +5 -6
  34. 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 React, { Fragment, useMemo, useRef } from 'react';
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 (isA11yImprovementEnabled && menuIsOpen) {
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 _label = selected ? getOptionLabel(selected) : '';
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 (isA11yImprovementEnabled && !_label && !labels.length) {
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: _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, isA11yImprovementEnabled, menuIsOpen]);
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), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
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
- "aria-atomic": fg('design_system_select-a11y-improvement') ? undefined : 'false',
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
  }