@atlaskit/smart-user-picker 5.0.0 → 5.0.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlassian/smart-user-picker
 
+## 5.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.0.2
+
+### Patch Changes
+
+- [`6fc78303271`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6fc78303271) - UFO measurement of how long it takes the list of users to be shown
+
+## 5.0.1
+
+### Patch Changes
+
+- [`0850fe46fc8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0850fe46fc8) - Track mount errors in Smart User Picker
+
 ## 5.0.0
 
 ### Major Changes

package/dist/cjs/components/SmartUserPicker.js

@@ -39,6 +39,8 @@ 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 _analytics = require("../analytics");
@@ -47,6 +49,8 @@ var _MessagesIntlProvider = _interopRequireDefault(require("./MessagesIntlProvid
 
 var _service = require("../service");
 
+var _ufoExperiences = require("../ufoExperiences");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -89,18 +93,13 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(SmartUserPickerWithoutAnalytics);
 
-  function SmartUserPickerWithoutAnalytics() {
+  function SmartUserPickerWithoutAnalytics(props) {
     var _this$props$debounceT;
 
     var _this;
 
     (0, _classCallCheck2.default)(this, SmartUserPickerWithoutAnalytics);
-
-    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
-      _args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(_args));
+    _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       users: [],
       loading: false,
@@ -110,12 +109,24 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
       defaultValue: [],
       bootstrapOptions: []
     });
+    (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), "fireEvent", function (eventCreator) {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
 
       if (createAnalyticsEvent) {
-        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-          args[_key2 - 1] = arguments[_key2];
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
         }
 
         (0, _analytics.createAndFireEventInElementsChannel)(eventCreator.apply(void 0, [_this.props, _this.state].concat(args)))(createAnalyticsEvent);
@@ -126,13 +137,13 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
     });
     (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, _this$props, containerId, childObjectId, objectId, principalId, productKey, siteId, orgId, baseUrl, includeUsers, includeGroups, includeTeams, maxOptions, searchQueryFilter, onEmpty, productAttributes, intl, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, elapsedTimeMilli, displayedUsers, defaultUsers, _elapsedTimeMilli;
+      var _this$state, query, sessionId, closed, _this$props, containerId, childObjectId, objectId, principalId, productKey, siteId, orgId, baseUrl, includeUsers, includeGroups, includeTeams, maxOptions, searchQueryFilter, onEmpty, productAttributes, intl, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, elapsedTimeMilli, displayedUsers, 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;
+              _this$state = _this.state, query = _this$state.query, sessionId = _this$state.sessionId, closed = _this$state.closed;
               _this$props = _this.props, containerId = _this$props.containerId, childObjectId = _this$props.childObjectId, objectId = _this$props.objectId, principalId = _this$props.principalId, productKey = _this$props.productKey, siteId = _this$props.siteId, orgId = _this$props.orgId, baseUrl = _this$props.baseUrl, includeUsers = _this$props.includeUsers, includeGroups = _this$props.includeGroups, includeTeams = _this$props.includeTeams, maxOptions = _this$props.maxOptions, searchQueryFilter = _this$props.searchQueryFilter, onEmpty = _this$props.onEmpty, productAttributes = _this$props.productAttributes, intl = _this$props.intl;
               maxNumberOfResults = maxOptions || 100;
               startTime = window.performance.now();
@@ -230,22 +241,28 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
                 };
               });
 
-              _context.next = 40;
+              _context.next = 41;
               break;
 
             case 31:
               _context.prev = 31;
               _context.t4 = _context["catch"](5);
 
+              if (!closed) {
+                // If the user lookup fails while the menu is open, send UFO failure
+                // TODO handle with-option-failovers example here (falls back to alt data source)
+                _this.optionsShownUfoExperienceInstance.failure();
+              }
+
               _this.setState({
                 users: [],
                 error: true
               });
 
-              _context.next = 36;
+              _context.next = 37;
               return _this.props.onError ? _this.props.onError(_context.t4, recommendationsRequest) || Promise.resolve([]) : Promise.resolve([]);
 
-            case 36:
+            case 37:
               defaultUsers = _context.sent;
               _elapsedTimeMilli = window.performance.now() - startTime;
 
@@ -259,7 +276,7 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
                 productAttributes: productAttributes
               });
 
-            case 40:
+            case 41:
             case "end":
               return _context.stop();
           }
@@ -275,6 +292,12 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
       }
 
       if (!closed) {
+        // If the input has been typed into and the dropdown has not been closed
+        // (i.e. input blurred) then start the UFO timer.
+        // If there's a previous UFO timer running for the same "options shown" experience,
+        // it will be aborted first.
+        _this.startOptionsShownUfoExperience();
+
         _this.setState({
           loading: true,
           query: query,
@@ -329,6 +352,8 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         closed: false
       };
 
+      _this.startOptionsShownUfoExperience();
+
       if (_this.state.users.length === 0) {
         state.sessionId = sessionId;
         state.loading = true;
@@ -349,7 +374,9 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlur", function (sessionId) {
-      _this.getUsers.cancel(); // clear old users if query is populated so that on refocus,
+      _this.getUsers.cancel();
+
+      _this.abortOptionsShownUfoExperience(); // clear old users if query is populated so that on refocus,
       // the old list is not shown
 
 
@@ -365,6 +392,7 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(sessionId);
       }
     });
+    _this.optionsShownUfoExperienceInstance = _ufoExperiences.smartUserPickerOptionsShownUfoExperience.getInstance(props.inputId || props.fieldId);
     return _this;
   }
 
@@ -439,6 +467,12 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
       if ((this.state.sessionId !== prevState.sessionId || this.state.query !== prevState.query) && (this.state.query !== '' || !this.props.bootstrapOptions)) {
         this.getUsers();
+      } else if (!this.state.closed && !this.state.loading) {
+        // If the component has rendered (including its dropdown list) and it
+        // is not loading anything further, send the success UFO event
+        if (![_ufo.UFOExperienceState.FAILED.id, _ufo.UFOExperienceState.SUCCEEDED.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+          this.optionsShownUfoExperienceInstance.success();
+        }
       }
     }
   }, {

package/dist/cjs/components/index.js

@@ -16,8 +16,11 @@ var _MessagesIntlProvider = _interopRequireDefault(require("./MessagesIntlProvid
 var _ufoExperiences = require("../ufoExperiences");
 
 var SmartUserPickerWithIntlProvider = function SmartUserPickerWithIntlProvider(props) {
-  (0, _ufoExperiences.useUFOConcurrentExperience)(_ufoExperiences.smartUserPickerRenderedUfoExperience, props.inputId || props.fieldId);
-  return /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, /*#__PURE__*/_react.default.createElement(_SmartUserPicker.SmartUserPicker, props));
+  var ufoId = props.inputId || props.fieldId;
+  (0, _ufoExperiences.useUFOConcurrentExperience)(_ufoExperiences.smartUserPickerRenderedUfoExperience, ufoId);
+  return /*#__PURE__*/_react.default.createElement(_ufoExperiences.UfoErrorBoundary, {
+    id: ufoId
+  }, /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, /*#__PURE__*/_react.default.createElement(_SmartUserPicker.SmartUserPicker, props)));
 };
 
 var _default = SmartUserPickerWithIntlProvider;

package/dist/cjs/ufoExperiences.js

@@ -1,13 +1,35 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useUFOConcurrentExperience = exports.smartUserPickerRenderedUfoExperience = void 0;
+exports.useUFOConcurrentExperience = exports.smartUserPickerRenderedUfoExperience = exports.smartUserPickerOptionsShownUfoExperience = exports.UfoErrorBoundary = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _ufo = require("@atlaskit/ufo");
 
-var _react = require("react");
+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 _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 COMPONENT_NAME = 'smart-user-picker';
 var smartUserPickerRenderedUfoExperience = new _ufo.ConcurrentExperience('smart-user-picker-rendered', {
@@ -18,6 +40,14 @@ var smartUserPickerRenderedUfoExperience = new _ufo.ConcurrentExperience('smart-
   performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
 });
 exports.smartUserPickerRenderedUfoExperience = smartUserPickerRenderedUfoExperience;
+var smartUserPickerOptionsShownUfoExperience = new _ufo.ConcurrentExperience('smart-user-picker-options-shown', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: _ufo.ExperienceTypes.Operation,
+  performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+});
+exports.smartUserPickerOptionsShownUfoExperience = smartUserPickerOptionsShownUfoExperience;
 
 var useUFOConcurrentExperience = function useUFOConcurrentExperience(experience, id) {
   var experienceForId = experience.getInstance(id); // Equivalent to componentWillMount - replace with @atlaskit/ufo's
@@ -28,12 +58,43 @@ var useUFOConcurrentExperience = function useUFOConcurrentExperience(experience,
   }); // Replace with @atlaskit/ufo's <ExperienceSuccess> when it supports ConcurrentExperience
 
   (0, _react.useEffect)(function () {
-    experienceForId.success();
+    if (experienceForId.state !== _ufo.UFOExperienceState['FAILED']) {
+      experienceForId.success();
+    }
+
     return function () {
-      experienceForId.abort();
+      if ([_ufo.UFOExperienceState['STARTED'], _ufo.UFOExperienceState['IN_PROGRESS']].includes(experienceForId.state)) {
+        experienceForId.abort();
+      }
     }; // We only want this useEffect to run once after component mount, so no deps are needed.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
 
-exports.useUFOConcurrentExperience = useUFOConcurrentExperience;
+exports.useUFOConcurrentExperience = useUFOConcurrentExperience;
+
+var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(UfoErrorBoundary, _React$Component);
+
+  var _super = _createSuper(UfoErrorBoundary);
+
+  function UfoErrorBoundary() {
+    (0, _classCallCheck2.default)(this, UfoErrorBoundary);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(UfoErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch() {
+      smartUserPickerRenderedUfoExperience.getInstance(this.props.id).failure();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
+  return UfoErrorBoundary;
+}(_react.default.Component);
+
+exports.UfoErrorBoundary = UfoErrorBoundary;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-user-picker",
-	"version": "5.0.0",
+	"version": "5.0.3",
 	"sideEffects": false
 }

package/dist/es2019/components/SmartUserPicker.js

@@ -6,10 +6,12 @@ import { v4 as uuidV4 } from 'uuid';
 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 { requestUsersEvent, filterUsersEvent, preparedUsersLoadedEvent, successfulRequestUsersEvent, failedRequestUsersEvent, mountedWithPrefetchEvent, createAndFireEventInElementsChannel } from '../analytics';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { getUserRecommendations, hydrateDefaultValues } from '../service';
+import { smartUserPickerOptionsShownUfoExperience } from '../ufoExperiences';
 const DEFAULT_DEBOUNCE_TIME_MS = 150;
 
 const hasContextChanged = (oldContext, newContext) => oldContext.siteId !== newContext.siteId || oldContext.orgId !== newContext.orgId || oldContext.productKey !== newContext.productKey || oldContext.principalId !== newContext.principalId || oldContext.containerId !== newContext.containerId || oldContext.objectId !== newContext.objectId || oldContext.childObjectId !== newContext.childObjectId;
@@ -35,10 +37,10 @@ const getUsersForAnalytics = users => (users || []).map(({
 }));
 
 export class SmartUserPickerWithoutAnalytics extends React.Component {
-  constructor(..._args) {
+  constructor(props) {
     var _this$props$debounceT;
 
-    super(..._args);
+    super(props);
 
     _defineProperty(this, "state", {
       users: [],
@@ -50,6 +52,19 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
       bootstrapOptions: []
     });
 
+    _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, "fireEvent", (eventCreator, ...args) => {
       const {
         createAnalyticsEvent
@@ -67,7 +82,8 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
     _defineProperty(this, "getUsers", debounce(async () => {
       const {
         query,
-        sessionId
+        sessionId,
+        closed
       } = this.state;
       const {
         containerId,
@@ -135,6 +151,12 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
           };
         });
       } catch (e) {
+        if (!closed) {
+          // If the user lookup fails while the menu is open, send UFO failure
+          // TODO handle with-option-failovers example here (falls back to alt data source)
+          this.optionsShownUfoExperienceInstance.failure();
+        }
+
         this.setState({
           users: [],
           error: true
@@ -163,6 +185,11 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
       }
 
       if (!closed) {
+        // If the input has been typed into and the dropdown has not been closed
+        // (i.e. input blurred) then start the UFO timer.
+        // If there's a previous UFO timer running for the same "options shown" experience,
+        // it will be aborted first.
+        this.startOptionsShownUfoExperience();
         this.setState({
           loading: true,
           query,
@@ -211,6 +238,7 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
         query: '',
         closed: false
       };
+      this.startOptionsShownUfoExperience();
 
       if (this.state.users.length === 0) {
         state.sessionId = sessionId;
@@ -233,7 +261,8 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
     });
 
     _defineProperty(this, "onBlur", sessionId => {
-      this.getUsers.cancel(); // clear old users if query is populated so that on refocus,
+      this.getUsers.cancel();
+      this.abortOptionsShownUfoExperience(); // clear old users if query is populated so that on refocus,
       // the old list is not shown
 
       const users = this.state.query.length === 0 ? this.state.users : [];
@@ -247,6 +276,8 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
         this.props.onBlur(sessionId);
       }
     });
+
+    this.optionsShownUfoExperienceInstance = smartUserPickerOptionsShownUfoExperience.getInstance(props.inputId || props.fieldId);
   }
 
   async componentDidMount() {
@@ -286,6 +317,12 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
 
     if ((this.state.sessionId !== prevState.sessionId || this.state.query !== prevState.query) && (this.state.query !== '' || !this.props.bootstrapOptions)) {
       this.getUsers();
+    } else if (!this.state.closed && !this.state.loading) {
+      // If the component has rendered (including its dropdown list) and it
+      // is not loading anything further, send the success UFO event
+      if (![UFOExperienceState.FAILED.id, UFOExperienceState.SUCCEEDED.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+        this.optionsShownUfoExperienceInstance.success();
+      }
     }
   }
 

package/dist/es2019/components/index.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import { SmartUserPicker } from './SmartUserPicker';
 import MessagesIntlProvider from './MessagesIntlProvider';
-import { useUFOConcurrentExperience, smartUserPickerRenderedUfoExperience } from '../ufoExperiences';
+import { useUFOConcurrentExperience, smartUserPickerRenderedUfoExperience, UfoErrorBoundary } from '../ufoExperiences';
 
 const SmartUserPickerWithIntlProvider = props => {
-  useUFOConcurrentExperience(smartUserPickerRenderedUfoExperience, props.inputId || props.fieldId);
-  return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(SmartUserPicker, props));
+  const ufoId = props.inputId || props.fieldId;
+  useUFOConcurrentExperience(smartUserPickerRenderedUfoExperience, ufoId);
+  return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+    id: ufoId
+  }, /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(SmartUserPicker, props)));
 };
 
 export default SmartUserPickerWithIntlProvider;

package/dist/es2019/ufoExperiences.js

@@ -1,4 +1,5 @@
-import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
+import React from 'react';
+import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience, UFOExperienceState } from '@atlaskit/ufo';
 import { useEffect, useState } from 'react';
 const COMPONENT_NAME = 'smart-user-picker';
 export const smartUserPickerRenderedUfoExperience = new ConcurrentExperience('smart-user-picker-rendered', {
@@ -8,6 +9,13 @@ export const smartUserPickerRenderedUfoExperience = new ConcurrentExperience('sm
   type: ExperienceTypes.Load,
   performanceType: ExperiencePerformanceTypes.PageSegmentLoad
 });
+export const smartUserPickerOptionsShownUfoExperience = new ConcurrentExperience('smart-user-picker-options-shown', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: ExperienceTypes.Operation,
+  performanceType: ExperiencePerformanceTypes.InlineResult
+});
 export const useUFOConcurrentExperience = (experience, id) => {
   const experienceForId = experience.getInstance(id); // Equivalent to componentWillMount - replace with @atlaskit/ufo's
   // useUFOComponentExperience when it supports ConcurrentExperience.
@@ -17,10 +25,25 @@ export const useUFOConcurrentExperience = (experience, id) => {
   }); // Replace with @atlaskit/ufo's <ExperienceSuccess> when it supports ConcurrentExperience
 
   useEffect(() => {
-    experienceForId.success();
+    if (experienceForId.state !== UFOExperienceState['FAILED']) {
+      experienceForId.success();
+    }
+
     return () => {
-      experienceForId.abort();
+      if ([UFOExperienceState['STARTED'], UFOExperienceState['IN_PROGRESS']].includes(experienceForId.state)) {
+        experienceForId.abort();
+      }
     }; // We only want this useEffect to run once after component mount, so no deps are needed.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-};
+};
+export class UfoErrorBoundary extends React.Component {
+  componentDidCatch() {
+    smartUserPickerRenderedUfoExperience.getInstance(this.props.id).failure();
+  }
+
+  render() {
+    return this.props.children;
+  }
+
+}

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-user-picker",
-	"version": "5.0.0",
+	"version": "5.0.3",
 	"sideEffects": false
 }

package/dist/esm/components/SmartUserPicker.js

@@ -23,10 +23,12 @@ import { v4 as uuidV4 } from 'uuid';
 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 { requestUsersEvent, filterUsersEvent, preparedUsersLoadedEvent, successfulRequestUsersEvent, failedRequestUsersEvent, mountedWithPrefetchEvent, createAndFireEventInElementsChannel } from '../analytics';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { getUserRecommendations, hydrateDefaultValues } from '../service';
+import { smartUserPickerOptionsShownUfoExperience } from '../ufoExperiences';
 var DEFAULT_DEBOUNCE_TIME_MS = 150;
 
 var hasContextChanged = function hasContextChanged(oldContext, newContext) {
@@ -61,18 +63,14 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
 
   var _super = _createSuper(SmartUserPickerWithoutAnalytics);
 
-  function SmartUserPickerWithoutAnalytics() {
+  function SmartUserPickerWithoutAnalytics(props) {
     var _this$props$debounceT;
 
     var _this;
 
     _classCallCheck(this, SmartUserPickerWithoutAnalytics);
 
-    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
-      _args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(_args));
+    _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       users: [],
@@ -84,12 +82,26 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
       bootstrapOptions: []
     });
 
+    _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), "fireEvent", function (eventCreator) {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
 
       if (createAnalyticsEvent) {
-        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-          args[_key2 - 1] = arguments[_key2];
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
         }
 
         createAndFireEventInElementsChannel(eventCreator.apply(void 0, [_this.props, _this.state].concat(args)))(createAnalyticsEvent);
@@ -103,13 +115,13 @@ 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, _this$props, containerId, childObjectId, objectId, principalId, productKey, siteId, orgId, baseUrl, includeUsers, includeGroups, includeTeams, maxOptions, searchQueryFilter, onEmpty, productAttributes, intl, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, elapsedTimeMilli, displayedUsers, defaultUsers, _elapsedTimeMilli;
+      var _this$state, query, sessionId, closed, _this$props, containerId, childObjectId, objectId, principalId, productKey, siteId, orgId, baseUrl, includeUsers, includeGroups, includeTeams, maxOptions, searchQueryFilter, onEmpty, productAttributes, intl, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, elapsedTimeMilli, displayedUsers, 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;
+              _this$state = _this.state, query = _this$state.query, sessionId = _this$state.sessionId, closed = _this$state.closed;
               _this$props = _this.props, containerId = _this$props.containerId, childObjectId = _this$props.childObjectId, objectId = _this$props.objectId, principalId = _this$props.principalId, productKey = _this$props.productKey, siteId = _this$props.siteId, orgId = _this$props.orgId, baseUrl = _this$props.baseUrl, includeUsers = _this$props.includeUsers, includeGroups = _this$props.includeGroups, includeTeams = _this$props.includeTeams, maxOptions = _this$props.maxOptions, searchQueryFilter = _this$props.searchQueryFilter, onEmpty = _this$props.onEmpty, productAttributes = _this$props.productAttributes, intl = _this$props.intl;
               maxNumberOfResults = maxOptions || 100;
               startTime = window.performance.now();
@@ -207,22 +219,28 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
                 };
               });
 
-              _context.next = 40;
+              _context.next = 41;
               break;
 
             case 31:
               _context.prev = 31;
               _context.t4 = _context["catch"](5);
 
+              if (!closed) {
+                // If the user lookup fails while the menu is open, send UFO failure
+                // TODO handle with-option-failovers example here (falls back to alt data source)
+                _this.optionsShownUfoExperienceInstance.failure();
+              }
+
               _this.setState({
                 users: [],
                 error: true
               });
 
-              _context.next = 36;
+              _context.next = 37;
               return _this.props.onError ? _this.props.onError(_context.t4, recommendationsRequest) || Promise.resolve([]) : Promise.resolve([]);
 
-            case 36:
+            case 37:
               defaultUsers = _context.sent;
               _elapsedTimeMilli = window.performance.now() - startTime;
 
@@ -236,7 +254,7 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
                 productAttributes: productAttributes
               });
 
-            case 40:
+            case 41:
             case "end":
               return _context.stop();
           }
@@ -253,6 +271,12 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
       }
 
       if (!closed) {
+        // If the input has been typed into and the dropdown has not been closed
+        // (i.e. input blurred) then start the UFO timer.
+        // If there's a previous UFO timer running for the same "options shown" experience,
+        // it will be aborted first.
+        _this.startOptionsShownUfoExperience();
+
         _this.setState({
           loading: true,
           query: query,
@@ -309,6 +333,8 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
         closed: false
       };
 
+      _this.startOptionsShownUfoExperience();
+
       if (_this.state.users.length === 0) {
         state.sessionId = sessionId;
         state.loading = true;
@@ -330,7 +356,9 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (sessionId) {
-      _this.getUsers.cancel(); // clear old users if query is populated so that on refocus,
+      _this.getUsers.cancel();
+
+      _this.abortOptionsShownUfoExperience(); // clear old users if query is populated so that on refocus,
       // the old list is not shown
 
 
@@ -347,6 +375,7 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
       }
     });
 
+    _this.optionsShownUfoExperienceInstance = smartUserPickerOptionsShownUfoExperience.getInstance(props.inputId || props.fieldId);
     return _this;
   }
 
@@ -421,6 +450,12 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
 
       if ((this.state.sessionId !== prevState.sessionId || this.state.query !== prevState.query) && (this.state.query !== '' || !this.props.bootstrapOptions)) {
         this.getUsers();
+      } else if (!this.state.closed && !this.state.loading) {
+        // If the component has rendered (including its dropdown list) and it
+        // is not loading anything further, send the success UFO event
+        if (![UFOExperienceState.FAILED.id, UFOExperienceState.SUCCEEDED.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+          this.optionsShownUfoExperienceInstance.success();
+        }
       }
     }
   }, {

package/dist/esm/components/index.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import { SmartUserPicker } from './SmartUserPicker';
 import MessagesIntlProvider from './MessagesIntlProvider';
-import { useUFOConcurrentExperience, smartUserPickerRenderedUfoExperience } from '../ufoExperiences';
+import { useUFOConcurrentExperience, smartUserPickerRenderedUfoExperience, UfoErrorBoundary } from '../ufoExperiences';
 
 var SmartUserPickerWithIntlProvider = function SmartUserPickerWithIntlProvider(props) {
-  useUFOConcurrentExperience(smartUserPickerRenderedUfoExperience, props.inputId || props.fieldId);
-  return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(SmartUserPicker, props));
+  var ufoId = props.inputId || props.fieldId;
+  useUFOConcurrentExperience(smartUserPickerRenderedUfoExperience, ufoId);
+  return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+    id: ufoId
+  }, /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(SmartUserPicker, props)));
 };
 
 export default SmartUserPickerWithIntlProvider;

package/dist/esm/ufoExperiences.js

@@ -1,4 +1,15 @@
-import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience, UFOExperienceState } from '@atlaskit/ufo';
 import { useEffect, useState } from 'react';
 var COMPONENT_NAME = 'smart-user-picker';
 export var smartUserPickerRenderedUfoExperience = new ConcurrentExperience('smart-user-picker-rendered', {
@@ -8,6 +19,13 @@ export var smartUserPickerRenderedUfoExperience = new ConcurrentExperience('smar
   type: ExperienceTypes.Load,
   performanceType: ExperiencePerformanceTypes.PageSegmentLoad
 });
+export var smartUserPickerOptionsShownUfoExperience = new ConcurrentExperience('smart-user-picker-options-shown', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: ExperienceTypes.Operation,
+  performanceType: ExperiencePerformanceTypes.InlineResult
+});
 export var useUFOConcurrentExperience = function useUFOConcurrentExperience(experience, id) {
   var experienceForId = experience.getInstance(id); // Equivalent to componentWillMount - replace with @atlaskit/ufo's
   // useUFOComponentExperience when it supports ConcurrentExperience.
@@ -17,10 +35,40 @@ export var useUFOConcurrentExperience = function useUFOConcurrentExperience(expe
   }); // Replace with @atlaskit/ufo's <ExperienceSuccess> when it supports ConcurrentExperience
 
   useEffect(function () {
-    experienceForId.success();
+    if (experienceForId.state !== UFOExperienceState['FAILED']) {
+      experienceForId.success();
+    }
+
     return function () {
-      experienceForId.abort();
+      if ([UFOExperienceState['STARTED'], UFOExperienceState['IN_PROGRESS']].includes(experienceForId.state)) {
+        experienceForId.abort();
+      }
     }; // We only want this useEffect to run once after component mount, so no deps are needed.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-};
+};
+export var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(UfoErrorBoundary, _React$Component);
+
+  var _super = _createSuper(UfoErrorBoundary);
+
+  function UfoErrorBoundary() {
+    _classCallCheck(this, UfoErrorBoundary);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(UfoErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch() {
+      smartUserPickerRenderedUfoExperience.getInstance(this.props.id).failure();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
+
+  return UfoErrorBoundary;
+}(React.Component);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-user-picker",
-	"version": "5.0.0",
+	"version": "5.0.3",
 	"sideEffects": false
 }

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

@@ -1,10 +1,12 @@
 /// <reference types="lodash" />
 import React from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
+import { UFOExperience } from '@atlaskit/ufo';
 import { OptionData } from '@atlaskit/user-picker';
 import { Props, State, FilterOptions } from '../types';
 export declare class SmartUserPickerWithoutAnalytics extends React.Component<Props & WrappedComponentProps, State> {
     state: State;
+    optionsShownUfoExperienceInstance: UFOExperience;
     static defaultProps: {
         onError: () => void;
         baseUrl: string;
@@ -15,8 +17,11 @@ export declare class SmartUserPickerWithoutAnalytics extends React.Component<Pro
         principalId: string;
         debounceTime: number;
     };
+    constructor(props: Props & WrappedComponentProps);
     componentDidMount(): Promise<void>;
     componentDidUpdate(prevProps: Props, prevState: State): void;
+    abortOptionsShownUfoExperience: () => void;
+    startOptionsShownUfoExperience: () => void;
     private fireEvent;
     filterOptions: (users: OptionData[], query: string, propFilterOptions?: FilterOptions | undefined) => OptionData[];
     memoizedFilterOptions: import("memoize-one").MemoizedFn<(users: OptionData[], query: string, propFilterOptions?: FilterOptions | undefined) => OptionData[]>;

package/dist/types/types.d.ts

@@ -107,7 +107,7 @@ export interface SmartProps {
      */
     filterOptions?: FilterOptions;
     /**
-     * Whether to include groups in the resultset. @default false
+     * Whether to include groups in the resultset. Only supported for Confluence. @default false
      */
     includeGroups?: boolean;
     /**

package/dist/types/ufoExperiences.d.ts

@@ -1,3 +1,11 @@
+import React from 'react';
 import { ConcurrentExperience } from '@atlaskit/ufo';
 export declare const smartUserPickerRenderedUfoExperience: ConcurrentExperience;
+export declare const smartUserPickerOptionsShownUfoExperience: ConcurrentExperience;
 export declare const useUFOConcurrentExperience: (experience: ConcurrentExperience, id: string) => void;
+export declare class UfoErrorBoundary extends React.Component<{
+    id: string;
+}> {
+    componentDidCatch(): void;
+    render(): React.ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-user-picker",
-  "version": "5.0.0",
+  "version": "5.0.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -24,7 +24,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/ufo": "^0.1.0",
-    "@atlaskit/user-picker": "^8.6.3",
+    "@atlaskit/user-picker": "^9.0.0",
     "@babel/runtime": "^7.0.0",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
@@ -36,7 +36,7 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/modal-dialog": "^12.2.0",