@atlaskit/select 15.3.2 → 15.6.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/select
 
+## 15.6.0
+
+### Minor Changes
+
+- [`68cc8008851`](https://bitbucket.org/atlassian/atlassian-frontend/commits/68cc8008851) - [ux] Introduces appearance prop to component, with 'default', 'subtle' and 'none' variants
+
+## 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
+
+- [`4609a8a733a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4609a8a733a) - Made SelectWithoutAnalytics component and InputActionMeta type available from @atlaskit/select
+
 ## 15.3.2
 
 ### Patch 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,13 +116,12 @@ 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);
     (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'), {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState, _this.props.spacing === 'compact', 'default'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
           color: "var(--ds-text-subtlest, ".concat(_colors.N80, ")")
@@ -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.3.2";
+var packageVersion = "15.6.0";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/createSelect.js

@@ -41,7 +41,7 @@ var defaultComponents = _interopRequireWildcard(require("./components"));
 
 var _styles = _interopRequireDefault(require("./styles"));
 
-var _excluded = ["styles", "validationState", "spacing", "isMulti"];
+var _excluded = ["styles", "validationState", "spacing", "isMulti", "appearance"];
 
 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); }
 
@@ -119,6 +119,7 @@ function createSelect(WrappedComponent) {
             validationState = _this$props.validationState,
             spacing = _this$props.spacing,
             isMulti = _this$props.isMulti,
+            appearance = _this$props.appearance,
             props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
         var isCompact = spacing === 'compact'; // props must be spread first to stop `components` being overridden
 
@@ -128,7 +129,7 @@ function createSelect(WrappedComponent) {
           "aria-live": "assertive"
         }, props, {
           components: this.components,
-          styles: (0, _reactSelect.mergeStyles)((0, _styles.default)(validationState, isCompact), styles)
+          styles: (0, _reactSelect.mergeStyles)((0, _styles.default)(validationState, isCompact, this.props.appearance || 'default'), styles)
         }));
       }
     }]);

package/dist/cjs/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -59,6 +61,12 @@ Object.defineProperty(exports, "RadioSelect", {
     return _RadioSelect.default;
   }
 });
+Object.defineProperty(exports, "SelectWithoutAnalytics", {
+  enumerable: true,
+  get: function get() {
+    return _Select.SelectWithoutAnalytics;
+  }
+});
 Object.defineProperty(exports, "components", {
   enumerable: true,
   get: function get() {
@@ -104,7 +112,7 @@ var _creatable = require("react-select/creatable");
 
 var _inputOptions = require("./components/input-options");
 
-var _Select = _interopRequireDefault(require("./Select"));
+var _Select = _interopRequireWildcard(require("./Select"));
 
 var _AsyncSelect = _interopRequireDefault(require("./AsyncSelect"));
 
@@ -118,4 +126,8 @@ var _CreatableSelect = _interopRequireDefault(require("./CreatableSelect"));
 
 var _AsyncCreatableSelect = _interopRequireDefault(require("./AsyncCreatableSelect"));
 
-var _PopupSelect = _interopRequireDefault(require("./PopupSelect"));
+var _PopupSelect = _interopRequireDefault(require("./PopupSelect"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/cjs/styles.js

@@ -21,7 +21,7 @@ var BORDER_WIDTH = 2;
 var ICON_PADDING = 2;
 var paddingExcludingBorder = (0, _constants.gridSize)() - BORDER_WIDTH;
 
-function baseStyles(validationState, isCompact) {
+function baseStyles(validationState, isCompact, appearance) {
   return {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
@@ -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, ")");
       }
 
@@ -69,6 +69,20 @@ function baseStyles(validationState, isCompact) {
       }
 
       var transitionDuration = '200ms';
+
+      if (appearance === 'subtle') {
+        borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : 'transparent';
+        backgroundColor = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : 'transparent';
+        backgroundColorHover = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : "var(--ds-surface, ".concat(_colors.N30, ")");
+      }
+
+      if (appearance === 'none') {
+        borderColor = 'transparent';
+        backgroundColor = 'transparent';
+        backgroundColorHover = 'transparent';
+        borderColorHover = 'transparent';
+      }
+
       return _objectSpread(_objectSpread({}, css), {}, {
         // Turn pointer events off when disabled - this makes it so hover etc don't work.
         pointerEvents: isDisabled ? 'none' : undefined,
@@ -176,7 +190,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 +242,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 +264,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.3.2",
+	"version": "15.6.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);
@@ -61,7 +59,7 @@ export default class PopupSelect extends PureComponent {
 
     _defineProperty(this, "unbindWindowKeydown", null);
 
-    _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState, this.props.spacing === 'compact'), {
+    _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState, this.props.spacing === 'compact', 'default'), {
       groupHeading: provided => ({ ...provided,
         color: `var(--ds-text-subtlest, ${N80})`
       })
@@ -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.3.2";
+const packageVersion = "15.6.0";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/createSelect.js

@@ -64,6 +64,7 @@ export default function createSelect(WrappedComponent) {
         validationState,
         spacing,
         isMulti,
+        appearance,
         ...props
       } = this.props;
       const isCompact = spacing === 'compact'; // props must be spread first to stop `components` being overridden
@@ -74,7 +75,7 @@ export default function createSelect(WrappedComponent) {
         "aria-live": "assertive"
       }, props, {
         components: this.components,
-        styles: mergeStyles(baseStyles(validationState, isCompact), styles)
+        styles: mergeStyles(baseStyles(validationState, isCompact, this.props.appearance || 'default'), styles)
       }));
     }
 

package/dist/es2019/index.js

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