@atlaskit/select 20.6.1 → 20.7.0

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 +19 -0
  2. package/dist/cjs/CheckboxSelect.js +1 -2
  3. package/dist/cjs/CountrySelect.js +4 -17
  4. package/dist/cjs/PopupSelect/PopupSelect.js +3 -66
  5. package/dist/cjs/PopupSelect/components.js +1 -2
  6. package/dist/cjs/RadioSelect.js +1 -2
  7. package/dist/cjs/Select.js +1 -1
  8. package/dist/cjs/components/input-options.js +1 -2
  9. package/dist/cjs/createSelect.js +2 -15
  10. package/dist/cjs/entry-points/select.js +1 -2
  11. package/dist/cjs/index.js +1 -15
  12. package/dist/cjs/utils/grouped-options-announcement.js +6 -10
  13. package/dist/es2019/CountrySelect.js +1 -12
  14. package/dist/es2019/PopupSelect/PopupSelect.js +2 -68
  15. package/dist/es2019/Select.js +1 -1
  16. package/dist/es2019/createSelect.js +1 -11
  17. package/dist/es2019/index.js +0 -1
  18. package/dist/es2019/utils/grouped-options-announcement.js +3 -8
  19. package/dist/esm/CountrySelect.js +2 -15
  20. package/dist/esm/PopupSelect/PopupSelect.js +2 -64
  21. package/dist/esm/Select.js +1 -1
  22. package/dist/esm/createSelect.js +1 -13
  23. package/dist/esm/index.js +0 -1
  24. package/dist/esm/utils/grouped-options-announcement.js +3 -8
  25. package/dist/types/index.d.ts +0 -1
  26. package/dist/types/utils/grouped-options-announcement.d.ts +1 -1
  27. package/dist/types-ts4.5/index.d.ts +0 -1
  28. package/dist/types-ts4.5/utils/grouped-options-announcement.d.ts +1 -1
  29. package/package.json +6 -10
  30. package/dist/cjs/utils/country-groups-announcement.js +0 -29
  31. package/dist/es2019/utils/country-groups-announcement.js +0 -22
  32. package/dist/esm/utils/country-groups-announcement.js +0 -22
  33. package/dist/types/utils/country-groups-announcement.d.ts +0 -15
  34. package/dist/types-ts4.5/utils/country-groups-announcement.d.ts +0 -15
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/select
2
2
 
3
+ ## 20.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#155546](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/155546)
8
+ [`4133da7ce5d92`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4133da7ce5d92) -
9
+ This cleans up the feature flag references for assistive technology improvements, making them
10
+ fully available to all people.
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
16
+ ## 20.6.2
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies
21
+
3
22
  ## 20.6.1
4
23
 
5
24
  ### Patch Changes
@@ -13,8 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
13
13
  var _inputOptions = require("./components/input-options");
14
14
  var _Select = _interopRequireDefault(require("./Select"));
15
15
  var _excluded = ["components"];
16
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
- 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; }
16
+ 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); }
18
17
  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; }
19
18
  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; }
20
19
  var CheckboxSelectInternal = function CheckboxSelectInternal(_ref) {
@@ -11,15 +11,10 @@ require("./CountrySelect.compiled.css");
11
11
  var React = _interopRequireWildcard(require("react"));
12
12
  var _runtime = require("@compiled/react/runtime");
13
13
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
14
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
14
  var _countries = require("./data/countries");
17
15
  var _Select = _interopRequireDefault(require("./Select"));
18
- var _countryGroupsAnnouncement = require("./utils/country-groups-announcement");
19
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
- 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; }
21
- 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; }
22
- 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 @repo/internal/fs/filename-pattern-match */
16
+ 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); }
17
+ /* eslint-disable @repo/internal/fs/filename-pattern-match */
23
18
  // custom option renderer
24
19
  var labelStyles = null;
25
20
  var flagStyles = null;
@@ -76,8 +71,7 @@ var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
76
71
 
77
72
  // put it all together
78
73
  var CountrySelect = function CountrySelect(props) {
79
- var ariaLiveMessages = props.ariaLiveMessages,
80
- options = props.options;
74
+ var options = props.options;
81
75
  var countryOptions = options || _countries.groupedCountries;
82
76
  return /*#__PURE__*/React.createElement(_Select.default, (0, _extends2.default)({
83
77
  isClearable: false,
@@ -85,14 +79,7 @@ var CountrySelect = function CountrySelect(props) {
85
79
  getOptionLabel: getOptionLabel,
86
80
  getOptionValue: getOptionValue,
87
81
  isMulti: false,
88
- options: countryOptions,
89
- ariaLiveMessages:
90
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
91
- (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : (0, _countryGroupsAnnouncement.isCountryOptionsGrouped)(countryOptions) ? _objectSpread({
92
- onFocus: function onFocus(data) {
93
- return (0, _countryGroupsAnnouncement.onCountryOptionFocus)(data, countryOptions);
94
- }
95
- }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
82
+ options: countryOptions
96
83
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
97
84
  }, props));
98
85
  };
@@ -20,18 +20,14 @@ var _reactDom = require("react-dom");
20
20
  var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
21
21
  var _reactPopper = require("react-popper");
22
22
  var _shallowEqual = require("shallow-equal");
23
- var _deviceCheck = require("@atlaskit/ds-lib/device-check");
24
23
  var _useId = require("@atlaskit/ds-lib/use-id");
25
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
26
24
  var _reactSelect = require("@atlaskit/react-select");
27
25
  var _colors = require("@atlaskit/theme/colors");
28
26
  var _Select = _interopRequireDefault(require("../Select"));
29
- var _groupedOptionsAnnouncement = require("../utils/grouped-options-announcement");
30
27
  var _components = require("./components");
31
28
  var _notifyOpenLayerObserver = require("./notify-open-layer-observer");
32
29
  var _excluded = ["footer", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId", "onMenuOpen", "onMenuClose"];
33
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
34
- 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; }
30
+ 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); }
35
31
  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; }
36
32
  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; }
37
33
  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)); }
@@ -349,57 +345,6 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
349
345
  return placeholder;
350
346
  }
351
347
  };
352
- var providedAriaLabel = getLabel();
353
- var updateInputAriaLabel = function updateInputAriaLabel(ariaLabelText) {
354
- var _this$selectRef;
355
- // Update aria-label to get first announcement when popup opened.
356
- if ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef) {
357
- var _this$selectRef2;
358
- if (providedAriaLabel) {
359
- // I might want to use a comma instead of a period here, when the feature flag is removed.
360
- ariaLabelText = "".concat(providedAriaLabel, ". ").concat(ariaLabelText);
361
- }
362
- (_this$selectRef2 = _this.selectRef) === null || _this$selectRef2 === void 0 || (_this$selectRef2 = _this$selectRef2.select.inputRef) === null || _this$selectRef2 === void 0 || _this$selectRef2.setAttribute('aria-label', ariaLabelText);
363
- }
364
- };
365
- var generateNoGroupsAriaText = function generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix) {
366
- var _options$findIndex;
367
- var focused = onFocusProps.focused;
368
- var options = (props === null || props === void 0 ? void 0 : props.options) || [];
369
- var totalLength = options === null || options === void 0 ? void 0 : options.length;
370
- var optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(function (option) {
371
- return option === focused;
372
- })) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
373
- var optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
374
- var ariaLabelText = (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? "".concat(optionName, ", (").concat(optionIndex + 1, " of ").concat(totalLength, ")") : "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");
375
- // Option LABEL focused, 1 of 8. 8 results available.
376
- // Use Up and Down to choose options, press Enter to select the currently focused option,
377
- // press Escape to exit the menu.
378
- return ariaLabelText;
379
- };
380
- var onReactSelectFocus = function onReactSelectFocus(onFocusProps) {
381
- var _props$options;
382
- 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.';
383
- var ariaLabelText = '';
384
- var ariaLiveMessage = '';
385
- if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
386
- if ((0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options)) {
387
- var totalLength = (0, _groupedOptionsAnnouncement.countAllOptions)(props.options);
388
- ariaLiveMessage = (0, _groupedOptionsAnnouncement.onFocus)(onFocusProps, props.options);
389
- ariaLabelText = "".concat(ariaLiveMessage, " ").concat(totalLength, " results available. ").concat(ariaLabelSuffix);
390
- } else {
391
- ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
392
- ariaLiveMessage = ariaLabelText;
393
- }
394
- // Safari still does not announce the first option when menu is opened, so forcing a change to the input label
395
- // will include the first option in the initial announcement.
396
- if (!(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || (0, _deviceCheck.isSafari)() && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
397
- updateInputAriaLabel(ariaLabelText);
398
- }
399
- return ariaLiveMessage;
400
- }
401
- return ariaLiveMessage;
402
- };
403
348
  var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, {
404
349
  onFirstUpdate: function onFirstUpdate(state) {
405
350
  var _mergedPopperProps$on;
@@ -426,11 +371,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
426
371
  disabled: !focusLockEnabled,
427
372
  returnFocus: true
428
373
  }, /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({
429
- label: providedAriaLabel
430
- // TODO: Popup Select does not work well with active-descendant
431
- ,
432
- "aria-live": (0, _deviceCheck.isAppleDevice)() && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? 'assertive' // only needed on Apple products
433
- : undefined,
374
+ label: getLabel(),
434
375
  backspaceRemovesValue: false,
435
376
  controlShouldRenderValue: false,
436
377
  isClearable: false,
@@ -444,11 +385,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
444
385
  maxMenuHeight: _this.getMaxHeight(),
445
386
  components: selectComponents,
446
387
  onChange: _this.handleSelectChange,
447
- testId: testId,
448
- ariaLiveMessages: _objectSpread({
449
- // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
450
- onFocus: onReactSelectFocus
451
- }, props.ariaLiveMessages)
388
+ testId: testId
452
389
  // Note: We are intentionally not using `onMenuClose={this.close}` here, due to state management conflicts
453
390
  // between PopupSelect's popup and the internal select menu. This can result in the PopupSelect closing
454
391
  // or opening unexpectedly.
@@ -20,8 +20,7 @@ var _colors = require("@atlaskit/theme/colors");
20
20
  var _constants = require("@atlaskit/theme/constants");
21
21
  var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
22
22
  var _excluded = ["innerRef", "innerProps"];
23
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
24
- 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; }
23
+ 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); }
25
24
  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; }
26
25
  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; }
27
26
  // ==============================
@@ -13,8 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
13
13
  var _Select = _interopRequireDefault(require("./Select"));
14
14
  var _inputOptions = require("./components/input-options");
15
15
  var _excluded = ["components"];
16
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
- 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; }
16
+ 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); }
18
17
  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; }
19
18
  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; }
20
19
  var RadioSelect = /*#__PURE__*/_react.default.memo(function (_ref) {
@@ -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 = "20.6.1";
14
+ var packageVersion = "20.7.0";
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)({
@@ -17,8 +17,7 @@ var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"))
17
17
  var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
18
18
  var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
19
19
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
20
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
21
- 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; }
20
+ 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); }
22
21
  var optionStyles = {
23
22
  default: "_1e0c1txw _4cvr1h6o _1bsb1osq _uiztglyw _18ql1j7p _vchhusvi _85i51b66 _1q511b66 _bozgpxbi _y4tiutpp _bfhk1j28 _16qs1kw7 _syaz1kw7 _1di61dty",
24
23
  focused: "_bfhk166n _16qsn8hf _112e1vrj",
@@ -7,18 +7,12 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = createSelect;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
11
  var _react = _interopRequireWildcard(require("react"));
13
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
- var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
15
12
  var _excluded = ["ariaLiveMessages", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"];
16
13
  /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
17
14
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
18
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
- 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; }
20
- 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; }
21
- 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; }
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); }
22
16
  function createSelect(WrappedComponent) {
23
17
  var AtlaskitSelect = /*#__PURE__*/(0, _react.forwardRef)(function AtlaskitSelect(props, forwardedRef) {
24
18
  var ariaLiveMessages = props.ariaLiveMessages,
@@ -54,14 +48,7 @@ function createSelect(WrappedComponent) {
54
48
  }, []);
55
49
  return /*#__PURE__*/_react.default.createElement(WrappedComponent, (0, _extends2.default)({
56
50
  ref: internalSelectRef,
57
- "aria-live": (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'assertive',
58
- ariaLiveMessages:
59
- //TO DO: Still need live region for PopupSelect because of the menu being open by default
60
- (0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options) ? _objectSpread({
61
- onFocus: function onFocus(data) {
62
- return (0, _groupedOptionsAnnouncement.onFocus)(data, props.options);
63
- }
64
- }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
51
+ ariaLiveMessages: ariaLiveMessages,
65
52
  tabSelectsValue: tabSelectsValue,
66
53
  onClickPreventDefault: onClickPreventDefault,
67
54
  isInvalid: isInvalid || validationState === 'error'
@@ -17,5 +17,4 @@ Object.defineProperty(exports, "default", {
17
17
  }
18
18
  });
19
19
  var _Select = _interopRequireWildcard(require("../Select"));
20
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
21
- 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; }
20
+ 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); }
package/dist/cjs/index.js CHANGED
@@ -83,12 +83,6 @@ Object.defineProperty(exports, "default", {
83
83
  return _select.default;
84
84
  }
85
85
  });
86
- Object.defineProperty(exports, "isCountryOptionsGrouped", {
87
- enumerable: true,
88
- get: function get() {
89
- return _countryGroupsAnnouncement.isCountryOptionsGrouped;
90
- }
91
- });
92
86
  Object.defineProperty(exports, "isOptionsGrouped", {
93
87
  enumerable: true,
94
88
  get: function get() {
@@ -101,12 +95,6 @@ Object.defineProperty(exports, "mergeStyles", {
101
95
  return _reactSelect.mergeStyles;
102
96
  }
103
97
  });
104
- Object.defineProperty(exports, "onCountryOptionFocus", {
105
- enumerable: true,
106
- get: function get() {
107
- return _countryGroupsAnnouncement.onCountryOptionFocus;
108
- }
109
- });
110
98
  Object.defineProperty(exports, "useAsync", {
111
99
  enumerable: true,
112
100
  get: function get() {
@@ -128,10 +116,8 @@ var _asyncSelect = _interopRequireDefault(require("./entry-points/async-select")
128
116
  var _creatableSelect = _interopRequireDefault(require("./entry-points/creatable-select"));
129
117
  var _asyncCreatableSelect = _interopRequireDefault(require("./entry-points/async-creatable-select"));
130
118
  var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
131
- var _countryGroupsAnnouncement = require("./utils/country-groups-announcement");
132
119
  var _CheckboxSelect = _interopRequireDefault(require("./CheckboxSelect"));
133
120
  var _CountrySelect = _interopRequireDefault(require("./CountrySelect"));
134
121
  var _RadioSelect = _interopRequireDefault(require("./RadioSelect"));
135
122
  var _PopupSelect = _interopRequireDefault(require("./PopupSelect"));
136
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
137
- 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; }
123
+ 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); }
@@ -3,12 +3,10 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.isOptionsGrouped = exports.countAllOptions = void 0;
7
- exports.onFocus = onFocus;
8
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
9
- // Used for overwriting ariaLiveMessages builtin onFocus method.
10
- // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
11
- function onFocus(onFocusProps, defaultOptions) {
6
+ exports.countAllOptions = void 0;
7
+ exports.generateGroupLabel = generateGroupLabel;
8
+ exports.isOptionsGrouped = void 0;
9
+ function generateGroupLabel(onFocusProps, defaultOptions) {
12
10
  var _groupData$options$fi;
13
11
  var focused = onFocusProps.focused;
14
12
  var isOptionFocused = function isOptionFocused(option) {
@@ -19,10 +17,8 @@ function onFocus(onFocusProps, defaultOptions) {
19
17
  return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
20
18
  });
21
19
  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
- }
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 ");
20
+ var totalLength = countAllOptions(defaultOptions);
21
+ return "".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " (").concat(groupOptionIndex + 1, " of ").concat(totalLength, ")");
26
22
  }
27
23
 
28
24
  // Helper function which identifies if options are grouped.
@@ -5,10 +5,8 @@ import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  /* eslint-disable @repo/internal/fs/filename-pattern-match */
7
7
 
8
- import { fg } from '@atlaskit/platform-feature-flags';
9
8
  import { groupedCountries } from './data/countries';
10
9
  import Select from './Select';
11
- import { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
12
10
  // custom option renderer
13
11
  const labelStyles = null;
14
12
  const flagStyles = null;
@@ -58,7 +56,6 @@ const formatOptionLabel = (opt, {
58
56
  // put it all together
59
57
  const CountrySelect = props => {
60
58
  const {
61
- ariaLiveMessages,
62
59
  options
63
60
  } = props;
64
61
  const countryOptions = options || groupedCountries;
@@ -68,15 +65,7 @@ const CountrySelect = props => {
68
65
  getOptionLabel: getOptionLabel,
69
66
  getOptionValue: getOptionValue,
70
67
  isMulti: false,
71
- options: countryOptions,
72
- ariaLiveMessages:
73
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
74
- fg('design_system_select-a11y-improvement') ? undefined : isCountryOptionsGrouped(countryOptions) ? {
75
- onFocus: data => onCountryOptionFocus(data, countryOptions),
76
- ...ariaLiveMessages
77
- } : {
78
- ...ariaLiveMessages
79
- }
68
+ options: countryOptions
80
69
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
81
70
  }, props));
82
71
  };
@@ -8,13 +8,10 @@ import { createPortal } from 'react-dom';
8
8
  import FocusLock from 'react-focus-lock';
9
9
  import { Manager, Popper, Reference } from 'react-popper';
10
10
  import { shallowEqualObjects } from 'shallow-equal';
11
- import { isAppleDevice, isSafari } from '@atlaskit/ds-lib/device-check';
12
11
  import { IdProvider } from '@atlaskit/ds-lib/use-id';
13
- import { fg } from '@atlaskit/platform-feature-flags';
14
12
  import { mergeStyles } from '@atlaskit/react-select';
15
13
  import { N80 } from '@atlaskit/theme/colors';
16
14
  import Select from '../Select';
17
- import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
18
15
  import { defaultComponents, DummyControl, MenuDialog } from './components';
19
16
  import { NotifyOpenLayerObserver } from './notify-open-layer-observer';
20
17
  /**
@@ -328,60 +325,6 @@ export default class PopupSelect extends PureComponent {
328
325
  return placeholder;
329
326
  }
330
327
  };
331
- const providedAriaLabel = getLabel();
332
- const updateInputAriaLabel = ariaLabelText => {
333
- var _this$selectRef, _this$selectRef$selec3;
334
- // Update aria-label to get first announcement when popup opened.
335
- if ((_this$selectRef = this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef$selec3 = _this$selectRef.select) !== null && _this$selectRef$selec3 !== void 0 && _this$selectRef$selec3.inputRef) {
336
- var _this$selectRef2, _this$selectRef2$sele;
337
- if (providedAriaLabel) {
338
- // I might want to use a comma instead of a period here, when the feature flag is removed.
339
- ariaLabelText = `${providedAriaLabel}. ${ariaLabelText}`;
340
- }
341
- (_this$selectRef2 = this.selectRef) === null || _this$selectRef2 === void 0 ? void 0 : (_this$selectRef2$sele = _this$selectRef2.select.inputRef) === null || _this$selectRef2$sele === void 0 ? void 0 : _this$selectRef2$sele.setAttribute('aria-label', ariaLabelText);
342
- }
343
- };
344
- const generateNoGroupsAriaText = (onFocusProps, ariaLabelSuffix) => {
345
- var _options$findIndex;
346
- const {
347
- focused
348
- } = onFocusProps;
349
- const options = (props === null || props === void 0 ? void 0 : props.options) || [];
350
- const totalLength = options === null || options === void 0 ? void 0 : options.length;
351
- const optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(option => option === focused)) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
352
- const optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
353
- const ariaLabelText = fg('design_system_select-a11y-improvement') ? `${optionName}, (${optionIndex + 1} of ${totalLength})` : `Option ${optionName} focused, ${optionIndex + 1} of ${totalLength}.
354
- ${totalLength} results available.
355
- ${ariaLabelSuffix}
356
- `;
357
- // Option LABEL focused, 1 of 8. 8 results available.
358
- // Use Up and Down to choose options, press Enter to select the currently focused option,
359
- // press Escape to exit the menu.
360
- return ariaLabelText;
361
- };
362
- const onReactSelectFocus = onFocusProps => {
363
- var _props$options;
364
- 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.';
365
- let ariaLabelText = '';
366
- let ariaLiveMessage = '';
367
- if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
368
- if (isOptionsGrouped(props.options)) {
369
- const totalLength = countAllOptions(props.options);
370
- ariaLiveMessage = onFocus(onFocusProps, props.options);
371
- ariaLabelText = `${ariaLiveMessage} ${totalLength} results available. ${ariaLabelSuffix}`;
372
- } else {
373
- ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
374
- ariaLiveMessage = ariaLabelText;
375
- }
376
- // Safari still does not announce the first option when menu is opened, so forcing a change to the input label
377
- // will include the first option in the initial announcement.
378
- if (!fg('design_system_select-a11y-improvement') || isSafari() && fg('design_system_select-a11y-improvement')) {
379
- updateInputAriaLabel(ariaLabelText);
380
- }
381
- return ariaLiveMessage;
382
- }
383
- return ariaLiveMessage;
384
- };
385
328
  const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
386
329
  onFirstUpdate: state => {
387
330
  var _mergedPopperProps$on;
@@ -409,11 +352,7 @@ export default class PopupSelect extends PureComponent {
409
352
  disabled: !focusLockEnabled,
410
353
  returnFocus: true
411
354
  }, /*#__PURE__*/React.createElement(Select, _extends({
412
- label: providedAriaLabel
413
- // TODO: Popup Select does not work well with active-descendant
414
- ,
415
- "aria-live": isAppleDevice() && fg('design_system_select-a11y-improvement') ? 'assertive' // only needed on Apple products
416
- : undefined,
355
+ label: getLabel(),
417
356
  backspaceRemovesValue: false,
418
357
  controlShouldRenderValue: false,
419
358
  isClearable: false,
@@ -427,12 +366,7 @@ export default class PopupSelect extends PureComponent {
427
366
  maxMenuHeight: this.getMaxHeight(),
428
367
  components: selectComponents,
429
368
  onChange: this.handleSelectChange,
430
- testId: testId,
431
- ariaLiveMessages: {
432
- // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
433
- onFocus: onReactSelectFocus,
434
- ...props.ariaLiveMessages // priority to use user handlers if provided
435
- }
369
+ testId: testId
436
370
  // Note: We are intentionally not using `onMenuClose={this.close}` here, due to state management conflicts
437
371
  // between PopupSelect's popup and the internal select menu. This can result in the PopupSelect closing
438
372
  // or opening unexpectedly.
@@ -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 = "20.6.1";
6
+ const packageVersion = "20.7.0";
7
7
  export const SelectWithoutAnalytics = createSelect(AsyncSelect);
8
8
  const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
9
9
  const Select = withAnalyticsContext({
@@ -2,8 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
3
3
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
4
4
  import React, { forwardRef, useImperativeHandle, useRef } from 'react';
5
- import { fg } from '@atlaskit/platform-feature-flags';
6
- import { isOptionsGrouped, onFocus } from './utils/grouped-options-announcement';
7
5
  export default function createSelect(WrappedComponent) {
8
6
  const AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
9
7
  const {
@@ -37,15 +35,7 @@ export default function createSelect(WrappedComponent) {
37
35
  }), []);
38
36
  return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
39
37
  ref: internalSelectRef,
40
- "aria-live": fg('design_system_select-a11y-improvement') ? undefined : 'assertive',
41
- ariaLiveMessages:
42
- //TO DO: Still need live region for PopupSelect because of the menu being open by default
43
- isOptionsGrouped(props.options) ? {
44
- onFocus: data => onFocus(data, props.options),
45
- ...ariaLiveMessages
46
- } : {
47
- ...ariaLiveMessages
48
- },
38
+ ariaLiveMessages: ariaLiveMessages,
49
39
  tabSelectsValue: tabSelectsValue,
50
40
  onClickPreventDefault: onClickPreventDefault,
51
41
  isInvalid: isInvalid || validationState === 'error'
@@ -7,7 +7,6 @@ export { default as AsyncSelect } from './entry-points/async-select';
7
7
  export { default as CreatableSelect } from './entry-points/creatable-select';
8
8
  export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
9
9
  export { isOptionsGrouped } from './utils/grouped-options-announcement';
10
- export { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
11
10
  export { default as CheckboxSelect } from './CheckboxSelect';
12
11
  export { default as CountrySelect } from './CountrySelect';
13
12
  export { default as RadioSelect } from './RadioSelect';
@@ -1,7 +1,4 @@
1
- import { fg } from '@atlaskit/platform-feature-flags';
2
- // Used for overwriting ariaLiveMessages builtin onFocus method.
3
- // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
4
- export function onFocus(onFocusProps, defaultOptions) {
1
+ export function generateGroupLabel(onFocusProps, defaultOptions) {
5
2
  var _groupData$options$fi;
6
3
  const {
7
4
  focused
@@ -14,10 +11,8 @@ export function onFocus(onFocusProps, defaultOptions) {
14
11
  return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
15
12
  });
16
13
  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
- }
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 `;
14
+ const totalLength = countAllOptions(defaultOptions);
15
+ return `${focused.label}, ${groupData === null || groupData === void 0 ? void 0 : groupData.label} (${groupOptionIndex + 1} of ${totalLength})`;
21
16
  }
22
17
 
23
18
  // Helper function which identifies if options are grouped.
@@ -1,17 +1,12 @@
1
1
  /* CountrySelect.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
3
  import "./CountrySelect.compiled.css";
5
4
  import * as React from 'react';
6
5
  import { ax, ix } from "@compiled/react/runtime";
7
- 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; }
8
- 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; }
9
6
  /* eslint-disable @repo/internal/fs/filename-pattern-match */
10
7
 
11
- import { fg } from '@atlaskit/platform-feature-flags';
12
8
  import { groupedCountries } from './data/countries';
13
9
  import Select from './Select';
14
- import { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
15
10
  // custom option renderer
16
11
  var labelStyles = null;
17
12
  var flagStyles = null;
@@ -68,8 +63,7 @@ var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
68
63
 
69
64
  // put it all together
70
65
  var CountrySelect = function CountrySelect(props) {
71
- var ariaLiveMessages = props.ariaLiveMessages,
72
- options = props.options;
66
+ var options = props.options;
73
67
  var countryOptions = options || groupedCountries;
74
68
  return /*#__PURE__*/React.createElement(Select, _extends({
75
69
  isClearable: false,
@@ -77,14 +71,7 @@ var CountrySelect = function CountrySelect(props) {
77
71
  getOptionLabel: getOptionLabel,
78
72
  getOptionValue: getOptionValue,
79
73
  isMulti: false,
80
- options: countryOptions,
81
- ariaLiveMessages:
82
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
83
- fg('design_system_select-a11y-improvement') ? undefined : isCountryOptionsGrouped(countryOptions) ? _objectSpread({
84
- onFocus: function onFocus(data) {
85
- return onCountryOptionFocus(data, countryOptions);
86
- }
87
- }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
74
+ options: countryOptions
88
75
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
89
76
  }, props));
90
77
  };
@@ -19,13 +19,10 @@ import { createPortal } from 'react-dom';
19
19
  import FocusLock from 'react-focus-lock';
20
20
  import { Manager, Popper, Reference } from 'react-popper';
21
21
  import { shallowEqualObjects } from 'shallow-equal';
22
- import { isAppleDevice, isSafari } from '@atlaskit/ds-lib/device-check';
23
22
  import { IdProvider } from '@atlaskit/ds-lib/use-id';
24
- import { fg } from '@atlaskit/platform-feature-flags';
25
23
  import { mergeStyles } from '@atlaskit/react-select';
26
24
  import { N80 } from '@atlaskit/theme/colors';
27
25
  import Select from '../Select';
28
- import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
29
26
  import { defaultComponents, DummyControl, MenuDialog } from './components';
30
27
  import { NotifyOpenLayerObserver } from './notify-open-layer-observer';
31
28
  /**
@@ -341,57 +338,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
341
338
  return placeholder;
342
339
  }
343
340
  };
344
- var providedAriaLabel = getLabel();
345
- var updateInputAriaLabel = function updateInputAriaLabel(ariaLabelText) {
346
- var _this$selectRef;
347
- // Update aria-label to get first announcement when popup opened.
348
- if ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef) {
349
- var _this$selectRef2;
350
- if (providedAriaLabel) {
351
- // I might want to use a comma instead of a period here, when the feature flag is removed.
352
- ariaLabelText = "".concat(providedAriaLabel, ". ").concat(ariaLabelText);
353
- }
354
- (_this$selectRef2 = _this.selectRef) === null || _this$selectRef2 === void 0 || (_this$selectRef2 = _this$selectRef2.select.inputRef) === null || _this$selectRef2 === void 0 || _this$selectRef2.setAttribute('aria-label', ariaLabelText);
355
- }
356
- };
357
- var generateNoGroupsAriaText = function generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix) {
358
- var _options$findIndex;
359
- var focused = onFocusProps.focused;
360
- var options = (props === null || props === void 0 ? void 0 : props.options) || [];
361
- var totalLength = options === null || options === void 0 ? void 0 : options.length;
362
- var optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(function (option) {
363
- return option === focused;
364
- })) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
365
- var optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
366
- var ariaLabelText = fg('design_system_select-a11y-improvement') ? "".concat(optionName, ", (").concat(optionIndex + 1, " of ").concat(totalLength, ")") : "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");
367
- // Option LABEL focused, 1 of 8. 8 results available.
368
- // Use Up and Down to choose options, press Enter to select the currently focused option,
369
- // press Escape to exit the menu.
370
- return ariaLabelText;
371
- };
372
- var onReactSelectFocus = function onReactSelectFocus(onFocusProps) {
373
- var _props$options;
374
- 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.';
375
- var ariaLabelText = '';
376
- var ariaLiveMessage = '';
377
- if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
378
- if (isOptionsGrouped(props.options)) {
379
- var totalLength = countAllOptions(props.options);
380
- ariaLiveMessage = onFocus(onFocusProps, props.options);
381
- ariaLabelText = "".concat(ariaLiveMessage, " ").concat(totalLength, " results available. ").concat(ariaLabelSuffix);
382
- } else {
383
- ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
384
- ariaLiveMessage = ariaLabelText;
385
- }
386
- // Safari still does not announce the first option when menu is opened, so forcing a change to the input label
387
- // will include the first option in the initial announcement.
388
- if (!fg('design_system_select-a11y-improvement') || isSafari() && fg('design_system_select-a11y-improvement')) {
389
- updateInputAriaLabel(ariaLabelText);
390
- }
391
- return ariaLiveMessage;
392
- }
393
- return ariaLiveMessage;
394
- };
395
341
  var popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
396
342
  onFirstUpdate: function onFirstUpdate(state) {
397
343
  var _mergedPopperProps$on;
@@ -418,11 +364,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
418
364
  disabled: !focusLockEnabled,
419
365
  returnFocus: true
420
366
  }, /*#__PURE__*/React.createElement(Select, _extends({
421
- label: providedAriaLabel
422
- // TODO: Popup Select does not work well with active-descendant
423
- ,
424
- "aria-live": isAppleDevice() && fg('design_system_select-a11y-improvement') ? 'assertive' // only needed on Apple products
425
- : undefined,
367
+ label: getLabel(),
426
368
  backspaceRemovesValue: false,
427
369
  controlShouldRenderValue: false,
428
370
  isClearable: false,
@@ -436,11 +378,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
436
378
  maxMenuHeight: _this.getMaxHeight(),
437
379
  components: selectComponents,
438
380
  onChange: _this.handleSelectChange,
439
- testId: testId,
440
- ariaLiveMessages: _objectSpread({
441
- // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
442
- onFocus: onReactSelectFocus
443
- }, props.ariaLiveMessages)
381
+ testId: testId
444
382
  // Note: We are intentionally not using `onMenuClose={this.close}` here, due to state management conflicts
445
383
  // between PopupSelect's popup and the internal select menu. This can result in the PopupSelect closing
446
384
  // or opening unexpectedly.
@@ -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 = "20.6.1";
6
+ var packageVersion = "20.7.0";
7
7
  export var SelectWithoutAnalytics = createSelect(AsyncSelect);
8
8
  var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
9
9
  var Select = withAnalyticsContext({
@@ -1,14 +1,9 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
3
  var _excluded = ["ariaLiveMessages", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"];
5
- 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; }
6
- 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; }
7
4
  /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
8
5
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
9
6
  import React, { forwardRef, useImperativeHandle, useRef } from 'react';
10
- import { fg } from '@atlaskit/platform-feature-flags';
11
- import { isOptionsGrouped, onFocus as _onFocus } from './utils/grouped-options-announcement';
12
7
  export default function createSelect(WrappedComponent) {
13
8
  var AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
14
9
  var ariaLiveMessages = props.ariaLiveMessages,
@@ -44,14 +39,7 @@ export default function createSelect(WrappedComponent) {
44
39
  }, []);
45
40
  return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
46
41
  ref: internalSelectRef,
47
- "aria-live": fg('design_system_select-a11y-improvement') ? undefined : 'assertive',
48
- ariaLiveMessages:
49
- //TO DO: Still need live region for PopupSelect because of the menu being open by default
50
- isOptionsGrouped(props.options) ? _objectSpread({
51
- onFocus: function onFocus(data) {
52
- return _onFocus(data, props.options);
53
- }
54
- }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
42
+ ariaLiveMessages: ariaLiveMessages,
55
43
  tabSelectsValue: tabSelectsValue,
56
44
  onClickPreventDefault: onClickPreventDefault,
57
45
  isInvalid: isInvalid || validationState === 'error'
package/dist/esm/index.js CHANGED
@@ -7,7 +7,6 @@ export { default as AsyncSelect } from './entry-points/async-select';
7
7
  export { default as CreatableSelect } from './entry-points/creatable-select';
8
8
  export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
9
9
  export { isOptionsGrouped } from './utils/grouped-options-announcement';
10
- export { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
11
10
  export { default as CheckboxSelect } from './CheckboxSelect';
12
11
  export { default as CountrySelect } from './CountrySelect';
13
12
  export { default as RadioSelect } from './RadioSelect';
@@ -1,7 +1,4 @@
1
- import { fg } from '@atlaskit/platform-feature-flags';
2
- // Used for overwriting ariaLiveMessages builtin onFocus method.
3
- // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
4
- export function onFocus(onFocusProps, defaultOptions) {
1
+ export function generateGroupLabel(onFocusProps, defaultOptions) {
5
2
  var _groupData$options$fi;
6
3
  var focused = onFocusProps.focused;
7
4
  var isOptionFocused = function isOptionFocused(option) {
@@ -12,10 +9,8 @@ export function onFocus(onFocusProps, defaultOptions) {
12
9
  return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
13
10
  });
14
11
  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
- }
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 ");
12
+ var totalLength = countAllOptions(defaultOptions);
13
+ return "".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " (").concat(groupOptionIndex + 1, " of ").concat(totalLength, ")");
19
14
  }
20
15
 
21
16
  // Helper function which identifies if options are grouped.
@@ -7,7 +7,6 @@ export { default as AsyncSelect } from './entry-points/async-select';
7
7
  export { default as CreatableSelect } from './entry-points/creatable-select';
8
8
  export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
9
9
  export { isOptionsGrouped } from './utils/grouped-options-announcement';
10
- export { isCountryOptionsGrouped, onCountryOptionFocus, type CountyGroupOptions, } from './utils/country-groups-announcement';
11
10
  export { default as CheckboxSelect } from './CheckboxSelect';
12
11
  export { default as CountrySelect } from './CountrySelect';
13
12
  export { default as RadioSelect } from './RadioSelect';
@@ -1,5 +1,5 @@
1
1
  import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from '@atlaskit/react-select';
2
2
  import { type GroupType, type OptionType } from '../types';
3
- export declare function onFocus(onFocusProps: AriaOnFocusProps<OptionType, GroupBase<OptionType>>, defaultOptions?: OptionsOrGroups<OptionType, GroupType<OptionType>>): string;
3
+ export declare function generateGroupLabel(onFocusProps: AriaOnFocusProps<OptionType, GroupBase<OptionType>>, defaultOptions?: OptionsOrGroups<OptionType, GroupType<OptionType>>): string;
4
4
  export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;
5
5
  export declare const countAllOptions: (groupsArray: readonly GroupType<OptionType>[]) => number;
@@ -7,7 +7,6 @@ export { default as AsyncSelect } from './entry-points/async-select';
7
7
  export { default as CreatableSelect } from './entry-points/creatable-select';
8
8
  export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
9
9
  export { isOptionsGrouped } from './utils/grouped-options-announcement';
10
- export { isCountryOptionsGrouped, onCountryOptionFocus, type CountyGroupOptions, } from './utils/country-groups-announcement';
11
10
  export { default as CheckboxSelect } from './CheckboxSelect';
12
11
  export { default as CountrySelect } from './CountrySelect';
13
12
  export { default as RadioSelect } from './RadioSelect';
@@ -1,5 +1,5 @@
1
1
  import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from '@atlaskit/react-select';
2
2
  import { type GroupType, type OptionType } from '../types';
3
- export declare function onFocus(onFocusProps: AriaOnFocusProps<OptionType, GroupBase<OptionType>>, defaultOptions?: OptionsOrGroups<OptionType, GroupType<OptionType>>): string;
3
+ export declare function generateGroupLabel(onFocusProps: AriaOnFocusProps<OptionType, GroupBase<OptionType>>, defaultOptions?: OptionsOrGroups<OptionType, GroupType<OptionType>>): string;
4
4
  export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;
5
5
  export declare const countAllOptions: (groupsArray: readonly GroupType<OptionType>[]) => number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "20.6.1",
3
+ "version": "20.7.0",
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/"
@@ -41,15 +41,15 @@
41
41
  ".": "./src/index.tsx"
42
42
  },
43
43
  "dependencies": {
44
- "@atlaskit/analytics-next": "^11.0.0",
44
+ "@atlaskit/analytics-next": "^11.1.0",
45
45
  "@atlaskit/ds-lib": "^4.0.0",
46
46
  "@atlaskit/icon": "^26.4.0",
47
47
  "@atlaskit/platform-feature-flags": "^1.1.0",
48
48
  "@atlaskit/primitives": "^14.8.0",
49
- "@atlaskit/react-select": "^2.6.0",
49
+ "@atlaskit/react-select": "^2.7.0",
50
50
  "@atlaskit/spinner": "^18.0.0",
51
51
  "@atlaskit/theme": "^18.0.0",
52
- "@atlaskit/tokens": "^4.9.0",
52
+ "@atlaskit/tokens": "^5.1.0",
53
53
  "@atlaskit/visually-hidden": "^3.0.0",
54
54
  "@babel/runtime": "^7.0.0",
55
55
  "@compiled/react": "^0.18.3",
@@ -70,10 +70,10 @@
70
70
  "@atlaskit/button": "^23.2.0",
71
71
  "@atlaskit/checkbox": "^17.1.0",
72
72
  "@atlaskit/docs": "^10.0.0",
73
- "@atlaskit/drawer": "^10.1.0",
73
+ "@atlaskit/drawer": "^11.0.0",
74
74
  "@atlaskit/form": "^12.0.0",
75
75
  "@atlaskit/link": "^3.2.0",
76
- "@atlaskit/logo": "^18.1.0",
76
+ "@atlaskit/logo": "^19.0.0",
77
77
  "@atlaskit/modal-dialog": "^14.2.0",
78
78
  "@atlaskit/radio": "^8.1.0",
79
79
  "@atlaskit/section-message": "^8.2.0",
@@ -108,10 +108,6 @@
108
108
  "platform-visual-refresh-icons-legacy-facade": {
109
109
  "type": "boolean"
110
110
  },
111
- "design_system_select-a11y-improvement": {
112
- "type": "boolean",
113
- "referenceOnly": true
114
- },
115
111
  "platform-visual-refresh-icons": {
116
112
  "type": "boolean"
117
113
  },
@@ -1,29 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.isCountryOptionsGrouped = void 0;
7
- exports.onCountryOptionFocus = onCountryOptionFocus;
8
- // Used for overwriting ariaLiveMessages builtin onFocus method.
9
- // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
10
- function onCountryOptionFocus(onFocusProps, defaultOptions) {
11
- var _groupData$options$fi;
12
- var focused = onFocusProps.focused;
13
- var isOptionFocused = function isOptionFocused(option) {
14
- return option.name === focused.name;
15
- };
16
- var groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(function (option) {
17
- var _option$options;
18
- return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
19
- });
20
- 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;
21
- return "Option ".concat(focused.name, " (").concat(focused.abbr.toUpperCase(), ") +").concat(focused.code, ", ").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
- }
23
-
24
- // Helper function which identifies if options are grouped.
25
- var isCountryOptionsGrouped = exports.isCountryOptionsGrouped = function isCountryOptionsGrouped(arr) {
26
- return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
27
- return obj.hasOwnProperty('options');
28
- });
29
- };
@@ -1,22 +0,0 @@
1
- // Used for overwriting ariaLiveMessages builtin onFocus method.
2
- // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
3
- export function onCountryOptionFocus(onFocusProps, defaultOptions) {
4
- var _groupData$options$fi;
5
- const {
6
- focused
7
- } = onFocusProps;
8
- const isOptionFocused = option => {
9
- return option.name === focused.name;
10
- };
11
- const groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(option => {
12
- var _option$options;
13
- return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
14
- });
15
- 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;
16
- return `Option ${focused.name} (${focused.abbr.toUpperCase()}) +${focused.code}, ${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
- }
18
-
19
- // Helper function which identifies if options are grouped.
20
- export const isCountryOptionsGrouped = arr => {
21
- return arr === null || arr === void 0 ? void 0 : arr.every(obj => obj.hasOwnProperty('options'));
22
- };
@@ -1,22 +0,0 @@
1
- // Used for overwriting ariaLiveMessages builtin onFocus method.
2
- // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
3
- export function onCountryOptionFocus(onFocusProps, defaultOptions) {
4
- var _groupData$options$fi;
5
- var focused = onFocusProps.focused;
6
- var isOptionFocused = function isOptionFocused(option) {
7
- return option.name === focused.name;
8
- };
9
- var groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(function (option) {
10
- var _option$options;
11
- return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
12
- });
13
- 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;
14
- return "Option ".concat(focused.name, " (").concat(focused.abbr.toUpperCase(), ") +").concat(focused.code, ", ").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
- }
16
-
17
- // Helper function which identifies if options are grouped.
18
- export var isCountryOptionsGrouped = function isCountryOptionsGrouped(arr) {
19
- return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
20
- return obj.hasOwnProperty('options');
21
- });
22
- };
@@ -1,15 +0,0 @@
1
- import { type AriaOnFocusProps, type OptionsOrGroups } from '@atlaskit/react-select';
2
- import { type GroupType } from '../types';
3
- type Country = {
4
- icon: string;
5
- name: string;
6
- abbr: string;
7
- code: string | number;
8
- };
9
- export type CountyGroupOptions = {
10
- label: string;
11
- options: Country[];
12
- };
13
- export declare function onCountryOptionFocus(onFocusProps: AriaOnFocusProps<Country, GroupType<Country>>, defaultOptions?: CountyGroupOptions[]): string;
14
- export declare const isCountryOptionsGrouped: (arr?: OptionsOrGroups<Country, GroupType<Country>>) => boolean | undefined;
15
- export {};
@@ -1,15 +0,0 @@
1
- import { type AriaOnFocusProps, type OptionsOrGroups } from '@atlaskit/react-select';
2
- import { type GroupType } from '../types';
3
- type Country = {
4
- icon: string;
5
- name: string;
6
- abbr: string;
7
- code: string | number;
8
- };
9
- export type CountyGroupOptions = {
10
- label: string;
11
- options: Country[];
12
- };
13
- export declare function onCountryOptionFocus(onFocusProps: AriaOnFocusProps<Country, GroupType<Country>>, defaultOptions?: CountyGroupOptions[]): string;
14
- export declare const isCountryOptionsGrouped: (arr?: OptionsOrGroups<Country, GroupType<Country>>) => boolean | undefined;
15
- export {};