@atlaskit/user-picker 8.4.1 → 8.5.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/user-picker
 
+## 8.5.0
+
+### Minor Changes
+
+- [`b74959620f2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b74959620f2) - added hover state for info icon, and updated primary color correspondingly
+  separated avatar item option for external users and applied different css settings
+
 ## 8.4.1
 
 ### Patch Changes

package/dist/cjs/components/AvatarItemOption.js

@@ -44,24 +44,20 @@ var Text = _styledComponents.default.span(_templateObject2 || (_templateObject2
   return secondary && "color: ".concat((0, _tokens.token)('color.text.selected', _colors.B400), "; font-size: 0.85em;");
 });
 
-var AdditionalInfo = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  float: right;\n  ", "\n"])), function (_ref2) {
-  var withTooltip = _ref2.withTooltip;
-  return withTooltip && " padding-top: 5px;";
-});
+var AdditionalInfo = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  float: right;\n"])));
 
-var TextWrapper = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: inline-block;\n"])), function (_ref3) {
-  var color = _ref3.color;
+var TextWrapper = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: inline-block;\n"])), function (_ref2) {
+  var color = _ref2.color;
   return color;
 });
 
 exports.TextWrapper = TextWrapper;
 
-var AvatarItemOption = function AvatarItemOption(_ref4) {
-  var avatar = _ref4.avatar,
-      primaryText = _ref4.primaryText,
-      secondaryText = _ref4.secondaryText,
-      lozenge = _ref4.lozenge,
-      sourcesInfoTooltip = _ref4.sourcesInfoTooltip;
+var AvatarItemOption = function AvatarItemOption(_ref3) {
+  var avatar = _ref3.avatar,
+      primaryText = _ref3.primaryText,
+      secondaryText = _ref3.secondaryText,
+      lozenge = _ref3.lozenge;
   return /*#__PURE__*/_react.default.createElement(Wrapper, null, avatar, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       maxWidth: '100%',
@@ -70,9 +66,7 @@ var AvatarItemOption = function AvatarItemOption(_ref4) {
       lineHeight: '1.4',
       paddingLeft: '8px'
     }
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, null, primaryText), /*#__PURE__*/_react.default.createElement(AdditionalInfo, {
-    withTooltip: Boolean(sourcesInfoTooltip)
-  }, !sourcesInfoTooltip && (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ?
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, null, primaryText), /*#__PURE__*/_react.default.createElement(AdditionalInfo, null, (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ?
   /*#__PURE__*/
   // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
   // Lozenge text) or tooltip won't work
@@ -80,7 +74,7 @@ var AvatarItemOption = function AvatarItemOption(_ref4) {
     fallback: /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text)
   }, /*#__PURE__*/_react.default.createElement(AsyncTooltip, {
     content: lozenge.tooltip
-  }, /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text))) : /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text)), sourcesInfoTooltip)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, {
+  }, /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text))) : /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text)))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, {
     secondary: true
   }, secondaryText))));
 };

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExternalAvatarItemOption = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var OuterWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  line-height: 1;\n  outline: none;\n  margin: 0;\n  width: 100%;\n  cursor: pointer;\n"])));
+
+var DetailsWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  max-width: 100%;\n  min-width: 0;\n  flex: 1 1 100%;\n  line-height: 1.4;\n  padding-left: 8px;\n  align-items: center;\n"])));
+
+var TextSection = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% - 32px);\n  flex: auto;\n"])));
+
+var Text = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  max-width: 100%;\n  margin: 0;\n  color: ", ";\n  ", "\n  white-space: nowrap;\n\n  > span {\n    max-width: inherit;\n  }\n"])), (0, _tokens.token)('color.text.selected', _colors.B400), function (_ref) {
+  var secondary = _ref.secondary;
+  return secondary && "color: ".concat((0, _tokens.token)('color.text.selected', _colors.B400), "; font-size: 0.85em;");
+});
+
+var ExternalAvatarItemOption = function ExternalAvatarItemOption(_ref2) {
+  var avatar = _ref2.avatar,
+      primaryText = _ref2.primaryText,
+      secondaryText = _ref2.secondaryText,
+      sourcesInfoTooltip = _ref2.sourcesInfoTooltip;
+  return /*#__PURE__*/_react.default.createElement(OuterWrapper, null, avatar, /*#__PURE__*/_react.default.createElement(DetailsWrapper, null, /*#__PURE__*/_react.default.createElement(TextSection, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, null, primaryText)), secondaryText && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, {
+    secondary: true
+  }, secondaryText))), /*#__PURE__*/_react.default.createElement("div", null, sourcesInfoTooltip)));
+};
+
+exports.ExternalAvatarItemOption = ExternalAvatarItemOption;

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _panel = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/panel"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _templateObject;
+
+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; }
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+
+var _default = function _default() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMouseHovered = _useState2[0],
+      setHoverState = _useState2[1];
+
+  var onMouseEnter = (0, _react.useCallback)(function () {
+    return setHoverState(true);
+  }, [setHoverState]);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    return setHoverState(false);
+  }, [setHoverState]);
+  return /*#__PURE__*/_react.default.createElement(Wrapper, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_panel.default, {
+    testId: "source-icon",
+    label: "",
+    size: "large",
+    primaryColor: (0, _tokens.token)('color.text.lowEmphasis', isMouseHovered ? _colors.N200 : _colors.N50)
+  }));
+};
+
+exports.default = _default;

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

@@ -29,26 +29,24 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _panel = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/panel"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _confluenceIcon = require("@atlaskit/logo/confluence-icon");
 
 var _jiraIcon = require("@atlaskit/logo/jira-icon");
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
 var _AvatarItemOption = require("../AvatarItemOption");
 
 var _SizeableAvatar = require("../SizeableAvatar");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _slack = require("../assets/slack");
 
 var _google = require("../assets/google");
@@ -61,6 +59,10 @@ var _i18n = require("../i18n");
 
 var _ExternalUserSourcesContainer = require("../ExternalUserSourcesContainer");
 
+var _InfoIcon = _interopRequireDefault(require("./InfoIcon"));
+
+var _ExternalAvatarItemOption = require("./ExternalAvatarItemOption");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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); }; }
@@ -168,12 +170,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       return _this.props.user.isExternal ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
         content: _this.formattedTooltipContent(),
         position: 'right-start'
-      }, /*#__PURE__*/_react.default.createElement(_panel.default, {
-        testId: "source-icon",
-        label: "",
-        size: "large",
-        primaryColor: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
-      })) : undefined;
+      }, /*#__PURE__*/_react.default.createElement(_InfoIcon.default, null)) : undefined;
     });
     return _this;
   }
@@ -181,7 +178,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _createClass2.default)(ExternalUserOption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.AvatarItemOption, {
+      return /*#__PURE__*/_react.default.createElement(_ExternalAvatarItemOption.ExternalAvatarItemOption, {
         avatar: this.renderAvatar(),
         primaryText: this.getPrimaryText(),
         secondaryText: this.renderSecondaryText(),

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "8.4.1",
+	"version": "8.5.0",
 	"sideEffects": false
 }

package/dist/es2019/components/AvatarItemOption.js

@@ -32,9 +32,6 @@ const Text = styled.span`
 `;
 const AdditionalInfo = styled.span`
   float: right;
-  ${({
-  withTooltip
-}) => withTooltip && ` padding-top: 5px;`}
 `;
 export const TextWrapper = styled.span`
   color: ${({
@@ -48,8 +45,7 @@ export const AvatarItemOption = ({
   avatar,
   primaryText,
   secondaryText,
-  lozenge,
-  sourcesInfoTooltip
+  lozenge
 }) => /*#__PURE__*/React.createElement(Wrapper, null, avatar, /*#__PURE__*/React.createElement("div", {
   style: {
     maxWidth: '100%',
@@ -58,9 +54,7 @@ export const AvatarItemOption = ({
     lineHeight: '1.4',
     paddingLeft: '8px'
   }
-}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, primaryText), /*#__PURE__*/React.createElement(AdditionalInfo, {
-  withTooltip: Boolean(sourcesInfoTooltip)
-}, !sourcesInfoTooltip && (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ?
+}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, primaryText), /*#__PURE__*/React.createElement(AdditionalInfo, null, (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ?
 /*#__PURE__*/
 // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
 // Lozenge text) or tooltip won't work
@@ -68,6 +62,6 @@ React.createElement(React.Suspense, {
   fallback: /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)
 }, /*#__PURE__*/React.createElement(AsyncTooltip, {
   content: lozenge.tooltip
-}, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text))) : /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)), sourcesInfoTooltip)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+}, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text))) : /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
   secondary: true
 }, secondaryText))));

package/dist/es2019/components/ExternalUserOption/ExternalAvatarItemOption.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+import { B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+const OuterWrapper = styled.div`
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  line-height: 1;
+  outline: none;
+  margin: 0;
+  width: 100%;
+  cursor: pointer;
+`;
+const DetailsWrapper = styled.div`
+  display: flex;
+  max-width: 100%;
+  min-width: 0;
+  flex: 1 1 100%;
+  line-height: 1.4;
+  padding-left: 8px;
+  align-items: center;
+`;
+const TextSection = styled.div`
+  width: calc(100% - 32px);
+  flex: auto;
+`;
+const Text = styled.div`
+  display: flex;
+  max-width: 100%;
+  margin: 0;
+  color: ${token('color.text.selected', B400)};
+  ${({
+  secondary
+}) => secondary && `color: ${token('color.text.selected', B400)}; font-size: 0.85em;`}
+  white-space: nowrap;
+
+  > span {
+    max-width: inherit;
+  }
+`;
+export const ExternalAvatarItemOption = ({
+  avatar,
+  primaryText,
+  secondaryText,
+  sourcesInfoTooltip
+}) => /*#__PURE__*/React.createElement(OuterWrapper, null, avatar, /*#__PURE__*/React.createElement(DetailsWrapper, null, /*#__PURE__*/React.createElement(TextSection, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, primaryText)), secondaryText && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+  secondary: true
+}, secondaryText))), /*#__PURE__*/React.createElement("div", null, sourcesInfoTooltip)));

package/dist/es2019/components/ExternalUserOption/InfoIcon.js

@@ -0,0 +1,22 @@
+import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
+import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
+import { N50, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+const Wrapper = styled.div`
+  display: flex;
+`;
+export default (() => {
+  const [isMouseHovered, setHoverState] = useState(false);
+  const onMouseEnter = useCallback(() => setHoverState(true), [setHoverState]);
+  const onMouseLeave = useCallback(() => setHoverState(false), [setHoverState]);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement(EditorPanelIcon, {
+    testId: "source-icon",
+    label: "",
+    size: "large",
+    primaryColor: token('color.text.lowEmphasis', isMouseHovered ? N200 : N50)
+  }));
+});

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

@@ -1,22 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
+import styled from 'styled-components';
 import { ConfluenceIcon } from '@atlaskit/logo/confluence-icon';
 import { JiraIcon } from '@atlaskit/logo/jira-icon';
-import Tooltip from '@atlaskit/tooltip';
 import Spinner from '@atlaskit/spinner';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { AvatarItemOption, TextWrapper } from '../AvatarItemOption';
+import Tooltip from '@atlaskit/tooltip';
+import { TextWrapper } from '../AvatarItemOption';
 import { SizeableAvatar } from '../SizeableAvatar';
-import styled from 'styled-components';
 import { SlackIcon } from '../assets/slack';
 import { GoogleIcon } from '../assets/google';
 import { MicrosoftIcon } from '../assets/microsoft';
 import { GitHubIcon } from '../assets/github';
 import { messages } from '../i18n';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
+import InfoIcon from './InfoIcon';
+import { ExternalAvatarItemOption } from './ExternalAvatarItemOption';
 export const ImageContainer = styled.span`
   height: 16px;
   width: 16px;
@@ -117,16 +118,11 @@ export class ExternalUserOption extends React.PureComponent {
     _defineProperty(this, "getSourcesInfoTooltip", () => this.props.user.isExternal ? /*#__PURE__*/React.createElement(Tooltip, {
       content: this.formattedTooltipContent(),
       position: 'right-start'
-    }, /*#__PURE__*/React.createElement(EditorPanelIcon, {
-      testId: "source-icon",
-      label: "",
-      size: "large",
-      primaryColor: token('color.text.lowEmphasis', N200)
-    })) : undefined);
+    }, /*#__PURE__*/React.createElement(InfoIcon, null)) : undefined);
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(AvatarItemOption, {
+    return /*#__PURE__*/React.createElement(ExternalAvatarItemOption, {
       avatar: this.renderAvatar(),
       primaryText: this.getPrimaryText(),
       secondaryText: this.renderSecondaryText(),

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "8.4.1",
+	"version": "8.5.0",
 	"sideEffects": false
 }

package/dist/esm/components/AvatarItemOption.js

@@ -21,20 +21,16 @@ var Text = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLi
   var secondary = _ref.secondary;
   return secondary && "color: ".concat(token('color.text.selected', B400), "; font-size: 0.85em;");
 });
-var AdditionalInfo = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  float: right;\n  ", "\n"])), function (_ref2) {
-  var withTooltip = _ref2.withTooltip;
-  return withTooltip && " padding-top: 5px;";
-});
-export var TextWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: inline-block;\n"])), function (_ref3) {
-  var color = _ref3.color;
+var AdditionalInfo = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  float: right;\n"])));
+export var TextWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: inline-block;\n"])), function (_ref2) {
+  var color = _ref2.color;
   return color;
 });
-export var AvatarItemOption = function AvatarItemOption(_ref4) {
-  var avatar = _ref4.avatar,
-      primaryText = _ref4.primaryText,
-      secondaryText = _ref4.secondaryText,
-      lozenge = _ref4.lozenge,
-      sourcesInfoTooltip = _ref4.sourcesInfoTooltip;
+export var AvatarItemOption = function AvatarItemOption(_ref3) {
+  var avatar = _ref3.avatar,
+      primaryText = _ref3.primaryText,
+      secondaryText = _ref3.secondaryText,
+      lozenge = _ref3.lozenge;
   return /*#__PURE__*/React.createElement(Wrapper, null, avatar, /*#__PURE__*/React.createElement("div", {
     style: {
       maxWidth: '100%',
@@ -43,9 +39,7 @@ export var AvatarItemOption = function AvatarItemOption(_ref4) {
       lineHeight: '1.4',
       paddingLeft: '8px'
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, primaryText), /*#__PURE__*/React.createElement(AdditionalInfo, {
-    withTooltip: Boolean(sourcesInfoTooltip)
-  }, !sourcesInfoTooltip && (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ?
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, primaryText), /*#__PURE__*/React.createElement(AdditionalInfo, null, (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ?
   /*#__PURE__*/
   // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
   // Lozenge text) or tooltip won't work
@@ -53,7 +47,7 @@ export var AvatarItemOption = function AvatarItemOption(_ref4) {
     fallback: /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)
   }, /*#__PURE__*/React.createElement(AsyncTooltip, {
     content: lozenge.tooltip
-  }, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text))) : /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)), sourcesInfoTooltip)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text))) : /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
     secondary: true
   }, secondaryText))));
 };

package/dist/esm/components/ExternalUserOption/ExternalAvatarItemOption.js

@@ -0,0 +1,24 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import React from 'react';
+import styled from 'styled-components';
+import { B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+var OuterWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  line-height: 1;\n  outline: none;\n  margin: 0;\n  width: 100%;\n  cursor: pointer;\n"])));
+var DetailsWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  max-width: 100%;\n  min-width: 0;\n  flex: 1 1 100%;\n  line-height: 1.4;\n  padding-left: 8px;\n  align-items: center;\n"])));
+var TextSection = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: calc(100% - 32px);\n  flex: auto;\n"])));
+var Text = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  max-width: 100%;\n  margin: 0;\n  color: ", ";\n  ", "\n  white-space: nowrap;\n\n  > span {\n    max-width: inherit;\n  }\n"])), token('color.text.selected', B400), function (_ref) {
+  var secondary = _ref.secondary;
+  return secondary && "color: ".concat(token('color.text.selected', B400), "; font-size: 0.85em;");
+});
+export var ExternalAvatarItemOption = function ExternalAvatarItemOption(_ref2) {
+  var avatar = _ref2.avatar,
+      primaryText = _ref2.primaryText,
+      secondaryText = _ref2.secondaryText,
+      sourcesInfoTooltip = _ref2.sourcesInfoTooltip;
+  return /*#__PURE__*/React.createElement(OuterWrapper, null, avatar, /*#__PURE__*/React.createElement(DetailsWrapper, null, /*#__PURE__*/React.createElement(TextSection, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, primaryText)), secondaryText && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    secondary: true
+  }, secondaryText))), /*#__PURE__*/React.createElement("div", null, sourcesInfoTooltip)));
+};

package/dist/esm/components/ExternalUserOption/InfoIcon.js

@@ -0,0 +1,33 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
+import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
+import { N50, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+export default (function () {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMouseHovered = _useState2[0],
+      setHoverState = _useState2[1];
+
+  var onMouseEnter = useCallback(function () {
+    return setHoverState(true);
+  }, [setHoverState]);
+  var onMouseLeave = useCallback(function () {
+    return setHoverState(false);
+  }, [setHoverState]);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement(EditorPanelIcon, {
+    testId: "source-icon",
+    label: "",
+    size: "large",
+    primaryColor: token('color.text.lowEmphasis', isMouseHovered ? N200 : N50)
+  }));
+});

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

@@ -16,22 +16,23 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
+import styled from 'styled-components';
 import { ConfluenceIcon } from '@atlaskit/logo/confluence-icon';
 import { JiraIcon } from '@atlaskit/logo/jira-icon';
-import Tooltip from '@atlaskit/tooltip';
 import Spinner from '@atlaskit/spinner';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { AvatarItemOption, TextWrapper } from '../AvatarItemOption';
+import Tooltip from '@atlaskit/tooltip';
+import { TextWrapper } from '../AvatarItemOption';
 import { SizeableAvatar } from '../SizeableAvatar';
-import styled from 'styled-components';
 import { SlackIcon } from '../assets/slack';
 import { GoogleIcon } from '../assets/google';
 import { MicrosoftIcon } from '../assets/microsoft';
 import { GitHubIcon } from '../assets/github';
 import { messages } from '../i18n';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
+import InfoIcon from './InfoIcon';
+import { ExternalAvatarItemOption } from './ExternalAvatarItemOption';
 export var ImageContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 16px;\n  width: 16px;\n  padding-right: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 export var SourcesTooltipContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-bottom: 4px;\n  padding-right: 4px;\n"])));
 export var SourceWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: 4px;\n  display: flex;\n  align-items: center;\n"])));
@@ -125,12 +126,7 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       return _this.props.user.isExternal ? /*#__PURE__*/React.createElement(Tooltip, {
         content: _this.formattedTooltipContent(),
         position: 'right-start'
-      }, /*#__PURE__*/React.createElement(EditorPanelIcon, {
-        testId: "source-icon",
-        label: "",
-        size: "large",
-        primaryColor: token('color.text.lowEmphasis', N200)
-      })) : undefined;
+      }, /*#__PURE__*/React.createElement(InfoIcon, null)) : undefined;
     });
 
     return _this;
@@ -139,7 +135,7 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(ExternalUserOption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(AvatarItemOption, {
+      return /*#__PURE__*/React.createElement(ExternalAvatarItemOption, {
         avatar: this.renderAvatar(),
         primaryText: this.getPrimaryText(),
         secondaryText: this.renderSecondaryText(),

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "8.4.1",
+	"version": "8.5.0",
 	"sideEffects": false
 }

package/dist/types/components/AvatarItemOption.d.ts

@@ -6,6 +6,5 @@ export declare type AvatarItemOptionProps = {
     primaryText?: ReactNode;
     secondaryText?: ReactNode;
     lozenge?: LozengeProps;
-    sourcesInfoTooltip?: ReactNode;
 };
-export declare const AvatarItemOption: ({ avatar, primaryText, secondaryText, lozenge, sourcesInfoTooltip, }: AvatarItemOptionProps) => JSX.Element;
+export declare const AvatarItemOption: ({ avatar, primaryText, secondaryText, lozenge, }: AvatarItemOptionProps) => JSX.Element;

package/dist/types/components/ExternalUserOption/ExternalAvatarItemOption.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare type ExternalAvatarItemOptionProps = {
+    avatar: ReactNode;
+    primaryText: ReactNode;
+    secondaryText?: ReactNode;
+    sourcesInfoTooltip?: ReactNode;
+};
+export declare const ExternalAvatarItemOption: ({ avatar, primaryText, secondaryText, sourcesInfoTooltip, }: ExternalAvatarItemOptionProps) => JSX.Element;

package/dist/types/components/ExternalUserOption/InfoIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "8.4.1",
+  "version": "8.5.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"