@atlaskit/user-picker 8.2.0 → 8.3.2

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, shouldFetchSources, 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 || !shouldFetchSources) {
+      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, shouldFetchSources]);
+  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,31 @@ 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,
+        requiresSourceHydration,
+        sources
+      }
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ExternalUserSourcesContainer, {
+      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))))));
+    }, /*#__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,28 @@
+import React from 'react';
+import { useUserSource } from '../clients/UserSourceProvider';
+export const ExternalUserSourcesContainer = ({
+  children,
+  accountId,
+  shouldFetchSources,
+  initialSources = []
+}) => {
+  const {
+    sources,
+    loading: sourcesLoading,
+    error: sourcesError
+  } = useUserSource(accountId, shouldFetchSources, 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/components/smart-user-picker/config/index.js

@@ -12,7 +12,7 @@ const LOCAL_CONFIG = {
 };
 const PRD_CONFIG = {
   getRecommendationServiceUrl(baseUrl) {
-    return baseUrl ? `/${baseUrl}/gateway/api/v1/recommendations` : '/gateway/api/v1/recommendations';
+    return baseUrl ? `${baseUrl}/gateway/api/v1/recommendations` : '/gateway/api/v1/recommendations';
   },
 
   getUsersServiceUrl(productKey) {

package/dist/es2019/version.json

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

package/dist/esm/analytics.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import uuid from 'uuid/v4';

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, shouldFetchSources, 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 || !shouldFetchSources) {
+      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, shouldFetchSources]);
+  return {
+    sources: Array.from(sources),
+    loading: loading,
+    error: error
+  };
+};

package/dist/esm/components/ClearIndicator.js

@@ -7,9 +7,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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); }; }
 

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,34 @@ 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,
+          requiresSourceHydration = _this$props$user2.requiresSourceHydration,
+          sources = _this$props$user2.sources;
+      return /*#__PURE__*/React.createElement(ExternalUserSourcesContainer, {
+        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)));
+        }))));
+      });
     }
   }]);
 

package/dist/esm/components/ExternalUserSourcesContainer.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useUserSource } from '../clients/UserSourceProvider';
+export var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(_ref) {
+  var children = _ref.children,
+      accountId = _ref.accountId,
+      shouldFetchSources = _ref.shouldFetchSources,
+      _ref$initialSources = _ref.initialSources,
+      initialSources = _ref$initialSources === void 0 ? [] : _ref$initialSources;
+
+  var _useUserSource = useUserSource(accountId, shouldFetchSources, 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/MessagesIntlProvider.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useMemo } from 'react';
 import { useIntl, IntlProvider } from 'react-intl-next';

package/dist/esm/components/MultiValue.js

@@ -8,6 +8,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children", "innerProps"];
 
 var _templateObject, _templateObject2;
 
@@ -124,7 +125,7 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
       var _this$props3 = this.props,
           children = _this$props3.children,
           innerProps = _this$props3.innerProps,
-          rest = _objectWithoutProperties(_this$props3, ["children", "innerProps"]);
+          rest = _objectWithoutProperties(_this$props3, _excluded);
 
       return /*#__PURE__*/React.createElement(components.MultiValue, _extends({}, rest, {
         innerProps: {

package/dist/esm/components/MultiValueContainer.js

@@ -6,10 +6,11 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "innerProps"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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); }; }
 
@@ -123,7 +124,7 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props = this.props,
           children = _this$props.children,
           innerProps = _this$props.innerProps,
-          valueContainerProps = _objectWithoutProperties(_this$props, ["children", "innerProps"]);
+          valueContainerProps = _objectWithoutProperties(_this$props, _excluded);
 
       var props = _objectSpread(_objectSpread({}, valueContainerProps), {}, {
         innerProps: this.valueContainerInnerProps

package/dist/esm/components/SingleValue.js

@@ -1,5 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["ref"];
 
 var _templateObject;
 
@@ -26,7 +27,7 @@ export var SingleValue = function SingleValue(props) {
     primaryText: label
   }, function (_ref) {
     var ref = _ref.ref,
-        props = _objectWithoutProperties(_ref, ["ref"]);
+        props = _objectWithoutProperties(_ref, _excluded);
 
     return /*#__PURE__*/React.createElement(AvatarItemComponent, props);
   }) : null;

package/dist/esm/components/SingleValueContainer.js

@@ -7,6 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children"];
 
 var _templateObject;
 
@@ -68,7 +69,7 @@ export var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props2 = this.props,
           children = _this$props2.children,
-          valueContainerProps = _objectWithoutProperties(_this$props2, ["children"]);
+          valueContainerProps = _objectWithoutProperties(_this$props2, _excluded);
 
       return /*#__PURE__*/React.createElement(components.ValueContainer, valueContainerProps, /*#__PURE__*/React.createElement(PlaceholderIconContainer, null, this.renderAvatar()), children);
     }

package/dist/esm/components/SizeableAvatar.js

@@ -1,7 +1,7 @@
-import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 
 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); }; }
@@ -11,9 +11,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import Avatar from '@atlaskit/avatar';
 import React from 'react';
 import { getAvatarSize } from './utils';
-export var Props = function Props() {
+export var Props = /*#__PURE__*/_createClass(function Props() {
   _classCallCheck(this, Props);
-};
+});
 export var SizeableAvatar = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(SizeableAvatar, _React$PureComponent);
 

package/dist/esm/components/UserPicker.js

@@ -6,9 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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); }; }
 
@@ -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/components.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import memoizeOne from 'memoize-one';
 import { ClearIndicator } from './ClearIndicator';

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',