@atlaskit/select 16.1.4 → 16.1.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 16.1.6
+
+### Patch Changes
+
+- [`74c1b81a476`](https://bitbucket.org/atlassian/atlassian-frontend/commits/74c1b81a476) - Replaces use of `gridSize` with space tokens. There is no expected visual change.
+
+## 16.1.5
+
+### Patch Changes
+
+- [`7f5f23dcb68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f5f23dcb68) - Introduce shape tokens to some packages.
+
 ## 16.1.4
 
 ### 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.1.4";
+var packageVersion = "16.1.6";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

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

@@ -20,7 +20,6 @@ var _react2 = require("react");
 var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
 var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
 var _components = require("@atlaskit/theme/components");
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["isActive", "isDisabled", "isFocused", "isSelected"],
   _excluded2 = ["isActive", "isDisabled", "isSelected"],
@@ -42,9 +41,9 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
     backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")") : 'transparent',
     color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
     display: 'flex ',
-    paddingBottom: 4,
-    paddingLeft: "".concat((0, _constants.gridSize)() * 2, "px"),
-    paddingTop: 4,
+    paddingBottom: "var(--ds-space-050, 4px)",
+    paddingLeft: "var(--ds-space-200, 16px)",
+    paddingTop: "var(--ds-space-050, 4px)",
     boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(_colors.B400, ")"), ";") : '',
     ':active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")")

package/dist/cjs/styles.js

@@ -20,7 +20,7 @@ function baseStyles(validationState) {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
-        fontFamily: (0, _constants.fontFamily)(),
+        fontFamily: "var(--ds-font-family-sans, ".concat((0, _constants.fontFamily)(), ")"),
         // react-select disables pointer events when isDisabled is true.
         // We override this and make the inner container turn it off instead.
         pointerEvents: 'all',
@@ -73,8 +73,8 @@ function baseStyles(validationState) {
         backgroundColor: backgroundColor,
         borderColor: borderColor,
         borderStyle: 'solid',
-        borderRadius: '3px',
-        borderWidth: '2px',
+        borderRadius: "var(--ds-radius-100, 3px)",
+        borderWidth: "var(--ds-width-100, 2px)",
         boxShadow: 'none',
         minHeight: isCompact ? (0, _constants.gridSize)() * 4 : (0, _constants.gridSize)() * 5,
         padding: 0,
@@ -199,7 +199,7 @@ function baseStyles(validationState) {
       var isDisabled = _ref6.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
         color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : "var(--ds-text, ".concat(_colors.N800, ")"),
-        lineHeight: "".concat((0, _constants.gridSize)() * 2, "px") // 16px
+        lineHeight: "var(--ds-font-lineHeight-100, 16px)" // 16px
       });
     },
 
@@ -211,14 +211,14 @@ function baseStyles(validationState) {
     },
     menuList: function menuList(css) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        paddingTop: (0, _constants.gridSize)(),
-        paddingBottom: (0, _constants.gridSize)()
+        paddingTop: "var(--ds-space-100, 8px)",
+        paddingBottom: "var(--ds-space-100, 8px)"
       });
     },
     multiValue: function multiValue(css, _ref7) {
       var isFocused = _ref7.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        borderRadius: '2px',
+        borderRadius: "var(--ds-radius-050, 2px)",
         backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(_colors.N40, ")") : "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
         boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',
@@ -230,9 +230,9 @@ function baseStyles(validationState) {
     },
     multiValueLabel: function multiValueLabel(css) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        padding: '2px',
+        padding: "var(--ds-space-025, 2px)",
         color: 'inherit',
-        paddingRight: '2px'
+        paddingRight: "var(--ds-space-025, 2px)"
       });
     },
     multiValueRemove: function multiValueRemove(css, _ref8) {
@@ -240,8 +240,8 @@ function baseStyles(validationState) {
       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)",
-        paddingLeft: '2px',
-        paddingRight: '2px',
+        paddingLeft: "var(--ds-space-025, 2px)",
+        paddingRight: "var(--ds-space-025, 2px)",
         borderRadius: '0px 2px 2px 0px',
         // DSP-6470 we should style like Tag once we have the :has selector
         ':hover': {

package/dist/cjs/version.json

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

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

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

@@ -6,7 +6,6 @@ import { Component } from 'react';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
 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';
 const getPrimitiveStyles = props => {
   const {
@@ -22,9 +21,9 @@ const getPrimitiveStyles = props => {
     backgroundColor: isFocused ? `var(--ds-background-neutral-subtle-hovered, ${N20})` : 'transparent',
     color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
     display: 'flex ',
-    paddingBottom: 4,
-    paddingLeft: `${gridSize() * 2}px`,
-    paddingTop: 4,
+    paddingBottom: "var(--ds-space-050, 4px)",
+    paddingLeft: "var(--ds-space-200, 16px)",
+    paddingTop: "var(--ds-space-050, 4px)",
     boxShadow: isFocused ? `inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};` : '',
     ':active': {
       backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${N30})`

package/dist/es2019/styles.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 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';
 const BORDER_WIDTH = 2;
@@ -9,7 +10,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       isDisabled
     }) => ({
       ...css,
-      fontFamily: fontFamily(),
+      fontFamily: `var(--ds-font-family-sans, ${fontFamily()})`,
       // react-select disables pointer events when isDisabled is true.
       // We override this and make the inner container turn it off instead.
       pointerEvents: 'all',
@@ -62,8 +63,8 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         backgroundColor,
         borderColor,
         borderStyle: 'solid',
-        borderRadius: '3px',
-        borderWidth: '2px',
+        borderRadius: "var(--ds-radius-100, 3px)",
+        borderWidth: "var(--ds-width-100, 2px)",
         boxShadow: 'none',
         minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
         padding: 0,
@@ -190,7 +191,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
     }) => ({
       ...css,
       color: isDisabled ? `var(--ds-text-disabled, ${N70})` : `var(--ds-text, ${N800})`,
-      lineHeight: `${gridSize() * 2}px` // 16px
+      lineHeight: "var(--ds-font-lineHeight-100, 16px)" // 16px
     }),
 
     menu: css => ({
@@ -200,14 +201,14 @@ export default function baseStyles(validationState, isCompact = false, appearanc
     }),
     menuList: css => ({
       ...css,
-      paddingTop: gridSize(),
-      paddingBottom: gridSize()
+      paddingTop: "var(--ds-space-100, 8px)",
+      paddingBottom: "var(--ds-space-100, 8px)"
     }),
     multiValue: (css, {
       isFocused
     }) => ({
       ...css,
-      borderRadius: '2px',
+      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%',
@@ -218,9 +219,9 @@ export default function baseStyles(validationState, isCompact = false, appearanc
     }),
     multiValueLabel: css => ({
       ...css,
-      padding: '2px',
+      padding: "var(--ds-space-025, 2px)",
       color: 'inherit',
-      paddingRight: '2px'
+      paddingRight: "var(--ds-space-025, 2px)"
     }),
     multiValueRemove: (css, {
       isFocused
@@ -228,8 +229,8 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       ...css,
       backgroundColor: isFocused ? `var(--ds-UNSAFE-transparent, ${R75})` : undefined,
       fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
-      paddingLeft: '2px',
-      paddingRight: '2px',
+      paddingLeft: "var(--ds-space-025, 2px)",
+      paddingRight: "var(--ds-space-025, 2px)",
       borderRadius: '0px 2px 2px 0px',
       // DSP-6470 we should style like Tag once we have the :has selector
       ':hover': {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.1.4",
+	"version": "16.1.6",
 	"sideEffects": 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 = "16.1.4";
+var packageVersion = "16.1.6";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

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

@@ -22,7 +22,6 @@ import { Component } from 'react';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
 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';
 var getPrimitiveStyles = function getPrimitiveStyles(props) {
   var cx = props.cx,
@@ -36,9 +35,9 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
     backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")") : 'transparent',
     color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
     display: 'flex ',
-    paddingBottom: 4,
-    paddingLeft: "".concat(gridSize() * 2, "px"),
-    paddingTop: 4,
+    paddingBottom: "var(--ds-space-050, 4px)",
+    paddingLeft: "var(--ds-space-200, 16px)",
+    paddingTop: "var(--ds-space-050, 4px)",
     boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(B400, ")"), ";") : '',
     ':active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")")

package/dist/esm/styles.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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; }
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 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';
 var BORDER_WIDTH = 2;
@@ -13,7 +14,7 @@ export default function baseStyles(validationState) {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
-        fontFamily: fontFamily(),
+        fontFamily: "var(--ds-font-family-sans, ".concat(fontFamily(), ")"),
         // react-select disables pointer events when isDisabled is true.
         // We override this and make the inner container turn it off instead.
         pointerEvents: 'all',
@@ -66,8 +67,8 @@ export default function baseStyles(validationState) {
         backgroundColor: backgroundColor,
         borderColor: borderColor,
         borderStyle: 'solid',
-        borderRadius: '3px',
-        borderWidth: '2px',
+        borderRadius: "var(--ds-radius-100, 3px)",
+        borderWidth: "var(--ds-width-100, 2px)",
         boxShadow: 'none',
         minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
         padding: 0,
@@ -192,7 +193,7 @@ export default function baseStyles(validationState) {
       var isDisabled = _ref6.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
         color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : "var(--ds-text, ".concat(N800, ")"),
-        lineHeight: "".concat(gridSize() * 2, "px") // 16px
+        lineHeight: "var(--ds-font-lineHeight-100, 16px)" // 16px
       });
     },
 
@@ -204,14 +205,14 @@ export default function baseStyles(validationState) {
     },
     menuList: function menuList(css) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        paddingTop: gridSize(),
-        paddingBottom: gridSize()
+        paddingTop: "var(--ds-space-100, 8px)",
+        paddingBottom: "var(--ds-space-100, 8px)"
       });
     },
     multiValue: function multiValue(css, _ref7) {
       var isFocused = _ref7.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        borderRadius: '2px',
+        borderRadius: "var(--ds-radius-050, 2px)",
         backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(N40, ")") : "var(--ds-background-neutral, ".concat(N40, ")"),
         boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',
@@ -223,9 +224,9 @@ export default function baseStyles(validationState) {
     },
     multiValueLabel: function multiValueLabel(css) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        padding: '2px',
+        padding: "var(--ds-space-025, 2px)",
         color: 'inherit',
-        paddingRight: '2px'
+        paddingRight: "var(--ds-space-025, 2px)"
       });
     },
     multiValueRemove: function multiValueRemove(css, _ref8) {
@@ -233,8 +234,8 @@ export default function baseStyles(validationState) {
       return _objectSpread(_objectSpread({}, css), {}, {
         backgroundColor: isFocused ? "var(--ds-UNSAFE-transparent, ".concat(R75, ")") : undefined,
         fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
-        paddingLeft: '2px',
-        paddingRight: '2px',
+        paddingLeft: "var(--ds-space-025, 2px)",
+        paddingRight: "var(--ds-space-025, 2px)",
         borderRadius: '0px 2px 2px 0px',
         // DSP-6470 we should style like Tag once we have the :has selector
         ':hover': {

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.1.4",
+  "version": "16.1.6",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,6 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -33,7 +32,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/spinner": "^15.3.0",
+    "@atlaskit/spinner": "^15.4.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/visually-hidden": "^1.1.0",
@@ -65,7 +64,7 @@
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.6.0",
+    "@atlaskit/tooltip": "^17.7.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/report.api.md

@@ -42,6 +42,7 @@ import { MenuListProps } from 'react-select';
 import { MenuProps as MenuProps_2 } from 'react-select';
 import { mergeStyles } from 'react-select';
 import { MultiValueProps } from 'react-select';
+import { MultiValueRemoveProps } from 'react-select';
 import { NoticeProps } from 'react-select';
 import { OnChangeValue } from 'react-select';
 import { OptionProps as OptionProps_2 } from 'react-select';
@@ -655,6 +656,8 @@ export type ModifierList =
 
 export { MultiValueProps };
 
+export { MultiValueRemoveProps };
+
 export { NoticeProps };
 
 // @public (undocumented)