@atlaskit/select 16.1.7 → 16.1.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 16.1.9
+
+### Patch Changes
+
+- [`79ddcb13067`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79ddcb13067) - [ux] style(select): update fallback of select placeholder to N200'
+
+## 16.1.8
+
+### Patch Changes
+
+- [`8a8aac2b848`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a8aac2b848) - [ux] Adds proper disabled styling to the isMulti component.
+
 ## 16.1.7
 
 ### Patch Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -42,11 +42,9 @@ var canUseDOM = function canUseDOM() {
 // ==============================
 // Types
 // ==============================
-
 // ==============================
 // Class
 // ==============================
-
 var modifiers = [{
   name: 'offset',
   options: {
@@ -103,6 +101,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "popperWrapperId", "".concat((0, _reactUid.uid)({
       options: _this.props.options
     }), "-popup-select"));
+    // Event Handlers
+    // ==============================
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
       switch (event.key) {
         case 'Escape':
@@ -156,6 +156,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         focusLockEnabled: true
       });
     });
+    // Internal Lifecycle
+    // ==============================
+    /**
+     * Opens the popup
+     *
+     * @param options.controlOverride  - Force the popup to open when it's open state is being controlled
+     */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "open", function (options) {
       var onOpen = _this.props.onOpen;
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
@@ -182,6 +189,11 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         }
       });
     });
+    /**
+     * Closes the popup
+     *
+     * @param options.controlOverride  - Force the popup to close when it's open state is being controlled
+     */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (options) {
       var _this$unbindWindowKey, _this2;
       var onClose = _this.props.onClose;
@@ -207,6 +219,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       (_this$unbindWindowKey = (_this2 = _this).unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(_this2);
       _this.unbindWindowKeydown = null;
     });
+    // Refs
+    // ==============================
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveTargetRef", function (popperRef) {
       return function (ref) {
         // avoid thrashing fn calls
@@ -233,6 +247,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSelectRef", function (ref) {
       _this.selectRef = ref;
     });
+    // Utils
+    // ==============================
+    // account for groups when counting options
+    // this may need to be recursive, right now it just counts one level
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getItemCount", function () {
       var options = _this.props.options;
       var count = 0;
@@ -260,12 +278,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       var maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
     });
+    // if the threshold is exceeded, AND isSearchable is true, then display the search control
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showSearchControl", function () {
       var _this$props2 = _this.props,
         searchThreshold = _this$props2.searchThreshold,
         isSearchable = _this$props2.isSearchable;
       return isSearchable && _this.getItemCount() > searchThreshold;
     });
+    // Renderers
+    // ==============================
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSelect", function () {
       var _this$props3 = _this.props,
         footer = _this$props3.footer,
@@ -368,9 +389,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         }
       }
     }
-
-    // Event Handlers
-    // ==============================
   }, {
     key: "render",
     value: function render() {

package/dist/cjs/PopupSelect/components.js

@@ -15,6 +15,11 @@ var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["innerRef", "innerProps"],
   _excluded2 = ["children", "innerProps"];
+/** @jsx jsx */
+// ==============================
+// Styled Components
+// ==============================
+
 var MenuDialog = function MenuDialog(_ref) {
   var maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,

package/dist/cjs/Select.js

@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var packageName = "@atlaskit/select";
-var packageVersion = "16.1.7";
+var packageVersion = "16.1.9";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/components/index.js

@@ -30,6 +30,7 @@ var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-c
 var _reactSelect = require("react-select");
 var _indicators = require("./indicators");
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 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) {

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

@@ -28,7 +28,7 @@ var _excluded = ["isActive", "isDisabled", "isFocused", "isSelected"],
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 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; }
+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 */
 var getPrimitiveStyles = function getPrimitiveStyles(props) {
   var cx = props.cx,
     className = props.className,

package/dist/cjs/styles.js

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 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; }
+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; } // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var BORDER_WIDTH = 2;
 var ICON_PADDING = 2;
 var paddingExcludingBorder = (0, _constants.gridSize)() - BORDER_WIDTH;
@@ -192,7 +192,7 @@ function baseStyles(validationState) {
     placeholder: function placeholder(css, _ref5) {
       var isDisabled = _ref5.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
-        color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N300, ")") : "var(--ds-text-subtlest, ".concat(_colors.N300, ")")
+        color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N300, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
       });
     },
     singleValue: function singleValue(css, _ref6) {
@@ -216,27 +216,43 @@ function baseStyles(validationState) {
       });
     },
     multiValue: function multiValue(css, _ref7) {
-      var isFocused = _ref7.isFocused;
+      var isDisabled = _ref7.isDisabled,
+        isFocused = _ref7.isFocused;
+      var backgroundColor;
+      var color;
+      if (isDisabled) {
+        // Use the basic neutral background so it is slightly separate from the
+        // field's background
+        backgroundColor = "var(--ds-background-neutral, ".concat(_colors.N40, ")");
+        color = "var(--ds-text-disabled, ".concat(_colors.N70, ")");
+      } else if (isFocused) {
+        backgroundColor = "var(--ds-background-selected, ".concat(_colors.N40, ")");
+        color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
+      } else {
+        backgroundColor = "var(--ds-background-neutral, ".concat(_colors.N40, ")");
+        color = "var(--ds-text, hsl(0, 0%, 20%))";
+      }
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: "var(--ds-radius-050, 2px)",
-        backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(_colors.N40, ")") : "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
+        backgroundColor: backgroundColor,
         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'
         },
-        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
+        color: color
       });
     },
-    multiValueLabel: function multiValueLabel(css) {
+    multiValueLabel: function multiValueLabel(css, _ref8) {
+      var isDisabled = _ref8.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
         padding: "var(--ds-space-025, 2px)",
-        color: 'inherit',
+        color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : 'inherit',
         paddingRight: "var(--ds-space-025, 2px)"
       });
     },
-    multiValueRemove: function multiValueRemove(css, _ref8) {
-      var isFocused = _ref8.isFocused;
+    multiValueRemove: function multiValueRemove(css, _ref9) {
+      var isFocused = _ref9.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
         backgroundColor: isFocused ? "var(--ds-UNSAFE-transparent, ".concat(_colors.R75, ")") : undefined,
         fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",

package/dist/cjs/version.json

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

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -18,11 +18,9 @@ const canUseDOM = () => Boolean(typeof window !== 'undefined' && window.document
 // ==============================
 // Types
 // ==============================
-
 // ==============================
 // Class
 // ==============================
-
 const modifiers = [{
   name: 'offset',
   options: {
@@ -69,6 +67,8 @@ export default class PopupSelect extends PureComponent {
     _defineProperty(this, "popperWrapperId", `${uid({
       options: this.props.options
     })}-popup-select`);
+    // Event Handlers
+    // ==============================
     _defineProperty(this, "handleKeyDown", event => {
       switch (event.key) {
         case 'Escape':
@@ -126,6 +126,13 @@ export default class PopupSelect extends PureComponent {
         focusLockEnabled: true
       });
     });
+    // Internal Lifecycle
+    // ==============================
+    /**
+     * Opens the popup
+     *
+     * @param options.controlOverride  - Force the popup to open when it's open state is being controlled
+     */
     _defineProperty(this, "open", options => {
       const {
         onOpen
@@ -154,6 +161,11 @@ export default class PopupSelect extends PureComponent {
         }
       });
     });
+    /**
+     * Closes the popup
+     *
+     * @param options.controlOverride  - Force the popup to close when it's open state is being controlled
+     */
     _defineProperty(this, "close", options => {
       var _this$unbindWindowKey;
       const {
@@ -181,6 +193,8 @@ export default class PopupSelect extends PureComponent {
       (_this$unbindWindowKey = this.unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(this);
       this.unbindWindowKeydown = null;
     });
+    // Refs
+    // ==============================
     _defineProperty(this, "resolveTargetRef", popperRef => ref => {
       // avoid thrashing fn calls
       if (!this.targetRef && popperRef && ref) {
@@ -203,6 +217,10 @@ export default class PopupSelect extends PureComponent {
     _defineProperty(this, "getSelectRef", ref => {
       this.selectRef = ref;
     });
+    // Utils
+    // ==============================
+    // account for groups when counting options
+    // this may need to be recursive, right now it just counts one level
     _defineProperty(this, "getItemCount", () => {
       const {
         options
@@ -234,6 +252,7 @@ export default class PopupSelect extends PureComponent {
       const maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
     });
+    // if the threshold is exceeded, AND isSearchable is true, then display the search control
     _defineProperty(this, "showSearchControl", () => {
       const {
         searchThreshold,
@@ -241,6 +260,8 @@ export default class PopupSelect extends PureComponent {
       } = this.props;
       return isSearchable && this.getItemCount() > searchThreshold;
     });
+    // Renderers
+    // ==============================
     _defineProperty(this, "renderSelect", () => {
       const {
         footer,
@@ -367,10 +388,6 @@ export default class PopupSelect extends PureComponent {
       }
     }
   }
-
-  // Event Handlers
-  // ==============================
-
   render() {
     const {
       target

package/dist/es2019/PopupSelect/components.js

@@ -7,6 +7,10 @@ import VisuallyHidden from '@atlaskit/visually-hidden';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { layers } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
+
+// ==============================
+// Styled Components
+// ==============================
 export const MenuDialog = ({
   maxWidth,
   minWidth,

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

package/dist/es2019/styles.js

@@ -184,7 +184,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       isDisabled
     }) => ({
       ...css,
-      color: isDisabled ? `var(--ds-text-disabled, ${N300})` : `var(--ds-text-subtlest, ${N300})`
+      color: isDisabled ? `var(--ds-text-disabled, ${N300})` : `var(--ds-text-subtlest, ${N200})`
     }),
     singleValue: (css, {
       isDisabled
@@ -205,22 +205,41 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       paddingBottom: "var(--ds-space-100, 8px)"
     }),
     multiValue: (css, {
+      isDisabled,
       isFocused
+    }) => {
+      let backgroundColor;
+      let color;
+      if (isDisabled) {
+        // Use the basic neutral background so it is slightly separate from the
+        // field's background
+        backgroundColor = `var(--ds-background-neutral, ${N40})`;
+        color = `var(--ds-text-disabled, ${N70})`;
+      } else if (isFocused) {
+        backgroundColor = `var(--ds-background-selected, ${N40})`;
+        color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
+      } else {
+        backgroundColor = `var(--ds-background-neutral, ${N40})`;
+        color = "var(--ds-text, hsl(0, 0%, 20%))";
+      }
+      return {
+        ...css,
+        borderRadius: "var(--ds-radius-050, 2px)",
+        backgroundColor,
+        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'
+        },
+        color
+      };
+    },
+    multiValueLabel: (css, {
+      isDisabled
     }) => ({
-      ...css,
-      borderRadius: "var(--ds-radius-050, 2px)",
-      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'
-      },
-      color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
-    }),
-    multiValueLabel: css => ({
       ...css,
       padding: "var(--ds-space-025, 2px)",
-      color: 'inherit',
+      color: isDisabled ? `var(--ds-text-disabled, ${N70})` : 'inherit',
       paddingRight: "var(--ds-space-025, 2px)"
     }),
     multiValueRemove: (css, {

package/dist/es2019/version.json

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

package/dist/esm/PopupSelect/PopupSelect.js

@@ -32,11 +32,9 @@ var canUseDOM = function canUseDOM() {
 // ==============================
 // Types
 // ==============================
-
 // ==============================
 // Class
 // ==============================
-
 var modifiers = [{
   name: 'offset',
   options: {
@@ -93,6 +91,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "popperWrapperId", "".concat(uid({
       options: _this.props.options
     }), "-popup-select"));
+    // Event Handlers
+    // ==============================
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
       switch (event.key) {
         case 'Escape':
@@ -146,6 +146,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         focusLockEnabled: true
       });
     });
+    // Internal Lifecycle
+    // ==============================
+    /**
+     * Opens the popup
+     *
+     * @param options.controlOverride  - Force the popup to open when it's open state is being controlled
+     */
     _defineProperty(_assertThisInitialized(_this), "open", function (options) {
       var onOpen = _this.props.onOpen;
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
@@ -172,6 +179,11 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         }
       });
     });
+    /**
+     * Closes the popup
+     *
+     * @param options.controlOverride  - Force the popup to close when it's open state is being controlled
+     */
     _defineProperty(_assertThisInitialized(_this), "close", function (options) {
       var _this$unbindWindowKey, _this2;
       var onClose = _this.props.onClose;
@@ -197,6 +209,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       (_this$unbindWindowKey = (_this2 = _this).unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(_this2);
       _this.unbindWindowKeydown = null;
     });
+    // Refs
+    // ==============================
     _defineProperty(_assertThisInitialized(_this), "resolveTargetRef", function (popperRef) {
       return function (ref) {
         // avoid thrashing fn calls
@@ -223,6 +237,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "getSelectRef", function (ref) {
       _this.selectRef = ref;
     });
+    // Utils
+    // ==============================
+    // account for groups when counting options
+    // this may need to be recursive, right now it just counts one level
     _defineProperty(_assertThisInitialized(_this), "getItemCount", function () {
       var options = _this.props.options;
       var count = 0;
@@ -250,12 +268,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       var maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
     });
+    // if the threshold is exceeded, AND isSearchable is true, then display the search control
     _defineProperty(_assertThisInitialized(_this), "showSearchControl", function () {
       var _this$props2 = _this.props,
         searchThreshold = _this$props2.searchThreshold,
         isSearchable = _this$props2.isSearchable;
       return isSearchable && _this.getItemCount() > searchThreshold;
     });
+    // Renderers
+    // ==============================
     _defineProperty(_assertThisInitialized(_this), "renderSelect", function () {
       var _this$props3 = _this.props,
         footer = _this$props3.footer,
@@ -358,9 +379,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         }
       }
     }
-
-    // Event Handlers
-    // ==============================
   }, {
     key: "render",
     value: function render() {

package/dist/esm/PopupSelect/components.js

@@ -10,6 +10,10 @@ import VisuallyHidden from '@atlaskit/visually-hidden';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { layers } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
+
+// ==============================
+// Styled Components
+// ==============================
 export var MenuDialog = function MenuDialog(_ref) {
   var maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,

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

package/dist/esm/styles.js

@@ -186,7 +186,7 @@ export default function baseStyles(validationState) {
     placeholder: function placeholder(css, _ref5) {
       var isDisabled = _ref5.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
-        color: isDisabled ? "var(--ds-text-disabled, ".concat(N300, ")") : "var(--ds-text-subtlest, ".concat(N300, ")")
+        color: isDisabled ? "var(--ds-text-disabled, ".concat(N300, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")
       });
     },
     singleValue: function singleValue(css, _ref6) {
@@ -210,27 +210,43 @@ export default function baseStyles(validationState) {
       });
     },
     multiValue: function multiValue(css, _ref7) {
-      var isFocused = _ref7.isFocused;
+      var isDisabled = _ref7.isDisabled,
+        isFocused = _ref7.isFocused;
+      var backgroundColor;
+      var color;
+      if (isDisabled) {
+        // Use the basic neutral background so it is slightly separate from the
+        // field's background
+        backgroundColor = "var(--ds-background-neutral, ".concat(N40, ")");
+        color = "var(--ds-text-disabled, ".concat(N70, ")");
+      } else if (isFocused) {
+        backgroundColor = "var(--ds-background-selected, ".concat(N40, ")");
+        color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
+      } else {
+        backgroundColor = "var(--ds-background-neutral, ".concat(N40, ")");
+        color = "var(--ds-text, hsl(0, 0%, 20%))";
+      }
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: "var(--ds-radius-050, 2px)",
-        backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(N40, ")") : "var(--ds-background-neutral, ".concat(N40, ")"),
+        backgroundColor: backgroundColor,
         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'
         },
-        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
+        color: color
       });
     },
-    multiValueLabel: function multiValueLabel(css) {
+    multiValueLabel: function multiValueLabel(css, _ref8) {
+      var isDisabled = _ref8.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
         padding: "var(--ds-space-025, 2px)",
-        color: 'inherit',
+        color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : 'inherit',
         paddingRight: "var(--ds-space-025, 2px)"
       });
     },
-    multiValueRemove: function multiValueRemove(css, _ref8) {
-      var isFocused = _ref8.isFocused;
+    multiValueRemove: function multiValueRemove(css, _ref9) {
+      var isFocused = _ref9.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
         backgroundColor: isFocused ? "var(--ds-UNSAFE-transparent, ".concat(R75, ")") : undefined,
         fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.1.7",
+  "version": "16.1.9",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/spinner": "^15.4.0",
-    "@atlaskit/theme": "^12.3.0",
+    "@atlaskit/theme": "^12.4.0",
     "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/visually-hidden": "^1.1.0",
     "@babel/runtime": "^7.0.0",
@@ -54,12 +54,12 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/drawer": "^7.4.0",
-    "@atlaskit/form": "^8.8.0",
-    "@atlaskit/logo": "^13.11.0",
+    "@atlaskit/form": "^8.10.0",
+    "@atlaskit/logo": "^13.13.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/section-message": "^6.3.0",

package/report.api.md

@@ -47,6 +47,7 @@ import { NoticeProps } from 'react-select';
 import { OnChangeValue } from 'react-select';
 import { OptionProps as OptionProps_2 } from 'react-select';
 import { Options } from 'react-select';
+import { PlaceholderProps as PlaceholderProps_2 } from 'react-select';
 import { PopperProps } from 'react-popper';
 import { PureComponent } from 'react';
 import { default as React_2 } from 'react';
@@ -696,6 +697,12 @@ export interface OptionType {
   value: number | string;
 }
 
+// @public (undocumented)
+export type PlaceholderProps<
+  Option,
+  IsMulti extends boolean = false,
+> = PlaceholderProps_2<Option, IsMulti>;
+
 // @public (undocumented)
 type PopperPropsNoChildren<Modifiers> = Omit<
   PopperProps<Modifiers>,