@atlaskit/user-picker 8.2.1 → 8.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/user-picker
 
+## 8.3.0
+
+### Minor Changes
+
+- [`88551bad1ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/88551bad1ec) - [ux] Add support for asychronously fetching the sources for an external user when a user hovers over the sources tooltip
+
 ## 8.2.1
 
 ### Patch Changes

package/dist/cjs/clients/UserSourceProvider.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUserSource = exports.ExusUserSourceProvider = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 ExusUserSourceContext = /*#__PURE__*/(0, _react.createContext)({});
+
+var ExusUserSourceProvider = function ExusUserSourceProvider(_ref) {
+  var fetchUserSource = _ref.fetchUserSource,
+      children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(ExusUserSourceContext.Provider, {
+    value: {
+      fetchUserSource: fetchUserSource
+    }
+  }, children);
+};
+
+exports.ExusUserSourceProvider = ExusUserSourceProvider;
+
+var useUserSource = function useUserSource(accountId, existingSources) {
+  var _useContext = (0, _react.useContext)(ExusUserSourceContext),
+      fetchUserSource = _useContext.fetchUserSource;
+
+  var _useState = (0, _react.useState)(new Set(existingSources)),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      sources = _useState2[0],
+      setUserSources = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      error = _useState6[0],
+      setError = _useState6[1];
+
+  var abortController = (0, _react.useMemo)(function () {
+    if (typeof AbortController === 'undefined') {
+      return;
+    }
+
+    return new AbortController();
+  }, []);
+  (0, _react.useEffect)(function () {
+    var isMounted = true;
+
+    var cleanup = function cleanup() {
+      abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+      isMounted = false;
+    };
+
+    if (!fetchUserSource) {
+      setLoading(false);
+      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);
+      });
+    }
+
+    return cleanup;
+  }, [fetchUserSource, accountId, sources, abortController]);
+  return {
+    sources: Array.from(sources),
+    loading: loading,
+    error: error
+  };
+};
+
+exports.useUserSource = useUserSource;

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

@@ -39,6 +39,8 @@ var _panel = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/panel")
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _slack = require("../assets/slack");
@@ -53,6 +55,8 @@ var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("../i18n");
 
+var _ExternalUserSourcesContainer = require("../ExternalUserSourcesContainer");
+
 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); }; }
@@ -145,12 +149,11 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSourcesInfoTooltip", function () {
-      var _this$props$user$sour;
-
-      return ((_this$props$user$sour = _this.props.user.sources) === null || _this$props$user$sour === void 0 ? void 0 : _this$props$user$sour.length) > 0 ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      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)
@@ -172,18 +175,32 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "formattedTooltipContent",
     value: function formattedTooltipContent() {
-      return /*#__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, this.props.user.sources.map(function (s) {
-        return SourcesInfoMap.get(s);
-      }).filter(function (s) {
-        return s;
-      }).map(function (_ref) {
-        var key = _ref.key,
-            icon = _ref.icon,
-            label = _ref.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)));
-      })));
+      var _this$props$user2 = this.props.user,
+          id = _this$props$user2.id,
+          sources = _this$props$user2.sources;
+      return /*#__PURE__*/_react.default.createElement(_ExternalUserSourcesContainer.ExternalUserSourcesContainer, {
+        accountId: id,
+        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)));
+        }))));
+      });
     }
   }]);
   return ExternalUserOption;

package/dist/cjs/components/ExternalUserSourcesContainer.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExternalUserSourcesContainer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _UserSourceProvider = require("../clients/UserSourceProvider");
+
+var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(_ref) {
+  var children = _ref.children,
+      accountId = _ref.accountId,
+      _ref$initialSources = _ref.initialSources,
+      initialSources = _ref$initialSources === void 0 ? [] : _ref$initialSources;
+
+  var _useUserSource = (0, _UserSourceProvider.useUserSource)(accountId, initialSources),
+      sources = _useUserSource.sources,
+      sourcesLoading = _useUserSource.loading,
+      sourcesError = _useUserSource.error;
+
+  if (typeof children === 'function') {
+    return children({
+      sources: sources,
+      sourcesLoading: sourcesLoading,
+      sourcesError: sourcesError
+    });
+  }
+
+  return _react.default.Children.map(children, function (child) {
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      sources: sources,
+      sourcesLoading: sourcesLoading,
+      sourcesError: sourcesError
+    });
+  });
+};
+
+exports.ExternalUserSourcesContainer = ExternalUserSourcesContainer;

package/dist/cjs/components/UserPicker.js

@@ -41,6 +41,8 @@ var _creatableEmailSuggestion = require("./creatableEmailSuggestion");
 
 var _MessagesIntlProvider = _interopRequireDefault(require("./MessagesIntlProvider"));
 
+var _UserSourceProvider = require("./../clients/UserSourceProvider");
+
 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; }
@@ -77,7 +79,8 @@ var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
           menuPosition = _this$props.menuPosition,
           menuShouldBlockScroll = _this$props.menuShouldBlockScroll,
           captureMenuScroll = _this$props.captureMenuScroll,
-          closeMenuOnScroll = _this$props.closeMenuOnScroll;
+          closeMenuOnScroll = _this$props.closeMenuOnScroll,
+          loadUserSource = _this$props.loadUserSource;
       var width = this.props.width;
       var SelectComponent = allowEmail ? _select.CreatableSelect : _select.default;
       var creatableProps = suggestEmailsForDomain ? (0, _creatableEmailSuggestion.getCreatableSuggestedEmailProps)(suggestEmailsForDomain, isValidEmail) : (0, _creatable.getCreatableProps)(isValidEmail);
@@ -91,13 +94,15 @@ var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
       var pickerProps = allowEmail ? _objectSpread(_objectSpread(_objectSpread({}, defaultPickerProps), creatableProps), {}, {
         emailLabel: emailLabel
       }) : _objectSpread({}, defaultPickerProps);
-      return /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, /*#__PURE__*/_react.default.createElement(_BaseUserPicker.BaseUserPickerWithoutAnalytics, (0, _extends2.default)({}, this.props, {
+      return /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, /*#__PURE__*/_react.default.createElement(_UserSourceProvider.ExusUserSourceProvider, {
+        fetchUserSource: loadUserSource
+      }, /*#__PURE__*/_react.default.createElement(_BaseUserPicker.BaseUserPickerWithoutAnalytics, (0, _extends2.default)({}, this.props, {
         width: width,
         SelectComponent: SelectComponent,
         styles: (0, _styles.getStyles)(width, isMulti, this.props.styles),
         components: (0, _components.getComponents)(isMulti, anchor),
         pickerProps: pickerProps
-      })));
+      }))));
     }
   }]);
   return UserPickerWithoutAnalytics;

package/dist/cjs/components/i18n.js

@@ -73,6 +73,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Found in:',
     description: 'From where the external user is coming'
   },
+  externalUserSourcesError: {
+    id: 'fabric.elements.user-picker.external.sourced.error',
+    defaultMessage: "We can't connect you right now.",
+    description: "Error message when we can't fetch a user's import sources"
+  },
   slackProvider: {
     id: 'fabric.elements.user-picker.slack.provider',
     defaultMessage: 'Slack',

package/dist/cjs/version.json

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

package/dist/es2019/clients/UserSourceProvider.js

@@ -0,0 +1,56 @@
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+const ExusUserSourceContext = /*#__PURE__*/createContext({});
+export const ExusUserSourceProvider = ({
+  fetchUserSource,
+  children
+}) => /*#__PURE__*/React.createElement(ExusUserSourceContext.Provider, {
+  value: {
+    fetchUserSource
+  }
+}, children);
+export const useUserSource = (accountId, existingSources) => {
+  const {
+    fetchUserSource
+  } = useContext(ExusUserSourceContext);
+  const [sources, setUserSources] = useState(new Set(existingSources));
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const abortController = useMemo(() => {
+    if (typeof AbortController === 'undefined') {
+      return;
+    }
+
+    return new AbortController();
+  }, []);
+  useEffect(() => {
+    let isMounted = true;
+
+    const cleanup = () => {
+      abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+      isMounted = false;
+    };
+
+    if (!fetchUserSource) {
+      setLoading(false);
+      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);
+      });
+    }
+
+    return cleanup;
+  }, [fetchUserSource, accountId, sources, abortController]);
+  return {
+    sources: Array.from(sources),
+    loading,
+    error
+  };
+};

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

@@ -6,6 +6,7 @@ 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 { SlackIcon } from '../assets/slack';
 import { GoogleIcon } from '../assets/google';
@@ -13,6 +14,7 @@ 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 const ImageContainer = styled.span`
   height: 12px;
   width: 12px;
@@ -94,18 +96,15 @@ export class ExternalUserOption extends React.PureComponent {
       });
     });
 
-    _defineProperty(this, "getSourcesInfoTooltip", () => {
-      var _this$props$user$sour;
-
-      return ((_this$props$user$sour = this.props.user.sources) === null || _this$props$user$sour === void 0 ? void 0 : _this$props$user$sour.length) > 0 ? /*#__PURE__*/React.createElement(Tooltip, {
-        content: this.formattedTooltipContent(),
-        position: 'right-start'
-      }, /*#__PURE__*/React.createElement(EditorPanelIcon, {
-        label: "",
-        size: "large",
-        primaryColor: token('color.text.lowEmphasis', N200)
-      })) : undefined;
-    });
+    _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);
   }
 
   render() {
@@ -118,13 +117,29 @@ export class ExternalUserOption extends React.PureComponent {
   }
 
   formattedTooltipContent() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, this.props.user.sources.map(s => SourcesInfoMap.get(s)).filter(s => s).map(({
+    const {
+      user: {
+        id,
+        sources
+      }
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ExternalUserSourcesContainer, {
+      accountId: id,
+      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))))));
+    }, /*#__PURE__*/React.createElement(ImageContainer, null, icon), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, label))))))));
   }
 
 }

package/dist/es2019/components/ExternalUserSourcesContainer.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useUserSource } from '../clients/UserSourceProvider';
+export const ExternalUserSourcesContainer = ({
+  children,
+  accountId,
+  initialSources = []
+}) => {
+  const {
+    sources,
+    loading: sourcesLoading,
+    error: sourcesError
+  } = useUserSource(accountId, initialSources);
+
+  if (typeof children === 'function') {
+    return children({
+      sources,
+      sourcesLoading,
+      sourcesError
+    });
+  }
+
+  return React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
+    sources,
+    sourcesLoading,
+    sourcesError
+  }));
+};

package/dist/es2019/components/UserPicker.js

@@ -9,6 +9,7 @@ import { getComponents } from './components';
 import { getCreatableProps } from './creatable';
 import { getCreatableSuggestedEmailProps } from './creatableEmailSuggestion';
 import MessagesIntlProvider from './MessagesIntlProvider';
+import { ExusUserSourceProvider } from './../clients/UserSourceProvider';
 export class UserPickerWithoutAnalytics extends React.Component {
   render() {
     const {
@@ -22,7 +23,8 @@ export class UserPickerWithoutAnalytics extends React.Component {
       menuPosition,
       menuShouldBlockScroll,
       captureMenuScroll,
-      closeMenuOnScroll
+      closeMenuOnScroll,
+      loadUserSource
     } = this.props;
     const width = this.props.width;
     const SelectComponent = allowEmail ? CreatableSelect : Select;
@@ -39,13 +41,15 @@ export class UserPickerWithoutAnalytics extends React.Component {
       emailLabel
     } : { ...defaultPickerProps
     };
-    return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
+    return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(ExusUserSourceProvider, {
+      fetchUserSource: loadUserSource
+    }, /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
       width: width,
       SelectComponent: SelectComponent,
       styles: getStyles(width, isMulti, this.props.styles),
       components: getComponents(isMulti, anchor),
       pickerProps: pickerProps
-    })));
+    }))));
   }
 
 }

package/dist/es2019/components/i18n.js

@@ -65,6 +65,11 @@ export const messages = defineMessages({
     defaultMessage: 'Found in:',
     description: 'From where the external user is coming'
   },
+  externalUserSourcesError: {
+    id: 'fabric.elements.user-picker.external.sourced.error',
+    defaultMessage: "We can't connect you right now.",
+    description: "Error message when we can't fetch a user's import sources"
+  },
   slackProvider: {
     id: 'fabric.elements.user-picker.slack.provider',
     defaultMessage: 'Slack',

package/dist/es2019/version.json

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

package/dist/esm/clients/UserSourceProvider.js

@@ -0,0 +1,73 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+var ExusUserSourceContext = /*#__PURE__*/createContext({});
+export var ExusUserSourceProvider = function ExusUserSourceProvider(_ref) {
+  var fetchUserSource = _ref.fetchUserSource,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(ExusUserSourceContext.Provider, {
+    value: {
+      fetchUserSource: fetchUserSource
+    }
+  }, children);
+};
+export var useUserSource = function useUserSource(accountId, existingSources) {
+  var _useContext = useContext(ExusUserSourceContext),
+      fetchUserSource = _useContext.fetchUserSource;
+
+  var _useState = useState(new Set(existingSources)),
+      _useState2 = _slicedToArray(_useState, 2),
+      sources = _useState2[0],
+      setUserSources = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      error = _useState6[0],
+      setError = _useState6[1];
+
+  var abortController = useMemo(function () {
+    if (typeof AbortController === 'undefined') {
+      return;
+    }
+
+    return new AbortController();
+  }, []);
+  useEffect(function () {
+    var isMounted = true;
+
+    var cleanup = function cleanup() {
+      abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+      isMounted = false;
+    };
+
+    if (!fetchUserSource) {
+      setLoading(false);
+      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);
+      });
+    }
+
+    return cleanup;
+  }, [fetchUserSource, accountId, sources, abortController]);
+  return {
+    sources: Array.from(sources),
+    loading: loading,
+    error: error
+  };
+};

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

@@ -21,6 +21,7 @@ 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 { SlackIcon } from '../assets/slack';
 import { GoogleIcon } from '../assets/google';
@@ -28,6 +29,7 @@ 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"])));
 export var SourceWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: 4px;\n  display: flex;\n  align-items: center;\n"])));
@@ -106,12 +108,11 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "getSourcesInfoTooltip", function () {
-      var _this$props$user$sour;
-
-      return ((_this$props$user$sour = _this.props.user.sources) === null || _this$props$user$sour === void 0 ? void 0 : _this$props$user$sour.length) > 0 ? /*#__PURE__*/React.createElement(Tooltip, {
+      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)
@@ -134,18 +135,32 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "formattedTooltipContent",
     value: function formattedTooltipContent() {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, this.props.user.sources.map(function (s) {
-        return SourcesInfoMap.get(s);
-      }).filter(function (s) {
-        return s;
-      }).map(function (_ref) {
-        var key = _ref.key,
-            icon = _ref.icon,
-            label = _ref.label;
-        return /*#__PURE__*/React.createElement(SourceWrapper, {
-          key: key
-        }, /*#__PURE__*/React.createElement(ImageContainer, null, icon), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, label)));
-      })));
+      var _this$props$user2 = this.props.user,
+          id = _this$props$user2.id,
+          sources = _this$props$user2.sources;
+      return /*#__PURE__*/React.createElement(ExternalUserSourcesContainer, {
+        accountId: id,
+        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)));
+        }))));
+      });
     }
   }]);
 

package/dist/esm/components/ExternalUserSourcesContainer.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useUserSource } from '../clients/UserSourceProvider';
+export var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(_ref) {
+  var children = _ref.children,
+      accountId = _ref.accountId,
+      _ref$initialSources = _ref.initialSources,
+      initialSources = _ref$initialSources === void 0 ? [] : _ref$initialSources;
+
+  var _useUserSource = useUserSource(accountId, initialSources),
+      sources = _useUserSource.sources,
+      sourcesLoading = _useUserSource.loading,
+      sourcesError = _useUserSource.error;
+
+  if (typeof children === 'function') {
+    return children({
+      sources: sources,
+      sourcesLoading: sourcesLoading,
+      sourcesError: sourcesError
+    });
+  }
+
+  return React.Children.map(children, function (child) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      sources: sources,
+      sourcesLoading: sourcesLoading,
+      sourcesError: sourcesError
+    });
+  });
+};

package/dist/esm/components/UserPicker.js

@@ -23,6 +23,7 @@ import { getComponents } from './components';
 import { getCreatableProps } from './creatable';
 import { getCreatableSuggestedEmailProps } from './creatableEmailSuggestion';
 import MessagesIntlProvider from './MessagesIntlProvider';
+import { ExusUserSourceProvider } from './../clients/UserSourceProvider';
 export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   _inherits(UserPickerWithoutAnalytics, _React$Component);
 
@@ -48,7 +49,8 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
           menuPosition = _this$props.menuPosition,
           menuShouldBlockScroll = _this$props.menuShouldBlockScroll,
           captureMenuScroll = _this$props.captureMenuScroll,
-          closeMenuOnScroll = _this$props.closeMenuOnScroll;
+          closeMenuOnScroll = _this$props.closeMenuOnScroll,
+          loadUserSource = _this$props.loadUserSource;
       var width = this.props.width;
       var SelectComponent = allowEmail ? CreatableSelect : Select;
       var creatableProps = suggestEmailsForDomain ? getCreatableSuggestedEmailProps(suggestEmailsForDomain, isValidEmail) : getCreatableProps(isValidEmail);
@@ -62,13 +64,15 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
       var pickerProps = allowEmail ? _objectSpread(_objectSpread(_objectSpread({}, defaultPickerProps), creatableProps), {}, {
         emailLabel: emailLabel
       }) : _objectSpread({}, defaultPickerProps);
-      return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
+      return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(ExusUserSourceProvider, {
+        fetchUserSource: loadUserSource
+      }, /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
         width: width,
         SelectComponent: SelectComponent,
         styles: getStyles(width, isMulti, this.props.styles),
         components: getComponents(isMulti, anchor),
         pickerProps: pickerProps
-      })));
+      }))));
     }
   }]);
 

package/dist/esm/components/i18n.js

@@ -65,6 +65,11 @@ export var messages = defineMessages({
     defaultMessage: 'Found in:',
     description: 'From where the external user is coming'
   },
+  externalUserSourcesError: {
+    id: 'fabric.elements.user-picker.external.sourced.error',
+    defaultMessage: "We can't connect you right now.",
+    description: "Error message when we can't fetch a user's import sources"
+  },
   slackProvider: {
     id: 'fabric.elements.user-picker.slack.provider',
     defaultMessage: 'Slack',

package/dist/esm/version.json

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

package/dist/types/clients/UserSourceProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LoadUserSource, UserSource } from '../types';
+export interface UserSourceContext {
+    fetchUserSource?: LoadUserSource;
+}
+export declare const ExusUserSourceProvider: React.FC<UserSourceContext>;
+export declare const useUserSource: (accountId: string, existingSources?: UserSource[] | undefined) => {
+    sources: UserSource[];
+    loading: boolean;
+    error: string | null;
+};

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

@@ -48,7 +48,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private getAppearance;
     render(): JSX.Element;
 }
-export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Pick<BaseUserPickerProps, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps">, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps"> & Partial<Pick<Pick<BaseUserPickerProps, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps">, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Pick<BaseUserPickerProps, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps">, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps"> & Partial<Pick<Pick<BaseUserPickerProps, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps">, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
     isMulti: boolean;
     subtle: boolean;
     noBorder: boolean;

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

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { UserSource } from '../types';
+declare type SourcesChildrenFunc = ({ sources, sourcesLoading, sourcesError, }: {
+    sources: UserSource[];
+    sourcesLoading: boolean;
+    sourcesError: string | null;
+}) => ReactNode;
+interface SourcesContainerProps {
+    accountId: string;
+    initialSources: UserSource[];
+    children: SourcesChildrenFunc;
+}
+export declare const ExternalUserSourcesContainer: React.FC<SourcesContainerProps>;
+export {};

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

@@ -27,7 +27,7 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
     };
     render(): JSX.Element;
 }
-export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Pick<PopupUserPickerProps, "placeholder" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "offset" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">, "placeholder" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle"> & Partial<Pick<Pick<PopupUserPickerProps, "placeholder" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "offset" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">, "isMulti" | "offset" | "width" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Pick<PopupUserPickerProps, "placeholder" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "offset" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">, "placeholder" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle"> & Partial<Pick<Pick<PopupUserPickerProps, "placeholder" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "offset" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">, "isMulti" | "offset" | "width" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;

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

@@ -7,7 +7,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
     };
     render(): JSX.Element;
 }
-export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Pick<UserPickerProps, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions">, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions"> & Partial<Pick<Pick<UserPickerProps, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions">, "isMulti" | "width">> & Partial<Pick<{
+export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Pick<UserPickerProps, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions">, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions"> & Partial<Pick<Pick<UserPickerProps, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions">, "isMulti" | "width">> & Partial<Pick<{
     width: number;
     isMulti: boolean;
 }, never>> & React.RefAttributes<any>>;

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

@@ -64,6 +64,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    externalUserSourcesError: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     slackProvider: {
         id: string;
         defaultMessage: string;

package/dist/types/types.d.ts

@@ -39,6 +39,13 @@ export declare type UserPickerProps = WithAnalyticsEventsProps & {
      * sessionId?: user picker session identifier, used to track success metric for users providers
      */
     loadOptions?: LoadOptions;
+    /**
+     * Function used to load user source if they are an external user.
+     * accepts two params:
+     * accountId: account ID of the user to lookup sources
+     * signal: AbortController signal to abort the request if the tooltip is closed
+     */
+    loadUserSource?: LoadUserSource;
     /** Callback for value change events fired whenever a selection is inserted or removed. */
     onChange?: OnChange;
     /** To enable multi user picker. */
@@ -253,6 +260,13 @@ export declare type Option<Data = OptionData> = {
     value: string;
     data: Data;
 };
+export interface UserSourceResult {
+    sourceId: string;
+    sourceType: UserSource;
+}
+export interface LoadUserSource {
+    (accountId: string, signal?: AbortSignal): Promise<UserSourceResult[]>;
+}
 export interface LoadOptions {
     (searchText?: string, sessionId?: string): Promisable<OptionData | OptionData[]> | Iterable<Promisable<OptionData[] | OptionData> | OptionData | OptionData[]>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,6 +32,7 @@
     "@atlaskit/lozenge": "^11.0.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/select": "^15.2.0",
+    "@atlaskit/spinner": "^15.1.4",
     "@atlaskit/theme": "^12.0.0",
     "@atlaskit/tokens": "^0.4.0",
     "@atlaskit/tooltip": "^17.5.0",
@@ -52,11 +53,17 @@
     "@atlaskit/docs": "*",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/modal-dialog": "^12.2.0",
+    "@atlaskit/radio": "^5.3.4",
     "@atlaskit/range": "^5.0.11",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/textfield": "^5.0.0",
     "@atlaskit/util-data-test": "^17.0.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",
+    "@testing-library/react": "^8.0.1",
+    "@testing-library/react-hooks": "^1.0.4",
+    "@testing-library/user-event": "10.4.0",
     "@types/uuid": "^3.4.4",
     "enzyme": "^3.10.0",
     "enzyme-react-intl": "^2.0.6",