@atlaskit/smart-user-picker 6.6.0 → 6.8.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlassian/smart-user-picker
 
+## 6.8.0
+
+### Minor Changes
+
+- [#73914](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73914) [`7acf8bb50dea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7acf8bb50dea) - Added support for external users being returned by the user-recommendations service. Non-licensed users will have a `type` of `external_user` and have `isExternal` set to `true`. A new prop `overrideByline` was also added to allow for the byline to be customised as SmartUserPicker does not currently set any bylines on options.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.7.0
+
+### Minor Changes
+
+- [#70375](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70375) [`14ab45c8b78b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/14ab45c8b78b) - Adding tooltip to option shown on hover
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.6.0
 
 ### Minor Changes

package/dist/cjs/analytics.js

@@ -11,7 +11,7 @@ var _uuid = require("uuid");
 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/smart-user-picker";
-var packageVersion = "6.6.0";
+var packageVersion = "6.8.0";
 var startSession = exports.startSession = function startSession() {
   return {
     id: (0, _uuid.v4)(),

package/dist/cjs/components/SmartUserPicker.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -22,13 +23,18 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _reactIntlNext = require("react-intl-next");
 var _ufo = require("@atlaskit/ufo");
-var _userPicker = _interopRequireDefault(require("@atlaskit/user-picker"));
+var _userPicker = _interopRequireWildcard(require("@atlaskit/user-picker"));
 var _analytics = require("../analytics");
 var _MessagesIntlProvider = _interopRequireDefault(require("./MessagesIntlProvider"));
 var _service = require("../service");
 var _ufoExperiences = require("../ufoExperiences");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 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); }; }
 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; } }
 var DEFAULT_DEBOUNCE_TIME_MS = 150;
@@ -105,12 +111,12 @@ var SmartUserPickerWithoutAnalytics = exports.SmartUserPickerWithoutAnalytics =
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "memoizedFilterOptions", (0, _memoizeOne.default)(_this.filterOptions));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getUsers", (0, _debounce.default)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var _this$state, query, sessionId, closed, _this$props, baseUrl, childObjectId, containerId, fieldId, includeGroups, includeTeams, includeUsers, includeNonLicensedUsers, intl, maxOptions, objectId, onEmpty, onError, orgId, principalId, productAttributes, productKey, searchQueryFilter, siteId, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, elapsedTimeMilli, displayedUsers, is5xxEvent, onErrorProducedError, defaultUsers, _elapsedTimeMilli;
+      var _this$state, query, sessionId, closed, _this$props, baseUrl, childObjectId, containerId, fieldId, includeGroups, includeTeams, includeUsers, includeNonLicensedUsers, intl, maxOptions, objectId, onEmpty, onError, overrideByline, orgId, principalId, productAttributes, productKey, searchQueryFilter, siteId, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, _iterator, _step, option, elapsedTimeMilli, displayedUsers, is5xxEvent, onErrorProducedError, defaultUsers, _elapsedTimeMilli;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _this$state = _this.state, query = _this$state.query, sessionId = _this$state.sessionId, closed = _this$state.closed;
-            _this$props = _this.props, baseUrl = _this$props.baseUrl, childObjectId = _this$props.childObjectId, containerId = _this$props.containerId, fieldId = _this$props.fieldId, includeGroups = _this$props.includeGroups, includeTeams = _this$props.includeTeams, includeUsers = _this$props.includeUsers, includeNonLicensedUsers = _this$props.includeNonLicensedUsers, intl = _this$props.intl, maxOptions = _this$props.maxOptions, objectId = _this$props.objectId, onEmpty = _this$props.onEmpty, onError = _this$props.onError, orgId = _this$props.orgId, principalId = _this$props.principalId, productAttributes = _this$props.productAttributes, productKey = _this$props.productKey, searchQueryFilter = _this$props.searchQueryFilter, siteId = _this$props.siteId;
+            _this$props = _this.props, baseUrl = _this$props.baseUrl, childObjectId = _this$props.childObjectId, containerId = _this$props.containerId, fieldId = _this$props.fieldId, includeGroups = _this$props.includeGroups, includeTeams = _this$props.includeTeams, includeUsers = _this$props.includeUsers, includeNonLicensedUsers = _this$props.includeNonLicensedUsers, intl = _this$props.intl, maxOptions = _this$props.maxOptions, objectId = _this$props.objectId, onEmpty = _this$props.onEmpty, onError = _this$props.onError, overrideByline = _this$props.overrideByline, orgId = _this$props.orgId, principalId = _this$props.principalId, productAttributes = _this$props.productAttributes, productKey = _this$props.productKey, searchQueryFilter = _this$props.searchQueryFilter, siteId = _this$props.siteId;
             maxNumberOfResults = maxOptions || 100;
             startTime = window.performance.now();
             recommendationsRequest = {
@@ -141,38 +147,53 @@ var SmartUserPickerWithoutAnalytics = exports.SmartUserPickerWithoutAnalytics =
             return (0, _service.getUserRecommendations)(recommendationsRequest, intl);
           case 9:
             recommendedUsers = _context.sent;
+            if (overrideByline) {
+              _iterator = _createForOfIteratorHelper(recommendedUsers);
+              try {
+                for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                  option = _step.value;
+                  if ((0, _userPicker.isUser)(option) || (0, _userPicker.isExternalUser)(option) || (0, _userPicker.isTeam)(option)) {
+                    option.byline = overrideByline(option);
+                  }
+                }
+              } catch (err) {
+                _iterator.e(err);
+              } finally {
+                _iterator.f();
+              }
+            }
             elapsedTimeMilli = window.performance.now() - startTime;
             if (!(recommendedUsers.length === 0 && onEmpty)) {
-              _context.next = 26;
+              _context.next = 27;
               break;
             }
-            _context.next = 14;
+            _context.next = 15;
             return onEmpty(query);
-          case 14:
+          case 15:
             _context.t2 = _yield$onEmpty = _context.sent;
             _context.t1 = _context.t2 !== null;
             if (!_context.t1) {
-              _context.next = 18;
+              _context.next = 19;
               break;
             }
             _context.t1 = _yield$onEmpty !== void 0;
-          case 18:
+          case 19:
             if (!_context.t1) {
-              _context.next = 22;
+              _context.next = 23;
               break;
             }
             _context.t3 = _yield$onEmpty;
-            _context.next = 23;
+            _context.next = 24;
             break;
-          case 22:
-            _context.t3 = [];
           case 23:
+            _context.t3 = [];
+          case 24:
             _context.t0 = _context.t3;
-            _context.next = 27;
+            _context.next = 28;
             break;
-          case 26:
-            _context.t0 = recommendedUsers;
           case 27:
+            _context.t0 = recommendedUsers;
+          case 28:
             displayedUsers = _context.t0;
             _this.setState(function (state) {
               var applicable = state.query === query;
@@ -190,10 +211,10 @@ var SmartUserPickerWithoutAnalytics = exports.SmartUserPickerWithoutAnalytics =
                 loading: loading
               };
             });
-            _context.next = 60;
+            _context.next = 61;
             break;
-          case 31:
-            _context.prev = 31;
+          case 32:
+            _context.prev = 32;
             _context.t4 = _context["catch"](5);
             is5xxEvent = checkIf500Event(_context.t4.statusCode);
             if (!closed && !onError && is5xxEvent) {
@@ -206,35 +227,35 @@ var SmartUserPickerWithoutAnalytics = exports.SmartUserPickerWithoutAnalytics =
             });
             onErrorProducedError = false;
             defaultUsers = [];
-            _context.prev = 38;
+            _context.prev = 39;
             if (!onError) {
-              _context.next = 48;
+              _context.next = 49;
               break;
             }
-            _context.next = 42;
+            _context.next = 43;
             return onError(_context.t4, recommendationsRequest);
-          case 42:
+          case 43:
             _context.t6 = _context.sent;
             if (_context.t6) {
-              _context.next = 45;
+              _context.next = 46;
               break;
             }
             _context.t6 = [];
-          case 45:
+          case 46:
             _context.t5 = _context.t6;
-            _context.next = 49;
+            _context.next = 50;
             break;
-          case 48:
-            _context.t5 = [];
           case 49:
+            _context.t5 = [];
+          case 50:
             defaultUsers = _context.t5;
-            _context.next = 55;
+            _context.next = 56;
             break;
-          case 52:
-            _context.prev = 52;
-            _context.t7 = _context["catch"](38);
+          case 53:
+            _context.prev = 53;
+            _context.t7 = _context["catch"](39);
             onErrorProducedError = true;
-          case 55:
+          case 56:
             if (onErrorProducedError && is5xxEvent) {
               // Log error from fallback data source `onError` to UFO
               _this.optionsShownUfoExperienceInstance.failure(ufoEndStateConfig(_this.props.fieldId));
@@ -251,11 +272,11 @@ var SmartUserPickerWithoutAnalytics = exports.SmartUserPickerWithoutAnalytics =
               elapsedTimeMilli: _elapsedTimeMilli,
               productAttributes: productAttributes
             });
-          case 60:
+          case 61:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[5, 31], [38, 52]]);
+      }, _callee, null, [[5, 32], [39, 53]]);
     })), (_this$props$debounceT = _this.props.debounceTime) !== null && _this$props$debounceT !== void 0 ? _this$props$debounceT : 0));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputChange", function (newQuery, sessionId) {
       var query = newQuery || '';

package/dist/cjs/service/users-transformer.js

@@ -6,19 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.transformUsers = void 0;
 var _userPicker = require("@atlaskit/user-picker");
 var _i18n = require("../i18n");
-var EntityType = /*#__PURE__*/function (EntityType) {
-  EntityType["USER"] = "USER";
-  EntityType["TEAM"] = "TEAM";
-  EntityType["GROUP"] = "GROUP";
-  return EntityType;
-}(EntityType || {});
+var _types = require("../types");
 var getLozenzeProperties = function getLozenzeProperties(entity, intl) {
   var _entity$attributes, _entity$attributes2;
   if ((_entity$attributes = entity.attributes) !== null && _entity$attributes !== void 0 && _entity$attributes.workspaceMember) {
     return intl.formatMessage(_i18n.messages.memberLozengeText);
   }
   if ((_entity$attributes2 = entity.attributes) !== null && _entity$attributes2 !== void 0 && _entity$attributes2.isConfluenceExternalCollaborator) {
-    var lozengeTooltipMessage = entity.entityType === EntityType.GROUP ? _i18n.messages.guestGroupLozengeTooltip : _i18n.messages.guestUserLozengeTooltip;
+    var lozengeTooltipMessage = entity.entityType === _types.EntityType.GROUP ? _i18n.messages.guestGroupLozengeTooltip : _i18n.messages.guestUserLozengeTooltip;
     return {
       text: intl.formatMessage(_i18n.messages.guestLozengeText),
       tooltip: intl.formatMessage(lozengeTooltipMessage),
@@ -29,20 +24,23 @@ var getLozenzeProperties = function getLozenzeProperties(entity, intl) {
 };
 var transformUser = function transformUser(item, intl) {
   var type = item.entityType;
-  if (type === EntityType.USER) {
+  if (type === _types.EntityType.USER) {
     var user = item;
     var lozenge = getLozenzeProperties(user, intl);
     return {
       id: user.id,
-      type: _userPicker.UserType,
+      type: user.nonLicensedUser ? _userPicker.ExternalUserType : _userPicker.UserType,
       avatarUrl: user.avatarUrl,
       name: user.name,
       email: user.email,
       title: user.title,
-      lozenge: lozenge
+      lozenge: lozenge,
+      tooltip: user.name,
+      isExternal: Boolean(user.nonLicensedUser),
+      sources: user.nonLicensedUser ? ['other-atlassian'] : undefined
     };
   }
-  if (type === EntityType.TEAM) {
+  if (type === _types.EntityType.TEAM) {
     var team = item;
     return {
       id: team.id,
@@ -52,10 +50,11 @@ var transformUser = function transformUser(item, intl) {
       memberCount: team.memberCount,
       members: team.members,
       includesYou: team.includesYou,
-      avatarUrl: team.largeAvatarImageUrl || team.smallAvatarImageUrl
+      avatarUrl: team.largeAvatarImageUrl || team.smallAvatarImageUrl,
+      tooltip: team.displayName
     };
   }
-  if (type === EntityType.GROUP) {
+  if (type === _types.EntityType.GROUP) {
     var group = item;
     var _lozenge = getLozenzeProperties(group, intl);
     return {

package/dist/es2019/analytics.js

@@ -1,7 +1,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuid } from 'uuid';
 const packageName = "@atlaskit/smart-user-picker";
-const packageVersion = "6.6.0";
+const packageVersion = "6.8.0";
 export const startSession = () => ({
   id: uuid(),
   start: Date.now(),

package/dist/es2019/components/SmartUserPicker.js

@@ -7,7 +7,7 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import memoizeOne from 'memoize-one';
 import { injectIntl } from 'react-intl-next';
 import { UFOExperienceState } from '@atlaskit/ufo';
-import UserPicker from '@atlaskit/user-picker';
+import UserPicker, { isExternalUser, isTeam, isUser } from '@atlaskit/user-picker';
 import { requestUsersEvent, filterUsersEvent, preparedUsersLoadedEvent, successfulRequestUsersEvent, failedRequestUsersEvent, mountedWithPrefetchEvent, createAndFireEventInElementsChannel } from '../analytics';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { getUserRecommendations, hydrateDefaultValues } from '../service';
@@ -91,6 +91,7 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
         objectId,
         onEmpty,
         onError,
+        overrideByline,
         orgId,
         principalId,
         productAttributes,
@@ -126,6 +127,13 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
         var _await$onEmpty;
         this.fireEvent(requestUsersEvent);
         const recommendedUsers = await getUserRecommendations(recommendationsRequest, intl);
+        if (overrideByline) {
+          for (let option of recommendedUsers) {
+            if (isUser(option) || isExternalUser(option) || isTeam(option)) {
+              option.byline = overrideByline(option);
+            }
+          }
+        }
         const elapsedTimeMilli = window.performance.now() - startTime;
         const displayedUsers = recommendedUsers.length === 0 && onEmpty ? (_await$onEmpty = await onEmpty(query)) !== null && _await$onEmpty !== void 0 ? _await$onEmpty : [] : recommendedUsers;
         this.setState(state => {

package/dist/es2019/service/users-transformer.js

@@ -1,11 +1,6 @@
-import { TeamType, UserType, GroupType } from '@atlaskit/user-picker';
+import { ExternalUserType, GroupType, TeamType, UserType } from '@atlaskit/user-picker';
 import { messages } from '../i18n';
-var EntityType = /*#__PURE__*/function (EntityType) {
-  EntityType["USER"] = "USER";
-  EntityType["TEAM"] = "TEAM";
-  EntityType["GROUP"] = "GROUP";
-  return EntityType;
-}(EntityType || {});
+import { EntityType } from '../types';
 const getLozenzeProperties = (entity, intl) => {
   var _entity$attributes, _entity$attributes2;
   if ((_entity$attributes = entity.attributes) !== null && _entity$attributes !== void 0 && _entity$attributes.workspaceMember) {
@@ -28,12 +23,15 @@ const transformUser = (item, intl) => {
     const lozenge = getLozenzeProperties(user, intl);
     return {
       id: user.id,
-      type: UserType,
+      type: user.nonLicensedUser ? ExternalUserType : UserType,
       avatarUrl: user.avatarUrl,
       name: user.name,
       email: user.email,
       title: user.title,
-      lozenge: lozenge
+      lozenge: lozenge,
+      tooltip: user.name,
+      isExternal: Boolean(user.nonLicensedUser),
+      sources: user.nonLicensedUser ? ['other-atlassian'] : undefined
     };
   }
   if (type === EntityType.TEAM) {
@@ -46,7 +44,8 @@ const transformUser = (item, intl) => {
       memberCount: team.memberCount,
       members: team.members,
       includesYou: team.includesYou,
-      avatarUrl: team.largeAvatarImageUrl || team.smallAvatarImageUrl
+      avatarUrl: team.largeAvatarImageUrl || team.smallAvatarImageUrl,
+      tooltip: team.displayName
     };
   }
   if (type === EntityType.GROUP) {

package/dist/esm/analytics.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuid } from 'uuid';
 var packageName = "@atlaskit/smart-user-picker";
-var packageVersion = "6.6.0";
+var packageVersion = "6.8.0";
 export var startSession = function startSession() {
   return {
     id: uuid(),

package/dist/esm/components/SmartUserPicker.js

@@ -10,6 +10,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 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 React from 'react';
@@ -19,7 +22,7 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import memoizeOne from 'memoize-one';
 import { injectIntl } from 'react-intl-next';
 import { UFOExperienceState } from '@atlaskit/ufo';
-import UserPicker from '@atlaskit/user-picker';
+import UserPicker, { isExternalUser, isTeam, isUser } from '@atlaskit/user-picker';
 import { requestUsersEvent, filterUsersEvent, preparedUsersLoadedEvent, successfulRequestUsersEvent, failedRequestUsersEvent, mountedWithPrefetchEvent, createAndFireEventInElementsChannel } from '../analytics';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { getUserRecommendations, hydrateDefaultValues } from '../service';
@@ -98,12 +101,12 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
     });
     _defineProperty(_assertThisInitialized(_this), "memoizedFilterOptions", memoizeOne(_this.filterOptions));
     _defineProperty(_assertThisInitialized(_this), "getUsers", debounce( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _this$state, query, sessionId, closed, _this$props, baseUrl, childObjectId, containerId, fieldId, includeGroups, includeTeams, includeUsers, includeNonLicensedUsers, intl, maxOptions, objectId, onEmpty, onError, orgId, principalId, productAttributes, productKey, searchQueryFilter, siteId, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, elapsedTimeMilli, displayedUsers, is5xxEvent, onErrorProducedError, defaultUsers, _elapsedTimeMilli;
+      var _this$state, query, sessionId, closed, _this$props, baseUrl, childObjectId, containerId, fieldId, includeGroups, includeTeams, includeUsers, includeNonLicensedUsers, intl, maxOptions, objectId, onEmpty, onError, overrideByline, orgId, principalId, productAttributes, productKey, searchQueryFilter, siteId, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, _iterator, _step, option, elapsedTimeMilli, displayedUsers, is5xxEvent, onErrorProducedError, defaultUsers, _elapsedTimeMilli;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _this$state = _this.state, query = _this$state.query, sessionId = _this$state.sessionId, closed = _this$state.closed;
-            _this$props = _this.props, baseUrl = _this$props.baseUrl, childObjectId = _this$props.childObjectId, containerId = _this$props.containerId, fieldId = _this$props.fieldId, includeGroups = _this$props.includeGroups, includeTeams = _this$props.includeTeams, includeUsers = _this$props.includeUsers, includeNonLicensedUsers = _this$props.includeNonLicensedUsers, intl = _this$props.intl, maxOptions = _this$props.maxOptions, objectId = _this$props.objectId, onEmpty = _this$props.onEmpty, onError = _this$props.onError, orgId = _this$props.orgId, principalId = _this$props.principalId, productAttributes = _this$props.productAttributes, productKey = _this$props.productKey, searchQueryFilter = _this$props.searchQueryFilter, siteId = _this$props.siteId;
+            _this$props = _this.props, baseUrl = _this$props.baseUrl, childObjectId = _this$props.childObjectId, containerId = _this$props.containerId, fieldId = _this$props.fieldId, includeGroups = _this$props.includeGroups, includeTeams = _this$props.includeTeams, includeUsers = _this$props.includeUsers, includeNonLicensedUsers = _this$props.includeNonLicensedUsers, intl = _this$props.intl, maxOptions = _this$props.maxOptions, objectId = _this$props.objectId, onEmpty = _this$props.onEmpty, onError = _this$props.onError, overrideByline = _this$props.overrideByline, orgId = _this$props.orgId, principalId = _this$props.principalId, productAttributes = _this$props.productAttributes, productKey = _this$props.productKey, searchQueryFilter = _this$props.searchQueryFilter, siteId = _this$props.siteId;
             maxNumberOfResults = maxOptions || 100;
             startTime = window.performance.now();
             recommendationsRequest = {
@@ -134,38 +137,53 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
             return getUserRecommendations(recommendationsRequest, intl);
           case 9:
             recommendedUsers = _context.sent;
+            if (overrideByline) {
+              _iterator = _createForOfIteratorHelper(recommendedUsers);
+              try {
+                for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                  option = _step.value;
+                  if (isUser(option) || isExternalUser(option) || isTeam(option)) {
+                    option.byline = overrideByline(option);
+                  }
+                }
+              } catch (err) {
+                _iterator.e(err);
+              } finally {
+                _iterator.f();
+              }
+            }
             elapsedTimeMilli = window.performance.now() - startTime;
             if (!(recommendedUsers.length === 0 && onEmpty)) {
-              _context.next = 26;
+              _context.next = 27;
               break;
             }
-            _context.next = 14;
+            _context.next = 15;
             return onEmpty(query);
-          case 14:
+          case 15:
             _context.t2 = _yield$onEmpty = _context.sent;
             _context.t1 = _context.t2 !== null;
             if (!_context.t1) {
-              _context.next = 18;
+              _context.next = 19;
               break;
             }
             _context.t1 = _yield$onEmpty !== void 0;
-          case 18:
+          case 19:
             if (!_context.t1) {
-              _context.next = 22;
+              _context.next = 23;
               break;
             }
             _context.t3 = _yield$onEmpty;
-            _context.next = 23;
+            _context.next = 24;
             break;
-          case 22:
-            _context.t3 = [];
           case 23:
+            _context.t3 = [];
+          case 24:
             _context.t0 = _context.t3;
-            _context.next = 27;
+            _context.next = 28;
             break;
-          case 26:
-            _context.t0 = recommendedUsers;
           case 27:
+            _context.t0 = recommendedUsers;
+          case 28:
             displayedUsers = _context.t0;
             _this.setState(function (state) {
               var applicable = state.query === query;
@@ -183,10 +201,10 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
                 loading: loading
               };
             });
-            _context.next = 60;
+            _context.next = 61;
             break;
-          case 31:
-            _context.prev = 31;
+          case 32:
+            _context.prev = 32;
             _context.t4 = _context["catch"](5);
             is5xxEvent = checkIf500Event(_context.t4.statusCode);
             if (!closed && !onError && is5xxEvent) {
@@ -199,35 +217,35 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
             });
             onErrorProducedError = false;
             defaultUsers = [];
-            _context.prev = 38;
+            _context.prev = 39;
             if (!onError) {
-              _context.next = 48;
+              _context.next = 49;
               break;
             }
-            _context.next = 42;
+            _context.next = 43;
             return onError(_context.t4, recommendationsRequest);
-          case 42:
+          case 43:
             _context.t6 = _context.sent;
             if (_context.t6) {
-              _context.next = 45;
+              _context.next = 46;
               break;
             }
             _context.t6 = [];
-          case 45:
+          case 46:
             _context.t5 = _context.t6;
-            _context.next = 49;
+            _context.next = 50;
             break;
-          case 48:
-            _context.t5 = [];
           case 49:
+            _context.t5 = [];
+          case 50:
             defaultUsers = _context.t5;
-            _context.next = 55;
+            _context.next = 56;
             break;
-          case 52:
-            _context.prev = 52;
-            _context.t7 = _context["catch"](38);
+          case 53:
+            _context.prev = 53;
+            _context.t7 = _context["catch"](39);
             onErrorProducedError = true;
-          case 55:
+          case 56:
             if (onErrorProducedError && is5xxEvent) {
               // Log error from fallback data source `onError` to UFO
               _this.optionsShownUfoExperienceInstance.failure(ufoEndStateConfig(_this.props.fieldId));
@@ -244,11 +262,11 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
               elapsedTimeMilli: _elapsedTimeMilli,
               productAttributes: productAttributes
             });
-          case 60:
+          case 61:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[5, 31], [38, 52]]);
+      }, _callee, null, [[5, 32], [39, 53]]);
     })), (_this$props$debounceT = _this.props.debounceTime) !== null && _this$props$debounceT !== void 0 ? _this$props$debounceT : 0));
     _defineProperty(_assertThisInitialized(_this), "onInputChange", function (newQuery, sessionId) {
       var query = newQuery || '';

package/dist/esm/service/users-transformer.js

@@ -1,11 +1,6 @@
-import { TeamType, UserType, GroupType } from '@atlaskit/user-picker';
+import { ExternalUserType, GroupType, TeamType, UserType } from '@atlaskit/user-picker';
 import { messages } from '../i18n';
-var EntityType = /*#__PURE__*/function (EntityType) {
-  EntityType["USER"] = "USER";
-  EntityType["TEAM"] = "TEAM";
-  EntityType["GROUP"] = "GROUP";
-  return EntityType;
-}(EntityType || {});
+import { EntityType } from '../types';
 var getLozenzeProperties = function getLozenzeProperties(entity, intl) {
   var _entity$attributes, _entity$attributes2;
   if ((_entity$attributes = entity.attributes) !== null && _entity$attributes !== void 0 && _entity$attributes.workspaceMember) {
@@ -28,12 +23,15 @@ var transformUser = function transformUser(item, intl) {
     var lozenge = getLozenzeProperties(user, intl);
     return {
       id: user.id,
-      type: UserType,
+      type: user.nonLicensedUser ? ExternalUserType : UserType,
       avatarUrl: user.avatarUrl,
       name: user.name,
       email: user.email,
       title: user.title,
-      lozenge: lozenge
+      lozenge: lozenge,
+      tooltip: user.name,
+      isExternal: Boolean(user.nonLicensedUser),
+      sources: user.nonLicensedUser ? ['other-atlassian'] : undefined
     };
   }
   if (type === EntityType.TEAM) {
@@ -46,7 +44,8 @@ var transformUser = function transformUser(item, intl) {
       memberCount: team.memberCount,
       members: team.members,
       includesYou: team.includesYou,
-      avatarUrl: team.largeAvatarImageUrl || team.smallAvatarImageUrl
+      avatarUrl: team.largeAvatarImageUrl || team.smallAvatarImageUrl,
+      tooltip: team.displayName
     };
   }
   if (type === EntityType.GROUP) {

package/dist/types/service/users-transformer.d.ts

@@ -1,5 +1,6 @@
 import { OptionData } from '@atlaskit/user-picker';
 import { IntlShape } from 'react-intl-next';
+import { EntityType } from '../types';
 interface ServerItem {
     id: string;
     name?: string;
@@ -14,10 +15,5 @@ interface ServerResponse {
     recommendedUsers: ServerItem[];
     intl: IntlShape;
 }
-declare enum EntityType {
-    USER = "USER",
-    TEAM = "TEAM",
-    GROUP = "GROUP"
-}
 export declare const transformUsers: (serverResponse: ServerResponse, intl: IntlShape) => OptionData[];
 export {};

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { DefaultValue, OptionData, UserPickerProps } from '@atlaskit/user-picker';
+import { DefaultValue, ExternalUser, OptionData, Team, User, UserPickerProps } from '@atlaskit/user-picker';
 export interface Context {
     containerId?: string;
     contextType: string;
@@ -70,11 +70,13 @@ export interface RecommendationItem {
     description?: string;
     teamAri?: string;
     displayName?: string;
+    nonLicensedUser?: boolean;
 }
 export interface RecommendationResponse {
     errors?: any[];
     recommendedUsers: RecommendationItem[];
 }
+export type OverrideByline = (option: User | ExternalUser | Team) => string;
 export interface SmartProps {
     /**
      * The base URL of the site eg: hello.atlassian.net
@@ -145,6 +147,11 @@ export interface SmartProps {
      * Error handler used to provide OptionData[] values when the server fails to hydrate the `defaultValue` prop's values.
      */
     onValueError?: OnValueError;
+    /**
+     * Function to generate the byline of each option. The server response is
+     * provided as an argument to the function.
+     */
+    overrideByline?: OverrideByline;
     /**
      * Prefetch the list of suggested assignees before the user picker is focused.
      * WARNING: please consider carefully before deciding to prefetch your suggestions

package/dist/types-ts4.5/service/users-transformer.d.ts

@@ -1,5 +1,6 @@
 import { OptionData } from '@atlaskit/user-picker';
 import { IntlShape } from 'react-intl-next';
+import { EntityType } from '../types';
 interface ServerItem {
     id: string;
     name?: string;
@@ -14,10 +15,5 @@ interface ServerResponse {
     recommendedUsers: ServerItem[];
     intl: IntlShape;
 }
-declare enum EntityType {
-    USER = "USER",
-    TEAM = "TEAM",
-    GROUP = "GROUP"
-}
 export declare const transformUsers: (serverResponse: ServerResponse, intl: IntlShape) => OptionData[];
 export {};

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

@@ -1,5 +1,5 @@
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { DefaultValue, OptionData, UserPickerProps } from '@atlaskit/user-picker';
+import { DefaultValue, ExternalUser, OptionData, Team, User, UserPickerProps } from '@atlaskit/user-picker';
 export interface Context {
     containerId?: string;
     contextType: string;
@@ -70,11 +70,13 @@ export interface RecommendationItem {
     description?: string;
     teamAri?: string;
     displayName?: string;
+    nonLicensedUser?: boolean;
 }
 export interface RecommendationResponse {
     errors?: any[];
     recommendedUsers: RecommendationItem[];
 }
+export type OverrideByline = (option: User | ExternalUser | Team) => string;
 export interface SmartProps {
     /**
      * The base URL of the site eg: hello.atlassian.net
@@ -145,6 +147,11 @@ export interface SmartProps {
      * Error handler used to provide OptionData[] values when the server fails to hydrate the `defaultValue` prop's values.
      */
     onValueError?: OnValueError;
+    /**
+     * Function to generate the byline of each option. The server response is
+     * provided as an argument to the function.
+     */
+    overrideByline?: OverrideByline;
     /**
      * Prefetch the list of suggested assignees before the user picker is focused.
      * WARNING: please consider carefully before deciding to prefetch your suggestions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-user-picker",
-  "version": "6.6.0",
+  "version": "6.8.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -34,9 +34,9 @@
     ]
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.1.0",
+    "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/ufo": "^0.2.0",
-    "@atlaskit/user-picker": "^10.15.0",
+    "@atlaskit/user-picker": "^10.17.0",
     "@babel/runtime": "^7.0.0",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
@@ -48,8 +48,8 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/select": "^17.0.3",
-    "@atlaskit/util-data-test": "^17.8.0",
+    "@atlaskit/select": "^17.1.0",
+    "@atlaskit/util-data-test": "^17.9.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",