@atlaskit/user-picker 8.0.0 → 8.3.0

package/dist/cjs/components/MessagesIntlProvider.js

@@ -55,8 +55,8 @@ var useI18n = function useI18n(locale) {
 };
 
 var MessagesIntlProvider = function MessagesIntlProvider(props) {
-  var intl = props.intl,
-      children = props.children;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var children = props.children;
   var messages = useI18n(intl.locale);
   var mergedMessages = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({}, intl.messages), messages);
@@ -67,6 +67,5 @@ var MessagesIntlProvider = function MessagesIntlProvider(props) {
   }, children);
 };
 
-var _default = (0, _reactIntlNext.injectIntl)(MessagesIntlProvider);
-
+var _default = MessagesIntlProvider;
 exports.default = _default;

package/dist/cjs/components/Option.js

@@ -11,28 +11,39 @@ var _select = require("@atlaskit/select");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _EmailOption = require("./EmailOption");
+var _UserOption = require("./UserOption");
 
-var _TeamOption = require("./TeamOption");
+var _ExternalUserOption = _interopRequireDefault(require("./ExternalUserOption"));
 
-var _UserOption = require("./UserOption");
+var _TeamOption = _interopRequireDefault(require("./TeamOption"));
 
-var _GroupOption = require("./GroupOption");
+var _GroupOption = _interopRequireDefault(require("./GroupOption"));
 
-var _ExternalUserOption = require("./ExternalUserOption");
+var _EmailOption = _interopRequireDefault(require("./EmailOption"));
 
 var _utils = require("./utils");
 
 var _emailValidation = require("./emailValidation");
 
-var dataOption = function dataOption(_ref) {
+var defaultOption = function defaultOption(_ref) {
   var data = _ref.data.data,
       isSelected = _ref.isSelected,
-      status = _ref.status,
-      selectProps = _ref.selectProps;
+      status = _ref.status;
+  return /*#__PURE__*/_react.default.createElement(_UserOption.UserOption, {
+    user: data,
+    status: status,
+    isSelected: isSelected
+  });
+};
+
+var dataOption = function dataOption(_ref2) {
+  var data = _ref2.data.data,
+      isSelected = _ref2.isSelected,
+      status = _ref2.status,
+      selectProps = _ref2.selectProps;
 
   if ((0, _utils.isExternalUser)(data)) {
-    return /*#__PURE__*/_react.default.createElement(_ExternalUserOption.ExternalUserOption, {
+    return /*#__PURE__*/_react.default.createElement(_ExternalUserOption.default, {
       user: data,
       status: status,
       isSelected: isSelected
@@ -48,7 +59,7 @@ var dataOption = function dataOption(_ref) {
   }
 
   if ((0, _utils.isEmail)(data)) {
-    return /*#__PURE__*/_react.default.createElement(_EmailOption.EmailOption, {
+    return /*#__PURE__*/_react.default.createElement(_EmailOption.default, {
       email: data,
       emailValidity: (0, _emailValidation.isValidEmail)(data.id),
       isSelected: isSelected,
@@ -57,14 +68,14 @@ var dataOption = function dataOption(_ref) {
   }
 
   if ((0, _utils.isTeam)(data)) {
-    return /*#__PURE__*/_react.default.createElement(_TeamOption.TeamOption, {
+    return /*#__PURE__*/_react.default.createElement(_TeamOption.default, {
       team: data,
       isSelected: isSelected
     });
   }
 
   if ((0, _utils.isGroup)(data)) {
-    return /*#__PURE__*/_react.default.createElement(_GroupOption.GroupOption, {
+    return /*#__PURE__*/_react.default.createElement(_GroupOption.default, {
       group: data,
       isSelected: isSelected
     });
@@ -74,7 +85,9 @@ var dataOption = function dataOption(_ref) {
 };
 
 var Option = function Option(props) {
-  return /*#__PURE__*/_react.default.createElement(_select.components.Option, props, dataOption(props));
+  return /*#__PURE__*/_react.default.createElement(_select.components.Option, props, /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
+    fallback: defaultOption(props)
+  }, dataOption(props)));
 };
 
 exports.Option = Option;

package/dist/cjs/components/PopupControl.js

@@ -25,6 +25,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants = require("@atlaskit/theme/constants");
 
 var _select = require("@atlaskit/select");
@@ -52,8 +54,8 @@ var lineHeight = innerHeight / fontSize;
 var ControlWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0px ", "px ", "px;\n"])), spacing, spacing);
 
 var getColor = (0, _components.themed)({
-  light: _colors.N200,
-  dark: _colors.DN90
+  light: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
+  dark: (0, _tokens.token)('color.text.lowEmphasis', _colors.DN90)
 });
 
 var getPadding = function getPadding() {

package/dist/cjs/components/TeamOption/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _react = _interopRequireDefault(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 || (0, _typeof2.default)(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 AsyncTeamOption = /*#__PURE__*/_react.default.lazy(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./main'));
+  }).then(function (module) {
+    return {
+      default: module.TeamOption
+    };
+  });
+});
+
+var _default = AsyncTeamOption;
+exports.default = _default;

package/dist/cjs/components/{TeamOption.js → TeamOption/main.js}

@@ -25,17 +25,19 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _AvatarItemOption = require("./AvatarItemOption");
+var _AvatarItemOption = require(".././AvatarItemOption");
 
-var _HighlightText = require("./HighlightText");
+var _HighlightText = require(".././HighlightText");
 
-var _i18n = require("./i18n");
+var _i18n = require(".././i18n");
 
-var _SizeableAvatar = require("./SizeableAvatar");
+var _SizeableAvatar = require(".././SizeableAvatar");
 
 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); }; }
 
@@ -62,7 +64,7 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$team.highlight;
       return [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? _colors.B400 : _colors.N800
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
       }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -102,7 +104,7 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: isSelected ? _colors.B400 : _colors.N200
+        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
       }, message);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {

package/dist/cjs/components/UserOption.js

@@ -23,6 +23,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _AvatarItemOption = require("./AvatarItemOption");
@@ -59,7 +61,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$user.highlight;
       var result = [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? _colors.B400 : _colors.N800
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
       }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -68,7 +70,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
         result.push( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
           key: "publicName"
         }, ' ', /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-          color: _this.props.isSelected ? _colors.B400 : _colors.N200
+          color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
         }, "(", /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
@@ -78,7 +80,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function () {
       return _this.props.user.byline ? /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: _this.props.isSelected ? _colors.B400 : _colors.N200
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
       }, _this.props.user.byline) : undefined;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {

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/assets/github.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
+var _tokens = require("@atlaskit/tokens");
+
 function GitHubIcon(props) {
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
     width: "12",
@@ -22,6 +24,6 @@ function GitHubIcon(props) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M11.9778 0C5.3635 0 0 5.45261 0 12.179C0 17.5601 3.432 22.1253 8.19114 23.7357C8.78975 23.8484 9.00952 23.4715 9.00952 23.1498C9.00952 22.8594 8.99841 21.9 8.99326 20.8823C5.66103 21.6191 4.95789 19.4454 4.95789 19.4454C4.41303 18.0376 3.62796 17.6633 3.62796 17.6633C2.54122 16.9074 3.70988 16.923 3.70988 16.923C4.91266 17.0089 5.54598 18.178 5.54598 18.178C6.61428 20.0399 8.34803 19.5016 9.03154 19.1904C9.13904 18.4033 9.44945 17.866 9.792 17.5619C7.13157 17.2539 4.33487 16.2096 4.33487 11.5429C4.33487 10.2133 4.80278 9.12682 5.56899 8.27391C5.44463 7.96716 5.03464 6.72844 5.68502 5.05087C5.68502 5.05087 6.69084 4.72354 8.97976 6.29927C9.9352 6.02942 10.9599 5.89409 11.9778 5.88945C12.9957 5.89409 14.0212 6.02942 14.9784 6.29927C17.2645 4.72354 18.269 5.05087 18.269 5.05087C18.9209 6.72844 18.5107 7.96716 18.3864 8.27391C19.1544 9.12682 19.6191 10.2133 19.6191 11.5429C19.6191 16.2207 16.8171 17.2507 14.1499 17.5522C14.5795 17.9301 14.9623 18.6713 14.9623 19.8076C14.9623 21.4371 14.9484 22.7487 14.9484 23.1498C14.9484 23.4739 15.164 23.8537 15.7712 23.7341C20.5277 22.1219 23.9554 17.5582 23.9554 12.179C23.9554 5.45261 18.5927 0 11.9778 0Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }));
 }

package/dist/cjs/components/assets/google.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
+var _tokens = require("@atlaskit/tokens");
+
 function GoogleIcon(props) {
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
     width: "12",
@@ -22,21 +24,21 @@ function GoogleIcon(props) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8.32062 3.21332L10.014 1.55999C8.97396 0.593331 7.62063 0 6.00062 0C3.65396 0 1.62729 1.34666 0.640625 3.30665L2.58062 4.81331C3.06729 3.36665 4.41396 2.31999 6.00062 2.31999C7.12729 2.31999 7.88729 2.80665 8.32062 3.21332Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M11.76 6.13291C11.76 5.63958 11.72 5.27958 11.6333 4.90625H6V7.13291H9.30667C9.24 7.68624 8.88 8.51957 8.08 9.07957L9.97333 10.5462C11.1067 9.49956 11.76 7.95957 11.76 6.13291V6.13291V6.13291Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M2.58667 7.18662C2.46 6.81329 2.38667 6.41329 2.38667 5.99996C2.38667 5.58663 2.46 5.18663 2.58 4.8133L0.64 3.30664C0.233333 4.11997 0 5.0333 0 5.99996C0 6.96662 0.233333 7.87995 0.64 8.69328L2.58667 7.18662V7.18662Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M6.00079 12.0008C7.62079 12.0008 8.98079 11.4675 9.97413 10.5475L8.08079 9.08083C7.57413 9.43416 6.89413 9.68082 6.00079 9.68082C4.41413 9.68082 3.06746 8.63416 2.58746 7.1875L0.647461 8.69416C1.63413 10.6542 3.65413 12.0008 6.00079 12.0008V12.0008V12.0008Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }));
 }

package/dist/cjs/components/assets/microsoft.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
+var _tokens = require("@atlaskit/tokens");
+
 function MicrosoftIcon(props) {
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
     width: "12",
@@ -22,21 +24,21 @@ function MicrosoftIcon(props) {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M0 0H5.70233V5.7023H0V0Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M6.29785 0H12.0002V5.7023H6.29785V0Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M0 6.29688H5.70233V11.9992H0V6.29688Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M6.29785 6.29688H12.0002V11.9992H6.29785V6.29688Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   })), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
     id: "clip0"
   }, /*#__PURE__*/_react.default.createElement("rect", {
     width: "12",
     height: "11.9999",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }))));
 }

package/dist/cjs/components/assets/slack.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
+var _tokens = require("@atlaskit/tokens");
+
 function SlackIcon(props) {
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
     width: "12",
@@ -22,33 +24,33 @@ function SlackIcon(props) {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M2.51653 7.5688C2.51653 8.26133 1.9508 8.82706 1.25826 8.82706C0.565731 8.82706 0 8.26133 0 7.5688C0 6.87627 0.565731 6.31055 1.25826 6.31055H2.51653V7.5688Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M3.15039 7.5688C3.15039 6.87627 3.71612 6.31055 4.40865 6.31055C5.10119 6.31055 5.66692 6.87627 5.66692 7.5688V10.7193C5.66692 11.4119 5.10119 11.9776 4.40865 11.9776C3.71612 11.9776 3.15039 11.4119 3.15039 10.7193V7.5688Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M4.40865 2.51651C3.71612 2.51651 3.15039 1.95079 3.15039 1.25826C3.15039 0.565728 3.71612 0 4.40865 0C5.10119 0 5.66692 0.565728 5.66692 1.25826V2.51651H4.40865Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M4.4088 3.15039C5.10133 3.15039 5.66706 3.71612 5.66706 4.40865C5.66706 5.10118 5.10133 5.6669 4.4088 5.6669H1.25826C0.565731 5.6669 0 5.10118 0 4.40865C0 3.71612 0.565731 3.15039 1.25826 3.15039H4.4088Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M9.46094 4.40865C9.46094 3.71612 10.0267 3.15039 10.7192 3.15039C11.4117 3.15039 11.9775 3.71612 11.9775 4.40865C11.9775 5.10118 11.4117 5.6669 10.7192 5.6669H9.46094V4.40865Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M8.8261 4.40878C8.8261 5.10131 8.26036 5.66704 7.56783 5.66704C6.8753 5.66704 6.30957 5.10131 6.30957 4.40878V1.25826C6.30957 0.565728 6.8753 0 7.56783 0C8.26036 0 8.8261 0.565728 8.8261 1.25826V4.40878Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M7.56881 9.46094C8.26134 9.46094 8.82707 10.0267 8.82707 10.7192C8.82707 11.4117 8.26134 11.9775 7.56881 11.9775C6.87628 11.9775 6.31055 11.4117 6.31055 10.7192V9.46094H7.56881Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M7.56881 8.82706C6.87628 8.82706 6.31055 8.26133 6.31055 7.5688C6.31055 6.87627 6.87628 6.31055 7.56881 6.31055H10.7193C11.4119 6.31055 11.9776 6.87627 11.9776 7.5688C11.9776 8.26133 11.4119 8.82706 10.7193 8.82706H7.56881Z",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   })), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
     id: "clip0"
   }, /*#__PURE__*/_react.default.createElement("rect", {
     width: "12",
     height: "11.9999",
-    fill: "white"
+    fill: (0, _tokens.token)('color.text.onBold', 'white')
   }))));
 }

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/components/styles.js

@@ -15,6 +15,8 @@ var _avatar = require("@atlaskit/avatar");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
 var _utils = require("./utils");
@@ -46,14 +48,14 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        borderColor: state.isFocused ? css.borderColor : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : _colors.N40,
-        backgroundColor: state.isFocused ? css['backgroundColor'] : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? _colors.N10 : _colors.N20,
+        borderColor: state.isFocused ? (0, _tokens.token)('color.border.neutral', css.borderColor) : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : (0, _tokens.token)('color.border.neutral', _colors.N40),
+        backgroundColor: state.isFocused ? (0, _tokens.token)('color.background.default', css['backgroundColor']) : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.N10) : (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: state.isFocused ? css[':hover'] ? css[':hover'].borderColor : _colors.B100 : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? _colors.R50 : _colors.N30 : _colors.N40,
-          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? _colors.R50 : state.isFocused ? css[':hover'] ? css[':hover'].backgroundColor : _colors.N0 : state.isDisabled ? _colors.N10 : _colors.N30
+          borderColor: state.isFocused ? css[':hover'] ? (0, _tokens.token)('color.border.focus', css[':hover'].borderColor) : (0, _tokens.token)('color.border.focus', _colors.B100) : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? (0, _tokens.token)('color.iconBorder.danger', _colors.R50) : (0, _tokens.token)('color.border.neutral', _colors.N30) : (0, _tokens.token)('color.border.neutral', _colors.N40),
+          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? (0, _tokens.token)('color.background.subtleDanger.resting', _colors.R50) : state.isFocused ? css[':hover'] ? (0, _tokens.token)('color.background.default', css[':hover'].backgroundColor) : (0, _tokens.token)('color.background.default', _colors.N0) : state.isDisabled ? (0, _tokens.token)('color.background.disabled', _colors.N10) : (0, _tokens.token)('color.background.default', _colors.N30)
         }),
         padding: 0,
         minHeight: isCompact ? 'none' : 44,
@@ -76,7 +78,7 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
         paddingTop: 0,
         padding: 0,
         ':hover': {
-          color: _colors.R400
+          color: (0, _tokens.token)('color.text.danger', _colors.R400)
         }
       });
     },
@@ -172,14 +174,14 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
         paddingLeft: isMulti ? 0 : AVATAR_PADDING,
         '& input::placeholder': {
           /* Chrome, Firefox, Opera, Safari 10.1+ */
-          color: _colors.N100,
+          color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N100),
           opacity: 1
           /* Firefox */
 
         },
         '& input:-ms-input-placeholder': {
           /* Internet Explorer 10-11 */
-          color: _colors.N100
+          color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N100)
         }
       });
     }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "8.0.0",
+	"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/AddOptionAvatar.js

@@ -1,12 +1,12 @@
 import EmailIcon from '@atlaskit/icon/glyph/email';
 import { N40, N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import React from 'react';
 import styled from 'styled-components';
 const EmailAvatarWrapper = styled.span`
-  color: black;
   padding: ${props => props.isLozenge ? 0 : 4}px;
 
-  background-color: ${N40};
+  background-color: ${token('color.background.subtleNeutral.resting', N40)};
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -20,6 +20,6 @@ export const AddOptionAvatar = ({
   }, /*#__PURE__*/React.createElement(EmailIcon, {
     label: label,
     size: isLozenge ? 'small' : 'medium',
-    primaryColor: N500
+    primaryColor: token('color.text.mediumEmphasis', N500)
   }));
 };

package/dist/es2019/components/AvatarItemOption.js

@@ -1,8 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
 import { B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Lozenge from '@atlaskit/lozenge';
-import Tooltip from '@atlaskit/tooltip';
+const AsyncTooltip = /*#__PURE__*/React.lazy(() => import(
+/* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */
+'@atlaskit/tooltip').then(module => {
+  return {
+    default: module.default
+  };
+}));
 const Wrapper = styled.span`
   align-items: center;
   box-sizing: border-box;
@@ -15,13 +22,13 @@ const Wrapper = styled.span`
 `;
 const Text = styled.span`
   margin: 0;
-  color: ${B400};
+  color: ${token('color.text.selected', B400)};
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   ${({
   secondary
-}) => secondary && `color: ${B400}; font-size: 0.85em;`}
+}) => secondary && `color: ${token('color.text.selected', B400)}; font-size: 0.85em;`}
 `;
 const AdditionalInfo = styled.span`
   float: right;
@@ -53,12 +60,14 @@ export const AvatarItemOption = ({
   }
 }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, primaryText), /*#__PURE__*/React.createElement(AdditionalInfo, {
   withTooltip: Boolean(sourcesInfoTooltip)
-}, !sourcesInfoTooltip && lozenge && lozenge.text && (lozenge.tooltip ?
+}, !sourcesInfoTooltip && (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ?
 /*#__PURE__*/
 // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
 // Lozenge text) or tooltip won't work
-React.createElement(Tooltip, {
+React.createElement(React.Suspense, {
+  fallback: /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)
+}, /*#__PURE__*/React.createElement(AsyncTooltip, {
   content: lozenge.tooltip
-}, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)) : /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)), sourcesInfoTooltip)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+}, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text))) : /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)), sourcesInfoTooltip)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
   secondary: true
 }, secondaryText))));