@atlaskit/select 15.2.13 → 15.3.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/select
 
+## 15.3.2
+
+### Patch Changes
+
+- [`8a5bdb3c844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a5bdb3c844) - Upgrading internal dependency (bind-event-listener) for improved internal types
+
+## 15.3.1
+
+### Patch Changes
+
+- [`8f6f225ac11`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f6f225ac11) - Updated prop types for Popup Select
+- [`e4b612d1c48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4b612d1c48) - Internal migration to bind-event-listener for safer DOM Event cleanup
+
+## 15.3.0
+
+### Minor Changes
+
+- [`145c9cea461`](https://bitbucket.org/atlassian/atlassian-frontend/commits/145c9cea461) - [ux] Added 2 new props for controlling the open state of PopupSelect:
+
+  - `isOpen` controls whether the popup is open (controlled)
+  - `defaultIsOpen` controls whether the popup is initially open on mount (uncontrolled)
+
+### Patch Changes
+
+- [`db58fa26cbf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db58fa26cbf) - [ux] Updated input tokens within `@atlaskit/select`.
+- [`4624991be21`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4624991be21) - [ux] Fixes a regression affecting MacOS Safari. The cursor incorrectly displayed as 'text' rather than 'default' when the pointer was over a select option.
+- [`e7438659c2e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7438659c2e) - Updated dependency '@types/react-select' to fix type error
+
 ## 15.2.13
 
 ### Patch Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -49,6 +49,8 @@ var _components = require("./components");
 
 var _styles = _interopRequireDefault(require("../styles"));
 
+var _bindEventListener = require("bind-event-listener");
+
 var _excluded = ["footer", "maxMenuWidth", "minMenuWidth", "target"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -103,6 +105,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
   var _super = _createSuper(PopupSelect);
 
   function PopupSelect() {
+    var _this$defaultOpenStat;
+
     var _this;
 
     (0, _classCallCheck2.default)(this, PopupSelect);
@@ -116,6 +120,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowClick", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowKeydown", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState, _this.props.spacing === 'compact'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
@@ -123,8 +129,10 @@ 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", {
-      isOpen: false,
+      isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: _components.defaultComponents,
       mergedPopperProps: defaultPopperProps
     });
@@ -180,9 +188,14 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         onChange(value, actionMeta);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "open", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "open", function (options) {
       var onOpen = _this.props.onOpen;
 
+      if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
+        // Prevent popup opening if it's open state is already being controlled
+        return;
+      }
+
       if (onOpen) {
         onOpen();
       }
@@ -200,7 +213,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.addEventListener('keydown', _this.handleKeyDown, true);
+      _this.unbindWindowKeydown = (0, _bindEventListener.bind)(window, {
+        type: 'keydown',
+        listener: _this.handleKeyDown,
+        options: {
+          capture: true
+        }
+      });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "initialiseFocusTrap", function () {
       if (!_this.menuRef) {
@@ -219,9 +238,16 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return _this.focusTrap.activate();
       }, 1);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (options) {
+      var _this$unbindWindowKey, _this2;
+
       var onClose = _this.props.onClose;
 
+      if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
+        // Prevent popup closing if it's open state is already being controlled
+        return;
+      }
+
       if (onClose) {
         onClose();
       }
@@ -242,7 +268,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.removeEventListener('keydown', _this.handleKeyDown, true);
+      (_this$unbindWindowKey = (_this2 = _this).unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(_this2);
+      _this.unbindWindowKeydown = null;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveTargetRef", function (popperRef) {
       return function (ref) {
@@ -370,24 +397,51 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.addEventListener('click', this.handleClick, true);
+      this.unbindWindowClick = (0, _bindEventListener.bind)(window, {
+        type: 'click',
+        listener: this.handleClick,
+        options: {
+          capture: true
+        }
+      });
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _this$unbindWindowCli, _this$unbindWindowKey2;
+
       if (typeof window === 'undefined') {
         return;
       }
 
-      window.removeEventListener('click', this.handleClick, true);
-      window.removeEventListener('keydown', this.handleKeyDown, true);
+      (_this$unbindWindowCli = this.unbindWindowClick) === null || _this$unbindWindowCli === void 0 ? void 0 : _this$unbindWindowCli.call(this);
+      this.unbindWindowClick = null;
+      (_this$unbindWindowKey2 = this.unbindWindowKeydown) === null || _this$unbindWindowKey2 === void 0 ? void 0 : _this$unbindWindowKey2.call(this);
+      this.unbindWindowKeydown = null;
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var isOpen = this.props.isOpen;
+
+      if (prevProps.isOpen !== isOpen) {
+        if (isOpen === true) {
+          this.open({
+            controlOverride: true
+          });
+        } else if (isOpen === false) {
+          this.close({
+            controlOverride: true
+          });
+        }
+      }
     } // Event Handlers
     // ==============================
 
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var target = this.props.target;
       var isOpen = this.state.isOpen;
@@ -395,10 +449,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         var ref = _ref3.ref;
         return target && target({
           isOpen: isOpen,
-          ref: _this2.resolveTargetRef(ref),
+          ref: _this3.resolveTargetRef(ref),
           'aria-haspopup': 'true',
           'aria-expanded': isOpen,
-          'aria-controls': isOpen ? _this2.popperWrapperId : undefined
+          'aria-controls': isOpen ? _this3.popperWrapperId : undefined
         });
       }), this.renderSelect());
     }

package/dist/cjs/Select.js

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

package/dist/cjs/styles.js

@@ -30,7 +30,7 @@ function baseStyles(validationState, isCompact) {
         // react-select disables pointer events when isDisabled is true.
         // We override this and make the inner container turn it off instead.
         pointerEvents: 'all',
-        cursor: isDisabled ? 'not-allowed' : undefined
+        cursor: isDisabled ? 'not-allowed' : css.cursor
       });
     },
     input: function input(css) {
@@ -176,14 +176,14 @@ function baseStyles(validationState, isCompact) {
       } else if (isSelected) {
         backgroundColor = "var(--ds-background-selected, ".concat(_colors.B50, ")");
       } else if (isFocused) {
-        backgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")");
+        backgroundColor = "var(--ds-background-input-pressed, ".concat(_colors.N20, ")");
       }
 
       if (!isDisabled && (isFocused || isSelected)) {
         boxShadow = "inset 2px 0px 0px ".concat("var(--ds-border-selected, ".concat(_colors.B400, ")"));
       }
 
-      var cursor = isDisabled ? 'not-allowed' : undefined;
+      var cursor = isDisabled ? 'not-allowed' : css.cursor;
       return _objectSpread(_objectSpread({}, css), {}, {
         padding: '6px 12px',
         backgroundColor: backgroundColor,
@@ -229,7 +229,7 @@ function baseStyles(validationState, isCompact) {
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: '2px',
         backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(_colors.N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N40, ")"),
-        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focused, transparent)") : 'none',
+        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',
         '@media screen and (-ms-high-contrast: active)': {
           border: isFocused ? '1px solid transparent' : 'none'

package/dist/cjs/version.json

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

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -11,6 +11,7 @@ import shallowEqualObjects from 'shallow-equal/objects';
 import { N80 } from '@atlaskit/theme/colors';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
 import baseStyles from '../styles';
+import { bind } from 'bind-event-listener';
 
 /** Are we rendering on the client or server? */
 const canUseDOM = () => Boolean(typeof window !== 'undefined' && window.document && window.document.createElement); // ==============================
@@ -44,6 +45,8 @@ const isEmpty = obj => Object.keys(obj).length === 0;
 
 export default class PopupSelect extends PureComponent {
   constructor(...args) {
+    var _this$defaultOpenStat;
+
     super(...args);
 
     _defineProperty(this, "focusTrap", null);
@@ -54,14 +57,22 @@ export default class PopupSelect extends PureComponent {
 
     _defineProperty(this, "targetRef", null);
 
+    _defineProperty(this, "unbindWindowClick", null);
+
+    _defineProperty(this, "unbindWindowKeydown", null);
+
     _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState, this.props.spacing === 'compact'), {
       groupHeading: provided => ({ ...provided,
         color: `var(--ds-text-subtlest, ${N80})`
       })
     }));
 
+    _defineProperty(this, "isOpenControlled", this.props.isOpen !== undefined);
+
+    _defineProperty(this, "defaultOpenState", this.isOpenControlled ? this.props.isOpen : this.props.defaultIsOpen);
+
     _defineProperty(this, "state", {
-      isOpen: false,
+      isOpen: (_this$defaultOpenStat = this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
     });
@@ -125,11 +136,16 @@ export default class PopupSelect extends PureComponent {
       }
     });
 
-    _defineProperty(this, "open", () => {
+    _defineProperty(this, "open", options => {
       const {
         onOpen
       } = this.props;
 
+      if (!(options !== null && options !== void 0 && options.controlOverride) && this.isOpenControlled) {
+        // Prevent popup opening if it's open state is already being controlled
+        return;
+      }
+
       if (onOpen) {
         onOpen();
       }
@@ -146,7 +162,13 @@ export default class PopupSelect extends PureComponent {
         return;
       }
 
-      window.addEventListener('keydown', this.handleKeyDown, true);
+      this.unbindWindowKeydown = bind(window, {
+        type: 'keydown',
+        listener: this.handleKeyDown,
+        options: {
+          capture: true
+        }
+      });
     });
 
     _defineProperty(this, "initialiseFocusTrap", () => {
@@ -165,11 +187,18 @@ export default class PopupSelect extends PureComponent {
       setTimeout(() => this.focusTrap.activate(), 1);
     });
 
-    _defineProperty(this, "close", () => {
+    _defineProperty(this, "close", options => {
+      var _this$unbindWindowKey;
+
       const {
         onClose
       } = this.props;
 
+      if (!(options !== null && options !== void 0 && options.controlOverride) && this.isOpenControlled) {
+        // Prevent popup closing if it's open state is already being controlled
+        return;
+      }
+
       if (onClose) {
         onClose();
       }
@@ -190,7 +219,8 @@ export default class PopupSelect extends PureComponent {
         return;
       }
 
-      window.removeEventListener('keydown', this.handleKeyDown, true);
+      (_this$unbindWindowKey = this.unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(this);
+      this.unbindWindowKeydown = null;
     });
 
     _defineProperty(this, "resolveTargetRef", popperRef => ref => {
@@ -351,16 +381,44 @@ export default class PopupSelect extends PureComponent {
       return;
     }
 
-    window.addEventListener('click', this.handleClick, true);
+    this.unbindWindowClick = bind(window, {
+      type: 'click',
+      listener: this.handleClick,
+      options: {
+        capture: true
+      }
+    });
   }
 
   componentWillUnmount() {
+    var _this$unbindWindowCli, _this$unbindWindowKey2;
+
     if (typeof window === 'undefined') {
       return;
     }
 
-    window.removeEventListener('click', this.handleClick, true);
-    window.removeEventListener('keydown', this.handleKeyDown, true);
+    (_this$unbindWindowCli = this.unbindWindowClick) === null || _this$unbindWindowCli === void 0 ? void 0 : _this$unbindWindowCli.call(this);
+    this.unbindWindowClick = null;
+    (_this$unbindWindowKey2 = this.unbindWindowKeydown) === null || _this$unbindWindowKey2 === void 0 ? void 0 : _this$unbindWindowKey2.call(this);
+    this.unbindWindowKeydown = null;
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      isOpen
+    } = this.props;
+
+    if (prevProps.isOpen !== isOpen) {
+      if (isOpen === true) {
+        this.open({
+          controlOverride: true
+        });
+      } else if (isOpen === false) {
+        this.close({
+          controlOverride: true
+        });
+      }
+    }
   } // Event Handlers
   // ==============================
 

package/dist/es2019/Select.js

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

package/dist/es2019/styles.js

@@ -12,7 +12,7 @@ export default function baseStyles(validationState, isCompact) {
       // react-select disables pointer events when isDisabled is true.
       // We override this and make the inner container turn it off instead.
       pointerEvents: 'all',
-      cursor: isDisabled ? 'not-allowed' : undefined
+      cursor: isDisabled ? 'not-allowed' : css.cursor
     }),
     input: css => ({ ...css,
       color: "var(--ds-text, hsl(0, 0%, 20%))"
@@ -151,14 +151,14 @@ export default function baseStyles(validationState, isCompact) {
       } else if (isSelected) {
         backgroundColor = `var(--ds-background-selected, ${B50})`;
       } else if (isFocused) {
-        backgroundColor = `var(--ds-background-neutral-subtle-hovered, ${N20})`;
+        backgroundColor = `var(--ds-background-input-pressed, ${N20})`;
       }
 
       if (!isDisabled && (isFocused || isSelected)) {
         boxShadow = `inset 2px 0px 0px ${`var(--ds-border-selected, ${B400})`}`;
       }
 
-      const cursor = isDisabled ? 'not-allowed' : undefined;
+      const cursor = isDisabled ? 'not-allowed' : css.cursor;
       return { ...css,
         padding: '6px 12px',
         backgroundColor,

package/dist/es2019/version.json

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

package/dist/esm/PopupSelect/PopupSelect.js

@@ -28,6 +28,7 @@ import shallowEqualObjects from 'shallow-equal/objects';
 import { N80 } from '@atlaskit/theme/colors';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
 import baseStyles from '../styles';
+import { bind } from 'bind-event-listener';
 
 /** Are we rendering on the client or server? */
 var canUseDOM = function canUseDOM() {
@@ -69,6 +70,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
   var _super = _createSuper(PopupSelect);
 
   function PopupSelect() {
+    var _this$defaultOpenStat;
+
     var _this;
 
     _classCallCheck(this, PopupSelect);
@@ -87,6 +90,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "targetRef", null);
 
+    _defineProperty(_assertThisInitialized(_this), "unbindWindowClick", null);
+
+    _defineProperty(_assertThisInitialized(_this), "unbindWindowKeydown", null);
+
     _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState, _this.props.spacing === 'compact'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
@@ -95,8 +102,12 @@ 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", {
-      isOpen: false,
+      isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
     });
@@ -157,9 +168,14 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "open", function () {
+    _defineProperty(_assertThisInitialized(_this), "open", function (options) {
       var onOpen = _this.props.onOpen;
 
+      if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
+        // Prevent popup opening if it's open state is already being controlled
+        return;
+      }
+
       if (onOpen) {
         onOpen();
       }
@@ -177,7 +193,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.addEventListener('keydown', _this.handleKeyDown, true);
+      _this.unbindWindowKeydown = bind(window, {
+        type: 'keydown',
+        listener: _this.handleKeyDown,
+        options: {
+          capture: true
+        }
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "initialiseFocusTrap", function () {
@@ -198,9 +220,16 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       }, 1);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "close", function () {
+    _defineProperty(_assertThisInitialized(_this), "close", function (options) {
+      var _this$unbindWindowKey, _this2;
+
       var onClose = _this.props.onClose;
 
+      if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
+        // Prevent popup closing if it's open state is already being controlled
+        return;
+      }
+
       if (onClose) {
         onClose();
       }
@@ -221,7 +250,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.removeEventListener('keydown', _this.handleKeyDown, true);
+      (_this$unbindWindowKey = (_this2 = _this).unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(_this2);
+      _this.unbindWindowKeydown = null;
     });
 
     _defineProperty(_assertThisInitialized(_this), "resolveTargetRef", function (popperRef) {
@@ -357,24 +387,51 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.addEventListener('click', this.handleClick, true);
+      this.unbindWindowClick = bind(window, {
+        type: 'click',
+        listener: this.handleClick,
+        options: {
+          capture: true
+        }
+      });
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _this$unbindWindowCli, _this$unbindWindowKey2;
+
       if (typeof window === 'undefined') {
         return;
       }
 
-      window.removeEventListener('click', this.handleClick, true);
-      window.removeEventListener('keydown', this.handleKeyDown, true);
+      (_this$unbindWindowCli = this.unbindWindowClick) === null || _this$unbindWindowCli === void 0 ? void 0 : _this$unbindWindowCli.call(this);
+      this.unbindWindowClick = null;
+      (_this$unbindWindowKey2 = this.unbindWindowKeydown) === null || _this$unbindWindowKey2 === void 0 ? void 0 : _this$unbindWindowKey2.call(this);
+      this.unbindWindowKeydown = null;
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var isOpen = this.props.isOpen;
+
+      if (prevProps.isOpen !== isOpen) {
+        if (isOpen === true) {
+          this.open({
+            controlOverride: true
+          });
+        } else if (isOpen === false) {
+          this.close({
+            controlOverride: true
+          });
+        }
+      }
     } // Event Handlers
     // ==============================
 
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var target = this.props.target;
       var isOpen = this.state.isOpen;
@@ -382,10 +439,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         var ref = _ref3.ref;
         return target && target({
           isOpen: isOpen,
-          ref: _this2.resolveTargetRef(ref),
+          ref: _this3.resolveTargetRef(ref),
           'aria-haspopup': 'true',
           'aria-expanded': isOpen,
-          'aria-controls': isOpen ? _this2.popperWrapperId : undefined
+          'aria-controls': isOpen ? _this3.popperWrapperId : undefined
         });
       }), this.renderSelect());
     }

package/dist/esm/Select.js

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

package/dist/esm/styles.js

@@ -18,7 +18,7 @@ export default function baseStyles(validationState, isCompact) {
         // react-select disables pointer events when isDisabled is true.
         // We override this and make the inner container turn it off instead.
         pointerEvents: 'all',
-        cursor: isDisabled ? 'not-allowed' : undefined
+        cursor: isDisabled ? 'not-allowed' : css.cursor
       });
     },
     input: function input(css) {
@@ -164,14 +164,14 @@ export default function baseStyles(validationState, isCompact) {
       } else if (isSelected) {
         backgroundColor = "var(--ds-background-selected, ".concat(B50, ")");
       } else if (isFocused) {
-        backgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")");
+        backgroundColor = "var(--ds-background-input-pressed, ".concat(N20, ")");
       }
 
       if (!isDisabled && (isFocused || isSelected)) {
         boxShadow = "inset 2px 0px 0px ".concat("var(--ds-border-selected, ".concat(B400, ")"));
       }
 
-      var cursor = isDisabled ? 'not-allowed' : undefined;
+      var cursor = isDisabled ? 'not-allowed' : css.cursor;
       return _objectSpread(_objectSpread({}, css), {}, {
         padding: '6px 12px',
         backgroundColor: backgroundColor,
@@ -217,7 +217,7 @@ export default function baseStyles(validationState, isCompact) {
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: '2px',
         backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(N40, ")"),
-        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focused, transparent)") : 'none',
+        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',
         '@media screen and (-ms-high-contrast: active)': {
           border: isFocused ? '1px solid transparent' : 'none'

package/dist/esm/version.json

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

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

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

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

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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/select",
-  "version": "15.2.13",
+  "version": "15.3.2",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -19,7 +19,8 @@
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Select"
+      "name": "Select",
+      "category": "Components"
     }
   },
   "dependencies": {
@@ -32,7 +33,8 @@
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "@popperjs/core": "^2.9.1",
-    "@types/react-select": "^4.0.13",
+    "@types/react-select": "^4.0.18",
+    "bind-event-listener": "^2.1.1",
     "focus-trap": "^2.4.5",
     "memoize-one": "^6.0.0",
     "react-fast-compare": "^3.2.0",
@@ -52,7 +54,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/drawer": "^7.1.0",
     "@atlaskit/form": "^8.5.0",
-    "@atlaskit/logo": "^13.6.0",
+    "@atlaskit/logo": "^13.7.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",
@@ -72,6 +74,7 @@
   },
   "techstack": {
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [