@atlaskit/user-picker 8.8.6 → 9.0.2

package/dist/cjs/components/ExternalUserOption/main.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ImageContainer = exports.ExternalUserOption = exports.EmailDomainWrapper = void 0;
+exports.imageContainer = exports.emailDomainWrapper = exports.ExternalUserOption = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -23,11 +23,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -35,6 +33,10 @@ var _tokens = require("@atlaskit/tokens");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _analytics = require("../../analytics");
+
 var _AvatarItemOption = require("../AvatarItemOption");
 
 var _SizeableAvatar = require("../SizeableAvatar");
@@ -47,40 +49,44 @@ var _ExternalAvatarItemOption = require("./ExternalAvatarItemOption");
 
 var _SourcesTooltipContent = require("./SourcesTooltipContent");
 
-var _templateObject, _templateObject2;
-
 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; } }
 
-var ImageContainer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 16px;\n  width: 16px;\n  padding-right: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-
-exports.ImageContainer = ImageContainer;
-
-var EmailDomainWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: bold;\n"])));
-
-exports.EmailDomainWrapper = EmailDomainWrapper;
+var imageContainer = (0, _core.css)({
+  height: '16px',
+  width: '16px',
+  paddingRight: '4px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+exports.imageContainer = imageContainer;
+var emailDomainWrapper = (0, _core.css)({
+  fontWeight: 'bold'
+});
+exports.emailDomainWrapper = emailDomainWrapper;
 
-var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(ExternalUserOption, _React$PureComponent);
+var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(ExternalUserOptionImpl, _React$PureComponent);
 
-  var _super = _createSuper(ExternalUserOption);
+  var _super = _createSuper(ExternalUserOptionImpl);
 
-  function ExternalUserOption() {
+  function ExternalUserOptionImpl() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, ExternalUserOption);
+    (0, _classCallCheck2.default)(this, ExternalUserOptionImpl);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+      _args[_key] = arguments[_key];
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call.apply(_super, [this].concat(_args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPrimaryText", function () {
       var name = _this.props.user.name;
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
+      return (0, _core.jsx)("span", {
         key: "name",
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
+        css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800))
       }, name);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function () {
@@ -96,9 +102,11 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
           emailDomain = _email$split2[1];
 
       var emailDomainWithAt = "@".concat(emailDomain);
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
-      }, emailUser, /*#__PURE__*/_react.default.createElement(EmailDomainWrapper, null, emailDomainWithAt));
+      return (0, _core.jsx)("span", {
+        css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200))
+      }, emailUser, (0, _core.jsx)("span", {
+        css: emailDomainWrapper
+      }, emailDomainWithAt));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {
       var _this$props = _this.props,
@@ -106,26 +114,43 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
           avatarUrl = _this$props$user.avatarUrl,
           name = _this$props$user.name,
           status = _this$props.status;
-      return /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
+      return (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         presence: status,
         name: name
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireEvent", function (eventCreator) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+
+      if (createAnalyticsEvent) {
+        (0, _analytics.createAndFireEventInElementsChannel)(eventCreator.apply(void 0, args))(createAnalyticsEvent);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onShow", function () {
+      var user = _this.props.user;
+
+      _this.fireEvent(_analytics.userInfoEvent, user.sources, user.id);
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSourcesInfoTooltip", function () {
-      return _this.props.user.isExternal ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      return _this.props.user.isExternal ? (0, _core.jsx)(_tooltip.default, {
         content: _this.formattedTooltipContent(),
-        position: 'right-start'
-      }, /*#__PURE__*/_react.default.createElement(_InfoIcon.default, null)) : undefined;
+        position: 'right-start',
+        onShow: _this.onShow
+      }, (0, _core.jsx)(_InfoIcon.default, null)) : undefined;
     });
     return _this;
   }
 
-  (0, _createClass2.default)(ExternalUserOption, [{
+  (0, _createClass2.default)(ExternalUserOptionImpl, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_ExternalAvatarItemOption.ExternalAvatarItemOption, {
+      return (0, _core.jsx)(_ExternalAvatarItemOption.ExternalAvatarItemOption, {
         avatar: this.renderAvatar(),
         primaryText: this.getPrimaryText(),
         secondaryText: this.renderSecondaryText(),
@@ -139,16 +164,17 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
           id = _this$props$user2.id,
           requiresSourceHydration = _this$props$user2.requiresSourceHydration,
           sources = _this$props$user2.sources;
-      return /*#__PURE__*/_react.default.createElement(_ExternalUserSourcesContainer.ExternalUserSourcesContainer, {
+      return (0, _core.jsx)(_ExternalUserSourcesContainer.ExternalUserSourcesContainer, {
         accountId: id,
         shouldFetchSources: Boolean(requiresSourceHydration),
         initialSources: sources
       }, function (sourceData) {
-        return /*#__PURE__*/_react.default.createElement(_SourcesTooltipContent.SourcesTooltipContent, sourceData);
+        return (0, _core.jsx)(_SourcesTooltipContent.SourcesTooltipContent, sourceData);
       });
     }
   }]);
-  return ExternalUserOption;
+  return ExternalUserOptionImpl;
 }(_react.default.PureComponent);
 
+var ExternalUserOption = (0, _analyticsNext.withAnalyticsEvents)()(ExternalUserOptionImpl);
 exports.ExternalUserOption = ExternalUserOption;

package/dist/cjs/components/GroupOption/main.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GroupOptionIconWrapper = exports.GroupOption = void 0;
+exports.groupOptionIconWrapper = exports.GroupOption = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -21,13 +21,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -35,21 +33,25 @@ var _tokens = require("@atlaskit/tokens");
 
 var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
 
-var _AvatarItemOption = require(".././AvatarItemOption");
+var _AvatarItemOption = require("../AvatarItemOption");
 
 var _i18n = require(".././i18n");
 
-var _HighlightText = require(".././HighlightText");
-
-var _templateObject;
+var _HighlightText = require("../HighlightText");
 
 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; } }
 
-var GroupOptionIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 2px;\n\n  > span {\n    background-color: ", ";\n    border-radius: 50%;\n    padding: 4px;\n  }\n"])), (0, _tokens.token)('color.background.neutral', _colors.N20));
-
-exports.GroupOptionIconWrapper = GroupOptionIconWrapper;
+var groupOptionIconWrapper = (0, _core.css)({
+  padding: '2px',
+  '> span': {
+    backgroundColor: (0, _tokens.token)('color.background.neutral', _colors.N20),
+    borderRadius: '50%',
+    padding: '4px'
+  }
+});
+exports.groupOptionIconWrapper = groupOptionIconWrapper;
 
 var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(GroupOption, _React$PureComponent);
@@ -72,24 +74,26 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
           _this$props$group = _this$props.group,
           name = _this$props$group.name,
           highlight = _this$props$group.highlight;
-      return [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
+      return [(0, _core.jsx)("span", {
         key: "name",
-        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
-      }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
+        css: (0, _AvatarItemOption.textWrapper)(isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800))
+      }, (0, _core.jsx)(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {
-      return /*#__PURE__*/_react.default.createElement(GroupOptionIconWrapper, null, /*#__PURE__*/_react.default.createElement(_people.default, {
+      return (0, _core.jsx)("span", {
+        css: groupOptionIconWrapper
+      }, (0, _core.jsx)(_people.default, {
         label: "group-icon",
         size: "medium"
       }));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {
       var isSelected = _this.props.isSelected;
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
+      return (0, _core.jsx)("span", {
+        css: (0, _AvatarItemOption.textWrapper)(isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200))
+      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLozengeProps", function () {
       return typeof _this.props.group.lozenge === 'string' ? {
@@ -102,7 +106,7 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _createClass2.default)(GroupOption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.AvatarItemOption, {
+      return (0, _core.jsx)(_AvatarItemOption.AvatarItemOption, {
         avatar: this.renderAvatar(),
         secondaryText: this.renderByline(),
         primaryText: this.getPrimaryText(),

package/dist/cjs/components/MultiValue.js

@@ -25,15 +25,13 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
 var _select = require("@atlaskit/select");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _AddOptionAvatar = require("./AddOptionAvatar");
 
@@ -47,8 +45,6 @@ var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
 
 var _excluded = ["children", "innerProps"];
 
-var _templateObject, _templateObject2;
-
 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; } }
@@ -71,10 +67,12 @@ var scrollToValue = function scrollToValue(valueContainer, control) {
 };
 
 exports.scrollToValue = scrollToValue;
-
-var GroupTagContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 2px;\n"])));
-
-var NameWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 5px;\n"])));
+var groupTagContainer = (0, _core.css)({
+  paddingLeft: '2px'
+});
+var nameWrapper = (0, _core.css)({
+  paddingLeft: '5px'
+});
 
 var MultiValue = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(MultiValue, _React$Component);
@@ -94,11 +92,11 @@ var MultiValue = /*#__PURE__*/function (_React$Component) {
           selectProps = _this$props.selectProps;
 
       if ((0, _utils.isEmail)(data)) {
-        return selectProps.emailLabel ? /*#__PURE__*/_react.default.createElement(_AddOptionAvatar.AddOptionAvatar, {
+        return selectProps.emailLabel ? (0, _core.jsx)(_AddOptionAvatar.AddOptionAvatar, {
           isLozenge: true,
           label: selectProps.emailLabel
-        }) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addEmail, function (label) {
-          return /*#__PURE__*/_react.default.createElement(_AddOptionAvatar.AddOptionAvatar, {
+        }) : (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addEmail, function (label) {
+          return (0, _core.jsx)(_AddOptionAvatar.AddOptionAvatar, {
             isLozenge: true,
             label: label
           });
@@ -106,13 +104,15 @@ var MultiValue = /*#__PURE__*/function (_React$Component) {
       }
 
       if ((0, _utils.isGroup)(data)) {
-        return /*#__PURE__*/_react.default.createElement(GroupTagContainer, null, /*#__PURE__*/_react.default.createElement(_people.default, {
+        return (0, _core.jsx)("div", {
+          css: groupTagContainer
+        }, (0, _core.jsx)(_people.default, {
           label: "group-icon",
           size: "small"
         }));
       }
 
-      return /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
+      return (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "multi",
         src: (0, _utils.getAvatarUrl)(data),
         name: label
@@ -156,12 +156,14 @@ var MultiValue = /*#__PURE__*/function (_React$Component) {
           children = _this$props3.children,
           innerProps = _this$props3.innerProps,
           rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_select.components.MultiValue, (0, _extends2.default)({}, rest, {
+      return (0, _core.jsx)(_select.components.MultiValue, (0, _extends2.default)({}, rest, {
         innerProps: {
           ref: this.containerRef
         },
         cropWithEllipsis: false
-      }), this.getElemBefore(), " ", /*#__PURE__*/_react.default.createElement(NameWrapper, null, children));
+      }), this.getElemBefore(), " ", (0, _core.jsx)("div", {
+        css: nameWrapper
+      }, children));
     }
   }]);
   return MultiValue;

package/dist/cjs/components/PopupControl.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,8 +17,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _components = require("@atlaskit/theme/components");
@@ -31,16 +27,10 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _select = require("@atlaskit/select");
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _templateObject, _templateObject2, _templateObject3;
-
-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 _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; } }
@@ -50,26 +40,31 @@ var fontSize = 12;
 var innerHeight = spacing * 2; // 16px
 
 var lineHeight = innerHeight / fontSize;
-
-var ControlWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0px ", "px ", "px;\n"])), spacing, spacing);
-
+var controlWrapper = (0, _core.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: "0px ".concat(spacing, "px ").concat(spacing, "px")
+});
 var getColor = (0, _components.themed)({
   light: (0, _tokens.token)('color.text.subtlest', _colors.N200),
   dark: (0, _tokens.token)('color.text.subtlest', _colors.DN90)
 });
 
-var getPadding = function getPadding() {
+var getLabelStyle = function getLabelStyle() {
   var right = 0;
   var bottom = spacing / 2;
   var left = 0;
   var top = spacing * 2.5;
-  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px ", "px ", "px ", "px;\n  "])), top, right, bottom, left);
+  var color = getColor();
+  return (0, _core.css)({
+    color: color,
+    fontSize: "".concat(fontSize, "px"),
+    fontWeight: 600,
+    lineHeight: "".concat(lineHeight),
+    padding: "".concat(top, "px ").concat(right, "px ").concat(bottom, "px ").concat(left, "px")
+  });
 };
 
-var Label = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  line-height: ", ";\n  ", "\n"])), function (props) {
-  return getColor(props);
-}, fontSize, lineHeight, getPadding);
-
 var PopupControl = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(PopupControl, _React$PureComponent);
 
@@ -84,7 +79,11 @@ var PopupControl = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var popupTitle = this.props.selectProps.popupTitle;
-      return /*#__PURE__*/_react.default.createElement(ControlWrapper, null, /*#__PURE__*/_react.default.createElement(Label, null, popupTitle), /*#__PURE__*/_react.default.createElement(_select.components.Control, this.props));
+      return (0, _core.jsx)("div", {
+        css: controlWrapper
+      }, (0, _core.jsx)("div", {
+        css: getLabelStyle()
+      }, popupTitle), (0, _core.jsx)(_select.components.Control, this.props));
     }
   }]);
   return PopupControl;

package/dist/cjs/components/SingleValue.js

@@ -7,25 +7,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SingleValue = void 0;
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _avatar = require("@atlaskit/avatar");
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _SizeableAvatar = require("./SizeableAvatar");
 
 var _utils = require("./utils");
 
 var _excluded = ["ref"];
+var avatarItemComponent = (0, _core.css)({
+  border: 'none !important',
+  padding: '0 !important',
+  width: 'auto',
+  overflow: 'hidden',
 
-var _templateObject;
-
-var AvatarItemComponent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: none !important;\n  padding: 0 !important;\n  width: auto;\n  overflow: hidden;\n  /* IE 11 needs this prop explicitly to flex items */\n  flex: 1 1 auto;\n  min-width: 100px;\n\n  & > span {\n    box-sizing: border-box;\n  }\n\n  &:hover {\n    width: auto;\n    padding: 0;\n    border: none;\n  }\n"])));
+  /* IE 11 needs this prop explicitly to flex items */
+  flex: '1 1 auto',
+  minWidth: '100px',
+  '& > span': {
+    boxSizing: 'border-box'
+  },
+  '&:hover': {
+    width: 'auto',
+    padding: 0,
+    border: 'none'
+  }
+});
 
 var SingleValue = function SingleValue(props) {
   var _props$data = props.data,
@@ -34,9 +46,9 @@ var SingleValue = function SingleValue(props) {
       _props$selectProps = props.selectProps,
       appearance = _props$selectProps.appearance,
       isFocused = _props$selectProps.isFocused;
-  return !isFocused ? /*#__PURE__*/_react.default.createElement(_avatar.AvatarItem, {
+  return !isFocused ? (0, _core.jsx)(_avatar.AvatarItem, {
     backgroundColor: "transparent",
-    avatar: /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
+    avatar: (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
       src: (0, _utils.getAvatarUrl)(data),
       appearance: appearance,
       name: label
@@ -45,7 +57,9 @@ var SingleValue = function SingleValue(props) {
   }, function (_ref) {
     var ref = _ref.ref,
         props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-    return /*#__PURE__*/_react.default.createElement(AvatarItemComponent, props);
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      css: avatarItemComponent
+    }, props));
   }) : null;
 };
 

package/dist/cjs/components/SingleValueContainer.js

@@ -23,11 +23,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _select = require("@atlaskit/select");
 
@@ -37,13 +35,14 @@ var _styles = require("./styles");
 
 var _excluded = ["children"];
 
-var _templateObject;
-
 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; } }
 
-var PlaceholderIconContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: ", "px;\n  line-height: 0;\n"])), _styles.BORDER_PADDING);
+var placeholderIconContainer = (0, _core.css)({
+  paddingLeft: "".concat(_styles.BORDER_PADDING, "px"),
+  lineHeight: 0
+});
 
 var showUserAvatar = function showUserAvatar(inputValue, value) {
   return value && value.data && inputValue === value.label;
@@ -74,7 +73,7 @@ var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
           value = _this$props$selectPro.value;
 
       if (isFocused || !hasValue) {
-        return /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
+        return (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
           appearance: appearance,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
         });
@@ -91,7 +90,9 @@ var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
           children = _this$props2.children,
           valueContainerProps = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_select.components.ValueContainer, valueContainerProps, /*#__PURE__*/_react.default.createElement(PlaceholderIconContainer, null, this.renderAvatar()), children);
+      return (0, _core.jsx)(_select.components.ValueContainer, valueContainerProps, (0, _core.jsx)("div", {
+        css: placeholderIconContainer
+      }, this.renderAvatar()), children);
     }
   }]);
   return SingleValueContainer;