@atlaskit/select 15.5.0 → 15.6.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/select
 
+## 15.6.2
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 15.6.1
+
+### Patch Changes
+
+- [`d9f112c7b09`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d9f112c7b09) - Reverts change to multiSelect's remove behaviour when using tokens, fixing issue with a pointer-events: none style
+
+## 15.6.0
+
+### Minor Changes
+
+- [`68cc8008851`](https://bitbucket.org/atlassian/atlassian-frontend/commits/68cc8008851) - [ux] Introduces appearance prop to component, with 'default', 'subtle' and 'none' variants
+
 ## 15.5.0
 
 ### Minor Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -121,7 +121,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowClick", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowKeydown", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState, _this.props.spacing === 'compact'), {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState, _this.props.spacing === 'compact', 'default'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
           color: "var(--ds-text-subtlest, ".concat(_colors.N80, ")")

package/dist/cjs/Select.js

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

package/dist/cjs/createSelect.js

@@ -41,7 +41,7 @@ var defaultComponents = _interopRequireWildcard(require("./components"));
 
 var _styles = _interopRequireDefault(require("./styles"));
 
-var _excluded = ["styles", "validationState", "spacing", "isMulti"];
+var _excluded = ["styles", "validationState", "spacing", "isMulti", "appearance"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -119,6 +119,7 @@ function createSelect(WrappedComponent) {
             validationState = _this$props.validationState,
             spacing = _this$props.spacing,
             isMulti = _this$props.isMulti,
+            appearance = _this$props.appearance,
             props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
         var isCompact = spacing === 'compact'; // props must be spread first to stop `components` being overridden
 
@@ -128,7 +129,7 @@ function createSelect(WrappedComponent) {
           "aria-live": "assertive"
         }, props, {
           components: this.components,
-          styles: (0, _reactSelect.mergeStyles)((0, _styles.default)(validationState, isCompact), styles)
+          styles: (0, _reactSelect.mergeStyles)((0, _styles.default)(validationState, isCompact, this.props.appearance || 'default'), styles)
         }));
       }
     }]);

package/dist/cjs/styles.js

@@ -21,7 +21,7 @@ var BORDER_WIDTH = 2;
 var ICON_PADDING = 2;
 var paddingExcludingBorder = (0, _constants.gridSize)() - BORDER_WIDTH;
 
-function baseStyles(validationState, isCompact) {
+function baseStyles(validationState, isCompact, appearance) {
   return {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
@@ -69,6 +69,20 @@ function baseStyles(validationState, isCompact) {
       }
 
       var transitionDuration = '200ms';
+
+      if (appearance === 'subtle') {
+        borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : 'transparent';
+        backgroundColor = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : 'transparent';
+        backgroundColorHover = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : "var(--ds-surface, ".concat(_colors.N30, ")");
+      }
+
+      if (appearance === 'none') {
+        borderColor = 'transparent';
+        backgroundColor = 'transparent';
+        backgroundColorHover = 'transparent';
+        borderColorHover = 'transparent';
+      }
+
       return _objectSpread(_objectSpread({}, css), {}, {
         // Turn pointer events off when disabled - this makes it so hover etc don't work.
         pointerEvents: isDisabled ? 'none' : undefined,
@@ -234,16 +248,7 @@ function baseStyles(validationState, isCompact) {
         '@media screen and (-ms-high-contrast: active)': {
           border: isFocused ? '1px solid transparent' : 'none'
         },
-        pointerEvents: 'none',
-        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
-        ':hover': {
-          backgroundColor: "var(--ds-background-danger-hovered, ".concat(_colors.N40, ")"),
-          color: "var(--ds-text-danger, inherit)"
-        },
-        ':active': {
-          backgroundColor: "var(--ds-background-danger-pressed, ".concat(_colors.N40, ")"),
-          color: "var(--ds-text-danger, inherit)"
-        }
+        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
       });
     },
     multiValueLabel: function multiValueLabel(css, _ref8) {
@@ -257,18 +262,18 @@ function baseStyles(validationState, isCompact) {
     multiValueRemove: function multiValueRemove(css, _ref9) {
       var isFocused = _ref9.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        pointerEvents: 'auto',
         backgroundColor: isFocused && "var(--ds-UNSAFE_util-transparent, ".concat(_colors.R75, ")"),
         fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
         paddingLeft: '2px',
         paddingRight: '2px',
         borderRadius: '0px 2px 2px 0px',
+        // DSP-6470 we should style like Tag once we have the :has selector
         ':hover': {
-          backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.R75, ")"),
+          backgroundColor: "var(--ds-background-danger-hovered, ".concat(_colors.R75, ")"),
           fill: "var(--ds-text-danger, #000)"
         },
         ':active': {
-          backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.R75, ")"),
+          backgroundColor: "var(--ds-background-danger-pressed, ".concat(_colors.R75, ")"),
           fill: "var(--ds-text-danger, #000)"
         }
       });

package/dist/cjs/version.json

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

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -59,7 +59,7 @@ export default class PopupSelect extends PureComponent {
 
     _defineProperty(this, "unbindWindowKeydown", null);
 
-    _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState, this.props.spacing === 'compact'), {
+    _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState, this.props.spacing === 'compact', 'default'), {
       groupHeading: provided => ({ ...provided,
         color: `var(--ds-text-subtlest, ${N80})`
       })

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

package/dist/es2019/createSelect.js

@@ -64,6 +64,7 @@ export default function createSelect(WrappedComponent) {
         validationState,
         spacing,
         isMulti,
+        appearance,
         ...props
       } = this.props;
       const isCompact = spacing === 'compact'; // props must be spread first to stop `components` being overridden
@@ -74,7 +75,7 @@ export default function createSelect(WrappedComponent) {
         "aria-live": "assertive"
       }, props, {
         components: this.components,
-        styles: mergeStyles(baseStyles(validationState, isCompact), styles)
+        styles: mergeStyles(baseStyles(validationState, isCompact, this.props.appearance || 'default'), styles)
       }));
     }
 

package/dist/es2019/styles.js

@@ -3,7 +3,7 @@ import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800,
 const BORDER_WIDTH = 2;
 const ICON_PADDING = 2;
 const paddingExcludingBorder = gridSize() - BORDER_WIDTH;
-export default function baseStyles(validationState, isCompact) {
+export default function baseStyles(validationState, isCompact, appearance) {
   return {
     container: (css, {
       isDisabled
@@ -49,6 +49,20 @@ export default function baseStyles(validationState, isCompact) {
       }
 
       const transitionDuration = '200ms';
+
+      if (appearance === 'subtle') {
+        borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : 'transparent';
+        backgroundColor = isFocused ? `var(--ds-surface, ${N0})` : 'transparent';
+        backgroundColorHover = isFocused ? `var(--ds-surface, ${N0})` : `var(--ds-surface, ${N30})`;
+      }
+
+      if (appearance === 'none') {
+        borderColor = 'transparent';
+        backgroundColor = 'transparent';
+        backgroundColorHover = 'transparent';
+        borderColorHover = 'transparent';
+      }
+
       return { ...css,
         // Turn pointer events off when disabled - this makes it so hover etc don't work.
         pointerEvents: isDisabled ? 'none' : undefined,
@@ -203,16 +217,7 @@ export default function baseStyles(validationState, isCompact) {
       '@media screen and (-ms-high-contrast: active)': {
         border: isFocused ? '1px solid transparent' : 'none'
       },
-      pointerEvents: 'none',
-      color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
-      ':hover': {
-        backgroundColor: `var(--ds-background-danger-hovered, ${N40})`,
-        color: "var(--ds-text-danger, inherit)"
-      },
-      ':active': {
-        backgroundColor: `var(--ds-background-danger-pressed, ${N40})`,
-        color: "var(--ds-text-danger, inherit)"
-      }
+      color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
     }),
     multiValueLabel: (css, {
       isFocused
@@ -225,18 +230,18 @@ export default function baseStyles(validationState, isCompact) {
       // @ts-ignore: missing in @types/react-select
       isFocused
     }) => ({ ...css,
-      pointerEvents: 'auto',
       backgroundColor: isFocused && `var(--ds-UNSAFE_util-transparent, ${R75})`,
       fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
       paddingLeft: '2px',
       paddingRight: '2px',
       borderRadius: '0px 2px 2px 0px',
+      // DSP-6470 we should style like Tag once we have the :has selector
       ':hover': {
-        backgroundColor: `var(--ds-UNSAFE_util-transparent, ${R75})`,
+        backgroundColor: `var(--ds-background-danger-hovered, ${R75})`,
         fill: "var(--ds-text-danger, #000)"
       },
       ':active': {
-        backgroundColor: `var(--ds-UNSAFE_util-transparent, ${R75})`,
+        backgroundColor: `var(--ds-background-danger-pressed, ${R75})`,
         fill: "var(--ds-text-danger, #000)"
       }
     })

package/dist/es2019/version.json

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

package/dist/esm/PopupSelect/PopupSelect.js

@@ -92,7 +92,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "unbindWindowKeydown", null);
 
-    _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState, _this.props.spacing === 'compact'), {
+    _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState, _this.props.spacing === 'compact', 'default'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
           color: "var(--ds-text-subtlest, ".concat(N80, ")")

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

package/dist/esm/createSelect.js

@@ -8,7 +8,7 @@ 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"];
+var _excluded = ["styles", "validationState", "spacing", "isMulti", "appearance"];
 
 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; }
 
@@ -94,6 +94,7 @@ export default function createSelect(WrappedComponent) {
             validationState = _this$props.validationState,
             spacing = _this$props.spacing,
             isMulti = _this$props.isMulti,
+            appearance = _this$props.appearance,
             props = _objectWithoutProperties(_this$props, _excluded);
 
         var isCompact = spacing === 'compact'; // props must be spread first to stop `components` being overridden
@@ -104,7 +105,7 @@ export default function createSelect(WrappedComponent) {
           "aria-live": "assertive"
         }, props, {
           components: this.components,
-          styles: mergeStyles(baseStyles(validationState, isCompact), styles)
+          styles: mergeStyles(baseStyles(validationState, isCompact, this.props.appearance || 'default'), styles)
         }));
       }
     }]);

package/dist/esm/styles.js

@@ -9,7 +9,7 @@ import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800,
 var BORDER_WIDTH = 2;
 var ICON_PADDING = 2;
 var paddingExcludingBorder = gridSize() - BORDER_WIDTH;
-export default function baseStyles(validationState, isCompact) {
+export default function baseStyles(validationState, isCompact, appearance) {
   return {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
@@ -57,6 +57,20 @@ export default function baseStyles(validationState, isCompact) {
       }
 
       var transitionDuration = '200ms';
+
+      if (appearance === 'subtle') {
+        borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : 'transparent';
+        backgroundColor = isFocused ? "var(--ds-surface, ".concat(N0, ")") : 'transparent';
+        backgroundColorHover = isFocused ? "var(--ds-surface, ".concat(N0, ")") : "var(--ds-surface, ".concat(N30, ")");
+      }
+
+      if (appearance === 'none') {
+        borderColor = 'transparent';
+        backgroundColor = 'transparent';
+        backgroundColorHover = 'transparent';
+        borderColorHover = 'transparent';
+      }
+
       return _objectSpread(_objectSpread({}, css), {}, {
         // Turn pointer events off when disabled - this makes it so hover etc don't work.
         pointerEvents: isDisabled ? 'none' : undefined,
@@ -222,16 +236,7 @@ export default function baseStyles(validationState, isCompact) {
         '@media screen and (-ms-high-contrast: active)': {
           border: isFocused ? '1px solid transparent' : 'none'
         },
-        pointerEvents: 'none',
-        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
-        ':hover': {
-          backgroundColor: "var(--ds-background-danger-hovered, ".concat(N40, ")"),
-          color: "var(--ds-text-danger, inherit)"
-        },
-        ':active': {
-          backgroundColor: "var(--ds-background-danger-pressed, ".concat(N40, ")"),
-          color: "var(--ds-text-danger, inherit)"
-        }
+        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
       });
     },
     multiValueLabel: function multiValueLabel(css, _ref8) {
@@ -245,18 +250,18 @@ export default function baseStyles(validationState, isCompact) {
     multiValueRemove: function multiValueRemove(css, _ref9) {
       var isFocused = _ref9.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        pointerEvents: 'auto',
         backgroundColor: isFocused && "var(--ds-UNSAFE_util-transparent, ".concat(R75, ")"),
         fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
         paddingLeft: '2px',
         paddingRight: '2px',
         borderRadius: '0px 2px 2px 0px',
+        // DSP-6470 we should style like Tag once we have the :has selector
         ':hover': {
-          backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(R75, ")"),
+          backgroundColor: "var(--ds-background-danger-hovered, ".concat(R75, ")"),
           fill: "var(--ds-text-danger, #000)"
         },
         ':active': {
-          backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(R75, ")"),
+          backgroundColor: "var(--ds-background-danger-pressed, ".concat(R75, ")"),
           fill: "var(--ds-text-danger, #000)"
         }
       });

package/dist/esm/version.json

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

package/dist/types/styles.d.ts

@@ -1,2 +1,2 @@
 import { StylesConfig, ValidationState } from './types';
-export default function baseStyles<Option, IsMulti extends boolean>(validationState: ValidationState, isCompact: boolean): StylesConfig<Option, IsMulti>;
+export default function baseStyles<Option, IsMulti extends boolean>(validationState: ValidationState, isCompact: boolean, appearance: 'default' | 'subtle' | 'none'): StylesConfig<Option, IsMulti>;

package/dist/types/types.d.ts

@@ -25,6 +25,7 @@ export interface OptionProps<Option = OptionType, IsMulti extends boolean = fals
 export interface SelectProps<OptionType, IsMulti extends boolean = false> extends ReactSelectProps<OptionType, IsMulti>, WithAnalyticsEventsProps {
     spacing?: 'compact' | 'default';
     validationState?: ValidationState;
+    appearance?: 'default' | 'subtle' | 'none';
 }
 export declare type ActionMeta<Option = OptionType> = RSActionMeta<Option>;
 export declare type InputActionMeta = RSInputActionMeta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "15.5.0",
+  "version": "15.6.2",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -71,7 +71,7 @@
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "react-value": "^0.2.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {