@atlaskit/user-picker 10.18.0 → 10.19.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/user-picker
 
+## 10.19.0
+
+### Minor Changes
+
+- [#69996](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69996) [`1b320a82df61`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1b320a82df61) - Add Team fallback avatar
+
+### Patch Changes
+
+- [#74949](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74949) [`ba44973e5e90`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ba44973e5e90) - openMenuOnClick prop added to support userpicker to work as select
+- Updated dependencies
+
 ## 10.18.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -48,6 +48,9 @@
         {
             "path": "../../../design-system/spinner/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../people-and-teams/teams-avatar/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/theme/afm-cc/tsconfig.json"
         },

package/dist/cjs/analytics.js

@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "10.18.0";
+var packageVersion = "10.19.0";
 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/cjs/components/BaseUserPicker.js

@@ -329,17 +329,19 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
     // if it is node environment, focusedOptionObserver will be falsy value.
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusedOptionObserver", typeof MutationObserver === 'function' && new MutationObserver(_this.focusedOptionObserverCallback));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
-      // Escape
-      if (event.keyCode === 27) {
-        _this.blur();
-      }
+      if (!_this.isMenuOpenOnClickForSingleSelect) {
+        // Escape
+        if (event.keyCode === 27) {
+          _this.blur();
+        }
 
-      // Space
-      if (event.keyCode === 32 && !_this.state.inputValue) {
-        event.preventDefault();
-        !_this.props.disableInput && _this.setState({
-          inputValue: ' '
-        });
+        // Space
+        if (event.keyCode === 32 && !_this.state.inputValue) {
+          event.preventDefault();
+          !_this.props.disableInput && _this.setState({
+            inputValue: ' '
+          });
+        }
       }
       if (_this.session) {
         _this.session.lastKey = event.keyCode;
@@ -425,6 +427,11 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
     return _this;
   }
   (0, _createClass2.default)(BaseUserPickerWithoutAnalytics, [{
+    key: "isMenuOpenOnClickForSingleSelect",
+    get: function get() {
+      return this.props.openMenuOnClick && !this.props.isMulti;
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$props3 = this.props,
@@ -529,7 +536,8 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         name = _this$props4.name,
         header = _this$props4.header,
         required = _this$props4.required,
-        UNSAFE_hasDraggableParentComponent = _this$props4.UNSAFE_hasDraggableParentComponent;
+        UNSAFE_hasDraggableParentComponent = _this$props4.UNSAFE_hasDraggableParentComponent,
+        placeholderAvatar = _this$props4.placeholderAvatar;
       var _this$state3 = this.state,
         count = _this$state3.count,
         hoveringClearIndicator = _this$state3.hoveringClearIndicator,
@@ -539,6 +547,13 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         resolving = _this$state3.resolving,
         showError = _this$state3.showError;
       var appearance = this.getAppearance();
+      // these props override the default select menu open and close
+      var menuOpenDeciderProps = _objectSpread({}, !this.isMenuOpenOnClickForSingleSelect && {
+        menuIsOpen: menuIsOpen,
+        blurInputOnSelect: !isMulti,
+        openMenuOnFocus: true,
+        onFocus: this.handleFocus
+      });
       return /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
         name: name,
         value: value,
@@ -556,7 +571,6 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         enableAnimation: isMulti,
         components: components,
         inputValue: inputValue,
-        menuIsOpen: menuIsOpen,
         isLoading: count > 0 || resolving || isLoading,
         loadingMessage: loadingMessage,
         menuPlacement: "auto",
@@ -568,13 +582,11 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         isClearable: isClearable,
         noBorder: noBorder,
         subtle: subtle,
-        blurInputOnSelect: !isMulti,
         closeMenuOnSelect: !isMulti,
         noOptionsMessage: showError ? loadOptionsErrorMessage : typeof noOptionsMessage === 'function' ? noOptionsMessage : function () {
           return noOptionsMessage;
         },
         footer: footer,
-        openMenuOnFocus: true,
         isDisabled: isDisabled,
         isFocused: menuIsOpen,
         backspaceRemovesValue: isMulti,
@@ -588,7 +600,6 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         inputId: inputId,
         onChange: this.handleChange,
         onMenuOpen: this.handleOpen,
-        onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onMenuClose: this.handleClose,
         onInputChange: this.handleInputChange,
@@ -596,10 +607,11 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         onKeyDown: this.handleKeyDown,
         maxPickerHeight: maxPickerHeight,
         textFieldBackgroundColor: textFieldBackgroundColor,
-        header: header
+        header: header,
+        placeholderAvatar: placeholderAvatar
       }, this.ariaProps, pickerProps, UNSAFE_hasDraggableParentComponent && {
         onValueContainerClick: this.handleClickDraggableParentComponent
-      }));
+      }, menuOpenDeciderProps));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -638,6 +650,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
   isClearable: true,
   loadOptionsErrorMessage: function loadOptionsErrorMessage() {
     return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.errorMessage);
-  }
+  },
+  openMenuOnClick: false
 });
 var BaseUserPicker = exports.BaseUserPicker = (0, _analyticsNext.withAnalyticsEvents)()(BaseUserPickerWithoutAnalytics);

package/dist/cjs/components/SingleValueContainer.js

@@ -47,10 +47,12 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
         appearance = _this$props$selectPro.appearance,
         isFocused = _this$props$selectPro.isFocused,
         inputValue = _this$props$selectPro.inputValue,
-        value = _this$props$selectPro.value;
+        value = _this$props$selectPro.value,
+        placeholderAvatar = _this$props$selectPro.placeholderAvatar;
       if (isFocused || !hasValue) {
         return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
           appearance: appearance,
+          type: placeholderAvatar,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
         });
       }

package/dist/cjs/components/SizeableAvatar.js

@@ -11,6 +11,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar"));
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("./utils");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -29,14 +30,17 @@ var SizeableAvatar = exports.SizeableAvatar = /*#__PURE__*/function (_React$Pure
         src = _this$props.src,
         name = _this$props.name,
         presence = _this$props.presence,
-        appearance = _this$props.appearance;
-      return /*#__PURE__*/_react.default.createElement(_avatar.default, {
+        appearance = _this$props.appearance,
+        _this$props$type = _this$props.type,
+        type = _this$props$type === void 0 ? 'person' : _this$props$type;
+      var props = {
         size: (0, _utils.getAvatarSize)(appearance),
         src: src,
         name: name,
-        borderColor: "transparent",
+        borderColor: 'transparent',
         presence: presence
-      });
+      };
+      return type === 'team' ? /*#__PURE__*/_react.default.createElement(_teamsAvatar.default, props) : /*#__PURE__*/_react.default.createElement(_avatar.default, props);
     }
   }]);
   return SizeableAvatar;

package/dist/cjs/components/TeamOption/main.js

@@ -91,7 +91,8 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
       return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
-        name: name
+        name: name,
+        type: "team"
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLozengeProps", function () {

package/dist/es2019/analytics.js

@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "10.18.0";
+const packageVersion = "10.19.0";
 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

@@ -309,17 +309,19 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
     // if it is node environment, focusedOptionObserver will be falsy value.
     _defineProperty(this, "focusedOptionObserver", typeof MutationObserver === 'function' && new MutationObserver(this.focusedOptionObserverCallback));
     _defineProperty(this, "handleKeyDown", event => {
-      // Escape
-      if (event.keyCode === 27) {
-        this.blur();
-      }
+      if (!this.isMenuOpenOnClickForSingleSelect) {
+        // Escape
+        if (event.keyCode === 27) {
+          this.blur();
+        }
 
-      // Space
-      if (event.keyCode === 32 && !this.state.inputValue) {
-        event.preventDefault();
-        !this.props.disableInput && this.setState({
-          inputValue: ' '
-        });
+        // Space
+        if (event.keyCode === 32 && !this.state.inputValue) {
+          event.preventDefault();
+          !this.props.disableInput && this.setState({
+            inputValue: ' '
+          });
+        }
       }
       if (this.session) {
         this.session.lastKey = event.keyCode;
@@ -398,6 +400,9 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
     };
     this.optionsShownUfoExperienceInstance = userPickerOptionsShownUfoExperience.getInstance(uuidv4());
   }
+  get isMenuOpenOnClickForSingleSelect() {
+    return this.props.openMenuOnClick && !this.props.isMulti;
+  }
   componentDidMount() {
     const {
       open,
@@ -498,7 +503,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       name,
       header,
       required,
-      UNSAFE_hasDraggableParentComponent
+      UNSAFE_hasDraggableParentComponent,
+      placeholderAvatar
     } = this.props;
     const {
       count,
@@ -510,6 +516,15 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       showError
     } = this.state;
     const appearance = this.getAppearance();
+    // these props override the default select menu open and close
+    const menuOpenDeciderProps = {
+      ...(!this.isMenuOpenOnClickForSingleSelect && {
+        menuIsOpen,
+        blurInputOnSelect: !isMulti,
+        openMenuOnFocus: true,
+        onFocus: this.handleFocus
+      })
+    };
     return /*#__PURE__*/React.createElement(SelectComponent, _extends({
       name: name,
       value: value,
@@ -527,7 +542,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       enableAnimation: isMulti,
       components: components,
       inputValue: inputValue,
-      menuIsOpen: menuIsOpen,
       isLoading: count > 0 || resolving || isLoading,
       loadingMessage: loadingMessage,
       menuPlacement: "auto",
@@ -539,11 +553,9 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       isClearable: isClearable,
       noBorder: noBorder,
       subtle: subtle,
-      blurInputOnSelect: !isMulti,
       closeMenuOnSelect: !isMulti,
       noOptionsMessage: showError ? loadOptionsErrorMessage : typeof noOptionsMessage === 'function' ? noOptionsMessage : () => noOptionsMessage,
       footer: footer,
-      openMenuOnFocus: true,
       isDisabled: isDisabled,
       isFocused: menuIsOpen,
       backspaceRemovesValue: isMulti,
@@ -557,7 +569,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       inputId: inputId,
       onChange: this.handleChange,
       onMenuOpen: this.handleOpen,
-      onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       onMenuClose: this.handleClose,
       onInputChange: this.handleInputChange,
@@ -565,10 +576,11 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       onKeyDown: this.handleKeyDown,
       maxPickerHeight: maxPickerHeight,
       textFieldBackgroundColor: textFieldBackgroundColor,
-      header: header
+      header: header,
+      placeholderAvatar: placeholderAvatar
     }, this.ariaProps, pickerProps, UNSAFE_hasDraggableParentComponent && {
       onValueContainerClick: this.handleClickDraggableParentComponent
-    }));
+    }, menuOpenDeciderProps));
   }
 }
 _defineProperty(BaseUserPickerWithoutAnalytics, "defaultProps", {
@@ -577,6 +589,7 @@ _defineProperty(BaseUserPickerWithoutAnalytics, "defaultProps", {
   noBorder: false,
   textFieldBackgroundColor: false,
   isClearable: true,
-  loadOptionsErrorMessage: () => /*#__PURE__*/React.createElement(FormattedMessage, messages.errorMessage)
+  loadOptionsErrorMessage: () => /*#__PURE__*/React.createElement(FormattedMessage, messages.errorMessage),
+  openMenuOnClick: false
 });
 export const BaseUserPicker = withAnalyticsEvents()(BaseUserPickerWithoutAnalytics);

package/dist/es2019/components/SingleValueContainer.js

@@ -22,12 +22,14 @@ export class SingleValueContainer extends React.Component {
           appearance,
           isFocused,
           inputValue,
-          value
+          value,
+          placeholderAvatar
         }
       } = this.props;
       if (isFocused || !hasValue) {
         return jsx(SizeableAvatar, {
           appearance: appearance,
+          type: placeholderAvatar,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
         });
       }

package/dist/es2019/components/SizeableAvatar.js

@@ -1,4 +1,5 @@
 import Avatar from '@atlaskit/avatar';
+import TeamAvatar from '@atlaskit/teams-avatar';
 import React from 'react';
 import { getAvatarSize } from './utils';
 export class SizeableAvatar extends React.PureComponent {
@@ -7,14 +8,16 @@ export class SizeableAvatar extends React.PureComponent {
       src,
       name,
       presence,
-      appearance
+      appearance,
+      type = 'person'
     } = this.props;
-    return /*#__PURE__*/React.createElement(Avatar, {
+    const props = {
       size: getAvatarSize(appearance),
-      src: src,
-      name: name,
-      borderColor: "transparent",
-      presence: presence
-    });
+      src,
+      name,
+      borderColor: 'transparent',
+      presence
+    };
+    return type === 'team' ? /*#__PURE__*/React.createElement(TeamAvatar, props) : /*#__PURE__*/React.createElement(Avatar, props);
   }
 }

package/dist/es2019/components/TeamOption/main.js

@@ -76,7 +76,8 @@ export class TeamOption extends React.PureComponent {
       return jsx(SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
-        name: name
+        name: name,
+        type: "team"
       });
     });
     _defineProperty(this, "getLozengeProps", () => typeof this.props.team.lozenge === 'string' ? {

package/dist/esm/analytics.js

@@ -5,7 +5,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "10.18.0";
+var packageVersion = "10.19.0";
 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

@@ -322,17 +322,19 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     // if it is node environment, focusedOptionObserver will be falsy value.
     _defineProperty(_assertThisInitialized(_this), "focusedOptionObserver", typeof MutationObserver === 'function' && new MutationObserver(_this.focusedOptionObserverCallback));
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
-      // Escape
-      if (event.keyCode === 27) {
-        _this.blur();
-      }
+      if (!_this.isMenuOpenOnClickForSingleSelect) {
+        // Escape
+        if (event.keyCode === 27) {
+          _this.blur();
+        }
 
-      // Space
-      if (event.keyCode === 32 && !_this.state.inputValue) {
-        event.preventDefault();
-        !_this.props.disableInput && _this.setState({
-          inputValue: ' '
-        });
+        // Space
+        if (event.keyCode === 32 && !_this.state.inputValue) {
+          event.preventDefault();
+          !_this.props.disableInput && _this.setState({
+            inputValue: ' '
+          });
+        }
       }
       if (_this.session) {
         _this.session.lastKey = event.keyCode;
@@ -418,6 +420,11 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     return _this;
   }
   _createClass(BaseUserPickerWithoutAnalytics, [{
+    key: "isMenuOpenOnClickForSingleSelect",
+    get: function get() {
+      return this.props.openMenuOnClick && !this.props.isMulti;
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$props3 = this.props,
@@ -522,7 +529,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         name = _this$props4.name,
         header = _this$props4.header,
         required = _this$props4.required,
-        UNSAFE_hasDraggableParentComponent = _this$props4.UNSAFE_hasDraggableParentComponent;
+        UNSAFE_hasDraggableParentComponent = _this$props4.UNSAFE_hasDraggableParentComponent,
+        placeholderAvatar = _this$props4.placeholderAvatar;
       var _this$state3 = this.state,
         count = _this$state3.count,
         hoveringClearIndicator = _this$state3.hoveringClearIndicator,
@@ -532,6 +540,13 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         resolving = _this$state3.resolving,
         showError = _this$state3.showError;
       var appearance = this.getAppearance();
+      // these props override the default select menu open and close
+      var menuOpenDeciderProps = _objectSpread({}, !this.isMenuOpenOnClickForSingleSelect && {
+        menuIsOpen: menuIsOpen,
+        blurInputOnSelect: !isMulti,
+        openMenuOnFocus: true,
+        onFocus: this.handleFocus
+      });
       return /*#__PURE__*/React.createElement(SelectComponent, _extends({
         name: name,
         value: value,
@@ -549,7 +564,6 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         enableAnimation: isMulti,
         components: components,
         inputValue: inputValue,
-        menuIsOpen: menuIsOpen,
         isLoading: count > 0 || resolving || isLoading,
         loadingMessage: loadingMessage,
         menuPlacement: "auto",
@@ -561,13 +575,11 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         isClearable: isClearable,
         noBorder: noBorder,
         subtle: subtle,
-        blurInputOnSelect: !isMulti,
         closeMenuOnSelect: !isMulti,
         noOptionsMessage: showError ? loadOptionsErrorMessage : typeof noOptionsMessage === 'function' ? noOptionsMessage : function () {
           return noOptionsMessage;
         },
         footer: footer,
-        openMenuOnFocus: true,
         isDisabled: isDisabled,
         isFocused: menuIsOpen,
         backspaceRemovesValue: isMulti,
@@ -581,7 +593,6 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         inputId: inputId,
         onChange: this.handleChange,
         onMenuOpen: this.handleOpen,
-        onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onMenuClose: this.handleClose,
         onInputChange: this.handleInputChange,
@@ -589,10 +600,11 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         onKeyDown: this.handleKeyDown,
         maxPickerHeight: maxPickerHeight,
         textFieldBackgroundColor: textFieldBackgroundColor,
-        header: header
+        header: header,
+        placeholderAvatar: placeholderAvatar
       }, this.ariaProps, pickerProps, UNSAFE_hasDraggableParentComponent && {
         onValueContainerClick: this.handleClickDraggableParentComponent
-      }));
+      }, menuOpenDeciderProps));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -631,6 +643,7 @@ _defineProperty(BaseUserPickerWithoutAnalytics, "defaultProps", {
   isClearable: true,
   loadOptionsErrorMessage: function loadOptionsErrorMessage() {
     return /*#__PURE__*/React.createElement(FormattedMessage, messages.errorMessage);
-  }
+  },
+  openMenuOnClick: false
 });
 export var BaseUserPicker = withAnalyticsEvents()(BaseUserPickerWithoutAnalytics);

package/dist/esm/components/SingleValueContainer.js

@@ -41,10 +41,12 @@ export var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
         appearance = _this$props$selectPro.appearance,
         isFocused = _this$props$selectPro.isFocused,
         inputValue = _this$props$selectPro.inputValue,
-        value = _this$props$selectPro.value;
+        value = _this$props$selectPro.value,
+        placeholderAvatar = _this$props$selectPro.placeholderAvatar;
       if (isFocused || !hasValue) {
         return jsx(SizeableAvatar, {
           appearance: appearance,
+          type: placeholderAvatar,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
         });
       }

package/dist/esm/components/SizeableAvatar.js

@@ -6,6 +6,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import Avatar from '@atlaskit/avatar';
+import TeamAvatar from '@atlaskit/teams-avatar';
 import React from 'react';
 import { getAvatarSize } from './utils';
 export var SizeableAvatar = /*#__PURE__*/function (_React$PureComponent) {
@@ -22,14 +23,17 @@ export var SizeableAvatar = /*#__PURE__*/function (_React$PureComponent) {
         src = _this$props.src,
         name = _this$props.name,
         presence = _this$props.presence,
-        appearance = _this$props.appearance;
-      return /*#__PURE__*/React.createElement(Avatar, {
+        appearance = _this$props.appearance,
+        _this$props$type = _this$props.type,
+        type = _this$props$type === void 0 ? 'person' : _this$props$type;
+      var props = {
         size: getAvatarSize(appearance),
         src: src,
         name: name,
-        borderColor: "transparent",
+        borderColor: 'transparent',
         presence: presence
-      });
+      };
+      return type === 'team' ? /*#__PURE__*/React.createElement(TeamAvatar, props) : /*#__PURE__*/React.createElement(Avatar, props);
     }
   }]);
   return SizeableAvatar;

package/dist/esm/components/TeamOption/main.js

@@ -85,7 +85,8 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       return jsx(SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
-        name: name
+        name: name,
+        type: "team"
       });
     });
     _defineProperty(_assertThisInitialized(_this), "getLozengeProps", function () {

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

@@ -22,6 +22,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
         textFieldBackgroundColor: boolean;
         isClearable: boolean;
         loadOptionsErrorMessage: () => JSX.Element;
+        openMenuOnClick: boolean;
     };
     static getDerivedStateFromProps(nextProps: Partial<UserPickerProps>, prevState: UserPickerState): Partial<UserPickerState>;
     private selectRef;
@@ -41,6 +42,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private addOptions;
     private handleLoadOptionsError;
     private debouncedLoadOptions;
+    private get isMenuOpenOnClickForSingleSelect();
     abortOptionsShownUfoExperience: () => void;
     startOptionsShownUfoExperience: () => void;
     private executeLoadOptions;
@@ -64,11 +66,12 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private handleClickDraggableParentComponent;
     render(): JSX.Element;
 }
-export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "openMenuOnClick" | "textFieldBackgroundColor" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
     isMulti: boolean;
     subtle: boolean;
     noBorder: boolean;
     textFieldBackgroundColor: boolean;
     isClearable: boolean;
     loadOptionsErrorMessage: () => JSX.Element;
+    openMenuOnClick: boolean;
 }, never>> & React.RefAttributes<any>>;

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>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;

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

@@ -4,6 +4,7 @@ export type Props = {
     src?: string;
     name?: string;
     presence?: string;
+    type?: 'person' | 'team';
 };
 export declare class SizeableAvatar extends React.PureComponent<Props> {
     render(): JSX.Element;

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>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent"> & 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>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent"> & 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

@@ -101,6 +101,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     defaultValue?: DefaultValue;
     /** Placeholder text to be shown when there is no value in the field. */
     placeholder?: React.ReactNode;
+    /** Placeholder avatar style - defaults to person */
+    placeholderAvatar?: 'person' | 'team';
     /** 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.
@@ -164,6 +166,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
      * Context: https://hello.atlassian.net/wiki/spaces/~989411314/pages/2861097485/Investigation+Notes+for+atlaskit+select+react-beautiful-dnd#Temporary-Solution
      */
     UNSAFE_hasDraggableParentComponent?: boolean;
+    /** Override the internal behaviour of default menu open on focus and applicable for single value select  */
+    openMenuOnClick?: boolean;
 };
 export type PopupUserPickerProps = UserPickerProps & {
     /** Whether to use the popup version of the single picker */

package/dist/types-ts4.5/components/BaseUserPicker.d.ts

@@ -22,6 +22,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
         textFieldBackgroundColor: boolean;
         isClearable: boolean;
         loadOptionsErrorMessage: () => JSX.Element;
+        openMenuOnClick: boolean;
     };
     static getDerivedStateFromProps(nextProps: Partial<UserPickerProps>, prevState: UserPickerState): Partial<UserPickerState>;
     private selectRef;
@@ -41,6 +42,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private addOptions;
     private handleLoadOptionsError;
     private debouncedLoadOptions;
+    private get isMenuOpenOnClickForSingleSelect();
     abortOptionsShownUfoExperience: () => void;
     startOptionsShownUfoExperience: () => void;
     private executeLoadOptions;
@@ -64,11 +66,12 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private handleClickDraggableParentComponent;
     render(): JSX.Element;
 }
-export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "openMenuOnClick" | "textFieldBackgroundColor" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
     isMulti: boolean;
     subtle: boolean;
     noBorder: boolean;
     textFieldBackgroundColor: boolean;
     isClearable: boolean;
     loadOptionsErrorMessage: () => JSX.Element;
+    openMenuOnClick: boolean;
 }, never>> & React.RefAttributes<any>>;

package/dist/types-ts4.5/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>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;

package/dist/types-ts4.5/components/SizeableAvatar.d.ts

@@ -4,6 +4,7 @@ export type Props = {
     src?: string;
     name?: string;
     presence?: string;
+    type?: 'person' | 'team';
 };
 export declare class SizeableAvatar extends React.PureComponent<Props> {
     render(): JSX.Element;

package/dist/types-ts4.5/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>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent"> & 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>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent"> & 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-ts4.5/types.d.ts

@@ -101,6 +101,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     defaultValue?: DefaultValue;
     /** Placeholder text to be shown when there is no value in the field. */
     placeholder?: React.ReactNode;
+    /** Placeholder avatar style - defaults to person */
+    placeholderAvatar?: 'person' | 'team';
     /** 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.
@@ -164,6 +166,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
      * Context: https://hello.atlassian.net/wiki/spaces/~989411314/pages/2861097485/Investigation+Notes+for+atlaskit+select+react-beautiful-dnd#Temporary-Solution
      */
     UNSAFE_hasDraggableParentComponent?: boolean;
+    /** Override the internal behaviour of default menu open on focus and applicable for single value select  */
+    openMenuOnClick?: boolean;
 };
 export 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": "10.18.0",
+  "version": "10.19.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/avatar": "^21.4.0",
+    "@atlaskit/avatar": "^21.5.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/logo": "^13.15.0",
     "@atlaskit/lozenge": "^11.6.0",
@@ -52,8 +52,9 @@
     "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/select": "^17.1.0",
     "@atlaskit/spinner": "^16.0.0",
+    "@atlaskit/teams-avatar": "^1.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.37.0",
+    "@atlaskit/tokens": "^1.38.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",