@atlaskit/select 15.7.6 → 16.0.0

package/AsyncCreatableSelect/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@atlaskit/select/AsyncCreatableSelect",
-  "main": "../dist/cjs/AsyncCreatableSelect.js",
-  "module": "../dist/esm/AsyncCreatableSelect.js",
-  "module:es2019": "../dist/es2019/AsyncCreatableSelect.js",
+  "main": "../dist/cjs/entry-points/async-creatable-select.js",
+  "module": "../dist/esm/entry-points/async-creatable-select.js",
+  "module:es2019": "../dist/es2019/entry-points/async-creatable-select.js",
   "sideEffects": false,
-  "types": "../dist/types/AsyncCreatableSelect.d.ts",
+  "types": "../dist/types/entry-points/async-creatable-select.d.ts",
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "../dist/types-ts4.0/AsyncCreatableSelect.d.ts"
+        "../dist/types-ts4.0/entry-points/async-creatable-select.d.ts"
       ]
     }
   }

package/AsyncSelect/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@atlaskit/select/AsyncSelect",
-  "main": "../dist/cjs/AsyncSelect.js",
-  "module": "../dist/esm/AsyncSelect.js",
-  "module:es2019": "../dist/es2019/AsyncSelect.js",
+  "main": "../dist/cjs/entry-points/async-select.js",
+  "module": "../dist/esm/entry-points/async-select.js",
+  "module:es2019": "../dist/es2019/entry-points/async-select.js",
   "sideEffects": false,
-  "types": "../dist/types/AsyncSelect.d.ts",
+  "types": "../dist/types/entry-points/async-select.d.ts",
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "../dist/types-ts4.0/AsyncSelect.d.ts"
+        "../dist/types-ts4.0/entry-points/async-select.d.ts"
       ]
     }
   }

package/CHANGELOG.md

@@ -1,5 +1,110 @@
 # @atlaskit/select
 
+## 16.0.0
+
+### Major Changes
+
+- [`95b3630e9b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95b3630e9b5) - Update `@atlaskit/select` to use react-select v5, and update types
+
+  Use forwardRef for all wrapped components - this means that if you were accessing anything on the Select instance using a ref, the ref will now reference the internal Select directly (see below for how to upgrade)
+
+  Replace HOCs with hooks - if you were using our HOCs to create custom Selects (i.e., makeCreatableSelect, manageState, makeAsyncSelect) these have now been replaced by hooks (i.e., useCreatable, useStateManager, useAsync)
+
+  Remove imports of `@types/react-select` - no longer required as react-select v5 now uses Typescript,
+
+  **_ Example _**
+
+  @atlaskit/select v15 and earlier:
+
+  ```javascript
+  import { makeAsyncSelect } from '@atlaskit/select';
+
+  const AsyncSelect = makeAsyncSelect(ProxyBaseSelect);
+
+  return (
+    <AsyncSelect ... />
+  )
+  ```
+
+  @atlaskit/select v16:
+
+  ```javascript
+  import Select, { useAsync } from '@atlaskit/select';
+
+  const asyncProps = useAsync({
+    promiseFn: useCallback(() => loadOptions(inputValue), [inputValue])
+  });
+
+  return (
+    <Select
+      inputValue={inputValue}
+      isLoading={asyncProps.isLoading}
+      options={!asyncProps.isLoading ? asyncProps.data : []}
+      ...
+    />
+  )
+  ```
+
+  Remove dependency on AutosizeInput - our new solution uses CSS grid which IE11 does not fully support; also .prefix\_\_input now targets the input and NOT the container
+
+  `IndicatorProps` is deprecated and replaced with `ClearIndicatorProps, DropdownIndicatorProps, LoadingIndicatorProps`. Examples can be viewed in the constellation docs
+
+  `onInputChange` now requires a 2nd argument of type `InputActionMeta`
+
+  `NoticeProps` should be used as the prop to customize `LoadingMessage` and `NoOptionsMessage` components
+
+- [`b8430db3873`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8430db3873) - "select package now uses declarative entry points. atlaskit/select now exports all necessary types. Consumers should now import directly from atlaskit/select, not from eg atlaskit/select/types"
+
+### Minor Changes
+
+- [`c55a340ea4c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c55a340ea4c) - Consumers using Popup Select custom modifiers will now have typescript errors. This is how to fix them.
+
+  Custom popper.js modifiers passed into Popup Select are now strictly typed, providing additional type safety and IDE code-completion.
+
+  To support this, a third generic for <PopupSelect/> has been added. This generic takes a union of the names of each modifier you include in popperProps.
+
+  If you currently set custom modifiers like this:
+
+  ```javascript
+  import {OptionType, PopupSelect} from '@atlaskit/select'
+
+  <PopupSelect<OptionType, false>
+    popperProps = {modifiers: [
+        {name: 'custom-modifier', ...},
+        {name: 'custom-modifier-2', ...}
+    ]}>
+    ...
+  </>
+  ```
+
+  In order to avoid type errors in the new release, you will need to add a generic to PopupSelect specifying the modifiers you are providing:
+
+  ```javascript
+  import {OptionType, PopupSelect} from '@atlaskit/select'
+  type myModifiers = 'custom-modifier' | 'custom-modifier-2'
+
+  <PopupSelect<OptionType, false, myModifiers>>
+  ```
+
+  In addition, the ModifierList type is now exported. ModifierList is a union type containing the names of the default modifiers passed into PopupSelect. If you need to use them as well:
+
+  ```javascript
+  import {OptionType, PopupSelect, ModifierList} from '@atlaskit/select'
+  type myModifiers = ModifierList | 'custom-modifier' | 'custom-modifier-2'
+
+  <PopupSelect<OptionType, false, myModifiers>>
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.7.7
+
+### Patch Changes
+
+- [`8048ae661df`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8048ae661df) - [ux] Fixed bug where consumers extending the styles of PopupSelect would not receive the correct base styles in their custom styles functions.
+
 ## 15.7.6
 
 ### Patch Changes

package/CreatableSelect/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@atlaskit/select/CreatableSelect",
-  "main": "../dist/cjs/CreatableSelect.js",
-  "module": "../dist/esm/CreatableSelect.js",
-  "module:es2019": "../dist/es2019/CreatableSelect.js",
+  "main": "../dist/cjs/entry-points/creatable-select.js",
+  "module": "../dist/esm/entry-points/creatable-select.js",
+  "module:es2019": "../dist/es2019/entry-points/creatable-select.js",
   "sideEffects": false,
-  "types": "../dist/types/CreatableSelect.d.ts",
+  "types": "../dist/types/entry-points/creatable-select.d.ts",
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "../dist/types-ts4.0/CreatableSelect.d.ts"
+        "../dist/types-ts4.0/entry-points/creatable-select.d.ts"
       ]
     }
   }

package/Select/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@atlaskit/select/Select",
-  "main": "../dist/cjs/Select.js",
-  "module": "../dist/esm/Select.js",
-  "module:es2019": "../dist/es2019/Select.js",
+  "main": "../dist/cjs/entry-points/select.js",
+  "module": "../dist/esm/entry-points/select.js",
+  "module:es2019": "../dist/es2019/entry-points/select.js",
   "sideEffects": false,
-  "types": "../dist/types/Select.d.ts",
+  "types": "../dist/types/entry-points/select.d.ts",
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "../dist/types-ts4.0/Select.d.ts"
+        "../dist/types-ts4.0/entry-points/select.d.ts"
       ]
     }
   }

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -151,8 +151,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);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (_ref) {
@@ -198,15 +199,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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({
@@ -214,8 +215,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       });
 
       if (_this.selectRef) {
-        _this.selectRef.select.openMenu('first'); // HACK
-
+        _this.selectRef.openMenu('first');
       }
 
       if (typeof window === 'undefined') {
@@ -233,19 +233,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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();
       }
@@ -321,25 +315,24 @@ 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;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 = (0, _objectWithoutProperties2.default)(_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 = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
       var _this$state = _this.state,
           focusLockEnabled = _this$state.focusLockEnabled,
           isOpen = _this$state.isOpen,
@@ -390,7 +383,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           ref: _this.getSelectRef
         }, props, {
           isSearchable: showSearchControl,
-          styles: _objectSpread(_objectSpread({}, _this.defaultStyles), props.styles),
+          styles: (0, _reactSelect.mergeStyles)(_this.defaultStyles, props.styles || {}),
           maxMenuHeight: _this.getMaxHeight(),
           components: components,
           onChange: _this.handleSelectChange

package/dist/cjs/Select.js

@@ -14,7 +14,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 
 var packageName = "@atlaskit/select";
-var packageVersion = "15.7.6";
+var packageVersion = "16.0.0";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/components/indicators.js

@@ -38,8 +38,9 @@ var DropdownIndicator = function DropdownIndicator(props) {
 exports.DropdownIndicator = DropdownIndicator;
 
 var LoadingIndicator = function LoadingIndicator(props) {
+  var loadingCSS = (0, _react.css)(props.getStyles('loadingIndicator', props));
   return (0, _react.jsx)("div", (0, _extends2.default)({
-    css: props.getStyles('loadingIndicator', props)
+    css: loadingCSS
   }, props.innerProps), (0, _react.jsx)(_spinner.default, {
     size: "small"
   }));

package/dist/cjs/createSelect.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof3 = require("@babel/runtime/helpers/typeof");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,8 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -45,7 +43,7 @@ var _excluded = ["styles", "validationState", "isInvalid", "spacing", "isMulti",
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -75,15 +73,6 @@ function createSelect(WrappedComponent) {
       });
       (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectRef", function (ref) {
         _this.select = ref;
-        var innerRef = _this.props.innerRef;
-
-        if ((0, _typeof2.default)(innerRef) === 'object') {
-          innerRef.current = ref;
-        }
-
-        if (typeof innerRef === 'function') {
-          innerRef(ref);
-        }
       });
       _this.cacheComponents = (0, _memoizeOne.default)(_this.cacheComponents, _reactFastCompare.default).bind((0, _assertThisInitialized2.default)(_this));
 

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _AsyncCreatableSelect.default;
+  }
+});
+
+var _AsyncCreatableSelect = _interopRequireDefault(require("../AsyncCreatableSelect"));

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _AsyncSelect.default;
+  }
+});
+
+var _AsyncSelect = _interopRequireDefault(require("../AsyncSelect"));

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _CreatableSelect.default;
+  }
+});
+
+var _CreatableSelect = _interopRequireDefault(require("../CreatableSelect"));

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SelectWithoutAnalytics", {
+  enumerable: true,
+  get: function get() {
+    return _Select.SelectWithoutAnalytics;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Select.default;
+  }
+});
+
+var _Select = _interopRequireWildcard(require("../Select"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/cjs/index.js

@@ -10,13 +10,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "AsyncCreatableSelect", {
   enumerable: true,
   get: function get() {
-    return _AsyncCreatableSelect.default;
+    return _asyncCreatableSelect.default;
   }
 });
 Object.defineProperty(exports, "AsyncSelect", {
   enumerable: true,
   get: function get() {
-    return _AsyncSelect.default;
+    return _asyncSelect.default;
   }
 });
 Object.defineProperty(exports, "CheckboxOption", {
@@ -40,7 +40,7 @@ Object.defineProperty(exports, "CountrySelect", {
 Object.defineProperty(exports, "CreatableSelect", {
   enumerable: true,
   get: function get() {
-    return _CreatableSelect.default;
+    return _creatableSelect.default;
   }
 });
 Object.defineProperty(exports, "PopupSelect", {
@@ -64,7 +64,7 @@ Object.defineProperty(exports, "RadioSelect", {
 Object.defineProperty(exports, "SelectWithoutAnalytics", {
   enumerable: true,
   get: function get() {
-    return _Select.SelectWithoutAnalytics;
+    return _select.SelectWithoutAnalytics;
   }
 });
 Object.defineProperty(exports, "components", {
@@ -82,25 +82,25 @@ Object.defineProperty(exports, "createFilter", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _Select.default;
+    return _select.default;
   }
 });
-Object.defineProperty(exports, "makeAsyncSelect", {
+Object.defineProperty(exports, "mergeStyles", {
   enumerable: true,
   get: function get() {
-    return _async.makeAsyncSelect;
+    return _reactSelect.mergeStyles;
   }
 });
-Object.defineProperty(exports, "makeCreatableSelect", {
+Object.defineProperty(exports, "useAsync", {
   enumerable: true,
   get: function get() {
-    return _creatable.makeCreatableSelect;
+    return _async.useAsync;
   }
 });
-Object.defineProperty(exports, "mergeStyles", {
+Object.defineProperty(exports, "useCreatable", {
   enumerable: true,
   get: function get() {
-    return _reactSelect.mergeStyles;
+    return _creatable.useCreatable;
   }
 });
 
@@ -112,9 +112,13 @@ var _creatable = require("react-select/creatable");
 
 var _inputOptions = require("./components/input-options");
 
-var _Select = _interopRequireWildcard(require("./Select"));
+var _select = _interopRequireWildcard(require("./entry-points/select"));
 
-var _AsyncSelect = _interopRequireDefault(require("./AsyncSelect"));
+var _asyncSelect = _interopRequireDefault(require("./entry-points/async-select"));
+
+var _creatableSelect = _interopRequireDefault(require("./entry-points/creatable-select"));
+
+var _asyncCreatableSelect = _interopRequireDefault(require("./entry-points/async-creatable-select"));
 
 var _CheckboxSelect = _interopRequireDefault(require("./CheckboxSelect"));
 
@@ -122,10 +126,6 @@ var _CountrySelect = _interopRequireDefault(require("./CountrySelect"));
 
 var _RadioSelect = _interopRequireDefault(require("./RadioSelect"));
 
-var _CreatableSelect = _interopRequireDefault(require("./CreatableSelect"));
-
-var _AsyncCreatableSelect = _interopRequireDefault(require("./AsyncCreatableSelect"));
-
 var _PopupSelect = _interopRequireDefault(require("./PopupSelect"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/dist/cjs/styles.js

@@ -253,18 +253,17 @@ 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(_colors.R75, ")"),
+        backgroundColor: isFocused ? "var(--ds-UNSAFE_util-transparent, ".concat(_colors.R75, ")") : undefined,
         fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
         paddingLeft: '2px',
         paddingRight: '2px',

package/dist/cjs/version.json

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

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -91,8 +91,9 @@ export default class PopupSelect extends 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);
       }
     });
 
@@ -147,7 +148,7 @@ export default class PopupSelect extends PureComponent {
 
     _defineProperty(this, "open", options => {
       const {
-        onOpen
+        onMenuOpen
       } = this.props;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && this.isOpenControlled) {
@@ -155,8 +156,8 @@ export default class PopupSelect extends PureComponent {
         return;
       }
 
-      if (onOpen) {
-        onOpen();
+      if (onMenuOpen) {
+        onMenuOpen();
       }
 
       this.setState({
@@ -164,7 +165,7 @@ export default class PopupSelect extends PureComponent {
       });
 
       if (this.selectRef) {
-        this.selectRef.select.openMenu('first'); // HACK
+        this.selectRef.openMenu('first');
       }
 
       if (typeof window === 'undefined') {
@@ -184,7 +185,6 @@ export default class PopupSelect extends PureComponent {
       var _this$unbindWindowKey;
 
       const {
-        onClose,
         onMenuClose
       } = this.props;
 
@@ -193,10 +193,6 @@ export default class PopupSelect extends PureComponent {
         return;
       }
 
-      if (onClose) {
-        onClose();
-      }
-
       if (onMenuClose) {
         onMenuClose();
       }
@@ -275,9 +271,8 @@ export default class PopupSelect extends PureComponent {
       const showSearchControl = this.showSearchControl();
       const {
         controlRef
-      } = this.selectRef.select; // @ts-ignore React-select provides incomplete types for controlRef
-
-      const offsetHeight = showSearchControl ? controlRef.offsetHeight : 0;
+      } = this.selectRef;
+      const offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       const maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
     });
@@ -346,9 +341,7 @@ export default class PopupSelect extends PureComponent {
           ref: this.getSelectRef
         }, props, {
           isSearchable: showSearchControl,
-          styles: { ...this.defaultStyles,
-            ...props.styles
-          },
+          styles: mergeStyles(this.defaultStyles, props.styles || {}),
           maxMenuHeight: this.getMaxHeight(),
           components: components,
           onChange: this.handleSelectChange