@atlaskit/select - npm Package Compare versions

Comparing version 17.3.4 to 17.4.0

dist/cjs/createSelect.js

@@ -10,14 +10,7 @@ "use strict";
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactSelect = require("react-select");
-var _memoizeOne = _interopRequireDefault(require("memoize-one"));
-var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _inputAriaDescribedby = require("./components/input-aria-describedby");
@@ -27,3 +20,3 @@ var _components = require("./components");
 var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
-var _excluded = ["styles", "validationState", "isInvalid", "spacing", "isMulti", "appearance", "ariaLiveMessages"];
+var _excluded = ["appearance", "ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "spacing", "styles", "tabSelectsValue", "validationState"];
 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); }
@@ -33,109 +26,64 @@ 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 _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function createSelect(WrappedComponent) {
-  var _class;
-  return _class = /*#__PURE__*/function (_Component) {
-    (0, _inherits2.default)(AtlaskitSelect, _Component);
-    var _super = _createSuper(AtlaskitSelect);
-    function AtlaskitSelect(props) {
-      var _this;
-      (0, _classCallCheck2.default)(this, AtlaskitSelect);
-      _this = _super.call(this, props);
-      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "components", {});
-      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "select", null);
-      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cacheComponents", function (components) {
-        _this.components = _objectSpread({
-          ClearIndicator: _components.ClearIndicator ? _components.ClearIndicator : undefined,
-          DropdownIndicator: _components.DropdownIndicator,
-          LoadingIndicator: _components.LoadingIndicator,
-          MultiValueRemove: _components.MultiValueRemove,
-          IndicatorSeparator: _components.IndicatorSeparator,
-          Input: _inputAriaDescribedby.Input
-        }, components);
-      });
-      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectRef", function (ref) {
-        _this.select = ref;
-      });
-      _this.cacheComponents = (0, _memoizeOne.default)(_this.cacheComponents, _reactFastCompare.default).bind((0, _assertThisInitialized2.default)(_this));
-      _this.cacheComponents(props.components || {});
-      return _this;
-    }
-    (0, _createClass2.default)(AtlaskitSelect, [{
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        this.cacheComponents(nextProps.components);
-      }
-    }, {
-      key: "focus",
-      value: function focus() {
-        if (this.select) {
-          this.select.focus();
+  var AtlaskitSelect = /*#__PURE__*/(0, _react.forwardRef)(function AtlaskitSelect(props, forwardedRef) {
+    var appearance = props.appearance,
+      ariaLiveMessages = props.ariaLiveMessages,
+      componentsProp = props.components,
+      isInvalid = props.isInvalid,
+      _props$onClickPrevent = props.onClickPreventDefault,
+      onClickPreventDefault = _props$onClickPrevent === void 0 ? true : _props$onClickPrevent,
+      _props$spacing = props.spacing,
+      spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
+      _props$styles = props.styles,
+      styles = _props$styles === void 0 ? {} : _props$styles,
+      _props$tabSelectsValu = props.tabSelectsValue,
+      tabSelectsValue = _props$tabSelectsValu === void 0 ? false : _props$tabSelectsValu,
+      _props$validationStat = props.validationState,
+      validationState = _props$validationStat === void 0 ? 'default' : _props$validationStat,
+      restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    var internalSelectRef = (0, _react.useRef)(null);
+    var components = (0, _react.useMemo)(function () {
+      return _objectSpread({
+        ClearIndicator: _components.ClearIndicator,
+        DropdownIndicator: _components.DropdownIndicator,
+        LoadingIndicator: _components.LoadingIndicator,
+        MultiValueRemove: _components.MultiValueRemove,
+        IndicatorSeparator: _components.IndicatorSeparator,
+        Input: _inputAriaDescribedby.Input
+      }, componentsProp);
+    }, [componentsProp]);
+    var descriptionId = props['aria-describedby'];
+    var isSearchable = props.isSearchable;
+    (0, _react.useEffect)(function () {
+      if (!isSearchable && descriptionId) {
+        var _internalSelectRef$cu;
+        // when isSearchable is false, react-select will create its own dummy input instead of using ours,
+        // so we need to manually add the additional aria-describedby using ref.
+        var input = (_internalSelectRef$cu = internalSelectRef.current) === null || _internalSelectRef$cu === void 0 ? void 0 : _internalSelectRef$cu.inputRef;
+        var ariaDescribedby = input === null || input === void 0 ? void 0 : input.getAttribute('aria-describedby');
+        if (!(ariaDescribedby !== null && ariaDescribedby !== void 0 && ariaDescribedby.includes(descriptionId))) {
+          input === null || input === void 0 || input.setAttribute('aria-describedby', "".concat(ariaDescribedby, " ").concat(descriptionId));
         }
       }
-    }, {
-      key: "blur",
-      value: function blur() {
-        if (this.select) {
-          this.select.blur();
-        }
-      }
-    }, {
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        var descriptionId = this.props['aria-describedby'];
-        if (!this.props.isSearchable && descriptionId) {
-          var _this$select;
-          // when isSearchable is false, react-select will create its own dummy input instead of using ours,
-          // so we need to manually add the additional aria-describedby using ref.
-          var input = (_this$select = this.select) === null || _this$select === void 0 ? void 0 : _this$select.inputRef;
-          var ariaDescribedby = input === null || input === void 0 ? void 0 : input.getAttribute('aria-describedby');
-          if (!(ariaDescribedby !== null && ariaDescribedby !== void 0 && ariaDescribedby.includes(descriptionId))) {
-            input === null || input === void 0 || input.setAttribute('aria-describedby', "".concat(ariaDescribedby, " ").concat(descriptionId));
-          }
-        }
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this$props = this.props,
-          styles = _this$props.styles,
-          validationState = _this$props.validationState,
-          isInvalid = _this$props.isInvalid,
-          spacing = _this$props.spacing,
-          isMulti = _this$props.isMulti,
-          appearance = _this$props.appearance,
-          ariaLiveMessages = _this$props.ariaLiveMessages,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-        var isCompact = spacing === 'compact';
-
-        // props must be spread first to stop `components` being overridden
-        return /*#__PURE__*/_react.default.createElement(WrappedComponent, (0, _extends2.default)({
-          ref: this.onSelectRef,
-          isMulti: isMulti,
-          "aria-live": "assertive",
-          ariaLiveMessages: (0, _groupedOptionsAnnouncement.isOptionsGrouped)(this.props.options) ? _objectSpread({
-            onFocus: _groupedOptionsAnnouncement.onFocus
-          }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
-        }, props, {
-          components: this.components,
-          styles: (0, _reactSelect.mergeStyles)((0, _styles.default)(
-          // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-          typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles)
-        }));
-      }
-    }]);
-    return AtlaskitSelect;
-  }(_react.Component), (0, _defineProperty2.default)(_class, "defaultProps", {
-    validationState: 'default',
-    // TODO: uncomment the next line when cleaning up validationState prop so it has a default value
-    // isInvalid: false,
-    spacing: 'default',
-    onClickPreventDefault: true,
-    tabSelectsValue: false,
-    components: {
-      Input: _inputAriaDescribedby.Input
-    },
-    styles: {}
-  }), _class;
+    }, [descriptionId, isSearchable]);
+    var isCompact = spacing === 'compact';
+    return /*#__PURE__*/_react.default.createElement(WrappedComponent
+    // @ts-ignore - mergeRefs only supports HTMLElement
+    , (0, _extends2.default)({
+      ref: (0, _mergeRefs.default)([forwardedRef, internalSelectRef]),
+      "aria-live": "assertive",
+      ariaLiveMessages: (0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options) ? _objectSpread({
+        onFocus: _groupedOptionsAnnouncement.onFocus
+      }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
+      tabSelectsValue: tabSelectsValue,
+      onClickPreventDefault: onClickPreventDefault
+    }, restProps, {
+      components: components,
+      styles: (0, _reactSelect.mergeStyles)((0, _styles.default)(
+      // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
+      typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, appearance || 'default'), styles)
+    }));
+  });
+  AtlaskitSelect.displayName = 'AtlaskitSelect';
+  return AtlaskitSelect;
 }

dist/cjs/Select.js

@@ -12,3 +12,3 @@ "use strict";
 var packageName = "@atlaskit/select";
-var packageVersion = "17.3.4";
+var packageVersion = "17.4.0";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
@@ -15,0 +15,0 @@ var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

dist/es2019/createSelect.js

 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
+import React, { useRef, useEffect, useMemo, forwardRef } from 'react';
 import { mergeStyles } from 'react-select';
-import memoizeOne from 'memoize-one';
-import isEqual from 'react-fast-compare';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { Input } from './components/input-aria-describedby';
@@ -12,45 +10,34 @@ import { ClearIndicator, DropdownIndicator, LoadingIndicator, MultiValueRemove, IndicatorSeparator } from './components';
 export default function createSelect(WrappedComponent) {
-  var _class;
-  return _class = class AtlaskitSelect extends Component {
-    constructor(props) {
-      super(props);
-      _defineProperty(this, "components", {});
-      _defineProperty(this, "select", null);
-      _defineProperty(this, "cacheComponents", components => {
-        this.components = {
-          ClearIndicator: ClearIndicator ? ClearIndicator : undefined,
-          DropdownIndicator,
-          LoadingIndicator,
-          MultiValueRemove,
-          IndicatorSeparator,
-          Input: Input,
-          ...components
-        };
-      });
-      _defineProperty(this, "onSelectRef", ref => {
-        this.select = ref;
-      });
-      this.cacheComponents = memoizeOne(this.cacheComponents, isEqual).bind(this);
-      this.cacheComponents(props.components || {});
-    }
-    UNSAFE_componentWillReceiveProps(nextProps) {
-      this.cacheComponents(nextProps.components);
-    }
-    focus() {
-      if (this.select) {
-        this.select.focus();
-      }
-    }
-    blur() {
-      if (this.select) {
-        this.select.blur();
-      }
-    }
-    componentDidMount() {
-      const descriptionId = this.props['aria-describedby'];
-      if (!this.props.isSearchable && descriptionId) {
-        var _this$select;
+  const AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
+    const {
+      appearance,
+      ariaLiveMessages,
+      components: componentsProp,
+      isInvalid,
+      // TODO: set to true when cleaning up validationState prop so it has a default value
+      onClickPreventDefault = true,
+      spacing = 'default',
+      styles = {},
+      tabSelectsValue = false,
+      validationState = 'default',
+      ...restProps
+    } = props;
+    const internalSelectRef = useRef(null);
+    const components = useMemo(() => ({
+      ClearIndicator,
+      DropdownIndicator,
+      LoadingIndicator,
+      MultiValueRemove,
+      IndicatorSeparator,
+      Input,
+      ...componentsProp
+    }), [componentsProp]);
+    const descriptionId = props['aria-describedby'];
+    const isSearchable = props.isSearchable;
+    useEffect(() => {
+      if (!isSearchable && descriptionId) {
+        var _internalSelectRef$cu;
         // when isSearchable is false, react-select will create its own dummy input instead of using ours,
         // so we need to manually add the additional aria-describedby using ref.
-        const input = (_this$select = this.select) === null || _this$select === void 0 ? void 0 : _this$select.inputRef;
+        const input = (_internalSelectRef$cu = internalSelectRef.current) === null || _internalSelectRef$cu === void 0 ? void 0 : _internalSelectRef$cu.inputRef;
         const ariaDescribedby = input === null || input === void 0 ? void 0 : input.getAttribute('aria-describedby');
@@ -61,46 +48,26 @@ if (!(ariaDescribedby !== null && ariaDescribedby !== void 0 && ariaDescribedby.includes(descriptionId))) {
       }
-    }
-    render() {
-      const {
-        styles,
-        validationState,
-        isInvalid,
-        spacing,
-        isMulti,
-        appearance,
-        ariaLiveMessages,
-        ...props
-      } = this.props;
-      const isCompact = spacing === 'compact';
-
-      // props must be spread first to stop `components` being overridden
-      return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-        ref: this.onSelectRef,
-        isMulti: isMulti,
-        "aria-live": "assertive",
-        ariaLiveMessages: isOptionsGrouped(this.props.options) ? {
-          onFocus,
-          ...ariaLiveMessages
-        } : {
-          ...ariaLiveMessages
-        }
-      }, props, {
-        components: this.components,
-        styles: mergeStyles(baseStyles(
-        // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-        typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles)
-      }));
-    }
-  }, _defineProperty(_class, "defaultProps", {
-    validationState: 'default',
-    // TODO: uncomment the next line when cleaning up validationState prop so it has a default value
-    // isInvalid: false,
-    spacing: 'default',
-    onClickPreventDefault: true,
-    tabSelectsValue: false,
-    components: {
-      Input
-    },
-    styles: {}
-  }), _class;
+    }, [descriptionId, isSearchable]);
+    const isCompact = spacing === 'compact';
+    return /*#__PURE__*/React.createElement(WrappedComponent
+    // @ts-ignore - mergeRefs only supports HTMLElement
+    , _extends({
+      ref: mergeRefs([forwardedRef, internalSelectRef]),
+      "aria-live": "assertive",
+      ariaLiveMessages: isOptionsGrouped(props.options) ? {
+        onFocus,
+        ...ariaLiveMessages
+      } : {
+        ...ariaLiveMessages
+      },
+      tabSelectsValue: tabSelectsValue,
+      onClickPreventDefault: onClickPreventDefault
+    }, restProps, {
+      components: components,
+      styles: mergeStyles(baseStyles(
+      // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
+      typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, appearance || 'default'), styles)
+    }));
+  });
+  AtlaskitSelect.displayName = 'AtlaskitSelect';
+  return AtlaskitSelect;
 }

dist/es2019/Select.js

@@ -5,3 +5,3 @@ import ReactSelect from 'react-select';
 const packageName = "@atlaskit/select";
-const packageVersion = "17.3.4";
+const packageVersion = "17.4.0";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
@@ -8,0 +8,0 @@ const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');

dist/esm/createSelect.js

 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["styles", "validationState", "isInvalid", "spacing", "isMulti", "appearance", "ariaLiveMessages"];
+var _excluded = ["appearance", "ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "spacing", "styles", "tabSelectsValue", "validationState"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React, { Component } from 'react';
+import React, { useRef, useEffect, useMemo, forwardRef } from 'react';
 import { mergeStyles } from 'react-select';
-import memoizeOne from 'memoize-one';
-import isEqual from 'react-fast-compare';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { Input } from './components/input-aria-describedby';
@@ -24,106 +15,63 @@ import { ClearIndicator, DropdownIndicator, LoadingIndicator, MultiValueRemove, IndicatorSeparator } from './components';
 export default function createSelect(WrappedComponent) {
-  var _class;
-  return _class = /*#__PURE__*/function (_Component) {
-    _inherits(AtlaskitSelect, _Component);
-    var _super = _createSuper(AtlaskitSelect);
-    function AtlaskitSelect(props) {
-      var _this;
-      _classCallCheck(this, AtlaskitSelect);
-      _this = _super.call(this, props);
-      _defineProperty(_assertThisInitialized(_this), "components", {});
-      _defineProperty(_assertThisInitialized(_this), "select", null);
-      _defineProperty(_assertThisInitialized(_this), "cacheComponents", function (components) {
-        _this.components = _objectSpread({
-          ClearIndicator: ClearIndicator ? ClearIndicator : undefined,
-          DropdownIndicator: DropdownIndicator,
-          LoadingIndicator: LoadingIndicator,
-          MultiValueRemove: MultiValueRemove,
-          IndicatorSeparator: IndicatorSeparator,
-          Input: Input
-        }, components);
-      });
-      _defineProperty(_assertThisInitialized(_this), "onSelectRef", function (ref) {
-        _this.select = ref;
-      });
-      _this.cacheComponents = memoizeOne(_this.cacheComponents, isEqual).bind(_assertThisInitialized(_this));
-      _this.cacheComponents(props.components || {});
-      return _this;
-    }
-    _createClass(AtlaskitSelect, [{
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        this.cacheComponents(nextProps.components);
-      }
-    }, {
-      key: "focus",
-      value: function focus() {
-        if (this.select) {
-          this.select.focus();
+  var AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
+    var appearance = props.appearance,
+      ariaLiveMessages = props.ariaLiveMessages,
+      componentsProp = props.components,
+      isInvalid = props.isInvalid,
+      _props$onClickPrevent = props.onClickPreventDefault,
+      onClickPreventDefault = _props$onClickPrevent === void 0 ? true : _props$onClickPrevent,
+      _props$spacing = props.spacing,
+      spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
+      _props$styles = props.styles,
+      styles = _props$styles === void 0 ? {} : _props$styles,
+      _props$tabSelectsValu = props.tabSelectsValue,
+      tabSelectsValue = _props$tabSelectsValu === void 0 ? false : _props$tabSelectsValu,
+      _props$validationStat = props.validationState,
+      validationState = _props$validationStat === void 0 ? 'default' : _props$validationStat,
+      restProps = _objectWithoutProperties(props, _excluded);
+    var internalSelectRef = useRef(null);
+    var components = useMemo(function () {
+      return _objectSpread({
+        ClearIndicator: ClearIndicator,
+        DropdownIndicator: DropdownIndicator,
+        LoadingIndicator: LoadingIndicator,
+        MultiValueRemove: MultiValueRemove,
+        IndicatorSeparator: IndicatorSeparator,
+        Input: Input
+      }, componentsProp);
+    }, [componentsProp]);
+    var descriptionId = props['aria-describedby'];
+    var isSearchable = props.isSearchable;
+    useEffect(function () {
+      if (!isSearchable && descriptionId) {
+        var _internalSelectRef$cu;
+        // when isSearchable is false, react-select will create its own dummy input instead of using ours,
+        // so we need to manually add the additional aria-describedby using ref.
+        var input = (_internalSelectRef$cu = internalSelectRef.current) === null || _internalSelectRef$cu === void 0 ? void 0 : _internalSelectRef$cu.inputRef;
+        var ariaDescribedby = input === null || input === void 0 ? void 0 : input.getAttribute('aria-describedby');
+        if (!(ariaDescribedby !== null && ariaDescribedby !== void 0 && ariaDescribedby.includes(descriptionId))) {
+          input === null || input === void 0 || input.setAttribute('aria-describedby', "".concat(ariaDescribedby, " ").concat(descriptionId));
         }
       }
-    }, {
-      key: "blur",
-      value: function blur() {
-        if (this.select) {
-          this.select.blur();
-        }
-      }
-    }, {
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        var descriptionId = this.props['aria-describedby'];
-        if (!this.props.isSearchable && descriptionId) {
-          var _this$select;
-          // when isSearchable is false, react-select will create its own dummy input instead of using ours,
-          // so we need to manually add the additional aria-describedby using ref.
-          var input = (_this$select = this.select) === null || _this$select === void 0 ? void 0 : _this$select.inputRef;
-          var ariaDescribedby = input === null || input === void 0 ? void 0 : input.getAttribute('aria-describedby');
-          if (!(ariaDescribedby !== null && ariaDescribedby !== void 0 && ariaDescribedby.includes(descriptionId))) {
-            input === null || input === void 0 || input.setAttribute('aria-describedby', "".concat(ariaDescribedby, " ").concat(descriptionId));
-          }
-        }
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this$props = this.props,
-          styles = _this$props.styles,
-          validationState = _this$props.validationState,
-          isInvalid = _this$props.isInvalid,
-          spacing = _this$props.spacing,
-          isMulti = _this$props.isMulti,
-          appearance = _this$props.appearance,
-          ariaLiveMessages = _this$props.ariaLiveMessages,
-          props = _objectWithoutProperties(_this$props, _excluded);
-        var isCompact = spacing === 'compact';
-
-        // props must be spread first to stop `components` being overridden
-        return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-          ref: this.onSelectRef,
-          isMulti: isMulti,
-          "aria-live": "assertive",
-          ariaLiveMessages: isOptionsGrouped(this.props.options) ? _objectSpread({
-            onFocus: onFocus
-          }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
-        }, props, {
-          components: this.components,
-          styles: mergeStyles(baseStyles(
-          // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-          typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles)
-        }));
-      }
-    }]);
-    return AtlaskitSelect;
-  }(Component), _defineProperty(_class, "defaultProps", {
-    validationState: 'default',
-    // TODO: uncomment the next line when cleaning up validationState prop so it has a default value
-    // isInvalid: false,
-    spacing: 'default',
-    onClickPreventDefault: true,
-    tabSelectsValue: false,
-    components: {
-      Input: Input
-    },
-    styles: {}
-  }), _class;
+    }, [descriptionId, isSearchable]);
+    var isCompact = spacing === 'compact';
+    return /*#__PURE__*/React.createElement(WrappedComponent
+    // @ts-ignore - mergeRefs only supports HTMLElement
+    , _extends({
+      ref: mergeRefs([forwardedRef, internalSelectRef]),
+      "aria-live": "assertive",
+      ariaLiveMessages: isOptionsGrouped(props.options) ? _objectSpread({
+        onFocus: onFocus
+      }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
+      tabSelectsValue: tabSelectsValue,
+      onClickPreventDefault: onClickPreventDefault
+    }, restProps, {
+      components: components,
+      styles: mergeStyles(baseStyles(
+      // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
+      typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, appearance || 'default'), styles)
+    }));
+  });
+  AtlaskitSelect.displayName = 'AtlaskitSelect';
+  return AtlaskitSelect;
 }

dist/esm/Select.js

@@ -5,3 +5,3 @@ import ReactSelect from 'react-select';
 var packageName = "@atlaskit/select";
-var packageVersion = "17.3.4";
+var packageVersion = "17.4.0";
 export var SelectWithoutAnalytics = createSelect(ReactSelect);
@@ -8,0 +8,0 @@ var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');

dist/types-ts4.5/AsyncCreatableSelect.d.ts

 /// <reference types="react" />
-declare const _default: {
-    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
-        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
+declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+}) => JSX.Element;
 export default _default;

dist/types-ts4.5/AsyncSelect.d.ts

 /// <reference types="react" />
-declare const _default: {
-    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
-        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
+declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+}) => JSX.Element;
 export default _default;

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

@@ -1,5 +0,6 @@
-import { FC } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { ClearIndicatorProps, DropdownIndicatorProps, LoadingIndicatorProps } from '../types';
-export declare const ClearIndicator: FC<ClearIndicatorProps<any>>;
-export declare const DropdownIndicator: FC<DropdownIndicatorProps<any>>;
-export declare const LoadingIndicator: FC<LoadingIndicatorProps<any>>;
+export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
+export declare const DropdownIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: DropdownIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
+export declare const LoadingIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: LoadingIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;

dist/types-ts4.5/CreatableSelect.d.ts

 /// <reference types="react" />
-declare const _default: {
-    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
-        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
+declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+}) => JSX.Element;
 export default _default;

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

@@ -1,49 +0,8 @@
-import React, { ComponentType } from 'react';
-import { type GroupBase } from 'react-select';
+import { type ComponentType, type Ref } from 'react';
 import BaseSelect from 'react-select/base';
-import { Input } from './components/input-aria-describedby';
 import { SelectProps, OptionType, AsyncSelectProps, CreatableSelectProps } from './types';
-export default function createSelect(WrappedComponent: ComponentType<any>): {
-    new <Option = OptionType, IsMulti extends boolean = false>(props: SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, GroupBase<Option>>>;
-        select: BaseSelect | null;
-        UNSAFE_componentWillReceiveProps(nextProps: SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: BaseSelect) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof Input;
-        };
-        styles: {};
-    };
-    contextType?: React.Context<any> | undefined;
-};
+type AtlaskitSelectProps<Option extends unknown, IsMulti extends boolean> = SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>;
+export default function createSelect(WrappedComponent: ComponentType<any>): <Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & {
+    ref?: Ref<BaseSelect>;
+}) => JSX.Element;
+export {};

dist/types-ts4.5/Select.d.ts

 /// <reference types="react" />
-export declare const SelectWithoutAnalytics: {
-    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
-        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
-declare const Select: {
-    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
-        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
+export declare const SelectWithoutAnalytics: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+}) => JSX.Element;
+declare const Select: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+}) => JSX.Element;
 export default Select;

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

 import { AriaOnFocusProps, GroupBase, OptionsOrGroups } from 'react-select';
 import { GroupType, OptionType } from '../types';
 export declare function onFocus(props: AriaOnFocusProps<OptionType, GroupBase<OptionType>>): string;
-export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>>) => boolean;
+export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;

dist/types/AsyncCreatableSelect.d.ts

 /// <reference types="react" />
-declare const _default: {
-    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
-        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
+declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+}) => JSX.Element;
 export default _default;

dist/types/AsyncSelect.d.ts

 /// <reference types="react" />
-declare const _default: {
-    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
-        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
+declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+}) => JSX.Element;
 export default _default;

dist/types/components/indicators.d.ts

@@ -1,5 +0,6 @@
-import { FC } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { ClearIndicatorProps, DropdownIndicatorProps, LoadingIndicatorProps } from '../types';
-export declare const ClearIndicator: FC<ClearIndicatorProps<any>>;
-export declare const DropdownIndicator: FC<DropdownIndicatorProps<any>>;
-export declare const LoadingIndicator: FC<LoadingIndicatorProps<any>>;
+export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
+export declare const DropdownIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: DropdownIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
+export declare const LoadingIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: LoadingIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;

dist/types/CreatableSelect.d.ts

 /// <reference types="react" />
-declare const _default: {
-    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
-        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
+declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+}) => JSX.Element;
 export default _default;

dist/types/createSelect.d.ts

@@ -1,49 +0,8 @@
-import React, { ComponentType } from 'react';
-import { type GroupBase } from 'react-select';
+import { type ComponentType, type Ref } from 'react';
 import BaseSelect from 'react-select/base';
-import { Input } from './components/input-aria-describedby';
 import { SelectProps, OptionType, AsyncSelectProps, CreatableSelectProps } from './types';
-export default function createSelect(WrappedComponent: ComponentType<any>): {
-    new <Option = OptionType, IsMulti extends boolean = false>(props: SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, GroupBase<Option>>>;
-        select: BaseSelect | null;
-        UNSAFE_componentWillReceiveProps(nextProps: SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: BaseSelect) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof Input;
-        };
-        styles: {};
-    };
-    contextType?: React.Context<any> | undefined;
-};
+type AtlaskitSelectProps<Option extends unknown, IsMulti extends boolean> = SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>;
+export default function createSelect(WrappedComponent: ComponentType<any>): <Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & {
+    ref?: Ref<BaseSelect>;
+}) => JSX.Element;
+export {};

dist/types/Select.d.ts

 /// <reference types="react" />
-export declare const SelectWithoutAnalytics: {
-    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
-        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
-declare const Select: {
-    new <Option = import("./types").OptionType, IsMulti extends boolean = false>(props: import("./types").SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
-        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
-        UNSAFE_componentWillReceiveProps(nextProps: import("./types").SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
-        focus(): void;
-        blur(): void;
-        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    defaultProps: {
-        validationState: string;
-        spacing: string;
-        onClickPreventDefault: boolean;
-        tabSelectsValue: boolean;
-        components: {
-            Input: typeof import("./components/input-aria-describedby").Input;
-        };
-        styles: {};
-    };
-    contextType?: import("react").Context<any> | undefined;
-};
+export declare const SelectWithoutAnalytics: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+}) => JSX.Element;
+declare const Select: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
+    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+}) => JSX.Element;
 export default Select;

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

 import { AriaOnFocusProps, GroupBase, OptionsOrGroups } from 'react-select';
 import { GroupType, OptionType } from '../types';
 export declare function onFocus(props: AriaOnFocusProps<OptionType, GroupBase<OptionType>>): string;
-export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>>) => boolean;
+export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;

package.json

 {
   "name": "@atlaskit/select",
-  "version": "17.3.4",
+  "version": "17.4.0",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
@@ -45,7 +45,8 @@ "publishConfig": {
     "@atlaskit/analytics-next": "^9.2.0",
+    "@atlaskit/ds-lib": "^2.2.5",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^16.0.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@atlaskit/visually-hidden": "^1.2.0",
@@ -56,4 +57,2 @@ "@babel/runtime": "^7.0.0",
     "bind-event-listener": "^2.1.1",
-    "memoize-one": "^6.0.0",
-    "react-fast-compare": "^3.2.0",
     "react-focus-lock": "^2.9.5",
@@ -73,3 +72,2 @@ "react-node-resolver": "^1.0.1",
     "@af/integration-testing": "*",
-    "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/ssr": "*",
@@ -76,0 +74,0 @@ "@atlaskit/visual-regression": "*",

No alert changes

Improved metrics

Dependency count

20

decreased by-4.76%

Dev dependency count

16

decreased by-5.88%

Worsened metrics

Total package byte prevSize

476143

decreased by-8.61%

Lines of code

10076

decreased by-5.85%

Dependency changes

• + Added@atlaskit/ds-lib@^2.2.5

• - Removedmemoize-one@^6.0.0

• - Removedreact-fast-compare@^3.2.0

• Updated@atlaskit/theme@^12.7.0

• Updated@atlaskit/tokens@^1.43.0