@atlaskit/select 17.3.4 → 17.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/select
 
+## 17.4.0
+
+### Minor Changes
+
+- [#86848](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86848) [`fa9de32b502e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fa9de32b502e) - Convert AtlaskitSelect from react class component to function component
+
 ## 17.3.4
 
 ### Patch Changes

package/dist/cjs/Select.js

@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var packageName = "@atlaskit/select";
-var packageVersion = "17.3.4";
+var packageVersion = "17.4.0";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/createSelect.js

@@ -7,132 +7,80 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = createSelect;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 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");
 var _components = require("./components");
 var _styles = _interopRequireDefault(require("./styles"));
 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); }
 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 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 _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();
-        }
-      }
-    }, {
-      key: "blur",
-      value: function blur() {
-        if (this.select) {
-          this.select.blur();
+  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: "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;
 }

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import ReactSelect from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "17.3.4";
+const packageVersion = "17.4.0";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/createSelect.js

@@ -1,104 +1,71 @@
 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';
 import { ClearIndicator, DropdownIndicator, LoadingIndicator, MultiValueRemove, IndicatorSeparator } from './components';
 import baseStyles from './styles';
 import { onFocus, isOptionsGrouped } from './utils/grouped-options-announcement';
 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');
         if (!(ariaDescribedby !== null && ariaDescribedby !== void 0 && ariaDescribedby.includes(descriptionId))) {
           input === null || input === void 0 ? void 0 : input.setAttribute('aria-describedby', `${ariaDescribedby} ${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;
 }

package/dist/esm/Select.js

@@ -2,7 +2,7 @@ import ReactSelect from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "17.3.4";
+var packageVersion = "17.4.0";
 export var SelectWithoutAnalytics = createSelect(ReactSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/createSelect.js

@@ -1,128 +1,76 @@
 import _extends from "@babel/runtime/helpers/extends";
-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"];
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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';
 import { ClearIndicator, DropdownIndicator, LoadingIndicator, MultiValueRemove, IndicatorSeparator } from './components';
 import baseStyles from './styles';
 import { onFocus, isOptionsGrouped } from './utils/grouped-options-announcement';
 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();
-        }
-      }
-    }, {
-      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));
-          }
+  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: "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;
 }