@atlaskit/select 17.1.1 → 17.1.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 17.1.3
+
+### Patch Changes
+
+- [#75946](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75946) [`cc843d47d71e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cc843d47d71e) - Reverted the feature flag which reduced re-renders in `<PopupSelect>` as it had other unintended side-effects.
+
+## 17.1.2
+
+### Patch Changes
+
+- [#74756](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74756) [`8e66f751df96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8e66f751df96) - Use feature flag to roll out border width update from 2px to 1px
+
 ## 17.1.1
 
 ### Patch Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -28,7 +28,6 @@ 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", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId"];
 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; }
@@ -73,7 +72,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(PopupSelect, _PureComponent);
   var _super = _createSuper(PopupSelect);
   function PopupSelect() {
-    var _this$defaultOpenStat, _this$defaultOpenStat2;
+    var _this$defaultOpenStat;
     var _this;
     (0, _classCallCheck2.default)(this, PopupSelect);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -94,13 +93,9 @@ var PopupSelect = exports.default = /*#__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", (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
-    } : {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       focusLockEnabled: false,
-      isOpen: (_this$defaultOpenStat2 = _this.defaultOpenState) !== null && _this$defaultOpenStat2 !== void 0 ? _this$defaultOpenStat2 : false,
+      isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: _components.defaultComponents,
       mergedPopperProps: defaultPopperProps
     });
@@ -221,13 +216,9 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       _this.setState({
         isOpen: 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
-        });
-      }
+      _this.setState({
+        focusLockEnabled: false
+      });
       if (_this.targetRef != null) {
         _this.targetRef.focus();
       }
@@ -267,20 +258,6 @@ var PopupSelect = exports.default = /*#__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 () {
@@ -329,7 +306,6 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         target = _this$props3.target,
         testId = _this$props3.testId,
         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,
@@ -340,12 +316,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       if (!portalDestination || !isOpen) {
         return null;
       }
-
-      // 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), {}, {
+      var selectComponents = _objectSpread(_objectSpread({}, mergedComponents), {}, {
         Control: showSearchControl ? mergedComponents.Control : _components.DummyControl
       });
       var getLabel = function getLabel() {
@@ -355,7 +326,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           return placeholder;
         }
       };
-      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 : {
+      var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, {
         onFirstUpdate: function onFirstUpdate(state) {
           var _mergedPopperProps$on;
           _this.handleFirstPopperUpdate();
@@ -364,13 +335,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       }), function (_ref2) {
         var placement = _ref2.placement,
           ref = _ref2.ref,
-          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;
+          style = _ref2.style;
         return /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
           innerRef: _this.resolveMenuRef(ref)
         }, /*#__PURE__*/_react.default.createElement(_components.MenuDialog, {
@@ -380,18 +345,10 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           maxWidth: maxMenuWidth,
           id: _this.popperWrapperId,
           testId: testId
-        }, /*#__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,
+        }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
+          disabled: !focusLockEnabled,
           returnFocus: true
-        }, readyToRenderSelect && /*#__PURE__*/_react.default.createElement(_reactSelect.default, (0, _extends2.default)({
+        }, /*#__PURE__*/_react.default.createElement(_reactSelect.default, (0, _extends2.default)({
           "aria-label": getLabel(),
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
@@ -407,7 +364,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
             (_props$onMenuClose = props.onMenuClose) === null || _props$onMenuClose === void 0 || _props$onMenuClose.call(props);
           },
           isSearchable: showSearchControl,
-          styles: selectStyles,
+          styles: (0, _reactSelect.mergeStyles)(_this.defaultStyles, props.styles || {}),
           maxMenuHeight: _this.getMaxHeight(),
           components: selectComponents,
           onChange: _this.handleSelectChange

package/dist/cjs/Select.js

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

package/dist/cjs/components/input-options.js

@@ -137,7 +137,7 @@ var baseIconStyles = (0, _react.css)({
   // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& svg rect, & svg circle:first-of-type': {
-    strokeWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
+    strokeWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
     strokeLinejoin: 'round'
   }
 });

package/dist/cjs/styles.js

@@ -75,9 +75,9 @@ function baseStyles(validationState) {
         borderColor: borderColor,
         borderStyle: 'solid',
         borderRadius: "var(--ds-border-radius-100, 3px)",
-        borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
+        borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
         boxShadow: 'none'
-      }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') && {
+      }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') && {
         '&:focus-within': {
           boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor)
         }

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -13,7 +13,6 @@ 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);
 
@@ -45,7 +44,7 @@ const defaultPopperProps = {
 const isEmpty = obj => Object.keys(obj).length === 0;
 export default class PopupSelect extends PureComponent {
   constructor(...args) {
-    var _this$defaultOpenStat, _this$defaultOpenStat2;
+    var _this$defaultOpenStat;
     super(...args);
     _defineProperty(this, "menuRef", null);
     _defineProperty(this, "selectRef", null);
@@ -60,13 +59,9 @@ 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", 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
-    } : {
+    _defineProperty(this, "state", {
       focusLockEnabled: false,
-      isOpen: (_this$defaultOpenStat2 = this.defaultOpenState) !== null && _this$defaultOpenStat2 !== void 0 ? _this$defaultOpenStat2 : false,
+      isOpen: (_this$defaultOpenStat = this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
     });
@@ -195,13 +190,9 @@ export default class PopupSelect extends PureComponent {
       this.setState({
         isOpen: 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
-        });
-      }
+      this.setState({
+        focusLockEnabled: false
+      });
       if (this.targetRef != null) {
         this.targetRef.focus();
       }
@@ -237,21 +228,6 @@ 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", () => {
@@ -306,7 +282,6 @@ export default class PopupSelect extends PureComponent {
         testId,
         ...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,
@@ -318,12 +293,7 @@ export default class PopupSelect extends PureComponent {
       if (!portalDestination || !isOpen) {
         return null;
       }
-
-      // 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) : {
+      const selectComponents = {
         ...mergedComponents,
         Control: showSearchControl ? mergedComponents.Control : DummyControl
       };
@@ -334,7 +304,7 @@ export default class PopupSelect extends PureComponent {
           return placeholder;
         }
       };
-      const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? undefined : {
+      const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
         onFirstUpdate: state => {
           var _mergedPopperProps$on;
           this.handleFirstPopperUpdate();
@@ -343,56 +313,40 @@ export default class PopupSelect extends PureComponent {
       }), ({
         placement,
         ref,
-        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, {
-          style: style,
-          "data-placement": placement,
-          minWidth: minMenuWidth,
-          maxWidth: maxMenuWidth,
-          id: this.popperWrapperId,
-          testId: testId
-        }, /*#__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
-        }, readyToRenderSelect && /*#__PURE__*/React.createElement(Select, _extends({
-          "aria-label": getLabel(),
-          backspaceRemovesValue: false,
-          controlShouldRenderValue: false,
-          isClearable: false,
-          tabSelectsValue: false,
-          menuIsOpen: true,
-          placeholder: placeholder,
-          ref: this.getSelectRef
-        }, props, {
-          onMenuClose: () => {
-            var _props$onMenuClose;
-            getBooleanFF('platform.design-system-team.popup-select-close_8h15h') && this.close();
-            (_props$onMenuClose = props.onMenuClose) === null || _props$onMenuClose === void 0 ? void 0 : _props$onMenuClose.call(props);
-          },
-          isSearchable: showSearchControl,
-          styles: selectStyles,
-          maxMenuHeight: this.getMaxHeight(),
-          components: selectComponents,
-          onChange: this.handleSelectChange
-        })), footer)));
-      });
+        style
+      }) => /*#__PURE__*/React.createElement(NodeResolver, {
+        innerRef: this.resolveMenuRef(ref)
+      }, /*#__PURE__*/React.createElement(MenuDialog, {
+        style: style,
+        "data-placement": placement,
+        minWidth: minMenuWidth,
+        maxWidth: maxMenuWidth,
+        id: this.popperWrapperId,
+        testId: testId
+      }, /*#__PURE__*/React.createElement(FocusLock, {
+        disabled: !focusLockEnabled,
+        returnFocus: true
+      }, /*#__PURE__*/React.createElement(Select, _extends({
+        "aria-label": getLabel(),
+        backspaceRemovesValue: false,
+        controlShouldRenderValue: false,
+        isClearable: false,
+        tabSelectsValue: false,
+        menuIsOpen: true,
+        placeholder: placeholder,
+        ref: this.getSelectRef
+      }, props, {
+        onMenuClose: () => {
+          var _props$onMenuClose;
+          getBooleanFF('platform.design-system-team.popup-select-close_8h15h') && this.close();
+          (_props$onMenuClose = props.onMenuClose) === null || _props$onMenuClose === void 0 ? void 0 : _props$onMenuClose.call(props);
+        },
+        isSearchable: showSearchControl,
+        styles: mergeStyles(this.defaultStyles, props.styles || {}),
+        maxMenuHeight: this.getMaxHeight(),
+        components: selectComponents,
+        onChange: this.handleSelectChange
+      })), footer))));
       return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/createPortal(popper, portalDestination);
     });
   }

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

package/dist/es2019/components/input-options.js

@@ -126,7 +126,7 @@ const baseIconStyles = css({
   // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& svg rect, & svg circle:first-of-type': {
-    strokeWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
+    strokeWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
     strokeLinejoin: 'round'
   }
 });

package/dist/es2019/styles.js

@@ -65,9 +65,9 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         borderColor,
         borderStyle: 'solid',
         borderRadius: "var(--ds-border-radius-100, 3px)",
-        borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
+        borderWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
         boxShadow: 'none',
-        ...(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && {
+        ...(getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && {
           '&:focus-within': {
             boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColor}`
           }

package/dist/esm/PopupSelect/PopupSelect.js

@@ -25,7 +25,6 @@ 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);
@@ -63,7 +62,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
   _inherits(PopupSelect, _PureComponent);
   var _super = _createSuper(PopupSelect);
   function PopupSelect() {
-    var _this$defaultOpenStat, _this$defaultOpenStat2;
+    var _this$defaultOpenStat;
     var _this;
     _classCallCheck(this, PopupSelect);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -84,13 +83,9 @@ 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", 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
-    } : {
+    _defineProperty(_assertThisInitialized(_this), "state", {
       focusLockEnabled: false,
-      isOpen: (_this$defaultOpenStat2 = _this.defaultOpenState) !== null && _this$defaultOpenStat2 !== void 0 ? _this$defaultOpenStat2 : false,
+      isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
     });
@@ -211,13 +206,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       _this.setState({
         isOpen: 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
-        });
-      }
+      _this.setState({
+        focusLockEnabled: false
+      });
       if (_this.targetRef != null) {
         _this.targetRef.focus();
       }
@@ -257,20 +248,6 @@ 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 () {
@@ -319,7 +296,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         target = _this$props3.target,
         testId = _this$props3.testId,
         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,
@@ -330,12 +306,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       if (!portalDestination || !isOpen) {
         return null;
       }
-
-      // 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), {}, {
+      var selectComponents = _objectSpread(_objectSpread({}, mergedComponents), {}, {
         Control: showSearchControl ? mergedComponents.Control : DummyControl
       });
       var getLabel = function getLabel() {
@@ -345,7 +316,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           return placeholder;
         }
       };
-      var popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? undefined : {
+      var popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
         onFirstUpdate: function onFirstUpdate(state) {
           var _mergedPopperProps$on;
           _this.handleFirstPopperUpdate();
@@ -354,13 +325,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       }), function (_ref2) {
         var placement = _ref2.placement,
           ref = _ref2.ref,
-          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;
+          style = _ref2.style;
         return /*#__PURE__*/React.createElement(NodeResolver, {
           innerRef: _this.resolveMenuRef(ref)
         }, /*#__PURE__*/React.createElement(MenuDialog, {
@@ -370,18 +335,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           maxWidth: maxMenuWidth,
           id: _this.popperWrapperId,
           testId: testId
-        }, /*#__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,
+        }, /*#__PURE__*/React.createElement(FocusLock, {
+          disabled: !focusLockEnabled,
           returnFocus: true
-        }, readyToRenderSelect && /*#__PURE__*/React.createElement(Select, _extends({
+        }, /*#__PURE__*/React.createElement(Select, _extends({
           "aria-label": getLabel(),
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
@@ -397,7 +354,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
             (_props$onMenuClose = props.onMenuClose) === null || _props$onMenuClose === void 0 || _props$onMenuClose.call(props);
           },
           isSearchable: showSearchControl,
-          styles: selectStyles,
+          styles: mergeStyles(_this.defaultStyles, props.styles || {}),
           maxMenuHeight: _this.getMaxHeight(),
           components: selectComponents,
           onChange: _this.handleSelectChange

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

package/dist/esm/components/input-options.js

@@ -131,7 +131,7 @@ var baseIconStyles = css({
   // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& svg rect, & svg circle:first-of-type': {
-    strokeWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
+    strokeWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
     strokeLinejoin: 'round'
   }
 });

package/dist/esm/styles.js

@@ -69,9 +69,9 @@ export default function baseStyles(validationState) {
         borderColor: borderColor,
         borderStyle: 'solid',
         borderRadius: "var(--ds-border-radius-100, 3px)",
-        borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
+        borderWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
         boxShadow: 'none'
-      }, getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && {
+      }, getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && {
         '&:focus-within': {
           boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor)
         }

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

@@ -1,8 +1,6 @@
 import React, { KeyboardEventHandler, 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';
@@ -17,11 +15,11 @@ interface PopupSelectTriggerProps {
 export type ModifierList = 'offset' | 'computeStyles' | 'preventOverflow' | 'handleFlipStyle' | 'flip' | 'popperOffsets' | 'arrow' | 'hide' | 'eventListeners' | 'applyStyles';
 export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean = false, Modifiers = ModifierList> extends ReactSelectProps<Option, IsMulti> {
     /**
-     * Defines whether the menu should close when selected. Defaults to "true"
+     * Defines whether the menu should close when selected. The default is `true`.
      */
     closeMenuOnSelect?: boolean;
     /**
-     * The footer content shown at the bottom of the Popup, underneath the Select options
+     * The footer content shown at the bottom of the popup, underneath the select options.
      */
     footer?: ReactNode;
     /**
@@ -33,21 +31,21 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
      */
     popperProps?: PopperPropsNoChildren<Modifiers>;
     /**
-     * The maximum number of options the select can contain without rendering the search field. Defaults to 5.
+     * The maximum number of options the select can contain without rendering the search field. The default is `5`.
      */
     searchThreshold?: number;
     /**
-     * If false, renders a select with no search field. If true, renders a search field in the select when the
-     * number of options exceeds the `searchThreshold`. Defaults to true.
+     * If `false`, renders a select with no search field. If `true`, renders a search field in the select when the
+     * number of options exceeds the `searchThreshold`. The default is `true`.
      */
     isSearchable?: boolean;
     /**
-     * The maximum width for the popup menu. Can be a number, representing width in pixels,
+     * The maximum width for the popup menu. Can be a number, representing the 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,
+     * The maximum width for the popup menu. Can be a number, representing the width in pixels,
      * or a string containing a CSS length datatype.
      */
     minMenuWidth?: number | string;
@@ -69,23 +67,18 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     }) => ReactNode;
     isOpen?: boolean;
     defaultIsOpen?: boolean;
-    /** The prop indicates if the component has a compacted look */
+    /** Use this to set whether the component uses compact or standard spacing. */
     spacing?: string;
     /** @deprecated Use isInvalid instead. The state of validation if used in a form */
     validationState?: ValidationState;
-    /** This prop indicates if the component is in an error state */
+    /** This prop indicates if the component is in an error state. */
     isInvalid?: boolean;
-    /** This gives an accessible name to the input for users of assistive technologies */
+    /** This gives an accessible name to the input for people who use assistive technology. */
     label?: string;
     testId?: string;
 }
 interface State<Modifiers = string> {
-    /**
-     * 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;
+    focusLockEnabled: boolean;
     isOpen: boolean;
     mergedComponents: Object;
     mergedPopperProps: PopperPropsNoChildren<defaultModifiers | Modifiers>;
@@ -100,15 +93,6 @@ 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 }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
-        };
-        mergedPopperProps: PopperPropsNoChildren<string>;
-        focusLockEnabled?: undefined;
-    } | {
         focusLockEnabled: boolean;
         isOpen: boolean;
         mergedComponents: {
@@ -159,85 +143,6 @@ 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; /** @deprecated Use isInvalid instead. The state of validation if used in a form */
-        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;
-        /**
-          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
-          - `onKeyDown`: Pass this keydown handler to the element to allow keyboard users to access the element.
-          - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
-              ensure your experience is accessible
-         */
-        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/extract-react-types/react-select-props.d.ts

@@ -59,17 +59,18 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     getOptionValue?: GetOptionValue<Option>;
     /** Hide the selected option from the menu. */
     hideSelectedOptions?: boolean;
-    /** The id to set on the SelectContainer component. */
+    /** The ID to set on the SelectContainer component. */
     id?: string;
     /** The value of the search input. */
     inputValue?: string;
-    /** The id of the search input. */
+    /** The ID of the search input. */
     inputId?: string;
-    /** Define an id prefix for the select components. For example, `{your-id}-value`. */
+    /** Define an ID prefix for the select components. For example, `{your-id}-value`. */
     instanceId?: number | string;
     /** Sets whether the select value is clearable. */
     isClearable?: boolean;
-    /** Sets whether the select is disabled. */
+    /** Sets whether the select is disabled. People won't be able to interact with the select and it won't appear in the focus order.
+     * Wherever possible, prefer using validation and error messaging over disabled fields for a more accessible experience. */
     isDisabled?: boolean;
     /** Sets whether the select is in a state of loading (async). */
     isLoading?: boolean;
@@ -125,9 +126,9 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     onMenuOpen?: () => void;
     /** Handle the menu closing. */
     onMenuClose?: () => void;
-    /** Fired when the user scrolls to the top of the menu. */
+    /** Sent when the user scrolls to the top of the menu. */
     onMenuScrollToTop?: (event?: WheelEvent | TouchEvent) => void;
-    /** Fired when the user scrolls to the bottom of the menu. */
+    /** Sent when the user scrolls to the bottom of the menu. */
     onMenuScrollToBottom?: (event?: WheelEvent | TouchEvent) => void;
     /** Allows control of whether the menu is opened when the select is focused. */
     openMenuOnFocus?: boolean;

package/dist/types/types.d.ts

@@ -26,7 +26,7 @@ export interface OptionProps<Option = OptionType, IsMulti extends boolean = fals
 interface CustomSelectProps extends WithAnalyticsEventsProps {
     /** This prop affects the height of the select control. Compact is gridSize() * 4, default is gridSize * 5  */
     spacing?: 'compact' | 'default';
-    /** This prop affects the backgroundColor and border of the Select field. 'subtle' makes these transparent while 'none' removes them completely */
+    /** This prop affects the backgroundColor and border of the Select field. 'subtle' makes these transparent while 'none' prevents all field styling. Take care when using the none appearance as this doesn't include accessible interactions. */
     appearance?: 'default' | 'subtle' | 'none';
     /** Prop for testing */
     testId?: string;

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

@@ -1,8 +1,6 @@
 import React, { KeyboardEventHandler, 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';
@@ -17,11 +15,11 @@ interface PopupSelectTriggerProps {
 export type ModifierList = 'offset' | 'computeStyles' | 'preventOverflow' | 'handleFlipStyle' | 'flip' | 'popperOffsets' | 'arrow' | 'hide' | 'eventListeners' | 'applyStyles';
 export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean = false, Modifiers = ModifierList> extends ReactSelectProps<Option, IsMulti> {
     /**
-     * Defines whether the menu should close when selected. Defaults to "true"
+     * Defines whether the menu should close when selected. The default is `true`.
      */
     closeMenuOnSelect?: boolean;
     /**
-     * The footer content shown at the bottom of the Popup, underneath the Select options
+     * The footer content shown at the bottom of the popup, underneath the select options.
      */
     footer?: ReactNode;
     /**
@@ -33,21 +31,21 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
      */
     popperProps?: PopperPropsNoChildren<Modifiers>;
     /**
-     * The maximum number of options the select can contain without rendering the search field. Defaults to 5.
+     * The maximum number of options the select can contain without rendering the search field. The default is `5`.
      */
     searchThreshold?: number;
     /**
-     * If false, renders a select with no search field. If true, renders a search field in the select when the
-     * number of options exceeds the `searchThreshold`. Defaults to true.
+     * If `false`, renders a select with no search field. If `true`, renders a search field in the select when the
+     * number of options exceeds the `searchThreshold`. The default is `true`.
      */
     isSearchable?: boolean;
     /**
-     * The maximum width for the popup menu. Can be a number, representing width in pixels,
+     * The maximum width for the popup menu. Can be a number, representing the 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,
+     * The maximum width for the popup menu. Can be a number, representing the width in pixels,
      * or a string containing a CSS length datatype.
      */
     minMenuWidth?: number | string;
@@ -69,23 +67,18 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     }) => ReactNode;
     isOpen?: boolean;
     defaultIsOpen?: boolean;
-    /** The prop indicates if the component has a compacted look */
+    /** Use this to set whether the component uses compact or standard spacing. */
     spacing?: string;
     /** @deprecated Use isInvalid instead. The state of validation if used in a form */
     validationState?: ValidationState;
-    /** This prop indicates if the component is in an error state */
+    /** This prop indicates if the component is in an error state. */
     isInvalid?: boolean;
-    /** This gives an accessible name to the input for users of assistive technologies */
+    /** This gives an accessible name to the input for people who use assistive technology. */
     label?: string;
     testId?: string;
 }
 interface State<Modifiers = string> {
-    /**
-     * 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;
+    focusLockEnabled: boolean;
     isOpen: boolean;
     mergedComponents: Object;
     mergedPopperProps: PopperPropsNoChildren<defaultModifiers | Modifiers>;
@@ -100,15 +93,6 @@ 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 }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
-        };
-        mergedPopperProps: PopperPropsNoChildren<string>;
-        focusLockEnabled?: undefined;
-    } | {
         focusLockEnabled: boolean;
         isOpen: boolean;
         mergedComponents: {
@@ -159,85 +143,6 @@ 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; /** @deprecated Use isInvalid instead. The state of validation if used in a form */
-        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;
-        /**
-          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
-          - `onKeyDown`: Pass this keydown handler to the element to allow keyboard users to access the element.
-          - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
-              ensure your experience is accessible
-         */
-        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/extract-react-types/react-select-props.d.ts

@@ -59,17 +59,18 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     getOptionValue?: GetOptionValue<Option>;
     /** Hide the selected option from the menu. */
     hideSelectedOptions?: boolean;
-    /** The id to set on the SelectContainer component. */
+    /** The ID to set on the SelectContainer component. */
     id?: string;
     /** The value of the search input. */
     inputValue?: string;
-    /** The id of the search input. */
+    /** The ID of the search input. */
     inputId?: string;
-    /** Define an id prefix for the select components. For example, `{your-id}-value`. */
+    /** Define an ID prefix for the select components. For example, `{your-id}-value`. */
     instanceId?: number | string;
     /** Sets whether the select value is clearable. */
     isClearable?: boolean;
-    /** Sets whether the select is disabled. */
+    /** Sets whether the select is disabled. People won't be able to interact with the select and it won't appear in the focus order.
+     * Wherever possible, prefer using validation and error messaging over disabled fields for a more accessible experience. */
     isDisabled?: boolean;
     /** Sets whether the select is in a state of loading (async). */
     isLoading?: boolean;
@@ -125,9 +126,9 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     onMenuOpen?: () => void;
     /** Handle the menu closing. */
     onMenuClose?: () => void;
-    /** Fired when the user scrolls to the top of the menu. */
+    /** Sent when the user scrolls to the top of the menu. */
     onMenuScrollToTop?: (event?: WheelEvent | TouchEvent) => void;
-    /** Fired when the user scrolls to the bottom of the menu. */
+    /** Sent when the user scrolls to the bottom of the menu. */
     onMenuScrollToBottom?: (event?: WheelEvent | TouchEvent) => void;
     /** Allows control of whether the menu is opened when the select is focused. */
     openMenuOnFocus?: boolean;

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

@@ -26,7 +26,7 @@ export interface OptionProps<Option = OptionType, IsMulti extends boolean = fals
 interface CustomSelectProps extends WithAnalyticsEventsProps {
     /** This prop affects the height of the select control. Compact is gridSize() * 4, default is gridSize * 5  */
     spacing?: 'compact' | 'default';
-    /** This prop affects the backgroundColor and border of the Select field. 'subtle' makes these transparent while 'none' removes them completely */
+    /** This prop affects the backgroundColor and border of the Select field. 'subtle' makes these transparent while 'none' prevents all field styling. Take care when using the none appearance as this doesn't include accessible interactions. */
     appearance?: 'default' | 'subtle' | 'none';
     /** Prop for testing */
     testId?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "17.1.1",
+  "version": "17.1.3",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,11 +42,11 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/icon": "^22.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.37.0",
+    "@atlaskit/tokens": "^1.38.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -101,7 +101,7 @@
     "platform.design-system-team.border-checkbox_nyoiu": {
       "type": "boolean"
     },
-    "platform.design-system-team.popup-select-render-perf_i0s6m": {
+    "platform.design-system-team.update-input-border-wdith_5abwv": {
       "type": "boolean"
     },
     "platform.design-system-team.popup-select-close_8h15h": {