@atlaskit/select 18.8.1 → 18.8.2

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 (17) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/PopupSelect/PopupSelect.js +32 -35
  3. package/dist/cjs/Select.js +1 -1
  4. package/dist/cjs/components/input-options.js +9 -12
  5. package/dist/cjs/createSelect.js +2 -1
  6. package/dist/cjs/utils/grouped-options-announcement.js +4 -0
  7. package/dist/es2019/PopupSelect/PopupSelect.js +4 -4
  8. package/dist/es2019/Select.js +1 -1
  9. package/dist/es2019/createSelect.js +2 -1
  10. package/dist/es2019/utils/grouped-options-announcement.js +4 -0
  11. package/dist/esm/PopupSelect/PopupSelect.js +32 -35
  12. package/dist/esm/Select.js +1 -1
  13. package/dist/esm/components/input-options.js +9 -12
  14. package/dist/esm/createSelect.js +2 -1
  15. package/dist/esm/utils/grouped-options-announcement.js +4 -0
  16. package/package.json +4 -3
  17. package/types/package.json +17 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/select
2
2
 
3
+ ## 18.8.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#174375](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174375)
8
+ [`89790d380dd8c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89790d380dd8c) -
9
+ Restore aria-live messages for PopupSelect
10
+
3
11
  ## 18.8.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/PopupSelect/PopupSelect.js CHANGED
@@ -10,10 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
11
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
12
12
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
14
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
15
13
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
16
14
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
15
+ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
17
16
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
18
17
  var _react = _interopRequireWildcard(require("react"));
19
18
  var _bindEventListener = require("bind-event-listener");
@@ -33,7 +32,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
33
32
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
34
33
  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; }
35
34
  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; }
36
- function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
35
+ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
37
36
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
38
37
  /**
39
38
  * Are we rendering on the client or server?
@@ -75,8 +74,6 @@ var isEmpty = function isEmpty(obj) {
75
74
 
76
75
  // eslint-disable-next-line @repo/internal/react/no-class-components
77
76
  var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
78
- (0, _inherits2.default)(PopupSelect, _PureComponent);
79
- var _super = _createSuper(PopupSelect);
80
77
  function PopupSelect() {
81
78
  var _this$defaultOpenStat;
82
79
  var _this;
@@ -84,22 +81,22 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
84
81
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
85
82
  args[_key] = arguments[_key];
86
83
  }
87
- _this = _super.call.apply(_super, [this].concat(args));
88
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuRef", null);
89
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectRef", null);
90
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", null);
91
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowClick", null);
92
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowKeydown", null);
93
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", {
84
+ _this = _callSuper(this, PopupSelect, [].concat(args));
85
+ (0, _defineProperty2.default)(_this, "menuRef", null);
86
+ (0, _defineProperty2.default)(_this, "selectRef", null);
87
+ (0, _defineProperty2.default)(_this, "targetRef", null);
88
+ (0, _defineProperty2.default)(_this, "unbindWindowClick", null);
89
+ (0, _defineProperty2.default)(_this, "unbindWindowKeydown", null);
90
+ (0, _defineProperty2.default)(_this, "defaultStyles", {
94
91
  groupHeading: function groupHeading(provided) {
95
92
  return _objectSpread(_objectSpread({}, provided), {}, {
96
93
  color: "var(--ds-text-subtlest, ".concat(_colors.N80, ")")
97
94
  });
98
95
  }
99
96
  });
100
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isOpenControlled", _this.props.isOpen !== undefined);
101
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
102
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
97
+ (0, _defineProperty2.default)(_this, "isOpenControlled", _this.props.isOpen !== undefined);
98
+ (0, _defineProperty2.default)(_this, "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
99
+ (0, _defineProperty2.default)(_this, "state", {
103
100
  focusLockEnabled: false,
104
101
  isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
105
102
  mergedComponents: _components.defaultComponents,
@@ -107,7 +104,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
107
104
  });
108
105
  // Event Handlers
109
106
  // ==============================
110
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTargetKeyDown", function (event) {
107
+ (0, _defineProperty2.default)(_this, "handleTargetKeyDown", function (event) {
111
108
  switch (event.key) {
112
109
  case 'ArrowDown':
113
110
  _this.open();
@@ -115,7 +112,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
115
112
  default:
116
113
  }
117
114
  });
118
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
115
+ (0, _defineProperty2.default)(_this, "handleKeyDown", function (event) {
119
116
  //We shouldn't close PopupSelect on tab event if there are custom interactive element.
120
117
  var tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
121
118
  if (_this.props.shouldCloseMenuOnTab && tabEvent) {
@@ -135,7 +132,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
135
132
  _this.props.onKeyDown(event);
136
133
  }
137
134
  });
138
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (_ref) {
135
+ (0, _defineProperty2.default)(_this, "handleClick", function (_ref) {
139
136
  var target = _ref.target;
140
137
  var isOpen = _this.state.isOpen;
141
138
  // appease flow
@@ -156,7 +153,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
156
153
  _this.open();
157
154
  }
158
155
  });
159
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectChange", function (value, actionMeta) {
156
+ (0, _defineProperty2.default)(_this, "handleSelectChange", function (value, actionMeta) {
160
157
  var _this$props = _this.props,
161
158
  closeMenuOnSelect = _this$props.closeMenuOnSelect,
162
159
  onChange = _this$props.onChange;
@@ -167,7 +164,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
167
164
  onChange(value, actionMeta);
168
165
  }
169
166
  });
170
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFirstPopperUpdate", function () {
167
+ (0, _defineProperty2.default)(_this, "handleFirstPopperUpdate", function () {
171
168
  // When the popup opens it's focused into. Since the popup is inside a portal, it's position is
172
169
  // initially set to 0,0 - this causes the window scroll position to jump to the top. To prevent
173
170
  // this we defer enabling the focus-lock until after Popper has positioned the popup the first time.
@@ -182,7 +179,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
182
179
  *
183
180
  * @param options.controlOverride - Force the popup to open when it's open state is being controlled
184
181
  */
185
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "open", function (options) {
182
+ (0, _defineProperty2.default)(_this, "open", function (options) {
186
183
  var _this$props2 = _this.props,
187
184
  onOpen = _this$props2.onOpen,
188
185
  onMenuOpen = _this$props2.onMenuOpen;
@@ -220,7 +217,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
220
217
  *
221
218
  * @param options.controlOverride - Force the popup to close when it's open state is being controlled
222
219
  */
223
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (options) {
220
+ (0, _defineProperty2.default)(_this, "close", function (options) {
224
221
  var _this$unbindWindowKey, _this2;
225
222
  //@ts-ignore react-select unsupported props
226
223
  var _this$props3 = _this.props,
@@ -253,7 +250,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
253
250
  });
254
251
  // Refs
255
252
  // ==============================
256
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveTargetRef", function (popperRef) {
253
+ (0, _defineProperty2.default)(_this, "resolveTargetRef", function (popperRef) {
257
254
  return function (ref) {
258
255
  // avoid thrashing fn calls
259
256
  if (!_this.targetRef && popperRef && ref) {
@@ -266,7 +263,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
266
263
  }
267
264
  };
268
265
  });
269
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveMenuRef", function (popperRef) {
266
+ (0, _defineProperty2.default)(_this, "resolveMenuRef", function (popperRef) {
270
267
  return function (ref) {
271
268
  _this.menuRef = ref;
272
269
  if (typeof popperRef === 'function') {
@@ -276,14 +273,14 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
276
273
  }
277
274
  };
278
275
  });
279
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSelectRef", function (ref) {
276
+ (0, _defineProperty2.default)(_this, "getSelectRef", function (ref) {
280
277
  _this.selectRef = ref;
281
278
  });
282
279
  // Utils
283
280
  // ==============================
284
281
  // account for groups when counting options
285
282
  // this may need to be recursive, right now it just counts one level
286
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getItemCount", function () {
283
+ (0, _defineProperty2.default)(_this, "getItemCount", function () {
287
284
  var options = _this.props.options;
288
285
  var count = 0;
289
286
  options.forEach(function (groupOrOption) {
@@ -297,7 +294,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
297
294
  });
298
295
  return count;
299
296
  });
300
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getMaxHeight", function () {
297
+ (0, _defineProperty2.default)(_this, "getMaxHeight", function () {
301
298
  var _this$selectRef$selec2;
302
299
  var maxMenuHeight = _this.props.maxMenuHeight;
303
300
  if (!_this.selectRef) {
@@ -312,7 +309,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
312
309
  return maxHeight;
313
310
  });
314
311
  // if the threshold is exceeded, AND isSearchable is true, then display the search control
315
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showSearchControl", function () {
312
+ (0, _defineProperty2.default)(_this, "showSearchControl", function () {
316
313
  var _this$props4 = _this.props,
317
314
  searchThreshold = _this$props4.searchThreshold,
318
315
  isSearchable = _this$props4.isSearchable;
@@ -320,7 +317,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
320
317
  });
321
318
  // Renderers
322
319
  // ==============================
323
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSelect", function (id) {
320
+ (0, _defineProperty2.default)(_this, "renderSelect", function (id) {
324
321
  var _this$props5 = _this.props,
325
322
  footer = _this$props5.footer,
326
323
  label = _this$props5.label,
@@ -373,7 +370,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
373
370
  return option === focused;
374
371
  })) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
375
372
  var optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
376
- var ariaLabelText = "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
373
+ var ariaLabelText = (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? "".concat(optionName) : "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
377
374
  // Option LABEL focused, 1 of 8. 8 results available.
378
375
  // Use Up and Down to choose options, press Enter to select the currently focused option,
379
376
  // press Escape to exit the menu.
@@ -381,7 +378,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
381
378
  };
382
379
  var onReactSelectFocus = function onReactSelectFocus(onFocusProps) {
383
380
  var _props$options;
384
- var ariaLabelSuffix = ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
381
+ var ariaLabelSuffix = (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? '' : ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
385
382
  var ariaLabelText = '';
386
383
  var ariaLiveMessage = '';
387
384
  if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
@@ -445,17 +442,18 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
445
442
  maxMenuHeight: _this.getMaxHeight(),
446
443
  components: selectComponents,
447
444
  onChange: _this.handleSelectChange,
448
- ariaLiveMessages: !showSearchControl ? _objectSpread({
445
+ ariaLiveMessages: _objectSpread({
449
446
  // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
450
447
  onFocus: onReactSelectFocus
451
- }, props.ariaLiveMessages) : props.ariaLiveMessages
448
+ }, props.ariaLiveMessages)
452
449
  })), footer));
453
450
  });
454
451
  return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/(0, _reactDom.createPortal)(popper, portalDestination);
455
452
  });
456
453
  return _this;
457
454
  }
458
- (0, _createClass2.default)(PopupSelect, [{
455
+ (0, _inherits2.default)(PopupSelect, _PureComponent);
456
+ return (0, _createClass2.default)(PopupSelect, [{
459
457
  key: "componentDidMount",
460
458
  value: function componentDidMount() {
461
459
  if (typeof window === 'undefined') {
@@ -542,7 +540,6 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
542
540
  return null;
543
541
  }
544
542
  }]);
545
- return PopupSelect;
546
543
  }(_react.PureComponent);
547
544
  (0, _defineProperty2.default)(PopupSelect, "defaultProps", {
548
545
  closeMenuOnSelect: true,
package/dist/cjs/Select.js CHANGED
@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
11
11
  /* eslint-disable @repo/internal/react/require-jsdoc */
12
12
 
13
13
  var packageName = "@atlaskit/select";
14
- var packageVersion = "18.8.1";
14
+ var packageVersion = "18.8.2";
15
15
  var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
16
16
  var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
17
17
  var Select = (0, _analyticsNext.withAnalyticsContext)({
package/dist/cjs/components/input-options.js CHANGED
@@ -10,10 +10,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
11
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
12
12
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
14
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
15
13
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
16
14
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
15
+ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
17
16
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
18
17
  var _react = require("react");
19
18
  var _react2 = require("@emotion/react");
@@ -24,7 +23,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
24
23
  var _colors = require("@atlaskit/theme/colors");
25
24
  var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
26
25
  var _excluded = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
27
- function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
26
+ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
28
27
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
29
28
  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; }
30
29
  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; } /**
@@ -151,36 +150,35 @@ var baseOptionStyles = (0, _react2.css)({
151
150
  });
152
151
  // eslint-disable-next-line @repo/internal/react/no-class-components
153
152
  var ControlOption = /*#__PURE__*/function (_Component) {
154
- (0, _inherits2.default)(ControlOption, _Component);
155
- var _super = _createSuper(ControlOption);
156
153
  function ControlOption() {
157
154
  var _this;
158
155
  (0, _classCallCheck2.default)(this, ControlOption);
159
156
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
160
157
  args[_key] = arguments[_key];
161
158
  }
162
- _this = _super.call.apply(_super, [this].concat(args));
163
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
159
+ _this = _callSuper(this, ControlOption, [].concat(args));
160
+ (0, _defineProperty2.default)(_this, "state", {
164
161
  isActive: false
165
162
  });
166
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDown", function () {
163
+ (0, _defineProperty2.default)(_this, "onMouseDown", function () {
167
164
  return _this.setState({
168
165
  isActive: true
169
166
  });
170
167
  });
171
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseUp", function () {
168
+ (0, _defineProperty2.default)(_this, "onMouseUp", function () {
172
169
  return _this.setState({
173
170
  isActive: false
174
171
  });
175
172
  });
176
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
173
+ (0, _defineProperty2.default)(_this, "onMouseLeave", function () {
177
174
  return _this.setState({
178
175
  isActive: false
179
176
  });
180
177
  });
181
178
  return _this;
182
179
  }
183
- (0, _createClass2.default)(ControlOption, [{
180
+ (0, _inherits2.default)(ControlOption, _Component);
181
+ return (0, _createClass2.default)(ControlOption, [{
184
182
  key: "render",
185
183
  value: function render() {
186
184
  var _this$props = this.props,
@@ -246,7 +244,6 @@ var ControlOption = /*#__PURE__*/function (_Component) {
246
244
  );
247
245
  }
248
246
  }]);
249
- return ControlOption;
250
247
  }(_react.Component);
251
248
  var NewCheckboxIcon = function NewCheckboxIcon(props) {
252
249
  return (
package/dist/cjs/createSelect.js CHANGED
@@ -86,7 +86,8 @@ function createSelect(WrappedComponent) {
86
86
  "aria-live": (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'assertive',
87
87
  ariaLiveMessages:
88
88
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
89
- (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : (0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options) ? _objectSpread({
89
+ //TO DO: Still need live region for PopupSelect because of the menu being open by default
90
+ (0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options) ? _objectSpread({
90
91
  onFocus: function onFocus(data) {
91
92
  return (0, _groupedOptionsAnnouncement.onFocus)(data, props.options);
92
93
  }
package/dist/cjs/utils/grouped-options-announcement.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.isOptionsGrouped = exports.countAllOptions = void 0;
7
7
  exports.onFocus = onFocus;
8
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
9
  // Used for overwriting ariaLiveMessages builtin onFocus method.
9
10
  // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
10
11
  function onFocus(onFocusProps, defaultOptions) {
@@ -18,6 +19,9 @@ function onFocus(onFocusProps, defaultOptions) {
18
19
  return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
19
20
  });
20
21
  var groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
22
+ if (focused.label && groupData !== null && groupData !== void 0 && groupData.label && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
23
+ return "".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label);
24
+ }
21
25
  return "Option ".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " group, item ").concat(groupOptionIndex + 1, " out of ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.options.length, ". All in all ");
22
26
  }
23
27
 
package/dist/es2019/PopupSelect/PopupSelect.js CHANGED
@@ -348,7 +348,7 @@ export default class PopupSelect extends PureComponent {
348
348
  const totalLength = options === null || options === void 0 ? void 0 : options.length;
349
349
  const optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(option => option === focused)) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
350
350
  const optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
351
- const ariaLabelText = `Option ${optionName} focused, ${optionIndex + 1} of ${totalLength}.
351
+ const ariaLabelText = fg('design_system_select-a11y-improvement') ? `${optionName}` : `Option ${optionName} focused, ${optionIndex + 1} of ${totalLength}.
352
352
  ${totalLength} results available.
353
353
  ${ariaLabelSuffix}
354
354
  `;
@@ -359,7 +359,7 @@ export default class PopupSelect extends PureComponent {
359
359
  };
360
360
  const onReactSelectFocus = onFocusProps => {
361
361
  var _props$options;
362
- const ariaLabelSuffix = ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
362
+ const ariaLabelSuffix = fg('design_system_select-a11y-improvement') ? '' : ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
363
363
  let ariaLabelText = '';
364
364
  let ariaLiveMessage = '';
365
365
  if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
@@ -423,11 +423,11 @@ export default class PopupSelect extends PureComponent {
423
423
  maxMenuHeight: this.getMaxHeight(),
424
424
  components: selectComponents,
425
425
  onChange: this.handleSelectChange,
426
- ariaLiveMessages: !showSearchControl ? {
426
+ ariaLiveMessages: {
427
427
  // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
428
428
  onFocus: onReactSelectFocus,
429
429
  ...props.ariaLiveMessages // priority to use user handlers if provided
430
- } : props.ariaLiveMessages
430
+ }
431
431
  })), footer)));
432
432
  return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/createPortal(popper, portalDestination);
433
433
  });
package/dist/es2019/Select.js CHANGED
@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
3
3
  import AsyncSelect from '@atlaskit/react-select/async';
4
4
  import createSelect from './createSelect';
5
5
  const packageName = "@atlaskit/select";
6
- const packageVersion = "18.8.1";
6
+ const packageVersion = "18.8.2";
7
7
  export const SelectWithoutAnalytics = createSelect(AsyncSelect);
8
8
  const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
9
9
  const Select = withAnalyticsContext({
package/dist/es2019/createSelect.js CHANGED
@@ -68,7 +68,8 @@ export default function createSelect(WrappedComponent) {
68
68
  "aria-live": fg('design_system_select-a11y-improvement') ? undefined : 'assertive',
69
69
  ariaLiveMessages:
70
70
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
71
- fg('design_system_select-a11y-improvement') ? undefined : isOptionsGrouped(props.options) ? {
71
+ //TO DO: Still need live region for PopupSelect because of the menu being open by default
72
+ isOptionsGrouped(props.options) ? {
72
73
  onFocus: data => onFocus(data, props.options),
73
74
  ...ariaLiveMessages
74
75
  } : {
package/dist/es2019/utils/grouped-options-announcement.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { fg } from '@atlaskit/platform-feature-flags';
1
2
  // Used for overwriting ariaLiveMessages builtin onFocus method.
2
3
  // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
3
4
  export function onFocus(onFocusProps, defaultOptions) {
@@ -13,6 +14,9 @@ export function onFocus(onFocusProps, defaultOptions) {
13
14
  return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
14
15
  });
15
16
  const groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
17
+ if (focused.label && groupData !== null && groupData !== void 0 && groupData.label && fg('design_system_select-a11y-improvement')) {
18
+ return `${focused.label}, ${groupData === null || groupData === void 0 ? void 0 : groupData.label}`;
19
+ }
16
20
  return `Option ${focused.label}, ${groupData === null || groupData === void 0 ? void 0 : groupData.label} group, item ${groupOptionIndex + 1} out of ${groupData === null || groupData === void 0 ? void 0 : groupData.options.length}. All in all `;
17
21
  }
18
22
 
package/dist/esm/PopupSelect/PopupSelect.js CHANGED
@@ -2,15 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
4
4
  import _createClass from "@babel/runtime/helpers/createClass";
5
- import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
6
- import _inherits from "@babel/runtime/helpers/inherits";
7
5
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
8
6
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
7
+ import _inherits from "@babel/runtime/helpers/inherits";
9
8
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
10
9
  var _excluded = ["footer", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId", "onMenuOpen", "onMenuClose"];
11
10
  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; }
12
11
  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; }
13
- function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
12
+ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
14
13
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
15
14
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
16
15
  import React, { PureComponent } from 'react';
@@ -66,8 +65,6 @@ var isEmpty = function isEmpty(obj) {
66
65
 
67
66
  // eslint-disable-next-line @repo/internal/react/no-class-components
68
67
  var PopupSelect = /*#__PURE__*/function (_PureComponent) {
69
- _inherits(PopupSelect, _PureComponent);
70
- var _super = _createSuper(PopupSelect);
71
68
  function PopupSelect() {
72
69
  var _this$defaultOpenStat;
73
70
  var _this;
@@ -75,22 +72,22 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
75
72
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
76
73
  args[_key] = arguments[_key];
77
74
  }
78
- _this = _super.call.apply(_super, [this].concat(args));
79
- _defineProperty(_assertThisInitialized(_this), "menuRef", null);
80
- _defineProperty(_assertThisInitialized(_this), "selectRef", null);
81
- _defineProperty(_assertThisInitialized(_this), "targetRef", null);
82
- _defineProperty(_assertThisInitialized(_this), "unbindWindowClick", null);
83
- _defineProperty(_assertThisInitialized(_this), "unbindWindowKeydown", null);
84
- _defineProperty(_assertThisInitialized(_this), "defaultStyles", {
75
+ _this = _callSuper(this, PopupSelect, [].concat(args));
76
+ _defineProperty(_this, "menuRef", null);
77
+ _defineProperty(_this, "selectRef", null);
78
+ _defineProperty(_this, "targetRef", null);
79
+ _defineProperty(_this, "unbindWindowClick", null);
80
+ _defineProperty(_this, "unbindWindowKeydown", null);
81
+ _defineProperty(_this, "defaultStyles", {
85
82
  groupHeading: function groupHeading(provided) {
86
83
  return _objectSpread(_objectSpread({}, provided), {}, {
87
84
  color: "var(--ds-text-subtlest, ".concat(N80, ")")
88
85
  });
89
86
  }
90
87
  });
91
- _defineProperty(_assertThisInitialized(_this), "isOpenControlled", _this.props.isOpen !== undefined);
92
- _defineProperty(_assertThisInitialized(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
93
- _defineProperty(_assertThisInitialized(_this), "state", {
88
+ _defineProperty(_this, "isOpenControlled", _this.props.isOpen !== undefined);
89
+ _defineProperty(_this, "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
90
+ _defineProperty(_this, "state", {
94
91
  focusLockEnabled: false,
95
92
  isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
96
93
  mergedComponents: defaultComponents,
@@ -98,7 +95,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
98
95
  });
99
96
  // Event Handlers
100
97
  // ==============================
101
- _defineProperty(_assertThisInitialized(_this), "handleTargetKeyDown", function (event) {
98
+ _defineProperty(_this, "handleTargetKeyDown", function (event) {
102
99
  switch (event.key) {
103
100
  case 'ArrowDown':
104
101
  _this.open();
@@ -106,7 +103,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
106
103
  default:
107
104
  }
108
105
  });
109
- _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
106
+ _defineProperty(_this, "handleKeyDown", function (event) {
110
107
  //We shouldn't close PopupSelect on tab event if there are custom interactive element.
111
108
  var tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
112
109
  if (_this.props.shouldCloseMenuOnTab && tabEvent) {
@@ -126,7 +123,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
126
123
  _this.props.onKeyDown(event);
127
124
  }
128
125
  });
129
- _defineProperty(_assertThisInitialized(_this), "handleClick", function (_ref) {
126
+ _defineProperty(_this, "handleClick", function (_ref) {
130
127
  var target = _ref.target;
131
128
  var isOpen = _this.state.isOpen;
132
129
  // appease flow
@@ -147,7 +144,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
147
144
  _this.open();
148
145
  }
149
146
  });
150
- _defineProperty(_assertThisInitialized(_this), "handleSelectChange", function (value, actionMeta) {
147
+ _defineProperty(_this, "handleSelectChange", function (value, actionMeta) {
151
148
  var _this$props = _this.props,
152
149
  closeMenuOnSelect = _this$props.closeMenuOnSelect,
153
150
  onChange = _this$props.onChange;
@@ -158,7 +155,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
158
155
  onChange(value, actionMeta);
159
156
  }
160
157
  });
161
- _defineProperty(_assertThisInitialized(_this), "handleFirstPopperUpdate", function () {
158
+ _defineProperty(_this, "handleFirstPopperUpdate", function () {
162
159
  // When the popup opens it's focused into. Since the popup is inside a portal, it's position is
163
160
  // initially set to 0,0 - this causes the window scroll position to jump to the top. To prevent
164
161
  // this we defer enabling the focus-lock until after Popper has positioned the popup the first time.
@@ -173,7 +170,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
173
170
  *
174
171
  * @param options.controlOverride - Force the popup to open when it's open state is being controlled
175
172
  */
176
- _defineProperty(_assertThisInitialized(_this), "open", function (options) {
173
+ _defineProperty(_this, "open", function (options) {
177
174
  var _this$props2 = _this.props,
178
175
  onOpen = _this$props2.onOpen,
179
176
  onMenuOpen = _this$props2.onMenuOpen;
@@ -211,7 +208,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
211
208
  *
212
209
  * @param options.controlOverride - Force the popup to close when it's open state is being controlled
213
210
  */
214
- _defineProperty(_assertThisInitialized(_this), "close", function (options) {
211
+ _defineProperty(_this, "close", function (options) {
215
212
  var _this$unbindWindowKey, _this2;
216
213
  //@ts-ignore react-select unsupported props
217
214
  var _this$props3 = _this.props,
@@ -244,7 +241,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
244
241
  });
245
242
  // Refs
246
243
  // ==============================
247
- _defineProperty(_assertThisInitialized(_this), "resolveTargetRef", function (popperRef) {
244
+ _defineProperty(_this, "resolveTargetRef", function (popperRef) {
248
245
  return function (ref) {
249
246
  // avoid thrashing fn calls
250
247
  if (!_this.targetRef && popperRef && ref) {
@@ -257,7 +254,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
257
254
  }
258
255
  };
259
256
  });
260
- _defineProperty(_assertThisInitialized(_this), "resolveMenuRef", function (popperRef) {
257
+ _defineProperty(_this, "resolveMenuRef", function (popperRef) {
261
258
  return function (ref) {
262
259
  _this.menuRef = ref;
263
260
  if (typeof popperRef === 'function') {
@@ -267,14 +264,14 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
267
264
  }
268
265
  };
269
266
  });
270
- _defineProperty(_assertThisInitialized(_this), "getSelectRef", function (ref) {
267
+ _defineProperty(_this, "getSelectRef", function (ref) {
271
268
  _this.selectRef = ref;
272
269
  });
273
270
  // Utils
274
271
  // ==============================
275
272
  // account for groups when counting options
276
273
  // this may need to be recursive, right now it just counts one level
277
- _defineProperty(_assertThisInitialized(_this), "getItemCount", function () {
274
+ _defineProperty(_this, "getItemCount", function () {
278
275
  var options = _this.props.options;
279
276
  var count = 0;
280
277
  options.forEach(function (groupOrOption) {
@@ -288,7 +285,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
288
285
  });
289
286
  return count;
290
287
  });
291
- _defineProperty(_assertThisInitialized(_this), "getMaxHeight", function () {
288
+ _defineProperty(_this, "getMaxHeight", function () {
292
289
  var _this$selectRef$selec2;
293
290
  var maxMenuHeight = _this.props.maxMenuHeight;
294
291
  if (!_this.selectRef) {
@@ -303,7 +300,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
303
300
  return maxHeight;
304
301
  });
305
302
  // if the threshold is exceeded, AND isSearchable is true, then display the search control
306
- _defineProperty(_assertThisInitialized(_this), "showSearchControl", function () {
303
+ _defineProperty(_this, "showSearchControl", function () {
307
304
  var _this$props4 = _this.props,
308
305
  searchThreshold = _this$props4.searchThreshold,
309
306
  isSearchable = _this$props4.isSearchable;
@@ -311,7 +308,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
311
308
  });
312
309
  // Renderers
313
310
  // ==============================
314
- _defineProperty(_assertThisInitialized(_this), "renderSelect", function (id) {
311
+ _defineProperty(_this, "renderSelect", function (id) {
315
312
  var _this$props5 = _this.props,
316
313
  footer = _this$props5.footer,
317
314
  label = _this$props5.label,
@@ -364,7 +361,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
364
361
  return option === focused;
365
362
  })) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
366
363
  var optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
367
- var ariaLabelText = "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
364
+ var ariaLabelText = fg('design_system_select-a11y-improvement') ? "".concat(optionName) : "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
368
365
  // Option LABEL focused, 1 of 8. 8 results available.
369
366
  // Use Up and Down to choose options, press Enter to select the currently focused option,
370
367
  // press Escape to exit the menu.
@@ -372,7 +369,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
372
369
  };
373
370
  var onReactSelectFocus = function onReactSelectFocus(onFocusProps) {
374
371
  var _props$options;
375
- var ariaLabelSuffix = ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
372
+ var ariaLabelSuffix = fg('design_system_select-a11y-improvement') ? '' : ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
376
373
  var ariaLabelText = '';
377
374
  var ariaLiveMessage = '';
378
375
  if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
@@ -436,17 +433,18 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
436
433
  maxMenuHeight: _this.getMaxHeight(),
437
434
  components: selectComponents,
438
435
  onChange: _this.handleSelectChange,
439
- ariaLiveMessages: !showSearchControl ? _objectSpread({
436
+ ariaLiveMessages: _objectSpread({
440
437
  // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
441
438
  onFocus: onReactSelectFocus
442
- }, props.ariaLiveMessages) : props.ariaLiveMessages
439
+ }, props.ariaLiveMessages)
443
440
  })), footer));
444
441
  });
445
442
  return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/createPortal(popper, portalDestination);
446
443
  });
447
444
  return _this;
448
445
  }
449
- _createClass(PopupSelect, [{
446
+ _inherits(PopupSelect, _PureComponent);
447
+ return _createClass(PopupSelect, [{
450
448
  key: "componentDidMount",
451
449
  value: function componentDidMount() {
452
450
  if (typeof window === 'undefined') {
@@ -533,7 +531,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
533
531
  return null;
534
532
  }
535
533
  }]);
536
- return PopupSelect;
537
534
  }(PureComponent);
538
535
  _defineProperty(PopupSelect, "defaultProps", {
539
536
  closeMenuOnSelect: true,
package/dist/esm/Select.js CHANGED
@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
3
3
  import AsyncSelect from '@atlaskit/react-select/async';
4
4
  import createSelect from './createSelect';
5
5
  var packageName = "@atlaskit/select";
6
- var packageVersion = "18.8.1";
6
+ var packageVersion = "18.8.2";
7
7
  export var SelectWithoutAnalytics = createSelect(AsyncSelect);
8
8
  var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
9
9
  var Select = withAnalyticsContext({
package/dist/esm/components/input-options.js CHANGED
@@ -3,13 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
4
  import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
5
5
  import _createClass from "@babel/runtime/helpers/createClass";
6
- import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
7
- import _inherits from "@babel/runtime/helpers/inherits";
8
6
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
9
7
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
8
+ import _inherits from "@babel/runtime/helpers/inherits";
10
9
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
11
10
  var _excluded = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
12
- function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
11
+ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
13
12
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
14
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; }
15
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) { _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; }
@@ -146,36 +145,35 @@ var baseOptionStyles = css({
146
145
  });
147
146
  // eslint-disable-next-line @repo/internal/react/no-class-components
148
147
  var ControlOption = /*#__PURE__*/function (_Component) {
149
- _inherits(ControlOption, _Component);
150
- var _super = _createSuper(ControlOption);
151
148
  function ControlOption() {
152
149
  var _this;
153
150
  _classCallCheck(this, ControlOption);
154
151
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
155
152
  args[_key] = arguments[_key];
156
153
  }
157
- _this = _super.call.apply(_super, [this].concat(args));
158
- _defineProperty(_assertThisInitialized(_this), "state", {
154
+ _this = _callSuper(this, ControlOption, [].concat(args));
155
+ _defineProperty(_this, "state", {
159
156
  isActive: false
160
157
  });
161
- _defineProperty(_assertThisInitialized(_this), "onMouseDown", function () {
158
+ _defineProperty(_this, "onMouseDown", function () {
162
159
  return _this.setState({
163
160
  isActive: true
164
161
  });
165
162
  });
166
- _defineProperty(_assertThisInitialized(_this), "onMouseUp", function () {
163
+ _defineProperty(_this, "onMouseUp", function () {
167
164
  return _this.setState({
168
165
  isActive: false
169
166
  });
170
167
  });
171
- _defineProperty(_assertThisInitialized(_this), "onMouseLeave", function () {
168
+ _defineProperty(_this, "onMouseLeave", function () {
172
169
  return _this.setState({
173
170
  isActive: false
174
171
  });
175
172
  });
176
173
  return _this;
177
174
  }
178
- _createClass(ControlOption, [{
175
+ _inherits(ControlOption, _Component);
176
+ return _createClass(ControlOption, [{
179
177
  key: "render",
180
178
  value: function render() {
181
179
  var _this$props = this.props,
@@ -241,7 +239,6 @@ var ControlOption = /*#__PURE__*/function (_Component) {
241
239
  );
242
240
  }
243
241
  }]);
244
- return ControlOption;
245
242
  }(Component);
246
243
  var NewCheckboxIcon = function NewCheckboxIcon(props) {
247
244
  return (
package/dist/esm/createSelect.js CHANGED
@@ -76,7 +76,8 @@ export default function createSelect(WrappedComponent) {
76
76
  "aria-live": fg('design_system_select-a11y-improvement') ? undefined : 'assertive',
77
77
  ariaLiveMessages:
78
78
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
79
- fg('design_system_select-a11y-improvement') ? undefined : isOptionsGrouped(props.options) ? _objectSpread({
79
+ //TO DO: Still need live region for PopupSelect because of the menu being open by default
80
+ isOptionsGrouped(props.options) ? _objectSpread({
80
81
  onFocus: function onFocus(data) {
81
82
  return _onFocus(data, props.options);
82
83
  }
package/dist/esm/utils/grouped-options-announcement.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { fg } from '@atlaskit/platform-feature-flags';
1
2
  // Used for overwriting ariaLiveMessages builtin onFocus method.
2
3
  // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
3
4
  export function onFocus(onFocusProps, defaultOptions) {
@@ -11,6 +12,9 @@ export function onFocus(onFocusProps, defaultOptions) {
11
12
  return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
12
13
  });
13
14
  var groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
15
+ if (focused.label && groupData !== null && groupData !== void 0 && groupData.label && fg('design_system_select-a11y-improvement')) {
16
+ return "".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label);
17
+ }
14
18
  return "Option ".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " group, item ").concat(groupOptionIndex + 1, " out of ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.options.length, ". All in all ");
15
19
  }
16
20
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "18.8.1",
3
+ "version": "18.8.2",
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/"
@@ -37,10 +37,11 @@
37
37
  "./Select": "./src/entry-points/select.tsx",
38
38
  "./AsyncCreatableSelect": "./src/entry-points/async-creatable-select.tsx",
39
39
  "./CreatableSelect": "./src/entry-points/creatable-select.tsx",
40
+ "./types": "./src/types.tsx",
40
41
  ".": "./src/index.tsx"
41
42
  },
42
43
  "dependencies": {
43
- "@atlaskit/analytics-next": "^10.1.0",
44
+ "@atlaskit/analytics-next": "^10.2.0",
44
45
  "@atlaskit/ds-lib": "^3.3.0",
45
46
  "@atlaskit/icon": "^23.1.0",
46
47
  "@atlaskit/platform-feature-flags": "^0.3.0",
@@ -69,7 +70,7 @@
69
70
  "@af/visual-regression": "*",
70
71
  "@atlaskit/checkbox": "^15.2.0",
71
72
  "@atlaskit/modal-dialog": "^12.18.0",
72
- "@atlaskit/radio": "^6.6.0",
73
+ "@atlaskit/radio": "^7.0.0",
73
74
  "@atlaskit/ssr": "*",
74
75
  "@atlaskit/visual-regression": "*",
75
76
  "@atlassian/feature-flags-test-utils": "*",
package/types/package.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "name": "@atlaskit/select/types",
3
+ "main": "../dist/cjs/types.js",
4
+ "module": "../dist/esm/types.js",
5
+ "module:es2019": "../dist/es2019/types.js",
6
+ "sideEffects": [
7
+ "**/*.compiled.css"
8
+ ],
9
+ "types": "../dist/types/types.d.ts",
10
+ "typesVersions": {
11
+ ">=4.5 <5.4": {
12
+ "*": [
13
+ "../dist/types-ts4.5/types.d.ts"
14
+ ]
15
+ }
16
+ }
17
+ }