@atlaskit/react-select 0.0.2 → 1.0.0

package/CHANGELOG.md

@@ -1,9 +1,25 @@
 # @atlaskit/react-select
 
+## 1.0.0
+
+### Major Changes
+
+- [#139777](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139777)
+  [`79c93576c6fff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/79c93576c6fff) -
+  Delete/deprecate props that are unused, used incorrectly, or bad for accessibility.
+
 ## 0.0.2
 
 ### Patch Changes
 
+- [#135374](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135374)
+  [`c7db6f8caf0cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c7db6f8caf0cd) -
+  Export async creatable API
+
+## 0.0.1
+
+### Patch Changes
+
 - [#132974](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/132974)
   [`c515f82f96ef1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c515f82f96ef1) -
   Initial fork of react-select

package/async-creatable/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/react-select/async-creatable",
+  "main": "../dist/cjs/async-creatable.js",
+  "module": "../dist/esm/async-creatable.js",
+  "module:es2019": "../dist/es2019/async-creatable.js",
+  "sideEffects": false,
+  "types": "../dist/types/async-creatable.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/async-creatable.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/async-creatable.js

@@ -13,7 +13,7 @@ var _useAsync = _interopRequireDefault(require("./use-async"));
 var _useCreatable = _interopRequireDefault(require("./use-creatable"));
 var _useStateManager = _interopRequireDefault(require("./use-state-manager"));
 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; }
+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; }
 var AsyncCreatableSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var stateManagerProps = (0, _useAsync.default)(props);
   var creatableProps = (0, _useStateManager.default)(stateManagerProps);

package/dist/cjs/async.js

@@ -18,7 +18,7 @@ var _select = _interopRequireDefault(require("./select"));
 var _useAsync = _interopRequireDefault(require("./use-async"));
 var _useStateManager = _interopRequireDefault(require("./use-state-manager"));
 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; }
+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; }
 var AsyncSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var stateManagedProps = (0, _useAsync.default)(props);
   var selectProps = (0, _useStateManager.default)(stateManagedProps);

package/dist/cjs/components/index.js

@@ -18,7 +18,7 @@ var _option = _interopRequireDefault(require("./option"));
 var _placeholder = _interopRequireDefault(require("./placeholder"));
 var _singleValue = _interopRequireDefault(require("./single-value"));
 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; }
+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; }
 var components = exports.components = {

package/dist/cjs/components/live-region.js

@@ -36,13 +36,12 @@ var LiveRegion = function LiveRegion(props) {
     isMulti = selectProps.isMulti,
     isOptionDisabled = selectProps.isOptionDisabled,
     isSearchable = selectProps.isSearchable,
+    label = selectProps.label,
     menuIsOpen = selectProps.menuIsOpen,
     options = selectProps.options,
     screenReaderStatus = selectProps.screenReaderStatus,
     tabSelectsValue = selectProps.tabSelectsValue,
     isLoading = selectProps.isLoading;
-  var ariaLabel = selectProps['aria-label'];
-  var ariaLive = selectProps['aria-live'];
 
   // Update aria live message configuration when prop changes
   var messages = (0, _react.useMemo)(function () {
@@ -65,7 +64,7 @@ var LiveRegion = function LiveRegion(props) {
 
       // If there is just one item from the action then get its label
       var selected = removedValue || option || asOption(value);
-      var label = selected ? getOptionLabel(selected) : '';
+      var _label = selected ? getOptionLabel(selected) : '';
 
       // If there are multiple items from the action then return an array of labels
       var multiSelected = selectedOptions || removedValues || undefined;
@@ -74,7 +73,7 @@ var LiveRegion = function LiveRegion(props) {
         // multiSelected items are usually items that have already been selected
         // or set by the user as a default value so we assume they are not disabled
         isDisabled: selected && isOptionDisabled(selected, selectValue),
-        label: label,
+        label: _label,
         labels: labels
       }, ariaSelection);
       message = messages.onChange(onChangeProps);
@@ -119,7 +118,7 @@ var LiveRegion = function LiveRegion(props) {
     if (messages.guidance) {
       var context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
       guidanceMsg = messages.guidance({
-        'aria-label': ariaLabel,
+        'aria-label': label,
         context: context,
         isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
         isMulti: isMulti,
@@ -129,7 +128,7 @@ var LiveRegion = function LiveRegion(props) {
       });
     }
     return guidanceMsg;
-  }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
+  }, [label, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   var ScreenReaderText = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
     id: "aria-selection"
   }, ariaSelected), (0, _react2.jsx)("span", {
@@ -142,7 +141,7 @@ var LiveRegion = function LiveRegion(props) {
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_a11yText.default, {
     id: id
   }, isInitialFocus && ScreenReaderText), (0, _react2.jsx)(_a11yText.default, {
-    "aria-live": ariaLive,
+    "aria-live": "polite",
     "aria-atomic": "false",
     "aria-relevant": "additions text",
     role: "log"

package/dist/cjs/creatable.js

@@ -18,7 +18,7 @@ var _select = _interopRequireDefault(require("./select"));
 var _useCreatable = _interopRequireDefault(require("./use-creatable"));
 var _useStateManager = _interopRequireDefault(require("./use-state-manager"));
 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; }
+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; }
 var CreatableSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var creatableProps = (0, _useStateManager.default)(props);
   var selectProps = (0, _useCreatable.default)(creatableProps);

package/dist/cjs/nonce-provider.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _cache = _interopRequireDefault(require("@emotion/cache"));
 var _react2 = require("@emotion/react");
 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; }
+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; }
 var NonceProvider = function NonceProvider(_ref) {
   var nonce = _ref.nonce,
     children = _ref.children,

package/dist/cjs/select.js

@@ -27,13 +27,12 @@ var _styles = require("./styles");
 var _theme = require("./theme");
 var _utils = require("./utils");
 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; }
+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(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 _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 _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var defaultProps = exports.defaultProps = {
-  'aria-live': 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: (0, _utils.isTouchCapable)(),
   captureMenuScroll: !(0, _utils.isTouchCapable)(),
@@ -1143,12 +1142,12 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     key: "formatOptionLabel",
     value: function formatOptionLabel(data, context) {
       if (typeof this.props.formatOptionLabel === 'function') {
-        var _inputValue = this.props.inputValue;
-        var _selectValue = this.state.selectValue;
+        var inputValue = this.props.inputValue;
+        var selectValue = this.state.selectValue;
         return this.props.formatOptionLabel(data, {
           context: context,
-          inputValue: _inputValue,
-          selectValue: _selectValue
+          inputValue: inputValue,
+          selectValue: selectValue
         });
       } else {
         return this.getOptionLabel(data);
@@ -1221,14 +1220,18 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     // ==============================
     function renderInput() {
       var _this$props8 = this.props,
-        isDisabled = _this$props8.isDisabled,
-        isSearchable = _this$props8.isSearchable,
+        descriptionId = _this$props8.descriptionId,
+        form = _this$props8.form,
         inputId = _this$props8.inputId,
         inputValue = _this$props8.inputValue,
-        tabIndex = _this$props8.tabIndex,
-        form = _this$props8.form,
+        isDisabled = _this$props8.isDisabled,
+        isInvalid = _this$props8.isInvalid,
+        isRequired = _this$props8.isRequired,
+        isSearchable = _this$props8.isSearchable,
+        label = _this$props8.label,
+        labelId = _this$props8.labelId,
         menuIsOpen = _this$props8.menuIsOpen,
-        required = _this$props8.required;
+        tabIndex = _this$props8.tabIndex;
       var _this$getComponents = this.getComponents(),
         Input = _this$getComponents.Input;
       var _this$state4 = this.state,
@@ -1242,12 +1245,11 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         'aria-autocomplete': 'list',
         'aria-expanded': menuIsOpen,
         'aria-haspopup': 'listbox',
-        'aria-errormessage': this.props['aria-errormessage'],
-        'aria-describedby': this.props['aria-describedby'],
-        'aria-invalid': this.props['aria-invalid'],
-        'aria-label': this.props['aria-label'],
-        'aria-labelledby': this.props['aria-labelledby'],
-        'aria-required': required,
+        'aria-describedby': descriptionId,
+        'aria-invalid': isInvalid,
+        'aria-label': label,
+        'aria-labelledby': labelId,
+        'aria-required': isRequired,
         role: 'combobox',
         'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId
       }, menuIsOpen && {
@@ -1255,9 +1257,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       }), !isSearchable && {
         'aria-readonly': true
       }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
-        'aria-describedby': this.getElementId('live-region')
+        'aria-describedby': descriptionId ? [descriptionId, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
       } : {
-        'aria-describedby': this.getElementId('placeholder')
+        'aria-describedby': descriptionId ? [descriptionId, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
       });
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
@@ -1528,14 +1530,14 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       if (this.hasOptions()) {
         menuUI = this.getCategorizedOptions().map(function (item) {
           if (item.type === 'group') {
-            var _data = item.data,
+            var data = item.data,
               options = item.options,
               groupIndex = item.index;
             var groupId = "".concat(_this4.getElementId('group'), "-").concat(groupIndex);
             var headingId = "".concat(groupId, "-heading");
             return /*#__PURE__*/_react.default.createElement(Group, (0, _extends2.default)({}, commonProps, {
               key: groupId,
-              data: _data,
+              data: data,
               options: options,
               Heading: GroupHeading,
               headingProps: {
@@ -1628,10 +1630,10 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         delimiter = _this$props13.delimiter,
         isDisabled = _this$props13.isDisabled,
         isMulti = _this$props13.isMulti,
-        name = _this$props13.name,
-        required = _this$props13.required;
+        isRequired = _this$props13.isRequired,
+        name = _this$props13.name;
       var selectValue = this.state.selectValue;
-      if (required && !this.hasValue() && !isDisabled) {
+      if (isRequired && !this.hasValue() && !isDisabled) {
         return /*#__PURE__*/_react.default.createElement(_internal.RequiredInput, {
           name: name,
           onFocus: this.onValueInputFocus

package/dist/cjs/state-manager.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _select = _interopRequireDefault(require("./select"));
 var _useStateManager = _interopRequireDefault(require("./use-state-manager"));
 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; }
+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; }
 /**
  * __StateManagedSelect__
  *

package/dist/cjs/utils.js

@@ -142,9 +142,9 @@ var getStyleProps = exports.getStyleProps = function getStyleProps(props, name,
 
 function handleInputChange(inputValue, actionMeta, onInputChange) {
   if (onInputChange) {
-    var _newValue = onInputChange(inputValue, actionMeta);
-    if (typeof _newValue === 'string') {
-      return _newValue;
+    var newValue = onInputChange(inputValue, actionMeta);
+    if (typeof newValue === 'string') {
+      return newValue;
     }
   }
   return inputValue;

package/dist/es2019/components/live-region.js

@@ -31,14 +31,13 @@ const LiveRegion = props => {
     isMulti,
     isOptionDisabled,
     isSearchable,
+    label,
     menuIsOpen,
     options,
     screenReaderStatus,
     tabSelectsValue,
     isLoading
   } = selectProps;
-  const ariaLabel = selectProps['aria-label'];
-  const ariaLive = selectProps['aria-live'];
 
   // Update aria live message configuration when prop changes
   const messages = useMemo(() => ({
@@ -117,7 +116,7 @@ const LiveRegion = props => {
     if (messages.guidance) {
       const context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
       guidanceMsg = messages.guidance({
-        'aria-label': ariaLabel,
+        'aria-label': label,
         context,
         isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
         isMulti,
@@ -127,7 +126,7 @@ const LiveRegion = props => {
       });
     }
     return guidanceMsg;
-  }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
+  }, [label, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   const ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
   }, ariaSelected), jsx("span", {
@@ -140,7 +139,7 @@ const LiveRegion = props => {
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {
-    "aria-live": ariaLive,
+    "aria-live": "polite",
     "aria-atomic": "false",
     "aria-relevant": "additions text",
     role: "log"

package/dist/es2019/select.js

@@ -12,7 +12,6 @@ import { defaultStyles } from './styles';
 import { defaultTheme } from './theme';
 import { classNames, cleanValue, isDocumentElement, isMobileDevice, isTouchCapable, multiValueAsValue, noop, notNullish, scrollIntoView, singleValueAsValue, valueTernary } from './utils';
 export const defaultProps = {
-  'aria-live': 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
   captureMenuScroll: !isTouchCapable(),
@@ -1226,14 +1225,18 @@ export default class Select extends Component {
   // ==============================
   renderInput() {
     const {
-      isDisabled,
-      isSearchable,
+      descriptionId,
+      form,
       inputId,
       inputValue,
-      tabIndex,
-      form,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      isSearchable,
+      label,
+      labelId,
       menuIsOpen,
-      required
+      tabIndex
     } = this.props;
     const {
       Input
@@ -1252,12 +1255,11 @@ export default class Select extends Component {
       'aria-autocomplete': 'list',
       'aria-expanded': menuIsOpen,
       'aria-haspopup': 'listbox',
-      'aria-errormessage': this.props['aria-errormessage'],
-      'aria-describedby': this.props['aria-describedby'],
-      'aria-invalid': this.props['aria-invalid'],
-      'aria-label': this.props['aria-label'],
-      'aria-labelledby': this.props['aria-labelledby'],
-      'aria-required': required,
+      'aria-describedby': descriptionId,
+      'aria-invalid': isInvalid,
+      'aria-label': label,
+      'aria-labelledby': labelId,
+      'aria-required': isRequired,
       role: 'combobox',
       'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId,
       ...(menuIsOpen && {
@@ -1267,9 +1269,9 @@ export default class Select extends Component {
         'aria-readonly': true
       }),
       ...(this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
-        'aria-describedby': this.getElementId('live-region')
+        'aria-describedby': descriptionId ? [descriptionId, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
       } : {
-        'aria-describedby': this.getElementId('placeholder')
+        'aria-describedby': descriptionId ? [descriptionId, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
       })
     };
     if (!isSearchable) {
@@ -1653,13 +1655,13 @@ export default class Select extends Component {
       delimiter,
       isDisabled,
       isMulti,
-      name,
-      required
+      isRequired,
+      name
     } = this.props;
     const {
       selectValue
     } = this.state;
-    if (required && !this.hasValue() && !isDisabled) {
+    if (isRequired && !this.hasValue() && !isDisabled) {
       return /*#__PURE__*/React.createElement(RequiredInput, {
         name: name,
         onFocus: this.onValueInputFocus

package/dist/esm/components/live-region.js

@@ -31,13 +31,12 @@ var LiveRegion = function LiveRegion(props) {
     isMulti = selectProps.isMulti,
     isOptionDisabled = selectProps.isOptionDisabled,
     isSearchable = selectProps.isSearchable,
+    label = selectProps.label,
     menuIsOpen = selectProps.menuIsOpen,
     options = selectProps.options,
     screenReaderStatus = selectProps.screenReaderStatus,
     tabSelectsValue = selectProps.tabSelectsValue,
     isLoading = selectProps.isLoading;
-  var ariaLabel = selectProps['aria-label'];
-  var ariaLive = selectProps['aria-live'];
 
   // Update aria live message configuration when prop changes
   var messages = useMemo(function () {
@@ -60,7 +59,7 @@ var LiveRegion = function LiveRegion(props) {
 
       // If there is just one item from the action then get its label
       var selected = removedValue || option || asOption(value);
-      var label = selected ? getOptionLabel(selected) : '';
+      var _label = selected ? getOptionLabel(selected) : '';
 
       // If there are multiple items from the action then return an array of labels
       var multiSelected = selectedOptions || removedValues || undefined;
@@ -69,7 +68,7 @@ var LiveRegion = function LiveRegion(props) {
         // multiSelected items are usually items that have already been selected
         // or set by the user as a default value so we assume they are not disabled
         isDisabled: selected && isOptionDisabled(selected, selectValue),
-        label: label,
+        label: _label,
         labels: labels
       }, ariaSelection);
       message = messages.onChange(onChangeProps);
@@ -114,7 +113,7 @@ var LiveRegion = function LiveRegion(props) {
     if (messages.guidance) {
       var context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
       guidanceMsg = messages.guidance({
-        'aria-label': ariaLabel,
+        'aria-label': label,
         context: context,
         isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
         isMulti: isMulti,
@@ -124,7 +123,7 @@ var LiveRegion = function LiveRegion(props) {
       });
     }
     return guidanceMsg;
-  }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
+  }, [label, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   var ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
   }, ariaSelected), jsx("span", {
@@ -137,7 +136,7 @@ var LiveRegion = function LiveRegion(props) {
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {
-    "aria-live": ariaLive,
+    "aria-live": "polite",
     "aria-atomic": "false",
     "aria-relevant": "additions text",
     role: "log"

package/dist/esm/select.js

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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; }
-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 _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import { isAppleDevice } from './accessibility/helpers';
@@ -23,7 +23,6 @@ import { defaultStyles } from './styles';
 import { defaultTheme } from './theme';
 import { classNames, cleanValue, isDocumentElement, isMobileDevice, isTouchCapable, multiValueAsValue, noop, notNullish, scrollIntoView, singleValueAsValue, valueTernary } from './utils';
 export var defaultProps = {
-  'aria-live': 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
   captureMenuScroll: !isTouchCapable(),
@@ -1133,12 +1132,12 @@ var Select = /*#__PURE__*/function (_Component) {
     key: "formatOptionLabel",
     value: function formatOptionLabel(data, context) {
       if (typeof this.props.formatOptionLabel === 'function') {
-        var _inputValue = this.props.inputValue;
-        var _selectValue = this.state.selectValue;
+        var inputValue = this.props.inputValue;
+        var selectValue = this.state.selectValue;
         return this.props.formatOptionLabel(data, {
           context: context,
-          inputValue: _inputValue,
-          selectValue: _selectValue
+          inputValue: inputValue,
+          selectValue: selectValue
         });
       } else {
         return this.getOptionLabel(data);
@@ -1211,14 +1210,18 @@ var Select = /*#__PURE__*/function (_Component) {
     // ==============================
     function renderInput() {
       var _this$props8 = this.props,
-        isDisabled = _this$props8.isDisabled,
-        isSearchable = _this$props8.isSearchable,
+        descriptionId = _this$props8.descriptionId,
+        form = _this$props8.form,
         inputId = _this$props8.inputId,
         inputValue = _this$props8.inputValue,
-        tabIndex = _this$props8.tabIndex,
-        form = _this$props8.form,
+        isDisabled = _this$props8.isDisabled,
+        isInvalid = _this$props8.isInvalid,
+        isRequired = _this$props8.isRequired,
+        isSearchable = _this$props8.isSearchable,
+        label = _this$props8.label,
+        labelId = _this$props8.labelId,
         menuIsOpen = _this$props8.menuIsOpen,
-        required = _this$props8.required;
+        tabIndex = _this$props8.tabIndex;
       var _this$getComponents = this.getComponents(),
         Input = _this$getComponents.Input;
       var _this$state4 = this.state,
@@ -1232,12 +1235,11 @@ var Select = /*#__PURE__*/function (_Component) {
         'aria-autocomplete': 'list',
         'aria-expanded': menuIsOpen,
         'aria-haspopup': 'listbox',
-        'aria-errormessage': this.props['aria-errormessage'],
-        'aria-describedby': this.props['aria-describedby'],
-        'aria-invalid': this.props['aria-invalid'],
-        'aria-label': this.props['aria-label'],
-        'aria-labelledby': this.props['aria-labelledby'],
-        'aria-required': required,
+        'aria-describedby': descriptionId,
+        'aria-invalid': isInvalid,
+        'aria-label': label,
+        'aria-labelledby': labelId,
+        'aria-required': isRequired,
         role: 'combobox',
         'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId
       }, menuIsOpen && {
@@ -1245,9 +1247,9 @@ var Select = /*#__PURE__*/function (_Component) {
       }), !isSearchable && {
         'aria-readonly': true
       }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
-        'aria-describedby': this.getElementId('live-region')
+        'aria-describedby': descriptionId ? [descriptionId, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
       } : {
-        'aria-describedby': this.getElementId('placeholder')
+        'aria-describedby': descriptionId ? [descriptionId, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
       });
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
@@ -1518,14 +1520,14 @@ var Select = /*#__PURE__*/function (_Component) {
       if (this.hasOptions()) {
         menuUI = this.getCategorizedOptions().map(function (item) {
           if (item.type === 'group') {
-            var _data = item.data,
+            var data = item.data,
               options = item.options,
               groupIndex = item.index;
             var groupId = "".concat(_this4.getElementId('group'), "-").concat(groupIndex);
             var headingId = "".concat(groupId, "-heading");
             return /*#__PURE__*/React.createElement(Group, _extends({}, commonProps, {
               key: groupId,
-              data: _data,
+              data: data,
               options: options,
               Heading: GroupHeading,
               headingProps: {
@@ -1618,10 +1620,10 @@ var Select = /*#__PURE__*/function (_Component) {
         delimiter = _this$props13.delimiter,
         isDisabled = _this$props13.isDisabled,
         isMulti = _this$props13.isMulti,
-        name = _this$props13.name,
-        required = _this$props13.required;
+        isRequired = _this$props13.isRequired,
+        name = _this$props13.name;
       var selectValue = this.state.selectValue;
-      if (required && !this.hasValue() && !isDisabled) {
+      if (isRequired && !this.hasValue() && !isDisabled) {
         return /*#__PURE__*/React.createElement(RequiredInput, {
           name: name,
           onFocus: this.onValueInputFocus

package/dist/esm/utils.js

@@ -113,9 +113,9 @@ export var getStyleProps = function getStyleProps(props, name, classNamesState)
 
 export function handleInputChange(inputValue, actionMeta, onInputChange) {
   if (onInputChange) {
-    var _newValue = onInputChange(inputValue, actionMeta);
-    if (typeof _newValue === 'string') {
-      return _newValue;
+    var newValue = onInputChange(inputValue, actionMeta);
+    if (typeof newValue === 'string') {
+      return newValue;
     }
   }
   return inputValue;

package/dist/types/select.d.ts

@@ -1,4 +1,4 @@
-import React, { type AriaAttributes, Component, type FocusEventHandler, type FormEventHandler, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback, type TouchEventHandler } from 'react';
+import React, { Component, type FocusEventHandler, type FormEventHandler, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback, type TouchEventHandler } from 'react';
 import { type AriaLiveMessages, type AriaSelection } from './accessibility';
 import { type SelectComponentsConfig } from './components';
 import { type FilterOptionOption } from './filters';
@@ -12,37 +12,20 @@ export interface FormatOptionLabelMeta<Option> {
     selectValue: Options<Option>;
 }
 export interface SelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
-    /**
-     * HTML ID of an element containing an error message related to the input
-     */
-    'aria-errormessage'?: AriaAttributes['aria-errormessage'];
-    /**
-     * Indicate if the value entered in the field is invalid
-     */
-    'aria-invalid'?: AriaAttributes['aria-invalid'];
-    /**
-     * Aria label (for assistive tech)
-     */
-    'aria-label'?: AriaAttributes['aria-label'];
-    /**
-     * HTML ID of an element that should be used as the label (for assistive tech)
-     */
-    'aria-labelledby'?: AriaAttributes['aria-labelledby'];
-    'aria-describedby'?: AriaAttributes['aria-describedby'];
-    /**
-     * Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive
-     */
-    'aria-live'?: AriaAttributes['aria-live'];
     /**
      * Customise the messages used by the aria-live component
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     ariaLiveMessages?: AriaLiveMessages<Option, IsMulti, Group>;
     /**
-     * Focus the control when it is mounted
+     * Focus the control when it is mounted. There are very few cases that this should be used, and using incorrectly may violate accessibility guidelines.
      */
     autoFocus?: boolean;
     /**
      * Remove the currently focused option when the user presses backspace when Select isClearable or isMulti
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be handled automatically to support expected keyboard accessibility.
      */
     backspaceRemovesValue: boolean;
     /**
@@ -51,6 +34,8 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     blurInputOnSelect: boolean;
     /**
      * When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     captureMenuScroll: boolean;
     /**
@@ -82,6 +67,8 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      *
      * This is useful when you have a scrollable modal and want to portal the menu out,
      * but want to avoid graphical issues.
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     closeMenuOnScroll: boolean | ((event: Event) => boolean);
     /**
@@ -96,14 +83,24 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     components: SelectComponentsConfig<Option, IsMulti, Group>;
     /**
      * Whether the value of the select, e.g. SingleValue, should be displayed in the control.
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     controlShouldRenderValue: boolean;
     /**
      * Delimiter used to join multiple values into a single HTML Input value
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     delimiter?: string;
     /**
-     * Clear all values when the user presses escape AND the menu is closed
+     * This sets the aria-describedby attribute. It sets an accessible description for the select, for people who use assistive technology. Use '<HelperMessage>' from '@atlaskit/form' is preferred.
+     */
+    descriptionId?: string;
+    /**
+     * Clear all values when the user presses escape AND the menu is closed.
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be handled automatically to support expected keyboard accessibility.
      */
     escapeClearsValue: boolean;
     /**
@@ -159,6 +156,10 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Is the select disabled
      */
     isDisabled: boolean;
+    /**
+     * Is the select invalid
+     */
+    isInvalid?: boolean;
     /**
      * Is the select in a state of loading (async)
      */
@@ -177,14 +178,28 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Support multiple selected options
      */
     isMulti: IsMulti;
+    /**
+     * This prop indicates if the component is required.
+     */
+    isRequired?: boolean;
     /**
      * Is the select direction right-to-left
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     isRtl: boolean;
     /**
      * Whether to enable search functionality
      */
     isSearchable: boolean;
+    /**
+     * This sets the aria-label attribute. It sets an accessible name for the select, for people who use assistive technology. Use of a visible label is highly recommended for greater accessibility support.
+     */
+    label?: string;
+    /**
+     * This sets the aria-labelledby attribute. It sets an accessible name for the select, for people who use assistive technology. Use of a visible label is highly recommended for greater accessibility support.
+     */
+    labelId?: string;
     /**
      * Async: Text to display when loading options
      */
@@ -220,6 +235,8 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     menuPortalTarget?: HTMLElement | null;
     /**
      * Whether to block scroll events when the menu is open
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     menuShouldBlockScroll: boolean;
     /**
@@ -274,10 +291,14 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     onMenuScrollToBottom?: (event: WheelEvent | TouchEvent) => void;
     /**
      * Allows control of whether the menu is opened when the Select is focused
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be removed to support expected accessibility interactions.
      */
     openMenuOnFocus: boolean;
     /**
      * Allows control of whether the menu is opened when the Select is clicked
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be removed to support expected accessibility interactions.
      */
     openMenuOnClick: boolean;
     /**
@@ -294,6 +315,8 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     placeholder: ReactNode;
     /**
      * Status to relay to screen readers
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     screenReaderStatus: (obj: {
         count: number;
@@ -306,14 +329,19 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     styles: StylesConfig<Option, IsMulti, Group>;
     /**
      * Theme modifier method
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     theme?: ThemeConfig;
     /**
-     * Sets the tabIndex attribute on the input
+     * Sets the tabIndex attribute on the input for focus. Since focus is already managed, the only acceptable value to be used is '-1' in rare cases when removing this field from the document tab order is required.
+     *
      */
     tabIndex: number;
     /**
      * Select the currently focused option when the user presses tab
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be handled automatically to support expected keyboard accessibility.
      */
     tabSelectsValue: boolean;
     /**
@@ -328,13 +356,8 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Sets the form attribute on the input
      */
     form?: string;
-    /**
-     * Marks the value-holding input as required for form validation
-     */
-    required?: boolean;
 }
 export declare const defaultProps: {
-    'aria-live': string;
     backspaceRemovesValue: boolean;
     blurInputOnSelect: boolean;
     captureMenuScroll: boolean;
@@ -413,7 +436,6 @@ interface CategorizedGroup<Option, Group extends GroupBase<Option>> {
 type CategorizedGroupOrOption<Option, Group extends GroupBase<Option>> = CategorizedGroup<Option, Group> | CategorizedOption<Option>;
 export default class Select<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Component<SelectProps<Option, IsMulti, Group>, State<Option, IsMulti, Group>> {
     static defaultProps: {
-        'aria-live': string;
         backspaceRemovesValue: boolean;
         blurInputOnSelect: boolean;
         captureMenuScroll: boolean;
@@ -544,9 +566,6 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         IndicatorsContainer: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: import(".").IndicatorsContainerProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
         IndicatorSeparator: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: import(".").IndicatorSeparatorProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
         Input: <Option_8, IsMulti_8 extends boolean, Group_8 extends GroupBase<Option_8>>(props: import(".").InputProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
-        /**
-         * Sets a className attribute on the outer component
-         */
         LoadingIndicator: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>({ innerProps, isRtl, size, ...restProps }: import(".").LoadingIndicatorProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
         Menu: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: import("./components/menu").MenuProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
         MenuList: <Option_11, IsMulti_11 extends boolean, Group_11 extends GroupBase<Option_11>>(props: import("./components/menu").MenuListProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element;
@@ -558,7 +577,20 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         MultiValueLabel: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>({ children, innerProps, }: import(".").MultiValueGenericProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
         MultiValueRemove: typeof import("./components/multi-value").MultiValueRemove;
         Option: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import(".").OptionProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
-        Placeholder: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import(".").PlaceholderProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
+        Placeholder: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import(".").PlaceholderProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element; /**
+         * If `true`, close the select menu when the user scrolls the document/body.
+         *
+         * If a function, takes a standard javascript `ScrollEvent` you return a boolean:
+         *
+         * `true` => The menu closes
+         *
+         * `false` => The menu stays open
+         *
+         * This is useful when you have a scrollable modal and want to portal the menu out,
+         * but want to avoid graphical issues.
+         *
+         * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+         */
         SelectContainer: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: import(".").ContainerProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
         SingleValue: <Option_20, IsMulti_20 extends boolean, Group_20 extends GroupBase<Option_20>>(props: import(".").SingleValueProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
         ValueContainer: <Option_21, IsMulti_21 extends boolean, Group_21 extends GroupBase<Option_21>>(props: import(".").ValueContainerProps<Option_21, IsMulti_21, Group_21>) => import("@emotion/react").jsx.JSX.Element;

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

@@ -1,4 +1,4 @@
-import React, { type AriaAttributes, Component, type FocusEventHandler, type FormEventHandler, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback, type TouchEventHandler } from 'react';
+import React, { Component, type FocusEventHandler, type FormEventHandler, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback, type TouchEventHandler } from 'react';
 import { type AriaLiveMessages, type AriaSelection } from './accessibility';
 import { type SelectComponentsConfig } from './components';
 import { type FilterOptionOption } from './filters';
@@ -12,37 +12,20 @@ export interface FormatOptionLabelMeta<Option> {
     selectValue: Options<Option>;
 }
 export interface SelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
-    /**
-     * HTML ID of an element containing an error message related to the input
-     */
-    'aria-errormessage'?: AriaAttributes['aria-errormessage'];
-    /**
-     * Indicate if the value entered in the field is invalid
-     */
-    'aria-invalid'?: AriaAttributes['aria-invalid'];
-    /**
-     * Aria label (for assistive tech)
-     */
-    'aria-label'?: AriaAttributes['aria-label'];
-    /**
-     * HTML ID of an element that should be used as the label (for assistive tech)
-     */
-    'aria-labelledby'?: AriaAttributes['aria-labelledby'];
-    'aria-describedby'?: AriaAttributes['aria-describedby'];
-    /**
-     * Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive
-     */
-    'aria-live'?: AriaAttributes['aria-live'];
     /**
      * Customise the messages used by the aria-live component
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     ariaLiveMessages?: AriaLiveMessages<Option, IsMulti, Group>;
     /**
-     * Focus the control when it is mounted
+     * Focus the control when it is mounted. There are very few cases that this should be used, and using incorrectly may violate accessibility guidelines.
      */
     autoFocus?: boolean;
     /**
      * Remove the currently focused option when the user presses backspace when Select isClearable or isMulti
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be handled automatically to support expected keyboard accessibility.
      */
     backspaceRemovesValue: boolean;
     /**
@@ -51,6 +34,8 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     blurInputOnSelect: boolean;
     /**
      * When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     captureMenuScroll: boolean;
     /**
@@ -82,6 +67,8 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      *
      * This is useful when you have a scrollable modal and want to portal the menu out,
      * but want to avoid graphical issues.
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     closeMenuOnScroll: boolean | ((event: Event) => boolean);
     /**
@@ -96,14 +83,24 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     components: SelectComponentsConfig<Option, IsMulti, Group>;
     /**
      * Whether the value of the select, e.g. SingleValue, should be displayed in the control.
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     controlShouldRenderValue: boolean;
     /**
      * Delimiter used to join multiple values into a single HTML Input value
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     delimiter?: string;
     /**
-     * Clear all values when the user presses escape AND the menu is closed
+     * This sets the aria-describedby attribute. It sets an accessible description for the select, for people who use assistive technology. Use '<HelperMessage>' from '@atlaskit/form' is preferred.
+     */
+    descriptionId?: string;
+    /**
+     * Clear all values when the user presses escape AND the menu is closed.
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be handled automatically to support expected keyboard accessibility.
      */
     escapeClearsValue: boolean;
     /**
@@ -159,6 +156,10 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Is the select disabled
      */
     isDisabled: boolean;
+    /**
+     * Is the select invalid
+     */
+    isInvalid?: boolean;
     /**
      * Is the select in a state of loading (async)
      */
@@ -177,14 +178,28 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Support multiple selected options
      */
     isMulti: IsMulti;
+    /**
+     * This prop indicates if the component is required.
+     */
+    isRequired?: boolean;
     /**
      * Is the select direction right-to-left
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     isRtl: boolean;
     /**
      * Whether to enable search functionality
      */
     isSearchable: boolean;
+    /**
+     * This sets the aria-label attribute. It sets an accessible name for the select, for people who use assistive technology. Use of a visible label is highly recommended for greater accessibility support.
+     */
+    label?: string;
+    /**
+     * This sets the aria-labelledby attribute. It sets an accessible name for the select, for people who use assistive technology. Use of a visible label is highly recommended for greater accessibility support.
+     */
+    labelId?: string;
     /**
      * Async: Text to display when loading options
      */
@@ -220,6 +235,8 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     menuPortalTarget?: HTMLElement | null;
     /**
      * Whether to block scroll events when the menu is open
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     menuShouldBlockScroll: boolean;
     /**
@@ -274,10 +291,14 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     onMenuScrollToBottom?: (event: WheelEvent | TouchEvent) => void;
     /**
      * Allows control of whether the menu is opened when the Select is focused
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be removed to support expected accessibility interactions.
      */
     openMenuOnFocus: boolean;
     /**
      * Allows control of whether the menu is opened when the Select is clicked
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be removed to support expected accessibility interactions.
      */
     openMenuOnClick: boolean;
     /**
@@ -294,6 +315,8 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     placeholder: ReactNode;
     /**
      * Status to relay to screen readers
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     screenReaderStatus: (obj: {
         count: number;
@@ -306,14 +329,19 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     styles: StylesConfig<Option, IsMulti, Group>;
     /**
      * Theme modifier method
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
      */
     theme?: ThemeConfig;
     /**
-     * Sets the tabIndex attribute on the input
+     * Sets the tabIndex attribute on the input for focus. Since focus is already managed, the only acceptable value to be used is '-1' in rare cases when removing this field from the document tab order is required.
+     *
      */
     tabIndex: number;
     /**
      * Select the currently focused option when the user presses tab
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be handled automatically to support expected keyboard accessibility.
      */
     tabSelectsValue: boolean;
     /**
@@ -328,13 +356,8 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Sets the form attribute on the input
      */
     form?: string;
-    /**
-     * Marks the value-holding input as required for form validation
-     */
-    required?: boolean;
 }
 export declare const defaultProps: {
-    'aria-live': string;
     backspaceRemovesValue: boolean;
     blurInputOnSelect: boolean;
     captureMenuScroll: boolean;
@@ -413,7 +436,6 @@ interface CategorizedGroup<Option, Group extends GroupBase<Option>> {
 type CategorizedGroupOrOption<Option, Group extends GroupBase<Option>> = CategorizedGroup<Option, Group> | CategorizedOption<Option>;
 export default class Select<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Component<SelectProps<Option, IsMulti, Group>, State<Option, IsMulti, Group>> {
     static defaultProps: {
-        'aria-live': string;
         backspaceRemovesValue: boolean;
         blurInputOnSelect: boolean;
         captureMenuScroll: boolean;
@@ -544,9 +566,6 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         IndicatorsContainer: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: import(".").IndicatorsContainerProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
         IndicatorSeparator: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: import(".").IndicatorSeparatorProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
         Input: <Option_8, IsMulti_8 extends boolean, Group_8 extends GroupBase<Option_8>>(props: import(".").InputProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
-        /**
-         * Sets a className attribute on the outer component
-         */
         LoadingIndicator: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>({ innerProps, isRtl, size, ...restProps }: import(".").LoadingIndicatorProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
         Menu: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: import("./components/menu").MenuProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
         MenuList: <Option_11, IsMulti_11 extends boolean, Group_11 extends GroupBase<Option_11>>(props: import("./components/menu").MenuListProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element;
@@ -558,7 +577,20 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         MultiValueLabel: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>({ children, innerProps, }: import(".").MultiValueGenericProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
         MultiValueRemove: typeof import("./components/multi-value").MultiValueRemove;
         Option: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import(".").OptionProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
-        Placeholder: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import(".").PlaceholderProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
+        Placeholder: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import(".").PlaceholderProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element; /**
+         * If `true`, close the select menu when the user scrolls the document/body.
+         *
+         * If a function, takes a standard javascript `ScrollEvent` you return a boolean:
+         *
+         * `true` => The menu closes
+         *
+         * `false` => The menu stays open
+         *
+         * This is useful when you have a scrollable modal and want to portal the menu out,
+         * but want to avoid graphical issues.
+         *
+         * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+         */
         SelectContainer: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: import(".").ContainerProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
         SingleValue: <Option_20, IsMulti_20 extends boolean, Group_20 extends GroupBase<Option_20>>(props: import(".").SingleValueProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
         ValueContainer: <Option_21, IsMulti_21 extends boolean, Group_21 extends GroupBase<Option_21>>(props: import(".").ValueContainerProps<Option_21, IsMulti_21, Group_21>) => import("@emotion/react").jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "0.0.2",
+	"version": "1.0.0",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -23,7 +23,8 @@
 		".": "./src/index.tsx",
 		"./base": "./src/select.tsx",
 		"./async": "./src/async.tsx",
-		"./creatable": "./src/creatable.tsx"
+		"./creatable": "./src/creatable.tsx",
+		"./async-creatable": "./src/async-creatable.tsx"
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^2.5.0",