@atlaskit/user-picker 8.6.0 → 8.6.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/user-picker
 
+## 8.6.1
+
+### Patch Changes
+
+- [`9cadd6e79ac`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9cadd6e79ac) - Add in UFO events
+
 ## 8.6.0
 
 ### Minor Changes

package/dist/cjs/analytics.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _v = _interopRequireDefault(require("uuid/v4"));
+var _uuid = require("uuid");
 
 var _version = require("./version.json");
 
@@ -27,7 +27,7 @@ var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}/;
 
 var startSession = function startSession() {
   return {
-    id: (0, _v.default)(),
+    id: (0, _uuid.v4)(),
     start: Date.now(),
     inputChangeTime: Date.now(),
     upCount: 0,

package/dist/cjs/components/UserPicker.js

@@ -43,6 +43,10 @@ var _MessagesIntlProvider = _interopRequireDefault(require("./MessagesIntlProvid
 
 var _UserSourceProvider = require("./../clients/UserSourceProvider");
 
+var _utils = require("./utils");
+
+var _uuid = require("uuid");
+
 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; }
@@ -60,12 +64,32 @@ var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(UserPickerWithoutAnalytics);
 
-  function UserPickerWithoutAnalytics() {
+  function UserPickerWithoutAnalytics(props) {
+    var _this;
+
     (0, _classCallCheck2.default)(this, UserPickerWithoutAnalytics);
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.ufoId = (0, _uuid.v4)();
+
+    if (_this.ufoId) {
+      var experienceForId = _utils.userPickerRenderedUfoExperience.getInstance(_this.ufoId);
+
+      experienceForId.start();
+    }
+
+    return _this;
   }
 
   (0, _createClass2.default)(UserPickerWithoutAnalytics, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.ufoId) {
+        var experienceForId = _utils.userPickerRenderedUfoExperience.getInstance(this.ufoId);
+
+        experienceForId.success();
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props = this.props,

package/dist/cjs/components/smart-user-picker/components/index.js

@@ -32,7 +32,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
-var _v = _interopRequireDefault(require("uuid/v4"));
+var _uuid = require("uuid");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -523,7 +523,7 @@ var SmartUserPicker = /*#__PURE__*/function (_React$Component) {
                 prefetch = this.props.prefetch;
 
                 if (prefetch) {
-                  sessionId = (0, _v.default)();
+                  sessionId = (0, _uuid.v4)();
                   this.fireEvent(_analytics.mountedWithPrefetchEvent, {
                     sessionId: sessionId
                   });

package/dist/cjs/components/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.optionToSelectableOptions = exports.optionToSelectableOption = exports.isUser = exports.isTeam = exports.isSingleValue = exports.isPopupUserPickerByProps = exports.isPopupUserPickerByComponent = exports.isIterable = exports.isGroup = exports.isExternalUser = exports.isEmail = exports.isChildInput = exports.hasValue = exports.getOptions = exports.getAvatarUrl = exports.getAvatarSize = exports.extractOptionValue = exports.callCallback = void 0;
+exports.userPickerRenderedUfoExperience = exports.optionToSelectableOptions = exports.optionToSelectableOption = exports.isUser = exports.isTeam = exports.isSingleValue = exports.isPopupUserPickerByProps = exports.isPopupUserPickerByComponent = exports.isIterable = exports.isGroup = exports.isExternalUser = exports.isEmail = exports.isChildInput = exports.hasValue = exports.getOptions = exports.getAvatarUrl = exports.getAvatarSize = exports.extractOptionValue = exports.callCallback = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -17,6 +17,8 @@ var _types = require("../types");
 
 var _select = require("@atlaskit/select");
 
+var _ufo = require("@atlaskit/ufo");
+
 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; }
@@ -176,4 +178,13 @@ var isPopupUserPickerByProps = function isPopupUserPickerByProps(selectProps) {
   return selectProps.searchThreshold === -1;
 };
 
-exports.isPopupUserPickerByProps = isPopupUserPickerByProps;
+exports.isPopupUserPickerByProps = isPopupUserPickerByProps;
+var COMPONENT_NAME = 'user-picker';
+var userPickerRenderedUfoExperience = new _ufo.ConcurrentExperience('user-picker-rendered', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: _ufo.ExperienceTypes.Load,
+  performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
+});
+exports.userPickerRenderedUfoExperience = userPickerRenderedUfoExperience;

package/dist/cjs/version.json

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

package/dist/es2019/analytics.js

@@ -1,12 +1,12 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
-import uuid from 'uuid/v4';
+import { v4 as uuidv4 } from 'uuid';
 import { name as packageName, version as packageVersion } from './version.json';
 import { isExternalUser } from './components/utils';
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}/;
 export const startSession = () => ({
-  id: uuid(),
+  id: uuidv4(),
   start: Date.now(),
   inputChangeTime: Date.now(),
   upCount: 0,

package/dist/es2019/components/UserPicker.js

@@ -10,7 +10,26 @@ import { getCreatableProps } from './creatable';
 import { getCreatableSuggestedEmailProps } from './creatableEmailSuggestion';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { ExusUserSourceProvider } from './../clients/UserSourceProvider';
+import { userPickerRenderedUfoExperience as experience } from './utils';
+import { v4 as uuidv4 } from 'uuid';
 export class UserPickerWithoutAnalytics extends React.Component {
+  constructor(props) {
+    super(props);
+    this.ufoId = uuidv4();
+
+    if (this.ufoId) {
+      const experienceForId = experience.getInstance(this.ufoId);
+      experienceForId.start();
+    }
+  }
+
+  componentDidMount() {
+    if (this.ufoId) {
+      const experienceForId = experience.getInstance(this.ufoId);
+      experienceForId.success();
+    }
+  }
+
   render() {
     const {
       emailLabel,

package/dist/es2019/components/smart-user-picker/components/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import debounce from 'lodash/debounce';
-import uuidV4 from 'uuid/v4';
+import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import memoizeOne from 'memoize-one';
 import { injectIntl } from 'react-intl-next';
@@ -338,7 +338,7 @@ class SmartUserPicker extends React.Component {
     } = this.props;
 
     if (prefetch) {
-      const sessionId = uuidV4();
+      const sessionId = uuidv4();
       this.fireEvent(mountedWithPrefetchEvent, {
         sessionId
       });

package/dist/es2019/components/utils.js

@@ -1,6 +1,7 @@
 import memoizeOne from 'memoize-one';
 import { EmailType, TeamType, GroupType, UserType } from '../types';
 import { PopupSelect } from '@atlaskit/select';
+import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
 export const isExternalUser = option => isUser(option) && Boolean(option.isExternal);
 export const isUser = option => option.type === undefined || option.type === UserType;
 export const isTeam = option => option.type === TeamType;
@@ -75,4 +76,12 @@ export const getAvatarUrl = optionData => {
   return undefined;
 };
 export const isPopupUserPickerByComponent = SelectComponent => SelectComponent === PopupSelect;
-export const isPopupUserPickerByProps = selectProps => selectProps.searchThreshold === -1;
+export const isPopupUserPickerByProps = selectProps => selectProps.searchThreshold === -1;
+const COMPONENT_NAME = 'user-picker';
+export const userPickerRenderedUfoExperience = new ConcurrentExperience('user-picker-rendered', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: ExperienceTypes.Load,
+  performanceType: ExperiencePerformanceTypes.PageSegmentLoad
+});

package/dist/es2019/version.json

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

package/dist/esm/analytics.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { _defineProperty(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; }
 
 import { createAndFireEvent } from '@atlaskit/analytics-next';
-import uuid from 'uuid/v4';
+import { v4 as uuidv4 } from 'uuid';
 import { name as packageName, version as packageVersion } from './version.json';
 import { isExternalUser } from './components/utils';
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
@@ -13,7 +13,7 @@ var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-f
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}/;
 export var startSession = function startSession() {
   return {
-    id: uuid(),
+    id: uuidv4(),
     start: Date.now(),
     inputChangeTime: Date.now(),
     upCount: 0,

package/dist/esm/components/UserPicker.js

@@ -24,18 +24,38 @@ import { getCreatableProps } from './creatable';
 import { getCreatableSuggestedEmailProps } from './creatableEmailSuggestion';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { ExusUserSourceProvider } from './../clients/UserSourceProvider';
+import { userPickerRenderedUfoExperience as experience } from './utils';
+import { v4 as uuidv4 } from 'uuid';
 export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   _inherits(UserPickerWithoutAnalytics, _React$Component);
 
   var _super = _createSuper(UserPickerWithoutAnalytics);
 
-  function UserPickerWithoutAnalytics() {
+  function UserPickerWithoutAnalytics(props) {
+    var _this;
+
     _classCallCheck(this, UserPickerWithoutAnalytics);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.ufoId = uuidv4();
+
+    if (_this.ufoId) {
+      var experienceForId = experience.getInstance(_this.ufoId);
+      experienceForId.start();
+    }
+
+    return _this;
   }
 
   _createClass(UserPickerWithoutAnalytics, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.ufoId) {
+        var experienceForId = experience.getInstance(this.ufoId);
+        experienceForId.success();
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props = this.props,

package/dist/esm/components/smart-user-picker/components/index.js

@@ -19,7 +19,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import debounce from 'lodash/debounce';
-import uuidV4 from 'uuid/v4';
+import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import memoizeOne from 'memoize-one';
 import { injectIntl } from 'react-intl-next';
@@ -502,7 +502,7 @@ var SmartUserPicker = /*#__PURE__*/function (_React$Component) {
                 prefetch = this.props.prefetch;
 
                 if (prefetch) {
-                  sessionId = uuidV4();
+                  sessionId = uuidv4();
                   this.fireEvent(mountedWithPrefetchEvent, {
                     sessionId: sessionId
                   });

package/dist/esm/components/utils.js

@@ -8,6 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import memoizeOne from 'memoize-one';
 import { EmailType, TeamType, GroupType, UserType } from '../types';
 import { PopupSelect } from '@atlaskit/select';
+import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
 export var isExternalUser = function isExternalUser(option) {
   return isUser(option) && Boolean(option.isExternal);
 };
@@ -115,4 +116,12 @@ export var isPopupUserPickerByComponent = function isPopupUserPickerByComponent(
 };
 export var isPopupUserPickerByProps = function isPopupUserPickerByProps(selectProps) {
   return selectProps.searchThreshold === -1;
-};
+};
+var COMPONENT_NAME = 'user-picker';
+export var userPickerRenderedUfoExperience = new ConcurrentExperience('user-picker-rendered', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: ExperienceTypes.Load,
+  performanceType: ExperiencePerformanceTypes.PageSegmentLoad
+});

package/dist/esm/version.json

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

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import { UserPickerProps } from '../types';
 export declare class UserPickerWithoutAnalytics extends React.Component<UserPickerProps> {
+    ufoId: string;
+    constructor(props: UserPickerProps);
     static defaultProps: {
         width: number;
         isMulti: boolean;
     };
+    componentDidMount(): void;
     render(): JSX.Element;
 }
 export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Pick<UserPickerProps, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions">, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions"> & Partial<Pick<Pick<UserPickerProps, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions">, "isMulti" | "width">> & Partial<Pick<{

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

@@ -1,5 +1,6 @@
 import { ReactChild, ReactElement } from 'react';
 import { AtlaskitSelectValue, ExternalUser, Email, Option, OptionData, Promisable, Team, Group, User, OptionIdentifier, DefaultValue } from '../types';
+import { ConcurrentExperience } from '@atlaskit/ufo';
 export declare const isExternalUser: (option: OptionData) => option is ExternalUser;
 export declare const isUser: (option: OptionData) => option is User;
 export declare const isTeam: (option: OptionData) => option is Team;
@@ -24,3 +25,4 @@ export declare const callCallback: <U extends any[], R>(callback: ((...U: U) =>
 export declare const getAvatarUrl: (optionData: OptionData) => string | undefined;
 export declare const isPopupUserPickerByComponent: (SelectComponent: React.ComponentClass<any>) => boolean;
 export declare const isPopupUserPickerByProps: (selectProps: any) => boolean;
+export declare const userPickerRenderedUfoExperience: ConcurrentExperience;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "8.6.0",
+  "version": "8.6.1",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,6 +37,7 @@
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.6.0",
     "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",