@atlaskit/select 16.5.10 → 16.5.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 16.5.12
+
+### Patch Changes
+
+- [`872a49e0bd8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/872a49e0bd8) - Fixed color contrast for grouped text label in the Select component
+
+## 16.5.11
+
+### Patch Changes
+
+- [`479e6a92e33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/479e6a92e33) - Move css styles out to top-level scope for more consistency.
+
 ## 16.5.10
 
 ### Patch Changes

package/dist/cjs/CheckboxSelect.js

@@ -15,8 +15,8 @@ var _inputOptions = require("./components/input-options");
 var _excluded = ["components"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var CheckboxSelect = /*#__PURE__*/_react.default.memo(function (_ref) {
   var components = _ref.components,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -32,8 +32,8 @@ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _excluded = ["footer", "maxMenuWidth", "minMenuWidth", "target"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; } }
 /** Are we rendering on the client or server? */

package/dist/cjs/PopupSelect/components.js

@@ -19,7 +19,12 @@ var _excluded = ["innerRef", "innerProps"],
 // ==============================
 // Styled Components
 // ==============================
-
+var menuDialogStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-surface-overlay, white)",
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")"),
+  zIndex: _constants.layers.modal()
+});
 var MenuDialog = function MenuDialog(_ref) {
   var maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,
@@ -27,16 +32,14 @@ var MenuDialog = function MenuDialog(_ref) {
     id = _ref.id,
     style = _ref.style;
   return (0, _react.jsx)("div", {
-    // TODO: Make these use proper dynamic styling (DSP-12490)
+    css: [menuDialogStyles,
+    // There is not a limited amount of values for the widths, so they need
+    // to remain dynamic.
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css: {
-      backgroundColor: "var(--ds-surface-overlay, white)",
-      borderRadius: 4,
-      boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")"),
+    {
       maxWidth: maxWidth,
-      minWidth: minWidth,
-      zIndex: _constants.layers.modal()
-    },
+      minWidth: minWidth
+    }],
     style: style,
     id: id
   }, children);
@@ -46,31 +49,28 @@ var MenuDialog = function MenuDialog(_ref) {
 // Custom Components
 // ==============================
 exports.MenuDialog = MenuDialog;
+var dropdownStyles = (0, _react.css)({
+  marginRight: "var(--ds-space-025, 2px)",
+  textAlign: 'center',
+  width: 32
+});
 var DropdownIndicator = function DropdownIndicator() {
   return (0, _react.jsx)("div", {
-    // TODO: Make these use proper dynamic styling (DSP-12490)
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css: {
-      marginRight: "var(--ds-space-025, 2px)",
-      textAlign: 'center',
-      width: 32
-    }
+    css: dropdownStyles
   }, (0, _react.jsx)(_search.default, {
     label: "open"
   }));
 };
+var controlStyles = (0, _react.css)({
+  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)")
+});
 var Control = function Control(_ref2) {
   var innerRef = _ref2.innerRef,
     innerProps = _ref2.innerProps,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   return (0, _react.jsx)("div", {
-    ref: innerRef
-    // TODO: Make these use proper dynamic styling (DSP-12490)
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: {
-      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)")
-    }
+    ref: innerRef,
+    css: controlStyles
   }, (0, _react.jsx)(_reactSelect.components.Control, (0, _extends2.default)({}, props, {
     innerProps: innerProps
   })));

package/dist/cjs/RadioSelect.js

@@ -15,8 +15,8 @@ var _inputOptions = require("./components/input-options");
 var _excluded = ["components"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RadioSelect = /*#__PURE__*/_react.default.memo(function (_ref) {
   var components = _ref.components,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);

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

package/dist/cjs/components/indicators.js

@@ -12,8 +12,8 @@ var _reactSelect = require("react-select");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
+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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var iconContainerStyles = (0, _react.css)({
   all: 'unset',
   outline: 'revert',

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

@@ -27,8 +27,8 @@ var _excluded = ["isActive", "isDisabled", "isFocused", "isSelected"],
   _excluded4 = ["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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
+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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var getPrimitiveStyles = function getPrimitiveStyles(props) {
   var cx = props.cx,
     className = props.className,
@@ -36,7 +36,7 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
     isDisabled = props.isDisabled,
     isFocused = props.isFocused,
     isSelected = props.isSelected;
-  var styles = {
+  var baseStyles = {
     alignItems: 'center',
     backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")") : 'transparent',
     color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
@@ -44,7 +44,9 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
     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, ")"), ";") : '',
+    // This 'none' needs to be present to ensure that style is not applied when
+    // the option is selected but not focused.
+    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(_colors.B400, ")")) : 'none',
     ':active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")")
     },
@@ -52,7 +54,7 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
       borderLeft: isFocused ? '2px solid transparent' : ''
     }
   };
-  var augmentedStyles = _objectSpread(_objectSpread({}, getStyles('option', props)), styles);
+  var augmentedStyles = (0, _react.css)(_objectSpread(_objectSpread({}, getStyles('option', props)), baseStyles));
   var bemClasses = {
     option: true,
     'option--is-disabled': isDisabled,
@@ -173,6 +175,26 @@ var getBorderColor = function getBorderColor(_ref3) {
   }
   return "var(--ds-border-input, ".concat(_colors.N100, ")");
 };
+var baseIconStyles = (0, _react.css)({
+  alignItems: 'center',
+  display: 'flex ',
+  flexShrink: 0,
+  paddingRight: "var(--ds-space-050, 4px)",
+  // Here we are adding a border to the Checkbox and Radio SVG icons
+  // This is an a11y fix for Select only for now but it may be rolled
+  // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '& svg rect, & svg circle:first-of-type': {
+    strokeWidth: "var(--ds-border-width-outline, 2px)",
+    strokeLinejoin: 'round'
+  }
+});
+var baseOptionStyles = (0, _react.css)({
+  textOverflow: 'ellipsis',
+  overflowX: 'hidden',
+  flexGrow: 1,
+  whiteSpace: 'nowrap'
+});
 var ControlOption = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ControlOption, _Component);
   var _super = _createSuper(ControlOption);
@@ -227,47 +249,36 @@ var ControlOption = /*#__PURE__*/function (_Component) {
         styles = _getPrimitiveStyles2[0],
         classes = _getPrimitiveStyles2[1];
       return (
-        /**
-         * TODO Fix this type error
-         * @see https://product-fabric.atlassian.net/browse/DSP-6063
-         */
-        // @ts-ignore
-        // TODO: Make these use proper dynamic styling (DSP-12490)
+        // These need to remain this way because `react-select` passes props with
+        // styles inside, and that must be done dynamically.
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
         (0, _react.jsx)("div", (0, _extends2.default)({
           css: styles,
           className: classes,
           ref: innerRef
         }, props), (0, _react.jsx)("div", {
-          // TODO: Make these use proper dynamic styling (DSP-12490)
+          css: [baseIconStyles,
+          // Here we are adding a border to the Checkbox and Radio SVG icons
+          // This is an a11y fix for Select only for now but it may be rolled
+          // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-          css: {
-            alignItems: 'center',
-            display: 'flex ',
-            flexShrink: 0,
-            paddingRight: "var(--ds-space-050, 4px)",
-            // Here we are adding a border to the Checkbox and Radio SVG icons
-            // This is an a11y fix for Select only for now but it may be rolled
-            // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+          {
+            // This can eventually be changed to static styles that are
+            // applied conditionally (e.g. `isActive && activeBorderStyles`),
+            // but considering there are multiple instances of `react-select`
+            // requiring styles to be generated dynamically, it seemed like a
+            // low priority.
+            // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
             '& svg rect, & svg circle:first-of-type': {
-              stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state)),
-              strokeWidth: '2px',
-              strokeLinejoin: 'round'
+              stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state))
             }
-          }
+          }]
         }, !!Icon ? (0, _react.jsx)(Icon, {
           label: "",
           primaryColor: getPrimaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
           secondaryColor: getSecondaryColor(_objectSpread(_objectSpread({}, this.props), this.state))
         }) : null), (0, _react.jsx)("div", {
-          // TODO: Make these use proper dynamic styling (DSP-12490)
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-          css: {
-            textOverflow: 'ellipsis',
-            overflowX: 'hidden',
-            flexGrow: 1,
-            whiteSpace: 'nowrap'
-          }
+          css: baseOptionStyles
         }, children))
       );
     }

package/dist/cjs/createSelect.js

@@ -25,8 +25,8 @@ var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement"
 var _excluded = ["styles", "validationState", "isInvalid", "spacing", "isMulti", "appearance", "ariaLiveMessages"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 createSelect(WrappedComponent) {

package/dist/cjs/styles.js

@@ -9,8 +9,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _constants = require("@atlaskit/theme/constants");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var BORDER_WIDTH = 2;
 var ICON_PADDING = 2;
 var paddingExcludingBorder = (0, _constants.gridSize)() - BORDER_WIDTH;
@@ -95,7 +95,6 @@ function baseStyles(validationState) {
         ':hover': {
           '::-webkit-scrollbar-thumb': {
             // scrollbars occur only if the user passes in a custom component with overflow: scroll
-            // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
             backgroundColor: 'rgba(0,0,0,0.2)'
           },
           cursor: 'pointer',
@@ -103,7 +102,6 @@ function baseStyles(validationState) {
           borderColor: borderColorHover
         },
         '::-webkit-scrollbar-thumb:hover': {
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
           backgroundColor: 'rgba(0,0,0,0.4)'
         }
       });
@@ -275,6 +273,11 @@ function baseStyles(validationState) {
           fill: "var(--ds-text-danger, #000)"
         }
       });
+    },
+    groupHeading: function groupHeading(css) {
+      return _objectSpread(_objectSpread({}, css), {}, {
+        color: "var(--ds-text-subtle, ".concat(_colors.N200, ")")
+      });
     }
   };
 }

package/dist/es2019/PopupSelect/components.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
 import { components } from 'react-select';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { layers } from '@atlaskit/theme/constants';
@@ -11,6 +11,12 @@ import { N40A } from '@atlaskit/theme/colors';
 // ==============================
 // Styled Components
 // ==============================
+const menuDialogStyles = css({
+  backgroundColor: "var(--ds-surface-overlay, white)",
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N40A}, 0 4px 11px ${N40A}`})`,
+  zIndex: layers.modal()
+});
 export const MenuDialog = ({
   maxWidth,
   minWidth,
@@ -18,16 +24,14 @@ export const MenuDialog = ({
   id,
   style
 }) => jsx("div", {
-  // TODO: Make these use proper dynamic styling (DSP-12490)
+  css: [menuDialogStyles,
+  // There is not a limited amount of values for the widths, so they need
+  // to remain dynamic.
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-  css: {
-    backgroundColor: "var(--ds-surface-overlay, white)",
-    borderRadius: 4,
-    boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N40A}, 0 4px 11px ${N40A}`})`,
+  {
     maxWidth,
-    minWidth,
-    zIndex: layers.modal()
-  },
+    minWidth
+  }],
   style: style,
   id: id
 }, children);
@@ -36,29 +40,26 @@ export const MenuDialog = ({
 // Custom Components
 // ==============================
 
+const dropdownStyles = css({
+  marginRight: "var(--ds-space-025, 2px)",
+  textAlign: 'center',
+  width: 32
+});
 const DropdownIndicator = () => jsx("div", {
-  // TODO: Make these use proper dynamic styling (DSP-12490)
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-  css: {
-    marginRight: "var(--ds-space-025, 2px)",
-    textAlign: 'center',
-    width: 32
-  }
+  css: dropdownStyles
 }, jsx(SearchIcon, {
   label: "open"
 }));
+const controlStyles = css({
+  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-050, 4px)"}`
+});
 const Control = ({
   innerRef,
   innerProps,
   ...props
 }) => jsx("div", {
-  ref: innerRef
-  // TODO: Make these use proper dynamic styling (DSP-12490)
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-  ,
-  css: {
-    padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-050, 4px)"}`
-  }
+  ref: innerRef,
+  css: controlStyles
 }, jsx(components.Control, _extends({}, props, {
   innerProps: 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.5.10";
+const packageVersion = "16.5.12";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
@@ -16,7 +16,7 @@ const getPrimitiveStyles = props => {
     isFocused,
     isSelected
   } = props;
-  const styles = {
+  const baseStyles = {
     alignItems: 'center',
     backgroundColor: isFocused ? `var(--ds-background-neutral-subtle-hovered, ${N20})` : 'transparent',
     color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
@@ -24,7 +24,9 @@ const getPrimitiveStyles = props => {
     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})`};` : '',
+    // This 'none' needs to be present to ensure that style is not applied when
+    // the option is selected but not focused.
+    boxShadow: isFocused ? `inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`}` : 'none',
     ':active': {
       backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${N30})`
     },
@@ -32,10 +34,10 @@ const getPrimitiveStyles = props => {
       borderLeft: isFocused ? '2px solid transparent' : ''
     }
   };
-  const augmentedStyles = {
+  const augmentedStyles = css({
     ...getStyles('option', props),
-    ...styles
-  };
+    ...baseStyles
+  });
   const bemClasses = {
     option: true,
     'option--is-disabled': isDisabled,
@@ -159,6 +161,26 @@ const getBorderColor = ({
   }
   return `var(--ds-border-input, ${N100})`;
 };
+const baseIconStyles = css({
+  alignItems: 'center',
+  display: 'flex ',
+  flexShrink: 0,
+  paddingRight: "var(--ds-space-050, 4px)",
+  // Here we are adding a border to the Checkbox and Radio SVG icons
+  // This is an a11y fix for Select only for now but it may be rolled
+  // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '& svg rect, & svg circle:first-of-type': {
+    strokeWidth: "var(--ds-border-width-outline, 2px)",
+    strokeLinejoin: 'round'
+  }
+});
+const baseOptionStyles = css({
+  textOverflow: 'ellipsis',
+  overflowX: 'hidden',
+  flexGrow: 1,
+  whiteSpace: 'nowrap'
+});
 class ControlOption extends Component {
   constructor(...args) {
     super(...args);
@@ -197,37 +219,33 @@ class ControlOption extends Component {
       ...rest
     });
     return (
-      /**
-       * TODO Fix this type error
-       * @see https://product-fabric.atlassian.net/browse/DSP-6063
-       */
-      // @ts-ignore
-      // TODO: Make these use proper dynamic styling (DSP-12490)
+      // These need to remain this way because `react-select` passes props with
+      // styles inside, and that must be done dynamically.
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       jsx("div", _extends({
         css: styles,
         className: classes,
         ref: innerRef
       }, props), jsx("div", {
-        // TODO: Make these use proper dynamic styling (DSP-12490)
+        css: [baseIconStyles,
+        // Here we are adding a border to the Checkbox and Radio SVG icons
+        // This is an a11y fix for Select only for now but it may be rolled
+        // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-        css: {
-          alignItems: 'center',
-          display: 'flex ',
-          flexShrink: 0,
-          paddingRight: "var(--ds-space-050, 4px)",
-          // Here we are adding a border to the Checkbox and Radio SVG icons
-          // This is an a11y fix for Select only for now but it may be rolled
-          // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+        {
+          // This can eventually be changed to static styles that are
+          // applied conditionally (e.g. `isActive && activeBorderStyles`),
+          // but considering there are multiple instances of `react-select`
+          // requiring styles to be generated dynamically, it seemed like a
+          // low priority.
+          // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
           '& svg rect, & svg circle:first-of-type': {
             stroke: getBorderColor({
               ...this.props,
               ...this.state
-            }),
-            strokeWidth: '2px',
-            strokeLinejoin: 'round'
+            })
           }
-        }
+        }]
       }, !!Icon ? jsx(Icon, {
         label: "",
         primaryColor: getPrimaryColor({
@@ -239,14 +257,7 @@ class ControlOption extends Component {
           ...this.state
         })
       }) : null), jsx("div", {
-        // TODO: Make these use proper dynamic styling (DSP-12490)
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-        css: {
-          textOverflow: 'ellipsis',
-          overflowX: 'hidden',
-          flexGrow: 1,
-          whiteSpace: 'nowrap'
-        }
+        css: baseOptionStyles
       }, children))
     );
   }

package/dist/es2019/styles.js

@@ -86,7 +86,6 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         ':hover': {
           '::-webkit-scrollbar-thumb': {
             // scrollbars occur only if the user passes in a custom component with overflow: scroll
-            // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
             backgroundColor: 'rgba(0,0,0,0.2)'
           },
           cursor: 'pointer',
@@ -94,7 +93,6 @@ export default function baseStyles(validationState, isCompact = false, appearanc
           borderColor: borderColorHover
         },
         '::-webkit-scrollbar-thumb:hover': {
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
           backgroundColor: 'rgba(0,0,0,0.4)'
         }
       };
@@ -266,6 +264,10 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         backgroundColor: `var(--ds-background-danger-pressed, ${R75})`,
         fill: "var(--ds-text-danger, #000)"
       }
+    }),
+    groupHeading: css => ({
+      ...css,
+      color: `var(--ds-text-subtle, ${N200})`
     })
   };
 }