@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
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 && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? "option ".concat(label, ", deselected") : '';
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 isDisabled ? "option ".concat(label, " is disabled. Select another option.") : "option ".concat(label, ", selected.");
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).concat(inputValue ? ' for search term ' + inputValue : '', ".");
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/utility/migration/chevron-down"));
18
- var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
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 (isA11yImprovementEnabled && menuIsOpen) {
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 _label = selected ? getOptionLabel(selected) : '';
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 (isA11yImprovementEnabled && !_label && !labels.length) {
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: _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, isA11yImprovementEnabled, menuIsOpen]);
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), !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
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
- "aria-atomic": (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'false',
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(_cross.default, {
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/utility/migration/chevron-down"));
13
- var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
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 = _interopRequireWildcard(require("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; } /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */ /**
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 (isA11yImprovementEnabled && menuIsOpen) {
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 _label = selected ? getOptionLabel(selected) : '';
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 (isA11yImprovementEnabled && !_label && !labels.length) {
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: _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, isA11yImprovementEnabled, menuIsOpen]);
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), !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
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
- "aria-atomic": (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'false',
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)(_cross.default, {
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
  }