@atlaskit/select 16.3.0 → 16.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 16.4.0
+
+### Minor Changes
+
+- [`45bcfb68efb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45bcfb68efb) - Testing behind a feature flag: reduce re-renders in `<PopupSelect>` by using an available renderProps to both disable and block scrolling at the right time as well as avoid rendering the `<Select>` to a portal not visible to the user.
+
+## 16.3.1
+
+### Patch Changes
+
+- [`1cd0d824b3c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1cd0d824b3c) - NO-ISSUE Add basic memoization on CheckboxSelect and RadioSelect to avoid unnecessary re-renders with otherwise static references.
+
 ## 16.3.0
 
 ### Minor Changes

package/dist/cjs/CheckboxSelect.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,24 +9,29 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Select = _interopRequireDefault(require("./Select"));
 var _inputOptions = require("./components/input-options");
 var _excluded = ["components"];
+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; }
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var CheckboxSelect = function CheckboxSelect(_ref) {
+var CheckboxSelect = /*#__PURE__*/_react.default.memo(function (_ref) {
   var components = _ref.components,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var temp = _objectSpread(_objectSpread({}, components), {}, {
-    Option: _inputOptions.CheckboxOption
-  });
+  var mergedComponents = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, components), {}, {
+      Option: _inputOptions.CheckboxOption
+    });
+  }, [components]);
   return /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
-    isMulti: true,
-    components: temp
-  }, props));
-};
+    isMulti: true
+  }, props, {
+    components: mergedComponents
+  }));
+});
 var _default = CheckboxSelect;
 exports.default = _default;

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -24,9 +24,11 @@ var _reactPopper = require("react-popper");
 var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
 var _objects = _interopRequireDefault(require("shallow-equal/objects"));
 var _colors = require("@atlaskit/theme/colors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _components = require("./components");
 var _styles = _interopRequireDefault(require("../styles"));
 var _bindEventListener = require("bind-event-listener");
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 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); }
 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; }
@@ -71,7 +73,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(PopupSelect, _PureComponent);
   var _super = _createSuper(PopupSelect);
   function PopupSelect() {
-    var _this$defaultOpenStat;
+    var _this$defaultOpenStat, _this$defaultOpenStat2;
     var _this;
     (0, _classCallCheck2.default)(this, PopupSelect);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -92,11 +94,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isOpenControlled", _this.props.isOpen !== undefined);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      focusLockEnabled: false,
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.popup-select-render-perf_i0s6m') ? {
       isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: _components.defaultComponents,
       mergedPopperProps: defaultPopperProps
+    } : {
+      focusLockEnabled: false,
+      isOpen: (_this$defaultOpenStat2 = _this.defaultOpenState) !== null && _this$defaultOpenStat2 !== void 0 ? _this$defaultOpenStat2 : false,
+      mergedComponents: _components.defaultComponents,
+      mergedPopperProps: defaultPopperProps
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "popperWrapperId", "".concat((0, _reactUid.uid)({
       options: _this.props.options
@@ -207,9 +213,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       _this.setState({
         isOpen: false
       });
-      _this.setState({
-        focusLockEnabled: false
-      });
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.popup-select-render-perf_i0s6m')) {
+        // Do nothing… (the pff eslint just doesn't like `!getBooleanFF(…)`)
+      } else {
+        _this.setState({
+          focusLockEnabled: false
+        });
+      }
       if (_this.targetRef != null) {
         _this.targetRef.focus();
       }
@@ -249,6 +259,20 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
     // Utils
     // ==============================
+    // Get a memoized merge of the default styles and the prop's in styles
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSelectStyles", (0, _memoizeOne.default)(function (defaultStyles, propStyles) {
+      return (0, _reactSelect.mergeStyles)(defaultStyles, propStyles || {});
+    }));
+    // Get a memoized override of our `<Select components={…}>` overrides.
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSelectComponents", (0, _memoizeOne.default)(function (mergedComponents, showSearchControl) {
+      if (!showSearchControl) {
+        // When we have no search control, we use a dummy override to hide it visually.
+        return _objectSpread(_objectSpread({}, mergedComponents), {}, {
+          Control: _components.DummyControl
+        });
+      }
+      return mergedComponents;
+    }));
     // account for groups when counting options
     // this may need to be recursive, right now it just counts one level
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getItemCount", function () {
@@ -294,6 +318,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         minMenuWidth = _this$props3.minMenuWidth,
         target = _this$props3.target,
         props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+      // TODO: If `platform.design-system-team.popup-select-render-perf_i0s6m` is kept, `focusLockEnabled` should be fully removed as we're preferring `isReferenceHidden`
       var _this$state = _this.state,
         focusLockEnabled = _this$state.focusLockEnabled,
         isOpen = _this$state.isOpen,
@@ -301,13 +326,18 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         mergedPopperProps = _this$state.mergedPopperProps;
       var showSearchControl = _this.showSearchControl();
       var portalDestination = canUseDOM() ? document.body : null;
-      var components = _objectSpread(_objectSpread({}, mergedComponents), {}, {
-        Control: showSearchControl ? mergedComponents.Control : _components.DummyControl
-      });
       if (!portalDestination || !isOpen) {
         return null;
       }
-      var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, {
+
+      // Memoized merge of defaultStyles and props.styles
+      var selectStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.popup-select-render-perf_i0s6m') ? _this.getSelectStyles(_this.defaultStyles, props.styles) : (0, _reactSelect.mergeStyles)(_this.defaultStyles, props.styles || {});
+
+      // Memoized variance of the default select components
+      var selectComponents = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.popup-select-render-perf_i0s6m') ? _this.getSelectComponents(mergedComponents, showSearchControl) : _objectSpread(_objectSpread({}, mergedComponents), {}, {
+        Control: showSearchControl ? mergedComponents.Control : _components.DummyControl
+      });
+      var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.popup-select-render-perf_i0s6m') ? undefined : {
         onFirstUpdate: function onFirstUpdate(state) {
           var _mergedPopperProps$on;
           _this.handleFirstPopperUpdate();
@@ -316,7 +346,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       }), function (_ref2) {
         var placement = _ref2.placement,
           ref = _ref2.ref,
-          style = _ref2.style;
+          style = _ref2.style,
+          isReferenceHidden = _ref2.isReferenceHidden;
+        /**
+         * The reference is not available yet, so the Popper and Portal is either being rendered at `0,0` (scrolled to the top)
+         * or not at all.  There's no reason to render the Select or lock scrolling at the top of the page yet.
+         */
+        var readyToRenderSelect = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.popup-select-render-perf_i0s6m') ? isReferenceHidden !== null : true;
         return /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
           innerRef: _this.resolveMenuRef(ref)
         }, /*#__PURE__*/_react.default.createElement(_components.MenuDialog, {
@@ -325,10 +361,18 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           minWidth: minMenuWidth,
           maxWidth: maxMenuWidth,
           id: _this.popperWrapperId
-        }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
-          disabled: !focusLockEnabled,
+        }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default
+        /*
+         * NOTE: We intentionally want the FocusLock to be disabled until the refs are populated in Popper.
+         * Until then, the portal the Popper creates is at `0,0`, meaning the FocusLock forces the page to scroll to `0,0`.
+         * We do not want the user to scroll to the top of the page when they open their PopupSelect, so we disable it.
+         *
+         *  WARNING: This causes additional renders, eg. ±5ms in our example, but unless
+         * FocusLock has a better way to avoid scrolling, this is necessary.
+         */, {
+          disabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.popup-select-render-perf_i0s6m') ? !readyToRenderSelect : !focusLockEnabled,
           returnFocus: true
-        }, /*#__PURE__*/_react.default.createElement(_reactSelect.default, (0, _extends2.default)({
+        }, readyToRenderSelect && /*#__PURE__*/_react.default.createElement(_reactSelect.default, (0, _extends2.default)({
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
           isClearable: false,
@@ -337,9 +381,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           ref: _this.getSelectRef
         }, props, {
           isSearchable: showSearchControl,
-          styles: (0, _reactSelect.mergeStyles)(_this.defaultStyles, props.styles || {}),
+          styles: selectStyles,
           maxMenuHeight: _this.getMaxHeight(),
-          components: components,
+          components: selectComponents,
           onChange: _this.handleSelectChange
         })), footer)));
       });

package/dist/cjs/RadioSelect.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,21 +9,26 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Select = _interopRequireDefault(require("./Select"));
 var _inputOptions = require("./components/input-options");
 var _excluded = ["components"];
+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; }
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var RadioSelect = function RadioSelect(_ref) {
+var RadioSelect = /*#__PURE__*/_react.default.memo(function (_ref) {
   var components = _ref.components,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var mergedComponents = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, components), {}, {
+      Option: _inputOptions.RadioOption
+    });
+  }, [components]);
   return /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({}, props, {
     isMulti: false,
-    components: _objectSpread(_objectSpread({}, components), {}, {
-      Option: _inputOptions.RadioOption
-    })
+    components: mergedComponents
   }));
-};
+});
 var _default = RadioSelect;
 exports.default = _default;

package/dist/cjs/Select.js

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

package/dist/cjs/version.json

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

package/dist/es2019/CheckboxSelect.js

@@ -1,20 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
 import Select from './Select';
 import { CheckboxOption } from './components/input-options';
-const CheckboxSelect = ({
+const CheckboxSelect = /*#__PURE__*/React.memo(({
   components,
   ...props
 }) => {
-  const temp = {
+  const mergedComponents = useMemo(() => ({
     ...components,
     Option: CheckboxOption
-  };
+  }), [components]);
   return /*#__PURE__*/React.createElement(Select, _extends({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
-    isMulti: true,
-    components: temp
-  }, props));
-};
+    isMulti: true
+  }, props, {
+    components: mergedComponents
+  }));
+});
 export default CheckboxSelect;

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -9,9 +9,11 @@ import { Manager, Reference, Popper } from 'react-popper';
 import NodeResolver from 'react-node-resolver';
 import shallowEqualObjects from 'shallow-equal/objects';
 import { N80 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
 import baseStyles from '../styles';
 import { bind } from 'bind-event-listener';
+import memoizeOne from 'memoize-one';
 /** Are we rendering on the client or server? */
 const canUseDOM = () => Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
 
@@ -43,7 +45,7 @@ const defaultPopperProps = {
 const isEmpty = obj => Object.keys(obj).length === 0;
 export default class PopupSelect extends PureComponent {
   constructor(...args) {
-    var _this$defaultOpenStat;
+    var _this$defaultOpenStat, _this$defaultOpenStat2;
     super(...args);
     _defineProperty(this, "menuRef", null);
     _defineProperty(this, "selectRef", null);
@@ -58,11 +60,15 @@ export default class PopupSelect extends PureComponent {
     }));
     _defineProperty(this, "isOpenControlled", this.props.isOpen !== undefined);
     _defineProperty(this, "defaultOpenState", this.isOpenControlled ? this.props.isOpen : this.props.defaultIsOpen);
-    _defineProperty(this, "state", {
-      focusLockEnabled: false,
+    _defineProperty(this, "state", getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? {
       isOpen: (_this$defaultOpenStat = this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
+    } : {
+      focusLockEnabled: false,
+      isOpen: (_this$defaultOpenStat2 = this.defaultOpenState) !== null && _this$defaultOpenStat2 !== void 0 ? _this$defaultOpenStat2 : false,
+      mergedComponents: defaultComponents,
+      mergedPopperProps: defaultPopperProps
     });
     _defineProperty(this, "popperWrapperId", `${uid({
       options: this.props.options
@@ -181,9 +187,13 @@ export default class PopupSelect extends PureComponent {
       this.setState({
         isOpen: false
       });
-      this.setState({
-        focusLockEnabled: false
-      });
+      if (getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m')) {
+        // Do nothing… (the pff eslint just doesn't like `!getBooleanFF(…)`)
+      } else {
+        this.setState({
+          focusLockEnabled: false
+        });
+      }
       if (this.targetRef != null) {
         this.targetRef.focus();
       }
@@ -219,6 +229,21 @@ export default class PopupSelect extends PureComponent {
     });
     // Utils
     // ==============================
+    // Get a memoized merge of the default styles and the prop's in styles
+    _defineProperty(this, "getSelectStyles", memoizeOne((defaultStyles, propStyles) => {
+      return mergeStyles(defaultStyles, propStyles || {});
+    }));
+    // Get a memoized override of our `<Select components={…}>` overrides.
+    _defineProperty(this, "getSelectComponents", memoizeOne((mergedComponents, showSearchControl) => {
+      if (!showSearchControl) {
+        // When we have no search control, we use a dummy override to hide it visually.
+        return {
+          ...mergedComponents,
+          Control: DummyControl
+        };
+      }
+      return mergedComponents;
+    }));
     // account for groups when counting options
     // this may need to be recursive, right now it just counts one level
     _defineProperty(this, "getItemCount", () => {
@@ -270,6 +295,7 @@ export default class PopupSelect extends PureComponent {
         target,
         ...props
       } = this.props;
+      // TODO: If `platform.design-system-team.popup-select-render-perf_i0s6m` is kept, `focusLockEnabled` should be fully removed as we're preferring `isReferenceHidden`
       const {
         focusLockEnabled,
         isOpen,
@@ -278,14 +304,19 @@ export default class PopupSelect extends PureComponent {
       } = this.state;
       const showSearchControl = this.showSearchControl();
       const portalDestination = canUseDOM() ? document.body : null;
-      const components = {
-        ...mergedComponents,
-        Control: showSearchControl ? mergedComponents.Control : DummyControl
-      };
       if (!portalDestination || !isOpen) {
         return null;
       }
-      const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
+
+      // Memoized merge of defaultStyles and props.styles
+      const selectStyles = getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? this.getSelectStyles(this.defaultStyles, props.styles) : mergeStyles(this.defaultStyles, props.styles || {});
+
+      // Memoized variance of the default select components
+      const selectComponents = getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? this.getSelectComponents(mergedComponents, showSearchControl) : {
+        ...mergedComponents,
+        Control: showSearchControl ? mergedComponents.Control : DummyControl
+      };
+      const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? undefined : {
         onFirstUpdate: state => {
           var _mergedPopperProps$on;
           this.handleFirstPopperUpdate();
@@ -294,8 +325,14 @@ export default class PopupSelect extends PureComponent {
       }), ({
         placement,
         ref,
-        style
+        style,
+        isReferenceHidden
       }) => {
+        /**
+         * The reference is not available yet, so the Popper and Portal is either being rendered at `0,0` (scrolled to the top)
+         * or not at all.  There's no reason to render the Select or lock scrolling at the top of the page yet.
+         */
+        const readyToRenderSelect = getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? isReferenceHidden !== null : true;
         return /*#__PURE__*/React.createElement(NodeResolver, {
           innerRef: this.resolveMenuRef(ref)
         }, /*#__PURE__*/React.createElement(MenuDialog, {
@@ -304,10 +341,18 @@ export default class PopupSelect extends PureComponent {
           minWidth: minMenuWidth,
           maxWidth: maxMenuWidth,
           id: this.popperWrapperId
-        }, /*#__PURE__*/React.createElement(FocusLock, {
-          disabled: !focusLockEnabled,
+        }, /*#__PURE__*/React.createElement(FocusLock
+        /*
+         * NOTE: We intentionally want the FocusLock to be disabled until the refs are populated in Popper.
+         * Until then, the portal the Popper creates is at `0,0`, meaning the FocusLock forces the page to scroll to `0,0`.
+         * We do not want the user to scroll to the top of the page when they open their PopupSelect, so we disable it.
+         *
+         *  WARNING: This causes additional renders, eg. ±5ms in our example, but unless
+         * FocusLock has a better way to avoid scrolling, this is necessary.
+         */, {
+          disabled: getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? !readyToRenderSelect : !focusLockEnabled,
           returnFocus: true
-        }, /*#__PURE__*/React.createElement(Select, _extends({
+        }, readyToRenderSelect && /*#__PURE__*/React.createElement(Select, _extends({
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
           isClearable: false,
@@ -316,9 +361,9 @@ export default class PopupSelect extends PureComponent {
           ref: this.getSelectRef
         }, props, {
           isSearchable: showSearchControl,
-          styles: mergeStyles(this.defaultStyles, props.styles || {}),
+          styles: selectStyles,
           maxMenuHeight: this.getMaxHeight(),
-          components: components,
+          components: selectComponents,
           onChange: this.handleSelectChange
         })), footer)));
       });

package/dist/es2019/RadioSelect.js

@@ -1,15 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
 import Select from './Select';
 import { RadioOption } from './components/input-options';
-const RadioSelect = ({
+const RadioSelect = /*#__PURE__*/React.memo(({
   components,
   ...props
-}) => /*#__PURE__*/React.createElement(Select, _extends({}, props, {
-  isMulti: false,
-  components: {
+}) => {
+  const mergedComponents = useMemo(() => ({
     ...components,
     Option: RadioOption
-  }
-}));
+  }), [components]);
+  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    isMulti: false,
+    components: mergedComponents
+  }));
+});
 export default RadioSelect;

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 = "16.3.0";
+const packageVersion = "16.4.0";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/version.json

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

package/dist/esm/CheckboxSelect.js

@@ -4,20 +4,23 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["components"];
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React from 'react';
+import React, { useMemo } from 'react';
 import Select from './Select';
 import { CheckboxOption } from './components/input-options';
-var CheckboxSelect = function CheckboxSelect(_ref) {
+var CheckboxSelect = /*#__PURE__*/React.memo(function (_ref) {
   var components = _ref.components,
     props = _objectWithoutProperties(_ref, _excluded);
-  var temp = _objectSpread(_objectSpread({}, components), {}, {
-    Option: CheckboxOption
-  });
+  var mergedComponents = useMemo(function () {
+    return _objectSpread(_objectSpread({}, components), {}, {
+      Option: CheckboxOption
+    });
+  }, [components]);
   return /*#__PURE__*/React.createElement(Select, _extends({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
-    isMulti: true,
-    components: temp
-  }, props));
-};
+    isMulti: true
+  }, props, {
+    components: mergedComponents
+  }));
+});
 export default CheckboxSelect;

package/dist/esm/PopupSelect/PopupSelect.js

@@ -21,9 +21,11 @@ import { Manager, Reference, Popper } from 'react-popper';
 import NodeResolver from 'react-node-resolver';
 import shallowEqualObjects from 'shallow-equal/objects';
 import { N80 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
 import baseStyles from '../styles';
 import { bind } from 'bind-event-listener';
+import memoizeOne from 'memoize-one';
 /** Are we rendering on the client or server? */
 var canUseDOM = function canUseDOM() {
   return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
@@ -61,7 +63,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
   _inherits(PopupSelect, _PureComponent);
   var _super = _createSuper(PopupSelect);
   function PopupSelect() {
-    var _this$defaultOpenStat;
+    var _this$defaultOpenStat, _this$defaultOpenStat2;
     var _this;
     _classCallCheck(this, PopupSelect);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -82,11 +84,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     }));
     _defineProperty(_assertThisInitialized(_this), "isOpenControlled", _this.props.isOpen !== undefined);
     _defineProperty(_assertThisInitialized(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      focusLockEnabled: false,
+    _defineProperty(_assertThisInitialized(_this), "state", getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? {
       isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
+    } : {
+      focusLockEnabled: false,
+      isOpen: (_this$defaultOpenStat2 = _this.defaultOpenState) !== null && _this$defaultOpenStat2 !== void 0 ? _this$defaultOpenStat2 : false,
+      mergedComponents: defaultComponents,
+      mergedPopperProps: defaultPopperProps
     });
     _defineProperty(_assertThisInitialized(_this), "popperWrapperId", "".concat(uid({
       options: _this.props.options
@@ -197,9 +203,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       _this.setState({
         isOpen: false
       });
-      _this.setState({
-        focusLockEnabled: false
-      });
+      if (getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m')) {
+        // Do nothing… (the pff eslint just doesn't like `!getBooleanFF(…)`)
+      } else {
+        _this.setState({
+          focusLockEnabled: false
+        });
+      }
       if (_this.targetRef != null) {
         _this.targetRef.focus();
       }
@@ -239,6 +249,20 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
     // Utils
     // ==============================
+    // Get a memoized merge of the default styles and the prop's in styles
+    _defineProperty(_assertThisInitialized(_this), "getSelectStyles", memoizeOne(function (defaultStyles, propStyles) {
+      return mergeStyles(defaultStyles, propStyles || {});
+    }));
+    // Get a memoized override of our `<Select components={…}>` overrides.
+    _defineProperty(_assertThisInitialized(_this), "getSelectComponents", memoizeOne(function (mergedComponents, showSearchControl) {
+      if (!showSearchControl) {
+        // When we have no search control, we use a dummy override to hide it visually.
+        return _objectSpread(_objectSpread({}, mergedComponents), {}, {
+          Control: DummyControl
+        });
+      }
+      return mergedComponents;
+    }));
     // account for groups when counting options
     // this may need to be recursive, right now it just counts one level
     _defineProperty(_assertThisInitialized(_this), "getItemCount", function () {
@@ -284,6 +308,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         minMenuWidth = _this$props3.minMenuWidth,
         target = _this$props3.target,
         props = _objectWithoutProperties(_this$props3, _excluded);
+      // TODO: If `platform.design-system-team.popup-select-render-perf_i0s6m` is kept, `focusLockEnabled` should be fully removed as we're preferring `isReferenceHidden`
       var _this$state = _this.state,
         focusLockEnabled = _this$state.focusLockEnabled,
         isOpen = _this$state.isOpen,
@@ -291,13 +316,18 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         mergedPopperProps = _this$state.mergedPopperProps;
       var showSearchControl = _this.showSearchControl();
       var portalDestination = canUseDOM() ? document.body : null;
-      var components = _objectSpread(_objectSpread({}, mergedComponents), {}, {
-        Control: showSearchControl ? mergedComponents.Control : DummyControl
-      });
       if (!portalDestination || !isOpen) {
         return null;
       }
-      var popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
+
+      // Memoized merge of defaultStyles and props.styles
+      var selectStyles = getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? _this.getSelectStyles(_this.defaultStyles, props.styles) : mergeStyles(_this.defaultStyles, props.styles || {});
+
+      // Memoized variance of the default select components
+      var selectComponents = getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? _this.getSelectComponents(mergedComponents, showSearchControl) : _objectSpread(_objectSpread({}, mergedComponents), {}, {
+        Control: showSearchControl ? mergedComponents.Control : DummyControl
+      });
+      var popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? undefined : {
         onFirstUpdate: function onFirstUpdate(state) {
           var _mergedPopperProps$on;
           _this.handleFirstPopperUpdate();
@@ -306,7 +336,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       }), function (_ref2) {
         var placement = _ref2.placement,
           ref = _ref2.ref,
-          style = _ref2.style;
+          style = _ref2.style,
+          isReferenceHidden = _ref2.isReferenceHidden;
+        /**
+         * The reference is not available yet, so the Popper and Portal is either being rendered at `0,0` (scrolled to the top)
+         * or not at all.  There's no reason to render the Select or lock scrolling at the top of the page yet.
+         */
+        var readyToRenderSelect = getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? isReferenceHidden !== null : true;
         return /*#__PURE__*/React.createElement(NodeResolver, {
           innerRef: _this.resolveMenuRef(ref)
         }, /*#__PURE__*/React.createElement(MenuDialog, {
@@ -315,10 +351,18 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           minWidth: minMenuWidth,
           maxWidth: maxMenuWidth,
           id: _this.popperWrapperId
-        }, /*#__PURE__*/React.createElement(FocusLock, {
-          disabled: !focusLockEnabled,
+        }, /*#__PURE__*/React.createElement(FocusLock
+        /*
+         * NOTE: We intentionally want the FocusLock to be disabled until the refs are populated in Popper.
+         * Until then, the portal the Popper creates is at `0,0`, meaning the FocusLock forces the page to scroll to `0,0`.
+         * We do not want the user to scroll to the top of the page when they open their PopupSelect, so we disable it.
+         *
+         *  WARNING: This causes additional renders, eg. ±5ms in our example, but unless
+         * FocusLock has a better way to avoid scrolling, this is necessary.
+         */, {
+          disabled: getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? !readyToRenderSelect : !focusLockEnabled,
           returnFocus: true
-        }, /*#__PURE__*/React.createElement(Select, _extends({
+        }, readyToRenderSelect && /*#__PURE__*/React.createElement(Select, _extends({
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
           isClearable: false,
@@ -327,9 +371,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           ref: _this.getSelectRef
         }, props, {
           isSearchable: showSearchControl,
-          styles: mergeStyles(_this.defaultStyles, props.styles || {}),
+          styles: selectStyles,
           maxMenuHeight: _this.getMaxHeight(),
-          components: components,
+          components: selectComponents,
           onChange: _this.handleSelectChange
         })), footer)));
       });

package/dist/esm/RadioSelect.js

@@ -4,17 +4,20 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["components"];
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React from 'react';
+import React, { useMemo } from 'react';
 import Select from './Select';
 import { RadioOption } from './components/input-options';
-var RadioSelect = function RadioSelect(_ref) {
+var RadioSelect = /*#__PURE__*/React.memo(function (_ref) {
   var components = _ref.components,
     props = _objectWithoutProperties(_ref, _excluded);
+  var mergedComponents = useMemo(function () {
+    return _objectSpread(_objectSpread({}, components), {}, {
+      Option: RadioOption
+    });
+  }, [components]);
   return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
     isMulti: false,
-    components: _objectSpread(_objectSpread({}, components), {}, {
-      Option: RadioOption
-    })
+    components: mergedComponents
   }));
-};
+});
 export default RadioSelect;

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

package/dist/esm/version.json

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

package/dist/types/CheckboxSelect.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { SelectProps, OptionType } from './types';
-declare const CheckboxSelect: ({ components, ...props }: SelectProps<OptionType, true>) => JSX.Element;
+declare const CheckboxSelect: React.MemoExoticComponent<({ components, ...props }: SelectProps<OptionType, true>) => JSX.Element>;
 export default CheckboxSelect;

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

@@ -1,6 +1,8 @@
 import React, { PureComponent, ReactNode } from 'react';
+import { GroupBase } from 'react-select';
 import BaseSelect from 'react-select/base';
 import { PopperProps } from 'react-popper';
+import { defaultComponents } from './components';
 import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType, ValidationState } from '../types';
 import { UnbindFn } from 'bind-event-listener';
 type defaultModifiers = 'offset' | 'preventOverflow';
@@ -74,7 +76,12 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     testId?: string;
 }
 interface State<Modifiers = string> {
-    focusLockEnabled: boolean;
+    /**
+     * TODO: This type should be cleaned up with `platform.design-system-team.popup-select-render-perf_i0s6m`.
+     *  - If discarded, revert to `focusLockEnabled: boolean`
+     *  - If kept, delete this type.
+     */
+    focusLockEnabled?: boolean;
     isOpen: boolean;
     mergedComponents: Object;
     mergedPopperProps: PopperPropsNoChildren<defaultModifiers | Modifiers>;
@@ -89,6 +96,15 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     isOpenControlled: boolean;
     defaultOpenState: boolean | undefined;
     state: {
+        isOpen: boolean;
+        mergedComponents: {
+            Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
+            DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
+            Menu: ({ children, innerProps, ...props }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
+        };
+        mergedPopperProps: PopperPropsNoChildren<string>;
+        focusLockEnabled?: undefined;
+    } | {
         focusLockEnabled: boolean;
         isOpen: boolean;
         mergedComponents: {
@@ -138,6 +154,72 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     resolveTargetRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
     resolveMenuRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
     getSelectRef: (ref: BaseSelect<Option, IsMulti>) => void;
+    getSelectStyles: import("memoize-one").MemoizedFn<(defaultStyles: StylesConfig<Option, IsMulti>, propStyles: StylesConfig<Option, IsMulti> | undefined) => {
+        clearIndicator?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ClearIndicatorProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        container?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ContainerProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        control?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ControlProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        dropdownIndicator?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").DropdownIndicatorProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        group?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").GroupProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        groupHeading?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").GroupHeadingProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        indicatorsContainer?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").IndicatorsContainerProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        indicatorSeparator?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").IndicatorSeparatorProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        input?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").InputProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        loadingIndicator?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").LoadingIndicatorProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        loadingMessage?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").NoticeProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        menu?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MenuProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        menuList?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MenuListProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        menuPortal?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select/dist/declarations/src/components/Menu").PortalStyleArgs> | undefined;
+        multiValue?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MultiValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        multiValueLabel?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MultiValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        multiValueRemove?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MultiValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        noOptionsMessage?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").NoticeProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        option?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").OptionProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        placeholder?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").PlaceholderProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        singleValue?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").SingleValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        valueContainer?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ValueContainerProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+    }>;
+    getSelectComponents: import("memoize-one").MemoizedFn<(mergedComponents: typeof defaultComponents, showSearchControl: boolean | undefined) => Partial<{
+        ClearIndicator: <Option_1, IsMulti_1 extends boolean, Group extends GroupBase<Option_1>>(props: import("react-select").ClearIndicatorProps<Option_1, IsMulti_1, Group>) => import("@emotion/react").jsx.JSX.Element;
+        Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
+        DropdownIndicator: <Option_2, IsMulti_2 extends boolean, Group_2 extends GroupBase<Option_2>>(props: import("react-select").DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
+        DownChevron: (props: import("react-select/dist/declarations/src/components/indicators").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
+        CrossIcon: (props: import("react-select/dist/declarations/src/components/indicators").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
+        Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
+        GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
+        IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
+        IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
+        Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
+        LoadingIndicator: {
+            <Option_8, IsMulti_8 extends boolean, Group_8 extends GroupBase<Option_8>>(props: import("react-select").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>): import("@emotion/react").jsx.JSX.Element;
+            defaultProps: {
+                size: number;
+            };
+        };
+        Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
+        MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
+        MenuPortal: typeof import("react-select/dist/declarations/src/components/Menu").MenuPortal;
+        LoadingMessage: {
+            <Option_11, IsMulti_11 extends boolean, Group_11 extends GroupBase<Option_11>>(props: import("react-select").NoticeProps<Option_11, IsMulti_11, Group_11>): import("@emotion/react").jsx.JSX.Element;
+            defaultProps: {
+                children: string;
+            };
+        };
+        NoOptionsMessage: {
+            <Option_12, IsMulti_12 extends boolean, Group_12 extends GroupBase<Option_12>>(props: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>): import("@emotion/react").jsx.JSX.Element;
+            defaultProps: {
+                children: string;
+            };
+        };
+        MultiValue: <Option_13, IsMulti_13 extends boolean, Group_13 extends GroupBase<Option_13>>(props: import("react-select").MultiValueProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
+        MultiValueContainer: <Option_14, IsMulti_14 extends boolean, Group_14 extends GroupBase<Option_14>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
+        MultiValueLabel: <Option_14_1, IsMulti_14_1 extends boolean, Group_14_1 extends GroupBase<Option_14_1>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_14_1, IsMulti_14_1, Group_14_1>) => import("@emotion/react").jsx.JSX.Element;
+        MultiValueRemove: typeof import("react-select/dist/declarations/src/components/MultiValue").MultiValueRemove;
+        Option: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>(props: import("react-select").OptionProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
+        Placeholder: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>(props: import("react-select").PlaceholderProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
+        SelectContainer: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import("react-select").ContainerProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
+        SingleValue: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import("react-select").SingleValueProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
+        ValueContainer: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: import("react-select").ValueContainerProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
+    }>>;
     getItemCount: () => number;
     getMaxHeight: () => number | undefined;
     showSearchControl: () => boolean | undefined;

package/dist/types/RadioSelect.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { SelectProps, OptionType } from './types';
-declare const RadioSelect: ({ components, ...props }: SelectProps<OptionType>) => JSX.Element;
+declare const RadioSelect: React.MemoExoticComponent<({ components, ...props }: SelectProps<OptionType>) => JSX.Element>;
 export default RadioSelect;

package/dist/types-ts4.5/CheckboxSelect.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { SelectProps, OptionType } from './types';
-declare const CheckboxSelect: ({ components, ...props }: SelectProps<OptionType, true>) => JSX.Element;
+declare const CheckboxSelect: React.MemoExoticComponent<({ components, ...props }: SelectProps<OptionType, true>) => JSX.Element>;
 export default CheckboxSelect;

package/dist/types-ts4.5/PopupSelect/PopupSelect.d.ts

@@ -1,6 +1,8 @@
 import React, { PureComponent, ReactNode } from 'react';
+import { GroupBase } from 'react-select';
 import BaseSelect from 'react-select/base';
 import { PopperProps } from 'react-popper';
+import { defaultComponents } from './components';
 import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType, ValidationState } from '../types';
 import { UnbindFn } from 'bind-event-listener';
 type defaultModifiers = 'offset' | 'preventOverflow';
@@ -74,7 +76,12 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     testId?: string;
 }
 interface State<Modifiers = string> {
-    focusLockEnabled: boolean;
+    /**
+     * TODO: This type should be cleaned up with `platform.design-system-team.popup-select-render-perf_i0s6m`.
+     *  - If discarded, revert to `focusLockEnabled: boolean`
+     *  - If kept, delete this type.
+     */
+    focusLockEnabled?: boolean;
     isOpen: boolean;
     mergedComponents: Object;
     mergedPopperProps: PopperPropsNoChildren<defaultModifiers | Modifiers>;
@@ -89,6 +96,15 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     isOpenControlled: boolean;
     defaultOpenState: boolean | undefined;
     state: {
+        isOpen: boolean;
+        mergedComponents: {
+            Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
+            DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
+            Menu: ({ children, innerProps, ...props }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
+        };
+        mergedPopperProps: PopperPropsNoChildren<string>;
+        focusLockEnabled?: undefined;
+    } | {
         focusLockEnabled: boolean;
         isOpen: boolean;
         mergedComponents: {
@@ -138,6 +154,72 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     resolveTargetRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
     resolveMenuRef: (popperRef: React.Ref<HTMLElement>) => (ref: HTMLElement) => void;
     getSelectRef: (ref: BaseSelect<Option, IsMulti>) => void;
+    getSelectStyles: import("memoize-one").MemoizedFn<(defaultStyles: StylesConfig<Option, IsMulti>, propStyles: StylesConfig<Option, IsMulti> | undefined) => {
+        clearIndicator?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ClearIndicatorProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        container?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ContainerProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        control?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ControlProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        dropdownIndicator?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").DropdownIndicatorProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        group?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").GroupProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        groupHeading?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").GroupHeadingProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        indicatorsContainer?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").IndicatorsContainerProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        indicatorSeparator?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").IndicatorSeparatorProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        input?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").InputProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        loadingIndicator?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").LoadingIndicatorProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        loadingMessage?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").NoticeProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        menu?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MenuProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        menuList?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MenuListProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        menuPortal?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select/dist/declarations/src/components/Menu").PortalStyleArgs> | undefined;
+        multiValue?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MultiValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        multiValueLabel?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MultiValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        multiValueRemove?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MultiValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        noOptionsMessage?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").NoticeProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        option?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").OptionProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        placeholder?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").PlaceholderProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        singleValue?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").SingleValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        valueContainer?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ValueContainerProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+    }>;
+    getSelectComponents: import("memoize-one").MemoizedFn<(mergedComponents: typeof defaultComponents, showSearchControl: boolean | undefined) => Partial<{
+        ClearIndicator: <Option_1, IsMulti_1 extends boolean, Group extends GroupBase<Option_1>>(props: import("react-select").ClearIndicatorProps<Option_1, IsMulti_1, Group>) => import("@emotion/react").jsx.JSX.Element;
+        Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
+        DropdownIndicator: <Option_2, IsMulti_2 extends boolean, Group_2 extends GroupBase<Option_2>>(props: import("react-select").DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
+        DownChevron: (props: import("react-select/dist/declarations/src/components/indicators").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
+        CrossIcon: (props: import("react-select/dist/declarations/src/components/indicators").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
+        Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
+        GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
+        IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
+        IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
+        Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
+        LoadingIndicator: {
+            <Option_8, IsMulti_8 extends boolean, Group_8 extends GroupBase<Option_8>>(props: import("react-select").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>): import("@emotion/react").jsx.JSX.Element;
+            defaultProps: {
+                size: number;
+            };
+        };
+        Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
+        MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
+        MenuPortal: typeof import("react-select/dist/declarations/src/components/Menu").MenuPortal;
+        LoadingMessage: {
+            <Option_11, IsMulti_11 extends boolean, Group_11 extends GroupBase<Option_11>>(props: import("react-select").NoticeProps<Option_11, IsMulti_11, Group_11>): import("@emotion/react").jsx.JSX.Element;
+            defaultProps: {
+                children: string;
+            };
+        };
+        NoOptionsMessage: {
+            <Option_12, IsMulti_12 extends boolean, Group_12 extends GroupBase<Option_12>>(props: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>): import("@emotion/react").jsx.JSX.Element;
+            defaultProps: {
+                children: string;
+            };
+        };
+        MultiValue: <Option_13, IsMulti_13 extends boolean, Group_13 extends GroupBase<Option_13>>(props: import("react-select").MultiValueProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
+        MultiValueContainer: <Option_14, IsMulti_14 extends boolean, Group_14 extends GroupBase<Option_14>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
+        MultiValueLabel: <Option_14_1, IsMulti_14_1 extends boolean, Group_14_1 extends GroupBase<Option_14_1>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_14_1, IsMulti_14_1, Group_14_1>) => import("@emotion/react").jsx.JSX.Element;
+        MultiValueRemove: typeof import("react-select/dist/declarations/src/components/MultiValue").MultiValueRemove;
+        Option: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>(props: import("react-select").OptionProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
+        Placeholder: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>(props: import("react-select").PlaceholderProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
+        SelectContainer: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import("react-select").ContainerProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
+        SingleValue: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import("react-select").SingleValueProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
+        ValueContainer: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: import("react-select").ValueContainerProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
+    }>>;
     getItemCount: () => number;
     getMaxHeight: () => number | undefined;
     showSearchControl: () => boolean | undefined;

package/dist/types-ts4.5/RadioSelect.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { SelectProps, OptionType } from './types';
-declare const RadioSelect: ({ components, ...props }: SelectProps<OptionType>) => JSX.Element;
+declare const RadioSelect: React.MemoExoticComponent<({ components, ...props }: SelectProps<OptionType>) => JSX.Element>;
 export default RadioSelect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.3.0",
+  "version": "16.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/"
@@ -73,7 +73,6 @@
     "@atlaskit/radio": "^5.6.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -104,6 +103,9 @@
   "platform-feature-flags": {
     "platform.design-system-team.update-border-input_ff9l1": {
       "type": "boolean"
+    },
+    "platform.design-system-team.popup-select-render-perf_i0s6m": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/select/",