@atlaskit/user-picker 7.16.6 → 8.2.1

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

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

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

@@ -7,6 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { AVATAR_SIZES, BORDER_WIDTH } from '@atlaskit/avatar';
 import { B100, N0, N10, N20, N30, N40, N100, R50, R400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import memoizeOne from 'memoize-one';
 import { getAvatarSize } from './utils';
 import { mergeStyles } from '@atlaskit/select';
@@ -28,14 +29,14 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        borderColor: state.isFocused ? css.borderColor : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : N40,
-        backgroundColor: state.isFocused ? css['backgroundColor'] : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? N10 : N20,
+        borderColor: state.isFocused ? token('color.border.neutral', css.borderColor) : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : token('color.border.neutral', N40),
+        backgroundColor: state.isFocused ? token('color.background.default', css['backgroundColor']) : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? token('color.background.subtleBorderedNeutral.resting', N10) : token('color.background.subtleNeutral.resting', N20),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: state.isFocused ? css[':hover'] ? css[':hover'].borderColor : B100 : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? R50 : N30 : N40,
-          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? R50 : state.isFocused ? css[':hover'] ? css[':hover'].backgroundColor : N0 : state.isDisabled ? N10 : N30
+          borderColor: state.isFocused ? css[':hover'] ? token('color.border.focus', css[':hover'].borderColor) : token('color.border.focus', B100) : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? token('color.iconBorder.danger', R50) : token('color.border.neutral', N30) : token('color.border.neutral', N40),
+          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? token('color.background.subtleDanger.resting', R50) : state.isFocused ? css[':hover'] ? token('color.background.default', css[':hover'].backgroundColor) : token('color.background.default', N0) : state.isDisabled ? token('color.background.disabled', N10) : token('color.background.default', N30)
         }),
         padding: 0,
         minHeight: isCompact ? 'none' : 44,
@@ -59,7 +60,7 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
         paddingTop: 0,
         padding: 0,
         ':hover': {
-          color: R400
+          color: token('color.text.danger', R400)
         }
       });
     },
@@ -157,14 +158,14 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
         paddingLeft: isMulti ? 0 : AVATAR_PADDING,
         '& input::placeholder': {
           /* Chrome, Firefox, Opera, Safari 10.1+ */
-          color: N100,
+          color: token('color.text.lowEmphasis', N100),
           opacity: 1
           /* Firefox */
 
         },
         '& input:-ms-input-placeholder': {
           /* Internet Explorer 10-11 */
-          color: N100
+          color: token('color.text.lowEmphasis', N100)
         }
       });
     }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "7.16.6",
+	"version": "8.2.1",
 	"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/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 { InjectedIntl } from 'react-intl';
-export interface MessagesIntlProviderProps {
-    intl: InjectedIntl;
-}
-declare const _default: React.ComponentClass<unknown, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<ReactIntl.InjectedIntlProps>;
-};
-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/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/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/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.2.1",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,16 +33,17 @@
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/select": "^15.2.0",
     "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
     "uuid": "^3.1.0"
   },
   "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,12 +62,17 @@
     "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": [
     "fabric",
     "ui"
   ],
+  "techstack": {
+    "@repo/internal": {
+      "theming": "tokens"
+    }
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }