@atlaskit/user-picker 7.16.6 → 8.2.1

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @atlaskit/user-picker
 
+## 8.2.1
+
+### Patch Changes
+
+- [`c55c736ecea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c55c736ecea) - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489
+
+## 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
+
+- [`c48834ce234`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c48834ce234) - [ux] Instrumented `@atlaskit/user-picker` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+## 8.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
 ## 7.16.6
 
 ### Patch Changes

package/dist/cjs/components/AddOptionAvatar.js

@@ -13,15 +13,17 @@ var _email = _interopRequireDefault(require("@atlaskit/icon/glyph/email"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var EmailAvatarWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  padding: ", "px;\n\n  background-color: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var EmailAvatarWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n\n  background-color: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.isLozenge ? 0 : 4;
-}, _colors.N40);
+}, (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N40));
 
 var AddOptionAvatar = function AddOptionAvatar(_ref) {
   var isLozenge = _ref.isLozenge,
@@ -31,7 +33,7 @@ var AddOptionAvatar = function AddOptionAvatar(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_email.default, {
     label: label,
     size: isLozenge ? 'small' : 'medium',
-    primaryColor: _colors.N500
+    primaryColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500)
   }));
 };
 

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"));
@@ -15,17 +17,31 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _tokens = require("@atlaskit/tokens");
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 
 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"])), _colors.B400, function (_ref) {
+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) {
   var secondary = _ref.secondary;
-  return secondary && "color: ".concat(_colors.B400, "; font-size: 0.85em;");
+  return secondary && "color: ".concat((0, _tokens.token)('color.text.selected', _colors.B400), "; font-size: 0.85em;");
 });
 
 var AdditionalInfo = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  float: right;\n  ", "\n"])), function (_ref2) {
@@ -56,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/BaseUserPicker.js

@@ -29,7 +29,7 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _analytics = require("../analytics");
 
@@ -508,7 +508,7 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         isLoading: count > 0 || resolving || isLoading,
         loadingMessage: loadingMessage,
         menuPlacement: "auto",
-        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.placeholder),
+        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.placeholder),
         addMoreMessage: addMoreMessage,
         classNamePrefix: "fabric-user-picker",
         hoveringClearIndicator: hoveringClearIndicator,

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}

@@ -23,15 +23,17 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _AddOptionAvatar = require("./AddOptionAvatar");
+var _tokens = require("@atlaskit/tokens");
 
-var _AvatarItemOption = require("./AvatarItemOption");
+var _AddOptionAvatar = require("../AddOptionAvatar");
 
-var _i18n = require("./i18n");
+var _AvatarItemOption = require("../AvatarItemOption");
+
+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); }; }
 
@@ -65,12 +67,12 @@ var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
       var id = _this.props.email.id;
       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)
       }, id);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function (label) {
       return /*#__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)
       }, label);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOption", function (label) {
@@ -94,7 +96,7 @@ var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props = this.props,
           label = _this$props.label,
           emailValidity = _this$props.emailValidity;
-      return label !== undefined ? this.renderOption(label) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, getAddEmailMessage(emailValidity), function (label) {
+      return label !== undefined ? this.renderOption(label) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, getAddEmailMessage(emailValidity), function (label) {
         return _this2.renderOption(label);
       });
     }

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}

@@ -27,11 +27,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _colors = require("@atlaskit/theme/colors");
 
+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"));
 
@@ -39,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 _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var _i18n = require("./i18n");
+var _i18n = require("../i18n");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -109,7 +111,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       var name = _this.props.user.name;
       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)
       }, name);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function () {
@@ -126,7 +128,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
 
       var emailDomainWithAt = "@".concat(emailDomain);
       return /*#__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)
       }, emailUser, /*#__PURE__*/_react.default.createElement(EmailDomainWrapper, null, emailDomainWithAt));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {
@@ -151,7 +153,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/_react.default.createElement(_panel.default, {
         label: "",
         size: "large",
-        primaryColor: _colors.N200
+        primaryColor: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
       })) : undefined;
     });
     return _this;
@@ -170,7 +172,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "formattedTooltipContent",
     value: function formattedTooltipContent() {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.externalUserSourcesHeading)), /*#__PURE__*/_react.default.createElement(SourcesTooltipContainer, null, this.props.user.sources.map(function (s) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesHeading)), /*#__PURE__*/_react.default.createElement(SourcesTooltipContainer, null, this.props.user.sources.map(function (s) {
         return SourcesInfoMap.get(s);
       }).filter(function (s) {
         return s;
@@ -180,7 +182,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
             label = _ref.label;
         return /*#__PURE__*/_react.default.createElement(SourceWrapper, {
           key: key
-        }, /*#__PURE__*/_react.default.createElement(ImageContainer, null, icon), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, label)));
+        }, /*#__PURE__*/_react.default.createElement(ImageContainer, null, icon), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, label)));
       })));
     }
   }]);

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}

@@ -25,19 +25,21 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+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;
 
@@ -45,7 +47,7 @@ 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; } }
 
-var GroupOptionIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 2px;\n\n  > span {\n    background-color: ", ";\n    border-radius: 50%;\n    padding: 4px;\n  }\n"])), _colors.N20);
+var GroupOptionIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 2px;\n\n  > span {\n    background-color: ", ";\n    border-radius: 50%;\n    padding: 4px;\n  }\n"])), (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20));
 
 exports.GroupOptionIconWrapper = GroupOptionIconWrapper;
 
@@ -72,7 +74,7 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$group.highlight;
       return [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: isSelected ? _colors.B400 : _colors.N800
+        color: 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))];
@@ -86,8 +88,8 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {
       var isSelected = _this.props.isSelected;
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: isSelected ? _colors.B400 : _colors.N200
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.groupByline));
+        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLozengeProps", function () {
       return typeof _this.props.group.lozenge === 'string' ? {

package/dist/cjs/components/MessagesIntlProvider.js

@@ -15,7 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _i18nUtil = require("../util/i18n-util");
 
@@ -55,17 +55,17 @@ 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);
   }, [intl.messages, messages]);
-  return /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
+  return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+    locale: intl.locale,
     messages: mergedMessages
   }, children);
 };
 
-var _default = (0, _reactIntl.injectIntl)(MessagesIntlProvider);
-
+var _default = MessagesIntlProvider;
 exports.default = _default;

package/dist/cjs/components/MultiValue.js

@@ -29,7 +29,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _select = require("@atlaskit/select");
 
@@ -95,7 +95,7 @@ var MultiValue = /*#__PURE__*/function (_React$Component) {
         return selectProps.emailLabel ? /*#__PURE__*/_react.default.createElement(_AddOptionAvatar.AddOptionAvatar, {
           isLozenge: true,
           label: selectProps.emailLabel
-        }) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.addEmail, function (label) {
+        }) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addEmail, function (label) {
           return /*#__PURE__*/_react.default.createElement(_AddOptionAvatar.AddOptionAvatar, {
             isLozenge: true,
             label: label

package/dist/cjs/components/MultiValueContainer.js

@@ -29,7 +29,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("./i18n");
 
@@ -74,11 +74,13 @@ var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
       return value && value.length > 0;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addPlaceholder", function (placeholder) {
-      return _react.default.Children.map(_this.props.children, function (child) {
+      var children = _react.default.Children.map(_this.props.children, function (child) {
         return (0, _utils.isChildInput)(child) && _this.showPlaceholder() ? /*#__PURE__*/_react.default.cloneElement(child, {
           placeholder: placeholder
         }) : child;
       });
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderChildren", function () {
       var _this$props$selectPro = _this.props.selectProps,
@@ -90,7 +92,7 @@ var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (addMoreMessage === undefined) {
-        return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.addMore, function (addMore) {
+        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addMore, function (addMore) {
           return _this.addPlaceholder(addMore);
         });
       }