@atlaskit/user-picker 8.7.2 → 8.8.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/user-picker
 
+## 8.8.0
+
+### Minor Changes
+
+- [`091da1d5f88`](https://bitbucket.org/atlassian/atlassian-frontend/commits/091da1d5f88) - [ux] Ensure items in the User Sources tooltip are unique and ordered correctly
+
+## 8.7.4
+
+### Patch Changes
+
+- [`35be12dee47`](https://bitbucket.org/atlassian/atlassian-frontend/commits/35be12dee47) - updated content copies for Org People Picker in user-picker and invite-people
+
+## 8.7.3
+
+### Patch Changes
+
+- [`7f37f923832`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f37f923832) - updated analytics event for org people picker in core invites
+
 ## 8.7.2
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -59,20 +59,21 @@ var checkValidId = function checkValidId(id) {
 
 var optionData2Analytics = function optionData2Analytics(option) {
   var id = option.id,
-      type = option.type;
+      type = option.type; // id's of email types are emails which is PII
+
+  var validatedData = {
+    id: checkValidId(id) ? id : null,
+    type: type || null
+  };
 
   if ((0, _utils.isExternalUser)(option)) {
-    return {
+    return _objectSpread(_objectSpread({}, validatedData), {}, {
       type: 'external_user',
       sources: option.sources,
       externalUserType: option.externalUserType
-    };
+    });
   } else {
-    // id's of email types are emails which is PII
-    return {
-      id: checkValidId(id) ? id : null,
-      type: type || null
-    };
+    return validatedData;
   }
 };
 
@@ -153,12 +154,14 @@ var selectEvent = function selectEvent(props, state, session, journeyId) {
 exports.selectEvent = selectEvent;
 
 var searchedEvent = function searchedEvent(props, state, session, journeyId) {
+  var searchResults = results(state);
   return createEvent('operational', 'searched', 'userPicker', _objectSpread(_objectSpread({}, createDefaultPickerAttributes(props, session, journeyId)), {}, {
     sessionDuration: sessionDuration(session),
     durationSinceInputChange: durationSinceInputChange(session),
     queryLength: queryLength(state),
     isLoading: isLoading(props, state),
-    results: results(state)
+    results: searchResults,
+    numberOfResults: searchResults.length
   }));
 };
 

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SourcesTooltipContent = exports.SourcesTooltipContainer = exports.SourceWrapper = void 0;
+
+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 _logo = require("@atlaskit/logo");
+
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
+
+var _slack = require("../assets/slack");
+
+var _google = require("../assets/google");
+
+var _microsoft = require("../assets/microsoft");
+
+var _github = require("../assets/github");
+
+var _i18n = require("../i18n");
+
+var _main = require("./main");
+
+var _templateObject, _templateObject2;
+
+var SourcesTooltipContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: 4px;\n  padding-right: 4px;\n"])));
+
+exports.SourcesTooltipContainer = SourcesTooltipContainer;
+
+var SourceWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 4px;\n  display: flex;\n  align-items: center;\n"])));
+
+exports.SourceWrapper = SourceWrapper;
+var SUPPORTED_SOURCES = [{
+  sourceType: 'jira',
+  icon: /*#__PURE__*/_react.default.createElement(_logo.JiraIcon, {
+    size: 'xsmall'
+  }),
+  label: _i18n.messages.jiraSource
+}, {
+  sourceType: 'confluence',
+  icon: /*#__PURE__*/_react.default.createElement(_logo.ConfluenceIcon, {
+    size: 'xsmall'
+  }),
+  label: _i18n.messages.confluenceSource
+}, {
+  sourceType: 'other-atlassian',
+  icon: /*#__PURE__*/_react.default.createElement(_logo.AtlassianIcon, {
+    size: 'xsmall'
+  }),
+  label: _i18n.messages.otherAtlassianSource
+}, {
+  sourceType: 'slack',
+  icon: /*#__PURE__*/_react.default.createElement(_slack.SlackIcon, null),
+  label: _i18n.messages.slackProvider
+}, {
+  sourceType: 'google',
+  icon: /*#__PURE__*/_react.default.createElement(_google.GoogleIcon, null),
+  label: _i18n.messages.googleProvider
+}, {
+  sourceType: 'microsoft',
+  icon: /*#__PURE__*/_react.default.createElement(_microsoft.MicrosoftIcon, null),
+  label: _i18n.messages.microsoftProvider
+}, {
+  sourceType: 'github',
+  icon: /*#__PURE__*/_react.default.createElement(_github.GitHubIcon, null),
+  label: _i18n.messages.gitHubProvider
+}];
+
+var SourcesTooltipContent = function SourcesTooltipContent(_ref) {
+  var sources = _ref.sources,
+      sourcesLoading = _ref.sourcesLoading,
+      sourcesError = _ref.sourcesError;
+
+  var sourcesToRender = _react.default.useMemo(function () {
+    return SUPPORTED_SOURCES.filter(function (supportedSource) {
+      return sources.includes(supportedSource.sourceType);
+    });
+  }, [sources]);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sourcesError !== null && sources.length === 0 ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesError)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesHeading)), /*#__PURE__*/_react.default.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    size: "small",
+    appearance: "invert"
+  }), !sourcesLoading && sourcesToRender.map(function (_ref2) {
+    var sourceType = _ref2.sourceType,
+        icon = _ref2.icon,
+        label = _ref2.label;
+    return /*#__PURE__*/_react.default.createElement(SourceWrapper, {
+      key: sourceType
+    }, /*#__PURE__*/_react.default.createElement(_main.ImageContainer, null, icon), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, label)));
+  }))));
+};
+
+exports.SourcesTooltipContent = SourcesTooltipContent;

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.SourcesTooltipContainer = exports.SourceWrapper = exports.ImageContainer = exports.ExternalUserOption = exports.EmailDomainWrapper = void 0;
+exports.ImageContainer = exports.ExternalUserOption = exports.EmailDomainWrapper = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -27,14 +27,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _logo = require("@atlaskit/logo");
-
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
@@ -45,23 +39,15 @@ var _AvatarItemOption = require("../AvatarItemOption");
 
 var _SizeableAvatar = require("../SizeableAvatar");
 
-var _slack = require("../assets/slack");
-
-var _google = require("../assets/google");
-
-var _microsoft = require("../assets/microsoft");
-
-var _github = require("../assets/github");
-
-var _i18n = require("../i18n");
-
 var _ExternalUserSourcesContainer = require("../ExternalUserSourcesContainer");
 
 var _InfoIcon = _interopRequireDefault(require("./InfoIcon"));
 
 var _ExternalAvatarItemOption = require("./ExternalAvatarItemOption");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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); }; }
 
@@ -71,52 +57,9 @@ var ImageContainer = _styledComponents.default.span(_templateObject || (_templat
 
 exports.ImageContainer = ImageContainer;
 
-var SourcesTooltipContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: 4px;\n  padding-right: 4px;\n"])));
-
-exports.SourcesTooltipContainer = SourcesTooltipContainer;
-
-var SourceWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 4px;\n  display: flex;\n  align-items: center;\n"])));
-
-exports.SourceWrapper = SourceWrapper;
-
-var EmailDomainWrapper = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: bold;\n"])));
+var EmailDomainWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: bold;\n"])));
 
 exports.EmailDomainWrapper = EmailDomainWrapper;
-var SourcesInfoMap = new Map([['slack', {
-  key: 'slack',
-  icon: /*#__PURE__*/_react.default.createElement(_slack.SlackIcon, null),
-  label: _i18n.messages.slackProvider
-}], ['google', {
-  key: 'google',
-  icon: /*#__PURE__*/_react.default.createElement(_google.GoogleIcon, null),
-  label: _i18n.messages.googleProvider
-}], ['microsoft', {
-  key: 'microsoft',
-  icon: /*#__PURE__*/_react.default.createElement(_microsoft.MicrosoftIcon, null),
-  label: _i18n.messages.microsoftProvider
-}], ['github', {
-  key: 'github',
-  icon: /*#__PURE__*/_react.default.createElement(_github.GitHubIcon, null),
-  label: _i18n.messages.gitHubProvider
-}], ['jira', {
-  key: 'jira',
-  icon: /*#__PURE__*/_react.default.createElement(_logo.JiraIcon, {
-    size: 'xsmall'
-  }),
-  label: _i18n.messages.jiraSource
-}], ['confluence', {
-  key: 'confluence',
-  icon: /*#__PURE__*/_react.default.createElement(_logo.ConfluenceIcon, {
-    size: 'xsmall'
-  }),
-  label: _i18n.messages.confluenceSource
-}], ['other-atlassian', {
-  key: 'other-atlassian',
-  icon: /*#__PURE__*/_react.default.createElement(_logo.AtlassianIcon, {
-    size: 'xsmall'
-  }),
-  label: _i18n.messages.otherAtlassianSource
-}]]);
 
 var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(ExternalUserOption, _React$PureComponent);
@@ -200,25 +143,8 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
         accountId: id,
         shouldFetchSources: Boolean(requiresSourceHydration),
         initialSources: sources
-      }, function (_ref) {
-        var sources = _ref.sources,
-            sourcesLoading = _ref.sourcesLoading,
-            sourcesError = _ref.sourcesError;
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sourcesError !== null && sources.length === 0 ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesError)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesHeading)), /*#__PURE__*/_react.default.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/_react.default.createElement(_spinner.default, {
-          size: "small",
-          appearance: "invert"
-        }), !sourcesLoading && sources.map(function (s) {
-          return SourcesInfoMap.get(s);
-        }).filter(function (s) {
-          return s;
-        }).map(function (_ref2) {
-          var key = _ref2.key,
-              icon = _ref2.icon,
-              label = _ref2.label;
-          return /*#__PURE__*/_react.default.createElement(SourceWrapper, {
-            key: key
-          }, /*#__PURE__*/_react.default.createElement(ImageContainer, null, icon), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, label)));
-        }))));
+      }, function (sourceData) {
+        return /*#__PURE__*/_react.default.createElement(_SourcesTooltipContent.SourcesTooltipContent, sourceData);
       });
     }
   }]);

package/dist/cjs/components/i18n.js

@@ -55,7 +55,7 @@ var messages = (0, _reactIntlNext.defineMessages)({
   },
   selectToAddEmail: {
     id: 'fabric.elements.user-picker.email.select.to.add',
-    defaultMessage: 'Select an email address',
+    defaultMessage: 'Select then Invite',
     description: 'Byline for valid email option.'
   },
   continueToAddEmail: {

package/dist/cjs/version.json

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

package/dist/es2019/analytics.js

@@ -34,20 +34,21 @@ const optionData2Analytics = option => {
   const {
     id,
     type
-  } = option;
+  } = option; // id's of email types are emails which is PII
+
+  const validatedData = {
+    id: checkValidId(id) ? id : null,
+    type: type || null
+  };
 
   if (isExternalUser(option)) {
-    return {
+    return { ...validatedData,
       type: 'external_user',
       sources: option.sources,
       externalUserType: option.externalUserType
     };
   } else {
-    // id's of email types are emails which is PII
-    return {
-      id: checkValidId(id) ? id : null,
-      type: type || null
-    };
+    return validatedData;
   }
 };
 
@@ -101,13 +102,17 @@ export const selectEvent = (props, state, session, journeyId, ...args) => {
     result: result(args[0])
   });
 };
-export const searchedEvent = (props, state, session, journeyId) => createEvent('operational', 'searched', 'userPicker', { ...createDefaultPickerAttributes(props, session, journeyId),
-  sessionDuration: sessionDuration(session),
-  durationSinceInputChange: durationSinceInputChange(session),
-  queryLength: queryLength(state),
-  isLoading: isLoading(props, state),
-  results: results(state)
-});
+export const searchedEvent = (props, state, session, journeyId) => {
+  const searchResults = results(state);
+  return createEvent('operational', 'searched', 'userPicker', { ...createDefaultPickerAttributes(props, session, journeyId),
+    sessionDuration: sessionDuration(session),
+    durationSinceInputChange: durationSinceInputChange(session),
+    queryLength: queryLength(state),
+    isLoading: isLoading(props, state),
+    results: searchResults,
+    numberOfResults: searchResults.length
+  });
+};
 export const failedEvent = (props, _, session, journeyId) => createEvent('operational', 'failed', 'userPicker', { ...createDefaultPickerAttributes(props, session, journeyId)
 });
 

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import styled from 'styled-components';
+import { AtlassianIcon, ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
+import Spinner from '@atlaskit/spinner/spinner';
+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 { ImageContainer } from './main';
+export const SourcesTooltipContainer = styled.div`
+  padding-bottom: 4px;
+  padding-right: 4px;
+`;
+export const SourceWrapper = styled.div`
+  padding-top: 4px;
+  display: flex;
+  align-items: center;
+`;
+const SUPPORTED_SOURCES = [{
+  sourceType: 'jira',
+  icon: /*#__PURE__*/React.createElement(JiraIcon, {
+    size: 'xsmall'
+  }),
+  label: messages.jiraSource
+}, {
+  sourceType: 'confluence',
+  icon: /*#__PURE__*/React.createElement(ConfluenceIcon, {
+    size: 'xsmall'
+  }),
+  label: messages.confluenceSource
+}, {
+  sourceType: 'other-atlassian',
+  icon: /*#__PURE__*/React.createElement(AtlassianIcon, {
+    size: 'xsmall'
+  }),
+  label: messages.otherAtlassianSource
+}, {
+  sourceType: 'slack',
+  icon: /*#__PURE__*/React.createElement(SlackIcon, null),
+  label: messages.slackProvider
+}, {
+  sourceType: 'google',
+  icon: /*#__PURE__*/React.createElement(GoogleIcon, null),
+  label: messages.googleProvider
+}, {
+  sourceType: 'microsoft',
+  icon: /*#__PURE__*/React.createElement(MicrosoftIcon, null),
+  label: messages.microsoftProvider
+}, {
+  sourceType: 'github',
+  icon: /*#__PURE__*/React.createElement(GitHubIcon, null),
+  label: messages.gitHubProvider
+}];
+export const SourcesTooltipContent = ({
+  sources,
+  sourcesLoading,
+  sourcesError
+}) => {
+  const sourcesToRender = React.useMemo(() => SUPPORTED_SOURCES.filter(supportedSource => sources.includes(supportedSource.sourceType)), [sources]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, sourcesError !== null && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
+    size: "small",
+    appearance: "invert"
+  }), !sourcesLoading && sourcesToRender.map(({
+    sourceType,
+    icon,
+    label
+  }) => /*#__PURE__*/React.createElement(SourceWrapper, {
+    key: sourceType
+  }, /*#__PURE__*/React.createElement(ImageContainer, null, icon), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, label)))))));
+};

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

@@ -1,22 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
 import styled from 'styled-components';
-import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
-import Spinner from '@atlaskit/spinner';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 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 { messages } from '../i18n';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
 import InfoIcon from './InfoIcon';
 import { ExternalAvatarItemOption } from './ExternalAvatarItemOption';
+import { SourcesTooltipContent } from './SourcesTooltipContent';
 export const ImageContainer = styled.span`
   height: 16px;
   width: 16px;
@@ -25,53 +18,9 @@ export const ImageContainer = styled.span`
   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;
-  display: flex;
-  align-items: center;
-`;
 export const EmailDomainWrapper = styled.span`
   font-weight: bold;
 `;
-const SourcesInfoMap = new Map([['slack', {
-  key: 'slack',
-  icon: /*#__PURE__*/React.createElement(SlackIcon, null),
-  label: messages.slackProvider
-}], ['google', {
-  key: 'google',
-  icon: /*#__PURE__*/React.createElement(GoogleIcon, null),
-  label: messages.googleProvider
-}], ['microsoft', {
-  key: 'microsoft',
-  icon: /*#__PURE__*/React.createElement(MicrosoftIcon, null),
-  label: messages.microsoftProvider
-}], ['github', {
-  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
-}], ['other-atlassian', {
-  key: 'other-atlassian',
-  icon: /*#__PURE__*/React.createElement(AtlassianIcon, {
-    size: 'xsmall'
-  }),
-  label: messages.otherAtlassianSource
-}]]);
 export class ExternalUserOption extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -147,20 +96,7 @@ export class ExternalUserOption extends React.PureComponent {
       accountId: id,
       shouldFetchSources: Boolean(requiresSourceHydration),
       initialSources: sources
-    }, ({
-      sources,
-      sourcesLoading,
-      sourcesError
-    }) => /*#__PURE__*/React.createElement(React.Fragment, null, sourcesError !== null && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
-      size: "small",
-      appearance: "invert"
-    }), !sourcesLoading && sources.map(s => SourcesInfoMap.get(s)).filter(s => s).map(({
-      key,
-      icon,
-      label
-    }) => /*#__PURE__*/React.createElement(SourceWrapper, {
-      key: key
-    }, /*#__PURE__*/React.createElement(ImageContainer, null, icon), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, label))))))));
+    }, sourceData => /*#__PURE__*/React.createElement(SourcesTooltipContent, sourceData));
   }
 
 }

package/dist/es2019/components/i18n.js

@@ -47,7 +47,7 @@ export const messages = defineMessages({
   },
   selectToAddEmail: {
     id: 'fabric.elements.user-picker.email.select.to.add',
-    defaultMessage: 'Select an email address',
+    defaultMessage: 'Select then Invite',
     description: 'Byline for valid email option.'
   },
   continueToAddEmail: {

package/dist/es2019/version.json

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

package/dist/esm/analytics.js

@@ -42,20 +42,21 @@ var checkValidId = function checkValidId(id) {
 
 var optionData2Analytics = function optionData2Analytics(option) {
   var id = option.id,
-      type = option.type;
+      type = option.type; // id's of email types are emails which is PII
+
+  var validatedData = {
+    id: checkValidId(id) ? id : null,
+    type: type || null
+  };
 
   if (isExternalUser(option)) {
-    return {
+    return _objectSpread(_objectSpread({}, validatedData), {}, {
       type: 'external_user',
       sources: option.sources,
       externalUserType: option.externalUserType
-    };
+    });
   } else {
-    // id's of email types are emails which is PII
-    return {
-      id: checkValidId(id) ? id : null,
-      type: type || null
-    };
+    return validatedData;
   }
 };
 
@@ -121,12 +122,14 @@ export var selectEvent = function selectEvent(props, state, session, journeyId)
   }));
 };
 export var searchedEvent = function searchedEvent(props, state, session, journeyId) {
+  var searchResults = results(state);
   return createEvent('operational', 'searched', 'userPicker', _objectSpread(_objectSpread({}, createDefaultPickerAttributes(props, session, journeyId)), {}, {
     sessionDuration: sessionDuration(session),
     durationSinceInputChange: durationSinceInputChange(session),
     queryLength: queryLength(state),
     isLoading: isLoading(props, state),
-    results: results(state)
+    results: searchResults,
+    numberOfResults: searchResults.length
   }));
 };
 export var failedEvent = function failedEvent(props, _, session, journeyId) {

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

@@ -0,0 +1,73 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import styled from 'styled-components';
+import { AtlassianIcon, ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
+import Spinner from '@atlaskit/spinner/spinner';
+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 { ImageContainer } from './main';
+export var SourcesTooltipContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: 4px;\n  padding-right: 4px;\n"])));
+export var SourceWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: 4px;\n  display: flex;\n  align-items: center;\n"])));
+var SUPPORTED_SOURCES = [{
+  sourceType: 'jira',
+  icon: /*#__PURE__*/React.createElement(JiraIcon, {
+    size: 'xsmall'
+  }),
+  label: messages.jiraSource
+}, {
+  sourceType: 'confluence',
+  icon: /*#__PURE__*/React.createElement(ConfluenceIcon, {
+    size: 'xsmall'
+  }),
+  label: messages.confluenceSource
+}, {
+  sourceType: 'other-atlassian',
+  icon: /*#__PURE__*/React.createElement(AtlassianIcon, {
+    size: 'xsmall'
+  }),
+  label: messages.otherAtlassianSource
+}, {
+  sourceType: 'slack',
+  icon: /*#__PURE__*/React.createElement(SlackIcon, null),
+  label: messages.slackProvider
+}, {
+  sourceType: 'google',
+  icon: /*#__PURE__*/React.createElement(GoogleIcon, null),
+  label: messages.googleProvider
+}, {
+  sourceType: 'microsoft',
+  icon: /*#__PURE__*/React.createElement(MicrosoftIcon, null),
+  label: messages.microsoftProvider
+}, {
+  sourceType: 'github',
+  icon: /*#__PURE__*/React.createElement(GitHubIcon, null),
+  label: messages.gitHubProvider
+}];
+export var SourcesTooltipContent = function SourcesTooltipContent(_ref) {
+  var sources = _ref.sources,
+      sourcesLoading = _ref.sourcesLoading,
+      sourcesError = _ref.sourcesError;
+  var sourcesToRender = React.useMemo(function () {
+    return SUPPORTED_SOURCES.filter(function (supportedSource) {
+      return sources.includes(supportedSource.sourceType);
+    });
+  }, [sources]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, sourcesError !== null && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
+    size: "small",
+    appearance: "invert"
+  }), !sourcesLoading && sourcesToRender.map(function (_ref2) {
+    var sourceType = _ref2.sourceType,
+        icon = _ref2.icon,
+        label = _ref2.label;
+    return /*#__PURE__*/React.createElement(SourceWrapper, {
+      key: sourceType
+    }, /*#__PURE__*/React.createElement(ImageContainer, null, icon), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, label)));
+  }))));
+};

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

@@ -8,69 +8,25 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
 import styled from 'styled-components';
-import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
-import Spinner from '@atlaskit/spinner';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 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 { messages } from '../i18n';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
 import InfoIcon from './InfoIcon';
 import { ExternalAvatarItemOption } from './ExternalAvatarItemOption';
+import { SourcesTooltipContent } from './SourcesTooltipContent';
 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', {
-  key: 'slack',
-  icon: /*#__PURE__*/React.createElement(SlackIcon, null),
-  label: messages.slackProvider
-}], ['google', {
-  key: 'google',
-  icon: /*#__PURE__*/React.createElement(GoogleIcon, null),
-  label: messages.googleProvider
-}], ['microsoft', {
-  key: 'microsoft',
-  icon: /*#__PURE__*/React.createElement(MicrosoftIcon, null),
-  label: messages.microsoftProvider
-}], ['github', {
-  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
-}], ['other-atlassian', {
-  key: 'other-atlassian',
-  icon: /*#__PURE__*/React.createElement(AtlassianIcon, {
-    size: 'xsmall'
-  }),
-  label: messages.otherAtlassianSource
-}]]);
+export var EmailDomainWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n"])));
 export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ExternalUserOption, _React$PureComponent);
 
@@ -158,25 +114,8 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
         accountId: id,
         shouldFetchSources: Boolean(requiresSourceHydration),
         initialSources: sources
-      }, function (_ref) {
-        var sources = _ref.sources,
-            sourcesLoading = _ref.sourcesLoading,
-            sourcesError = _ref.sourcesError;
-        return /*#__PURE__*/React.createElement(React.Fragment, null, sourcesError !== null && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
-          size: "small",
-          appearance: "invert"
-        }), !sourcesLoading && sources.map(function (s) {
-          return SourcesInfoMap.get(s);
-        }).filter(function (s) {
-          return s;
-        }).map(function (_ref2) {
-          var key = _ref2.key,
-              icon = _ref2.icon,
-              label = _ref2.label;
-          return /*#__PURE__*/React.createElement(SourceWrapper, {
-            key: key
-          }, /*#__PURE__*/React.createElement(ImageContainer, null, icon), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, label)));
-        }))));
+      }, function (sourceData) {
+        return /*#__PURE__*/React.createElement(SourcesTooltipContent, sourceData);
       });
     }
   }]);

package/dist/esm/components/i18n.js

@@ -47,7 +47,7 @@ export var messages = defineMessages({
   },
   selectToAddEmail: {
     id: 'fabric.elements.user-picker.email.select.to.add',
-    defaultMessage: 'Select an email address',
+    defaultMessage: 'Select then Invite',
     description: 'Byline for valid email option.'
   },
   continueToAddEmail: {

package/dist/esm/version.json

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ExternalUserSourcesData } from '../ExternalUserSourcesContainer';
+export declare const SourcesTooltipContainer: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SourceWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SourcesTooltipContent: React.FC<ExternalUserSourcesData>;

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { ExternalUser } from '../../types';
 export declare const ImageContainer: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
-export declare const SourcesTooltipContainer: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const SourceWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const EmailDomainWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
 export declare type ExternalUserOptionProps = {
     user: ExternalUser;

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

@@ -1,10 +1,11 @@
 import React, { ReactNode } from 'react';
 import { UserSource } from '../types';
-declare type SourcesChildrenFunc = ({ sources, sourcesLoading, sourcesError, }: {
+export interface ExternalUserSourcesData {
     sources: UserSource[];
     sourcesLoading: boolean;
     sourcesError: string | null;
-}) => ReactNode;
+}
+declare type SourcesChildrenFunc = (sourcesData: ExternalUserSourcesData) => ReactNode;
 interface SourcesContainerProps {
     accountId: string;
     shouldFetchSources: boolean;

package/package.json

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