@atlaskit/select 15.3.0 → 15.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/select
 
+## 15.4.0
+
+### Minor Changes
+
+- [`4609a8a733a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4609a8a733a) - Made SelectWithoutAnalytics component and InputActionMeta type available from @atlaskit/select
+
+## 15.3.2
+
+### Patch Changes
+
+- [`8a5bdb3c844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a5bdb3c844) - Upgrading internal dependency (bind-event-listener) for improved internal types
+
+## 15.3.1
+
+### Patch Changes
+
+- [`8f6f225ac11`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f6f225ac11) - Updated prop types for Popup Select
+- [`e4b612d1c48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4b612d1c48) - Internal migration to bind-event-listener for safer DOM Event cleanup
+
 ## 15.3.0
 
 ### Minor Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -49,6 +49,8 @@ var _components = require("./components");
 
 var _styles = _interopRequireDefault(require("../styles"));
 
+var _bindEventListener = require("bind-event-listener");
+
 var _excluded = ["footer", "maxMenuWidth", "minMenuWidth", "target"];
 
 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); }
@@ -118,6 +120,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowClick", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowKeydown", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState, _this.props.spacing === 'compact'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
@@ -209,7 +213,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.addEventListener('keydown', _this.handleKeyDown, true);
+      _this.unbindWindowKeydown = (0, _bindEventListener.bind)(window, {
+        type: 'keydown',
+        listener: _this.handleKeyDown,
+        options: {
+          capture: true
+        }
+      });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "initialiseFocusTrap", function () {
       if (!_this.menuRef) {
@@ -229,6 +239,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       }, 1);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (options) {
+      var _this$unbindWindowKey, _this2;
+
       var onClose = _this.props.onClose;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
@@ -256,7 +268,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.removeEventListener('keydown', _this.handleKeyDown, true);
+      (_this$unbindWindowKey = (_this2 = _this).unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(_this2);
+      _this.unbindWindowKeydown = null;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveTargetRef", function (popperRef) {
       return function (ref) {
@@ -384,17 +397,27 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.addEventListener('click', this.handleClick, true);
+      this.unbindWindowClick = (0, _bindEventListener.bind)(window, {
+        type: 'click',
+        listener: this.handleClick,
+        options: {
+          capture: true
+        }
+      });
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _this$unbindWindowCli, _this$unbindWindowKey2;
+
       if (typeof window === 'undefined') {
         return;
       }
 
-      window.removeEventListener('click', this.handleClick, true);
-      window.removeEventListener('keydown', this.handleKeyDown, true);
+      (_this$unbindWindowCli = this.unbindWindowClick) === null || _this$unbindWindowCli === void 0 ? void 0 : _this$unbindWindowCli.call(this);
+      this.unbindWindowClick = null;
+      (_this$unbindWindowKey2 = this.unbindWindowKeydown) === null || _this$unbindWindowKey2 === void 0 ? void 0 : _this$unbindWindowKey2.call(this);
+      this.unbindWindowKeydown = null;
     }
   }, {
     key: "componentDidUpdate",
@@ -418,7 +441,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var target = this.props.target;
       var isOpen = this.state.isOpen;
@@ -426,10 +449,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         var ref = _ref3.ref;
         return target && target({
           isOpen: isOpen,
-          ref: _this2.resolveTargetRef(ref),
+          ref: _this3.resolveTargetRef(ref),
           'aria-haspopup': 'true',
           'aria-expanded': isOpen,
-          'aria-controls': isOpen ? _this2.popperWrapperId : undefined
+          'aria-controls': isOpen ? _this3.popperWrapperId : undefined
         });
       }), this.renderSelect());
     }

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.3.0";
+var packageVersion = "15.4.0";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -59,6 +61,12 @@ Object.defineProperty(exports, "RadioSelect", {
     return _RadioSelect.default;
   }
 });
+Object.defineProperty(exports, "SelectWithoutAnalytics", {
+  enumerable: true,
+  get: function get() {
+    return _Select.SelectWithoutAnalytics;
+  }
+});
 Object.defineProperty(exports, "components", {
   enumerable: true,
   get: function get() {
@@ -104,7 +112,7 @@ var _creatable = require("react-select/creatable");
 
 var _inputOptions = require("./components/input-options");
 
-var _Select = _interopRequireDefault(require("./Select"));
+var _Select = _interopRequireWildcard(require("./Select"));
 
 var _AsyncSelect = _interopRequireDefault(require("./AsyncSelect"));
 
@@ -118,4 +126,8 @@ var _CreatableSelect = _interopRequireDefault(require("./CreatableSelect"));
 
 var _AsyncCreatableSelect = _interopRequireDefault(require("./AsyncCreatableSelect"));
 
-var _PopupSelect = _interopRequireDefault(require("./PopupSelect"));
+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); }
+
+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/styles.js

@@ -229,7 +229,7 @@ function baseStyles(validationState, isCompact) {
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: '2px',
         backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(_colors.N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N40, ")"),
-        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focused, transparent)") : 'none',
+        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',
         '@media screen and (-ms-high-contrast: active)': {
           border: isFocused ? '1px solid transparent' : 'none'

package/dist/cjs/version.json

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

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -11,6 +11,7 @@ import shallowEqualObjects from 'shallow-equal/objects';
 import { N80 } from '@atlaskit/theme/colors';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
 import baseStyles from '../styles';
+import { bind } from 'bind-event-listener';
 
 /** Are we rendering on the client or server? */
 const canUseDOM = () => Boolean(typeof window !== 'undefined' && window.document && window.document.createElement); // ==============================
@@ -56,6 +57,10 @@ export default class PopupSelect extends PureComponent {
 
     _defineProperty(this, "targetRef", null);
 
+    _defineProperty(this, "unbindWindowClick", null);
+
+    _defineProperty(this, "unbindWindowKeydown", null);
+
     _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState, this.props.spacing === 'compact'), {
       groupHeading: provided => ({ ...provided,
         color: `var(--ds-text-subtlest, ${N80})`
@@ -157,7 +162,13 @@ export default class PopupSelect extends PureComponent {
         return;
       }
 
-      window.addEventListener('keydown', this.handleKeyDown, true);
+      this.unbindWindowKeydown = bind(window, {
+        type: 'keydown',
+        listener: this.handleKeyDown,
+        options: {
+          capture: true
+        }
+      });
     });
 
     _defineProperty(this, "initialiseFocusTrap", () => {
@@ -177,6 +188,8 @@ export default class PopupSelect extends PureComponent {
     });
 
     _defineProperty(this, "close", options => {
+      var _this$unbindWindowKey;
+
       const {
         onClose
       } = this.props;
@@ -206,7 +219,8 @@ export default class PopupSelect extends PureComponent {
         return;
       }
 
-      window.removeEventListener('keydown', this.handleKeyDown, true);
+      (_this$unbindWindowKey = this.unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(this);
+      this.unbindWindowKeydown = null;
     });
 
     _defineProperty(this, "resolveTargetRef", popperRef => ref => {
@@ -367,16 +381,26 @@ export default class PopupSelect extends PureComponent {
       return;
     }
 
-    window.addEventListener('click', this.handleClick, true);
+    this.unbindWindowClick = bind(window, {
+      type: 'click',
+      listener: this.handleClick,
+      options: {
+        capture: true
+      }
+    });
   }
 
   componentWillUnmount() {
+    var _this$unbindWindowCli, _this$unbindWindowKey2;
+
     if (typeof window === 'undefined') {
       return;
     }
 
-    window.removeEventListener('click', this.handleClick, true);
-    window.removeEventListener('keydown', this.handleKeyDown, true);
+    (_this$unbindWindowCli = this.unbindWindowClick) === null || _this$unbindWindowCli === void 0 ? void 0 : _this$unbindWindowCli.call(this);
+    this.unbindWindowClick = null;
+    (_this$unbindWindowKey2 = this.unbindWindowKeydown) === null || _this$unbindWindowKey2 === void 0 ? void 0 : _this$unbindWindowKey2.call(this);
+    this.unbindWindowKeydown = null;
   }
 
   componentDidUpdate(prevProps) {

package/dist/es2019/Select.js

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

package/dist/es2019/index.js

@@ -2,7 +2,7 @@ export { components, createFilter, mergeStyles } from 'react-select';
 export { makeAsyncSelect } from 'react-select/async';
 export { makeCreatableSelect } from 'react-select/creatable';
 export { CheckboxOption, RadioOption } from './components/input-options';
-export { default } from './Select';
+export { default, SelectWithoutAnalytics } from './Select';
 export { default as AsyncSelect } from './AsyncSelect';
 export { default as CheckboxSelect } from './CheckboxSelect';
 export { default as CountrySelect } from './CountrySelect';

package/dist/es2019/version.json

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

package/dist/esm/PopupSelect/PopupSelect.js

@@ -28,6 +28,7 @@ import shallowEqualObjects from 'shallow-equal/objects';
 import { N80 } from '@atlaskit/theme/colors';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
 import baseStyles from '../styles';
+import { bind } from 'bind-event-listener';
 
 /** Are we rendering on the client or server? */
 var canUseDOM = function canUseDOM() {
@@ -89,6 +90,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "targetRef", null);
 
+    _defineProperty(_assertThisInitialized(_this), "unbindWindowClick", null);
+
+    _defineProperty(_assertThisInitialized(_this), "unbindWindowKeydown", null);
+
     _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState, _this.props.spacing === 'compact'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
@@ -188,7 +193,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.addEventListener('keydown', _this.handleKeyDown, true);
+      _this.unbindWindowKeydown = bind(window, {
+        type: 'keydown',
+        listener: _this.handleKeyDown,
+        options: {
+          capture: true
+        }
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "initialiseFocusTrap", function () {
@@ -210,6 +221,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "close", function (options) {
+      var _this$unbindWindowKey, _this2;
+
       var onClose = _this.props.onClose;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
@@ -237,7 +250,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.removeEventListener('keydown', _this.handleKeyDown, true);
+      (_this$unbindWindowKey = (_this2 = _this).unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(_this2);
+      _this.unbindWindowKeydown = null;
     });
 
     _defineProperty(_assertThisInitialized(_this), "resolveTargetRef", function (popperRef) {
@@ -373,17 +387,27 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.addEventListener('click', this.handleClick, true);
+      this.unbindWindowClick = bind(window, {
+        type: 'click',
+        listener: this.handleClick,
+        options: {
+          capture: true
+        }
+      });
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _this$unbindWindowCli, _this$unbindWindowKey2;
+
       if (typeof window === 'undefined') {
         return;
       }
 
-      window.removeEventListener('click', this.handleClick, true);
-      window.removeEventListener('keydown', this.handleKeyDown, true);
+      (_this$unbindWindowCli = this.unbindWindowClick) === null || _this$unbindWindowCli === void 0 ? void 0 : _this$unbindWindowCli.call(this);
+      this.unbindWindowClick = null;
+      (_this$unbindWindowKey2 = this.unbindWindowKeydown) === null || _this$unbindWindowKey2 === void 0 ? void 0 : _this$unbindWindowKey2.call(this);
+      this.unbindWindowKeydown = null;
     }
   }, {
     key: "componentDidUpdate",
@@ -407,7 +431,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var target = this.props.target;
       var isOpen = this.state.isOpen;
@@ -415,10 +439,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         var ref = _ref3.ref;
         return target && target({
           isOpen: isOpen,
-          ref: _this2.resolveTargetRef(ref),
+          ref: _this3.resolveTargetRef(ref),
           'aria-haspopup': 'true',
           'aria-expanded': isOpen,
-          'aria-controls': isOpen ? _this2.popperWrapperId : undefined
+          'aria-controls': isOpen ? _this3.popperWrapperId : undefined
         });
       }), this.renderSelect());
     }

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

package/dist/esm/index.js

@@ -2,7 +2,7 @@ export { components, createFilter, mergeStyles } from 'react-select';
 export { makeAsyncSelect } from 'react-select/async';
 export { makeCreatableSelect } from 'react-select/creatable';
 export { CheckboxOption, RadioOption } from './components/input-options';
-export { default } from './Select';
+export { default, SelectWithoutAnalytics } from './Select';
 export { default as AsyncSelect } from './AsyncSelect';
 export { default as CheckboxSelect } from './CheckboxSelect';
 export { default as CountrySelect } from './CountrySelect';

package/dist/esm/styles.js

@@ -217,7 +217,7 @@ export default function baseStyles(validationState, isCompact) {
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: '2px',
         backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(N40, ")"),
-        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focused, transparent)") : 'none',
+        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',
         '@media screen and (-ms-high-contrast: active)': {
           border: isFocused ? '1px solid transparent' : 'none'

package/dist/esm/version.json

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

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

@@ -3,6 +3,7 @@ import Select from 'react-select';
 import { FocusTrap } from 'focus-trap';
 import { PopperProps } from 'react-popper';
 import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType } from '../types';
+import { UnbindFn } from 'bind-event-listener';
 declare type defaultModifiers = 'offset' | 'preventOverflow';
 declare type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
 interface PopupSelectTriggerProps {
@@ -12,10 +13,48 @@ interface PopupSelectTriggerProps {
     'aria-controls'?: string;
 }
 export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean = false, Modifiers = string> extends ReactSelectProps<Option, IsMulti> {
+    /**
+     * Defines whether the menu should close when selected. Defaults to "true"
+     */
     closeMenuOnSelect?: boolean;
+    /**
+     * The footer content shown at the bottom of the Popup, underneath the Select options
+     */
     footer?: ReactNode;
+    /**
+      The props passed down to React Popper.
+  
+      Use these to override the default positioning strategy, behaviour and placement used by this library.
+      For more information, see the [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
+  
+     */
     popperProps?: PopperPropsNoChildren<Modifiers>;
+    /**
+     * The maximum number of options the Select can contain without rendering the search field.
+     */
     searchThreshold?: number;
+    /**
+     * The maximum width for the popup menu. Can be a number, representing width in pixels,
+     * or a string containing a CSS length datatype.
+     */
+    maxMenuWidth?: number | string;
+    /**
+     * The maximum width for the popup menu. Can be a number, representing width in pixels,
+     * or a string containing a CSS length datatype.
+     */
+    minMenuWidth?: number | string;
+    /**
+      Render props used to anchor the popup to your content.
+  
+      Make this an interactive element, such as an @atlaskit/button component.
+  
+      The provided render props in `options` are detailed below:
+      - `isOpen`: The current state of the popup.
+          Use this to change the appearance of your target based on the state of your component
+      - `ref`: Pass this ref to the element the Popup should be attached to
+      - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
+          ensure your experience is accessible
+     */
     target?: (options: PopupSelectTriggerProps & {
         isOpen: boolean;
     }) => ReactNode;
@@ -32,6 +71,8 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     menuRef: HTMLElement | null;
     selectRef: Select<Option, IsMulti> | null;
     targetRef: HTMLElement | null;
+    unbindWindowClick: UnbindFn | null;
+    unbindWindowKeydown: UnbindFn | null;
     defaultStyles: StylesConfig<Option, IsMulti>;
     isOpenControlled: boolean;
     defaultOpenState: boolean | undefined;

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

@@ -2,8 +2,8 @@
 import { FC, ReactNode, CSSProperties } from 'react';
 import { ControlProps, MenuProps, OptionType } from '../types';
 interface MenuDialogProps {
-    maxWidth: number;
-    minWidth: number;
+    maxWidth?: number | string;
+    minWidth?: number | string;
     style: CSSProperties;
     children: ReactNode;
     id: string;

package/dist/types/index.d.ts

@@ -2,7 +2,7 @@ export { components, createFilter, mergeStyles } from 'react-select';
 export { makeAsyncSelect } from 'react-select/async';
 export { makeCreatableSelect } from 'react-select/creatable';
 export { CheckboxOption, RadioOption } from './components/input-options';
-export { default } from './Select';
+export { default, SelectWithoutAnalytics } from './Select';
 export { default as AsyncSelect } from './AsyncSelect';
 export { default as CheckboxSelect } from './CheckboxSelect';
 export { default as CountrySelect } from './CountrySelect';
@@ -11,4 +11,4 @@ export { default as CreatableSelect } from './CreatableSelect';
 export { default as AsyncCreatableSelect } from './AsyncCreatableSelect';
 export { default as PopupSelect } from './PopupSelect';
 export type { PopupSelectProps } from './PopupSelect';
-export type { ActionMeta, ControlProps, FormatOptionLabelMeta, IndicatorComponentType, IndicatorProps, InputProps, MenuProps, MenuListComponentProps, OptionProps, OptionsType, OptionType, SelectComponentsConfig, SelectProps, StylesConfig, ValueContainerProps, ValueType, GroupedOptionsType, GroupType, } from './types';
+export type { ActionMeta, ControlProps, FormatOptionLabelMeta, IndicatorComponentType, IndicatorProps, InputActionMeta, InputProps, MenuProps, MenuListComponentProps, OptionProps, OptionsType, OptionType, SelectComponentsConfig, SelectProps, StylesConfig, ValueContainerProps, ValueType, GroupedOptionsType, GroupType, } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "15.3.0",
+  "version": "15.4.0",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,13 +13,14 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Select"
+      "name": "Select",
+      "category": "Components"
     }
   },
   "dependencies": {
@@ -33,6 +34,7 @@
     "@emotion/core": "^10.0.9",
     "@popperjs/core": "^2.9.1",
     "@types/react-select": "^4.0.18",
+    "bind-event-listener": "^2.1.1",
     "focus-trap": "^2.4.5",
     "memoize-one": "^6.0.0",
     "react-fast-compare": "^3.2.0",
@@ -52,7 +54,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/drawer": "^7.1.0",
     "@atlaskit/form": "^8.5.0",
-    "@atlaskit/logo": "^13.7.0",
+    "@atlaskit/logo": "^13.8.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",
@@ -72,6 +74,7 @@
   },
   "techstack": {
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -0,0 +1,710 @@
+## API Report File for "@atlaskit/select"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { ActionMeta as ActionMeta_2 } from 'react-select';
+import { components } from 'react-select';
+import { Context } from 'react';
+import { ControlProps as ControlProps_2 } from 'react-select';
+import { createFilter } from 'react-select';
+import { default as default_2 } from 'react-select/src/Select';
+import { default as default_3 } from 'react-select';
+import { ErrorInfo } from 'react';
+import { FC } from 'react';
+import { FocusTrap } from 'focus-trap';
+import { FormatOptionLabelMeta as FormatOptionLabelMeta_2 } from 'react-select';
+import { GroupedOptionsType } from 'react-select';
+import { GroupTypeBase as GroupType } from 'react-select';
+import { IndicatorComponentType as IndicatorComponentType_2 } from 'react-select';
+import { IndicatorProps as IndicatorProps_2 } from 'react-select';
+import { InputProps } from 'react-select';
+import { makeAsyncSelect } from 'react-select/async';
+import { makeCreatableSelect } from 'react-select/creatable';
+import { MenuListComponentProps as MenuListComponentProps_2 } from 'react-select';
+import { MenuProps as MenuProps_2 } from 'react-select';
+import { mergeStyles } from 'react-select';
+import { OptionProps as OptionProps_2 } from 'react-select';
+import { OptionsType as OptionsType_2 } from 'react-select';
+import { PopperProps } from 'react-popper';
+import { Props } from 'react-select';
+import { PureComponent } from 'react';
+import { default as React_2 } from 'react';
+import { ReactInstance } from 'react';
+import { ReactNode } from 'react';
+import Select from 'react-select';
+import { SelectComponents } from 'react-select/src/components';
+import { SelectComponentsConfig as SelectComponentsConfig_2 } from 'react-select';
+import { StylesConfig as StylesConfig_2 } from 'react-select';
+import { UnbindFn } from 'bind-event-listener';
+import { ValueContainerProps as ValueContainerProps_2 } from 'react-select';
+import { ValueType as ValueType_2 } from 'react-select';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+
+export declare type ActionMeta<Option = OptionType> = ActionMeta_2<Option>;
+
+export declare const AsyncCreatableSelect: {
+  new <Option = OptionType, IsMulti extends boolean = false>(
+    props: SelectProps<Option, IsMulti>,
+  ): {
+    components: Partial<SelectComponents<Option, IsMulti, GroupType<Option>>>;
+    select: default_3<
+      Option,
+      false,
+      GroupType<Option>,
+      default_2<Option, false, GroupType<Option>>
+    > | null;
+    UNSAFE_componentWillReceiveProps(
+      nextProps: SelectProps<Option, IsMulti>,
+    ): void;
+    cacheComponents: (
+      components: Partial<SelectComponents<Option, IsMulti, GroupType<Option>>>,
+    ) => void;
+    focus(): void;
+    blur(): void;
+    onSelectRef: (
+      ref: default_3<
+        Option,
+        false,
+        GroupType<Option>,
+        default_2<Option, false, GroupType<Option>>
+      >,
+    ) => void;
+    render(): JSX.Element;
+    context: any;
+    setState<K extends never>(
+      state:
+        | {}
+        | ((
+            prevState: Readonly<{}>,
+            props: Readonly<SelectProps<Option, IsMulti>>,
+          ) => {} | Pick<{}, K> | null)
+        | Pick<{}, K>
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callBack?: (() => void) | undefined): void;
+    readonly props: Readonly<SelectProps<Option, IsMulti>> &
+      Readonly<{
+        children?: ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<SelectProps<Option, IsMulti>>,
+      prevState: Readonly<{}>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<SelectProps<Option, IsMulti>>,
+      prevState: Readonly<{}>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+  };
+  defaultProps: {
+    validationState: string;
+    spacing: string;
+    onClickPreventDefault: boolean;
+    tabSelectsValue: boolean;
+    components: {};
+    styles: {};
+  };
+  contextType?: Context<any> | undefined;
+};
+
+export declare const AsyncSelect: {
+  new <Option = OptionType, IsMulti extends boolean = false>(
+    props: SelectProps<Option, IsMulti>,
+  ): {
+    components: Partial<SelectComponents<Option, IsMulti, GroupType<Option>>>;
+    select: default_3<
+      Option,
+      false,
+      GroupType<Option>,
+      default_2<Option, false, GroupType<Option>>
+    > | null;
+    UNSAFE_componentWillReceiveProps(
+      nextProps: SelectProps<Option, IsMulti>,
+    ): void;
+    cacheComponents: (
+      components: Partial<SelectComponents<Option, IsMulti, GroupType<Option>>>,
+    ) => void;
+    focus(): void;
+    blur(): void;
+    onSelectRef: (
+      ref: default_3<
+        Option,
+        false,
+        GroupType<Option>,
+        default_2<Option, false, GroupType<Option>>
+      >,
+    ) => void;
+    render(): JSX.Element;
+    context: any;
+    setState<K extends never>(
+      state:
+        | {}
+        | ((
+            prevState: Readonly<{}>,
+            props: Readonly<SelectProps<Option, IsMulti>>,
+          ) => {} | Pick<{}, K> | null)
+        | Pick<{}, K>
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callBack?: (() => void) | undefined): void;
+    readonly props: Readonly<SelectProps<Option, IsMulti>> &
+      Readonly<{
+        children?: ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<SelectProps<Option, IsMulti>>,
+      prevState: Readonly<{}>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<SelectProps<Option, IsMulti>>,
+      prevState: Readonly<{}>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+  };
+  defaultProps: {
+    validationState: string;
+    spacing: string;
+    onClickPreventDefault: boolean;
+    tabSelectsValue: boolean;
+    components: {};
+    styles: {};
+  };
+  contextType?: Context<any> | undefined;
+};
+
+export declare const CheckboxOption: FC<OptionProps<OptionType, true>>;
+
+export declare const CheckboxSelect: ({
+  components,
+  ...props
+}: SelectProps<OptionType, true>) => JSX.Element;
+
+export { components };
+
+export declare type ControlProps<
+  OptionType,
+  IsMulti extends boolean = false
+> = ControlProps_2<OptionType, IsMulti>;
+
+export declare const CountrySelect: (props: any) => JSX.Element;
+
+export declare const CreatableSelect: {
+  new <Option = OptionType, IsMulti extends boolean = false>(
+    props: SelectProps<Option, IsMulti>,
+  ): {
+    components: Partial<SelectComponents<Option, IsMulti, GroupType<Option>>>;
+    select: default_3<
+      Option,
+      false,
+      GroupType<Option>,
+      default_2<Option, false, GroupType<Option>>
+    > | null;
+    UNSAFE_componentWillReceiveProps(
+      nextProps: SelectProps<Option, IsMulti>,
+    ): void;
+    cacheComponents: (
+      components: Partial<SelectComponents<Option, IsMulti, GroupType<Option>>>,
+    ) => void;
+    focus(): void;
+    blur(): void;
+    onSelectRef: (
+      ref: default_3<
+        Option,
+        false,
+        GroupType<Option>,
+        default_2<Option, false, GroupType<Option>>
+      >,
+    ) => void;
+    render(): JSX.Element;
+    context: any;
+    setState<K extends never>(
+      state:
+        | {}
+        | ((
+            prevState: Readonly<{}>,
+            props: Readonly<SelectProps<Option, IsMulti>>,
+          ) => {} | Pick<{}, K> | null)
+        | Pick<{}, K>
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callBack?: (() => void) | undefined): void;
+    readonly props: Readonly<SelectProps<Option, IsMulti>> &
+      Readonly<{
+        children?: ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<SelectProps<Option, IsMulti>>,
+      prevState: Readonly<{}>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<SelectProps<Option, IsMulti>>,
+      prevState: Readonly<{}>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+  };
+  defaultProps: {
+    validationState: string;
+    spacing: string;
+    onClickPreventDefault: boolean;
+    tabSelectsValue: boolean;
+    components: {};
+    styles: {};
+  };
+  contextType?: Context<any> | undefined;
+};
+
+export { createFilter };
+
+declare const _default: {
+  new <Option = OptionType, IsMulti extends boolean = false>(
+    props: SelectProps<Option, IsMulti>,
+  ): {
+    components: Partial<SelectComponents<Option, IsMulti, GroupType<Option>>>;
+    select: Select<
+      Option,
+      false,
+      GroupType<Option>,
+      default_2<Option, false, GroupType<Option>>
+    > | null;
+    UNSAFE_componentWillReceiveProps(
+      nextProps: SelectProps<Option, IsMulti>,
+    ): void;
+    cacheComponents: (
+      components: Partial<SelectComponents<Option, IsMulti, GroupType<Option>>>,
+    ) => void;
+    focus(): void;
+    blur(): void;
+    onSelectRef: (
+      ref: Select<
+        Option,
+        false,
+        GroupType<Option>,
+        default_2<Option, false, GroupType<Option>>
+      >,
+    ) => void;
+    render(): JSX.Element;
+    context: any;
+    setState<K extends never>(
+      state:
+        | {}
+        | ((
+            prevState: Readonly<{}>,
+            props: Readonly<SelectProps<Option, IsMulti>>,
+          ) => {} | Pick<{}, K> | null)
+        | Pick<{}, K>
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callBack?: (() => void) | undefined): void;
+    readonly props: Readonly<SelectProps<Option, IsMulti>> &
+      Readonly<{
+        children?: ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<SelectProps<Option, IsMulti>>,
+      prevState: Readonly<{}>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<SelectProps<Option, IsMulti>>,
+      prevState: Readonly<{}>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+  };
+  defaultProps: {
+    validationState: string;
+    spacing: string;
+    onClickPreventDefault: boolean;
+    tabSelectsValue: boolean;
+    components: {};
+    styles: {};
+  };
+  contextType?: Context<any> | undefined;
+};
+export default _default;
+
+declare type defaultModifiers = 'offset' | 'preventOverflow';
+
+export declare type FormatOptionLabelMeta<
+  OptionType,
+  IsMulti extends boolean = false
+> = FormatOptionLabelMeta_2<OptionType, IsMulti>;
+
+export { GroupedOptionsType };
+
+export { GroupType };
+
+export declare type IndicatorComponentType<
+  OptionType,
+  IsMulti extends boolean = false
+> = IndicatorComponentType_2<OptionType, IsMulti>;
+
+export declare type IndicatorProps<
+  OptionType,
+  IsMulti extends boolean = false
+> = IndicatorProps_2<OptionType, IsMulti>;
+
+export { InputProps };
+
+export { makeAsyncSelect };
+
+export { makeCreatableSelect };
+
+export declare type MenuListComponentProps<
+  OptionType,
+  IsMulti extends boolean = false
+> = MenuListComponentProps_2<OptionType, IsMulti>;
+
+export declare type MenuProps<
+  OptionType,
+  IsMulti extends boolean = false
+> = MenuProps_2<OptionType, IsMulti>;
+
+export { mergeStyles };
+
+export declare interface OptionProps<
+  Option = OptionType,
+  IsMulti extends boolean = false
+> extends OptionProps_2<Option, IsMulti> {
+  [key: string]: any;
+  Icon?: React.ComponentType<{
+    label: string;
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    onClick?: (e: MouseEvent) => void;
+    primaryColor?: string;
+    secondaryColor?: string;
+  }>;
+  isDisabled: boolean;
+  isFocused: boolean;
+  isSelected: boolean;
+}
+
+export declare type OptionsType<Option = OptionType> = OptionsType_2<Option>;
+
+export declare interface OptionType {
+  [key: string]: any;
+  label: string;
+  value: string | number;
+}
+
+declare type PopperPropsNoChildren<Modifiers> = Omit<
+  PopperProps<Modifiers>,
+  'children'
+>;
+
+export declare class PopupSelect<
+  Option = OptionType,
+  IsMulti extends boolean = false
+> extends PureComponent<PopupSelectProps<Option, IsMulti>, State> {
+  focusTrap: FocusTrap | null;
+  menuRef: HTMLElement | null;
+  selectRef: Select<Option, IsMulti> | null;
+  targetRef: HTMLElement | null;
+  unbindWindowClick: UnbindFn | null;
+  unbindWindowKeydown: UnbindFn | null;
+  defaultStyles: StylesConfig<Option, IsMulti>;
+  isOpenControlled: boolean;
+  defaultOpenState: boolean | undefined;
+  state: {
+    isOpen: boolean;
+    mergedComponents: {
+      Control: React_2.FC<ControlProps<OptionType, boolean>>;
+      DropdownIndicator: () => JSX.Element;
+      Menu: ({
+        children,
+        innerProps,
+        ...props
+      }: MenuProps<OptionType, boolean>) => JSX.Element;
+    };
+    mergedPopperProps: PopperPropsNoChildren<string>;
+  };
+  popperWrapperId: string;
+  static defaultProps: {
+    closeMenuOnSelect: boolean;
+    components: {};
+    maxMenuHeight: number;
+    maxMenuWidth: number;
+    minMenuWidth: number;
+    popperProps: {};
+    searchThreshold: number;
+    styles: {};
+    options: never[];
+  };
+  static getDerivedStateFromProps(
+    props: PopupSelectProps<OptionType>,
+    state: State,
+  ): Partial<State<string>> | null;
+  componentDidMount(): void;
+  componentWillUnmount(): void;
+  componentDidUpdate(prevProps: PopupSelectProps<Option, IsMulti>): void;
+  handleKeyDown: (event: KeyboardEvent) => void;
+  handleClick: ({ target }: MouseEvent) => void;
+  handleSelectChange: (
+    value: ValueType<Option, IsMulti>,
+    actionMeta: ActionMeta<Option>,
+  ) => void;
+  /**
+   * Opens the popup
+   *
+   * @param options.controlOverride  - Force the popup to open when it's open state is being controlled
+   */
+  open: (
+    options?:
+      | {
+          controlOverride?: boolean | undefined;
+        }
+      | undefined,
+  ) => void;
+  initialiseFocusTrap: () => void;
+  /**
+   * Closes the popup
+   *
+   * @param options.controlOverride  - Force the popup to close when it's open state is being controlled
+   */
+  close: (
+    options?:
+      | {
+          controlOverride?: boolean | undefined;
+        }
+      | undefined,
+  ) => void;
+  resolveTargetRef: (
+    popperRef: React_2.Ref<HTMLElement>,
+  ) => (ref: HTMLElement) => void;
+  resolveMenuRef: (
+    popperRef: React_2.Ref<HTMLElement>,
+  ) => (ref: HTMLElement) => void;
+  getSelectRef: (ref: Select<Option, IsMulti>) => void;
+  getItemCount: () => number;
+  getMaxHeight: () => number | undefined;
+  showSearchControl: () => boolean;
+  renderSelect: () => JSX.Element | null;
+  render(): JSX.Element;
+}
+
+export declare interface PopupSelectProps<
+  Option = OptionType,
+  IsMulti extends boolean = false,
+  Modifiers = string
+> extends Props<Option, IsMulti> {
+  /**
+   * Defines whether the menu should close when selected. Defaults to "true"
+   */
+  closeMenuOnSelect?: boolean;
+  /**
+   * The footer content shown at the bottom of the Popup, underneath the Select options
+   */
+  footer?: ReactNode;
+  /**
+     The props passed down to React Popper.
+
+     Use these to override the default positioning strategy, behaviour and placement used by this library.
+     For more information, see the [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
+
+     */
+  popperProps?: PopperPropsNoChildren<Modifiers>;
+  /**
+   * The maximum number of options the Select can contain without rendering the search field.
+   */
+  searchThreshold?: number;
+  /**
+   * The maximum width for the popup menu. Can be a number, representing width in pixels,
+   * or a string containing a CSS length datatype.
+   */
+  maxMenuWidth?: number | string;
+  /**
+   * The maximum width for the popup menu. Can be a number, representing width in pixels,
+   * or a string containing a CSS length datatype.
+   */
+  minMenuWidth?: number | string;
+  /**
+     Render props used to anchor the popup to your content.
+
+     Make this an interactive element, such as an @atlaskit/button component.
+
+     The provided render props in `options` are detailed below:
+     - `isOpen`: The current state of the popup.
+     Use this to change the appearance of your target based on the state of your component
+     - `ref`: Pass this ref to the element the Popup should be attached to
+     - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
+     ensure your experience is accessible
+     */
+  target?: (
+    options: PopupSelectTriggerProps & {
+      isOpen: boolean;
+    },
+  ) => ReactNode;
+  isOpen?: boolean;
+  defaultIsOpen?: boolean;
+}
+
+declare interface PopupSelectTriggerProps {
+  ref: any;
+  'aria-haspopup': 'true';
+  'aria-expanded': boolean;
+  'aria-controls'?: string;
+}
+
+export declare const RadioOption: FC<OptionProps>;
+
+export declare const RadioSelect: ({
+  components,
+  ...props
+}: SelectProps<OptionType>) => JSX.Element;
+
+export declare type SelectComponentsConfig<
+  OptionType,
+  IsMulti extends boolean = false
+> = SelectComponentsConfig_2<OptionType, IsMulti>;
+
+export declare interface SelectProps<
+  OptionType,
+  IsMulti extends boolean = false
+> extends Props<OptionType, IsMulti>,
+    WithAnalyticsEventsProps {
+  spacing?: 'compact' | 'default';
+  validationState?: ValidationState;
+}
+
+declare interface State<Modifiers = string> {
+  isOpen: boolean;
+  mergedComponents: Object;
+  mergedPopperProps: PopperPropsNoChildren<defaultModifiers | Modifiers>;
+}
+
+export declare type StylesConfig<
+  Option = OptionType,
+  IsMulti extends boolean = false
+> = StylesConfig_2<Option, IsMulti>;
+
+declare type ValidationState = 'default' | 'error' | 'success';
+
+export declare type ValueContainerProps<
+  OptionType,
+  IsMulti extends boolean = false
+> = ValueContainerProps_2<OptionType, IsMulti>;
+
+export declare type ValueType<
+  OptionType,
+  IsMulti extends boolean = false
+> = ValueType_2<OptionType, IsMulti>;
+
+export {};
+```