@atlaskit/select 15.6.0 → 15.7.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/select
 
+## 15.7.0
+
+### Minor Changes
+
+- [`0fbb2840aba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0fbb2840aba) - Add isInvalid prop to `@atlastkit/Select`. The prop indicates whether if the component is in the error state. If true, it visually shows a red border around the input.
+
+  This replaces validationState to make Select more consistent like other components that uses isInvalid prop.
+
+- [`8cf1c311f38`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cf1c311f38) - Add additional type check for the modifier generic in PopupSelect.
+- [`41ce212cfe2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41ce212cfe2) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- [`2d61e38e5d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d61e38e5d3) - [ux] Adds isSearchable option to Popup Select
+- [`908a0f65b91`](https://bitbucket.org/atlassian/atlassian-frontend/commits/908a0f65b91) - [ux] Hides clear icon on selections in disabled multi-select
+- [`de1b2769486`](https://bitbucket.org/atlassian/atlassian-frontend/commits/de1b2769486) - Update design tokens used for Select's borders, to new border.input tokens
+- Updated dependencies
+
+## 15.6.2
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 15.6.1
+
+### Patch Changes
+
+- [`d9f112c7b09`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d9f112c7b09) - Reverts change to multiSelect's remove behaviour when using tokens, fixing issue with a pointer-events: none style
+
 ## 15.6.0
 
 ### Minor Changes

package/dist/cjs/CountrySelect.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _countries = require("./data/countries");
 
@@ -17,12 +17,12 @@ var _Select = _interopRequireDefault(require("./Select"));
 
 /** @jsx jsx */
 // custom option renderer
-var labelStyles = (0, _core.css)({
+var labelStyles = (0, _react.css)({
   alignItems: 'center',
   display: 'flex',
   lineHeight: 1.2
 });
-var flagStyles = (0, _core.css)({
+var flagStyles = (0, _react.css)({
   fontSize: '18px',
   marginRight: '8px'
 });
@@ -30,9 +30,9 @@ var flagStyles = (0, _core.css)({
 var Opt = function Opt(_ref) {
   var children = _ref.children,
       icon = _ref.icon;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: labelStyles
-  }, (0, _core.jsx)("span", {
+  }, (0, _react.jsx)("span", {
     css: flagStyles
   }, icon), children);
 }; // return the country name; used for searching
@@ -52,7 +52,7 @@ var getOptionValue = function getOptionValue(opt) {
 
 
 var controlLabel = function controlLabel(opt) {
-  return (0, _core.jsx)(Opt, {
+  return (0, _react.jsx)(Opt, {
     icon: opt.icon
   }, opt.abbr.toUpperCase());
 }; // the text node for an option
@@ -63,7 +63,7 @@ var optionLabel = function optionLabel(_ref3) {
       code = _ref3.code,
       icon = _ref3.icon,
       name = _ref3.name;
-  return (0, _core.jsx)(Opt, {
+  return (0, _react.jsx)(Opt, {
     icon: icon
   }, getOptionLabel({
     abbr: abbr,
@@ -80,7 +80,7 @@ var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
 
 
 var CountrySelect = function CountrySelect(props) {
-  return (0, _core.jsx)(_Select.default, (0, _extends2.default)({
+  return (0, _react.jsx)(_Select.default, (0, _extends2.default)({
     isClearable: false,
     formatOptionLabel: formatOptionLabel,
     getOptionLabel: getOptionLabel,

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -76,22 +76,23 @@ var canUseDOM = function canUseDOM() {
 // ==============================
 // Class
 // ==============================
+var modifiers = [{
+  name: 'offset',
+  options: {
+    offset: [0, 8]
+  }
+}, {
+  name: 'preventOverflow',
+  enabled: true,
+  options: {
+    padding: 5,
+    boundary: 'clippingParents',
+    altAxis: true,
+    altBoundary: true
+  }
+}];
 var defaultPopperProps = {
-  modifiers: [{
-    name: 'offset',
-    options: {
-      offset: [0, 8]
-    }
-  }, {
-    name: 'preventOverflow',
-    enabled: true,
-    options: {
-      padding: 5,
-      boundary: 'clippingParents',
-      altAxis: true,
-      altBoundary: true
-    }
-  }],
+  modifiers: modifiers,
   placement: 'bottom-start'
 };
 
@@ -121,7 +122,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (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', 'default'), {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState || (_this.props.isInvalid ? 'error' : 'default'), _this.props.spacing === 'compact', 'default'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
           color: "var(--ds-text-subtlest, ".concat(_colors.N80, ")")
@@ -314,16 +315,18 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       return maxHeight;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showSearchControl", function () {
-      var searchThreshold = _this.props.searchThreshold;
-      return _this.getItemCount() > searchThreshold;
+      var _this$props3 = _this.props,
+          searchThreshold = _this$props3.searchThreshold,
+          isSearchable = _this$props3.isSearchable;
+      return isSearchable && _this.getItemCount() > searchThreshold;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSelect", function () {
-      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$props4 = _this.props,
+          footer = _this$props4.footer,
+          maxMenuWidth = _this$props4.maxMenuWidth,
+          minMenuWidth = _this$props4.minMenuWidth,
+          target = _this$props4.target,
+          props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
       var _this$state = _this.state,
           isOpen = _this$state.isOpen,
           mergedComponents = _this$state.mergedComponents,
@@ -478,6 +481,7 @@ exports.default = PopupSelect;
   maxMenuWidth: 440,
   minMenuWidth: 220,
   popperProps: {},
+  isSearchable: true,
   searchThreshold: 5,
   styles: {},
   options: []

package/dist/cjs/PopupSelect/components.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _reactSelect = require("react-select");
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 
@@ -32,7 +32,7 @@ var MenuDialog = function MenuDialog(_ref) {
       children = _ref.children,
       id = _ref.id,
       style = _ref.style;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: {
       backgroundColor: "var(--ds-surface-overlay, white)",
       borderRadius: 4,
@@ -52,13 +52,13 @@ var MenuDialog = function MenuDialog(_ref) {
 exports.MenuDialog = MenuDialog;
 
 var DropdownIndicator = function DropdownIndicator() {
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: {
       marginRight: 2,
       textAlign: 'center',
       width: 32
     }
-  }, (0, _core.jsx)(_search.default, {
+  }, (0, _react.jsx)(_search.default, {
     label: "open"
   }));
 };
@@ -67,18 +67,18 @@ var Control = function Control(_ref2) {
   var innerRef = _ref2.innerRef,
       innerProps = _ref2.innerProps,
       props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     ref: innerRef,
     css: {
       padding: '8px 8px 4px'
     }
-  }, (0, _core.jsx)(_reactSelect.components.Control, (0, _extends2.default)({}, props, {
+  }, (0, _react.jsx)(_reactSelect.components.Control, (0, _extends2.default)({}, props, {
     innerProps: innerProps
   })));
 };
 
 var DummyControl = function DummyControl(props) {
-  return (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)(_reactSelect.components.Control, props));
+  return (0, _react.jsx)(_visuallyHidden.default, null, (0, _react.jsx)(_reactSelect.components.Control, props));
 }; // NOTE `props` intentionally omitted from `Fragment`
 // eslint-disable-next-line
 
@@ -89,7 +89,7 @@ var Menu = function Menu(_ref3) {
   var children = _ref3.children,
       innerProps = _ref3.innerProps,
       props = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
-  return (0, _core.jsx)("div", innerProps, children);
+  return (0, _react.jsx)("div", innerProps, children);
 };
 
 var defaultComponents = {

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

package/dist/cjs/components/index.js

@@ -26,7 +26,9 @@ Object.defineProperty(exports, "LoadingIndicator", {
 });
 exports.MultiValueRemove = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
 
 var _reactSelect = require("react-select");
 
@@ -34,13 +36,22 @@ var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-c
 
 var _indicators = require("./indicators");
 
+var _templateObject, _templateObject2;
+
+var disabledProps = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n"])));
+var enabledProps = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inherit;\n"])));
+
 var MultiValueRemove = function MultiValueRemove(props) {
-  return /*#__PURE__*/_react.default.createElement(_reactSelect.components.MultiValueRemove, props, /*#__PURE__*/_react.default.createElement(_selectClear.default, {
+  var isDisabled = props.selectProps.isDisabled;
+  return (0, _react.jsx)(_reactSelect.components.MultiValueRemove, props, (0, _react.jsx)("div", {
+    css: isDisabled ? disabledProps : enabledProps,
+    "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
+  }, (0, _react.jsx)(_selectClear.default, {
     label: "Clear",
     size: "small",
     primaryColor: "transparent",
     secondaryColor: "inherit"
-  }));
+  })));
 };
 
 exports.MultiValueRemove = MultiValueRemove;

package/dist/cjs/components/indicators.js

@@ -9,7 +9,7 @@ exports.LoadingIndicator = exports.DropdownIndicator = exports.ClearIndicator =
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _reactSelect = require("react-select");
 
@@ -21,7 +21,7 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-
 
 /** @jsx jsx */
 var ClearIndicator = function ClearIndicator(props) {
-  return (0, _core.jsx)(_reactSelect.components.ClearIndicator, props, (0, _core.jsx)(_selectClear.default, {
+  return (0, _react.jsx)(_reactSelect.components.ClearIndicator, props, (0, _react.jsx)(_selectClear.default, {
     size: "small",
     label: "clear"
   }));
@@ -30,7 +30,7 @@ var ClearIndicator = function ClearIndicator(props) {
 exports.ClearIndicator = ClearIndicator;
 
 var DropdownIndicator = function DropdownIndicator(props) {
-  return (0, _core.jsx)(_reactSelect.components.DropdownIndicator, props, (0, _core.jsx)(_chevronDown.default, {
+  return (0, _react.jsx)(_reactSelect.components.DropdownIndicator, props, (0, _react.jsx)(_chevronDown.default, {
     label: "open"
   }));
 };
@@ -38,9 +38,9 @@ var DropdownIndicator = function DropdownIndicator(props) {
 exports.DropdownIndicator = DropdownIndicator;
 
 var LoadingIndicator = function LoadingIndicator(props) {
-  return (0, _core.jsx)("div", (0, _extends2.default)({
+  return (0, _react.jsx)("div", (0, _extends2.default)({
     css: props.getStyles('loadingIndicator', props)
-  }, props.innerProps), (0, _core.jsx)(_spinner.default, {
+  }, props.innerProps), (0, _react.jsx)(_spinner.default, {
     size: "small"
   }));
 };

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

@@ -27,9 +27,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = require("react");
+var _react2 = require("react");
 
 var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
 
@@ -196,12 +196,12 @@ var getBorderColor = function getBorderColor(_ref3) {
   } else if (isFocused && isSelected) {
     return "var(--ds-background-selected-bold-hovered, ".concat(_colors.B400, ")");
   } else if (isFocused) {
-    return "var(--ds-border, ".concat(_colors.N100, ")");
+    return "var(--ds-border-input, ".concat(_colors.N100, ")");
   } else if (isSelected) {
     return "var(--ds-background-selected-bold, ".concat(_colors.B400, ")");
   }
 
-  return "var(--ds-border, ".concat(_colors.N100, ")");
+  return "var(--ds-border-input, ".concat(_colors.N100, ")");
 };
 
 var ControlOption = /*#__PURE__*/function (_Component) {
@@ -264,44 +264,51 @@ var ControlOption = /*#__PURE__*/function (_Component) {
           styles = _getPrimitiveStyles2[0],
           classes = _getPrimitiveStyles2[1];
 
-      return (0, _core.jsx)("div", (0, _extends2.default)({
-        css: styles,
-        className: classes,
-        ref: innerRef
-      }, props), (0, _core.jsx)("div", {
-        css: {
-          alignItems: 'center',
-          display: 'flex ',
-          flexShrink: 0,
-          paddingRight: '4px',
-          // Here we are adding a border to the Checkbox and Radio SVG icons
-          // This is an a11y fix for Select only for now but it may be rolled
-          // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
-          '& svg rect, & svg circle:first-of-type': {
-            stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state)),
-            strokeWidth: '2px',
-            strokeLinejoin: 'round'
+      return (
+        /**
+         * TODO Fix this type error
+         * @see https://product-fabric.atlassian.net/browse/DSP-6063
+         */
+        // @ts-ignore
+        (0, _react.jsx)("div", (0, _extends2.default)({
+          css: styles,
+          className: classes,
+          ref: innerRef
+        }, props), (0, _react.jsx)("div", {
+          css: {
+            alignItems: 'center',
+            display: 'flex ',
+            flexShrink: 0,
+            paddingRight: '4px',
+            // Here we are adding a border to the Checkbox and Radio SVG icons
+            // This is an a11y fix for Select only for now but it may be rolled
+            // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+            '& svg rect, & svg circle:first-of-type': {
+              stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state)),
+              strokeWidth: '2px',
+              strokeLinejoin: 'round'
+            }
           }
-        }
-      }, !!Icon ? (0, _core.jsx)(Icon, {
-        label: "",
-        primaryColor: getPrimaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
-        secondaryColor: getSecondaryColor(_objectSpread(_objectSpread({}, this.props), this.state))
-      }) : null), (0, _core.jsx)("div", {
-        css: {
-          textOverflow: 'ellipsis',
-          overflowX: 'hidden',
-          flexGrow: 1,
-          whiteSpace: 'nowrap'
-        }
-      }, children));
+        }, !!Icon ? (0, _react.jsx)(Icon, {
+          label: "",
+          primaryColor: getPrimaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
+          secondaryColor: getSecondaryColor(_objectSpread(_objectSpread({}, this.props), this.state))
+        }) : null), (0, _react.jsx)("div", {
+          css: {
+            textOverflow: 'ellipsis',
+            overflowX: 'hidden',
+            flexGrow: 1,
+            whiteSpace: 'nowrap'
+          }
+        }, children))
+      );
     }
   }]);
   return ControlOption;
-}(_react.Component);
+}(_react2.Component);
 
 var CheckboxOption = function CheckboxOption(props) {
-  return (0, _core.jsx)(ControlOption, (0, _extends2.default)({
+  return (0, _react.jsx)(ControlOption, (0, _extends2.default)({
     Icon: _checkbox.default
   }, props));
 };
@@ -309,7 +316,7 @@ var CheckboxOption = function CheckboxOption(props) {
 exports.CheckboxOption = CheckboxOption;
 
 var RadioOption = function RadioOption(props) {
-  return (0, _core.jsx)(ControlOption, (0, _extends2.default)({
+  return (0, _react.jsx)(ControlOption, (0, _extends2.default)({
     Icon: _radio.default
   }, props));
 };

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", "appearance"];
+var _excluded = ["styles", "validationState", "isInvalid", "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); }
 
@@ -117,6 +117,7 @@ function createSelect(WrappedComponent) {
         var _this$props = this.props,
             styles = _this$props.styles,
             validationState = _this$props.validationState,
+            isInvalid = _this$props.isInvalid,
             spacing = _this$props.spacing,
             isMulti = _this$props.isMulti,
             appearance = _this$props.appearance,
@@ -129,13 +130,14 @@ function createSelect(WrappedComponent) {
           "aria-live": "assertive"
         }, props, {
           components: this.components,
-          styles: (0, _reactSelect.mergeStyles)((0, _styles.default)(validationState, isCompact, this.props.appearance || 'default'), styles)
+          styles: (0, _reactSelect.mergeStyles)((0, _styles.default)(validationState || (isInvalid ? 'error' : 'default'), isCompact, this.props.appearance || 'default'), styles)
         }));
       }
     }]);
     return AtlaskitSelect;
   }(_react.Component), (0, _defineProperty2.default)(_class, "defaultProps", {
     validationState: 'default',
+    isInvalid: false,
     spacing: 'default',
     onClickPreventDefault: true,
     tabSelectsValue: false,

package/dist/cjs/styles.js

@@ -21,7 +21,9 @@ var BORDER_WIDTH = 2;
 var ICON_PADDING = 2;
 var paddingExcludingBorder = (0, _constants.gridSize)() - BORDER_WIDTH;
 
-function baseStyles(validationState, isCompact, appearance) {
+function baseStyles(validationState) {
+  var isCompact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var appearance = arguments.length > 2 ? arguments[2] : undefined;
   return {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
@@ -58,7 +60,7 @@ function baseStyles(validationState, isCompact, appearance) {
         borderColor = "var(--ds-border-success, ".concat(_colors.G400, ")");
       }
 
-      var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border, ".concat(_colors.N30, ")");
+      var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat(_colors.N30, ")");
 
       if (validationState === 'error') {
         borderColorHover = "var(--ds-border-danger, ".concat(_colors.R400, ")");
@@ -248,16 +250,7 @@ function baseStyles(validationState, isCompact, appearance) {
         '@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)"
-        }
+        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
       });
     },
     multiValueLabel: function multiValueLabel(css, _ref8) {
@@ -271,18 +264,18 @@ function baseStyles(validationState, isCompact, appearance) {
     multiValueRemove: function multiValueRemove(css, _ref9) {
       var isFocused = _ref9.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        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',
+        // DSP-6470 we should style like Tag once we have the :has selector
         ':hover': {
-          backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.R75, ")"),
+          backgroundColor: "var(--ds-background-danger-hovered, ".concat(_colors.R75, ")"),
           fill: "var(--ds-text-danger, #000)"
         },
         ':active': {
-          backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.R75, ")"),
+          backgroundColor: "var(--ds-background-danger-pressed, ".concat(_colors.R75, ")"),
           fill: "var(--ds-text-danger, #000)"
         }
       });

package/dist/cjs/version.json

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

package/dist/es2019/CountrySelect.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import Select from './Select';
 // custom option renderer

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -22,22 +22,23 @@ const canUseDOM = () => Boolean(typeof window !== 'undefined' && window.document
 // ==============================
 // Class
 // ==============================
+const modifiers = [{
+  name: 'offset',
+  options: {
+    offset: [0, 8]
+  }
+}, {
+  name: 'preventOverflow',
+  enabled: true,
+  options: {
+    padding: 5,
+    boundary: 'clippingParents',
+    altAxis: true,
+    altBoundary: true
+  }
+}];
 const defaultPopperProps = {
-  modifiers: [{
-    name: 'offset',
-    options: {
-      offset: [0, 8]
-    }
-  }, {
-    name: 'preventOverflow',
-    enabled: true,
-    options: {
-      padding: 5,
-      boundary: 'clippingParents',
-      altAxis: true,
-      altBoundary: true
-    }
-  }],
+  modifiers,
   placement: 'bottom-start'
 };
 
@@ -59,7 +60,7 @@ export default class PopupSelect extends PureComponent {
 
     _defineProperty(this, "unbindWindowKeydown", null);
 
-    _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState, this.props.spacing === 'compact', 'default'), {
+    _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState || (this.props.isInvalid ? 'error' : 'default'), this.props.spacing === 'compact', 'default'), {
       groupHeading: provided => ({ ...provided,
         color: `var(--ds-text-subtlest, ${N80})`
       })
@@ -270,9 +271,10 @@ export default class PopupSelect extends PureComponent {
 
     _defineProperty(this, "showSearchControl", () => {
       const {
-        searchThreshold
+        searchThreshold,
+        isSearchable
       } = this.props;
-      return this.getItemCount() > searchThreshold;
+      return isSearchable && this.getItemCount() > searchThreshold;
     });
 
     _defineProperty(this, "renderSelect", () => {
@@ -435,6 +437,7 @@ _defineProperty(PopupSelect, "defaultProps", {
   maxMenuWidth: 440,
   minMenuWidth: 220,
   popperProps: {},
+  isSearchable: true,
   searchThreshold: 5,
   styles: {},
   options: []

package/dist/es2019/PopupSelect/components.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { components } from 'react-select';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { layers } from '@atlaskit/theme/constants';

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