@atlaskit/user-picker 11.16.1 → 11.18.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/user-picker
 
+## 11.18.0
+
+### Minor Changes
+
+- [`85eaa7aa9817e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/85eaa7aa9817e) -
+  [ux] support for using icons as avatar
+
+## 11.17.0
+
+### Minor Changes
+
+- [`bef521afc400f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bef521afc400f) -
+  Adds prop to set user picker & smart user picker as open/closed
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.16.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -5,7 +5,8 @@
 		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__user-picker",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/afm-jira/tsconfig.json

@@ -5,7 +5,8 @@
 		"target": "es5",
 		"outDir": "../../../../../jira/tsDist/@atlaskit__user-picker/app",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/afm-products/tsconfig.json

@@ -5,7 +5,8 @@
 		"target": "es5",
 		"outDir": "../../../../../tsDist/@atlaskit__user-picker/app",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "0.0.0-development";
+var packageVersion = "11.17.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/AvatarOrIcon.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarOrIcon = void 0;
+var _SizeableAvatar = require("./SizeableAvatar");
+var _utils = require("./utils");
+var _react = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var iconStyle = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0
+});
+var iconSizes = {
+  xsmall: (0, _react.css)({
+    width: '20px',
+    height: '20px'
+  }),
+  small: (0, _react.css)({
+    width: '28px',
+    height: '28px'
+  }),
+  medium: (0, _react.css)({
+    width: '36px',
+    height: '36px'
+  })
+};
+var AvatarOrIcon = exports.AvatarOrIcon = function AvatarOrIcon(_ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'big' : _ref$appearance,
+    avatarAppearanceShape = _ref.avatarAppearanceShape,
+    icon = _ref.icon,
+    iconColor = _ref.iconColor,
+    presence = _ref.presence,
+    src = _ref.src,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'person' : _ref$type;
+  // If icon is provided, render it instead of avatar
+  if (icon) {
+    var avatarSize = (0, _utils.getAvatarSize)(appearance);
+    return (0, _react.jsx)("div", {
+      css: [iconStyle, iconSizes[avatarSize]],
+      style: {
+        color: iconColor
+      }
+    }, icon);
+  }
+
+  // Otherwise, render the avatar as before
+  return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
+    appearance: appearance,
+    src: src,
+    presence: presence,
+    type: type,
+    avatarAppearanceShape: avatarAppearanceShape
+  });
+};

package/dist/cjs/components/BaseUserPicker.js

@@ -25,6 +25,7 @@ var _i18n = require("./i18n");
 var _utils = require("./utils");
 var _groupOptionsByType = require("../util/group-options-by-type");
 var _ufoExperiences = require("../util/ufoExperiences");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["aria-labelledby", "aria-describedby"];
 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; }
@@ -245,7 +246,16 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       });
       (0, _utils.callCallback)(_this.props.onInputChange, '', _this.getSessionId());
     });
+    (0, _defineProperty2.default)(_this, "handleOpen", function () {
+      (0, _utils.callCallback)(_this.props.onOpen, _this.getSessionId());
+      _this.setState({
+        menuIsOpen: true
+      });
+    });
     (0, _defineProperty2.default)(_this, "handleBlur", function () {
+      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+        return;
+      }
       (0, _utils.callCallback)(_this.props.onBlur, _this.getSessionId());
       if ((0, _utils.isPopupUserPickerByComponent)(_this.props.SelectComponent)) {
         return;
@@ -258,13 +268,10 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         options: []
       });
     });
-    (0, _defineProperty2.default)(_this, "handleOpen", function () {
-      (0, _utils.callCallback)(_this.props.onOpen, _this.getSessionId());
-      _this.setState({
-        menuIsOpen: true
-      });
-    });
     (0, _defineProperty2.default)(_this, "handleClose", function () {
+      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+        return;
+      }
       _this.resetInputState();
       (0, _utils.callCallback)(_this.props.onClose, _this.getSessionId());
       _this.setState({
@@ -325,6 +332,18 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         }
       }
       _this.props.onKeyDown && _this.props.onKeyDown(event);
+      if (_this.isCreateTeamA11yEnabled) {
+        if (event.key === 'Escape') {
+          _this.setState({
+            menuIsOpen: false,
+            options: []
+          });
+          _this.props.setIsFooterFocused && _this.props.setIsFooterFocused(false);
+        }
+        if (event.key === 'Tab' && _this.props.setIsFooterFocused && _this.props.footer) {
+          _this.props.setIsFooterFocused(true);
+        }
+      }
     });
     (0, _defineProperty2.default)(_this, "handleClearIndicatorHover", function (hoveringClearIndicator) {
       _this.setState({
@@ -381,6 +400,9 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         });
       }
     });
+    (0, _defineProperty2.default)(_this, "shouldKeepMenuOpen", function () {
+      return Boolean(!!_this.props.footer) && Boolean(_this.props.isFooterFocused);
+    });
     _this.state = {
       options: [],
       isDefaultSet: false,
@@ -415,6 +437,11 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
     get: function get() {
       return this.props.openMenuOnClick && !this.props.isMulti;
     }
+  }, {
+    key: "isCreateTeamA11yEnabled",
+    get: function get() {
+      return (0, _platformFeatureFlags.fg)('a11y-create-team-is-not-focusable-and-has-no-btn');
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -431,7 +458,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
+    value: function componentDidUpdate(prevProps, prevState) {
       var _this$state2 = this.state,
         menuIsOpen = _this$state2.menuIsOpen,
         options = _this$state2.options,
@@ -439,6 +466,16 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         count = _this$state2.count,
         inputValue = _this$state2.inputValue;
 
+      // Close menu when isFooterFocused changes from true to false
+      if (this.isCreateTeamA11yEnabled && menuIsOpen && prevProps.isFooterFocused === true && this.props.isFooterFocused === false && !this.shouldKeepMenuOpen()) {
+        this.resetInputState();
+        (0, _utils.callCallback)(this.props.onClose, this.getSessionId());
+        this.setState({
+          menuIsOpen: false,
+          options: []
+        });
+      }
+
       // Create a new session when the menu is opened and there is no session
       if (menuIsOpen && !prevState.menuIsOpen && !this.session) {
         this.startSession();
@@ -460,7 +497,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
           this.session.inputChangeTime = Date.now();
         }
       }
-      if (menuIsOpen && (!_.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [_ufo.UFOExperienceState.STARTED.id, _ufo.UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+      if (menuIsOpen && (!prevProps.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [_ufo.UFOExperienceState.STARTED.id, _ufo.UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
         this.optionsShownUfoExperienceInstance.success();
       }
     }

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

@@ -14,8 +14,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _colors = require("@atlaskit/theme/colors");
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _AvatarItemOption = require("../AvatarItemOption");
 var _HighlightText = require("../HighlightText");
+var _AvatarOrIcon = require("../AvatarOrIcon");
 var _SizeableAvatar = require("../SizeableAvatar");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -58,7 +60,20 @@ var CustomOption = exports.CustomOption = /*#__PURE__*/function (_React$PureComp
       return _this.getBylineComponent(_this.props.isSelected, _this.props.data.byline);
     });
     (0, _defineProperty2.default)(_this, "renderAvatar", function () {
-      var avatarUrl = _this.props.data.avatarUrl;
+      var _this$props$data3 = _this.props.data,
+        avatarUrl = _this$props$data3.avatarUrl,
+        icon = _this$props$data3.icon,
+        iconColor = _this$props$data3.iconColor;
+      // Only use icon if feature gate is enabled
+      if (icon && (0, _platformFeatureFlags.fg)('atlaskit_user_picker_support_icon')) {
+        return (0, _react.jsx)(_AvatarOrIcon.AvatarOrIcon, {
+          appearance: "big",
+          icon: icon,
+          iconColor: iconColor,
+          src: avatarUrl
+        });
+      }
+      // Fallback to original behavior
       return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "big",
         src: avatarUrl

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

@@ -19,6 +19,7 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../../analytics");
 var _AvatarItemOption = require("../AvatarItemOption");
+var _AvatarOrIcon = require("../AvatarOrIcon");
 var _SizeableAvatar = require("../SizeableAvatar");
 var _ExternalUserSourcesContainer = require("../ExternalUserSourcesContainer");
 var _InfoIcon = _interopRequireDefault(require("./InfoIcon"));
@@ -102,7 +103,21 @@ var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
         _this$props$user2 = _this$props.user,
         avatarUrl = _this$props$user2.avatarUrl,
         appType = _this$props$user2.appType,
+        icon = _this$props$user2.icon,
+        iconColor = _this$props$user2.iconColor,
         status = _this$props.status;
+      // Only use icon if feature gate is enabled
+      if (icon && (0, _platformFeatureFlags.fg)('atlaskit_user_picker_support_icon')) {
+        return (0, _react2.jsx)(_AvatarOrIcon.AvatarOrIcon, {
+          appearance: "big",
+          icon: icon,
+          iconColor: iconColor,
+          src: avatarUrl,
+          presence: status,
+          avatarAppearanceShape: (0, _platformFeatureFlags.fg)('jira_ai_agent_avatar_user_picker_user_option') ? (0, _avatar.getAppearanceForAppType)(appType) : undefined
+        });
+      }
+      // Fallback to original behavior
       return (0, _react2.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,

package/dist/cjs/components/MultiValue.js

@@ -18,10 +18,12 @@ var _primitives = require("@atlaskit/primitives");
 var _select = require("@atlaskit/select");
 var _react2 = require("@emotion/react");
 var _AddOptionAvatar = require("./AddOptionAvatar");
+var _AvatarOrIcon = require("./AvatarOrIcon");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
 var _peopleGroupPeople = _interopRequireDefault(require("@atlaskit/icon/core/migration/people-group--people"));
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["children", "innerProps"];
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -75,6 +77,18 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
           LEGACY_size: "small"
         }));
       }
+
+      // Only use icon if feature gate is enabled
+      if (data.icon && (0, _platformFeatureFlags.fg)('atlaskit_user_picker_support_icon')) {
+        return (0, _react2.jsx)(_AvatarOrIcon.AvatarOrIcon, {
+          appearance: "multi",
+          icon: data.icon,
+          iconColor: data.iconColor,
+          src: (0, _utils.getAvatarUrl)(data),
+          type: (0, _utils.isTeam)(data) ? 'team' : 'person'
+        });
+      }
+      // Fallback to original behavior
       return (0, _react2.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "multi",
         src: (0, _utils.getAvatarUrl)(data),
@@ -83,8 +97,10 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)(_this, "getElemAfter", function () {
       var data = _this.props.data.data;
-      if ((0, _utils.isTeam)(data) && data.verified) {
-        return (0, _react2.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, null);
+      if ((0, _utils.isGroup)(data) && data.includeTeamsUpdates || (0, _utils.isTeam)(data) && data.verified) {
+        return (0, _react2.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
+          size: data.includeTeamsUpdates ? 'small' : 'medium'
+        });
       }
       return null;
     });

package/dist/cjs/components/SingleValue.js

@@ -10,6 +10,7 @@ require("./SingleValue.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _select = require("@atlaskit/select");
+var _AvatarOrIcon = require("./AvatarOrIcon");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
 var _avatar = require("@atlaskit/avatar");
@@ -25,9 +26,11 @@ var styles = {
 var ElementAfter = function ElementAfter(props) {
   var data = props.data.data,
     shouldShowVerifiedIcon = props.shouldShowVerifiedIcon;
-  var showIcon = shouldShowVerifiedIcon ? shouldShowVerifiedIcon(data) : (0, _utils.isTeam)(data) && data.verified;
+  var showIcon = shouldShowVerifiedIcon ? shouldShowVerifiedIcon(data) : (0, _utils.isTeam)(data) && data.verified || (0, _utils.isGroup)(data) && data.includeTeamsUpdates;
   if (showIcon) {
-    return /*#__PURE__*/React.createElement(_verifiedTeamIcon.VerifiedTeamIcon, null);
+    return /*#__PURE__*/React.createElement(_verifiedTeamIcon.VerifiedTeamIcon, {
+      size: data.includeTeamsUpdates ? 'small' : 'medium'
+    });
   }
   return null;
 };
@@ -40,7 +43,14 @@ var SingleValue = exports.SingleValue = function SingleValue(props) {
     isFocused = _props$selectProps.isFocused;
   return !isFocused ? /*#__PURE__*/React.createElement(_select.components.SingleValue, props, /*#__PURE__*/React.createElement(_compiled.Flex, {
     xcss: styles.avatarItem
-  }, /*#__PURE__*/React.createElement(_SizeableAvatar.SizeableAvatar, {
+  }, data.icon && (0, _platformFeatureFlags.fg)('atlaskit_user_picker_support_icon') ? /*#__PURE__*/React.createElement(_AvatarOrIcon.AvatarOrIcon, {
+    icon: data.icon,
+    iconColor: data.iconColor,
+    src: (0, _utils.getAvatarUrl)(data),
+    appearance: appearance,
+    type: (0, _utils.isTeam)(data) ? 'team' : 'person',
+    avatarAppearanceShape: (0, _platformFeatureFlags.fg)('jira_ai_agent_avatar_user_picker_user_option') ? (0, _avatar.getAppearanceForAppType)(data.appType) : undefined
+  }) : /*#__PURE__*/React.createElement(_SizeableAvatar.SizeableAvatar, {
     src: (0, _utils.getAvatarUrl)(data),
     appearance: appearance,
     type: (0, _utils.isTeam)(data) ? 'team' : 'person',

package/dist/cjs/components/SingleValueContainer.js

@@ -18,6 +18,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _select = require("@atlaskit/select");
+var _AvatarOrIcon = require("./AvatarOrIcon");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _ValueContainerWrapper = _interopRequireDefault(require("./ValueContainerWrapper"));
 var _avatar = require("@atlaskit/avatar");
@@ -51,11 +52,24 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
         value = _this$props$selectPro.value,
         placeholderAvatar = _this$props$selectPro.placeholderAvatar;
       if (isFocused || !hasValue) {
+        var userData = showUserAvatar(inputValue, value) ? value.data : undefined;
+        // Only use icon if feature gate is enabled
+        if (userData !== null && userData !== void 0 && userData.icon && (0, _platformFeatureFlags.fg)('atlaskit_user_picker_support_icon')) {
+          return /*#__PURE__*/_react.default.createElement(_AvatarOrIcon.AvatarOrIcon, {
+            appearance: appearance,
+            icon: userData.icon,
+            iconColor: userData.iconColor,
+            type: placeholderAvatar,
+            src: userData.avatarUrl,
+            avatarAppearanceShape: userData && (0, _platformFeatureFlags.fg)('jira_ai_agent_avatar_user_picker_user_option') ? (0, _avatar.getAppearanceForAppType)(userData.appType) : undefined
+          });
+        }
+        // Fallback to original behavior
         return /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
           appearance: appearance,
           type: placeholderAvatar,
-          src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined,
-          avatarAppearanceShape: value && value.data && (0, _platformFeatureFlags.fg)('jira_ai_agent_avatar_user_picker_user_option') ? (0, _avatar.getAppearanceForAppType)(value.data.appType) : undefined
+          src: userData === null || userData === void 0 ? void 0 : userData.avatarUrl,
+          avatarAppearanceShape: userData && (0, _platformFeatureFlags.fg)('jira_ai_agent_avatar_user_picker_user_option') ? (0, _avatar.getAppearanceForAppType)(userData.appType) : undefined
         });
       }
       return null;

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

@@ -18,9 +18,11 @@ var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _AvatarItemOption = require("../AvatarItemOption");
 var _HighlightText = require("../HighlightText");
 var _i18n = require("../i18n");
+var _AvatarOrIcon = require("../AvatarOrIcon");
 var _SizeableAvatar = require("../SizeableAvatar");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -116,7 +118,21 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
       }, message);
     });
     (0, _defineProperty2.default)(_this, "renderAvatar", function () {
-      var avatarUrl = _this.props.team.avatarUrl;
+      var _this$props$team2 = _this.props.team,
+        avatarUrl = _this$props$team2.avatarUrl,
+        icon = _this$props$team2.icon,
+        iconColor = _this$props$team2.iconColor;
+      // Only use icon if feature gate is enabled
+      if (icon && (0, _platformFeatureFlags.fg)('atlaskit_user_picker_support_icon')) {
+        return (0, _react.jsx)(_AvatarOrIcon.AvatarOrIcon, {
+          appearance: "big",
+          icon: icon,
+          iconColor: iconColor,
+          src: avatarUrl,
+          type: "team"
+        });
+      }
+      // Fallback to original behavior
       return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
@@ -139,8 +155,8 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
       } : _this.props.team.lozenge;
     });
     (0, _defineProperty2.default)(_this, "renderCustomByLine", function () {
-      var _this$props$team2;
-      if (!((_this$props$team2 = _this.props.team) !== null && _this$props$team2 !== void 0 && _this$props$team2.byline)) {
+      var _this$props$team3;
+      if (!((_this$props$team3 = _this.props.team) !== null && _this$props$team3 !== void 0 && _this$props$team3.byline)) {
         return undefined;
       }
       return (0, _react.jsx)("span", {

package/dist/cjs/components/UserOption.js

@@ -17,6 +17,7 @@ var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _AvatarItemOption = require("./AvatarItemOption");
 var _HighlightText = require("./HighlightText");
+var _AvatarOrIcon = require("./AvatarOrIcon");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -81,9 +82,24 @@ var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponen
         _this$props$user2 = _this$props.user,
         avatarUrl = _this$props$user2.avatarUrl,
         appType = _this$props$user2.appType,
+        icon = _this$props$user2.icon,
+        iconColor = _this$props$user2.iconColor,
         status = _this$props.status;
+      var appearance = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? 'medium' : 'big';
+      // Only use icon if feature gate is enabled
+      if (icon && (0, _platformFeatureFlags.fg)('atlaskit_user_picker_support_icon')) {
+        return (0, _react.jsx)(_AvatarOrIcon.AvatarOrIcon, {
+          appearance: appearance,
+          icon: icon,
+          iconColor: iconColor,
+          src: avatarUrl,
+          presence: status,
+          avatarAppearanceShape: (0, _platformFeatureFlags.fg)('jira_ai_agent_avatar_user_picker_user_option') ? (0, _avatar.getAppearanceForAppType)(appType) : undefined
+        });
+      }
+      // Fallback to original behavior
       return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
-        appearance: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? 'medium' : 'big',
+        appearance: appearance,
         src: avatarUrl,
         presence: status,
         avatarAppearanceShape: (0, _platformFeatureFlags.fg)('jira_ai_agent_avatar_user_picker_user_option') ? (0, _avatar.getAppearanceForAppType)(appType) : undefined

package/dist/cjs/components/UserPicker.js

@@ -75,6 +75,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         captureMenuScroll = _this$props.captureMenuScroll,
         closeMenuOnScroll = _this$props.closeMenuOnScroll,
         loadUserSource = _this$props.loadUserSource,
+        menuIsOpen = _this$props.menuIsOpen,
         _this$props$required = _this$props.required,
         required = _this$props$required === void 0 ? false : _this$props$required,
         _this$props$showClear = _this$props.showClearIndicator,
@@ -91,7 +92,8 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         menuShouldBlockScroll: menuShouldBlockScroll,
         captureMenuScroll: captureMenuScroll,
         required: required,
-        includeTeamsUpdates: includeTeamsUpdates
+        includeTeamsUpdates: includeTeamsUpdates,
+        menuIsOpen: menuIsOpen
       };
       var pickerProps = allowEmail ? _objectSpread(_objectSpread(_objectSpread({}, defaultPickerProps), creatableProps), {}, {
         emailLabel: emailLabel

package/dist/cjs/i18n/cs.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _cs = _interopRequireDefault(require("@atlaskit/afm-i18n-platform-elements-user-picker/i18n/cs"));
 /* prettier-ignore */
 /**
  * NOTE:
@@ -13,4 +11,47 @@ var _cs = _interopRequireDefault(require("@atlaskit/afm-i18n-platform-elements-u
  * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-var _default = exports.default = _cs.default;
+//Czech
+var _default = exports.default = {
+  'fabric.elements.user-picker.custom.type.label': 'Vlastní',
+  'fabric.elements.user-picker.email.add': 'Přidat uživatele',
+  'fabric.elements.user-picker.email.add.potential': 'Zadejte e-mailovou adresu.',
+  'fabric.elements.user-picker.email.select.to.add': 'Vyberte e-mailovou adresu.',
+  'fabric.elements.user-picker.email.type.label': 'E-maily',
+  'fabric.elements.user-picker.error.message': 'Něco se pokazilo',
+  'fabric.elements.user-picker.external.sourced.error': 'Momentálně vás nejde připojit.',
+  'fabric.elements.user-picker.external.sourced.from': 'Nalezen v:',
+  'fabric.elements.user-picker.external.user.type.label': 'Externí uživatelé',
+  'fabric.elements.user-picker.github.provider': 'GitHub',
+  'fabric.elements.user-picker.google.provider': 'Google',
+  'fabric.elements.user-picker.group.byline': 'Skupina spravovaná administrátorem',
+  'fabric.elements.user-picker.group.byline.admin-managed': 'Skupina správců {verifiedIcon}',
+  'fabric.elements.user-picker.group.type.label': 'Skupiny',
+  'fabric.elements.user-picker.guest.lozenge.text': 'HOST',
+  'fabric.elements.user-picker.guest.lozenge.tooltip.group': 'Skupiny hostů mají přístup pouze k určitým prostorům a mají omezený přístup k uživatelským údajům.',
+  'fabric.elements.user-picker.guest.lozenge.tooltip.user': 'Hosté mají přístup pouze k určitým prostorům a mají omezený přístup k uživatelským údajům.',
+  'fabric.elements.user-picker.member.lozenge.text': 'ČLEN',
+  'fabric.elements.user-picker.microsoft.provider': 'Microsoft',
+  'fabric.elements.user-picker.multi.remove-item': 'Odstranit',
+  'fabric.elements.user-picker.other.type.label': 'Ostatní',
+  'fabric.elements.user-picker.placeholder': 'Zadejte osoby nebo týmy...',
+  'fabric.elements.user-picker.placeholder.add-more': 'přidat více lidí...',
+  'fabric.elements.user-picker.single.clear': 'Vymazat',
+  'fabric.elements.user-picker.slack.provider': 'Slack',
+  'fabric.elements.user-picker.source.confluence': 'Confluence',
+  'fabric.elements.user-picker.source.jira': 'Jira',
+  'fabric.elements.user-picker.source.other-atlassian': 'Ostatní produkty Atlassian',
+  'fabric.elements.user-picker.source.other-atlassian-appify': 'Ostatní aplikace Atlassian',
+  'fabric.elements.user-picker.team.byline': 'Tým',
+  'fabric.elements.user-picker.team.byline.official': 'Oficiální tým {verifiedIcon}',
+  'fabric.elements.user-picker.team.member.50plus': 'Tým • 50 a více členů',
+  'fabric.elements.user-picker.team.member.50plus.including.you': 'Tým • 50 a více členů včetně vás',
+  'fabric.elements.user-picker.team.member.50plus.official': 'Oficiální tým {verifiedIcon} • 50+ členů',
+  'fabric.elements.user-picker.team.member.50plus.official.including.you': 'Oficiální tým {verifiedIcon} • 50+ členů, včetně vás',
+  'fabric.elements.user-picker.team.member.count': '{count, plural, one {Tým • {count} člen} few {Tým • {count} členové} many {Tým • {count} člena} other {Tým • {count} členů}}',
+  'fabric.elements.user-picker.team.member.count.including.you': '{count, plural, one {Tým • {count} člen včetně vás} few {Tým • {count} členové včetně vás} many {Tým • {count} člena včetně vás} other {Tým • {count} členů včetně vás}}',
+  'fabric.elements.user-picker.team.member.count.official': '{count, plural, one {Oficiální tým {verifiedIcon} • {count} člen} few {Oficiální tým {verifiedIcon} • {count} členové} many {Oficiální tým {verifiedIcon} • {count} člena} other {Oficiální tým {verifiedIcon} • {count} členů}}',
+  'fabric.elements.user-picker.team.member.count.official.including.you': '{count, plural, one {Oficiální tým {verifiedIcon} • {count} člen, včetně vás} few {Oficiální tým {verifiedIcon} • {count} členové, včetně vás} many {Oficiální tým {verifiedIcon} • {count} člena, včetně vás} other {Oficiální tým {verifiedIcon} • {count} členů, včetně vás}}',
+  'fabric.elements.user-picker.team.type.label': 'Týmy',
+  'fabric.elements.user-picker.user.type.label': 'Lidé'
+};