@atlaskit/select 15.4.0 → 15.5.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/select
 
+## 15.5.0
+
+### Minor Changes
+
+- [`c17c6943be2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c17c6943be2) - Updated appearance of multi-select tags; when delete button is hovered, the appearance now matches @atlaskit/tag. The change is only visible with design token CSS enabled (in light or dark mode)
+- [`45cae79ec0f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45cae79ec0f) - [ux] Internal changes to <CountrySelect /> to no longer override container and menu width. The behaviour is now the same as the default Select component. Visual changes are possible if the <CountrySelect /> is being used in an unconstrained container (it will now expand to fill as is the default).
+
+  Component now also uses the correct types (previously set to `any`). Props are still passed through so there is no runtime effect, but this may effect compilation for users providing props that are unsupported by the runtime.
+
+- [`6e6ff42cd4c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e6ff42cd4c) - Replaces focus-trap with react-focus-lock in line with implementation in Jira Frontend.
+
+### Patch Changes
+
+- [`1c4840e546a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1c4840e546a) - fix popup select alignment bug
+- [`dec5021eefd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dec5021eefd) - [ux] Trigger onMenuClose prop when popup select closes.
+- [`fe575d49d66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe575d49d66) - Updated styles to use new input design tokens
+
 ## 15.4.0
 
 ### Minor Changes

package/dist/cjs/CountrySelect.js

@@ -9,41 +9,31 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _core = require("@emotion/core");
 
 var _countries = require("./data/countries");
 
 var _Select = _interopRequireDefault(require("./Select"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+/** @jsx jsx */
 // custom option renderer
-var labelCSS = function labelCSS() {
-  return {
-    alignItems: 'center',
-    display: 'flex',
-    lineHeight: 1.2
-  };
-};
-
-var flagCSS = function flagCSS() {
-  return {
-    fontSize: '18px',
-    marginRight: '8px'
-  };
-};
+var labelStyles = (0, _core.css)({
+  alignItems: 'center',
+  display: 'flex',
+  lineHeight: 1.2
+});
+var flagStyles = (0, _core.css)({
+  fontSize: '18px',
+  marginRight: '8px'
+});
 
 var Opt = function Opt(_ref) {
   var children = _ref.children,
       icon = _ref.icon;
   return (0, _core.jsx)("div", {
-    css: labelCSS()
+    css: labelStyles
   }, (0, _core.jsx)("span", {
-    css: flagCSS()
+    css: flagStyles
   }, icon), children);
 }; // return the country name; used for searching
 
@@ -75,7 +65,11 @@ var optionLabel = function optionLabel(_ref3) {
       name = _ref3.name;
   return (0, _core.jsx)(Opt, {
     icon: icon
-  }, name, " (", abbr.toUpperCase(), ") +", code);
+  }, getOptionLabel({
+    abbr: abbr,
+    code: code,
+    name: name
+  }));
 }; // switch formatters based on render context (menu | value)
 
 
@@ -92,24 +86,7 @@ var CountrySelect = function CountrySelect(props) {
     getOptionLabel: getOptionLabel,
     getOptionValue: getOptionValue,
     isMulti: false,
-    options: _countries.groupedCountries,
-    styles: {
-      container: function container(css) {
-        return _objectSpread(_objectSpread({}, css), {}, {
-          width: 105
-        });
-      },
-      dropdownIndicator: function dropdownIndicator(css) {
-        return _objectSpread(_objectSpread({}, css), {}, {
-          paddingLeft: 0
-        });
-      },
-      menu: function menu(css) {
-        return _objectSpread(_objectSpread({}, css), {}, {
-          width: 300
-        });
-      }
-    }
+    options: _countries.groupedCountries
   }, props));
 };
 

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -31,12 +31,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = require("react-dom");
 
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+
 var _reactSelect = _interopRequireWildcard(require("react-select"));
 
 var _reactUid = require("react-uid");
 
-var _focusTrap = _interopRequireDefault(require("focus-trap"));
-
 var _reactPopper = require("react-popper");
 
 var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
@@ -116,7 +116,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusTrap", null);
     (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);
@@ -202,7 +201,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
       _this.setState({
         isOpen: true
-      }, _this.initialiseFocusTrap);
+      });
 
       if (_this.selectRef) {
         _this.selectRef.select.openMenu('first'); // HACK
@@ -221,27 +220,12 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         }
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "initialiseFocusTrap", function () {
-      if (!_this.menuRef) {
-        return;
-      }
-
-      var trapConfig = {
-        clickOutsideDeactivates: true,
-        escapeDeactivates: true,
-        fallbackFocus: _this.menuRef,
-        returnFocusOnDeactivate: true
-      };
-      _this.focusTrap = (0, _focusTrap.default)(_this.menuRef, trapConfig); // allow time for the HTMLElement to render
-
-      setTimeout(function () {
-        return _this.focusTrap.activate();
-      }, 1);
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (options) {
       var _this$unbindWindowKey, _this2;
 
-      var onClose = _this.props.onClose;
+      var _this$props2 = _this.props,
+          onClose = _this$props2.onClose,
+          onMenuClose = _this$props2.onMenuClose;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
         // Prevent popup closing if it's open state is already being controlled
@@ -252,14 +236,14 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         onClose();
       }
 
+      if (onMenuClose) {
+        onMenuClose();
+      }
+
       _this.setState({
         isOpen: false
       });
 
-      if (_this.focusTrap) {
-        _this.focusTrap.deactivate();
-      }
-
       if (_this.targetRef != null) {
         _this.targetRef.focus();
       }
@@ -334,12 +318,12 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       return _this.getItemCount() > searchThreshold;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSelect", function () {
-      var _this$props2 = _this.props,
-          footer = _this$props2.footer,
-          maxMenuWidth = _this$props2.maxMenuWidth,
-          minMenuWidth = _this$props2.minMenuWidth,
-          target = _this$props2.target,
-          props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
+      var _this$props3 = _this.props,
+          footer = _this$props3.footer,
+          maxMenuWidth = _this$props3.maxMenuWidth,
+          minMenuWidth = _this$props3.minMenuWidth,
+          target = _this$props3.target,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
       var _this$state = _this.state,
           isOpen = _this$state.isOpen,
           mergedComponents = _this$state.mergedComponents,
@@ -369,6 +353,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           minWidth: minMenuWidth,
           maxWidth: maxMenuWidth,
           id: _this.popperWrapperId
+        }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
+          returnFocus: true
         }, /*#__PURE__*/_react.default.createElement(_reactSelect.default, (0, _extends2.default)({
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
@@ -382,7 +368,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           maxMenuHeight: _this.getMaxHeight(),
           components: components,
           onChange: _this.handleSelectChange
-        })), footer));
+        })), footer)));
       });
 
       return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/(0, _reactDom.createPortal)(popper, portalDestination);

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

package/dist/cjs/styles.js

@@ -41,12 +41,12 @@ function baseStyles(validationState, isCompact) {
     control: function control(css, _ref2) {
       var isFocused = _ref2.isFocused,
           isDisabled = _ref2.isDisabled;
-      var borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border, ".concat(_colors.N20, ")");
-      var backgroundColor = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : "var(--ds-background-neutral, ".concat(_colors.N20, ")");
-      var backgroundColorHover = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : "var(--ds-surface, ".concat(_colors.N30, ")");
+      var borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat(_colors.N20, ")");
+      var backgroundColor = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input, ".concat(_colors.N20, ")");
+      var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")");
 
       if (isDisabled) {
-        backgroundColor = "var(--ds-background-neutral, ".concat(_colors.N20, ")");
+        backgroundColor = "var(--ds-background-disabled, ".concat(_colors.N20, ")");
         borderColor = "var(--ds-background-disabled, ".concat(_colors.N20, ")");
       }
 
@@ -176,7 +176,7 @@ function baseStyles(validationState, isCompact) {
       } else if (isSelected) {
         backgroundColor = "var(--ds-background-selected, ".concat(_colors.B50, ")");
       } else if (isFocused) {
-        backgroundColor = "var(--ds-background-input-pressed, ".concat(_colors.N20, ")");
+        backgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")");
       }
 
       if (!isDisabled && (isFocused || isSelected)) {
@@ -228,11 +228,21 @@ function baseStyles(validationState, isCompact) {
       var isFocused = _ref7.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: '2px',
-        backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(_colors.N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N40, ")"),
+        backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(_colors.N40, ")") : "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
         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'
+        },
+        pointerEvents: 'none',
+        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
+        ':hover': {
+          backgroundColor: "var(--ds-background-danger-hovered, ".concat(_colors.N40, ")"),
+          color: "var(--ds-text-danger, inherit)"
+        },
+        ':active': {
+          backgroundColor: "var(--ds-background-danger-pressed, ".concat(_colors.N40, ")"),
+          color: "var(--ds-text-danger, inherit)"
         }
       });
     },
@@ -240,24 +250,25 @@ function baseStyles(validationState, isCompact) {
       var isFocused = _ref8.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
         padding: '2px',
-        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
+        color: 'inherit',
         paddingRight: '2px'
       });
     },
     multiValueRemove: function multiValueRemove(css, _ref9) {
       var isFocused = _ref9.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        backgroundColor: isFocused && "var(--ds-background-selected, ".concat(_colors.R75, ")"),
+        pointerEvents: 'auto',
+        backgroundColor: isFocused && "var(--ds-UNSAFE_util-transparent, ".concat(_colors.R75, ")"),
         fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
         paddingLeft: '2px',
         paddingRight: '2px',
         borderRadius: '0px 2px 2px 0px',
         ':hover': {
-          backgroundColor: "var(--ds-background-danger-hovered, ".concat(_colors.R75, ")"),
+          backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.R75, ")"),
           fill: "var(--ds-text-danger, #000)"
         },
         ':active': {
-          backgroundColor: "var(--ds-background-danger-pressed, ".concat(_colors.R75, ")"),
+          backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.R75, ")"),
           fill: "var(--ds-text-danger, #000)"
         }
       });

package/dist/cjs/version.json

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

package/dist/es2019/CountrySelect.js

@@ -1,18 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx, css } from '@emotion/core';
 import { groupedCountries } from './data/countries';
 import Select from './Select';
-
 // custom option renderer
-const labelCSS = () => ({
+const labelStyles = css({
   alignItems: 'center',
   display: 'flex',
   lineHeight: 1.2
 });
-
-const flagCSS = () => ({
+const flagStyles = css({
   fontSize: '18px',
   marginRight: '8px'
 });
@@ -21,9 +19,9 @@ const Opt = ({
   children,
   icon
 }) => jsx("div", {
-  css: labelCSS()
+  css: labelStyles
 }, jsx("span", {
-  css: flagCSS()
+  css: flagStyles
 }, icon), children); // return the country name; used for searching
 
 
@@ -49,7 +47,11 @@ const optionLabel = ({
   name
 }) => jsx(Opt, {
   icon: icon
-}, name, " (", abbr.toUpperCase(), ") +", code); // switch formatters based on render context (menu | value)
+}, getOptionLabel({
+  abbr,
+  code,
+  name
+})); // switch formatters based on render context (menu | value)
 
 
 const formatOptionLabel = (opt, {
@@ -63,18 +65,7 @@ const CountrySelect = props => jsx(Select, _extends({
   getOptionLabel: getOptionLabel,
   getOptionValue: getOptionValue,
   isMulti: false,
-  options: groupedCountries,
-  styles: {
-    container: css => ({ ...css,
-      width: 105
-    }),
-    dropdownIndicator: css => ({ ...css,
-      paddingLeft: 0
-    }),
-    menu: css => ({ ...css,
-      width: 300
-    })
-  }
+  options: groupedCountries
 }, props));
 
 export default CountrySelect;

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
 import { createPortal } from 'react-dom';
+import FocusLock from 'react-focus-lock';
 import Select, { mergeStyles } from 'react-select';
 import { uid } from 'react-uid';
-import createFocusTrap from 'focus-trap';
 import { Manager, Reference, Popper } from 'react-popper';
 import NodeResolver from 'react-node-resolver';
 import shallowEqualObjects from 'shallow-equal/objects';
@@ -49,8 +49,6 @@ export default class PopupSelect extends PureComponent {
 
     super(...args);
 
-    _defineProperty(this, "focusTrap", null);
-
     _defineProperty(this, "menuRef", null);
 
     _defineProperty(this, "selectRef", null);
@@ -152,7 +150,7 @@ export default class PopupSelect extends PureComponent {
 
       this.setState({
         isOpen: true
-      }, this.initialiseFocusTrap);
+      });
 
       if (this.selectRef) {
         this.selectRef.select.openMenu('first'); // HACK
@@ -171,27 +169,12 @@ export default class PopupSelect extends PureComponent {
       });
     });
 
-    _defineProperty(this, "initialiseFocusTrap", () => {
-      if (!this.menuRef) {
-        return;
-      }
-
-      const trapConfig = {
-        clickOutsideDeactivates: true,
-        escapeDeactivates: true,
-        fallbackFocus: this.menuRef,
-        returnFocusOnDeactivate: true
-      };
-      this.focusTrap = createFocusTrap(this.menuRef, trapConfig); // allow time for the HTMLElement to render
-
-      setTimeout(() => this.focusTrap.activate(), 1);
-    });
-
     _defineProperty(this, "close", options => {
       var _this$unbindWindowKey;
 
       const {
-        onClose
+        onClose,
+        onMenuClose
       } = this.props;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && this.isOpenControlled) {
@@ -203,14 +186,14 @@ export default class PopupSelect extends PureComponent {
         onClose();
       }
 
+      if (onMenuClose) {
+        onMenuClose();
+      }
+
       this.setState({
         isOpen: false
       });
 
-      if (this.focusTrap) {
-        this.focusTrap.deactivate();
-      }
-
       if (this.targetRef != null) {
         this.targetRef.focus();
       }
@@ -328,6 +311,8 @@ export default class PopupSelect extends PureComponent {
           minWidth: minMenuWidth,
           maxWidth: maxMenuWidth,
           id: this.popperWrapperId
+        }, /*#__PURE__*/React.createElement(FocusLock, {
+          returnFocus: true
         }, /*#__PURE__*/React.createElement(Select, _extends({
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
@@ -343,7 +328,7 @@ export default class PopupSelect extends PureComponent {
           maxMenuHeight: this.getMaxHeight(),
           components: components,
           onChange: this.handleSelectChange
-        })), footer));
+        })), 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 = "15.4.0";
+const packageVersion = "15.5.0";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/styles.js

@@ -21,12 +21,12 @@ export default function baseStyles(validationState, isCompact) {
       isFocused,
       isDisabled
     }) => {
-      let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border, ${N20})`;
-      let backgroundColor = isFocused ? `var(--ds-surface, ${N0})` : `var(--ds-background-neutral, ${N20})`;
-      let backgroundColorHover = isFocused ? `var(--ds-surface, ${N0})` : `var(--ds-surface, ${N30})`;
+      let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${N20})`;
+      let backgroundColor = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input, ${N20})`;
+      let backgroundColorHover = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input-hovered, ${N30})`;
 
       if (isDisabled) {
-        backgroundColor = `var(--ds-background-neutral, ${N20})`;
+        backgroundColor = `var(--ds-background-disabled, ${N20})`;
         borderColor = `var(--ds-background-disabled, ${N20})`;
       }
 
@@ -151,7 +151,7 @@ export default function baseStyles(validationState, isCompact) {
       } else if (isSelected) {
         backgroundColor = `var(--ds-background-selected, ${B50})`;
       } else if (isFocused) {
-        backgroundColor = `var(--ds-background-input-pressed, ${N20})`;
+        backgroundColor = `var(--ds-background-neutral-subtle-hovered, ${N20})`;
       }
 
       if (!isDisabled && (isFocused || isSelected)) {
@@ -197,35 +197,46 @@ export default function baseStyles(validationState, isCompact) {
       isFocused
     }) => ({ ...css,
       borderRadius: '2px',
-      backgroundColor: isFocused ? `var(--ds-background-selected, ${N40})` : `var(--ds-background-neutral-subtle-hovered, ${N40})`,
+      backgroundColor: isFocused ? `var(--ds-background-selected, ${N40})` : `var(--ds-background-neutral, ${N40})`,
       boxShadow: isFocused ? `0 0 0 2px ${"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'
+      },
+      pointerEvents: 'none',
+      color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
+      ':hover': {
+        backgroundColor: `var(--ds-background-danger-hovered, ${N40})`,
+        color: "var(--ds-text-danger, inherit)"
+      },
+      ':active': {
+        backgroundColor: `var(--ds-background-danger-pressed, ${N40})`,
+        color: "var(--ds-text-danger, inherit)"
       }
     }),
     multiValueLabel: (css, {
       isFocused
     }) => ({ ...css,
       padding: '2px',
-      color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
+      color: 'inherit',
       paddingRight: '2px'
     }),
     multiValueRemove: (css, {
       // @ts-ignore: missing in @types/react-select
       isFocused
     }) => ({ ...css,
-      backgroundColor: isFocused && `var(--ds-background-selected, ${R75})`,
+      pointerEvents: 'auto',
+      backgroundColor: isFocused && `var(--ds-UNSAFE_util-transparent, ${R75})`,
       fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
       paddingLeft: '2px',
       paddingRight: '2px',
       borderRadius: '0px 2px 2px 0px',
       ':hover': {
-        backgroundColor: `var(--ds-background-danger-hovered, ${R75})`,
+        backgroundColor: `var(--ds-UNSAFE_util-transparent, ${R75})`,
         fill: "var(--ds-text-danger, #000)"
       },
       ':active': {
-        backgroundColor: `var(--ds-background-danger-pressed, ${R75})`,
+        backgroundColor: `var(--ds-UNSAFE_util-transparent, ${R75})`,
         fill: "var(--ds-text-danger, #000)"
       }
     })

package/dist/es2019/version.json

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

package/dist/esm/CountrySelect.js

@@ -1,38 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx, css } from '@emotion/core';
 import { groupedCountries } from './data/countries';
 import Select from './Select';
-
 // custom option renderer
-var labelCSS = function labelCSS() {
-  return {
-    alignItems: 'center',
-    display: 'flex',
-    lineHeight: 1.2
-  };
-};
-
-var flagCSS = function flagCSS() {
-  return {
-    fontSize: '18px',
-    marginRight: '8px'
-  };
-};
+var labelStyles = css({
+  alignItems: 'center',
+  display: 'flex',
+  lineHeight: 1.2
+});
+var flagStyles = css({
+  fontSize: '18px',
+  marginRight: '8px'
+});
 
 var Opt = function Opt(_ref) {
   var children = _ref.children,
       icon = _ref.icon;
   return jsx("div", {
-    css: labelCSS()
+    css: labelStyles
   }, jsx("span", {
-    css: flagCSS()
+    css: flagStyles
   }, icon), children);
 }; // return the country name; used for searching
 
@@ -64,7 +53,11 @@ var optionLabel = function optionLabel(_ref3) {
       name = _ref3.name;
   return jsx(Opt, {
     icon: icon
-  }, name, " (", abbr.toUpperCase(), ") +", code);
+  }, getOptionLabel({
+    abbr: abbr,
+    code: code,
+    name: name
+  }));
 }; // switch formatters based on render context (menu | value)
 
 
@@ -81,24 +74,7 @@ var CountrySelect = function CountrySelect(props) {
     getOptionLabel: getOptionLabel,
     getOptionValue: getOptionValue,
     isMulti: false,
-    options: groupedCountries,
-    styles: {
-      container: function container(css) {
-        return _objectSpread(_objectSpread({}, css), {}, {
-          width: 105
-        });
-      },
-      dropdownIndicator: function dropdownIndicator(css) {
-        return _objectSpread(_objectSpread({}, css), {}, {
-          paddingLeft: 0
-        });
-      },
-      menu: function menu(css) {
-        return _objectSpread(_objectSpread({}, css), {}, {
-          width: 300
-        });
-      }
-    }
+    options: groupedCountries
   }, props));
 };
 

package/dist/esm/PopupSelect/PopupSelect.js

@@ -19,9 +19,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React, { PureComponent } from 'react';
 import { createPortal } from 'react-dom';
+import FocusLock from 'react-focus-lock';
 import Select, { mergeStyles } from 'react-select';
 import { uid } from 'react-uid';
-import createFocusTrap from 'focus-trap';
 import { Manager, Reference, Popper } from 'react-popper';
 import NodeResolver from 'react-node-resolver';
 import shallowEqualObjects from 'shallow-equal/objects';
@@ -82,8 +82,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "focusTrap", null);
-
     _defineProperty(_assertThisInitialized(_this), "menuRef", null);
 
     _defineProperty(_assertThisInitialized(_this), "selectRef", null);
@@ -182,7 +180,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
       _this.setState({
         isOpen: true
-      }, _this.initialiseFocusTrap);
+      });
 
       if (_this.selectRef) {
         _this.selectRef.select.openMenu('first'); // HACK
@@ -202,28 +200,12 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "initialiseFocusTrap", function () {
-      if (!_this.menuRef) {
-        return;
-      }
-
-      var trapConfig = {
-        clickOutsideDeactivates: true,
-        escapeDeactivates: true,
-        fallbackFocus: _this.menuRef,
-        returnFocusOnDeactivate: true
-      };
-      _this.focusTrap = createFocusTrap(_this.menuRef, trapConfig); // allow time for the HTMLElement to render
-
-      setTimeout(function () {
-        return _this.focusTrap.activate();
-      }, 1);
-    });
-
     _defineProperty(_assertThisInitialized(_this), "close", function (options) {
       var _this$unbindWindowKey, _this2;
 
-      var onClose = _this.props.onClose;
+      var _this$props2 = _this.props,
+          onClose = _this$props2.onClose,
+          onMenuClose = _this$props2.onMenuClose;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
         // Prevent popup closing if it's open state is already being controlled
@@ -234,14 +216,14 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         onClose();
       }
 
+      if (onMenuClose) {
+        onMenuClose();
+      }
+
       _this.setState({
         isOpen: false
       });
 
-      if (_this.focusTrap) {
-        _this.focusTrap.deactivate();
-      }
-
       if (_this.targetRef != null) {
         _this.targetRef.focus();
       }
@@ -323,12 +305,12 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSelect", function () {
-      var _this$props2 = _this.props,
-          footer = _this$props2.footer,
-          maxMenuWidth = _this$props2.maxMenuWidth,
-          minMenuWidth = _this$props2.minMenuWidth,
-          target = _this$props2.target,
-          props = _objectWithoutProperties(_this$props2, _excluded);
+      var _this$props3 = _this.props,
+          footer = _this$props3.footer,
+          maxMenuWidth = _this$props3.maxMenuWidth,
+          minMenuWidth = _this$props3.minMenuWidth,
+          target = _this$props3.target,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
       var _this$state = _this.state,
           isOpen = _this$state.isOpen,
@@ -359,6 +341,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           minWidth: minMenuWidth,
           maxWidth: maxMenuWidth,
           id: _this.popperWrapperId
+        }, /*#__PURE__*/React.createElement(FocusLock, {
+          returnFocus: true
         }, /*#__PURE__*/React.createElement(Select, _extends({
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
@@ -372,7 +356,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           maxMenuHeight: _this.getMaxHeight(),
           components: components,
           onChange: _this.handleSelectChange
-        })), footer));
+        })), footer)));
       });
       return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/createPortal(popper, portalDestination);
     });

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

package/dist/esm/styles.js

@@ -29,12 +29,12 @@ export default function baseStyles(validationState, isCompact) {
     control: function control(css, _ref2) {
       var isFocused = _ref2.isFocused,
           isDisabled = _ref2.isDisabled;
-      var borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border, ".concat(N20, ")");
-      var backgroundColor = isFocused ? "var(--ds-surface, ".concat(N0, ")") : "var(--ds-background-neutral, ".concat(N20, ")");
-      var backgroundColorHover = isFocused ? "var(--ds-surface, ".concat(N0, ")") : "var(--ds-surface, ".concat(N30, ")");
+      var borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(N20, ")");
+      var backgroundColor = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input, ".concat(N20, ")");
+      var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")");
 
       if (isDisabled) {
-        backgroundColor = "var(--ds-background-neutral, ".concat(N20, ")");
+        backgroundColor = "var(--ds-background-disabled, ".concat(N20, ")");
         borderColor = "var(--ds-background-disabled, ".concat(N20, ")");
       }
 
@@ -164,7 +164,7 @@ export default function baseStyles(validationState, isCompact) {
       } else if (isSelected) {
         backgroundColor = "var(--ds-background-selected, ".concat(B50, ")");
       } else if (isFocused) {
-        backgroundColor = "var(--ds-background-input-pressed, ".concat(N20, ")");
+        backgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")");
       }
 
       if (!isDisabled && (isFocused || isSelected)) {
@@ -216,11 +216,21 @@ export default function baseStyles(validationState, isCompact) {
       var isFocused = _ref7.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: '2px',
-        backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(N40, ")"),
+        backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(N40, ")") : "var(--ds-background-neutral, ".concat(N40, ")"),
         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'
+        },
+        pointerEvents: 'none',
+        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
+        ':hover': {
+          backgroundColor: "var(--ds-background-danger-hovered, ".concat(N40, ")"),
+          color: "var(--ds-text-danger, inherit)"
+        },
+        ':active': {
+          backgroundColor: "var(--ds-background-danger-pressed, ".concat(N40, ")"),
+          color: "var(--ds-text-danger, inherit)"
         }
       });
     },
@@ -228,24 +238,25 @@ export default function baseStyles(validationState, isCompact) {
       var isFocused = _ref8.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
         padding: '2px',
-        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
+        color: 'inherit',
         paddingRight: '2px'
       });
     },
     multiValueRemove: function multiValueRemove(css, _ref9) {
       var isFocused = _ref9.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        backgroundColor: isFocused && "var(--ds-background-selected, ".concat(R75, ")"),
+        pointerEvents: 'auto',
+        backgroundColor: isFocused && "var(--ds-UNSAFE_util-transparent, ".concat(R75, ")"),
         fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
         paddingLeft: '2px',
         paddingRight: '2px',
         borderRadius: '0px 2px 2px 0px',
         ':hover': {
-          backgroundColor: "var(--ds-background-danger-hovered, ".concat(R75, ")"),
+          backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(R75, ")"),
           fill: "var(--ds-text-danger, #000)"
         },
         ':active': {
-          backgroundColor: "var(--ds-background-danger-pressed, ".concat(R75, ")"),
+          backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(R75, ")"),
           fill: "var(--ds-text-danger, #000)"
         }
       });

package/dist/esm/version.json

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

package/dist/types/CountrySelect.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-declare const CountrySelect: (props: any) => JSX.Element;
+import { groupedCountries } from './data/countries';
+import { SelectProps } from './types';
+declare type Country = typeof groupedCountries[number]['options'][number];
+declare const CountrySelect: (props: SelectProps<Country>) => JSX.Element;
 export default CountrySelect;

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

@@ -1,6 +1,5 @@
 import React, { PureComponent, ReactNode } from 'react';
 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';
@@ -67,7 +66,6 @@ interface State<Modifiers = string> {
     mergedPopperProps: PopperPropsNoChildren<defaultModifiers | Modifiers>;
 }
 export default class PopupSelect<Option = OptionType, IsMulti extends boolean = false> extends PureComponent<PopupSelectProps<Option, IsMulti>, State> {
-    focusTrap: FocusTrap | null;
     menuRef: HTMLElement | null;
     selectRef: Select<Option, IsMulti> | null;
     targetRef: HTMLElement | null;
@@ -112,7 +110,6 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     open: (options?: {
         controlOverride?: boolean | undefined;
     } | undefined) => void;
-    initialiseFocusTrap: () => void;
     /**
      * Closes the popup
      *

package/dist/types/data/countries.d.ts

@@ -6,8 +6,11 @@ interface Country {
     suggested?: boolean;
 }
 export declare const allCountries: Array<Country>;
-export declare const groupedCountries: Array<{
-    label: string;
-    options: Array<Country>;
-}>;
+export declare const groupedCountries: readonly [{
+    readonly label: "Suggested";
+    readonly options: Country[];
+}, {
+    readonly label: "All Countries";
+    readonly options: Country[];
+}];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "15.4.0",
+  "version": "15.5.0",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,9 +35,9 @@
     "@popperjs/core": "^2.9.1",
     "@types/react-select": "^4.0.18",
     "bind-event-listener": "^2.1.1",
-    "focus-trap": "^2.4.5",
     "memoize-one": "^6.0.0",
     "react-fast-compare": "^3.2.0",
+    "react-focus-lock": "^2.5.2",
     "react-node-resolver": "^1.0.1",
     "react-popper": "^2.2.3",
     "react-select": "^4.3.1",
@@ -56,6 +56,7 @@
     "@atlaskit/form": "^8.5.0",
     "@atlaskit/logo": "^13.8.0",
     "@atlaskit/modal-dialog": "^12.2.0",
+    "@atlaskit/radio": "^5.3.11",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "^17.5.0",
@@ -64,6 +65,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^10.0.7",
     "@testing-library/react": "^8.0.1",
+    "@testing-library/user-event": "10.4.0",
     "ast-types": "^0.13.3",
     "enzyme": "^3.10.0",
     "jscodeshift": "^0.13.0",