@atlaskit/user-picker 8.8.1 → 8.8.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/user-picker
 
+## 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
+
+- [`cc773aa7ecc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cc773aa7ecc) - [ux] show error message in tooltip when there is no user source
+
 ## 8.8.1
 
 ### 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/ExternalUserOption/SourcesTooltipContent.js

@@ -78,8 +78,7 @@ var SUPPORTED_SOURCES = [{
 
 var SourcesTooltipContent = function SourcesTooltipContent(_ref) {
   var sources = _ref.sources,
-      sourcesLoading = _ref.sourcesLoading,
-      sourcesError = _ref.sourcesError;
+      sourcesLoading = _ref.sourcesLoading;
 
   var sourcesToRender = _react.default.useMemo(function () {
     return SUPPORTED_SOURCES.filter(function (supportedSource) {
@@ -87,7 +86,7 @@ var SourcesTooltipContent = function SourcesTooltipContent(_ref) {
     });
   }, [sources]);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sourcesError !== null && sources.length === 0 ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesError)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesHeading)), /*#__PURE__*/_react.default.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/_react.default.createElement(_spinner.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !sourcesLoading && sources.length === 0 ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesError)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesHeading)), /*#__PURE__*/_react.default.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/_react.default.createElement(_spinner.default, {
     size: "small",
     appearance: "invert"
   }), !sourcesLoading && sourcesToRender.map(function (_ref2) {

package/dist/cjs/components/ExternalUserSourcesContainer.js

@@ -19,22 +19,19 @@ var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(_ref) {
 
   var _useUserSource = (0, _UserSourceProvider.useUserSource)(accountId, shouldFetchSources, initialSources),
       sources = _useUserSource.sources,
-      sourcesLoading = _useUserSource.loading,
-      sourcesError = _useUserSource.error;
+      sourcesLoading = _useUserSource.loading;
 
   if (typeof children === 'function') {
     return children({
       sources: sources,
-      sourcesLoading: sourcesLoading,
-      sourcesError: sourcesError
+      sourcesLoading: sourcesLoading
     });
   }
 
   return _react.default.Children.map(children, function (child) {
     return /*#__PURE__*/_react.default.cloneElement(child, {
       sources: sources,
-      sourcesLoading: sourcesLoading,
-      sourcesError: sourcesError
+      sourcesLoading: sourcesLoading
     });
   });
 };

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.1",
+	"version": "8.8.4",
 	"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/ExternalUserOption/SourcesTooltipContent.js

@@ -55,11 +55,10 @@ const SUPPORTED_SOURCES = [{
 }];
 export const SourcesTooltipContent = ({
   sources,
-  sourcesLoading,
-  sourcesError
+  sourcesLoading
 }) => {
   const sourcesToRender = React.useMemo(() => SUPPORTED_SOURCES.filter(supportedSource => sources.includes(supportedSource.sourceType)), [sources]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, sourcesError !== null && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !sourcesLoading && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
     size: "small",
     appearance: "invert"
   }), !sourcesLoading && sourcesToRender.map(({

package/dist/es2019/components/ExternalUserSourcesContainer.js

@@ -8,21 +8,18 @@ export const ExternalUserSourcesContainer = ({
 }) => {
   const {
     sources,
-    loading: sourcesLoading,
-    error: sourcesError
+    loading: sourcesLoading
   } = useUserSource(accountId, shouldFetchSources, initialSources);
 
   if (typeof children === 'function') {
     return children({
       sources,
-      sourcesLoading,
-      sourcesError
+      sourcesLoading
     });
   }
 
   return React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
     sources,
-    sourcesLoading,
-    sourcesError
+    sourcesLoading
   }));
 };

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.1",
+	"version": "8.8.4",
 	"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/ExternalUserOption/SourcesTooltipContent.js

@@ -52,14 +52,13 @@ var SUPPORTED_SOURCES = [{
 }];
 export var SourcesTooltipContent = function SourcesTooltipContent(_ref) {
   var sources = _ref.sources,
-      sourcesLoading = _ref.sourcesLoading,
-      sourcesError = _ref.sourcesError;
+      sourcesLoading = _ref.sourcesLoading;
   var sourcesToRender = React.useMemo(function () {
     return SUPPORTED_SOURCES.filter(function (supportedSource) {
       return sources.includes(supportedSource.sourceType);
     });
   }, [sources]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, sourcesError !== null && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !sourcesLoading && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
     size: "small",
     appearance: "invert"
   }), !sourcesLoading && sourcesToRender.map(function (_ref2) {

package/dist/esm/components/ExternalUserSourcesContainer.js

@@ -8,22 +8,19 @@ export var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(
 
   var _useUserSource = useUserSource(accountId, shouldFetchSources, initialSources),
       sources = _useUserSource.sources,
-      sourcesLoading = _useUserSource.loading,
-      sourcesError = _useUserSource.error;
+      sourcesLoading = _useUserSource.loading;
 
   if (typeof children === 'function') {
     return children({
       sources: sources,
-      sourcesLoading: sourcesLoading,
-      sourcesError: sourcesError
+      sourcesLoading: sourcesLoading
     });
   }
 
   return React.Children.map(children, function (child) {
     return /*#__PURE__*/React.cloneElement(child, {
       sources: sources,
-      sourcesLoading: sourcesLoading,
-      sourcesError: sourcesError
+      sourcesLoading: sourcesLoading
     });
   });
 };

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.1",
+	"version": "8.8.4",
 	"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/components/ExternalUserSourcesContainer.d.ts

@@ -3,7 +3,6 @@ import { UserSource } from '../types';
 export interface ExternalUserSourcesData {
     sources: UserSource[];
     sourcesLoading: boolean;
-    sourcesError: string | null;
 }
 declare type SourcesChildrenFunc = (sourcesData: ExternalUserSourcesData) => ReactNode;
 interface SourcesContainerProps {

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.1",
+  "version": "8.8.4",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"