@atlaskit/select 16.7.6 → 17.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/select
 
+## 17.0.0
+
+### Major Changes
+
+- [#41866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41866) [`ed8b6957789`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed8b6957789) - Removes any usage of deprecated legacy theming APIs. These have been superseeded by design tokens.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.7.6
 
 ### Patch Changes

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

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

@@ -7,24 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadioOption = exports.CheckboxOption = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _react2 = require("react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
 var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
-var _components = require("@atlaskit/theme/components");
 var _colors = require("@atlaskit/theme/colors");
-var _excluded = ["isActive", "isDisabled", "isFocused", "isSelected"],
-  _excluded2 = ["isActive", "isDisabled", "isSelected"],
-  _excluded3 = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
+var _excluded = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
 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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -66,16 +63,6 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
   return [augmentedStyles, cx(bemClasses, className)];
 };
 
-// maintains function shape
-var backgroundColor = (0, _components.themed)({
-  light: "var(--ds-background-neutral, ".concat(_colors.N0, ")"),
-  dark: "var(--ds-background-neutral, ".concat(_colors.DN10, ")")
-});
-var transparent = (0, _components.themed)({
-  light: 'transparent',
-  dark: 'transparent'
-});
-
 // state of the parent option
 
 // the primary color represents the outer or background element
@@ -83,72 +70,38 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
   var isActive = _ref.isActive,
     isDisabled = _ref.isDisabled,
     isFocused = _ref.isFocused,
-    isSelected = _ref.isSelected,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var color = backgroundColor;
+    isSelected = _ref.isSelected;
   if (isDisabled && isSelected) {
-    color = (0, _components.themed)({
-      light: "var(--ds-background-disabled, ".concat(_colors.B75, ")"),
-      dark: "var(--ds-background-disabled, ".concat(_colors.DN200, ")")
-    });
+    return "var(--ds-background-disabled, ".concat(_colors.B75, ")");
   } else if (isDisabled) {
-    color = (0, _components.themed)({
-      light: "var(--ds-background-disabled, ".concat(_colors.N20A, ")"),
-      dark: "var(--ds-background-disabled, ".concat(_colors.DN10, ")")
-    });
+    return "var(--ds-background-disabled, ".concat(_colors.N20A, ")");
   } else if (isSelected && isActive) {
-    color = (0, _components.themed)({
-      light: "var(--ds-background-selected-bold-pressed, ".concat(_colors.B75, ")"),
-      dark: "var(--ds-background-selected-bold-pressed, ".concat(_colors.B200, ")")
-    });
+    return "var(--ds-background-selected-bold-pressed, ".concat(_colors.B75, ")");
   } else if (isActive) {
-    color = (0, _components.themed)({
-      light: "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")"),
-      dark: "var(--ds-background-selected-pressed, ".concat(_colors.B200, ")")
-    });
+    return "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")");
   } else if (isFocused && isSelected) {
-    color = (0, _components.themed)({
-      light: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
-      dark: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B75, ")")
-    });
+    return "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")");
   } else if (isFocused) {
-    color = (0, _components.themed)({
-      light: "var(--ds-surface, ".concat(_colors.N0, ")"),
-      dark: "var(--ds-surface, ".concat(_colors.DN30, ")")
-    });
+    return "var(--ds-surface, ".concat(_colors.N0, ")");
   } else if (isSelected) {
-    color = (0, _components.themed)({
-      light: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
-      dark: "var(--ds-background-selected-bold, ".concat(_colors.B100, ")")
-    });
+    return "var(--ds-background-selected-bold, ".concat(_colors.B400, ")");
   }
-  return color(rest);
+  return "var(--ds-background-neutral, ".concat(_colors.N0, ")");
 };
 
 // the secondary color represents the radio dot or checkmark
 var getSecondaryColor = function getSecondaryColor(_ref2) {
   var isActive = _ref2.isActive,
     isDisabled = _ref2.isDisabled,
-    isSelected = _ref2.isSelected,
-    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  var color = (0, _components.themed)({
-    light: "var(--ds-surface, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-surface, ".concat(_colors.DN10, ")")
-  });
+    isSelected = _ref2.isSelected;
   if (isDisabled && isSelected) {
-    color = (0, _components.themed)({
-      light: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
-      dark: "var(--ds-text-disabled, ".concat(_colors.DN10, ")")
-    });
+    return "var(--ds-text-disabled, ".concat(_colors.N70, ")");
   } else if (isActive && isSelected && !isDisabled) {
-    color = (0, _components.themed)({
-      light: "var(--ds-surface, ".concat(_colors.B400, ")"),
-      dark: "var(--ds-surface, ".concat(_colors.DN10, ")")
-    });
+    return "var(--ds-surface, ".concat(_colors.B400, ")");
   } else if (!isSelected) {
-    color = transparent;
+    return 'transparent';
   }
-  return color(rest);
+  return "var(--ds-surface, ".concat(_colors.N0, ")");
 };
 
 // the border color surrounds the checkbox/radio
@@ -233,7 +186,7 @@ var ControlOption = /*#__PURE__*/function (_Component) {
         children = _this$props.children,
         innerProps = _this$props.innerProps,
         innerRef = _this$props.innerRef,
-        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded3);
+        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
 
       // prop assignment
       var props = _objectSpread(_objectSpread({}, innerProps), {}, {

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

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

@@ -6,8 +6,7 @@ import { Component } from 'react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
-import { themed } from '@atlaskit/theme/components';
-import { B100, B200, B300, B400, B75, DN200, DN10, DN30, N20A, N0, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
+import { B300, B400, B75, N20A, N0, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
 const getPrimitiveStyles = props => {
   const {
     cx,
@@ -50,16 +49,6 @@ const getPrimitiveStyles = props => {
   return [augmentedStyles, cx(bemClasses, className)];
 };
 
-// maintains function shape
-const backgroundColor = themed({
-  light: `var(--ds-background-neutral, ${N0})`,
-  dark: `var(--ds-background-neutral, ${DN10})`
-});
-const transparent = themed({
-  light: 'transparent',
-  dark: 'transparent'
-});
-
 // state of the parent option
 
 // the primary color represents the outer or background element
@@ -67,74 +56,40 @@ const getPrimaryColor = ({
   isActive,
   isDisabled,
   isFocused,
-  isSelected,
-  ...rest
+  isSelected
 }) => {
-  let color = backgroundColor;
   if (isDisabled && isSelected) {
-    color = themed({
-      light: `var(--ds-background-disabled, ${B75})`,
-      dark: `var(--ds-background-disabled, ${DN200})`
-    });
+    return `var(--ds-background-disabled, ${B75})`;
   } else if (isDisabled) {
-    color = themed({
-      light: `var(--ds-background-disabled, ${N20A})`,
-      dark: `var(--ds-background-disabled, ${DN10})`
-    });
+    return `var(--ds-background-disabled, ${N20A})`;
   } else if (isSelected && isActive) {
-    color = themed({
-      light: `var(--ds-background-selected-bold-pressed, ${B75})`,
-      dark: `var(--ds-background-selected-bold-pressed, ${B200})`
-    });
+    return `var(--ds-background-selected-bold-pressed, ${B75})`;
   } else if (isActive) {
-    color = themed({
-      light: `var(--ds-background-selected-pressed, ${B75})`,
-      dark: `var(--ds-background-selected-pressed, ${B200})`
-    });
+    return `var(--ds-background-selected-pressed, ${B75})`;
   } else if (isFocused && isSelected) {
-    color = themed({
-      light: `var(--ds-background-selected-bold-hovered, ${B300})`,
-      dark: `var(--ds-background-selected-bold-hovered, ${B75})`
-    });
+    return `var(--ds-background-selected-bold-hovered, ${B300})`;
   } else if (isFocused) {
-    color = themed({
-      light: `var(--ds-surface, ${N0})`,
-      dark: `var(--ds-surface, ${DN30})`
-    });
+    return `var(--ds-surface, ${N0})`;
   } else if (isSelected) {
-    color = themed({
-      light: `var(--ds-background-selected-bold, ${B400})`,
-      dark: `var(--ds-background-selected-bold, ${B100})`
-    });
+    return `var(--ds-background-selected-bold, ${B400})`;
   }
-  return color(rest);
+  return `var(--ds-background-neutral, ${N0})`;
 };
 
 // the secondary color represents the radio dot or checkmark
 const getSecondaryColor = ({
   isActive,
   isDisabled,
-  isSelected,
-  ...rest
+  isSelected
 }) => {
-  let color = themed({
-    light: `var(--ds-surface, ${N0})`,
-    dark: `var(--ds-surface, ${DN10})`
-  });
   if (isDisabled && isSelected) {
-    color = themed({
-      light: `var(--ds-text-disabled, ${N70})`,
-      dark: `var(--ds-text-disabled, ${DN10})`
-    });
+    return `var(--ds-text-disabled, ${N70})`;
   } else if (isActive && isSelected && !isDisabled) {
-    color = themed({
-      light: `var(--ds-surface, ${B400})`,
-      dark: `var(--ds-surface, ${DN10})`
-    });
+    return `var(--ds-surface, ${B400})`;
   } else if (!isSelected) {
-    color = transparent;
+    return 'transparent';
   }
-  return color(rest);
+  return `var(--ds-surface, ${N0})`;
 };
 
 // the border color surrounds the checkbox/radio

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

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

@@ -1,16 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 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 = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
+var _excluded = ["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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -21,8 +19,7 @@ import { Component } from 'react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
-import { themed } from '@atlaskit/theme/components';
-import { B100, B200, B300, B400, B75, DN200, DN10, DN30, N20A, N0, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
+import { B300, B400, B75, N20A, N0, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
 var getPrimitiveStyles = function getPrimitiveStyles(props) {
   var cx = props.cx,
     className = props.className,
@@ -60,16 +57,6 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
   return [augmentedStyles, cx(bemClasses, className)];
 };
 
-// maintains function shape
-var backgroundColor = themed({
-  light: "var(--ds-background-neutral, ".concat(N0, ")"),
-  dark: "var(--ds-background-neutral, ".concat(DN10, ")")
-});
-var transparent = themed({
-  light: 'transparent',
-  dark: 'transparent'
-});
-
 // state of the parent option
 
 // the primary color represents the outer or background element
@@ -77,72 +64,38 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
   var isActive = _ref.isActive,
     isDisabled = _ref.isDisabled,
     isFocused = _ref.isFocused,
-    isSelected = _ref.isSelected,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var color = backgroundColor;
+    isSelected = _ref.isSelected;
   if (isDisabled && isSelected) {
-    color = themed({
-      light: "var(--ds-background-disabled, ".concat(B75, ")"),
-      dark: "var(--ds-background-disabled, ".concat(DN200, ")")
-    });
+    return "var(--ds-background-disabled, ".concat(B75, ")");
   } else if (isDisabled) {
-    color = themed({
-      light: "var(--ds-background-disabled, ".concat(N20A, ")"),
-      dark: "var(--ds-background-disabled, ".concat(DN10, ")")
-    });
+    return "var(--ds-background-disabled, ".concat(N20A, ")");
   } else if (isSelected && isActive) {
-    color = themed({
-      light: "var(--ds-background-selected-bold-pressed, ".concat(B75, ")"),
-      dark: "var(--ds-background-selected-bold-pressed, ".concat(B200, ")")
-    });
+    return "var(--ds-background-selected-bold-pressed, ".concat(B75, ")");
   } else if (isActive) {
-    color = themed({
-      light: "var(--ds-background-selected-pressed, ".concat(B75, ")"),
-      dark: "var(--ds-background-selected-pressed, ".concat(B200, ")")
-    });
+    return "var(--ds-background-selected-pressed, ".concat(B75, ")");
   } else if (isFocused && isSelected) {
-    color = themed({
-      light: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
-      dark: "var(--ds-background-selected-bold-hovered, ".concat(B75, ")")
-    });
+    return "var(--ds-background-selected-bold-hovered, ".concat(B300, ")");
   } else if (isFocused) {
-    color = themed({
-      light: "var(--ds-surface, ".concat(N0, ")"),
-      dark: "var(--ds-surface, ".concat(DN30, ")")
-    });
+    return "var(--ds-surface, ".concat(N0, ")");
   } else if (isSelected) {
-    color = themed({
-      light: "var(--ds-background-selected-bold, ".concat(B400, ")"),
-      dark: "var(--ds-background-selected-bold, ".concat(B100, ")")
-    });
+    return "var(--ds-background-selected-bold, ".concat(B400, ")");
   }
-  return color(rest);
+  return "var(--ds-background-neutral, ".concat(N0, ")");
 };
 
 // the secondary color represents the radio dot or checkmark
 var getSecondaryColor = function getSecondaryColor(_ref2) {
   var isActive = _ref2.isActive,
     isDisabled = _ref2.isDisabled,
-    isSelected = _ref2.isSelected,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
-  var color = themed({
-    light: "var(--ds-surface, ".concat(N0, ")"),
-    dark: "var(--ds-surface, ".concat(DN10, ")")
-  });
+    isSelected = _ref2.isSelected;
   if (isDisabled && isSelected) {
-    color = themed({
-      light: "var(--ds-text-disabled, ".concat(N70, ")"),
-      dark: "var(--ds-text-disabled, ".concat(DN10, ")")
-    });
+    return "var(--ds-text-disabled, ".concat(N70, ")");
   } else if (isActive && isSelected && !isDisabled) {
-    color = themed({
-      light: "var(--ds-surface, ".concat(B400, ")"),
-      dark: "var(--ds-surface, ".concat(DN10, ")")
-    });
+    return "var(--ds-surface, ".concat(B400, ")");
   } else if (!isSelected) {
-    color = transparent;
+    return 'transparent';
   }
-  return color(rest);
+  return "var(--ds-surface, ".concat(N0, ")");
 };
 
 // the border color surrounds the checkbox/radio
@@ -227,7 +180,7 @@ var ControlOption = /*#__PURE__*/function (_Component) {
         children = _this$props.children,
         innerProps = _this$props.innerProps,
         innerRef = _this$props.innerRef,
-        rest = _objectWithoutProperties(_this$props, _excluded3);
+        rest = _objectWithoutProperties(_this$props, _excluded);
 
       // prop assignment
       var props = _objectSpread(_objectSpread({}, innerProps), {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.7.6",
+  "version": "17.0.0",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/spinner": "^15.6.0",
+    "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/visually-hidden": "^1.2.0",