@atlaskit/select 15.3.2 → 15.6.0

package/dist/es2019/styles.js

@@ -3,7 +3,7 @@ import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800,
 const BORDER_WIDTH = 2;
 const ICON_PADDING = 2;
 const paddingExcludingBorder = gridSize() - BORDER_WIDTH;
-export default function baseStyles(validationState, isCompact) {
+export default function baseStyles(validationState, isCompact, appearance) {
   return {
     container: (css, {
       isDisabled
@@ -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})`;
       }
 
@@ -49,6 +49,20 @@ export default function baseStyles(validationState, isCompact) {
       }
 
       const transitionDuration = '200ms';
+
+      if (appearance === 'subtle') {
+        borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : 'transparent';
+        backgroundColor = isFocused ? `var(--ds-surface, ${N0})` : 'transparent';
+        backgroundColorHover = isFocused ? `var(--ds-surface, ${N0})` : `var(--ds-surface, ${N30})`;
+      }
+
+      if (appearance === 'none') {
+        borderColor = 'transparent';
+        backgroundColor = 'transparent';
+        backgroundColorHover = 'transparent';
+        borderColorHover = 'transparent';
+      }
+
       return { ...css,
         // Turn pointer events off when disabled - this makes it so hover etc don't work.
         pointerEvents: isDisabled ? 'none' : undefined,
@@ -151,7 +165,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 +211,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.3.2",
+	"version": "15.6.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);
@@ -94,7 +92,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "unbindWindowKeydown", null);
 
-    _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState, _this.props.spacing === 'compact'), {
+    _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState, _this.props.spacing === 'compact', 'default'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
           color: "var(--ds-text-subtlest, ".concat(N80, ")")
@@ -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.3.2";
+var packageVersion = "15.6.0";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/createSelect.js

@@ -8,7 +8,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["styles", "validationState", "spacing", "isMulti"];
+var _excluded = ["styles", "validationState", "spacing", "isMulti", "appearance"];
 
 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; }
 
@@ -94,6 +94,7 @@ export default function createSelect(WrappedComponent) {
             validationState = _this$props.validationState,
             spacing = _this$props.spacing,
             isMulti = _this$props.isMulti,
+            appearance = _this$props.appearance,
             props = _objectWithoutProperties(_this$props, _excluded);
 
         var isCompact = spacing === 'compact'; // props must be spread first to stop `components` being overridden
@@ -104,7 +105,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/esm/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';

package/dist/esm/styles.js

@@ -9,7 +9,7 @@ import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800,
 var BORDER_WIDTH = 2;
 var ICON_PADDING = 2;
 var paddingExcludingBorder = gridSize() - BORDER_WIDTH;
-export default function baseStyles(validationState, isCompact) {
+export default function baseStyles(validationState, isCompact, appearance) {
   return {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
@@ -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, ")");
       }
 
@@ -57,6 +57,20 @@ export default function baseStyles(validationState, isCompact) {
       }
 
       var transitionDuration = '200ms';
+
+      if (appearance === 'subtle') {
+        borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : 'transparent';
+        backgroundColor = isFocused ? "var(--ds-surface, ".concat(N0, ")") : 'transparent';
+        backgroundColorHover = isFocused ? "var(--ds-surface, ".concat(N0, ")") : "var(--ds-surface, ".concat(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,
@@ -164,7 +178,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 +230,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 +252,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.3.2",
+	"version": "15.6.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/dist/types/index.d.ts

@@ -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';
@@ -11,4 +11,4 @@ export { default as CreatableSelect } from './CreatableSelect';
 export { default as AsyncCreatableSelect } from './AsyncCreatableSelect';
 export { default as PopupSelect } from './PopupSelect';
 export type { PopupSelectProps } from './PopupSelect';
-export type { ActionMeta, ControlProps, FormatOptionLabelMeta, IndicatorComponentType, IndicatorProps, InputProps, MenuProps, MenuListComponentProps, OptionProps, OptionsType, OptionType, SelectComponentsConfig, SelectProps, StylesConfig, ValueContainerProps, ValueType, GroupedOptionsType, GroupType, } from './types';
+export type { ActionMeta, ControlProps, FormatOptionLabelMeta, IndicatorComponentType, IndicatorProps, InputActionMeta, InputProps, MenuProps, MenuListComponentProps, OptionProps, OptionsType, OptionType, SelectComponentsConfig, SelectProps, StylesConfig, ValueContainerProps, ValueType, GroupedOptionsType, GroupType, } from './types';

package/dist/types/styles.d.ts

@@ -1,2 +1,2 @@
 import { StylesConfig, ValidationState } from './types';
-export default function baseStyles<Option, IsMulti extends boolean>(validationState: ValidationState, isCompact: boolean): StylesConfig<Option, IsMulti>;
+export default function baseStyles<Option, IsMulti extends boolean>(validationState: ValidationState, isCompact: boolean, appearance: 'default' | 'subtle' | 'none'): StylesConfig<Option, IsMulti>;

package/dist/types/types.d.ts

@@ -25,6 +25,7 @@ export interface OptionProps<Option = OptionType, IsMulti extends boolean = fals
 export interface SelectProps<OptionType, IsMulti extends boolean = false> extends ReactSelectProps<OptionType, IsMulti>, WithAnalyticsEventsProps {
     spacing?: 'compact' | 'default';
     validationState?: ValidationState;
+    appearance?: 'default' | 'subtle' | 'none';
 }
 export declare type ActionMeta<Option = OptionType> = RSActionMeta<Option>;
 export declare type InputActionMeta = RSInputActionMeta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "15.3.2",
+  "version": "15.6.0",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,7 +13,7 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
@@ -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",
@@ -54,8 +54,9 @@
     "@atlaskit/docs": "*",
     "@atlaskit/drawer": "^7.1.0",
     "@atlaskit/form": "^8.5.0",
-    "@atlaskit/logo": "^13.7.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",