@atlaskit/user-picker 8.8.2 → 8.8.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/user-picker
 
+## 8.8.5
+
+### Patch Changes
+
+- [`ac9343c3ed4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac9343c3ed4) - Replaces usage of deprecated design tokens. No visual or functional changes
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
+## 8.8.4
+
+### Patch Changes
+
+- [`d9b9077397d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d9b9077397d) - [ux] Updated the default copy for the byline when selecting email options in UserPicker.
+
+## 8.8.3
+
+### Patch Changes
+
+- [`3553b21ec20`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3553b21ec20) - Render time of user picker list is now tracked with UFO
+
 ## 8.8.2
 
 ### Patch Changes

package/dist/cjs/components/BaseUserPicker.js

@@ -25,12 +25,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
+var _ufo = require("@atlaskit/ufo");
+
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
+var _uuid = require("uuid");
+
 var _analytics = require("../analytics");
 
 var _batch = require("./batch");
@@ -39,6 +43,8 @@ var _i18n = require("./i18n");
 
 var _utils = require("./utils");
 
+var _ufoExperiences = require("../util/ufoExperiences");
+
 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); }
@@ -233,6 +239,18 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         });
       }
     }, 200));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "abortOptionsShownUfoExperience", function () {
+      if (_this.optionsShownUfoExperienceInstance.state.id === _ufo.UFOExperienceState.STARTED.id) {
+        // There may be an existing UFO timing running from previous key entry or focus,
+        // so abort it and restart it just in case.
+        _this.optionsShownUfoExperienceInstance.abort();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "startOptionsShownUfoExperience", function () {
+      _this.abortOptionsShownUfoExperience();
+
+      _this.optionsShownUfoExperienceInstance.start();
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "executeLoadOptions", function (search) {
       var loadOptions = _this.props.loadOptions;
 
@@ -253,6 +271,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         _this.startSession();
       }
 
+      _this.startOptionsShownUfoExperience();
+
       (0, _utils.callCallback)(_this.props.onFocus, _this.getSessionId());
 
       _this.setState({
@@ -288,6 +308,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
       _this.resetInputState();
 
+      _this.abortOptionsShownUfoExperience();
+
       _this.setState({
         menuIsOpen: false,
         options: []
@@ -313,6 +335,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
           inputValue: search
         });
 
+        _this.startOptionsShownUfoExperience();
+
         _this.executeLoadOptions(search);
       }
     });
@@ -411,6 +435,7 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
       inputValue: props.search || '',
       resolving: false
     };
+    _this.optionsShownUfoExperienceInstance = _ufoExperiences.userPickerOptionsShownUfoExperience.getInstance((0, _uuid.v4)());
     return _this;
   }
 
@@ -434,7 +459,9 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(_, prevState) {
       var _this$state2 = this.state,
           menuIsOpen = _this$state2.menuIsOpen,
-          options = _this$state2.options; // load options when the picker open
+          options = _this$state2.options,
+          resolving = _this$state2.resolving,
+          count = _this$state2.count; // load options when the picker open
 
       if (menuIsOpen && !prevState.menuIsOpen) {
         if (!this.session) {
@@ -459,6 +486,10 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
           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)) {
+        this.optionsShownUfoExperienceInstance.success();
+      }
     }
   }, {
     key: "render",

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

@@ -67,12 +67,12 @@ var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
       var id = _this.props.email.id;
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
       }, id);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function (label) {
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
       }, label);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOption", function (label) {

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

@@ -50,7 +50,7 @@ var _default = function _default() {
     testId: "source-icon",
     label: "",
     size: "large",
-    primaryColor: (0, _tokens.token)('color.text.lowEmphasis', isMouseHovered ? _colors.N200 : _colors.N50)
+    primaryColor: (0, _tokens.token)('color.text.subtlest', isMouseHovered ? _colors.N200 : _colors.N50)
   }));
 };
 

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

@@ -80,7 +80,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       var name = _this.props.user.name;
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
       }, name);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function () {
@@ -97,7 +97,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
 
       var emailDomainWithAt = "@".concat(emailDomain);
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
       }, emailUser, /*#__PURE__*/_react.default.createElement(EmailDomainWrapper, null, emailDomainWithAt));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {

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

@@ -74,7 +74,7 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$group.highlight;
       return [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
+        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
       }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -88,7 +88,7 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {
       var isSelected = _this.props.isSelected;
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
+        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
       }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLozengeProps", function () {

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

@@ -64,7 +64,7 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$team.highlight;
       return [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
       }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -104,7 +104,7 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
+        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
       }, message);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {

package/dist/cjs/components/UserOption.js

@@ -61,7 +61,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$user.highlight;
       var result = [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
       }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -70,7 +70,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
         result.push( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
           key: "publicName"
         }, ' ', /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-          color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
+          color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
         }, "(", /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
@@ -80,7 +80,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function () {
       return _this.props.user.byline ? /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
       }, _this.props.user.byline) : undefined;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {

package/dist/cjs/components/i18n.js

@@ -55,7 +55,7 @@ var messages = (0, _reactIntlNext.defineMessages)({
   },
   selectToAddEmail: {
     id: 'fabric.elements.user-picker.email.select.to.add',
-    defaultMessage: 'Select then Invite',
+    defaultMessage: 'Select an email address',
     description: 'Byline for valid email option.'
   },
   continueToAddEmail: {

package/dist/cjs/util/ufoExperiences.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.userPickerRenderedUfoExperience = exports.UfoErrorBoundary = void 0;
+exports.userPickerRenderedUfoExperience = exports.userPickerOptionsShownUfoExperience = exports.UfoErrorBoundary = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -33,6 +33,14 @@ var userPickerRenderedUfoExperience = new _ufo.ConcurrentExperience('user-picker
   performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
 });
 exports.userPickerRenderedUfoExperience = userPickerRenderedUfoExperience;
+var userPickerOptionsShownUfoExperience = new _ufo.ConcurrentExperience('user-picker-options-shown', {
+  platform: {
+    component: 'user-picker'
+  },
+  type: _ufo.ExperienceTypes.Operation,
+  performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+});
+exports.userPickerOptionsShownUfoExperience = userPickerOptionsShownUfoExperience;
 
 var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(UfoErrorBoundary, _React$Component);

package/dist/cjs/version.json

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

package/dist/es2019/components/BaseUserPicker.js

@@ -1,13 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { v4 as uuidv4 } from 'uuid';
 import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEvent, failedEvent, focusEvent, searchedEvent, selectEvent, startSession } from '../analytics';
 import { batchByKey } from './batch';
 import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
+import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
 
 const loadingMessage = () => null;
 
@@ -198,6 +201,19 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       }
     }, 200));
 
+    _defineProperty(this, "abortOptionsShownUfoExperience", () => {
+      if (this.optionsShownUfoExperienceInstance.state.id === UFOExperienceState.STARTED.id) {
+        // There may be an existing UFO timing running from previous key entry or focus,
+        // so abort it and restart it just in case.
+        this.optionsShownUfoExperienceInstance.abort();
+      }
+    });
+
+    _defineProperty(this, "startOptionsShownUfoExperience", () => {
+      this.abortOptionsShownUfoExperience();
+      this.optionsShownUfoExperienceInstance.start();
+    });
+
     _defineProperty(this, "executeLoadOptions", search => {
       const {
         loadOptions
@@ -220,6 +236,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         this.startSession();
       }
 
+      this.startOptionsShownUfoExperience();
       callCallback(this.props.onFocus, this.getSessionId());
       this.setState({
         menuIsOpen: true
@@ -253,6 +270,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       }
 
       this.resetInputState();
+      this.abortOptionsShownUfoExperience();
       this.setState({
         menuIsOpen: false,
         options: []
@@ -276,6 +294,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         this.setState({
           inputValue: search
         });
+        this.startOptionsShownUfoExperience();
         this.executeLoadOptions(search);
       }
     });
@@ -373,6 +392,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       inputValue: props.search || '',
       resolving: false
     };
+    this.optionsShownUfoExperienceInstance = userPickerOptionsShownUfoExperience.getInstance(uuidv4());
   }
 
   componentDidMount() {
@@ -393,7 +413,9 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
   componentDidUpdate(_, prevState) {
     const {
       menuIsOpen,
-      options
+      options,
+      resolving,
+      count
     } = this.state; // load options when the picker open
 
     if (menuIsOpen && !prevState.menuIsOpen) {
@@ -419,6 +441,10 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         this.session.inputChangeTime = Date.now();
       }
     }
+
+    if (menuIsOpen && (!_.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [UFOExperienceState.STARTED.id, UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+      this.optionsShownUfoExperienceInstance.success();
+    }
   }
 
   render() {

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

@@ -25,13 +25,13 @@ export class EmailOption extends React.PureComponent {
       } = this.props;
       return /*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text', N800)
+        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
       }, id);
     });
 
     _defineProperty(this, "renderSecondaryText", label => {
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
+        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
       }, label);
     });
 

package/dist/es2019/components/ExternalUserOption/InfoIcon.js

@@ -17,6 +17,6 @@ export default (() => {
     testId: "source-icon",
     label: "",
     size: "large",
-    primaryColor: token('color.text.lowEmphasis', isMouseHovered ? N200 : N50)
+    primaryColor: token('color.text.subtlest', isMouseHovered ? N200 : N50)
   }));
 });

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

@@ -33,7 +33,7 @@ export class ExternalUserOption extends React.PureComponent {
       } = this.props;
       return /*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text', N800)
+        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
       }, name);
     });
 
@@ -49,7 +49,7 @@ export class ExternalUserOption extends React.PureComponent {
       const [emailUser, emailDomain] = email.split('@');
       const emailDomainWithAt = `@${emailDomain}`;
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
+        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
       }, emailUser, /*#__PURE__*/React.createElement(EmailDomainWrapper, null, emailDomainWithAt));
     });
 

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

@@ -31,7 +31,7 @@ export class GroupOption extends React.PureComponent {
       } = this.props;
       return [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: isSelected ? token('color.text.brand', B400) : token('color.text', N800)
+        color: isSelected ? token('color.text.selected', B400) : token('color.text', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -47,7 +47,7 @@ export class GroupOption extends React.PureComponent {
         isSelected
       } = this.props;
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
+        color: isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages.groupByline));
     });
 

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

@@ -21,7 +21,7 @@ export class TeamOption extends React.PureComponent {
       } = this.props;
       return [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text', N800)
+        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -64,7 +64,7 @@ export class TeamOption extends React.PureComponent {
     });
 
     _defineProperty(this, "getBylineComponent", (isSelected, message) => /*#__PURE__*/React.createElement(TextWrapper, {
-      color: isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
+      color: isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
     }, message));
 
     _defineProperty(this, "renderAvatar", () => {

package/dist/es2019/components/UserOption.js

@@ -20,7 +20,7 @@ export class UserOption extends React.PureComponent {
       } = this.props;
       const result = [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text', N800)
+        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -29,7 +29,7 @@ export class UserOption extends React.PureComponent {
         result.push( /*#__PURE__*/React.createElement(React.Fragment, {
           key: "publicName"
         }, ' ', /*#__PURE__*/React.createElement(TextWrapper, {
-          color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
+          color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
         }, "(", /*#__PURE__*/React.createElement(HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
@@ -39,7 +39,7 @@ export class UserOption extends React.PureComponent {
     });
 
     _defineProperty(this, "renderSecondaryText", () => this.props.user.byline ? /*#__PURE__*/React.createElement(TextWrapper, {
-      color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
+      color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
     }, this.props.user.byline) : undefined);
 
     _defineProperty(this, "renderAvatar", () => {

package/dist/es2019/components/i18n.js

@@ -47,7 +47,7 @@ export const messages = defineMessages({
   },
   selectToAddEmail: {
     id: 'fabric.elements.user-picker.email.select.to.add',
-    defaultMessage: 'Select then Invite',
+    defaultMessage: 'Select an email address',
     description: 'Byline for valid email option.'
   },
   continueToAddEmail: {

package/dist/es2019/util/ufoExperiences.js

@@ -7,6 +7,13 @@ export const userPickerRenderedUfoExperience = new ConcurrentExperience('user-pi
   type: ExperienceTypes.Load,
   performanceType: ExperiencePerformanceTypes.PageSegmentLoad
 });
+export const userPickerOptionsShownUfoExperience = new ConcurrentExperience('user-picker-options-shown', {
+  platform: {
+    component: 'user-picker'
+  },
+  type: ExperienceTypes.Operation,
+  performanceType: ExperiencePerformanceTypes.InlineResult
+});
 export class UfoErrorBoundary extends React.Component {
   componentDidCatch() {
     const instance = userPickerRenderedUfoExperience.getInstance(this.props.id);

package/dist/es2019/version.json

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

package/dist/esm/components/BaseUserPicker.js

@@ -18,13 +18,16 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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 { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { v4 as uuidv4 } from 'uuid';
 import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEvent, failedEvent, focusEvent, searchedEvent, selectEvent, startSession } from '../analytics';
 import { batchByKey } from './batch';
 import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
+import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
 
 var loadingMessage = function loadingMessage() {
   return null;
@@ -224,6 +227,20 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       }
     }, 200));
 
+    _defineProperty(_assertThisInitialized(_this), "abortOptionsShownUfoExperience", function () {
+      if (_this.optionsShownUfoExperienceInstance.state.id === UFOExperienceState.STARTED.id) {
+        // There may be an existing UFO timing running from previous key entry or focus,
+        // so abort it and restart it just in case.
+        _this.optionsShownUfoExperienceInstance.abort();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "startOptionsShownUfoExperience", function () {
+      _this.abortOptionsShownUfoExperience();
+
+      _this.optionsShownUfoExperienceInstance.start();
+    });
+
     _defineProperty(_assertThisInitialized(_this), "executeLoadOptions", function (search) {
       var loadOptions = _this.props.loadOptions;
 
@@ -245,6 +262,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         _this.startSession();
       }
 
+      _this.startOptionsShownUfoExperience();
+
       callCallback(_this.props.onFocus, _this.getSessionId());
 
       _this.setState({
@@ -282,6 +301,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
 
       _this.resetInputState();
 
+      _this.abortOptionsShownUfoExperience();
+
       _this.setState({
         menuIsOpen: false,
         options: []
@@ -309,6 +330,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
           inputValue: search
         });
 
+        _this.startOptionsShownUfoExperience();
+
         _this.executeLoadOptions(search);
       }
     });
@@ -414,6 +437,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       inputValue: props.search || '',
       resolving: false
     };
+    _this.optionsShownUfoExperienceInstance = userPickerOptionsShownUfoExperience.getInstance(uuidv4());
     return _this;
   }
 
@@ -437,7 +461,9 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     value: function componentDidUpdate(_, prevState) {
       var _this$state2 = this.state,
           menuIsOpen = _this$state2.menuIsOpen,
-          options = _this$state2.options; // load options when the picker open
+          options = _this$state2.options,
+          resolving = _this$state2.resolving,
+          count = _this$state2.count; // load options when the picker open
 
       if (menuIsOpen && !prevState.menuIsOpen) {
         if (!this.session) {
@@ -462,6 +488,10 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
           this.session.inputChangeTime = Date.now();
         }
       }
+
+      if (menuIsOpen && (!_.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [UFOExperienceState.STARTED.id, UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+        this.optionsShownUfoExperienceInstance.success();
+      }
     }
   }, {
     key: "render",

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

@@ -48,13 +48,13 @@ export var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
       var id = _this.props.email.id;
       return /*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? token('color.text.brand', B400) : token('color.text', N800)
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
       }, id);
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSecondaryText", function (label) {
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: _this.props.isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
       }, label);
     });
 

package/dist/esm/components/ExternalUserOption/InfoIcon.js

@@ -28,6 +28,6 @@ export default (function () {
     testId: "source-icon",
     label: "",
     size: "large",
-    primaryColor: token('color.text.lowEmphasis', isMouseHovered ? N200 : N50)
+    primaryColor: token('color.text.subtlest', isMouseHovered ? N200 : N50)
   }));
 });

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

@@ -47,7 +47,7 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       var name = _this.props.user.name;
       return /*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? token('color.text.brand', B400) : token('color.text', N800)
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
       }, name);
     });
 
@@ -65,7 +65,7 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
 
       var emailDomainWithAt = "@".concat(emailDomain);
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: _this.props.isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
       }, emailUser, /*#__PURE__*/React.createElement(EmailDomainWrapper, null, emailDomainWithAt));
     });
 

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

@@ -47,7 +47,7 @@ export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$group.highlight;
       return [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: isSelected ? token('color.text.brand', B400) : token('color.text', N800)
+        color: isSelected ? token('color.text.selected', B400) : token('color.text', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -63,7 +63,7 @@ export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "renderByline", function () {
       var isSelected = _this.props.isSelected;
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
+        color: isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages.groupByline));
     });
 

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

@@ -41,7 +41,7 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$team.highlight;
       return [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? token('color.text.brand', B400) : token('color.text', N800)
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -83,7 +83,7 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "getBylineComponent", function (isSelected, message) {
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
+        color: isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
       }, message);
     });
 

package/dist/esm/components/UserOption.js

@@ -40,7 +40,7 @@ export var UserOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$user.highlight;
       var result = [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? token('color.text.brand', B400) : token('color.text', N800)
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -49,7 +49,7 @@ export var UserOption = /*#__PURE__*/function (_React$PureComponent) {
         result.push( /*#__PURE__*/React.createElement(React.Fragment, {
           key: "publicName"
         }, ' ', /*#__PURE__*/React.createElement(TextWrapper, {
-          color: _this.props.isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
+          color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
         }, "(", /*#__PURE__*/React.createElement(HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
@@ -60,7 +60,7 @@ export var UserOption = /*#__PURE__*/function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "renderSecondaryText", function () {
       return _this.props.user.byline ? /*#__PURE__*/React.createElement(TextWrapper, {
-        color: _this.props.isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
       }, _this.props.user.byline) : undefined;
     });
 

package/dist/esm/components/i18n.js

@@ -47,7 +47,7 @@ export var messages = defineMessages({
   },
   selectToAddEmail: {
     id: 'fabric.elements.user-picker.email.select.to.add',
-    defaultMessage: 'Select then Invite',
+    defaultMessage: 'Select an email address',
     description: 'Byline for valid email option.'
   },
   continueToAddEmail: {

package/dist/esm/util/ufoExperiences.js

@@ -17,6 +17,13 @@ export var userPickerRenderedUfoExperience = new ConcurrentExperience('user-pick
   type: ExperienceTypes.Load,
   performanceType: ExperiencePerformanceTypes.PageSegmentLoad
 });
+export var userPickerOptionsShownUfoExperience = new ConcurrentExperience('user-picker-options-shown', {
+  platform: {
+    component: 'user-picker'
+  },
+  type: ExperienceTypes.Operation,
+  performanceType: ExperiencePerformanceTypes.InlineResult
+});
 export var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(UfoErrorBoundary, _React$Component);
 

package/dist/esm/version.json

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

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

@@ -19,6 +19,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private selectRef;
     private session?;
     private journeyId?;
+    private optionsShownUfoExperienceInstance;
     constructor(props: BaseUserPickerProps);
     private getSessionId;
     private withSelectRef;
@@ -32,6 +33,8 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private addOptions;
     private handleLoadOptionsError;
     private debouncedLoadOptions;
+    abortOptionsShownUfoExperience: () => void;
+    startOptionsShownUfoExperience: () => void;
     private executeLoadOptions;
     private handleFocus;
     private resetInputState;

package/dist/types/util/ufoExperiences.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ConcurrentExperience } from '@atlaskit/ufo';
 export declare const userPickerRenderedUfoExperience: ConcurrentExperience;
+export declare const userPickerOptionsShownUfoExperience: ConcurrentExperience;
 export declare class UfoErrorBoundary extends React.Component<{
     id: string;
 }> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "8.8.2",
+  "version": "8.8.5",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
     "@atlaskit/select": "^15.2.0",
     "@atlaskit/spinner": "^15.1.4",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.7.0",
+    "@atlaskit/tokens": "^0.8.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",