@atlaskit/select 15.2.2 → 15.2.6

package/dist/es2019/styles.js

@@ -1,6 +1,5 @@
 import { gridSize, fontFamily } from '@atlaskit/theme/constants';
 import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const BORDER_WIDTH = 2;
 const ICON_PADDING = 2;
 const paddingExcludingBorder = gridSize() - BORDER_WIDTH;
@@ -16,37 +15,37 @@ export default function baseStyles(validationState, isCompact) {
       cursor: isDisabled ? 'not-allowed' : undefined
     }),
     input: css => ({ ...css,
-      color: token('color.text.highEmphasis', 'hsl(0, 0%, 20%)')
+      color: "var(--ds-text-highEmphasis, hsl(0, 0%, 20%))"
     }),
     control: (css, {
       isFocused,
       isDisabled
     }) => {
-      let borderColor = isFocused ? token('color.border.focus', B100) : token('color.border.neutral', N20);
-      let backgroundColor = isFocused ? token('color.background.default', N0) : token('color.background.subtleNeutral.resting', N20);
-      let backgroundColorHover = isFocused ? token('color.background.default', N0) : token('color.background.default', N30);
+      let borderColor = isFocused ? `var(--ds-border-focus, ${B100})` : `var(--ds-border-neutral, ${N20})`;
+      let backgroundColor = isFocused ? `var(--ds-background-default, ${N0})` : `var(--ds-background-subtleNeutral-resting, ${N20})`;
+      let backgroundColorHover = isFocused ? `var(--ds-background-default, ${N0})` : `var(--ds-background-default, ${N30})`;
 
       if (isDisabled) {
-        backgroundColor = token('color.background.subtleNeutral.resting', N20);
-        borderColor = token('color.background.disabled', N20);
+        backgroundColor = `var(--ds-background-subtleNeutral-resting, ${N20})`;
+        borderColor = `var(--ds-background-disabled, ${N20})`;
       }
 
       if (validationState === 'error') {
-        borderColor = token('color.iconBorder.danger', R400);
+        borderColor = `var(--ds-iconBorder-danger, ${R400})`;
       }
 
       if (validationState === 'success') {
-        borderColor = token('color.iconBorder.success', G400);
+        borderColor = `var(--ds-iconBorder-success, ${G400})`;
       }
 
-      let borderColorHover = isFocused ? token('color.border.focus', B100) : token('color.border.neutral', N30);
+      let borderColorHover = isFocused ? `var(--ds-border-focus, ${B100})` : `var(--ds-border-neutral, ${N30})`;
 
       if (validationState === 'error') {
-        borderColorHover = token('color.iconBorder.danger', R400);
+        borderColorHover = `var(--ds-iconBorder-danger, ${R400})`;
       }
 
       if (validationState === 'success') {
-        borderColorHover = token('color.iconBorder.success', G400);
+        borderColorHover = `var(--ds-iconBorder-success, ${G400})`;
       }
 
       const transitionDuration = '200ms';
@@ -93,13 +92,13 @@ export default function baseStyles(validationState, isCompact) {
       paddingTop: isCompact ? 0 : 2
     }),
     clearIndicator: css => ({ ...css,
-      color: token('color.text.lowEmphasis', N70),
+      color: `var(--ds-text-lowEmphasis, ${N70})`,
       paddingLeft: ICON_PADDING,
       paddingRight: ICON_PADDING,
       paddingBottom: isCompact ? 0 : 6,
       paddingTop: isCompact ? 0 : 6,
       ':hover': {
-        color: token('color.text.mediumEmphasis', N500)
+        color: `var(--ds-text-mediumEmphasis, ${N500})`
       }
     }),
     loadingIndicator: css => ({ ...css,
@@ -109,10 +108,10 @@ export default function baseStyles(validationState, isCompact) {
     dropdownIndicator: (css, {
       isDisabled
     }) => {
-      let color = token('color.text.mediumEmphasis', N500);
+      let color = `var(--ds-text-mediumEmphasis, ${N500})`;
 
       if (isDisabled) {
-        color = token('color.text.disabled', N70);
+        color = `var(--ds-text-disabled, ${N70})`;
       }
 
       return { ...css,
@@ -122,7 +121,7 @@ export default function baseStyles(validationState, isCompact) {
         paddingBottom: isCompact ? 0 : 6,
         paddingTop: isCompact ? 0 : 6,
         ':hover': {
-          color: token('color.text.mediumEmphasis', N200)
+          color: `var(--ds-text-mediumEmphasis, ${N200})`
         }
       };
     },
@@ -134,12 +133,12 @@ export default function baseStyles(validationState, isCompact) {
       isSelected,
       isDisabled
     }) => {
-      let color = token('color.text.highEmphasis', N800);
+      let color = `var(--ds-text-highEmphasis, ${N800})`;
 
       if (isDisabled) {
-        color = token('color.text.disabled', N70);
+        color = `var(--ds-text-disabled, ${N70})`;
       } else if (isSelected) {
-        color = token('color.text.selected', B400);
+        color = `var(--ds-text-selected, ${B400})`;
       }
 
       let boxShadow;
@@ -148,15 +147,15 @@ export default function baseStyles(validationState, isCompact) {
       if (isDisabled) {
         backgroundColor = undefined;
       } else if (isSelected && isFocused) {
-        backgroundColor = token('color.background.selected.hover', B50);
+        backgroundColor = `var(--ds-background-selected-hover, ${B50})`;
       } else if (isSelected) {
-        backgroundColor = token('color.background.selected.resting', B50);
+        backgroundColor = `var(--ds-background-selected-resting, ${B50})`;
       } else if (isFocused) {
-        backgroundColor = token('color.background.transparentNeutral.hover', N20);
+        backgroundColor = `var(--ds-background-transparentNeutral-hover, ${N20})`;
       }
 
       if (!isDisabled && (isFocused || isSelected)) {
-        boxShadow = `inset 2px 0px 0px ${token('color.text.selected', B400)}`;
+        boxShadow = `inset 2px 0px 0px ${`var(--ds-text-selected, ${B400})`}`;
       }
 
       const cursor = isDisabled ? 'not-allowed' : undefined;
@@ -167,7 +166,7 @@ export default function baseStyles(validationState, isCompact) {
         cursor,
         boxShadow,
         ':active': {
-          backgroundColor: !isDisabled ? isSelected ? token('color.background.selected.pressed', N20) : token('color.background.transparentNeutral.pressed', N30) : undefined
+          backgroundColor: !isDisabled ? isSelected ? `var(--ds-background-selected-pressed, ${N20})` : `var(--ds-background-transparentNeutral-pressed, ${N30})` : undefined
         },
         '@media screen and (-ms-high-contrast: active)': {
           borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
@@ -177,18 +176,18 @@ export default function baseStyles(validationState, isCompact) {
     placeholder: (css, {
       isDisabled
     }) => ({ ...css,
-      color: isDisabled ? token('color.text.disabled', N300) : token('color.text.lowEmphasis', N300)
+      color: isDisabled ? `var(--ds-text-disabled, ${N300})` : `var(--ds-text-lowEmphasis, ${N300})`
     }),
     singleValue: (css, {
       isDisabled
     }) => ({ ...css,
-      color: isDisabled ? token('color.text.disabled', N70) : token('color.text.highEmphasis', N800),
+      color: isDisabled ? `var(--ds-text-disabled, ${N70})` : `var(--ds-text-highEmphasis, ${N800})`,
       lineHeight: `${gridSize() * 2}px` // 16px
 
     }),
     menu: css => ({ ...css,
-      backgroundColor: token('color.background.overlay', 'white'),
-      boxShadow: token('shadow.overlay', '0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%)')
+      backgroundColor: "var(--ds-background-overlay, white)",
+      boxShadow: "var(--ds-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
     }),
     menuList: css => ({ ...css,
       paddingTop: gridSize(),
@@ -198,8 +197,8 @@ export default function baseStyles(validationState, isCompact) {
       isFocused
     }) => ({ ...css,
       borderRadius: '2px',
-      backgroundColor: isFocused ? token('color.background.selected.resting', N40) : token('color.background.transparentNeutral.hover', N40),
-      boxShadow: isFocused ? `0 0 0 2px ${token('color.background.default', 'transparent')}, 0 0 0 4px ${token('color.border.focus', 'transparent')}` : 'none',
+      backgroundColor: isFocused ? `var(--ds-background-selected-resting, ${N40})` : `var(--ds-background-transparentNeutral-hover, ${N40})`,
+      boxShadow: isFocused ? `0 0 0 2px ${"var(--ds-background-default, transparent)"}, 0 0 0 4px ${"var(--ds-border-focus, transparent)"}` : 'none',
       maxWidth: '100%',
       '@media screen and (-ms-high-contrast: active)': {
         border: isFocused ? '1px solid transparent' : 'none'
@@ -209,25 +208,25 @@ export default function baseStyles(validationState, isCompact) {
       isFocused
     }) => ({ ...css,
       padding: '2px',
-      color: isFocused ? token('color.text.selected', 'hsl(0, 0%, 20%)') : token('color.text.highEmphasis', 'hsl(0, 0%, 20%)'),
+      color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text-highEmphasis, hsl(0, 0%, 20%))",
       paddingRight: '2px'
     }),
     multiValueRemove: (css, {
       // @ts-ignore: missing in @types/react-select
       isFocused
     }) => ({ ...css,
-      backgroundColor: isFocused && token('color.background.selected.resting', R75),
-      fill: isFocused ? token('color.text.selected', '#000') : token('color.text.highEmphasis', '#000'),
+      backgroundColor: isFocused && `var(--ds-background-selected-resting, ${R75})`,
+      fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text-highEmphasis, #000)",
       paddingLeft: '2px',
       paddingRight: '2px',
       borderRadius: '0px 2px 2px 0px',
       ':hover': {
-        backgroundColor: token('color.background.subtleDanger.hover', R75),
-        fill: token('color.text.danger', '#000')
+        backgroundColor: `var(--ds-background-subtleDanger-hover, ${R75})`,
+        fill: "var(--ds-text-danger, #000)"
       },
       ':active': {
-        backgroundColor: token('color.background.subtleDanger.pressed', R75),
-        fill: token('color.text.danger', '#000')
+        backgroundColor: `var(--ds-background-subtleDanger-pressed, ${R75})`,
+        fill: "var(--ds-text-danger, #000)"
       }
     })
   };

package/dist/es2019/version.json

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

package/dist/esm/CheckboxSelect.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["components"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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) { _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; }
 
 import React from 'react';
 import Select from './Select';
@@ -12,7 +13,7 @@ import { CheckboxOption } from './components/input-options';
 
 var CheckboxSelect = function CheckboxSelect(_ref) {
   var components = _ref.components,
-      props = _objectWithoutProperties(_ref, ["components"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var temp = _objectSpread(_objectSpread({}, components), {}, {
     Option: CheckboxOption

package/dist/esm/CountrySelect.js

@@ -1,9 +1,9 @@
 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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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) { _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';

package/dist/esm/PopupSelect/PopupSelect.js

@@ -7,10 +7,11 @@ 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 = ["footer", "maxMenuWidth", "minMenuWidth", "target"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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) { _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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -25,7 +26,6 @@ import { Manager, Reference, Popper } from 'react-popper';
 import NodeResolver from 'react-node-resolver';
 import shallowEqualObjects from 'shallow-equal/objects';
 import { N80 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
 import baseStyles from '../styles';
 
@@ -90,7 +90,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState, _this.props.spacing === 'compact'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
-          color: token('color.text.lowEmphasis', N80)
+          color: "var(--ds-text-lowEmphasis, ".concat(N80, ")")
         });
       }
     }));
@@ -213,6 +213,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         _this.focusTrap.deactivate();
       }
 
+      if (_this.targetRef != null) {
+        _this.targetRef.focus();
+      }
+
       if (typeof window === 'undefined') {
         return;
       }
@@ -294,7 +298,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           maxMenuWidth = _this$props2.maxMenuWidth,
           minMenuWidth = _this$props2.minMenuWidth,
           target = _this$props2.target,
-          props = _objectWithoutProperties(_this$props2, ["footer", "maxMenuWidth", "minMenuWidth", "target"]);
+          props = _objectWithoutProperties(_this$props2, _excluded);
 
       var _this$state = _this.state,
           isOpen = _this$state.isOpen,

package/dist/esm/PopupSelect/components.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["innerRef", "innerProps"],
+    _excluded2 = ["children", "innerProps"];
 
 /** @jsx jsx */
 import { components } from 'react-select';
@@ -7,7 +9,6 @@ import { jsx } from '@emotion/core';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { layers } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var MenuDialog = function MenuDialog(_ref) {
   var maxWidth = _ref.maxWidth,
       minWidth = _ref.minWidth,
@@ -16,9 +17,9 @@ export var MenuDialog = function MenuDialog(_ref) {
       style = _ref.style;
   return jsx("div", {
     css: {
-      backgroundColor: token('color.background.overlay', 'white'),
+      backgroundColor: "var(--ds-background-overlay, white)",
       borderRadius: 4,
-      boxShadow: token('shadow.overlay', "0 0 0 1px ".concat(N40A, ", 0 4px 11px ").concat(N40A)),
+      boxShadow: "var(--ds-overlay, ".concat("0 0 0 1px ".concat(N40A, ", 0 4px 11px ").concat(N40A), ")"),
       maxWidth: maxWidth,
       minWidth: minWidth,
       zIndex: layers.modal()
@@ -45,7 +46,7 @@ var DropdownIndicator = function DropdownIndicator() {
 var Control = function Control(_ref2) {
   var innerRef = _ref2.innerRef,
       innerProps = _ref2.innerProps,
-      props = _objectWithoutProperties(_ref2, ["innerRef", "innerProps"]);
+      props = _objectWithoutProperties(_ref2, _excluded);
 
   return jsx("div", {
     ref: innerRef,
@@ -76,7 +77,7 @@ export var DummyControl = function DummyControl(props) {
 var Menu = function Menu(_ref3) {
   var children = _ref3.children,
       innerProps = _ref3.innerProps,
-      props = _objectWithoutProperties(_ref3, ["children", "innerProps"]);
+      props = _objectWithoutProperties(_ref3, _excluded2);
 
   return jsx("div", innerProps, children);
 };

package/dist/esm/RadioSelect.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["components"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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) { _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; }
 
 import React from 'react';
 import Select from './Select';
@@ -12,7 +13,7 @@ import { RadioOption } from './components/input-options';
 
 var RadioSelect = function RadioSelect(_ref) {
   var components = _ref.components,
-      props = _objectWithoutProperties(_ref, ["components"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
     isMulti: false,

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

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

@@ -8,14 +8,18 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["isActive", "isDisabled", "isFocused", "isSelected"],
+    _excluded2 = ["isActive", "isDisabled", "isSelected"],
+    _excluded3 = ["isActive", "isDisabled", "isFocused", "isSelected"],
+    _excluded4 = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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) { _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';
@@ -25,7 +29,6 @@ import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { B100, B200, B300, B400, B75, DN200, DN10, DN30, N20A, N0, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 
 var getPrimitiveStyles = function getPrimitiveStyles(props) {
   var cx = props.cx,
@@ -36,15 +39,15 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
       isSelected = props.isSelected;
   var styles = {
     alignItems: 'center',
-    backgroundColor: isFocused ? token('color.background.transparentNeutral.hover', N20) : 'transparent',
-    color: isDisabled ? token('color.text.disabled', 'inherit') : 'inherit',
+    backgroundColor: isFocused ? "var(--ds-background-transparentNeutral-hover, ".concat(N20, ")") : 'transparent',
+    color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
     display: 'flex ',
     paddingBottom: 4,
     paddingLeft: "".concat(gridSize() * 2, "px"),
     paddingTop: 4,
-    boxShadow: isFocused ? "inset 2px 0px 0px ".concat(token('color.text.selected', B400), ";") : '',
+    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-text-selected, ".concat(B400, ")"), ";") : '',
     ':active': {
-      backgroundColor: token('color.background.transparentNeutral.pressed', N30)
+      backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(N30, ")")
     },
     '@media screen and (-ms-high-contrast: active)': {
       borderLeft: isFocused ? '2px solid transparent' : ''
@@ -65,8 +68,8 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
 
 
 var backgroundColor = themed({
-  light: token('color.background.subtleNeutral.resting', N0),
-  dark: token('color.background.subtleNeutral.resting', DN10)
+  light: "var(--ds-background-subtleNeutral-resting, ".concat(N0, ")"),
+  dark: "var(--ds-background-subtleNeutral-resting, ".concat(DN10, ")")
 });
 var transparent = themed({
   light: 'transparent',
@@ -79,44 +82,44 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
       isDisabled = _ref.isDisabled,
       isFocused = _ref.isFocused,
       isSelected = _ref.isSelected,
-      rest = _objectWithoutProperties(_ref, ["isActive", "isDisabled", "isFocused", "isSelected"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var color = backgroundColor;
 
   if (isDisabled && isSelected) {
     color = themed({
-      light: token('color.background.disabled', B75),
-      dark: token('color.background.disabled', DN200)
+      light: "var(--ds-background-disabled, ".concat(B75, ")"),
+      dark: "var(--ds-background-disabled, ".concat(DN200, ")")
     });
   } else if (isDisabled) {
     color = themed({
-      light: token('color.background.disabled', N20A),
-      dark: token('color.background.disabled', DN10)
+      light: "var(--ds-background-disabled, ".concat(N20A, ")"),
+      dark: "var(--ds-background-disabled, ".concat(DN10, ")")
     });
   } else if (isSelected && isActive) {
     color = themed({
-      light: token('color.background.boldBrand.pressed', B75),
-      dark: token('color.background.boldBrand.pressed', B200)
+      light: "var(--ds-background-boldBrand-pressed, ".concat(B75, ")"),
+      dark: "var(--ds-background-boldBrand-pressed, ".concat(B200, ")")
     });
   } else if (isActive) {
     color = themed({
-      light: token('color.background.subtleBrand.pressed', B75),
-      dark: token('color.background.subtleBrand.pressed', B200)
+      light: "var(--ds-background-subtleBrand-pressed, ".concat(B75, ")"),
+      dark: "var(--ds-background-subtleBrand-pressed, ".concat(B200, ")")
     });
   } else if (isFocused && isSelected) {
     color = themed({
-      light: token('color.background.boldBrand.hover', B300),
-      dark: token('color.background.boldBrand.hover', B75)
+      light: "var(--ds-background-boldBrand-hover, ".concat(B300, ")"),
+      dark: "var(--ds-background-boldBrand-hover, ".concat(B75, ")")
     });
   } else if (isFocused) {
     color = themed({
-      light: token('color.background.default', N0),
-      dark: token('color.background.default', DN30)
+      light: "var(--ds-background-default, ".concat(N0, ")"),
+      dark: "var(--ds-background-default, ".concat(DN30, ")")
     });
   } else if (isSelected) {
     color = themed({
-      light: token('color.background.boldBrand.resting', B400),
-      dark: token('color.background.boldBrand.resting', B100)
+      light: "var(--ds-background-boldBrand-resting, ".concat(B400, ")"),
+      dark: "var(--ds-background-boldBrand-resting, ".concat(B100, ")")
     });
   }
 
@@ -128,22 +131,22 @@ var getSecondaryColor = function getSecondaryColor(_ref2) {
   var isActive = _ref2.isActive,
       isDisabled = _ref2.isDisabled,
       isSelected = _ref2.isSelected,
-      rest = _objectWithoutProperties(_ref2, ["isActive", "isDisabled", "isSelected"]);
+      rest = _objectWithoutProperties(_ref2, _excluded2);
 
   var color = themed({
-    light: token('color.background.default', N0),
-    dark: token('color.background.default', DN10)
+    light: "var(--ds-background-default, ".concat(N0, ")"),
+    dark: "var(--ds-background-default, ".concat(DN10, ")")
   });
 
   if (isDisabled && isSelected) {
     color = themed({
-      light: token('color.text.disabled', N70),
-      dark: token('color.text.disabled', DN10)
+      light: "var(--ds-text-disabled, ".concat(N70, ")"),
+      dark: "var(--ds-text-disabled, ".concat(DN10, ")")
     });
   } else if (isActive && isSelected && !isDisabled) {
     color = themed({
-      light: token('color.background.default', B400),
-      dark: token('color.background.default', DN10)
+      light: "var(--ds-background-default, ".concat(B400, ")"),
+      dark: "var(--ds-background-default, ".concat(DN10, ")")
     });
   } else if (!isSelected) {
     color = transparent;
@@ -158,25 +161,25 @@ var getBorderColor = function getBorderColor(_ref3) {
       isDisabled = _ref3.isDisabled,
       isFocused = _ref3.isFocused,
       isSelected = _ref3.isSelected,
-      rest = _objectWithoutProperties(_ref3, ["isActive", "isDisabled", "isFocused", "isSelected"]);
+      rest = _objectWithoutProperties(_ref3, _excluded3);
 
   if (isDisabled && isSelected) {
-    return token('color.background.disabled', B400);
+    return "var(--ds-background-disabled, ".concat(B400, ")");
   } else if (isDisabled) {
-    return token('color.background.disabled', N100);
+    return "var(--ds-background-disabled, ".concat(N100, ")");
   } else if (isSelected && isActive) {
-    return token('color.background.boldBrand.pressed', B400);
+    return "var(--ds-background-boldBrand-pressed, ".concat(B400, ")");
   } else if (isActive) {
-    return token('color.background.boldBrand.resting', B400);
+    return "var(--ds-background-boldBrand-resting, ".concat(B400, ")");
   } else if (isFocused && isSelected) {
-    return token('color.background.boldBrand.hover', B400);
+    return "var(--ds-background-boldBrand-hover, ".concat(B400, ")");
   } else if (isFocused) {
-    return token('color.border.neutral', N100);
+    return "var(--ds-border-neutral, ".concat(N100, ")");
   } else if (isSelected) {
-    return token('color.background.boldBrand.resting', B400);
+    return "var(--ds-background-boldBrand-resting, ".concat(B400, ")");
   }
 
-  return token('color.border.neutral', N100);
+  return "var(--ds-border-neutral, ".concat(N100, ")");
 };
 
 var ControlOption = /*#__PURE__*/function (_Component) {
@@ -229,7 +232,7 @@ var ControlOption = /*#__PURE__*/function (_Component) {
           children = _this$props.children,
           innerProps = _this$props.innerProps,
           innerRef = _this$props.innerRef,
-          rest = _objectWithoutProperties(_this$props, ["getStyles", "Icon", "children", "innerProps", "innerRef"]); // prop assignment
+          rest = _objectWithoutProperties(_this$props, _excluded4); // prop assignment
 
 
       var props = _objectSpread(_objectSpread({}, innerProps), {}, {

package/dist/esm/createSelect.js

@@ -8,10 +8,11 @@ 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"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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) { _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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -93,7 +94,7 @@ export default function createSelect(WrappedComponent) {
             validationState = _this$props.validationState,
             spacing = _this$props.spacing,
             isMulti = _this$props.isMulti,
-            props = _objectWithoutProperties(_this$props, ["styles", "validationState", "spacing", "isMulti"]);
+            props = _objectWithoutProperties(_this$props, _excluded);
 
         var isCompact = spacing === 'compact'; // props must be spread first to stop `components` being overridden