@atlaskit/user-picker 9.2.0 → 9.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/user-picker
 
+## 9.3.0
+
+### Minor Changes
+
+- [`bc0b47732f8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc0b47732f8) - [ux] Fix bug where user picker input is not being unfocused when disableInput is set. The new behavior will enable you to still focus on the input but not interact with it, unless it is to delete selected users.
+
+## 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

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

@@ -152,7 +152,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         });
 
         _this.setState({
-          value: remainingValues ? remainingValues : []
+          value: remainingValues ? remainingValues : [],
+          menuIsOpen: true
         });
       }
 
@@ -366,8 +367,7 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
       if (event.keyCode === 32 && !_this.state.inputValue) {
         event.preventDefault();
-
-        _this.setState({
+        !_this.props.disableInput && _this.setState({
           inputValue: ' '
         });
       }
@@ -582,6 +582,10 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
     value: function getDerivedStateFromProps(nextProps, prevState) {
       var derivedState = {};
 
+      if (nextProps.isDisabled || nextProps.disableInput) {
+        derivedState.menuIsOpen = false;
+      }
+
       if (nextProps.open !== undefined) {
         derivedState.menuIsOpen = nextProps.open;
       }

package/dist/cjs/components/Input.js

@@ -47,9 +47,15 @@ var Input = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyPress", function (e) {
+      var _this$props$selectPro;
+
       if (e.key === 'Enter') {
         e.preventDefault();
       }
+
+      if ((_this$props$selectPro = _this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
+        e.preventDefault();
+      }
     });
     return _this;
   }
@@ -57,10 +63,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(Input, [{
     key: "render",
     value: function render() {
-      var selectProps = this.props.selectProps;
       return /*#__PURE__*/_react.default.createElement(_select.components.Input, (0, _extends2.default)({}, this.props, {
         innerRef: this.props.innerRef,
-        isDisabled: selectProps && selectProps.disableInput,
         onKeyPress: this.handleKeyPress
       }));
     }

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.2.0",
+	"version": "9.3.0",
 	"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

@@ -18,6 +18,10 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
   static getDerivedStateFromProps(nextProps, prevState) {
     const derivedState = {};
 
+    if (nextProps.isDisabled || nextProps.disableInput) {
+      derivedState.menuIsOpen = false;
+    }
+
     if (nextProps.open !== undefined) {
       derivedState.menuIsOpen = nextProps.open;
     }
@@ -119,7 +123,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       if (removedValue && this.state.value && Array.isArray(this.state.value)) {
         const remainingValues = this.state.value.filter(val => val.data.id !== removedValue.data.id);
         this.setState({
-          value: remainingValues ? remainingValues : []
+          value: remainingValues ? remainingValues : [],
+          menuIsOpen: true
         });
       }
 
@@ -324,7 +329,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
 
       if (event.keyCode === 32 && !this.state.inputValue) {
         event.preventDefault();
-        this.setState({
+        !this.props.disableInput && this.setState({
           inputValue: ' '
         });
       }

package/dist/es2019/components/Input.js

@@ -7,19 +7,21 @@ export class Input extends React.Component {
     super(...args);
 
     _defineProperty(this, "handleKeyPress", e => {
+      var _this$props$selectPro;
+
       if (e.key === 'Enter') {
         e.preventDefault();
       }
+
+      if ((_this$props$selectPro = this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
+        e.preventDefault();
+      }
     });
   }
 
   render() {
-    const {
-      selectProps
-    } = this.props;
     return /*#__PURE__*/React.createElement(components.Input, _extends({}, this.props, {
       innerRef: this.props.innerRef,
-      isDisabled: selectProps && selectProps.disableInput,
       onKeyPress: this.handleKeyPress
     }));
   }

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.2.0",
+	"version": "9.3.0",
 	"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

@@ -135,7 +135,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         });
 
         _this.setState({
-          value: remainingValues ? remainingValues : []
+          value: remainingValues ? remainingValues : [],
+          menuIsOpen: true
         });
       }
 
@@ -364,8 +365,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
 
       if (event.keyCode === 32 && !_this.state.inputValue) {
         event.preventDefault();
-
-        _this.setState({
+        !_this.props.disableInput && _this.setState({
           inputValue: ' '
         });
       }
@@ -584,6 +584,10 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     value: function getDerivedStateFromProps(nextProps, prevState) {
       var derivedState = {};
 
+      if (nextProps.isDisabled || nextProps.disableInput) {
+        derivedState.menuIsOpen = false;
+      }
+
       if (nextProps.open !== undefined) {
         derivedState.menuIsOpen = nextProps.open;
       }

package/dist/esm/components/Input.js

@@ -30,9 +30,15 @@ export var Input = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "handleKeyPress", function (e) {
+      var _this$props$selectPro;
+
       if (e.key === 'Enter') {
         e.preventDefault();
       }
+
+      if ((_this$props$selectPro = _this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
+        e.preventDefault();
+      }
     });
 
     return _this;
@@ -41,10 +47,8 @@ export var Input = /*#__PURE__*/function (_React$Component) {
   _createClass(Input, [{
     key: "render",
     value: function render() {
-      var selectProps = this.props.selectProps;
       return /*#__PURE__*/React.createElement(components.Input, _extends({}, this.props, {
         innerRef: this.props.innerRef,
-        isDisabled: selectProps && selectProps.disableInput,
         onKeyPress: this.handleKeyPress
       }));
     }

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.2.0",
+	"version": "9.3.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "9.2.0",
+  "version": "9.3.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,10 +29,10 @@
     "@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",
+    "@atlaskit/select": "^15.4.0",
     "@atlaskit/spinner": "^15.1.4",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.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.3.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 {};
+```