@atlaskit/user-picker 8.3.4 → 8.5.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @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
+
+- [`22928ac80d0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/22928ac80d0) - Fix: user sources would keep being fetched in a loop as long as the tooltip was displayed
+
+## 8.4.0
+
+### Minor Changes
+
+- [`29dd0cee8cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/29dd0cee8cf) - [ux] Add support for Jira and Confluence user sources
+
+## 8.3.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.3.4
 
 ### Patch Changes

package/dist/cjs/clients/UserSourceProvider.js

@@ -37,10 +37,10 @@ var useUserSource = function useUserSource(accountId, shouldFetchSources, existi
   var _useContext = (0, _react.useContext)(ExusUserSourceContext),
       fetchUserSource = _useContext.fetchUserSource;
 
-  var _useState = (0, _react.useState)(new Set(existingSources)),
+  var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      sources = _useState2[0],
-      setUserSources = _useState2[1];
+      externalSources = _useState2[0],
+      setExternalSources = _useState2[1];
 
   var _useState3 = (0, _react.useState)(true),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
@@ -72,26 +72,33 @@ var useUserSource = function useUserSource(accountId, shouldFetchSources, existi
       return cleanup;
     }
 
-    if (isMounted) {
-      fetchUserSource(accountId, abortController === null || abortController === void 0 ? void 0 : abortController.signal).then(function (externalSources) {
-        setLoading(false);
-        var externalSourceTypes = externalSources.map(function (source) {
-          return source.sourceType;
-        });
-        setUserSources(new Set([].concat((0, _toConsumableArray2.default)(sources), (0, _toConsumableArray2.default)(externalSourceTypes))));
-      }).catch(function (error) {
-        setLoading(false);
-        setError(error);
+    fetchUserSource(accountId, abortController === null || abortController === void 0 ? void 0 : abortController.signal).then(function (externalSources) {
+      if (!isMounted) {
+        return;
+      }
+
+      setLoading(false);
+      var externalSourceTypes = externalSources.map(function (source) {
+        return source.sourceType;
       });
-    }
+      setExternalSources(externalSourceTypes);
+    }).catch(function (error) {
+      if (!isMounted) {
+        return;
+      }
 
+      setLoading(false);
+      setError(error);
+    });
     return cleanup;
-  }, [fetchUserSource, accountId, sources, abortController, shouldFetchSources]);
-  return {
-    sources: Array.from(sources),
-    loading: loading,
-    error: error
-  };
+  }, [fetchUserSource, accountId, abortController, shouldFetchSources]);
+  return (0, _react.useMemo)(function () {
+    return {
+      sources: Array.from(new Set([].concat((0, _toConsumableArray2.default)(existingSources !== null && existingSources !== void 0 ? existingSources : []), (0, _toConsumableArray2.default)(externalSources)))),
+      loading: loading,
+      error: error
+    };
+  }, [error, existingSources, externalSources, loading]);
 };
 
 exports.useUserSource = useUserSource;

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

@@ -25,23 +25,27 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _colors = require("@atlaskit/theme/colors");
+var _react = _interopRequireDefault(require("react"));
 
-var _tokens = require("@atlaskit/tokens");
+var _reactIntlNext = require("react-intl-next");
 
-var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _AvatarItemOption = require("../AvatarItemOption");
+var _confluenceIcon = require("@atlaskit/logo/confluence-icon");
 
-var _SizeableAvatar = require("../SizeableAvatar");
+var _jiraIcon = require("@atlaskit/logo/jira-icon");
 
-var _panel = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/panel"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _AvatarItemOption = require("../AvatarItemOption");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _SizeableAvatar = require("../SizeableAvatar");
 
 var _slack = require("../assets/slack");
 
@@ -51,23 +55,25 @@ var _microsoft = require("../assets/microsoft");
 
 var _github = require("../assets/github");
 
-var _reactIntlNext = require("react-intl-next");
-
 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); }; }
 
 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: 12px;\n  width: 12px;\n  padding-right: 4px;\n"])));
+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 SourcesTooltipContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: 4px;\n"])));
+var SourcesTooltipContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: 4px;\n  padding-right: 4px;\n"])));
 
 exports.SourcesTooltipContainer = SourcesTooltipContainer;
 
@@ -94,6 +100,18 @@ var SourcesInfoMap = new Map([['slack', {
   key: 'github',
   icon: /*#__PURE__*/_react.default.createElement(_github.GitHubIcon, null),
   label: _i18n.messages.gitHubProvider
+}], ['jira', {
+  key: 'jira',
+  icon: /*#__PURE__*/_react.default.createElement(_jiraIcon.JiraIcon, {
+    size: 'xsmall'
+  }),
+  label: _i18n.messages.jiraSource
+}], ['confluence', {
+  key: 'confluence',
+  icon: /*#__PURE__*/_react.default.createElement(_confluenceIcon.ConfluenceIcon, {
+    size: 'xsmall'
+  }),
+  label: _i18n.messages.confluenceSource
 }]]);
 
 var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
@@ -152,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;
   }
@@ -165,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/components/ExternalUserSourcesContainer.js

@@ -15,8 +15,7 @@ var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(_ref) {
   var children = _ref.children,
       accountId = _ref.accountId,
       shouldFetchSources = _ref.shouldFetchSources,
-      _ref$initialSources = _ref.initialSources,
-      initialSources = _ref$initialSources === void 0 ? [] : _ref$initialSources;
+      initialSources = _ref.initialSources;
 
   var _useUserSource = (0, _UserSourceProvider.useUserSource)(accountId, shouldFetchSources, initialSources),
       sources = _useUserSource.sources,

package/dist/cjs/components/i18n.js

@@ -98,6 +98,16 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'GitHub',
     description: 'This external user is sourced from GitHub provider'
   },
+  jiraSource: {
+    id: 'fabric.elements.user-picker.source.jira',
+    defaultMessage: 'Jira',
+    description: 'This external user is sourced from Jira'
+  },
+  confluenceSource: {
+    id: 'fabric.elements.user-picker.source.confluence',
+    defaultMessage: 'Confluence',
+    description: 'This external user is sourced from Confluence'
+  },
   memberLozengeText: {
     id: 'fabric.elements.user-picker.member.lozenge.text',
     defaultMessage: 'MEMBER',

package/dist/cjs/version.json

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

package/dist/es2019/clients/UserSourceProvider.js

@@ -12,7 +12,7 @@ export const useUserSource = (accountId, shouldFetchSources, existingSources) =>
   const {
     fetchUserSource
   } = useContext(ExusUserSourceContext);
-  const [sources, setUserSources] = useState(new Set(existingSources));
+  const [externalSources, setExternalSources] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const abortController = useMemo(() => {
@@ -35,22 +35,27 @@ export const useUserSource = (accountId, shouldFetchSources, existingSources) =>
       return cleanup;
     }
 
-    if (isMounted) {
-      fetchUserSource(accountId, abortController === null || abortController === void 0 ? void 0 : abortController.signal).then(externalSources => {
-        setLoading(false);
-        const externalSourceTypes = externalSources.map(source => source.sourceType);
-        setUserSources(new Set([...sources, ...externalSourceTypes]));
-      }).catch(error => {
-        setLoading(false);
-        setError(error);
-      });
-    }
+    fetchUserSource(accountId, abortController === null || abortController === void 0 ? void 0 : abortController.signal).then(externalSources => {
+      if (!isMounted) {
+        return;
+      }
+
+      setLoading(false);
+      const externalSourceTypes = externalSources.map(source => source.sourceType);
+      setExternalSources(externalSourceTypes);
+    }).catch(error => {
+      if (!isMounted) {
+        return;
+      }
 
+      setLoading(false);
+      setError(error);
+    });
     return cleanup;
-  }, [fetchUserSource, accountId, sources, abortController, shouldFetchSources]);
-  return {
-    sources: Array.from(sources),
+  }, [fetchUserSource, accountId, abortController, shouldFetchSources]);
+  return useMemo(() => ({
+    sources: Array.from(new Set([...(existingSources !== null && existingSources !== void 0 ? existingSources : []), ...externalSources])),
     loading,
     error
-  };
+  }), [error, existingSources, externalSources, loading]);
 };

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,27 +1,34 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import styled from 'styled-components';
+import { ConfluenceIcon } from '@atlaskit/logo/confluence-icon';
+import { JiraIcon } from '@atlaskit/logo/jira-icon';
+import Spinner from '@atlaskit/spinner';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import React from 'react';
-import { AvatarItemOption, TextWrapper } from '../AvatarItemOption';
-import { SizeableAvatar } from '../SizeableAvatar';
-import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
 import Tooltip from '@atlaskit/tooltip';
-import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
+import { TextWrapper } from '../AvatarItemOption';
+import { SizeableAvatar } from '../SizeableAvatar';
 import { SlackIcon } from '../assets/slack';
 import { GoogleIcon } from '../assets/google';
 import { MicrosoftIcon } from '../assets/microsoft';
 import { GitHubIcon } from '../assets/github';
-import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../i18n';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
+import InfoIcon from './InfoIcon';
+import { ExternalAvatarItemOption } from './ExternalAvatarItemOption';
 export const ImageContainer = styled.span`
-  height: 12px;
-  width: 12px;
+  height: 16px;
+  width: 16px;
   padding-right: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 export const SourcesTooltipContainer = styled.div`
   padding-bottom: 4px;
+  padding-right: 4px;
 `;
 export const SourceWrapper = styled.div`
   padding-top: 4px;
@@ -47,6 +54,18 @@ const SourcesInfoMap = new Map([['slack', {
   key: 'github',
   icon: /*#__PURE__*/React.createElement(GitHubIcon, null),
   label: messages.gitHubProvider
+}], ['jira', {
+  key: 'jira',
+  icon: /*#__PURE__*/React.createElement(JiraIcon, {
+    size: 'xsmall'
+  }),
+  label: messages.jiraSource
+}], ['confluence', {
+  key: 'confluence',
+  icon: /*#__PURE__*/React.createElement(ConfluenceIcon, {
+    size: 'xsmall'
+  }),
+  label: messages.confluenceSource
 }]]);
 export class ExternalUserOption extends React.PureComponent {
   constructor(...args) {
@@ -99,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/components/ExternalUserSourcesContainer.js

@@ -4,7 +4,7 @@ export const ExternalUserSourcesContainer = ({
   children,
   accountId,
   shouldFetchSources,
-  initialSources = []
+  initialSources
 }) => {
   const {
     sources,

package/dist/es2019/components/i18n.js

@@ -90,6 +90,16 @@ export const messages = defineMessages({
     defaultMessage: 'GitHub',
     description: 'This external user is sourced from GitHub provider'
   },
+  jiraSource: {
+    id: 'fabric.elements.user-picker.source.jira',
+    defaultMessage: 'Jira',
+    description: 'This external user is sourced from Jira'
+  },
+  confluenceSource: {
+    id: 'fabric.elements.user-picker.source.confluence',
+    defaultMessage: 'Confluence',
+    description: 'This external user is sourced from Confluence'
+  },
   memberLozengeText: {
     id: 'fabric.elements.user-picker.member.lozenge.text',
     defaultMessage: 'MEMBER',

package/dist/es2019/version.json

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

package/dist/esm/clients/UserSourceProvider.js

@@ -15,10 +15,10 @@ export var useUserSource = function useUserSource(accountId, shouldFetchSources,
   var _useContext = useContext(ExusUserSourceContext),
       fetchUserSource = _useContext.fetchUserSource;
 
-  var _useState = useState(new Set(existingSources)),
+  var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
-      sources = _useState2[0],
-      setUserSources = _useState2[1];
+      externalSources = _useState2[0],
+      setExternalSources = _useState2[1];
 
   var _useState3 = useState(true),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -50,24 +50,31 @@ export var useUserSource = function useUserSource(accountId, shouldFetchSources,
       return cleanup;
     }
 
-    if (isMounted) {
-      fetchUserSource(accountId, abortController === null || abortController === void 0 ? void 0 : abortController.signal).then(function (externalSources) {
-        setLoading(false);
-        var externalSourceTypes = externalSources.map(function (source) {
-          return source.sourceType;
-        });
-        setUserSources(new Set([].concat(_toConsumableArray(sources), _toConsumableArray(externalSourceTypes))));
-      }).catch(function (error) {
-        setLoading(false);
-        setError(error);
+    fetchUserSource(accountId, abortController === null || abortController === void 0 ? void 0 : abortController.signal).then(function (externalSources) {
+      if (!isMounted) {
+        return;
+      }
+
+      setLoading(false);
+      var externalSourceTypes = externalSources.map(function (source) {
+        return source.sourceType;
       });
-    }
+      setExternalSources(externalSourceTypes);
+    }).catch(function (error) {
+      if (!isMounted) {
+        return;
+      }
 
+      setLoading(false);
+      setError(error);
+    });
     return cleanup;
-  }, [fetchUserSource, accountId, sources, abortController, shouldFetchSources]);
-  return {
-    sources: Array.from(sources),
-    loading: loading,
-    error: error
-  };
+  }, [fetchUserSource, accountId, abortController, shouldFetchSources]);
+  return useMemo(function () {
+    return {
+      sources: Array.from(new Set([].concat(_toConsumableArray(existingSources !== null && existingSources !== void 0 ? existingSources : []), _toConsumableArray(externalSources)))),
+      loading: loading,
+      error: error
+    };
+  }, [error, existingSources, externalSources, loading]);
 };

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

@@ -14,24 +14,27 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import styled from 'styled-components';
+import { ConfluenceIcon } from '@atlaskit/logo/confluence-icon';
+import { JiraIcon } from '@atlaskit/logo/jira-icon';
+import Spinner from '@atlaskit/spinner';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import React from 'react';
-import { AvatarItemOption, TextWrapper } from '../AvatarItemOption';
-import { SizeableAvatar } from '../SizeableAvatar';
-import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
 import Tooltip from '@atlaskit/tooltip';
-import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
+import { TextWrapper } from '../AvatarItemOption';
+import { SizeableAvatar } from '../SizeableAvatar';
 import { SlackIcon } from '../assets/slack';
 import { GoogleIcon } from '../assets/google';
 import { MicrosoftIcon } from '../assets/microsoft';
 import { GitHubIcon } from '../assets/github';
-import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../i18n';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
-export var ImageContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 12px;\n  width: 12px;\n  padding-right: 4px;\n"])));
-export var SourcesTooltipContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-bottom: 4px;\n"])));
+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"])));
 export var EmailDomainWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: bold;\n"])));
 var SourcesInfoMap = new Map([['slack', {
@@ -50,6 +53,18 @@ var SourcesInfoMap = new Map([['slack', {
   key: 'github',
   icon: /*#__PURE__*/React.createElement(GitHubIcon, null),
   label: messages.gitHubProvider
+}], ['jira', {
+  key: 'jira',
+  icon: /*#__PURE__*/React.createElement(JiraIcon, {
+    size: 'xsmall'
+  }),
+  label: messages.jiraSource
+}], ['confluence', {
+  key: 'confluence',
+  icon: /*#__PURE__*/React.createElement(ConfluenceIcon, {
+    size: 'xsmall'
+  }),
+  label: messages.confluenceSource
 }]]);
 export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ExternalUserOption, _React$PureComponent);
@@ -111,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;
@@ -125,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/components/ExternalUserSourcesContainer.js

@@ -4,8 +4,7 @@ export var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(
   var children = _ref.children,
       accountId = _ref.accountId,
       shouldFetchSources = _ref.shouldFetchSources,
-      _ref$initialSources = _ref.initialSources,
-      initialSources = _ref$initialSources === void 0 ? [] : _ref$initialSources;
+      initialSources = _ref.initialSources;
 
   var _useUserSource = useUserSource(accountId, shouldFetchSources, initialSources),
       sources = _useUserSource.sources,

package/dist/esm/components/i18n.js

@@ -90,6 +90,16 @@ export var messages = defineMessages({
     defaultMessage: 'GitHub',
     description: 'This external user is sourced from GitHub provider'
   },
+  jiraSource: {
+    id: 'fabric.elements.user-picker.source.jira',
+    defaultMessage: 'Jira',
+    description: 'This external user is sourced from Jira'
+  },
+  confluenceSource: {
+    id: 'fabric.elements.user-picker.source.confluence',
+    defaultMessage: 'Confluence',
+    description: 'This external user is sourced from Confluence'
+  },
   memberLozengeText: {
     id: 'fabric.elements.user-picker.member.lozenge.text',
     defaultMessage: 'MEMBER',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "8.3.4",
+	"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/dist/types/components/i18n.d.ts

@@ -89,6 +89,16 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    jiraSource: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    confluenceSource: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     memberLozengeText: {
         id: string;
         defaultMessage: string;

package/dist/types/types.d.ts

@@ -208,7 +208,7 @@ export interface OptionData {
     lozenge?: string | LozengeProps;
 }
 export declare const UserType = "user";
-export declare type UserSource = 'google' | 'slack' | 'microsoft' | 'github';
+export declare type UserSource = 'google' | 'slack' | 'microsoft' | 'github' | 'jira' | 'confluence';
 export interface ExternalUser extends User {
     requiresSourceHydration?: boolean;
     sources: UserSource[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "8.3.4",
+  "version": "8.5.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,12 +29,13 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/logo": "^13.5.4",
     "@atlaskit/lozenge": "^11.0.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/select": "^15.2.0",
     "@atlaskit/spinner": "^15.1.4",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.5.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "lodash": "^4.17.21",
@@ -57,7 +58,7 @@
     "@atlaskit/range": "^5.0.11",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/textfield": "^5.0.0",
-    "@atlaskit/util-data-test": "^17.1.0",
+    "@atlaskit/util-data-test": "^17.2.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/dom": "^7.7.3",
     "@testing-library/jest-dom": "^4.1.0",
@@ -76,10 +77,5 @@
     "fabric",
     "ui"
   ],
-  "techstack": {
-    "@repo/internal": {
-      "theming": "tokens"
-    }
-  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }