@atlaskit/select 17.11.7 → 17.11.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/select
 
+## 17.11.9
+
+### Patch Changes
+
+- [#124328](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124328)
+  [`69cea8c513faa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/69cea8c513faa) -
+  Add announcement of focused option for the first open of Popup select
+
+## 17.11.8
+
+### Patch Changes
+
+- [#123484](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123484)
+  [`e241c04ab92d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e241c04ab92d5) -
+  Remove abandoned feature flag usage
+
 ## 17.11.7
 
 ### Patch Changes

package/dist/cjs/CountrySelect.js

@@ -11,8 +11,8 @@ var _countries = require("./data/countries");
 var _Select = _interopRequireDefault(require("./Select"));
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -16,19 +16,20 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
 var _reactDom = require("react-dom");
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
+var _reactPopper = require("react-popper");
 var _reactSelect = _interopRequireWildcard(require("react-select"));
 var _reactUid = require("react-uid");
-var _reactPopper = require("react-popper");
-var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
 var _shallowEqual = require("shallow-equal");
-var _Select = _interopRequireDefault(require("../Select"));
-var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _components = require("./components");
+var _colors = require("@atlaskit/theme/colors");
+var _Select = _interopRequireDefault(require("../Select"));
 var _styles = _interopRequireDefault(require("../styles"));
-var _bindEventListener = require("bind-event-listener");
+var _groupedOptionsAnnouncement = require("../utils/grouped-options-announcement");
+var _components = require("./components");
 var _excluded = ["footer", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId"];
 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); }
 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 && Object.prototype.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; }
@@ -36,7 +37,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-/** Are we rendering on the client or server? */
+/**
+ * Are we rendering on the client or server?
+ */
 var canUseDOM = function canUseDOM() {
   return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
 };
@@ -188,7 +191,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       });
       if (_this.selectRef) {
         var _this$selectRef$selec;
-        (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec = _this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first') : _this.selectRef.openMenu('first');
+        (0, _platformFeatureFlags.fg)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec = _this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first') : _this.selectRef.openMenu('first');
       }
       if (typeof window === 'undefined') {
         return;
@@ -286,7 +289,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
 
       // subtract the control height to maintain consistency
       var showSearchControl = _this.showSearchControl();
-      var controlRef = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec2 = _this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef : _this.selectRef.controlRef;
+      var controlRef = (0, _platformFeatureFlags.fg)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec2 = _this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef : _this.selectRef.controlRef;
       var offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       var maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
@@ -330,7 +333,52 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           return placeholder;
         }
       };
-      var InternalSelect = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? _Select.default : _reactSelect.default;
+      var InternalSelect = (0, _platformFeatureFlags.fg)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? _Select.default : _reactSelect.default;
+      var providedAriaLabel = getLabel();
+      var updateInputAriaLabel = function updateInputAriaLabel(ariaLabelText) {
+        var _this$selectRef, _this$selectRef2;
+        // Update aria-label to get first announcement when popup opened.
+        if ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef || (_this$selectRef2 = _this.selectRef) !== null && _this$selectRef2 !== void 0 && _this$selectRef2.inputRef) {
+          var _this$selectRef3, _this$selectRef4;
+          if (providedAriaLabel) {
+            ariaLabelText = "".concat(providedAriaLabel, ". ").concat(ariaLabelText);
+          }
+          (0, _platformFeatureFlags.fg)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef3 = _this.selectRef) === null || _this$selectRef3 === void 0 || (_this$selectRef3 = _this$selectRef3.select.inputRef) === null || _this$selectRef3 === void 0 ? void 0 : _this$selectRef3.setAttribute('aria-label', ariaLabelText) : (_this$selectRef4 = _this.selectRef) === null || _this$selectRef4 === void 0 || (_this$selectRef4 = _this$selectRef4.inputRef) === null || _this$selectRef4 === void 0 ? void 0 : _this$selectRef4.setAttribute('aria-label', ariaLabelText);
+        }
+      };
+      var generateNoGroupsAriaText = function generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix) {
+        var _options$findIndex;
+        var focused = onFocusProps.focused;
+        var options = (props === null || props === void 0 ? void 0 : props.options) || [];
+        var totalLength = (options === null || options === void 0 ? void 0 : options.length) + 1;
+        var optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(function (option) {
+          return option === focused;
+        })) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
+        var optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
+        var ariaLabelText = "Option ".concat(optionName, " focused, ").concat(optionIndex, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
+        // Option LABEL focused, 1 of 8. 8 results available.
+        // Use Up and Down to choose options, press Enter to select the currently focused option,
+        // press Escape to exit the menu.
+        return ariaLabelText;
+      };
+      var onReactSelectFocus = function onReactSelectFocus(onFocusProps) {
+        var _props$options;
+        var ariaLabelSuffix = ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
+        var ariaLabelText = '';
+        var ariaLiveMessage = '';
+        if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
+          if ((0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options)) {
+            var totalLength = (0, _groupedOptionsAnnouncement.countAllOptions)(props.options);
+            ariaLiveMessage = (0, _groupedOptionsAnnouncement.onFocus)(onFocusProps);
+            ariaLabelText = "".concat(ariaLiveMessage, " ").concat(totalLength, " results available. ").concat(ariaLabelSuffix);
+          } else {
+            ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
+            ariaLiveMessage = ariaLabelText;
+          }
+          updateInputAriaLabel(ariaLabelText);
+          return ariaLiveMessage;
+        }
+      };
       var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, {
         onFirstUpdate: function onFirstUpdate(state) {
           var _mergedPopperProps$on;
@@ -356,7 +404,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           disabled: !focusLockEnabled,
           returnFocus: true
         }, /*#__PURE__*/_react.default.createElement(InternalSelect, (0, _extends2.default)({
-          "aria-label": getLabel(),
+          "aria-label": providedAriaLabel,
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
           isClearable: false,
@@ -365,18 +413,17 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           placeholder: placeholder,
           ref: _this.getSelectRef
         }, props, {
-          onMenuClose: function onMenuClose() {
-            var _props$onMenuClose;
-            (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.popup-select-close_8h15h') && _this.close();
-            (_props$onMenuClose = props.onMenuClose) === null || _props$onMenuClose === void 0 || _props$onMenuClose.call(props);
-          },
           isSearchable: showSearchControl
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           ,
           styles: (0, _reactSelect.mergeStyles)(_this.defaultStyles, props.styles || {}),
           maxMenuHeight: _this.getMaxHeight(),
           components: selectComponents,
-          onChange: _this.handleSelectChange
+          onChange: _this.handleSelectChange,
+          ariaLiveMessages: !showSearchControl ? _objectSpread({
+            // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
+            onFocus: onReactSelectFocus
+          }, props.ariaLiveMessages) : props.ariaLiveMessages
         })), footer)));
       });
       return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/(0, _reactDom.createPortal)(popper, portalDestination);

package/dist/cjs/PopupSelect/components.js

@@ -16,8 +16,8 @@ var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["innerRef", "innerProps"];
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // ==============================
 // Styled Components

package/dist/cjs/Select.js

@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var packageName = "@atlaskit/select";
-var packageVersion = "17.11.7";
+var packageVersion = "17.11.9";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/components/index.js

@@ -30,8 +30,8 @@ var _reactSelect = require("react-select");
 var _indicators = require("./indicators");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var disabledStyles = (0, _react.css)({

package/dist/cjs/components/indicators.js

@@ -16,7 +16,8 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-
 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; }
 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; } /**
  * @jsxRuntime classic
- */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var iconContainerStyles = (0, _primitives.xcss)({
   all: 'unset',
   outline: 'revert',

package/dist/cjs/components/input-options.js

@@ -26,7 +26,8 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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; }
 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; } /**
  * @jsxRuntime classic
- */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var getPrimitiveStyles = function getPrimitiveStyles(props) {
   var cx = props.cx,
     className = props.className,

package/dist/cjs/createSelect.js

@@ -11,9 +11,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactSelect = require("react-select");
+var _components = require("./components");
 var _inputAriaDescribedby = require("./components/input-aria-describedby");
 var _noOptions = require("./components/no-options");
-var _components = require("./components");
 var _styles = _interopRequireDefault(require("./styles"));
 var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
 var _excluded = ["appearance", "ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "spacing", "styles", "tabSelectsValue", "validationState"];

package/dist/cjs/utils/grouped-options-announcement.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isOptionsGrouped = void 0;
+exports.isOptionsGrouped = exports.countAllOptions = void 0;
 exports.onFocus = onFocus;
 // Used for overwriting ariaLiveMessages builtin onFocus method.
 // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
@@ -27,4 +27,15 @@ var isOptionsGrouped = exports.isOptionsGrouped = function isOptionsGrouped(arr)
   return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
     return obj.hasOwnProperty('options');
   });
+};
+
+// Helper function which calculates how many options are in total in all groups.
+var countAllOptions = exports.countAllOptions = function countAllOptions(groupsArray) {
+  var totalLength = groupsArray === null || groupsArray === void 0 ? void 0 : groupsArray.reduce(function (acc, currentGroup) {
+    var _group$options;
+    var group = currentGroup;
+    acc += group === null || group === void 0 || (_group$options = group.options) === null || _group$options === void 0 ? void 0 : _group$options.length;
+    return acc;
+  }, 0);
+  return totalLength;
 };

package/dist/es2019/CountrySelect.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -1,20 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
+import { bind } from 'bind-event-listener';
 import { createPortal } from 'react-dom';
 import FocusLock from 'react-focus-lock';
+import NodeResolver from 'react-node-resolver';
+import { Manager, Popper, Reference } from 'react-popper';
 import Select, { mergeStyles } from 'react-select';
 import { uid } from 'react-uid';
-import { Manager, Reference, Popper } from 'react-popper';
-import NodeResolver from 'react-node-resolver';
 import { shallowEqualObjects } from 'shallow-equal';
-import DefaultSelect from '../Select';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N80 } from '@atlaskit/theme/colors';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { MenuDialog, DummyControl, defaultComponents } from './components';
+import DefaultSelect from '../Select';
 import baseStyles from '../styles';
-import { bind } from 'bind-event-listener';
-/** Are we rendering on the client or server? */
+import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
+import { defaultComponents, DummyControl, MenuDialog } from './components';
+/**
+ * Are we rendering on the client or server?
+ */
 const canUseDOM = () => Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
 
 // ==============================
@@ -160,7 +163,7 @@ export default class PopupSelect extends PureComponent {
       });
       if (this.selectRef) {
         var _this$selectRef$selec;
-        getBooleanFF('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec = this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first') : this.selectRef.openMenu('first');
+        fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec = this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first') : this.selectRef.openMenu('first');
       }
       if (typeof window === 'undefined') {
         return;
@@ -258,7 +261,7 @@ export default class PopupSelect extends PureComponent {
 
       // subtract the control height to maintain consistency
       const showSearchControl = this.showSearchControl();
-      let controlRef = getBooleanFF('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec2 = this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef : this.selectRef.controlRef;
+      let controlRef = fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec2 = this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef : this.selectRef.controlRef;
       const offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       const maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
@@ -306,7 +309,55 @@ export default class PopupSelect extends PureComponent {
           return placeholder;
         }
       };
-      const InternalSelect = getBooleanFF('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? DefaultSelect : Select;
+      const InternalSelect = fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? DefaultSelect : Select;
+      const providedAriaLabel = getLabel();
+      const updateInputAriaLabel = ariaLabelText => {
+        var _this$selectRef, _this$selectRef$selec3, _this$selectRef2;
+        // Update aria-label to get first announcement when popup opened.
+        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 || (_this$selectRef2 = this.selectRef) !== null && _this$selectRef2 !== void 0 && _this$selectRef2.inputRef) {
+          var _this$selectRef3, _this$selectRef3$sele, _this$selectRef4, _this$selectRef4$inpu;
+          if (providedAriaLabel) {
+            ariaLabelText = `${providedAriaLabel}. ${ariaLabelText}`;
+          }
+          fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef3 = this.selectRef) === null || _this$selectRef3 === void 0 ? void 0 : (_this$selectRef3$sele = _this$selectRef3.select.inputRef) === null || _this$selectRef3$sele === void 0 ? void 0 : _this$selectRef3$sele.setAttribute('aria-label', ariaLabelText) : (_this$selectRef4 = this.selectRef) === null || _this$selectRef4 === void 0 ? void 0 : (_this$selectRef4$inpu = _this$selectRef4.inputRef) === null || _this$selectRef4$inpu === void 0 ? void 0 : _this$selectRef4$inpu.setAttribute('aria-label', ariaLabelText);
+        }
+      };
+      const generateNoGroupsAriaText = (onFocusProps, ariaLabelSuffix) => {
+        var _options$findIndex;
+        const {
+          focused
+        } = onFocusProps;
+        const options = (props === null || props === void 0 ? void 0 : props.options) || [];
+        const totalLength = (options === null || options === void 0 ? void 0 : options.length) + 1;
+        const optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(option => option === focused)) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
+        const optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
+        const ariaLabelText = `Option ${optionName} focused, ${optionIndex} of ${totalLength}.
+			${totalLength} results available.
+			${ariaLabelSuffix}
+			`;
+        // Option LABEL focused, 1 of 8. 8 results available.
+        // Use Up and Down to choose options, press Enter to select the currently focused option,
+        // press Escape to exit the menu.
+        return ariaLabelText;
+      };
+      const onReactSelectFocus = onFocusProps => {
+        var _props$options;
+        const ariaLabelSuffix = ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
+        let ariaLabelText = '';
+        let ariaLiveMessage = '';
+        if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
+          if (isOptionsGrouped(props.options)) {
+            const totalLength = countAllOptions(props.options);
+            ariaLiveMessage = onFocus(onFocusProps);
+            ariaLabelText = `${ariaLiveMessage} ${totalLength} results available. ${ariaLabelSuffix}`;
+          } else {
+            ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
+            ariaLiveMessage = ariaLabelText;
+          }
+          updateInputAriaLabel(ariaLabelText);
+          return ariaLiveMessage;
+        }
+      };
       const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
         onFirstUpdate: state => {
           var _mergedPopperProps$on;
@@ -332,7 +383,7 @@ export default class PopupSelect extends PureComponent {
         disabled: !focusLockEnabled,
         returnFocus: true
       }, /*#__PURE__*/React.createElement(InternalSelect, _extends({
-        "aria-label": getLabel(),
+        "aria-label": providedAriaLabel,
         backspaceRemovesValue: false,
         controlShouldRenderValue: false,
         isClearable: false,
@@ -341,18 +392,18 @@ export default class PopupSelect extends PureComponent {
         placeholder: placeholder,
         ref: this.getSelectRef
       }, props, {
-        onMenuClose: () => {
-          var _props$onMenuClose;
-          getBooleanFF('platform.design-system-team.popup-select-close_8h15h') && this.close();
-          (_props$onMenuClose = props.onMenuClose) === null || _props$onMenuClose === void 0 ? void 0 : _props$onMenuClose.call(props);
-        },
         isSearchable: showSearchControl
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
         styles: mergeStyles(this.defaultStyles, props.styles || {}),
         maxMenuHeight: this.getMaxHeight(),
         components: selectComponents,
-        onChange: this.handleSelectChange
+        onChange: this.handleSelectChange,
+        ariaLiveMessages: !showSearchControl ? {
+          // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
+          onFocus: onReactSelectFocus,
+          ...props.ariaLiveMessages // priority to use user handlers if provided
+        } : props.ariaLiveMessages
       })), footer))));
       return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/createPortal(popper, portalDestination);
     });

package/dist/es2019/PopupSelect/components.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 import { components } from 'react-select';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import ReactSelect from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "17.11.7";
+const packageVersion = "17.11.9";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/components/index.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';

package/dist/es2019/components/indicators.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
 import { components } from 'react-select';

package/dist/es2019/components/input-options.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';

package/dist/es2019/createSelect.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { mergeStyles } from 'react-select';
+import { ClearIndicator, DropdownIndicator, IndicatorSeparator, LoadingIndicator, MultiValueRemove } from './components';
 import { Input } from './components/input-aria-describedby';
 import { NoOptionsMessage } from './components/no-options';
-import { ClearIndicator, DropdownIndicator, LoadingIndicator, MultiValueRemove, IndicatorSeparator } from './components';
 import baseStyles from './styles';
-import { onFocus, isOptionsGrouped } from './utils/grouped-options-announcement';
+import { isOptionsGrouped, onFocus } from './utils/grouped-options-announcement';
 export default function createSelect(WrappedComponent) {
   const AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
     const {

package/dist/es2019/utils/grouped-options-announcement.js

@@ -20,4 +20,15 @@ export function onFocus(props) {
 // Helper function which identifies if options are grouped.
 export const isOptionsGrouped = arr => {
   return arr === null || arr === void 0 ? void 0 : arr.every(obj => obj.hasOwnProperty('options'));
+};
+
+// Helper function which calculates how many options are in total in all groups.
+export const countAllOptions = groupsArray => {
+  const totalLength = groupsArray === null || groupsArray === void 0 ? void 0 : groupsArray.reduce((acc, currentGroup) => {
+    var _group$options;
+    const group = currentGroup;
+    acc += group === null || group === void 0 ? void 0 : (_group$options = group.options) === null || _group$options === void 0 ? void 0 : _group$options.length;
+    return acc;
+  }, 0);
+  return totalLength;
 };

package/dist/esm/CountrySelect.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';

package/dist/esm/PopupSelect/PopupSelect.js

@@ -13,20 +13,23 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { PureComponent } from 'react';
+import { bind } from 'bind-event-listener';
 import { createPortal } from 'react-dom';
 import FocusLock from 'react-focus-lock';
+import NodeResolver from 'react-node-resolver';
+import { Manager, Popper, Reference } from 'react-popper';
 import Select, { mergeStyles } from 'react-select';
 import { uid } from 'react-uid';
-import { Manager, Reference, Popper } from 'react-popper';
-import NodeResolver from 'react-node-resolver';
 import { shallowEqualObjects } from 'shallow-equal';
-import DefaultSelect from '../Select';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N80 } from '@atlaskit/theme/colors';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { MenuDialog, DummyControl, defaultComponents } from './components';
+import DefaultSelect from '../Select';
 import baseStyles from '../styles';
-import { bind } from 'bind-event-listener';
-/** Are we rendering on the client or server? */
+import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
+import { defaultComponents, DummyControl, MenuDialog } from './components';
+/**
+ * Are we rendering on the client or server?
+ */
 var canUseDOM = function canUseDOM() {
   return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
 };
@@ -178,7 +181,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       });
       if (_this.selectRef) {
         var _this$selectRef$selec;
-        getBooleanFF('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec = _this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first') : _this.selectRef.openMenu('first');
+        fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec = _this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first') : _this.selectRef.openMenu('first');
       }
       if (typeof window === 'undefined') {
         return;
@@ -276,7 +279,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
       // subtract the control height to maintain consistency
       var showSearchControl = _this.showSearchControl();
-      var controlRef = getBooleanFF('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec2 = _this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef : _this.selectRef.controlRef;
+      var controlRef = fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec2 = _this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef : _this.selectRef.controlRef;
       var offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       var maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
@@ -320,7 +323,52 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           return placeholder;
         }
       };
-      var InternalSelect = getBooleanFF('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? DefaultSelect : Select;
+      var InternalSelect = fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? DefaultSelect : Select;
+      var providedAriaLabel = getLabel();
+      var updateInputAriaLabel = function updateInputAriaLabel(ariaLabelText) {
+        var _this$selectRef, _this$selectRef2;
+        // Update aria-label to get first announcement when popup opened.
+        if ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef || (_this$selectRef2 = _this.selectRef) !== null && _this$selectRef2 !== void 0 && _this$selectRef2.inputRef) {
+          var _this$selectRef3, _this$selectRef4;
+          if (providedAriaLabel) {
+            ariaLabelText = "".concat(providedAriaLabel, ". ").concat(ariaLabelText);
+          }
+          fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef3 = _this.selectRef) === null || _this$selectRef3 === void 0 || (_this$selectRef3 = _this$selectRef3.select.inputRef) === null || _this$selectRef3 === void 0 ? void 0 : _this$selectRef3.setAttribute('aria-label', ariaLabelText) : (_this$selectRef4 = _this.selectRef) === null || _this$selectRef4 === void 0 || (_this$selectRef4 = _this$selectRef4.inputRef) === null || _this$selectRef4 === void 0 ? void 0 : _this$selectRef4.setAttribute('aria-label', ariaLabelText);
+        }
+      };
+      var generateNoGroupsAriaText = function generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix) {
+        var _options$findIndex;
+        var focused = onFocusProps.focused;
+        var options = (props === null || props === void 0 ? void 0 : props.options) || [];
+        var totalLength = (options === null || options === void 0 ? void 0 : options.length) + 1;
+        var optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(function (option) {
+          return option === focused;
+        })) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
+        var optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
+        var ariaLabelText = "Option ".concat(optionName, " focused, ").concat(optionIndex, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
+        // Option LABEL focused, 1 of 8. 8 results available.
+        // Use Up and Down to choose options, press Enter to select the currently focused option,
+        // press Escape to exit the menu.
+        return ariaLabelText;
+      };
+      var onReactSelectFocus = function onReactSelectFocus(onFocusProps) {
+        var _props$options;
+        var ariaLabelSuffix = ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
+        var ariaLabelText = '';
+        var ariaLiveMessage = '';
+        if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
+          if (isOptionsGrouped(props.options)) {
+            var totalLength = countAllOptions(props.options);
+            ariaLiveMessage = onFocus(onFocusProps);
+            ariaLabelText = "".concat(ariaLiveMessage, " ").concat(totalLength, " results available. ").concat(ariaLabelSuffix);
+          } else {
+            ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
+            ariaLiveMessage = ariaLabelText;
+          }
+          updateInputAriaLabel(ariaLabelText);
+          return ariaLiveMessage;
+        }
+      };
       var popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
         onFirstUpdate: function onFirstUpdate(state) {
           var _mergedPopperProps$on;
@@ -346,7 +394,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           disabled: !focusLockEnabled,
           returnFocus: true
         }, /*#__PURE__*/React.createElement(InternalSelect, _extends({
-          "aria-label": getLabel(),
+          "aria-label": providedAriaLabel,
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
           isClearable: false,
@@ -355,18 +403,17 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           placeholder: placeholder,
           ref: _this.getSelectRef
         }, props, {
-          onMenuClose: function onMenuClose() {
-            var _props$onMenuClose;
-            getBooleanFF('platform.design-system-team.popup-select-close_8h15h') && _this.close();
-            (_props$onMenuClose = props.onMenuClose) === null || _props$onMenuClose === void 0 || _props$onMenuClose.call(props);
-          },
           isSearchable: showSearchControl
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           ,
           styles: mergeStyles(_this.defaultStyles, props.styles || {}),
           maxMenuHeight: _this.getMaxHeight(),
           components: selectComponents,
-          onChange: _this.handleSelectChange
+          onChange: _this.handleSelectChange,
+          ariaLiveMessages: !showSearchControl ? _objectSpread({
+            // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
+            onFocus: onReactSelectFocus
+          }, props.ariaLiveMessages) : props.ariaLiveMessages
         })), footer)));
       });
       return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/createPortal(popper, portalDestination);

package/dist/esm/PopupSelect/components.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["innerRef", "innerProps"];
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 import { components } from 'react-select';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/Select.js

@@ -2,7 +2,7 @@ import ReactSelect from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "17.11.7";
+var packageVersion = "17.11.9";
 export var SelectWithoutAnalytics = createSelect(ReactSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/components/index.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';

package/dist/esm/components/indicators.js

@@ -4,8 +4,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
 import { components } from 'react-select';

package/dist/esm/components/input-options.js

@@ -15,8 +15,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';

package/dist/esm/createSelect.js

@@ -4,13 +4,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["appearance", "ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "spacing", "styles", "tabSelectsValue", "validationState"];
 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; }
 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; }
-import React, { useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { mergeStyles } from 'react-select';
+import { ClearIndicator, DropdownIndicator, IndicatorSeparator, LoadingIndicator, MultiValueRemove } from './components';
 import { Input } from './components/input-aria-describedby';
 import { NoOptionsMessage } from './components/no-options';
-import { ClearIndicator, DropdownIndicator, LoadingIndicator, MultiValueRemove, IndicatorSeparator } from './components';
 import baseStyles from './styles';
-import { onFocus, isOptionsGrouped } from './utils/grouped-options-announcement';
+import { isOptionsGrouped, onFocus } from './utils/grouped-options-announcement';
 export default function createSelect(WrappedComponent) {
   var AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
     var appearance = props.appearance,

package/dist/esm/utils/grouped-options-announcement.js

@@ -20,4 +20,15 @@ export var isOptionsGrouped = function isOptionsGrouped(arr) {
   return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
     return obj.hasOwnProperty('options');
   });
+};
+
+// Helper function which calculates how many options are in total in all groups.
+export var countAllOptions = function countAllOptions(groupsArray) {
+  var totalLength = groupsArray === null || groupsArray === void 0 ? void 0 : groupsArray.reduce(function (acc, currentGroup) {
+    var _group$options;
+    var group = currentGroup;
+    acc += group === null || group === void 0 || (_group$options = group.options) === null || _group$options === void 0 ? void 0 : _group$options.length;
+    return acc;
+  }, 0);
+  return totalLength;
 };

package/dist/types/PopupSelect/PopupSelect.d.ts

@@ -1,7 +1,7 @@
 import React, { type KeyboardEventHandler, PureComponent, type ReactNode } from 'react';
-import { type PopperProps } from 'react-popper';
-import { type OptionType, type ActionMeta, type ReactSelectProps, type StylesConfig, type ValueType, type ValidationState, type AtlaskitSelectRefType } from '../types';
 import { type UnbindFn } from 'bind-event-listener';
+import { type PopperProps } from 'react-popper';
+import { type ActionMeta, type AtlaskitSelectRefType, type OptionType, type ReactSelectProps, type StylesConfig, type ValidationState, type ValueType } from '../types';
 type defaultModifiers = 'offset' | 'preventOverflow';
 type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
 interface PopupSelectTriggerProps {
@@ -22,12 +22,11 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
      */
     footer?: ReactNode;
     /**
-    The props passed down to React Popper.
-
-    Use these to override the default positioning strategy, behaviour and placement used by this library.
-    For more information, see the Popper Props section below, or [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
-
-   */
+     * The props passed down to React Popper.
+     *
+     * Use these to override the default positioning strategy, behaviour and placement used by this library.
+     * For more information, see the Popper Props section below, or [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
+     */
     popperProps?: PopperPropsNoChildren<Modifiers>;
     /**
      * The maximum number of options the select can contain without rendering the search field. The default is `5`.
@@ -49,32 +48,42 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
      */
     minMenuWidth?: number | string;
     /**
-    Render props used to anchor the popup to your content.
-
-    Make this an interactive element, such as an @atlaskit/button component.
-
-    The provided render props in `options` are detailed below:
-    - `isOpen`: The current state of the popup.
-        Use this to change the appearance of your target based on the state of your component
-    - `ref`: Pass this ref to the element the Popup should be attached to
-    - `onKeyDown`: Pass this keydown handler to the element to allow keyboard users to access the element.
-    - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
-        ensure your experience is accessible
-   */
+     * Render props used to anchor the popup to your content.
+     *
+     * Make this an interactive element, such as an @atlaskit/button component.
+     *
+     * The provided render props in `options` are detailed below:
+     * - `isOpen`: The current state of the popup.
+     * 		Use this to change the appearance of your target based on the state of your component
+     * - `ref`: Pass this ref to the element the Popup should be attached to
+     * - `onKeyDown`: Pass this keydown handler to the element to allow keyboard users to access the element.
+     * - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
+     * 		ensure your experience is accessible
+     */
     target?: (options: PopupSelectTriggerProps & {
         isOpen: boolean;
     }) => ReactNode;
     isOpen?: boolean;
     defaultIsOpen?: boolean;
-    /** Use this to set whether the component uses compact or standard spacing. */
+    /**
+     * Use this to set whether the component uses compact or standard spacing.
+     */
     spacing?: 'default' | 'compact';
-    /** @deprecated Use isInvalid instead. The state of validation if used in a form */
+    /**
+     * @deprecated Use isInvalid instead. The state of validation if used in a form
+     */
     validationState?: ValidationState;
-    /** This prop indicates if the component is in an error state. */
+    /**
+     * This prop indicates if the component is in an error state.
+     */
     isInvalid?: boolean;
-    /** This gives an accessible name to the input for people who use assistive technology. */
+    /**
+     * This gives an accessible name to the input for people who use assistive technology.
+     */
     label?: string;
-    /** The `testId` prop appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests. It will be set on the menu element when defined: `{testId}--menu` */
+    /**
+     * The `testId` prop appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests. It will be set on the menu element when defined: `{testId}--menu`
+     */
     testId?: string;
 }
 interface State<Modifiers = string> {

package/dist/types/PopupSelect/components.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type FC, type ReactNode, type CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
 import { type ControlProps, type MenuProps, type OptionType } from '../types';

package/dist/types/components/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type MultiValueRemoveProps } from '../types';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';

package/dist/types/components/indicators.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type ClearIndicatorProps, type DropdownIndicatorProps, type LoadingIndicatorProps } from '../types';
 export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;

package/dist/types/components/input-options.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type OptionProps, type OptionType } from '../types';
 export declare const CheckboxOption: <OptionT extends OptionType>(props: OptionProps<OptionT, true>) => JSX.Element;

package/dist/types/createSelect.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type Ref } from 'react';
-import { type SelectProps, type OptionType, type AsyncSelectProps, type CreatableSelectProps, type AtlaskitSelectRefType } from './types';
+import { type AsyncSelectProps, type AtlaskitSelectRefType, type CreatableSelectProps, type OptionType, type SelectProps } from './types';
 type AtlaskitSelectProps<Option extends unknown, IsMulti extends boolean> = SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>;
 export default function createSelect(WrappedComponent: ComponentType<any>): <Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & {
     ref?: Ref<AtlaskitSelectRefType>;

package/dist/types/utils/grouped-options-announcement.d.ts

@@ -2,3 +2,4 @@ import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from 'rea
 import { type GroupType, type OptionType } from '../types';
 export declare function onFocus(props: AriaOnFocusProps<OptionType, GroupBase<OptionType>>): string;
 export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;
+export declare const countAllOptions: (groupsArray: readonly GroupType<OptionType>[]) => number;

package/dist/types-ts4.5/PopupSelect/PopupSelect.d.ts

@@ -1,7 +1,7 @@
 import React, { type KeyboardEventHandler, PureComponent, type ReactNode } from 'react';
-import { type PopperProps } from 'react-popper';
-import { type OptionType, type ActionMeta, type ReactSelectProps, type StylesConfig, type ValueType, type ValidationState, type AtlaskitSelectRefType } from '../types';
 import { type UnbindFn } from 'bind-event-listener';
+import { type PopperProps } from 'react-popper';
+import { type ActionMeta, type AtlaskitSelectRefType, type OptionType, type ReactSelectProps, type StylesConfig, type ValidationState, type ValueType } from '../types';
 type defaultModifiers = 'offset' | 'preventOverflow';
 type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
 interface PopupSelectTriggerProps {
@@ -22,12 +22,11 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
      */
     footer?: ReactNode;
     /**
-    The props passed down to React Popper.
-
-    Use these to override the default positioning strategy, behaviour and placement used by this library.
-    For more information, see the Popper Props section below, or [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
-
-   */
+     * The props passed down to React Popper.
+     *
+     * Use these to override the default positioning strategy, behaviour and placement used by this library.
+     * For more information, see the Popper Props section below, or [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
+     */
     popperProps?: PopperPropsNoChildren<Modifiers>;
     /**
      * The maximum number of options the select can contain without rendering the search field. The default is `5`.
@@ -49,32 +48,42 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
      */
     minMenuWidth?: number | string;
     /**
-    Render props used to anchor the popup to your content.
-
-    Make this an interactive element, such as an @atlaskit/button component.
-
-    The provided render props in `options` are detailed below:
-    - `isOpen`: The current state of the popup.
-        Use this to change the appearance of your target based on the state of your component
-    - `ref`: Pass this ref to the element the Popup should be attached to
-    - `onKeyDown`: Pass this keydown handler to the element to allow keyboard users to access the element.
-    - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
-        ensure your experience is accessible
-   */
+     * Render props used to anchor the popup to your content.
+     *
+     * Make this an interactive element, such as an @atlaskit/button component.
+     *
+     * The provided render props in `options` are detailed below:
+     * - `isOpen`: The current state of the popup.
+     * 		Use this to change the appearance of your target based on the state of your component
+     * - `ref`: Pass this ref to the element the Popup should be attached to
+     * - `onKeyDown`: Pass this keydown handler to the element to allow keyboard users to access the element.
+     * - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
+     * 		ensure your experience is accessible
+     */
     target?: (options: PopupSelectTriggerProps & {
         isOpen: boolean;
     }) => ReactNode;
     isOpen?: boolean;
     defaultIsOpen?: boolean;
-    /** Use this to set whether the component uses compact or standard spacing. */
+    /**
+     * Use this to set whether the component uses compact or standard spacing.
+     */
     spacing?: 'default' | 'compact';
-    /** @deprecated Use isInvalid instead. The state of validation if used in a form */
+    /**
+     * @deprecated Use isInvalid instead. The state of validation if used in a form
+     */
     validationState?: ValidationState;
-    /** This prop indicates if the component is in an error state. */
+    /**
+     * This prop indicates if the component is in an error state.
+     */
     isInvalid?: boolean;
-    /** This gives an accessible name to the input for people who use assistive technology. */
+    /**
+     * This gives an accessible name to the input for people who use assistive technology.
+     */
     label?: string;
-    /** The `testId` prop appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests. It will be set on the menu element when defined: `{testId}--menu` */
+    /**
+     * The `testId` prop appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests. It will be set on the menu element when defined: `{testId}--menu`
+     */
     testId?: string;
 }
 interface State<Modifiers = string> {

package/dist/types-ts4.5/PopupSelect/components.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type FC, type ReactNode, type CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
 import { type ControlProps, type MenuProps, type OptionType } from '../types';

package/dist/types-ts4.5/components/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type MultiValueRemoveProps } from '../types';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';

package/dist/types-ts4.5/components/indicators.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type ClearIndicatorProps, type DropdownIndicatorProps, type LoadingIndicatorProps } from '../types';
 export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;

package/dist/types-ts4.5/components/input-options.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type OptionProps, type OptionType } from '../types';
 export declare const CheckboxOption: <OptionT extends OptionType>(props: OptionProps<OptionT, true>) => JSX.Element;

package/dist/types-ts4.5/createSelect.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type Ref } from 'react';
-import { type SelectProps, type OptionType, type AsyncSelectProps, type CreatableSelectProps, type AtlaskitSelectRefType } from './types';
+import { type AsyncSelectProps, type AtlaskitSelectRefType, type CreatableSelectProps, type OptionType, type SelectProps } from './types';
 type AtlaskitSelectProps<Option extends unknown, IsMulti extends boolean> = SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>;
 export default function createSelect(WrappedComponent: ComponentType<any>): <Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & {
     ref?: Ref<AtlaskitSelectRefType>;

package/dist/types-ts4.5/utils/grouped-options-announcement.d.ts

@@ -2,3 +2,4 @@ import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from 'rea
 import { type GroupType, type OptionType } from '../types';
 export declare function onFocus(props: AriaOnFocusProps<OptionType, GroupBase<OptionType>>): string;
 export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;
+export declare const countAllOptions: (groupsArray: readonly GroupType<OptionType>[]) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "17.11.7",
+	"version": "17.11.9",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,12 +43,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/icon": "^22.6.0",
+		"@atlaskit/icon": "^22.7.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^11.0.0",
+		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.54.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@atlaskit/visually-hidden": "^1.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -104,9 +104,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform.design-system-team.popup-select-close_8h15h": {
-			"type": "boolean"
-		},
 		"platform.design-system-team.use-default-select-in-popup-select_46rmj": {
 			"type": "boolean"
 		},