@atlaskit/user-picker 9.1.1 → 9.2.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/user-picker
 
+## 9.2.2
+
+### Patch Changes
+
+- [`d27d65448a2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d27d65448a2) - [ux] Add margin-left to addMoreText field
+
+## 9.2.1
+
+### Patch Changes
+
+- [`607b182bb8a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/607b182bb8a) - Add typecasting to prevent type errors during multivaluecontainer placeholder translations. Also fix warnings for importing json attributes from version.json for analytics.
+
+## 9.2.0
+
+### Minor Changes
+
+- [`64dc40c32bc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/64dc40c32bc) - Add support for aria-labelledby and aria-live
+
 ## 9.1.1
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -13,7 +13,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _uuid = require("uuid");
 
-var _version = require("./version.json");
+var _version = _interopRequireDefault(require("./version.json"));
 
 var _utils = require("./components/utils");
 
@@ -21,6 +21,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+var packageName = _version.default.name;
+var packageVersion = _version.default.version;
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;
@@ -47,8 +49,8 @@ var createEvent = function createEvent(eventType, action, actionSubject) {
     action: action,
     actionSubject: actionSubject,
     attributes: _objectSpread({
-      packageName: _version.name,
-      packageVersion: _version.version
+      packageName: packageName,
+      packageVersion: packageVersion
     }, attributes)
   };
 };

package/dist/cjs/components/BaseUserPicker.js

@@ -516,7 +516,9 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
           fieldId = _this$props4.fieldId,
           inputId = _this$props4.inputId,
           maxPickerHeight = _this$props4.maxPickerHeight,
-          textFieldBackgroundColor = _this$props4.textFieldBackgroundColor;
+          textFieldBackgroundColor = _this$props4.textFieldBackgroundColor,
+          ariaLabelledBy = _this$props4.ariaLabelledBy,
+          ariaLive = _this$props4.ariaLive;
       var _this$state3 = this.state,
           count = _this$state3.count,
           hoveringClearIndicator = _this$state3.hoveringClearIndicator,
@@ -528,6 +530,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
         value: value,
         autoFocus: autoFocus !== undefined ? autoFocus : menuIsOpen,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-live": ariaLive,
         ref: this.handleSelectRef,
         isMulti: isMulti,
         options: this.getOptions(),

package/dist/cjs/components/MultiValueContainer.js

@@ -95,7 +95,16 @@ var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
 
       if (addMoreMessage === undefined) {
         return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addMore, function (addMore) {
-          return _this.addPlaceholder(addMore);
+          var _join, _addMoreMessages;
+
+          var addMoreMessages = addMore;
+
+          if (addMore && typeof addMore === 'string') {
+            addMoreMessages = [addMore];
+          }
+
+          var placeholder = (_join = (_addMoreMessages = addMoreMessages) === null || _addMoreMessages === void 0 ? void 0 : _addMoreMessages.join('')) !== null && _join !== void 0 ? _join : '';
+          return _this.addPlaceholder(placeholder);
         });
       }
 

package/dist/cjs/components/styles.js

@@ -39,6 +39,7 @@ var INDICATOR_WIDTH = 39;
 exports.INDICATOR_WIDTH = INDICATOR_WIDTH;
 var TOTAL_PADDING_TAG_TO_CONTAINER = 10;
 var TAG_MARGIN_WIDTH = 4;
+var PLACEHOLDER_MARGIN = 2;
 var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyles) {
   var styles = {
     menu: function menu(css, state) {
@@ -171,6 +172,7 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
         /* Necessary to make input height and tag height the same. */
         marginBottom: TAG_MARGIN_WIDTH,
         marginTop: TAG_MARGIN_WIDTH,
+        marginLeft: PLACEHOLDER_MARGIN,
 
         /* Padding top and bottom of 2 is set by default. */
         paddingTop: 0,

package/dist/cjs/version.json

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

package/dist/es2019/analytics.js

@@ -1,7 +1,9 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
-import { name as packageName, version as packageVersion } from './version.json';
+import versionJson from './version.json';
 import { isExternalUser } from './components/utils';
+const packageName = versionJson.name;
+const packageVersion = versionJson.version;
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/BaseUserPicker.js

@@ -470,7 +470,9 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       fieldId,
       inputId,
       maxPickerHeight,
-      textFieldBackgroundColor
+      textFieldBackgroundColor,
+      ariaLabelledBy,
+      ariaLive
     } = this.props;
     const {
       count,
@@ -484,6 +486,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
     return /*#__PURE__*/React.createElement(SelectComponent, _extends({
       value: value,
       autoFocus: autoFocus !== undefined ? autoFocus : menuIsOpen,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-live": ariaLive,
       ref: this.handleSelectRef,
       isMulti: isMulti,
       options: this.getOptions(),

package/dist/es2019/components/MultiValueContainer.js

@@ -67,7 +67,18 @@ export class MultiValueContainer extends React.PureComponent {
       }
 
       if (addMoreMessage === undefined) {
-        return /*#__PURE__*/React.createElement(FormattedMessage, messages.addMore, addMore => this.addPlaceholder(addMore));
+        return /*#__PURE__*/React.createElement(FormattedMessage, messages.addMore, addMore => {
+          var _join, _addMoreMessages;
+
+          let addMoreMessages = addMore;
+
+          if (addMore && typeof addMore === 'string') {
+            addMoreMessages = [addMore];
+          }
+
+          const placeholder = (_join = (_addMoreMessages = addMoreMessages) === null || _addMoreMessages === void 0 ? void 0 : _addMoreMessages.join('')) !== null && _join !== void 0 ? _join : '';
+          return this.addPlaceholder(placeholder);
+        });
       }
 
       return this.addPlaceholder(addMoreMessage);

package/dist/es2019/components/styles.js

@@ -9,6 +9,7 @@ export const AVATAR_PADDING = 6;
 export const INDICATOR_WIDTH = 39;
 const TOTAL_PADDING_TAG_TO_CONTAINER = 10;
 const TAG_MARGIN_WIDTH = 4;
+const PLACEHOLDER_MARGIN = 2;
 export const getStyles = memoizeOne((width, isMulti, overrideStyles) => {
   let styles = {
     menu: (css, state) => ({ ...css,
@@ -129,6 +130,7 @@ export const getStyles = memoizeOne((width, isMulti, overrideStyles) => {
       /* Necessary to make input height and tag height the same. */
       marginBottom: TAG_MARGIN_WIDTH,
       marginTop: TAG_MARGIN_WIDTH,
+      marginLeft: PLACEHOLDER_MARGIN,
 
       /* Padding top and bottom of 2 is set by default. */
       paddingTop: 0,

package/dist/es2019/version.json

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

package/dist/esm/analytics.js

@@ -6,8 +6,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
-import { name as packageName, version as packageVersion } from './version.json';
+import versionJson from './version.json';
 import { isExternalUser } from './components/utils';
+var packageName = versionJson.name;
+var packageVersion = versionJson.version;
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/esm/components/BaseUserPicker.js

@@ -518,7 +518,9 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
           fieldId = _this$props4.fieldId,
           inputId = _this$props4.inputId,
           maxPickerHeight = _this$props4.maxPickerHeight,
-          textFieldBackgroundColor = _this$props4.textFieldBackgroundColor;
+          textFieldBackgroundColor = _this$props4.textFieldBackgroundColor,
+          ariaLabelledBy = _this$props4.ariaLabelledBy,
+          ariaLive = _this$props4.ariaLive;
       var _this$state3 = this.state,
           count = _this$state3.count,
           hoveringClearIndicator = _this$state3.hoveringClearIndicator,
@@ -530,6 +532,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       return /*#__PURE__*/React.createElement(SelectComponent, _extends({
         value: value,
         autoFocus: autoFocus !== undefined ? autoFocus : menuIsOpen,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-live": ariaLive,
         ref: this.handleSelectRef,
         isMulti: isMulti,
         options: this.getOptions(),

package/dist/esm/components/MultiValueContainer.js

@@ -77,7 +77,16 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
 
       if (addMoreMessage === undefined) {
         return /*#__PURE__*/React.createElement(FormattedMessage, messages.addMore, function (addMore) {
-          return _this.addPlaceholder(addMore);
+          var _join, _addMoreMessages;
+
+          var addMoreMessages = addMore;
+
+          if (addMore && typeof addMore === 'string') {
+            addMoreMessages = [addMore];
+          }
+
+          var placeholder = (_join = (_addMoreMessages = addMoreMessages) === null || _addMoreMessages === void 0 ? void 0 : _addMoreMessages.join('')) !== null && _join !== void 0 ? _join : '';
+          return _this.addPlaceholder(placeholder);
         });
       }
 

package/dist/esm/components/styles.js

@@ -19,6 +19,7 @@ export var AVATAR_PADDING = 6;
 export var INDICATOR_WIDTH = 39;
 var TOTAL_PADDING_TAG_TO_CONTAINER = 10;
 var TAG_MARGIN_WIDTH = 4;
+var PLACEHOLDER_MARGIN = 2;
 export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
   var styles = {
     menu: function menu(css, state) {
@@ -154,6 +155,7 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
         /* Necessary to make input height and tag height the same. */
         marginBottom: TAG_MARGIN_WIDTH,
         marginTop: TAG_MARGIN_WIDTH,
+        marginLeft: PLACEHOLDER_MARGIN,
 
         /* Padding top and bottom of 2 is set by default. */
         paddingTop: 0,

package/dist/esm/util/i18n-util.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 /**
  * Tries to get the most specific messages bundle for a given locale.

package/dist/esm/version.json

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

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

@@ -51,7 +51,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private getAppearance;
     render(): JSX.Element;
 }
-export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "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" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "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" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
     isMulti: boolean;
     subtle: boolean;
     noBorder: boolean;

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<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "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" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width" | "offset" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "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" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width" | "offset" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;

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

@@ -10,7 +10,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
     componentDidMount(): void;
     render(): JSX.Element;
 }
-export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "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" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
+export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "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" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
     width: number;
     isMulti: boolean;
 }, never>> & React.RefAttributes<any>>;

package/dist/types/types.d.ts

@@ -132,6 +132,10 @@ export declare type UserPickerProps = WithAnalyticsEventsProps & {
     closeMenuOnScroll?: boolean | EventListener;
     /** Whether to block scrolling actions */
     menuShouldBlockScroll?: boolean;
+    /** Accessibility: Identifies the element (or elements) that labels the current element.*/
+    ariaLabelledBy?: string;
+    /** Accessibility: Used to set the priority with which screen reader should treat updates to live regions.*/
+    ariaLive?: 'polite' | 'off' | 'assertive';
 };
 export declare type PopupUserPickerProps = UserPickerProps & {
     /** Whether to use the popup version of the single picker */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "9.1.1",
+  "version": "9.2.2",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/logo": "^13.7.0",
+    "@atlaskit/logo": "^13.8.0",
     "@atlaskit/lozenge": "^11.0.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/select": "^15.3.0",
@@ -59,7 +59,7 @@
     "@atlaskit/range": "^6.0.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/textfield": "^5.0.0",
-    "@atlaskit/util-data-test": "^17.2.0",
+    "@atlaskit/util-data-test": "^17.5.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^10.0.7",
     "@testing-library/dom": "^7.7.3",

package/report.api.md

@@ -0,0 +1,552 @@
+## API Report File for "@atlaskit/user-picker"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { Placement } from '@atlaskit/popper';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+import { StylesConfig } from '@atlaskit/select';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+
+export declare type ActionTypes =
+  | 'select-option'
+  | 'deselect-option'
+  | 'remove-value'
+  | 'pop-value'
+  | 'set-value'
+  | 'clear'
+  | 'create-option';
+
+export declare type Appearance = 'normal' | 'compact';
+
+export declare type AtlasKitSelectChange = (
+  value: AtlaskitSelectValue,
+  extraInfo: {
+    removedValue?: Option_2;
+    option?: Option_2;
+    action: ActionTypes;
+  },
+) => void;
+
+export declare type AtlaskitSelectValue =
+  | Option_2
+  | Array<Option_2>
+  | null
+  | undefined;
+
+declare type BoundariesElement =
+  | 'scrollParent'
+  | 'window'
+  | 'viewport'
+  | HTMLElement;
+
+export declare type DefaultValue =
+  | Value
+  | OptionIdentifier
+  | OptionIdentifier[];
+
+export declare interface Email extends OptionData {
+  type: 'email';
+  suggestion?: boolean;
+}
+
+export declare const EmailType = 'email';
+
+export declare type EmailValidationResponse = 'INVALID' | 'POTENTIAL' | 'VALID';
+
+export declare type EmailValidator = (
+  inputText: string,
+) => EmailValidationResponse;
+
+export declare interface ExternalUser extends User {
+  externalUserType?: 'crossSite' | 'thirdParty';
+  requiresSourceHydration?: boolean;
+  sources: UserSource[];
+}
+
+export declare interface Group extends OptionData {
+  highlight?: GroupHighlight;
+  type: 'group';
+}
+
+export declare interface GroupHighlight {
+  name: HighlightRange[];
+}
+
+export declare const GroupType = 'group';
+
+export declare interface HighlightRange {
+  start: number;
+  end: number;
+}
+
+export declare type InputActionTypes =
+  | 'set-value'
+  | 'input-change'
+  | 'input-blur'
+  | 'menu-close';
+
+export declare const isEmail: (option: OptionData) => option is Email;
+
+export declare const isExternalUser: (
+  option: OptionData,
+) => option is ExternalUser;
+
+export declare const isTeam: (option: OptionData) => option is Team;
+
+export declare const isUser: (option: OptionData) => option is User;
+
+export declare const isValidEmail: EmailValidator;
+
+export declare interface LoadOptions {
+  (searchText?: string, sessionId?: string):
+    | Promisable<OptionData | OptionData[]>
+    | Iterable<
+        Promisable<OptionData[] | OptionData> | OptionData | OptionData[]
+      >;
+}
+
+declare interface LoadUserSource {
+  (accountId: string, signal?: AbortSignal): Promise<UserSourceResult[]>;
+}
+
+declare type LozengeColor =
+  | 'default'
+  | 'success'
+  | 'removed'
+  | 'inprogress'
+  | 'new'
+  | 'moved';
+
+export declare interface LozengeProps {
+  text: string;
+  tooltip?: string;
+  appearance?: LozengeColor;
+  isBold?: boolean;
+}
+
+export declare type OnChange = (value: Value, action: ActionTypes) => void;
+
+export declare type OnInputChange = (
+  query?: string,
+  sessionId?: string,
+) => void;
+
+export declare type OnOption = (value: Value, sessionId?: string) => void;
+
+export declare type OnPicker = (sessionId?: string) => void;
+
+declare type Option_2<Data = OptionData> = {
+  label: string;
+  value: string;
+  data: Data;
+};
+export { Option_2 as Option };
+
+export declare interface OptionData {
+  avatarUrl?: any;
+  id: string;
+  name: string;
+  type?: 'user' | 'team' | 'email' | 'group';
+  fixed?: boolean;
+  lozenge?: string | LozengeProps;
+}
+
+export declare type OptionIdentifier = Pick<OptionData, 'id' | 'type'>;
+
+export declare const PopupUserPicker: React_2.ForwardRefExoticComponent<
+  Pick<
+    Omit<PopupUserPickerProps, keyof WithAnalyticsEventsProps>,
+    | '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'
+    | 'loadUserSource'
+    | 'search'
+    | 'anchor'
+    | 'open'
+    | 'onSelection'
+    | 'onClear'
+    | 'onClose'
+    | 'appearance'
+    | 'subtle'
+    | 'noBorder'
+    | 'addMoreMessage'
+    | 'clearValueLabel'
+    | 'allowEmail'
+    | 'suggestEmailsForDomain'
+    | 'emailLabel'
+    | 'disableInput'
+    | 'isValidEmail'
+    | 'maxOptions'
+    | 'ariaLabelledBy'
+    | 'ariaLive'
+    | 'popupTitle'
+  > &
+    Partial<
+      Pick<
+        Omit<PopupUserPickerProps, keyof WithAnalyticsEventsProps>,
+        | 'isMulti'
+        | 'width'
+        | 'offset'
+        | 'boundariesElement'
+        | 'placement'
+        | 'rootBoundary'
+        | 'shouldFlip'
+      >
+    > &
+    Partial<
+      Pick<
+        {
+          boundariesElement: string;
+          width: number;
+          isMulti: boolean;
+          offset: number[];
+          placement: string;
+          rootBoundary: string;
+          shouldFlip: boolean;
+        },
+        never
+      >
+    > &
+    React_2.RefAttributes<any>
+>;
+
+export declare type PopupUserPickerProps = UserPickerProps & {
+  /** Whether to use the popup version of the single picker */
+  target: Target;
+  /** Optional title assigned to popup picker */
+  popupTitle?: string;
+  /**
+   * The boundary element that the popup will check for overflow.
+   * Defaults to `"viewport"` which are parent scroll containers,
+   * but can be set to any element.
+   */
+  boundariesElement?: BoundariesElement;
+  /**
+   * Distance the popup should be offset from the reference in the format of [along, away] (units in px).
+   */
+  offset?: [number, number];
+  /**
+   * Placement of where the popup should be displayed relative to the trigger element.
+   * Defaults to `"auto"`.
+   */
+  placement?: Placement;
+  /**
+   * The root boundary that the popup will check for overflow.
+   * Defaults to `"viewport"` but can be set to `"document"`.
+   * See `@atlaskit/popper` for further details.
+   */
+  rootBoundary?: RootBoundary;
+  /**
+   * Allows the dropdown menu to be placed on the opposite side of its trigger if it does not
+   * fit in the viewport.
+   */
+  shouldFlip?: boolean;
+};
+
+export declare type Promisable<T> = T | PromiseLike<T>;
+
+declare type RootBoundary = 'viewport' | 'document';
+
+export declare type Target = (options: {
+  ref: any;
+  isOpen: boolean;
+}) => ReactNode;
+
+export declare interface Team extends OptionData {
+  avatarUrl?: string;
+  description?: string;
+  memberCount?: number;
+  members?: TeamMember[];
+  includesYou?: boolean;
+  highlight?: TeamHighlight;
+  type: 'team';
+}
+
+export declare interface TeamHighlight {
+  name: HighlightRange[];
+  description?: HighlightRange[];
+}
+
+export declare interface TeamMember {
+  name: string;
+  id: string;
+}
+
+export declare const TeamType = 'team';
+
+export declare interface User extends OptionData {
+  avatarUrl?: string;
+  publicName?: string;
+  highlight?: UserHighlight;
+  byline?: string;
+  type?: 'user';
+  email?: string;
+  isExternal?: boolean;
+}
+
+export declare interface UserHighlight {
+  name: HighlightRange[];
+  publicName: HighlightRange[];
+}
+
+declare const UserPicker: React_2.ForwardRefExoticComponent<
+  Pick<
+    Omit<UserPickerProps, keyof WithAnalyticsEventsProps>,
+    | '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'
+    | 'loadUserSource'
+    | 'search'
+    | 'anchor'
+    | 'open'
+    | 'onSelection'
+    | 'onClear'
+    | 'onClose'
+    | 'appearance'
+    | 'subtle'
+    | 'noBorder'
+    | 'addMoreMessage'
+    | 'clearValueLabel'
+    | 'allowEmail'
+    | 'suggestEmailsForDomain'
+    | 'emailLabel'
+    | 'disableInput'
+    | 'isValidEmail'
+    | 'maxOptions'
+    | 'ariaLabelledBy'
+    | 'ariaLive'
+  > &
+    Partial<
+      Pick<
+        Omit<UserPickerProps, keyof WithAnalyticsEventsProps>,
+        'isMulti' | 'width'
+      >
+    > &
+    Partial<
+      Pick<
+        {
+          width: number;
+          isMulti: boolean;
+        },
+        never
+      >
+    > &
+    React_2.RefAttributes<any>
+>;
+export default UserPicker;
+
+export declare type UserPickerProps = WithAnalyticsEventsProps & {
+  /**
+   * Used to configure additional information regarding where the
+   * user picker has been mounted.
+   *
+   * The purpose is to give more context as to where user picker events
+   * are being fired from, as the current data may not uniquely identify
+   * which field is the source.
+   *
+   * The value will be passed as a data attribute for analytics.
+   * Examples include "assignee", "watchers" and "share".
+   *
+   * A second usage for the fieldId is for server side rendering (SSR) where it must be a unique id per UserPicker
+   * instance contained in the serialized SSR content. E.g. a SPA page rendered through SSR that has multiple user pickers.
+   *
+   * fieldId can be set to null if the integrator is not listening
+   * for the analytic events or does not care about SSR.
+   */
+  fieldId: string | null;
+  /** List of users or teams to be used as options by the user picker. */
+  options?: OptionData[];
+  /** Width of the user picker field. It can be the amount of pixels as numbers or a string with the percentage. */
+  width?: number | string;
+  /** Sets the minimum width for the menu. If not set, menu will always have the same width of the field. */
+  menuMinWidth?: number;
+  /** Sets max height of the user picker. If not set, the height will grow based on number of picked users. */
+  maxPickerHeight?: number;
+  /** Sets the background color to be the same color as a textfield (Atlaskit N10) */
+  textFieldBackgroundColor?: boolean;
+  /**
+   * Function used to load options asynchronously.
+   * accepts two optional params:
+   * searchText?: optional text to filter results
+   * sessionId?: user picker session identifier, used to track success metric for users providers
+   */
+  loadOptions?: LoadOptions;
+  /**
+   * Function used to load user source if they are an external user.
+   * accepts two params:
+   * accountId: account ID of the user to lookup sources
+   * signal: AbortController signal to abort the request if the tooltip is closed
+   */
+  loadUserSource?: LoadUserSource;
+  /** Callback for value change events fired whenever a selection is inserted or removed. */
+  onChange?: OnChange;
+  /** To enable multi user picker. */
+  isMulti?: boolean;
+  /** Input text value. */
+  search?: string;
+  /** Anchor for the user picker popup. */
+  anchor?: React_2.ComponentType<any>;
+  /** Controls if user picker menu is open or not. If not provided, UserPicker will control menu state internally. */
+  open?: boolean;
+  /** Show the loading indicator. */
+  isLoading?: boolean;
+  /** Callback for search input text change events. */
+  onInputChange?: OnInputChange;
+  /** Callback for when a selection is made. */
+  onSelection?: OnOption;
+  /** Callback for when the field gains focus. */
+  onFocus?: OnPicker;
+  /** Callback for when the field loses focus. */
+  onBlur?: OnPicker;
+  /** Callback for when the value/s in the picker is cleared. */
+  onClear?: OnPicker;
+  /** Callback that is triggered when popup picker is closed */
+  onClose?: OnPicker;
+  /** Appearance of the user picker. */
+  appearance?: Appearance;
+  /** Display the picker with a subtle style. */
+  subtle?: boolean;
+  /** Display the picker with no border. */
+  noBorder?: boolean;
+  /**
+   * You may pass through a `StylesConfig` to be merged with the picker default styles if a custom override is required.
+   * Consider using noBorder, subtle before customising further.
+   * See https://react-select.com/styles
+   */
+  styles?: StylesConfig;
+  /** Default value for the field to be used on initial render.
+   * `defaultValue` differs from `value` in that it sets the initial value then leaves the component 'uncontrolled'
+   * whereas setting the `value` prop delegates responsibility for maintaining the value to the caller
+   * (i.e. listen to `onChange`) */
+  defaultValue?: DefaultValue;
+  /** Placeholder text to be shown when there is no value in the field. */
+  placeholder?: React_2.ReactNode;
+  /** Message to encourage the user to add more items to user picker. */
+  addMoreMessage?: string;
+  /** Message to be shown when the menu is open but no options are provided.
+   * If message is null, no message will be displayed.
+   * If message is undefined, default message will be displayed.
+   */
+  noOptionsMessage?:
+    | ((value: { inputValue: string }) => string | null)
+    | string
+    | null;
+  /** Controls if the user picker has a value or not. If not provided, UserPicker will control the value internally. */
+  value?: Value;
+  /** Disable all interactions with the picker, putting it in a read-only state. */
+  isDisabled?: boolean;
+  /** Display a remove button on the single picker. True by default. */
+  isClearable?: boolean;
+  /** Optional tooltip to display on hover over the clear indicator. */
+  clearValueLabel?: string;
+  /** React-select prop for controlling menu position */
+  menuPosition?: 'absolute' | 'fixed';
+  /** React-select prop for blocking menu scroll on container when menu scrolled to the very top/bottom of the menu */
+  captureMenuScroll?: boolean;
+  /** Whether the menu should use a portal, and where it should attach. */
+  menuPortalTarget?: HTMLElement;
+  /** Whether the user is allowed to enter emails as a value. */
+  allowEmail?: boolean;
+  /** Setting this with allowEmail will cause the picker to constantly show an email option at the bottom for the supplied email domain/an email the user types in */
+  suggestEmailsForDomain?: string;
+  /** Email option label */
+  emailLabel?: string;
+  /** Whether to disable interaction with the input */
+  disableInput?: boolean;
+  /** Override default email validation function. */
+  isValidEmail?: EmailValidator;
+  /** Override the internal behaviour to automatically focus the control when the picker is open */
+  autoFocus?: boolean;
+  /** The maximum number options to be displayed in the dropdown menu during any state of search. The value should be non-negative. */
+  maxOptions?: number;
+  /** Allows clicking on a label with the same id to open user picker. */
+  inputId?: string;
+  /** Whether to close menu on scroll */
+  closeMenuOnScroll?: boolean | EventListener;
+  /** Whether to block scrolling actions */
+  menuShouldBlockScroll?: boolean;
+  /** Accessibility: Identifies the element (or elements) that labels the current element.*/
+  ariaLabelledBy?: string;
+  /** Accessibility: Used to set the priority with which screen reader should treat updates to live regions.*/
+  ariaLive?: 'polite' | 'off' | 'assertive';
+};
+
+export declare type UserPickerState = {
+  options: OptionData[];
+  value?: AtlaskitSelectValue;
+  isDefaultSet: boolean;
+  inflightRequest: number;
+  count: number;
+  hoveringClearIndicator: boolean;
+  menuIsOpen: boolean;
+  inputValue: string;
+  resolving: boolean;
+};
+
+export declare type UserSource =
+  | 'google'
+  | 'slack'
+  | 'microsoft'
+  | 'github'
+  | 'jira'
+  | 'confluence'
+  | 'other-atlassian';
+
+declare interface UserSourceResult {
+  sourceId: string;
+  sourceType: UserSource;
+}
+
+export declare const UserType = 'user';
+
+export declare type Value = OptionData | OptionData[] | null | undefined;
+
+export {};
+```