@atlaskit/select 15.7.7 → 16.0.0

package/dist/es2019/components/indicators.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import { components } from 'react-select';
 import Spinner from '@atlaskit/spinner';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
@@ -13,8 +13,11 @@ export const ClearIndicator = props => jsx(components.ClearIndicator, props, jsx
 export const DropdownIndicator = props => jsx(components.DropdownIndicator, props, jsx(DownIcon, {
   label: "open"
 }));
-export const LoadingIndicator = props => jsx("div", _extends({
-  css: props.getStyles('loadingIndicator', props)
-}, props.innerProps), jsx(Spinner, {
-  size: "small"
-}));
+export const LoadingIndicator = props => {
+  const loadingCSS = css(props.getStyles('loadingIndicator', props));
+  return jsx("div", _extends({
+    css: loadingCSS
+  }, props.innerProps), jsx(Spinner, {
+    size: "small"
+  }));
+};

package/dist/es2019/createSelect.js

@@ -25,17 +25,6 @@ export default function createSelect(WrappedComponent) {
 
       _defineProperty(this, "onSelectRef", ref => {
         this.select = ref;
-        const {
-          innerRef
-        } = this.props;
-
-        if (typeof innerRef === 'object') {
-          innerRef.current = ref;
-        }
-
-        if (typeof innerRef === 'function') {
-          innerRef(ref);
-        }
       });
 
       this.cacheComponents = memoizeOne(this.cacheComponents, isEqual).bind(this);

package/dist/es2019/entry-points/async-creatable-select.js

@@ -0,0 +1 @@
+export { default } from '../AsyncCreatableSelect';

package/dist/es2019/entry-points/async-select.js

@@ -0,0 +1 @@
+export { default } from '../AsyncSelect';

package/dist/es2019/entry-points/creatable-select.js

@@ -0,0 +1 @@
+export { default } from '../CreatableSelect';

package/dist/es2019/entry-points/select.js

@@ -0,0 +1 @@
+export { default, SelectWithoutAnalytics } from '../Select';

package/dist/es2019/index.js

@@ -1,12 +1,18 @@
 export { components, createFilter, mergeStyles } from 'react-select';
-export { makeAsyncSelect } from 'react-select/async';
-export { makeCreatableSelect } from 'react-select/creatable';
+export { useAsync } from 'react-select/async';
+export { useCreatable } from 'react-select/creatable';
 export { CheckboxOption, RadioOption } from './components/input-options';
-export { default, SelectWithoutAnalytics } from './Select';
-export { default as AsyncSelect } from './AsyncSelect';
+export { default, SelectWithoutAnalytics } from './entry-points/select';
+export { default as AsyncSelect } from './entry-points/async-select';
+export { default as CreatableSelect } from './entry-points/creatable-select';
+export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
 export { default as CheckboxSelect } from './CheckboxSelect';
 export { default as CountrySelect } from './CountrySelect';
 export { default as RadioSelect } from './RadioSelect';
-export { default as CreatableSelect } from './CreatableSelect';
-export { default as AsyncCreatableSelect } from './AsyncCreatableSelect';
-export { default as PopupSelect } from './PopupSelect';
+export { default as PopupSelect } from './PopupSelect';
+/**
+ * Types not exported on the public API, didn't find usages in sourcegraph
+ *
+ * CreatableSelectProps,
+ * PlaceholderProps,
+ */

package/dist/es2019/styles.js

@@ -219,18 +219,15 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       },
       color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
     }),
-    multiValueLabel: (css, {
-      isFocused
-    }) => ({ ...css,
+    multiValueLabel: css => ({ ...css,
       padding: '2px',
       color: 'inherit',
       paddingRight: '2px'
     }),
     multiValueRemove: (css, {
-      // @ts-ignore: missing in @types/react-select
       isFocused
     }) => ({ ...css,
-      backgroundColor: isFocused && `var(--ds-UNSAFE_util-transparent, ${R75})`,
+      backgroundColor: isFocused ? `var(--ds-UNSAFE_util-transparent, ${R75})` : undefined,
       fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
       paddingLeft: '2px',
       paddingRight: '2px',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.7.7",
+	"version": "16.0.0",
 	"sideEffects": false
 }

package/dist/esm/PopupSelect/PopupSelect.js

@@ -127,8 +127,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         default:
       }
 
-      if (_this.props.handleKeyDown) {
-        _this.props.handleKeyDown(event);
+      if (_this.props.onKeyDown) {
+        /* @ts-ignore - updating type of event React.KeyboardEvent effects the unbindWindowsKeyDown listener. Check if this can be fixed once the component gets refactor to functional */
+        _this.props.onKeyDown(event);
       }
     });
 
@@ -178,15 +179,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "open", function (options) {
-      var onOpen = _this.props.onOpen;
+      var onMenuOpen = _this.props.onMenuOpen;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
         // Prevent popup opening if it's open state is already being controlled
         return;
       }
 
-      if (onOpen) {
-        onOpen();
+      if (onMenuOpen) {
+        onMenuOpen();
       }
 
       _this.setState({
@@ -194,8 +195,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       });
 
       if (_this.selectRef) {
-        _this.selectRef.select.openMenu('first'); // HACK
-
+        _this.selectRef.openMenu('first');
       }
 
       if (typeof window === 'undefined') {
@@ -214,19 +214,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "close", function (options) {
       var _this$unbindWindowKey, _this2;
 
-      var _this$props2 = _this.props,
-          onClose = _this$props2.onClose,
-          onMenuClose = _this$props2.onMenuClose;
+      var onMenuClose = _this.props.onMenuClose;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
         // Prevent popup closing if it's open state is already being controlled
         return;
       }
 
-      if (onClose) {
-        onClose();
-      }
-
       if (onMenuClose) {
         onMenuClose();
       }
@@ -307,27 +301,26 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
       var showSearchControl = _this.showSearchControl();
 
-      var controlRef = _this.selectRef.select.controlRef; // @ts-ignore React-select provides incomplete types for controlRef
-
-      var offsetHeight = showSearchControl ? controlRef.offsetHeight : 0;
+      var controlRef = _this.selectRef.controlRef;
+      var offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       var maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
     });
 
     _defineProperty(_assertThisInitialized(_this), "showSearchControl", function () {
-      var _this$props3 = _this.props,
-          searchThreshold = _this$props3.searchThreshold,
-          isSearchable = _this$props3.isSearchable;
+      var _this$props2 = _this.props,
+          searchThreshold = _this$props2.searchThreshold,
+          isSearchable = _this$props2.isSearchable;
       return isSearchable && _this.getItemCount() > searchThreshold;
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSelect", function () {
-      var _this$props4 = _this.props,
-          footer = _this$props4.footer,
-          maxMenuWidth = _this$props4.maxMenuWidth,
-          minMenuWidth = _this$props4.minMenuWidth,
-          target = _this$props4.target,
-          props = _objectWithoutProperties(_this$props4, _excluded);
+      var _this$props3 = _this.props,
+          footer = _this$props3.footer,
+          maxMenuWidth = _this$props3.maxMenuWidth,
+          minMenuWidth = _this$props3.minMenuWidth,
+          target = _this$props3.target,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
       var _this$state = _this.state,
           focusLockEnabled = _this$state.focusLockEnabled,

package/dist/esm/Select.js

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

package/dist/esm/components/indicators.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import { components } from 'react-select';
 import Spinner from '@atlaskit/spinner';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
@@ -18,8 +18,9 @@ export var DropdownIndicator = function DropdownIndicator(props) {
   }));
 };
 export var LoadingIndicator = function LoadingIndicator(props) {
+  var loadingCSS = css(props.getStyles('loadingIndicator', props));
   return jsx("div", _extends({
-    css: props.getStyles('loadingIndicator', props)
+    css: loadingCSS
   }, props.innerProps), jsx(Spinner, {
     size: "small"
   }));

package/dist/esm/createSelect.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _typeof from "@babel/runtime/helpers/typeof";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -49,15 +48,6 @@ export default function createSelect(WrappedComponent) {
 
       _defineProperty(_assertThisInitialized(_this), "onSelectRef", function (ref) {
         _this.select = ref;
-        var innerRef = _this.props.innerRef;
-
-        if (_typeof(innerRef) === 'object') {
-          innerRef.current = ref;
-        }
-
-        if (typeof innerRef === 'function') {
-          innerRef(ref);
-        }
       });
 
       _this.cacheComponents = memoizeOne(_this.cacheComponents, isEqual).bind(_assertThisInitialized(_this));

package/dist/esm/entry-points/async-creatable-select.js

@@ -0,0 +1 @@
+export { default } from '../AsyncCreatableSelect';

package/dist/esm/entry-points/async-select.js

@@ -0,0 +1 @@
+export { default } from '../AsyncSelect';

package/dist/esm/entry-points/creatable-select.js

@@ -0,0 +1 @@
+export { default } from '../CreatableSelect';

package/dist/esm/entry-points/select.js

@@ -0,0 +1 @@
+export { default, SelectWithoutAnalytics } from '../Select';

package/dist/esm/index.js

@@ -1,12 +1,18 @@
 export { components, createFilter, mergeStyles } from 'react-select';
-export { makeAsyncSelect } from 'react-select/async';
-export { makeCreatableSelect } from 'react-select/creatable';
+export { useAsync } from 'react-select/async';
+export { useCreatable } from 'react-select/creatable';
 export { CheckboxOption, RadioOption } from './components/input-options';
-export { default, SelectWithoutAnalytics } from './Select';
-export { default as AsyncSelect } from './AsyncSelect';
+export { default, SelectWithoutAnalytics } from './entry-points/select';
+export { default as AsyncSelect } from './entry-points/async-select';
+export { default as CreatableSelect } from './entry-points/creatable-select';
+export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
 export { default as CheckboxSelect } from './CheckboxSelect';
 export { default as CountrySelect } from './CountrySelect';
 export { default as RadioSelect } from './RadioSelect';
-export { default as CreatableSelect } from './CreatableSelect';
-export { default as AsyncCreatableSelect } from './AsyncCreatableSelect';
-export { default as PopupSelect } from './PopupSelect';
+export { default as PopupSelect } from './PopupSelect';
+/**
+ * Types not exported on the public API, didn't find usages in sourcegraph
+ *
+ * CreatableSelectProps,
+ * PlaceholderProps,
+ */

package/dist/esm/styles.js

@@ -241,18 +241,17 @@ export default function baseStyles(validationState) {
         color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
       });
     },
-    multiValueLabel: function multiValueLabel(css, _ref8) {
-      var isFocused = _ref8.isFocused;
+    multiValueLabel: function multiValueLabel(css) {
       return _objectSpread(_objectSpread({}, css), {}, {
         padding: '2px',
         color: 'inherit',
         paddingRight: '2px'
       });
     },
-    multiValueRemove: function multiValueRemove(css, _ref9) {
-      var isFocused = _ref9.isFocused;
+    multiValueRemove: function multiValueRemove(css, _ref8) {
+      var isFocused = _ref8.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        backgroundColor: isFocused && "var(--ds-UNSAFE_util-transparent, ".concat(R75, ")"),
+        backgroundColor: isFocused ? "var(--ds-UNSAFE_util-transparent, ".concat(R75, ")") : undefined,
         fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
         paddingLeft: '2px',
         paddingRight: '2px',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.7.7",
+	"version": "16.0.0",
 	"sideEffects": false
 }

package/dist/types/AsyncCreatableSelect.d.ts

@@ -1,18 +1,18 @@
 /// <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/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>;
-        select: import("react-select").default<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>> | null;
+        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/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>) => 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").default<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>>) => void;
+        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        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>> & Readonly<{
+        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<{}>;
@@ -20,16 +20,16 @@ declare const _default: {
             [key: string]: import("react").ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        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>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): 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>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): 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;

package/dist/types/AsyncSelect.d.ts

@@ -1,18 +1,18 @@
 /// <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/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>;
-        select: import("react-select").default<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>> | null;
+        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/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>) => 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").default<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>>) => void;
+        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        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>> & Readonly<{
+        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<{}>;
@@ -20,16 +20,16 @@ declare const _default: {
             [key: string]: import("react").ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        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>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): 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>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): 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;

package/dist/types/CreatableSelect.d.ts

@@ -1,18 +1,18 @@
 /// <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/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>;
-        select: import("react-select").default<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>> | null;
+        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/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupTypeBase<Option>>>) => 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").default<Option, false, import("react-select").GroupTypeBase<Option>, import("react-select/src/Select").default<Option, false, import("react-select").GroupTypeBase<Option>>>) => void;
+        onSelectRef: (ref: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>) => void;
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        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>> & Readonly<{
+        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<{}>;
@@ -20,16 +20,16 @@ declare const _default: {
             [key: string]: import("react").ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        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>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, prevState: Readonly<{}>, snapshot?: any): 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>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./types").SelectProps<Option, IsMulti>>, nextState: Readonly<{}>, nextContext: any): 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;

package/dist/types/PopupSelect/PopupSelect.d.ts

@@ -1,5 +1,5 @@
 import React, { PureComponent, ReactNode } from 'react';
-import Select from 'react-select';
+import BaseSelect from 'react-select/base';
 import { PopperProps } from 'react-popper';
 import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType, ValidationState } from '../types';
 import { UnbindFn } from 'bind-event-listener';
@@ -11,7 +11,7 @@ interface PopupSelectTriggerProps {
     'aria-expanded': boolean;
     'aria-controls'?: string;
 }
-declare type ModifierList = 'offset' | 'computeStyles' | 'preventOverflow' | 'handleFlipStyle' | 'flip' | 'popperOffsets' | 'arrow' | 'hide' | string;
+export declare type ModifierList = 'offset' | 'computeStyles' | 'preventOverflow' | 'handleFlipStyle' | 'flip' | 'popperOffsets' | 'arrow' | 'hide' | 'eventListeners' | 'applyStyles';
 export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean = false, Modifiers = ModifierList> extends ReactSelectProps<Option, IsMulti> {
     /**
      * Defines whether the menu should close when selected. Defaults to "true"
@@ -65,9 +65,13 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     }) => ReactNode;
     isOpen?: boolean;
     defaultIsOpen?: boolean;
+    /** The prop indicates if the component has a compacted look */
     spacing?: string;
+    /** @deprecated Use isInvalid instead. The state of validation if used in a form */
     validationState?: ValidationState;
+    /** This prop indicates if the component is in an error state */
     isInvalid?: boolean;
+    testId?: string;
 }
 interface State<Modifiers = string> {
     focusLockEnabled: boolean;
@@ -75,9 +79,9 @@ interface State<Modifiers = string> {
     mergedComponents: Object;
     mergedPopperProps: PopperPropsNoChildren<defaultModifiers | Modifiers>;
 }
-export default class PopupSelect<Option = OptionType, IsMulti extends boolean = false> extends PureComponent<PopupSelectProps<Option, IsMulti>, State> {
+export default class PopupSelect<Option = OptionType, IsMulti extends boolean = false, Modifiers = ModifierList> extends PureComponent<PopupSelectProps<Option, IsMulti, Modifiers>, State> {
     menuRef: HTMLElement | null;
-    selectRef: Select<Option, IsMulti> | null;
+    selectRef: BaseSelect<Option, IsMulti> | null;
     targetRef: HTMLElement | null;
     unbindWindowClick: UnbindFn | null;
     unbindWindowKeydown: UnbindFn | null;
@@ -110,7 +114,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     static getDerivedStateFromProps(props: PopupSelectProps<OptionType>, state: State): Partial<State<string>> | null;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(prevProps: PopupSelectProps<Option, IsMulti>): void;
+    componentDidUpdate(prevProps: PopupSelectProps<Option, IsMulti, Modifiers>): void;
     handleKeyDown: (event: KeyboardEvent) => void;
     handleClick: ({ target }: MouseEvent) => void;
     handleSelectChange: (value: ValueType<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
@@ -133,7 +137,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     } | undefined) => void;
     resolveTargetRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
     resolveMenuRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
-    getSelectRef: (ref: Select<Option, IsMulti>) => void;
+    getSelectRef: (ref: BaseSelect<Option, IsMulti>) => void;
     getItemCount: () => number;
     getMaxHeight: () => number | undefined;
     showSearchControl: () => boolean | undefined;

package/dist/types/PopupSelect/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './PopupSelect';
-export type { PopupSelectProps } from './PopupSelect';
+export type { PopupSelectProps, ModifierList } from './PopupSelect';