@atlaskit/select 17.11.10 → 17.11.12

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/select
 
+## 17.11.12
+
+### Patch Changes
+
+- [`941edf62401ae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/941edf62401ae) -
+  This version removes `platform.design-system-team.use-default-select-in-popup-select_46rmj`
+  feature flag. The `PopupSelect` component now uses the internal `Select` component ensure the
+  accessibility of options with group labels for assistive technologies.
+
+## 17.11.11
+
+### Patch Changes
+
+- [#125980](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125980)
+  [`d908d9c41ed27`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d908d9c41ed27) -
+  The parent group label in `CountrySelect` must be announced with options.
+- Updated dependencies
+
 ## 17.11.10
 
 ### Patch Changes

package/dist/cjs/CountrySelect.js

@@ -6,20 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _countries = require("./data/countries");
 var _Select = _interopRequireDefault(require("./Select"));
-/**
+var _countryGroupsAnnouncement = require("./utils/country-groups-announcement");
+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
-
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // custom option renderer
 var labelStyles = (0, _react.css)({
-  alignItems: 'center',
   display: 'flex',
+  alignItems: 'center',
   lineHeight: 1.2
 });
 var flagStyles = (0, _react.css)({
@@ -78,14 +78,33 @@ var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
 };
 
 // put it all together
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Country select__
+ *
+ * A country select {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
 var CountrySelect = function CountrySelect(props) {
+  var ariaLiveMessages = props.ariaLiveMessages,
+    options = props.options;
+  var countryOptions = options || _countries.groupedCountries;
   return (0, _react.jsx)(_Select.default, (0, _extends2.default)({
     isClearable: false,
     formatOptionLabel: formatOptionLabel,
     getOptionLabel: getOptionLabel,
     getOptionValue: getOptionValue,
     isMulti: false,
-    options: _countries.groupedCountries
+    options: countryOptions,
+    ariaLiveMessages: (0, _countryGroupsAnnouncement.isCountryOptionsGrouped)(countryOptions) ? _objectSpread({
+      onFocus: function onFocus(data) {
+        return (0, _countryGroupsAnnouncement.onCountryOptionFocus)(data, countryOptions);
+      }
+    }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
   }, props));
 };
 var _default = exports.default = CountrySelect;

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -21,10 +21,9 @@ 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 _reactSelect = require("react-select");
 var _reactUid = require("react-uid");
 var _shallowEqual = require("shallow-equal");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _Select = _interopRequireDefault(require("../Select"));
 var _styles = _interopRequireDefault(require("../styles"));
@@ -86,6 +85,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuRef", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowClick", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowKeydown", null);
@@ -191,7 +191,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       });
       if (_this.selectRef) {
         var _this$selectRef$selec;
-        (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');
+        (_this$selectRef$selec = _this.selectRef.select) === null || _this$selectRef$selec === void 0 || _this$selectRef$selec.openMenu('first');
       }
       if (typeof window === 'undefined') {
         return;
@@ -289,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.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 controlRef = (_this$selectRef$selec2 = _this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef;
       var offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       var maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
@@ -333,29 +333,28 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           return placeholder;
         }
       };
-      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;
+        var _this$selectRef;
         // 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 ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef) {
+          var _this$selectRef2;
           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);
+          (_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);
         }
       };
       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 totalLength = options === null || options === void 0 ? void 0 : options.length;
         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");
+        var ariaLabelText = "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
         // 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.
@@ -369,7 +368,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         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);
+            ariaLiveMessage = (0, _groupedOptionsAnnouncement.onFocus)(onFocusProps, props.options);
             ariaLabelText = "".concat(ariaLiveMessage, " ").concat(totalLength, " results available. ").concat(ariaLabelSuffix);
           } else {
             ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
@@ -378,6 +377,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           updateInputAriaLabel(ariaLabelText);
           return ariaLiveMessage;
         }
+        return ariaLiveMessage;
       };
       var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, {
         onFirstUpdate: function onFirstUpdate(state) {
@@ -403,7 +403,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
           disabled: !focusLockEnabled,
           returnFocus: true
-        }, /*#__PURE__*/_react.default.createElement(InternalSelect, (0, _extends2.default)({
+        }, /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({
           "aria-label": providedAriaLabel,
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,

package/dist/cjs/PopupSelect/components.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultComponents = exports.MenuDialog = exports.DummyControl = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _reactSelect = require("react-select");
 var _react = require("@emotion/react");
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _reactSelect = require("react-select");
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _excluded = ["innerRef", "innerProps"];
 /**
  * @jsxRuntime classic
@@ -24,11 +24,17 @@ var _excluded = ["innerRef", "innerProps"];
 // ==============================
 
 var menuDialogStyles = (0, _react.css)({
+  zIndex: _constants.layers.modal(),
   backgroundColor: "var(--ds-surface-overlay, white)",
   borderRadius: "var(--ds-border-radius-100, 4px)",
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")"),
-  zIndex: _constants.layers.modal()
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")")
 });
+
+/**
+ * __Menu dialog__
+ * Wrapper for PopupSelect component.
+ *
+ */
 var MenuDialog = exports.MenuDialog = function MenuDialog(_ref) {
   var maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,
@@ -58,9 +64,9 @@ var MenuDialog = exports.MenuDialog = function MenuDialog(_ref) {
 // ==============================
 
 var dropdownStyles = (0, _react.css)({
+  width: 32,
   marginInlineEnd: "var(--ds-space-025, 2px)",
-  textAlign: 'center',
-  width: 32
+  textAlign: 'center'
 });
 var DropdownIndicator = function DropdownIndicator() {
   return (0, _react.jsx)("div", {
@@ -83,6 +89,11 @@ var Control = function Control(_ref2) {
     innerProps: innerProps
   })));
 };
+
+/**
+ * __Dummy control__
+ * Overrides the default DummyControl component in Select.
+ */
 var DummyControl = exports.DummyControl = function DummyControl(props) {
   return (0, _react.jsx)(_visuallyHidden.default, null, (0, _react.jsx)(_reactSelect.components.Control, props));
 };
@@ -93,8 +104,20 @@ var Menu = function Menu(_ref3) {
     innerProps = _ref3.innerProps;
   return (0, _react.jsx)("div", innerProps, children);
 };
+var IndicatorSeparator = function IndicatorSeparator(props) {
+  return (0, _react.jsx)(_reactSelect.components.IndicatorSeparator, props);
+};
+var ClearIndicator = function ClearIndicator(props) {
+  return (0, _react.jsx)(_reactSelect.components.ClearIndicator, props);
+};
+var MultiValueRemove = function MultiValueRemove(props) {
+  return (0, _react.jsx)(_reactSelect.components.MultiValueRemove, props);
+};
 var defaultComponents = exports.defaultComponents = {
   Control: Control,
   DropdownIndicator: DropdownIndicator,
-  Menu: Menu
+  Menu: Menu,
+  IndicatorSeparator: IndicatorSeparator,
+  ClearIndicator: ClearIndicator,
+  MultiValueRemove: MultiValueRemove
 };

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.10";
+var packageVersion = "17.11.12";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/createSelect.js

@@ -90,7 +90,9 @@ function createSelect(WrappedComponent) {
       ref: internalSelectRef,
       "aria-live": "assertive",
       ariaLiveMessages: (0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options) ? _objectSpread({
-        onFocus: _groupedOptionsAnnouncement.onFocus
+        onFocus: function onFocus(data) {
+          return (0, _groupedOptionsAnnouncement.onFocus)(data, props.options);
+        }
       }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
       tabSelectsValue: tabSelectsValue,
       onClickPreventDefault: onClickPreventDefault

package/dist/cjs/index.js

@@ -83,6 +83,12 @@ Object.defineProperty(exports, "default", {
     return _select.default;
   }
 });
+Object.defineProperty(exports, "isCountryOptionsGrouped", {
+  enumerable: true,
+  get: function get() {
+    return _countryGroupsAnnouncement.isCountryOptionsGrouped;
+  }
+});
 Object.defineProperty(exports, "isOptionsGrouped", {
   enumerable: true,
   get: function get() {
@@ -95,6 +101,12 @@ Object.defineProperty(exports, "mergeStyles", {
     return _reactSelect.mergeStyles;
   }
 });
+Object.defineProperty(exports, "onCountryOptionFocus", {
+  enumerable: true,
+  get: function get() {
+    return _countryGroupsAnnouncement.onCountryOptionFocus;
+  }
+});
 Object.defineProperty(exports, "useAsync", {
   enumerable: true,
   get: function get() {
@@ -116,6 +128,7 @@ var _asyncSelect = _interopRequireDefault(require("./entry-points/async-select")
 var _creatableSelect = _interopRequireDefault(require("./entry-points/creatable-select"));
 var _asyncCreatableSelect = _interopRequireDefault(require("./entry-points/async-creatable-select"));
 var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
+var _countryGroupsAnnouncement = require("./utils/country-groups-announcement");
 var _CheckboxSelect = _interopRequireDefault(require("./CheckboxSelect"));
 var _CountrySelect = _interopRequireDefault(require("./CountrySelect"));
 var _RadioSelect = _interopRequireDefault(require("./RadioSelect"));

package/dist/cjs/utils/country-groups-announcement.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isCountryOptionsGrouped = void 0;
+exports.onCountryOptionFocus = onCountryOptionFocus;
+// Used for overwriting ariaLiveMessages builtin onFocus method.
+// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
+function onCountryOptionFocus(onFocusProps, defaultOptions) {
+  var _groupData$options$fi;
+  var focused = onFocusProps.focused;
+  var isOptionFocused = function isOptionFocused(option) {
+    return option.name === focused.name;
+  };
+  var groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(function (option) {
+    var _option$options;
+    return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
+  });
+  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;
+  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 ");
+}
+
+// Helper function which identifies if options are grouped.
+var isCountryOptionsGrouped = exports.isCountryOptionsGrouped = function isCountryOptionsGrouped(arr) {
+  return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
+    return obj.hasOwnProperty('options');
+  });
+};

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

@@ -7,14 +7,13 @@ 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.
-function onFocus(props) {
+function onFocus(onFocusProps, defaultOptions) {
   var _groupData$options$fi;
-  var focused = props.focused,
-    options = props.options;
+  var focused = onFocusProps.focused;
   var isOptionFocused = function isOptionFocused(option) {
-    return option === focused;
+    return option.label === focused.label;
   };
-  var groupData = options === null || options === void 0 ? void 0 : options.find(function (option) {
+  var groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(function (option) {
     var _option$options;
     return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
   });

package/dist/es2019/CountrySelect.js

@@ -3,15 +3,16 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-
+import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx, css } from '@emotion/react';
+
 import { groupedCountries } from './data/countries';
 import Select from './Select';
+import { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
 // custom option renderer
 const labelStyles = css({
-  alignItems: 'center',
   display: 'flex',
+  alignItems: 'center',
   lineHeight: 1.2
 });
 const flagStyles = css({
@@ -62,12 +63,36 @@ const formatOptionLabel = (opt, {
 }) => context === 'value' ? controlLabel(opt) : optionLabel(opt);
 
 // put it all together
-const CountrySelect = props => jsx(Select, _extends({
-  isClearable: false,
-  formatOptionLabel: formatOptionLabel,
-  getOptionLabel: getOptionLabel,
-  getOptionValue: getOptionValue,
-  isMulti: false,
-  options: groupedCountries
-}, props));
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Country select__
+ *
+ * A country select {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+const CountrySelect = props => {
+  const {
+    ariaLiveMessages,
+    options
+  } = props;
+  const countryOptions = options || groupedCountries;
+  return jsx(Select, _extends({
+    isClearable: false,
+    formatOptionLabel: formatOptionLabel,
+    getOptionLabel: getOptionLabel,
+    getOptionValue: getOptionValue,
+    isMulti: false,
+    options: countryOptions,
+    ariaLiveMessages: isCountryOptionsGrouped(countryOptions) ? {
+      onFocus: data => onCountryOptionFocus(data, countryOptions),
+      ...ariaLiveMessages
+    } : {
+      ...ariaLiveMessages
+    }
+  }, props));
+};
 export default CountrySelect;

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -6,12 +6,11 @@ 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 { mergeStyles } from 'react-select';
 import { uid } from 'react-uid';
 import { shallowEqualObjects } from 'shallow-equal';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { N80 } from '@atlaskit/theme/colors';
-import DefaultSelect from '../Select';
+import Select from '../Select';
 import baseStyles from '../styles';
 import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
 import { defaultComponents, DummyControl, MenuDialog } from './components';
@@ -53,6 +52,7 @@ export default class PopupSelect extends PureComponent {
     var _this$defaultOpenStat;
     super(...args);
     _defineProperty(this, "menuRef", null);
+    _defineProperty(this, "selectRef", null);
     _defineProperty(this, "targetRef", null);
     _defineProperty(this, "unbindWindowClick", null);
     _defineProperty(this, "unbindWindowKeydown", null);
@@ -163,7 +163,7 @@ export default class PopupSelect extends PureComponent {
       });
       if (this.selectRef) {
         var _this$selectRef$selec;
-        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');
+        (_this$selectRef$selec = this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first');
       }
       if (typeof window === 'undefined') {
         return;
@@ -261,7 +261,7 @@ export default class PopupSelect extends PureComponent {
 
       // subtract the control height to maintain consistency
       const showSearchControl = this.showSearchControl();
-      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 controlRef = (_this$selectRef$selec2 = this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef;
       const offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       const maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
@@ -309,17 +309,16 @@ export default class PopupSelect extends PureComponent {
           return placeholder;
         }
       };
-      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;
+        var _this$selectRef, _this$selectRef$selec3;
         // 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 ((_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) {
+          var _this$selectRef2, _this$selectRef2$sele;
           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);
+          (_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);
         }
       };
       const generateNoGroupsAriaText = (onFocusProps, ariaLabelSuffix) => {
@@ -328,10 +327,10 @@ export default class PopupSelect extends PureComponent {
           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 totalLength = options === null || options === void 0 ? void 0 : options.length;
         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}.
+        const ariaLabelText = `Option ${optionName} focused, ${optionIndex + 1} of ${totalLength}.
 			${totalLength} results available.
 			${ariaLabelSuffix}
 			`;
@@ -348,7 +347,7 @@ export default class PopupSelect extends PureComponent {
         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);
+            ariaLiveMessage = onFocus(onFocusProps, props.options);
             ariaLabelText = `${ariaLiveMessage} ${totalLength} results available. ${ariaLabelSuffix}`;
           } else {
             ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
@@ -357,6 +356,7 @@ export default class PopupSelect extends PureComponent {
           updateInputAriaLabel(ariaLabelText);
           return ariaLiveMessage;
         }
+        return ariaLiveMessage;
       };
       const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
         onFirstUpdate: state => {
@@ -382,7 +382,7 @@ export default class PopupSelect extends PureComponent {
       }, /*#__PURE__*/React.createElement(FocusLock, {
         disabled: !focusLockEnabled,
         returnFocus: true
-      }, /*#__PURE__*/React.createElement(InternalSelect, _extends({
+      }, /*#__PURE__*/React.createElement(Select, _extends({
         "aria-label": providedAriaLabel,
         backspaceRemovesValue: false,
         controlShouldRenderValue: false,

package/dist/es2019/PopupSelect/components.js

@@ -4,24 +4,30 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 
-import { components } from 'react-select';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import VisuallyHidden from '@atlaskit/visually-hidden';
+import { components } from 'react-select';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
-import { layers } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
+import { layers } from '@atlaskit/theme/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 
 // ==============================
 // Styled Components
 // ==============================
 
 const menuDialogStyles = css({
+  zIndex: layers.modal(),
   backgroundColor: "var(--ds-surface-overlay, white)",
   borderRadius: "var(--ds-border-radius-100, 4px)",
-  boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N40A}, 0 4px 11px ${N40A}`})`,
-  zIndex: layers.modal()
+  boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N40A}, 0 4px 11px ${N40A}`})`
 });
+
+/**
+ * __Menu dialog__
+ * Wrapper for PopupSelect component.
+ *
+ */
 export const MenuDialog = ({
   maxWidth,
   minWidth,
@@ -50,9 +56,9 @@ export const MenuDialog = ({
 // ==============================
 
 const dropdownStyles = css({
+  width: 32,
   marginInlineEnd: "var(--ds-space-025, 2px)",
-  textAlign: 'center',
-  width: 32
+  textAlign: 'center'
 });
 const DropdownIndicator = () => jsx("div", {
   css: dropdownStyles
@@ -72,6 +78,11 @@ const Control = ({
 }, jsx(components.Control, _extends({}, props, {
   innerProps: innerProps
 })));
+
+/**
+ * __Dummy control__
+ * Overrides the default DummyControl component in Select.
+ */
 export const DummyControl = props => jsx(VisuallyHidden, null, jsx(components.Control, props));
 
 // NOTE `props` intentionally omitted from `Fragment`
@@ -79,8 +90,14 @@ const Menu = ({
   children,
   innerProps
 }) => jsx("div", innerProps, children);
+const IndicatorSeparator = props => jsx(components.IndicatorSeparator, props);
+const ClearIndicator = props => jsx(components.ClearIndicator, props);
+const MultiValueRemove = props => jsx(components.MultiValueRemove, props);
 export const defaultComponents = {
   Control,
   DropdownIndicator,
-  Menu
+  Menu,
+  IndicatorSeparator,
+  ClearIndicator,
+  MultiValueRemove
 };

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.10";
+const packageVersion = "17.11.12";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/createSelect.js

@@ -70,7 +70,7 @@ export default function createSelect(WrappedComponent) {
       ref: internalSelectRef,
       "aria-live": "assertive",
       ariaLiveMessages: isOptionsGrouped(props.options) ? {
-        onFocus,
+        onFocus: data => onFocus(data, props.options),
         ...ariaLiveMessages
       } : {
         ...ariaLiveMessages

package/dist/es2019/index.js

@@ -7,6 +7,7 @@ export { default as AsyncSelect } from './entry-points/async-select';
 export { default as CreatableSelect } from './entry-points/creatable-select';
 export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
 export { isOptionsGrouped } from './utils/grouped-options-announcement';
+export { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
 export { default as CheckboxSelect } from './CheckboxSelect';
 export { default as CountrySelect } from './CountrySelect';
 export { default as RadioSelect } from './RadioSelect';