@atlaskit/select 15.6.2 → 15.7.1

package/AsyncCreatableSelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/AsyncCreatableSelect.js",
   "module:es2019": "../dist/es2019/AsyncCreatableSelect.js",
   "sideEffects": false,
-  "types": "../dist/types/AsyncCreatableSelect.d.ts"
+  "types": "../dist/types/AsyncCreatableSelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/AsyncCreatableSelect.d.ts"
+      ]
+    }
+  }
 }

package/AsyncSelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/AsyncSelect.js",
   "module:es2019": "../dist/es2019/AsyncSelect.js",
   "sideEffects": false,
-  "types": "../dist/types/AsyncSelect.d.ts"
+  "types": "../dist/types/AsyncSelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/AsyncSelect.d.ts"
+      ]
+    }
+  }
 }

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/select
 
+## 15.7.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 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

package/CheckboxSelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/CheckboxSelect.js",
   "module:es2019": "../dist/es2019/CheckboxSelect.js",
   "sideEffects": false,
-  "types": "../dist/types/CheckboxSelect.d.ts"
+  "types": "../dist/types/CheckboxSelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/CheckboxSelect.d.ts"
+      ]
+    }
+  }
 }

package/CountrySelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/CountrySelect.js",
   "module:es2019": "../dist/es2019/CountrySelect.js",
   "sideEffects": false,
-  "types": "../dist/types/CountrySelect.d.ts"
+  "types": "../dist/types/CountrySelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/CountrySelect.d.ts"
+      ]
+    }
+  }
 }

package/CreatableSelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/CreatableSelect.js",
   "module:es2019": "../dist/es2019/CreatableSelect.js",
   "sideEffects": false,
-  "types": "../dist/types/CreatableSelect.d.ts"
+  "types": "../dist/types/CreatableSelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/CreatableSelect.d.ts"
+      ]
+    }
+  }
 }

package/RadioSelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/RadioSelect.js",
   "module:es2019": "../dist/es2019/RadioSelect.js",
   "sideEffects": false,
-  "types": "../dist/types/RadioSelect.d.ts"
+  "types": "../dist/types/RadioSelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/RadioSelect.d.ts"
+      ]
+    }
+  }
 }

package/Select/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/Select.js",
   "module:es2019": "../dist/es2019/Select.js",
   "sideEffects": false,
-  "types": "../dist/types/Select.d.ts"
+  "types": "../dist/types/Select.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/Select.d.ts"
+      ]
+    }
+  }
 }

package/createSelect/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/createSelect.js",
   "module:es2019": "../dist/es2019/createSelect.js",
   "sideEffects": false,
-  "types": "../dist/types/createSelect.d.ts"
+  "types": "../dist/types/createSelect.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/createSelect.d.ts"
+      ]
+    }
+  }
 }

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.2";
+var packageVersion = "15.7.1";
 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, ")");

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.6.2",
+	"version": "15.7.1",
 	"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