@atlaskit/select 18.8.1 → 18.9.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/select
 
+## 18.9.0
+
+### Minor Changes
+
+- [#177875](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/177875)
+  [`d0c3d27216b7c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d0c3d27216b7c) -
+  Remove theme prop and merge customized components for performance
+
+### Patch Changes
+
+- Updated dependencies
+
+## 18.8.2
+
+### Patch Changes
+
+- [#174375](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174375)
+  [`89790d380dd8c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89790d380dd8c) -
+  Restore aria-live messages for PopupSelect
+
 ## 18.8.1
 
 ### Patch Changes

package/codemods/18.3.0-select-props.tsx

@@ -64,7 +64,6 @@ function updateSelectProps(j: core.JSCodeshift, source: ReturnType<typeof j>, va
 			'isRTL',
 			'menuShouldBlockScroll',
 			'screenReaderStatus',
-			'theme',
 		];
 
 		const propsToReplace = {

package/codemods/__tests__/next-select-props.tsx

@@ -22,7 +22,6 @@ describe('Update Select props', () => {
 						isRTL={true}
 						menuShouldBlockScroll={true}
 						screenReaderStatus={''}
-						theme={{}}
 					/>
 				);
 			};
@@ -54,7 +53,6 @@ describe('Update Select props', () => {
 						isRTL={true}
 						menuShouldBlockScroll={true}
 						screenReaderStatus={''}
-						theme={{}}
 					/>
 				);
 			};
@@ -73,7 +71,6 @@ describe('Update Select props', () => {
 						isRTL={true}
 						menuShouldBlockScroll={true}
 						screenReaderStatus={''}
-						theme={{}}
 					/>
 				);
 			};
@@ -108,7 +105,6 @@ describe('Update Select props', () => {
 							isRTL={true}
 							menuShouldBlockScroll={true}
 							screenReaderStatus={''}
-							theme={{}}
 						/>
 					);
 				};
@@ -247,7 +243,6 @@ describe('Update Select props', () => {
 							isRTL={true}
 							menuShouldBlockScroll={true}
 							screenReaderStatus={''}
-							theme={{}}
 						/>
 					);
 				};
@@ -264,7 +259,6 @@ describe('Update Select props', () => {
 							isRTL={true}
 							menuShouldBlockScroll={true}
 							screenReaderStatus={''}
-							theme={{}}
 						/>
 					);
 				};
@@ -289,7 +283,6 @@ describe('Update Select props', () => {
 							isRTL={true}
 							menuShouldBlockScroll={true}
 							screenReaderStatus={''}
-							theme={{}}
 						/>
 					);
 				};

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -10,10 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
@@ -33,7 +32,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 /**
  * Are we rendering on the client or server?
@@ -75,8 +74,6 @@ var isEmpty = function isEmpty(obj) {
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(PopupSelect, _PureComponent);
-  var _super = _createSuper(PopupSelect);
   function PopupSelect() {
     var _this$defaultOpenStat;
     var _this;
@@ -84,22 +81,22 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _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);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", {
+    _this = _callSuper(this, PopupSelect, [].concat(args));
+    (0, _defineProperty2.default)(_this, "menuRef", null);
+    (0, _defineProperty2.default)(_this, "selectRef", null);
+    (0, _defineProperty2.default)(_this, "targetRef", null);
+    (0, _defineProperty2.default)(_this, "unbindWindowClick", null);
+    (0, _defineProperty2.default)(_this, "unbindWindowKeydown", null);
+    (0, _defineProperty2.default)(_this, "defaultStyles", {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
           color: "var(--ds-text-subtlest, ".concat(_colors.N80, ")")
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isOpenControlled", _this.props.isOpen !== undefined);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+    (0, _defineProperty2.default)(_this, "isOpenControlled", _this.props.isOpen !== undefined);
+    (0, _defineProperty2.default)(_this, "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
+    (0, _defineProperty2.default)(_this, "state", {
       focusLockEnabled: false,
       isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: _components.defaultComponents,
@@ -107,7 +104,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
     });
     // Event Handlers
     // ==============================
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTargetKeyDown", function (event) {
+    (0, _defineProperty2.default)(_this, "handleTargetKeyDown", function (event) {
       switch (event.key) {
         case 'ArrowDown':
           _this.open();
@@ -115,7 +112,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         default:
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
+    (0, _defineProperty2.default)(_this, "handleKeyDown", function (event) {
       //We shouldn't close PopupSelect on tab event if there are custom interactive element.
       var tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
       if (_this.props.shouldCloseMenuOnTab && tabEvent) {
@@ -135,7 +132,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         _this.props.onKeyDown(event);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (_ref) {
+    (0, _defineProperty2.default)(_this, "handleClick", function (_ref) {
       var target = _ref.target;
       var isOpen = _this.state.isOpen;
       // appease flow
@@ -156,7 +153,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         _this.open();
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectChange", function (value, actionMeta) {
+    (0, _defineProperty2.default)(_this, "handleSelectChange", function (value, actionMeta) {
       var _this$props = _this.props,
         closeMenuOnSelect = _this$props.closeMenuOnSelect,
         onChange = _this$props.onChange;
@@ -167,7 +164,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         onChange(value, actionMeta);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFirstPopperUpdate", function () {
+    (0, _defineProperty2.default)(_this, "handleFirstPopperUpdate", function () {
       // When the popup opens it's focused into. Since the popup is inside a portal, it's position is
       // initially set to 0,0 - this causes the window scroll position to jump to the top. To prevent
       // this we defer enabling the focus-lock until after Popper has positioned the popup the first time.
@@ -182,7 +179,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
      *
      * @param options.controlOverride  - Force the popup to open when it's open state is being controlled
      */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "open", function (options) {
+    (0, _defineProperty2.default)(_this, "open", function (options) {
       var _this$props2 = _this.props,
         onOpen = _this$props2.onOpen,
         onMenuOpen = _this$props2.onMenuOpen;
@@ -220,7 +217,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
      *
      * @param options.controlOverride  - Force the popup to close when it's open state is being controlled
      */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (options) {
+    (0, _defineProperty2.default)(_this, "close", function (options) {
       var _this$unbindWindowKey, _this2;
       //@ts-ignore react-select unsupported props
       var _this$props3 = _this.props,
@@ -253,7 +250,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
     });
     // Refs
     // ==============================
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveTargetRef", function (popperRef) {
+    (0, _defineProperty2.default)(_this, "resolveTargetRef", function (popperRef) {
       return function (ref) {
         // avoid thrashing fn calls
         if (!_this.targetRef && popperRef && ref) {
@@ -266,7 +263,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         }
       };
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveMenuRef", function (popperRef) {
+    (0, _defineProperty2.default)(_this, "resolveMenuRef", function (popperRef) {
       return function (ref) {
         _this.menuRef = ref;
         if (typeof popperRef === 'function') {
@@ -276,14 +273,14 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         }
       };
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSelectRef", function (ref) {
+    (0, _defineProperty2.default)(_this, "getSelectRef", function (ref) {
       _this.selectRef = ref;
     });
     // Utils
     // ==============================
     // account for groups when counting options
     // this may need to be recursive, right now it just counts one level
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getItemCount", function () {
+    (0, _defineProperty2.default)(_this, "getItemCount", function () {
       var options = _this.props.options;
       var count = 0;
       options.forEach(function (groupOrOption) {
@@ -297,7 +294,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       });
       return count;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getMaxHeight", function () {
+    (0, _defineProperty2.default)(_this, "getMaxHeight", function () {
       var _this$selectRef$selec2;
       var maxMenuHeight = _this.props.maxMenuHeight;
       if (!_this.selectRef) {
@@ -312,7 +309,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       return maxHeight;
     });
     // if the threshold is exceeded, AND isSearchable is true, then display the search control
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showSearchControl", function () {
+    (0, _defineProperty2.default)(_this, "showSearchControl", function () {
       var _this$props4 = _this.props,
         searchThreshold = _this$props4.searchThreshold,
         isSearchable = _this$props4.isSearchable;
@@ -320,7 +317,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
     });
     // Renderers
     // ==============================
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSelect", function (id) {
+    (0, _defineProperty2.default)(_this, "renderSelect", function (id) {
       var _this$props5 = _this.props,
         footer = _this$props5.footer,
         label = _this$props5.label,
@@ -373,7 +370,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           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 + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
+        var ariaLabelText = (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? "".concat(optionName) : "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
         // 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.
@@ -381,7 +378,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       };
       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 ariaLabelSuffix = (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? '' : ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
         var ariaLabelText = '';
         var ariaLiveMessage = '';
         if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
@@ -445,17 +442,18 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           maxMenuHeight: _this.getMaxHeight(),
           components: selectComponents,
           onChange: _this.handleSelectChange,
-          ariaLiveMessages: !showSearchControl ? _objectSpread({
+          ariaLiveMessages: _objectSpread({
             // Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
             onFocus: onReactSelectFocus
-          }, props.ariaLiveMessages) : props.ariaLiveMessages
+          }, props.ariaLiveMessages)
         })), footer));
       });
       return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/(0, _reactDom.createPortal)(popper, portalDestination);
     });
     return _this;
   }
-  (0, _createClass2.default)(PopupSelect, [{
+  (0, _inherits2.default)(PopupSelect, _PureComponent);
+  return (0, _createClass2.default)(PopupSelect, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       if (typeof window === 'undefined') {
@@ -542,7 +540,6 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       return null;
     }
   }]);
-  return PopupSelect;
 }(_react.PureComponent);
 (0, _defineProperty2.default)(PopupSelect, "defaultProps", {
   closeMenuOnSelect: true,

package/dist/cjs/PopupSelect/components.js

@@ -108,9 +108,6 @@ var Menu = function Menu(_ref3) {
     innerProps = _ref3.innerProps;
   return (0, _react2.jsx)("div", innerProps, children);
 };
-var IndicatorSeparator = function IndicatorSeparator(props) {
-  return (0, _react2.jsx)(_reactSelect.components.IndicatorSeparator, props);
-};
 var ClearIndicator = function ClearIndicator(props) {
   return (0, _react2.jsx)(_reactSelect.components.ClearIndicator, props);
 };
@@ -121,7 +118,6 @@ var defaultComponents = exports.defaultComponents = {
   Control: Control,
   DropdownIndicator: DropdownIndicator,
   Menu: Menu,
-  IndicatorSeparator: IndicatorSeparator,
   ClearIndicator: ClearIndicator,
   MultiValueRemove: MultiValueRemove
 };

package/dist/cjs/Select.js

@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var packageName = "@atlaskit/select";
-var packageVersion = "18.8.1";
+var packageVersion = "18.9.0";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

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

@@ -10,10 +10,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -24,7 +23,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _excluded = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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; } /**
@@ -151,36 +150,35 @@ var baseOptionStyles = (0, _react2.css)({
 });
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var ControlOption = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(ControlOption, _Component);
-  var _super = _createSuper(ControlOption);
   function ControlOption() {
     var _this;
     (0, _classCallCheck2.default)(this, ControlOption);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+    _this = _callSuper(this, ControlOption, [].concat(args));
+    (0, _defineProperty2.default)(_this, "state", {
       isActive: false
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDown", function () {
+    (0, _defineProperty2.default)(_this, "onMouseDown", function () {
       return _this.setState({
         isActive: true
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseUp", function () {
+    (0, _defineProperty2.default)(_this, "onMouseUp", function () {
       return _this.setState({
         isActive: false
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
+    (0, _defineProperty2.default)(_this, "onMouseLeave", function () {
       return _this.setState({
         isActive: false
       });
     });
     return _this;
   }
-  (0, _createClass2.default)(ControlOption, [{
+  (0, _inherits2.default)(ControlOption, _Component);
+  return (0, _createClass2.default)(ControlOption, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -246,7 +244,6 @@ var ControlOption = /*#__PURE__*/function (_Component) {
       );
     }
   }]);
-  return ControlOption;
 }(_react.Component);
 var NewCheckboxIcon = function NewCheckboxIcon(props) {
   return (

package/dist/cjs/createSelect.js

@@ -11,11 +11,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _components = require("./components");
-var _inputAriaDescribedby = require("./components/input-aria-describedby");
-var _noOptions = require("./components/no-options");
 var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
-var _excluded = ["ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"];
+var _excluded = ["ariaLiveMessages", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"];
 /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 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); }
@@ -25,7 +22,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function createSelect(WrappedComponent) {
   var AtlaskitSelect = /*#__PURE__*/(0, _react.forwardRef)(function AtlaskitSelect(props, forwardedRef) {
     var ariaLiveMessages = props.ariaLiveMessages,
-      componentsProp = props.components,
       isInvalid = props.isInvalid,
       _props$onClickPrevent = props.onClickPreventDefault,
       onClickPreventDefault = _props$onClickPrevent === void 0 ? true : _props$onClickPrevent,
@@ -35,31 +31,6 @@ function createSelect(WrappedComponent) {
       validationState = _props$validationStat === void 0 ? 'default' : _props$validationStat,
       restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
     var internalSelectRef = (0, _react.useRef)(null);
-    var components = (0, _react.useMemo)(function () {
-      return _objectSpread({
-        ClearIndicator: _components.ClearIndicator,
-        DropdownIndicator: _components.DropdownIndicator,
-        LoadingIndicator: _components.LoadingIndicator,
-        MultiValueRemove: _components.MultiValueRemove,
-        IndicatorSeparator: _components.IndicatorSeparator,
-        Input: _inputAriaDescribedby.Input,
-        NoOptionsMessage: _noOptions.NoOptionsMessage
-      }, componentsProp);
-    }, [componentsProp]);
-    var descriptionId = props['aria-describedby'] || props['descriptionId'];
-    var isSearchable = props.isSearchable;
-    (0, _react.useEffect)(function () {
-      if (!isSearchable && descriptionId) {
-        var _internalSelectRef$cu;
-        // when isSearchable is false, react-select will create its own dummy input instead of using ours,
-        // so we need to manually add the additional aria-describedby using ref.
-        var input = (_internalSelectRef$cu = internalSelectRef.current) === null || _internalSelectRef$cu === void 0 ? void 0 : _internalSelectRef$cu.inputRef;
-        var ariaDescribedby = input === null || input === void 0 ? void 0 : input.getAttribute('aria-describedby');
-        if (!(ariaDescribedby !== null && ariaDescribedby !== void 0 && ariaDescribedby.includes(descriptionId))) {
-          input === null || input === void 0 || input.setAttribute('aria-describedby', "".concat(ariaDescribedby, " ").concat(descriptionId));
-        }
-      }
-    }, [descriptionId, isSearchable]);
 
     /**
      * The following `useImperativeHandle` hook exists for the sake of backwards compatibility.
@@ -72,12 +43,12 @@ function createSelect(WrappedComponent) {
       return {
         select: internalSelectRef.current,
         focus: function focus() {
-          var _internalSelectRef$cu2;
-          return (_internalSelectRef$cu2 = internalSelectRef.current) === null || _internalSelectRef$cu2 === void 0 ? void 0 : _internalSelectRef$cu2.focus();
+          var _internalSelectRef$cu;
+          return (_internalSelectRef$cu = internalSelectRef.current) === null || _internalSelectRef$cu === void 0 ? void 0 : _internalSelectRef$cu.focus();
         },
         blur: function blur() {
-          var _internalSelectRef$cu3;
-          return (_internalSelectRef$cu3 = internalSelectRef.current) === null || _internalSelectRef$cu3 === void 0 ? void 0 : _internalSelectRef$cu3.blur();
+          var _internalSelectRef$cu2;
+          return (_internalSelectRef$cu2 = internalSelectRef.current) === null || _internalSelectRef$cu2 === void 0 ? void 0 : _internalSelectRef$cu2.blur();
         }
       };
     }, []);
@@ -86,7 +57,8 @@ function createSelect(WrappedComponent) {
       "aria-live": (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'assertive',
       ariaLiveMessages:
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : (0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options) ? _objectSpread({
+      //TO DO: Still need live region for PopupSelect because of the menu being open by default
+      (0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options) ? _objectSpread({
         onFocus: function onFocus(data) {
           return (0, _groupedOptionsAnnouncement.onFocus)(data, props.options);
         }
@@ -95,10 +67,8 @@ function createSelect(WrappedComponent) {
       onClickPreventDefault: onClickPreventDefault,
       isInvalid: isInvalid || validationState === 'error'
     }, restProps, {
-      components: components
       // indicates react-select to be async by default using the base Select component
       // so that makers can pass all async props on the base select to async load options.
-      ,
       isAsync: true
     }));
   });

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isOptionsGrouped = exports.countAllOptions = void 0;
 exports.onFocus = onFocus;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // 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(onFocusProps, defaultOptions) {
@@ -18,6 +19,9 @@ function onFocus(onFocusProps, defaultOptions) {
     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;
+  if (focused.label && groupData !== null && groupData !== void 0 && groupData.label && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
+    return "".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label);
+  }
   return "Option ".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " group, item ").concat(groupOptionIndex + 1, " out of ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.options.length, ". All in all ");
 }
 

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -348,7 +348,7 @@ export default class PopupSelect extends PureComponent {
         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 + 1} of ${totalLength}.
+        const ariaLabelText = fg('design_system_select-a11y-improvement') ? `${optionName}` : `Option ${optionName} focused, ${optionIndex + 1} of ${totalLength}.
 			${totalLength} results available.
 			${ariaLabelSuffix}
 			`;
@@ -359,7 +359,7 @@ export default class PopupSelect extends PureComponent {
       };
       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.';
+        const ariaLabelSuffix = fg('design_system_select-a11y-improvement') ? '' : ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
         let ariaLabelText = '';
         let ariaLiveMessage = '';
         if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
@@ -423,11 +423,11 @@ export default class PopupSelect extends PureComponent {
         maxMenuHeight: this.getMaxHeight(),
         components: selectComponents,
         onChange: this.handleSelectChange,
-        ariaLiveMessages: !showSearchControl ? {
+        ariaLiveMessages: {
           // 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

@@ -94,14 +94,12 @@ 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,
-  IndicatorSeparator,
   ClearIndicator,
   MultiValueRemove
 };

package/dist/es2019/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "18.8.1";
+const packageVersion = "18.9.0";
 export const SelectWithoutAnalytics = createSelect(AsyncSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({