@atlaskit/user-picker 7.16.6 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @atlaskit/user-picker
 
+## 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/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/EmailOption.js

@@ -23,7 +23,7 @@ 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");
 
@@ -94,7 +94,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.js

@@ -47,7 +47,7 @@ var _microsoft = require("./assets/microsoft");
 
 var _github = require("./assets/github");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("./i18n");
 
@@ -170,7 +170,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 +180,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.js

@@ -25,7 +25,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 _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -87,7 +87,7 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
       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));
+      }, /*#__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");
 
@@ -61,11 +61,12 @@ var MessagesIntlProvider = function MessagesIntlProvider(props) {
   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 = (0, _reactIntlNext.injectIntl)(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);
         });
       }

package/dist/cjs/components/TeamOption.js

@@ -27,7 +27,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _AvatarItemOption = require("./AvatarItemOption");
 
@@ -79,9 +79,9 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.plus50MembersWithYou));
+            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithYou));
           } else {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
+            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
               values: {
                 count: memberCount
               }
@@ -89,9 +89,9 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
           }
         } else {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
+            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
           } else {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
+            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
               values: {
                 count: memberCount
               }

package/dist/cjs/components/i18n.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.messages = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var messages = (0, _reactIntl.defineMessages)({
+var messages = (0, _reactIntlNext.defineMessages)({
   placeholder: {
     id: 'fabric.elements.user-picker.placeholder',
     defaultMessage: 'Enter people or teams...',

package/dist/cjs/components/smart-user-picker/components/index.js

@@ -38,7 +38,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _analytics = require("../../../analytics");
 
@@ -582,7 +582,7 @@ var SmartUserPicker = /*#__PURE__*/function (_React$Component) {
   prefetch: false,
   principalId: 'Context'
 });
-var WrappedSmartUserPicker = (0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntl.injectIntl)(SmartUserPicker));
+var WrappedSmartUserPicker = (0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(SmartUserPicker));
 /**
  * @deprecated
  */

package/dist/cjs/version.json

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

package/dist/es2019/components/BaseUserPicker.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import debounce from 'lodash/debounce';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEvent, failedEvent, focusEvent, searchedEvent, selectEvent, startSession } from '../analytics';
 import { batchByKey } from './batch';
 import { messages } from './i18n';

package/dist/es2019/components/EmailOption.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { AvatarItemOption, TextWrapper } from './AvatarItemOption';

package/dist/es2019/components/ExternalUserOption.js

@@ -10,7 +10,7 @@ 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';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from './i18n';
 export const ImageContainer = styled.span`
   height: 12px;

package/dist/es2019/components/GroupOption.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import styled from 'styled-components';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import PeopleIcon from '@atlaskit/icon/glyph/people';

package/dist/es2019/components/MessagesIntlProvider.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { IntlProvider, injectIntl } from 'react-intl';
+import { IntlProvider, injectIntl } from 'react-intl-next';
 import { getMessagesForLocale } from '../util/i18n-util';
 const EMPTY = {};
 
@@ -35,6 +35,7 @@ const MessagesIntlProvider = props => {
     };
   }, [intl.messages, messages]);
   return /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: intl.locale,
     messages: mergedMessages
   }, children);
 };

package/dist/es2019/components/MultiValue.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { components } from '@atlaskit/select';
 import styled from 'styled-components';
 import { AddOptionAvatar } from './AddOptionAvatar';

package/dist/es2019/components/MultiValueContainer.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { components } from '@atlaskit/select';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from './i18n';
 import { isChildInput } from './utils';
 export class MultiValueContainer extends React.PureComponent {
@@ -47,9 +47,12 @@ export class MultiValueContainer extends React.PureComponent {
       return value && value.length > 0;
     });
 
-    _defineProperty(this, "addPlaceholder", placeholder => React.Children.map(this.props.children, child => isChildInput(child) && this.showPlaceholder() ? /*#__PURE__*/React.cloneElement(child, {
-      placeholder
-    }) : child));
+    _defineProperty(this, "addPlaceholder", placeholder => {
+      const children = React.Children.map(this.props.children, child => isChildInput(child) && this.showPlaceholder() ? /*#__PURE__*/React.cloneElement(child, {
+        placeholder
+      }) : child);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+    });
 
     _defineProperty(this, "renderChildren", () => {
       const {

package/dist/es2019/components/TeamOption.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
 import { HighlightText } from './HighlightText';
 import { messages } from './i18n';

package/dist/es2019/components/i18n.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   placeholder: {
     id: 'fabric.elements.user-picker.placeholder',

package/dist/es2019/components/smart-user-picker/components/index.js

@@ -5,7 +5,7 @@ import debounce from 'lodash/debounce';
 import uuidV4 from 'uuid/v4';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import memoizeOne from 'memoize-one';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { requestUsersEvent, filterUsersEvent, preparedUsersLoadedEvent, successfulRequestUsersEvent, failedRequestUsersEvent, mountedWithPrefetchEvent, createAndFireEventInElementsChannel } from '../../../analytics';
 import { UserType } from '../../../types';
 import { UserPicker } from '../../UserPicker';

package/dist/es2019/version.json

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

package/dist/esm/components/BaseUserPicker.js

@@ -20,7 +20,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import debounce from 'lodash/debounce';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEvent, failedEvent, focusEvent, searchedEvent, selectEvent, startSession } from '../analytics';
 import { batchByKey } from './batch';
 import { messages } from './i18n';

package/dist/esm/components/EmailOption.js

@@ -11,7 +11,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; } }
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { AvatarItemOption, TextWrapper } from './AvatarItemOption';

package/dist/esm/components/ExternalUserOption.js

@@ -25,7 +25,7 @@ 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';
+import { FormattedMessage } from 'react-intl-next';
 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"])));

package/dist/esm/components/GroupOption.js

@@ -14,7 +14,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; } }
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import styled from 'styled-components';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import PeopleIcon from '@atlaskit/icon/glyph/people';

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';
+import { IntlProvider, injectIntl } from 'react-intl-next';
 import { getMessagesForLocale } from '../util/i18n-util';
 var EMPTY = {};
 
@@ -42,6 +42,7 @@ var MessagesIntlProvider = function MessagesIntlProvider(props) {
     return _objectSpread(_objectSpread({}, intl.messages), messages);
   }, [intl.messages, messages]);
   return /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: intl.locale,
     messages: mergedMessages
   }, children);
 };

package/dist/esm/components/MultiValue.js

@@ -16,7 +16,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; } }
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { components } from '@atlaskit/select';
 import styled from 'styled-components';
 import { AddOptionAvatar } from './AddOptionAvatar';

package/dist/esm/components/MultiValueContainer.js

@@ -18,7 +18,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { components } from '@atlaskit/select';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from './i18n';
 import { isChildInput } from './utils';
 export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
@@ -57,11 +57,12 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "addPlaceholder", function (placeholder) {
-      return React.Children.map(_this.props.children, function (child) {
+      var children = React.Children.map(_this.props.children, function (child) {
         return isChildInput(child) && _this.showPlaceholder() ? /*#__PURE__*/React.cloneElement(child, {
           placeholder: placeholder
         }) : child;
       });
+      return /*#__PURE__*/React.createElement(React.Fragment, null, children);
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderChildren", function () {

package/dist/esm/components/TeamOption.js

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
 import { HighlightText } from './HighlightText';
 import { messages } from './i18n';

package/dist/esm/components/i18n.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export var messages = defineMessages({
   placeholder: {
     id: 'fabric.elements.user-picker.placeholder',

package/dist/esm/components/smart-user-picker/components/index.js

@@ -22,7 +22,7 @@ import debounce from 'lodash/debounce';
 import uuidV4 from 'uuid/v4';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import memoizeOne from 'memoize-one';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { requestUsersEvent, filterUsersEvent, preparedUsersLoadedEvent, successfulRequestUsersEvent, failedRequestUsersEvent, mountedWithPrefetchEvent, createAndFireEventInElementsChannel } from '../../../analytics';
 import { UserType } from '../../../types';
 import { UserPicker } from '../../UserPicker';

package/dist/esm/version.json

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

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

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

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

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

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

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

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Option } from '../types';
 declare type Props = {
     data: Option;

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

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

package/dist/types/components/smart-user-picker/service/recommendationClient.d.ts

@@ -1,6 +1,6 @@
 import { OptionData } from '../../../types';
 import { ProductAttributes, RecommendationRequest } from '../components';
-import { InjectedIntl } from 'react-intl';
+import { IntlShape } from 'react-intl-next';
 /**
  * @deprecated Please use @atlassian/smart-user-picker
  */
@@ -15,7 +15,7 @@ export interface Context {
     siteId: string;
     productAttributes?: ProductAttributes;
 }
-declare const getUserRecommendations: (request: RecommendationRequest, intl: InjectedIntl) => Promise<OptionData[]>;
+declare const getUserRecommendations: (request: RecommendationRequest, intl: IntlShape) => Promise<OptionData[]>;
 /**
  * @deprecated Please use @atlassian/smart-user-picker
  */

package/dist/types/components/smart-user-picker/service/users-transformer.d.ts

@@ -1,5 +1,5 @@
 import { OptionData } from '../../../types';
-import { InjectedIntl } from 'react-intl';
+import { IntlShape } from 'react-intl-next';
 interface ServerItem {
     id: string;
     name?: string;
@@ -11,7 +11,7 @@ interface ServerItem {
 }
 interface ServerResponse {
     recommendedUsers: ServerItem[];
-    intl: InjectedIntl;
+    intl: IntlShape;
 }
 declare enum EntityType {
     USER = "USER",
@@ -21,5 +21,5 @@ declare enum EntityType {
 /**
  * @deprecated Please use @atlassian/smart-user-picker
  */
-export declare const transformUsers: (serverResponse: ServerResponse, intl: InjectedIntl) => OptionData[];
+export declare const transformUsers: (serverResponse: ServerResponse, intl: IntlShape) => OptionData[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "7.16.6",
+  "version": "8.0.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl": "^2.6.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
@@ -61,7 +61,7 @@
     "enzyme-react-intl": "^2.0.6",
     "faker": "^4.1.0",
     "mock-apollo-client": "^0.1.0",
-    "react-intl": "^2.6.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
     "typescript": "3.9.6"
   },
   "keywords": [