@atlaskit/user-picker 8.1.0 → 8.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/user-picker
 
+## 8.2.0
+
+### Minor Changes
+
+- [`35b466f6fb5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/35b466f6fb5) - Asynchronously load user options in user-picker
+
 ## 8.1.0
 
 ### Minor Changes

package/dist/cjs/components/AvatarItemOption.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TextWrapper = exports.AvatarItemOption = void 0;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -19,10 +21,22 @@ var _tokens = require("@atlaskit/tokens");
 
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
+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 AsyncTooltip = /*#__PURE__*/_react.default.lazy(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/tooltip'));
+  }).then(function (module) {
+    return {
+      default: module.default
+    };
+  });
+});
+
 var Wrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  line-height: 1;\n  outline: none;\n  margin: 0;\n  width: 100%;\n  cursor: pointer;\n"])));
 
 var Text = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n  color: ", ";\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ", "\n"])), (0, _tokens.token)('color.text.selected', _colors.B400), function (_ref) {
@@ -58,13 +72,15 @@ var AvatarItemOption = function AvatarItemOption(_ref4) {
     }
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, null, primaryText), /*#__PURE__*/_react.default.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.default.createElement(_tooltip.default, {
+  _react.default.createElement(_react.default.Suspense, {
+    fallback: /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text)
+  }, /*#__PURE__*/_react.default.createElement(AsyncTooltip, {
     content: lozenge.tooltip
-  }, /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text)) : /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text)), sourcesInfoTooltip)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, {
+  }, /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text))) : /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text)), sourcesInfoTooltip)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, {
     secondary: true
   }, secondaryText))));
 };

package/dist/cjs/components/ClearIndicator.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ClearIndicator = void 0;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -27,8 +29,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _select = require("@atlaskit/select");
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 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 _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) { (0, _defineProperty2.default)(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; }
@@ -37,6 +37,20 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+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 AsyncTooltip = /*#__PURE__*/_react.default.lazy(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/tooltip'));
+  }).then(function (module) {
+    return {
+      default: module.default
+    };
+  });
+});
+
 var ClearIndicator = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(ClearIndicator, _React$PureComponent);
 
@@ -73,13 +87,18 @@ var ClearIndicator = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var clearValueLabel = this.props.selectProps.clearValueLabel;
-      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-        content: clearValueLabel
-      }, /*#__PURE__*/_react.default.createElement(_select.components.ClearIndicator, (0, _extends2.default)({}, this.props, {
+
+      var Indicator = /*#__PURE__*/_react.default.createElement(_select.components.ClearIndicator, (0, _extends2.default)({}, this.props, {
         innerProps: _objectSpread(_objectSpread({}, this.props.innerProps), {}, {
           onMouseDown: this.handleMouseDown
         })
-      })));
+      }));
+
+      return clearValueLabel ? /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
+        fallback: Indicator
+      }, /*#__PURE__*/_react.default.createElement(AsyncTooltip, {
+        content: clearValueLabel
+      }, Indicator)) : Indicator;
     }
   }]);
   return ClearIndicator;

package/dist/cjs/components/EmailOption/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 AsyncEmailOption = /*#__PURE__*/_react.default.lazy(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./main'));
+  }).then(function (module) {
+    return {
+      default: module.EmailOption
+    };
+  });
+});
+
+var _default = AsyncEmailOption;
+exports.default = _default;

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

@@ -29,11 +29,11 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _AddOptionAvatar = require("./AddOptionAvatar");
+var _AddOptionAvatar = require("../AddOptionAvatar");
 
-var _AvatarItemOption = require("./AvatarItemOption");
+var _AvatarItemOption = require("../AvatarItemOption");
 
-var _i18n = require("./i18n");
+var _i18n = require("../i18n");
 
 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); }; }
 

package/dist/cjs/components/ExternalUserOption/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 AsyncExternalUserOption = /*#__PURE__*/_react.default.lazy(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./main'));
+  }).then(function (module) {
+    return {
+      default: module.ExternalUserOption
+    };
+  });
+});
+
+var _default = AsyncExternalUserOption;
+exports.default = _default;

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

@@ -31,9 +31,9 @@ var _tokens = require("@atlaskit/tokens");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _AvatarItemOption = require("./AvatarItemOption");
+var _AvatarItemOption = require("../AvatarItemOption");
 
-var _SizeableAvatar = require("./SizeableAvatar");
+var _SizeableAvatar = require("../SizeableAvatar");
 
 var _panel = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/panel"));
 
@@ -41,17 +41,17 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _slack = require("./assets/slack");
+var _slack = require("../assets/slack");
 
-var _google = require("./assets/google");
+var _google = require("../assets/google");
 
-var _microsoft = require("./assets/microsoft");
+var _microsoft = require("../assets/microsoft");
 
-var _github = require("./assets/github");
+var _github = require("../assets/github");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _i18n = require("./i18n");
+var _i18n = require("../i18n");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 

package/dist/cjs/components/GroupOption/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 AsyncGroupOption = /*#__PURE__*/_react.default.lazy(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./main'));
+  }).then(function (module) {
+    return {
+      default: module.GroupOption
+    };
+  });
+});
+
+var _default = AsyncGroupOption;
+exports.default = _default;

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

@@ -35,11 +35,11 @@ var _tokens = require("@atlaskit/tokens");
 
 var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
 
-var _AvatarItemOption = require("./AvatarItemOption");
+var _AvatarItemOption = require(".././AvatarItemOption");
 
-var _i18n = require("./i18n");
+var _i18n = require(".././i18n");
 
-var _HighlightText = require("./HighlightText");
+var _HighlightText = require(".././HighlightText");
 
 var _templateObject;
 

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/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}

@@ -31,13 +31,13 @@ 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); }; }
 

package/dist/cjs/version.json

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

package/dist/es2019/components/AvatarItemOption.js

@@ -3,7 +3,13 @@ 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;
@@ -54,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))));

package/dist/es2019/components/ClearIndicator.js

@@ -2,7 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { components } from '@atlaskit/select';
-import Tooltip from '@atlaskit/tooltip';
+const AsyncTooltip = /*#__PURE__*/React.lazy(() => import(
+/* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */
+'@atlaskit/tooltip').then(module => {
+  return {
+    default: module.default
+  };
+}));
 export class ClearIndicator extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -30,13 +36,16 @@ export class ClearIndicator extends React.PureComponent {
         clearValueLabel
       }
     } = this.props;
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      content: clearValueLabel
-    }, /*#__PURE__*/React.createElement(components.ClearIndicator, _extends({}, this.props, {
+    const Indicator = /*#__PURE__*/React.createElement(components.ClearIndicator, _extends({}, this.props, {
       innerProps: { ...this.props.innerProps,
         onMouseDown: this.handleMouseDown
       }
-    })));
+    }));
+    return clearValueLabel ? /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: Indicator
+    }, /*#__PURE__*/React.createElement(AsyncTooltip, {
+      content: clearValueLabel
+    }, Indicator)) : Indicator;
   }
 
 }

package/dist/es2019/components/EmailOption/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+const AsyncEmailOption = /*#__PURE__*/React.lazy(() => import(
+/* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/email-option" */
+'./main').then(module => {
+  return {
+    default: module.EmailOption
+  };
+}));
+export default AsyncEmailOption;

package/dist/es2019/components/{EmailOption.js → EmailOption/main.js}

@@ -3,9 +3,9 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { AddOptionAvatar } from './AddOptionAvatar';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
-import { messages } from './i18n';
+import { AddOptionAvatar } from '../AddOptionAvatar';
+import { AvatarItemOption, TextWrapper } from '../AvatarItemOption';
+import { messages } from '../i18n';
 
 const getAddEmailMessage = validity => validity === 'POTENTIAL' ? messages.continueToAddEmail : messages.selectToAddEmail;
 

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

@@ -0,0 +1,9 @@
+import React from 'react';
+const AsyncExternalUserOption = /*#__PURE__*/React.lazy(() => import(
+/* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/external-user-option" */
+'./main').then(module => {
+  return {
+    default: module.ExternalUserOption
+  };
+}));
+export default AsyncExternalUserOption;

package/dist/es2019/components/{ExternalUserOption.js → ExternalUserOption/main.js}

@@ -2,17 +2,17 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React from 'react';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
-import { SizeableAvatar } from './SizeableAvatar';
+import { AvatarItemOption, TextWrapper } from '../AvatarItemOption';
+import { SizeableAvatar } from '../SizeableAvatar';
 import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
 import Tooltip from '@atlaskit/tooltip';
 import styled from 'styled-components';
-import { SlackIcon } from './assets/slack';
-import { GoogleIcon } from './assets/google';
-import { MicrosoftIcon } from './assets/microsoft';
-import { GitHubIcon } from './assets/github';
+import { SlackIcon } from '../assets/slack';
+import { GoogleIcon } from '../assets/google';
+import { MicrosoftIcon } from '../assets/microsoft';
+import { GitHubIcon } from '../assets/github';
 import { FormattedMessage } from 'react-intl-next';
-import { messages } from './i18n';
+import { messages } from '../i18n';
 export const ImageContainer = styled.span`
   height: 12px;
   width: 12px;

package/dist/es2019/components/GroupOption/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+const AsyncGroupOption = /*#__PURE__*/React.lazy(() => import(
+/* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/group-option" */
+'./main').then(module => {
+  return {
+    default: module.GroupOption
+  };
+}));
+export default AsyncGroupOption;

package/dist/es2019/components/{GroupOption.js → GroupOption/main.js}

@@ -5,9 +5,9 @@ import styled from 'styled-components';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import PeopleIcon from '@atlaskit/icon/glyph/people';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
-import { messages } from './i18n';
-import { HighlightText } from './HighlightText';
+import { AvatarItemOption, TextWrapper } from '.././AvatarItemOption';
+import { messages } from '.././i18n';
+import { HighlightText } from '.././HighlightText';
 export const GroupOptionIconWrapper = styled.span`
   padding: 2px;
 

package/dist/es2019/components/MessagesIntlProvider.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { IntlProvider, injectIntl } from 'react-intl-next';
+import { useIntl, IntlProvider } from 'react-intl-next';
 import { getMessagesForLocale } from '../util/i18n-util';
 const EMPTY = {};
 
@@ -24,8 +24,8 @@ const useI18n = locale => {
 };
 
 const MessagesIntlProvider = props => {
+  const intl = useIntl();
   const {
-    intl,
     children
   } = props;
   const messages = useI18n(intl.locale);
@@ -40,4 +40,4 @@ const MessagesIntlProvider = props => {
   }, children);
 };
 
-export default injectIntl(MessagesIntlProvider);
+export default MessagesIntlProvider;

package/dist/es2019/components/Option.js

@@ -1,13 +1,25 @@
 import { components } from '@atlaskit/select';
 import React from 'react';
-import { EmailOption } from './EmailOption';
-import { TeamOption } from './TeamOption';
 import { UserOption } from './UserOption';
-import { GroupOption } from './GroupOption';
-import { ExternalUserOption } from './ExternalUserOption';
+import AsyncExternalOption from './ExternalUserOption';
+import AsyncTeamOption from './TeamOption';
+import AsyncGroupOption from './GroupOption';
+import AsyncEmailOption from './EmailOption';
 import { isEmail, isTeam, isUser, isGroup, isExternalUser } from './utils';
 import { isValidEmail } from './emailValidation';
 
+const defaultOption = ({
+  data: {
+    data
+  },
+  isSelected,
+  status
+}) => /*#__PURE__*/React.createElement(UserOption, {
+  user: data,
+  status: status,
+  isSelected: isSelected
+});
+
 const dataOption = ({
   data: {
     data
@@ -17,7 +29,7 @@ const dataOption = ({
   selectProps
 }) => {
   if (isExternalUser(data)) {
-    return /*#__PURE__*/React.createElement(ExternalUserOption, {
+    return /*#__PURE__*/React.createElement(AsyncExternalOption, {
       user: data,
       status: status,
       isSelected: isSelected
@@ -33,7 +45,7 @@ const dataOption = ({
   }
 
   if (isEmail(data)) {
-    return /*#__PURE__*/React.createElement(EmailOption, {
+    return /*#__PURE__*/React.createElement(AsyncEmailOption, {
       email: data,
       emailValidity: isValidEmail(data.id),
       isSelected: isSelected,
@@ -42,14 +54,14 @@ const dataOption = ({
   }
 
   if (isTeam(data)) {
-    return /*#__PURE__*/React.createElement(TeamOption, {
+    return /*#__PURE__*/React.createElement(AsyncTeamOption, {
       team: data,
       isSelected: isSelected
     });
   }
 
   if (isGroup(data)) {
-    return /*#__PURE__*/React.createElement(GroupOption, {
+    return /*#__PURE__*/React.createElement(AsyncGroupOption, {
       group: data,
       isSelected: isSelected
     });
@@ -58,4 +70,6 @@ const dataOption = ({
   return null;
 };
 
-export const Option = props => /*#__PURE__*/React.createElement(components.Option, props, dataOption(props));
+export const Option = props => /*#__PURE__*/React.createElement(components.Option, props, /*#__PURE__*/React.createElement(React.Suspense, {
+  fallback: defaultOption(props)
+}, dataOption(props)));

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

@@ -0,0 +1,9 @@
+import React from 'react';
+const AsyncTeamOption = /*#__PURE__*/React.lazy(() => import(
+/* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/team-option" */
+'./main').then(module => {
+  return {
+    default: module.TeamOption
+  };
+}));
+export default AsyncTeamOption;

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

@@ -4,10 +4,10 @@ import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
-import { HighlightText } from './HighlightText';
-import { messages } from './i18n';
-import { SizeableAvatar } from './SizeableAvatar';
+import { AvatarItemOption, TextWrapper } from '.././AvatarItemOption';
+import { HighlightText } from '.././HighlightText';
+import { messages } from '.././i18n';
+import { SizeableAvatar } from '.././SizeableAvatar';
 export class TeamOption extends React.PureComponent {
   constructor(...args) {
     super(...args);

package/dist/es2019/version.json

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

package/dist/esm/components/AvatarItemOption.js

@@ -7,7 +7,15 @@ 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';
+var AsyncTooltip = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */
+  '@atlaskit/tooltip').then(function (module) {
+    return {
+      default: module.default
+    };
+  });
+});
 var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  line-height: 1;\n  outline: none;\n  margin: 0;\n  width: 100%;\n  cursor: pointer;\n"])));
 var Text = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  color: ", ";\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ", "\n"])), token('color.text.selected', B400), function (_ref) {
   var secondary = _ref.secondary;
@@ -37,13 +45,15 @@ export var AvatarItemOption = function AvatarItemOption(_ref4) {
     }
   }, /*#__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))));
 };

package/dist/esm/components/ClearIndicator.js

@@ -17,7 +17,15 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { components } from '@atlaskit/select';
-import Tooltip from '@atlaskit/tooltip';
+var AsyncTooltip = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */
+  '@atlaskit/tooltip').then(function (module) {
+    return {
+      default: module.default
+    };
+  });
+});
 export var ClearIndicator = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ClearIndicator, _React$PureComponent);
 
@@ -56,13 +64,16 @@ export var ClearIndicator = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var clearValueLabel = this.props.selectProps.clearValueLabel;
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        content: clearValueLabel
-      }, /*#__PURE__*/React.createElement(components.ClearIndicator, _extends({}, this.props, {
+      var Indicator = /*#__PURE__*/React.createElement(components.ClearIndicator, _extends({}, this.props, {
         innerProps: _objectSpread(_objectSpread({}, this.props.innerProps), {}, {
           onMouseDown: this.handleMouseDown
         })
-      })));
+      }));
+      return clearValueLabel ? /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: Indicator
+      }, /*#__PURE__*/React.createElement(AsyncTooltip, {
+        content: clearValueLabel
+      }, Indicator)) : Indicator;
     }
   }]);
 

package/dist/esm/components/EmailOption/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+var AsyncEmailOption = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/email-option" */
+  './main').then(function (module) {
+    return {
+      default: module.EmailOption
+    };
+  });
+});
+export default AsyncEmailOption;

package/dist/esm/components/{EmailOption.js → EmailOption/main.js}

@@ -14,9 +14,9 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { AddOptionAvatar } from './AddOptionAvatar';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
-import { messages } from './i18n';
+import { AddOptionAvatar } from '../AddOptionAvatar';
+import { AvatarItemOption, TextWrapper } from '../AvatarItemOption';
+import { messages } from '../i18n';
 
 var getAddEmailMessage = function getAddEmailMessage(validity) {
   return validity === 'POTENTIAL' ? messages.continueToAddEmail : messages.selectToAddEmail;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+var AsyncExternalUserOption = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/external-user-option" */
+  './main').then(function (module) {
+    return {
+      default: module.ExternalUserOption
+    };
+  });
+});
+export default AsyncExternalUserOption;

package/dist/esm/components/{ExternalUserOption.js → ExternalUserOption/main.js}

@@ -17,17 +17,17 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React from 'react';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
-import { SizeableAvatar } from './SizeableAvatar';
+import { AvatarItemOption, TextWrapper } from '../AvatarItemOption';
+import { SizeableAvatar } from '../SizeableAvatar';
 import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
 import Tooltip from '@atlaskit/tooltip';
 import styled from 'styled-components';
-import { SlackIcon } from './assets/slack';
-import { GoogleIcon } from './assets/google';
-import { MicrosoftIcon } from './assets/microsoft';
-import { GitHubIcon } from './assets/github';
+import { SlackIcon } from '../assets/slack';
+import { GoogleIcon } from '../assets/google';
+import { MicrosoftIcon } from '../assets/microsoft';
+import { GitHubIcon } from '../assets/github';
 import { FormattedMessage } from 'react-intl-next';
-import { messages } from './i18n';
+import { messages } from '../i18n';
 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"])));

package/dist/esm/components/GroupOption/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+var AsyncGroupOption = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/group-option" */
+  './main').then(function (module) {
+    return {
+      default: module.GroupOption
+    };
+  });
+});
+export default AsyncGroupOption;

package/dist/esm/components/{GroupOption.js → GroupOption/main.js}

@@ -19,9 +19,9 @@ import styled from 'styled-components';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import PeopleIcon from '@atlaskit/icon/glyph/people';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
-import { messages } from './i18n';
-import { HighlightText } from './HighlightText';
+import { AvatarItemOption, TextWrapper } from '.././AvatarItemOption';
+import { messages } from '.././i18n';
+import { HighlightText } from '.././HighlightText';
 export var GroupOptionIconWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 2px;\n\n  > span {\n    background-color: ", ";\n    border-radius: 50%;\n    padding: 4px;\n  }\n"])), token('color.background.subtleNeutral.resting', N20));
 export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(GroupOption, _React$PureComponent);

package/dist/esm/components/MessagesIntlProvider.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 
 import React, { useMemo } from 'react';
-import { IntlProvider, injectIntl } from 'react-intl-next';
+import { useIntl, IntlProvider } from 'react-intl-next';
 import { getMessagesForLocale } from '../util/i18n-util';
 var EMPTY = {};
 
@@ -35,8 +35,8 @@ var useI18n = function useI18n(locale) {
 };
 
 var MessagesIntlProvider = function MessagesIntlProvider(props) {
-  var intl = props.intl,
-      children = props.children;
+  var intl = useIntl();
+  var children = props.children;
   var messages = useI18n(intl.locale);
   var mergedMessages = useMemo(function () {
     return _objectSpread(_objectSpread({}, intl.messages), messages);
@@ -47,4 +47,4 @@ var MessagesIntlProvider = function MessagesIntlProvider(props) {
   }, children);
 };
 
-export default injectIntl(MessagesIntlProvider);
+export default MessagesIntlProvider;

package/dist/esm/components/Option.js

@@ -1,21 +1,32 @@
 import { components } from '@atlaskit/select';
 import React from 'react';
-import { EmailOption } from './EmailOption';
-import { TeamOption } from './TeamOption';
 import { UserOption } from './UserOption';
-import { GroupOption } from './GroupOption';
-import { ExternalUserOption } from './ExternalUserOption';
+import AsyncExternalOption from './ExternalUserOption';
+import AsyncTeamOption from './TeamOption';
+import AsyncGroupOption from './GroupOption';
+import AsyncEmailOption from './EmailOption';
 import { isEmail, isTeam, isUser, isGroup, isExternalUser } from './utils';
 import { isValidEmail } from './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.createElement(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 (isExternalUser(data)) {
-    return /*#__PURE__*/React.createElement(ExternalUserOption, {
+    return /*#__PURE__*/React.createElement(AsyncExternalOption, {
       user: data,
       status: status,
       isSelected: isSelected
@@ -31,7 +42,7 @@ var dataOption = function dataOption(_ref) {
   }
 
   if (isEmail(data)) {
-    return /*#__PURE__*/React.createElement(EmailOption, {
+    return /*#__PURE__*/React.createElement(AsyncEmailOption, {
       email: data,
       emailValidity: isValidEmail(data.id),
       isSelected: isSelected,
@@ -40,14 +51,14 @@ var dataOption = function dataOption(_ref) {
   }
 
   if (isTeam(data)) {
-    return /*#__PURE__*/React.createElement(TeamOption, {
+    return /*#__PURE__*/React.createElement(AsyncTeamOption, {
       team: data,
       isSelected: isSelected
     });
   }
 
   if (isGroup(data)) {
-    return /*#__PURE__*/React.createElement(GroupOption, {
+    return /*#__PURE__*/React.createElement(AsyncGroupOption, {
       group: data,
       isSelected: isSelected
     });
@@ -57,5 +68,7 @@ var dataOption = function dataOption(_ref) {
 };
 
 export var Option = function Option(props) {
-  return /*#__PURE__*/React.createElement(components.Option, props, dataOption(props));
+  return /*#__PURE__*/React.createElement(components.Option, props, /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: defaultOption(props)
+  }, dataOption(props)));
 };

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

@@ -0,0 +1,11 @@
+import React from 'react';
+var AsyncTeamOption = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/team-option" */
+  './main').then(function (module) {
+    return {
+      default: module.TeamOption
+    };
+  });
+});
+export default AsyncTeamOption;

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

@@ -15,10 +15,10 @@ import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
-import { HighlightText } from './HighlightText';
-import { messages } from './i18n';
-import { SizeableAvatar } from './SizeableAvatar';
+import { AvatarItemOption, TextWrapper } from '.././AvatarItemOption';
+import { HighlightText } from '.././HighlightText';
+import { messages } from '.././i18n';
+import { SizeableAvatar } from '.././SizeableAvatar';
 export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(TeamOption, _React$PureComponent);
 

package/dist/esm/version.json

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

package/dist/types/components/EmailOption/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AsyncEmailOption: React.LazyExoticComponent<typeof import("./main").EmailOption>;
+export default AsyncEmailOption;

package/dist/types/components/{EmailOption.d.ts → EmailOption/main.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Email } from '../types';
-import { EmailValidationResponse } from './emailValidation';
+import { Email } from '../../types';
+import { EmailValidationResponse } from '../emailValidation';
 export declare type EmailOptionProps = {
     email: Email;
     isSelected: boolean;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AsyncExternalUserOption: React.LazyExoticComponent<typeof import("./main").ExternalUserOption>;
+export default AsyncExternalUserOption;

package/dist/types/components/{ExternalUserOption.d.ts → ExternalUserOption/main.d.ts}

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

package/dist/types/components/GroupOption/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AsyncGroupOption: React.LazyExoticComponent<typeof import("./main").GroupOption>;
+export default AsyncGroupOption;

package/dist/types/components/{GroupOption.d.ts → GroupOption/main.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Group } from '../types';
+import { Group } from '../../types';
 export declare const GroupOptionIconWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
 export declare type GroupOptionProps = {
     group: Group;

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

@@ -1,9 +1,3 @@
 import React from 'react';
-import { IntlShape } from 'react-intl-next';
-export interface MessagesIntlProviderProps {
-    intl: IntlShape;
-}
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<MessagesIntlProviderProps>> & {
-    WrappedComponent: React.ComponentType<MessagesIntlProviderProps>;
-};
-export default _default;
+declare const MessagesIntlProvider: React.FC;
+export default MessagesIntlProvider;

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

@@ -1,8 +1,11 @@
+import { OptionProps as AkOptionProps } from '@atlaskit/select';
 import { FC } from 'react';
 import { Option as OptionType } from '../types';
-export declare type OptionProps = {
+export declare type OptionProps = AkOptionProps & {
     data: OptionType;
     isSelected: boolean;
+    isDisabled: boolean;
+    isFocused: boolean;
     status?: string;
     selectProps: {
         emailLabel?: string;

package/dist/types/components/TeamOption/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AsyncTeamOption: React.LazyExoticComponent<typeof import("./main").TeamOption>;
+export default AsyncTeamOption;

package/dist/types/components/{TeamOption.d.ts → TeamOption/main.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Team } from '../types';
+import { Team } from '../../types';
 export declare type TeamOptionProps = {
     team: Team;
     isSelected: boolean;

package/package.json

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