@atlaskit/select 17.4.0 → 17.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/select
 
+## 17.5.0
+
+### Minor Changes
+
+- [#87916](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87916) [`373dc429147d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/373dc429147d) - Reverted "Convert AtlaskitSelect from react class component to function component"
+
 ## 17.4.0
 
 ### Minor 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.4.0";
+var packageVersion = "17.5.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,80 +7,132 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = createSelect;
 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 _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
 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 = ["appearance", "ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "spacing", "styles", "tabSelectsValue", "validationState"];
+var _excluded = ["styles", "validationState", "isInvalid", "spacing", "isMulti", "appearance", "ariaLiveMessages"];
 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 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));
+  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();
         }
       }
-    }, [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;
+    }, {
+      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;
 }

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.4.0";
+const packageVersion = "17.5.0";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/createSelect.js

@@ -1,71 +1,104 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef, useEffect, useMemo, forwardRef } from 'react';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
 import { mergeStyles } from 'react-select';
-import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import memoizeOne from 'memoize-one';
+import isEqual from 'react-fast-compare';
 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) {
-  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;
+  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;
         // 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 = (_internalSelectRef$cu = internalSelectRef.current) === null || _internalSelectRef$cu === void 0 ? void 0 : _internalSelectRef$cu.inputRef;
+        const input = (_this$select = this.select) === null || _this$select === void 0 ? void 0 : _this$select.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}`);
         }
       }
-    }, [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;
+    }
+    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;
 }

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.4.0";
+var packageVersion = "17.5.0";
 export var SelectWithoutAnalytics = createSelect(ReactSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/createSelect.js

@@ -1,76 +1,128 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "spacing", "styles", "tabSelectsValue", "validationState"];
+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"];
 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; }
-import React, { useRef, useEffect, useMemo, forwardRef } from 'react';
+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 { mergeStyles } from 'react-select';
-import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import memoizeOne from 'memoize-one';
+import isEqual from 'react-fast-compare';
 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 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));
+  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));
+          }
         }
       }
-    }, [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;
+    }, {
+      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;
 }