@atlaskit/react-select 0.0.2 → 1.0.1

package/CHANGELOG.md

@@ -1,9 +1,33 @@
 # @atlaskit/react-select
 
+## 1.0.1
+
+### Patch Changes
+
+- [#140869](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140869)
+  [`f08b672eb884b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f08b672eb884b) -
+  Add back removed props as deprecated for easier migration
+
+## 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,12 +36,13 @@ 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 ariaLabel = selectProps['aria-label'] || label;
   var ariaLive = selectProps['aria-live'];
 
   // Update aria live message configuration when prop changes
@@ -65,7 +66,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 +75,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);

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,10 +27,10 @@ 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',
@@ -1143,12 +1143,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 +1221,19 @@ 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;
+        required = _this$props8.required,
+        tabIndex = _this$props8.tabIndex;
       var _this$getComponents = this.getComponents(),
         Input = _this$getComponents.Input;
       var _this$state4 = this.state,
@@ -1236,18 +1241,19 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         ariaSelection = _this$state4.ariaSelection;
       var commonProps = this.commonProps;
       var id = inputId || this.getElementId('input');
+      var description = this.props['aria-describedby'] || descriptionId || null;
 
       // aria attributes makes the JSX "noisy", separated for clarity
       var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
         'aria-autocomplete': 'list',
+        'aria-errormessage': this.props['aria-errormessage'],
         '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': description,
+        'aria-invalid': this.props['aria-invalid'] || isInvalid,
+        'aria-label': this.props['aria-label'] || label,
+        'aria-labelledby': this.props['aria-labelledby'] || labelId,
+        'aria-required': required || isRequired,
         role: 'combobox',
         'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId
       }, menuIsOpen && {
@@ -1255,9 +1261,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': description ? [description, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
       } : {
-        'aria-describedby': this.getElementId('placeholder')
+        'aria-describedby': description ? [description, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
       });
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
@@ -1528,14 +1534,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 +1634,12 @@ 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,
+        required = _this$props13.required,
+        name = _this$props13.name;
       var selectValue = this.state.selectValue;
-      if (required && !this.hasValue() && !isDisabled) {
+      var req = required || isRequired || null;
+      if (req && !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,13 +31,14 @@ const LiveRegion = props => {
     isMulti,
     isOptionDisabled,
     isSearchable,
+    label,
     menuIsOpen,
     options,
     screenReaderStatus,
     tabSelectsValue,
     isLoading
   } = selectProps;
-  const ariaLabel = selectProps['aria-label'];
+  const ariaLabel = selectProps['aria-label'] || label;
   const ariaLive = selectProps['aria-live'];
 
   // Update aria live message configuration when prop changes

package/dist/es2019/select.js

@@ -1226,14 +1226,19 @@ export default class Select extends Component {
   // ==============================
   renderInput() {
     const {
-      isDisabled,
-      isSearchable,
+      descriptionId,
+      form,
       inputId,
       inputValue,
-      tabIndex,
-      form,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      isSearchable,
+      label,
+      labelId,
       menuIsOpen,
-      required
+      required,
+      tabIndex
     } = this.props;
     const {
       Input
@@ -1246,18 +1251,19 @@ export default class Select extends Component {
       commonProps
     } = this;
     const id = inputId || this.getElementId('input');
+    const description = this.props['aria-describedby'] || descriptionId || null;
 
     // aria attributes makes the JSX "noisy", separated for clarity
     const ariaAttributes = {
       'aria-autocomplete': 'list',
+      'aria-errormessage': this.props['aria-errormessage'],
       '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': description,
+      'aria-invalid': this.props['aria-invalid'] || isInvalid,
+      'aria-label': this.props['aria-label'] || label,
+      'aria-labelledby': this.props['aria-labelledby'] || labelId,
+      'aria-required': required || isRequired,
       role: 'combobox',
       'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId,
       ...(menuIsOpen && {
@@ -1267,9 +1273,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': description ? [description, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
       } : {
-        'aria-describedby': this.getElementId('placeholder')
+        'aria-describedby': description ? [description, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
       })
     };
     if (!isSearchable) {
@@ -1653,13 +1659,15 @@ export default class Select extends Component {
       delimiter,
       isDisabled,
       isMulti,
-      name,
-      required
+      isRequired,
+      required,
+      name
     } = this.props;
     const {
       selectValue
     } = this.state;
-    if (required && !this.hasValue() && !isDisabled) {
+    const req = required || isRequired || null;
+    if (req && !this.hasValue() && !isDisabled) {
       return /*#__PURE__*/React.createElement(RequiredInput, {
         name: name,
         onFocus: this.onValueInputFocus

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

@@ -31,12 +31,13 @@ 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 ariaLabel = selectProps['aria-label'] || label;
   var ariaLive = selectProps['aria-live'];
 
   // Update aria live message configuration when prop changes
@@ -60,7 +61,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 +70,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);

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';
@@ -1133,12 +1133,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 +1211,19 @@ 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;
+        required = _this$props8.required,
+        tabIndex = _this$props8.tabIndex;
       var _this$getComponents = this.getComponents(),
         Input = _this$getComponents.Input;
       var _this$state4 = this.state,
@@ -1226,18 +1231,19 @@ var Select = /*#__PURE__*/function (_Component) {
         ariaSelection = _this$state4.ariaSelection;
       var commonProps = this.commonProps;
       var id = inputId || this.getElementId('input');
+      var description = this.props['aria-describedby'] || descriptionId || null;
 
       // aria attributes makes the JSX "noisy", separated for clarity
       var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
         'aria-autocomplete': 'list',
+        'aria-errormessage': this.props['aria-errormessage'],
         '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': description,
+        'aria-invalid': this.props['aria-invalid'] || isInvalid,
+        'aria-label': this.props['aria-label'] || label,
+        'aria-labelledby': this.props['aria-labelledby'] || labelId,
+        'aria-required': required || isRequired,
         role: 'combobox',
         'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId
       }, menuIsOpen && {
@@ -1245,9 +1251,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': description ? [description, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
       } : {
-        'aria-describedby': this.getElementId('placeholder')
+        'aria-describedby': description ? [description, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
       });
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
@@ -1518,14 +1524,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 +1624,12 @@ 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,
+        required = _this$props13.required,
+        name = _this$props13.name;
       var selectValue = this.state.selectValue;
-      if (required && !this.hasValue() && !isDisabled) {
+      var req = required || isRequired || null;
+      if (req && !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

@@ -14,35 +14,60 @@ export interface FormatOptionLabelMeta<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
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * aria-errormessage is not supported widely by assistive technologies. Do not use!
      */
     'aria-errormessage'?: AriaAttributes['aria-errormessage'];
     /**
      * Indicate if the value entered in the field is invalid
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `isInvalid` instead.
      */
     'aria-invalid'?: AriaAttributes['aria-invalid'];
     /**
      * Aria label (for assistive tech)
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `label` instead.
      */
     'aria-label'?: AriaAttributes['aria-label'];
     /**
      * HTML ID of an element that should be used as the label (for assistive tech)
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `labelId` instead.
      */
     'aria-labelledby'?: AriaAttributes['aria-labelledby'];
+    /**
+     * HTML ID of an element that should be used as a description (for assistive tech)
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `descriptionId` instead.
+     */
     '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
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Will be removed in future versions.
      */
     '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 +76,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 +109,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 +125,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 +198,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 +220,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 +277,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 +333,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 +357,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 +371,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;
     /**
@@ -330,6 +400,9 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     form?: string;
     /**
      * Marks the value-holding input as required for form validation
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `isRequired` instead.
      */
     required?: boolean;
 }
@@ -544,9 +617,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;

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

@@ -14,35 +14,60 @@ export interface FormatOptionLabelMeta<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
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * aria-errormessage is not supported widely by assistive technologies. Do not use!
      */
     'aria-errormessage'?: AriaAttributes['aria-errormessage'];
     /**
      * Indicate if the value entered in the field is invalid
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `isInvalid` instead.
      */
     'aria-invalid'?: AriaAttributes['aria-invalid'];
     /**
      * Aria label (for assistive tech)
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `label` instead.
      */
     'aria-label'?: AriaAttributes['aria-label'];
     /**
      * HTML ID of an element that should be used as the label (for assistive tech)
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `labelId` instead.
      */
     'aria-labelledby'?: AriaAttributes['aria-labelledby'];
+    /**
+     * HTML ID of an element that should be used as a description (for assistive tech)
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `descriptionId` instead.
+     */
     '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
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Will be removed in future versions.
      */
     '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 +76,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 +109,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 +125,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 +198,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 +220,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 +277,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 +333,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 +357,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 +371,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;
     /**
@@ -330,6 +400,9 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     form?: string;
     /**
      * Marks the value-holding input as required for form validation
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `isRequired` instead.
      */
     required?: boolean;
 }
@@ -544,9 +617,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;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "0.0.2",
+	"version": "1.0.1",
 	"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",