@atlaskit/link-picker 1.10.3 → 1.10.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-picker
 
+## 1.10.4
+
+### Patch Changes
+
+- [`a3358adb9f1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a3358adb9f1) - Basic UFO Instrumentation for LinkPicker
+
 ## 1.10.3
 
 ### Patch Changes

package/dist/cjs/common/analytics/experiences.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ufoExperience = exports.succeedUfoExperience = exports.startUfoExperience = exports.failUfoExperience = exports.abortUfoExperience = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _ufo = require("@atlaskit/ufo");
+
+var ufoExperience = {
+  mounted: 'component-mounted'
+};
+exports.ufoExperience = ufoExperience;
+var ufoExperiences = (0, _defineProperty2.default)({}, ufoExperience.mounted, new _ufo.ConcurrentExperience(ufoExperience.mounted, {
+  type: _ufo.ExperienceTypes.Load,
+  performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad,
+  platform: {
+    component: 'link-picker'
+  }
+}));
+
+var startUfoExperience = function startUfoExperience(experienceName, id, metadata) {
+  var experience = ufoExperiences[experienceName].getInstance(id);
+  experience.start();
+
+  if (metadata) {
+    experience.addMetadata(metadata);
+  }
+};
+
+exports.startUfoExperience = startUfoExperience;
+
+var succeedUfoExperience = function succeedUfoExperience(experienceName, id, metadata) {
+  var experience = ufoExperiences[experienceName].getInstance(id);
+  experience.success({
+    metadata: metadata
+  });
+};
+
+exports.succeedUfoExperience = succeedUfoExperience;
+
+var failUfoExperience = function failUfoExperience(experienceName, id, metadata) {
+  var experience = ufoExperiences[experienceName].getInstance(id);
+  experience.failure({
+    metadata: metadata
+  });
+};
+
+exports.failUfoExperience = failUfoExperience;
+
+var abortUfoExperience = function abortUfoExperience(experienceName, id, metadata) {
+  var experience = ufoExperiences[experienceName].getInstance(id);
+  experience.abort({
+    metadata: metadata
+  });
+};
+
+exports.abortUfoExperience = abortUfoExperience;

package/dist/cjs/controllers/session-provider/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLinkPickerSessionId = exports.SessionContext = exports.LinkPickerSessionProvider = exports.INIT_CONTEXT = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _uuid = require("uuid");
+
+var _experiences = require("../../common/analytics/experiences");
+
+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; }
+
+var INIT_CONTEXT = 'SESSION_UNINITIALIZED';
+exports.INIT_CONTEXT = INIT_CONTEXT;
+var SessionContext = /*#__PURE__*/(0, _react.createContext)(INIT_CONTEXT);
+exports.SessionContext = SessionContext;
+
+var useConstructor = function useConstructor(callback) {
+  var hasBeenFired = (0, _react.useRef)(false);
+
+  if (!hasBeenFired.current) {
+    callback();
+    hasBeenFired.current = true;
+  }
+
+  return null;
+};
+
+var LinkPickerSessionProvider = function LinkPickerSessionProvider(_ref) {
+  var children = _ref.children;
+
+  var _useRef = (0, _react.useRef)((0, _uuid.v4)()),
+      sessionId = _useRef.current;
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      return (0, _experiences.abortUfoExperience)(_experiences.ufoExperience.mounted, sessionId);
+    };
+  }, [sessionId]);
+  useConstructor(function () {
+    return (0, _experiences.startUfoExperience)(_experiences.ufoExperience.mounted, sessionId);
+  });
+  return /*#__PURE__*/_react.default.createElement(SessionContext.Provider, {
+    value: sessionId
+  }, children);
+};
+
+exports.LinkPickerSessionProvider = LinkPickerSessionProvider;
+
+var useLinkPickerSessionId = function useLinkPickerSessionId() {
+  return (0, _react.useContext)(SessionContext);
+};
+
+exports.useLinkPickerSessionId = useLinkPickerSessionId;

package/dist/cjs/ui/error-boundary/error-boundary-base/index.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseErrorBoundary = 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"));
+
+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; } }
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var BaseErrorBoundary = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(BaseErrorBoundary, _Component);
+
+  var _super = _createSuper(BaseErrorBoundary);
+
+  function BaseErrorBoundary(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, BaseErrorBoundary);
+    _this = _super.call(this, props);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(BaseErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      var onError = this.props.onError;
+      onError && onError(error, info);
+      this.setState({
+        hasError: true
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          ErrorComponent = _this$props.ErrorComponent;
+      var hasError = this.state.hasError;
+
+      if (hasError && ErrorComponent) {
+        return /*#__PURE__*/_react.default.createElement(ErrorComponent, null);
+      }
+
+      return children;
+    }
+  }]);
+  return BaseErrorBoundary;
+}(_react.Component);
+
+exports.BaseErrorBoundary = BaseErrorBoundary;

package/dist/cjs/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js

@@ -13,9 +13,9 @@ var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _genericErrorSvg = _interopRequireDefault(require("../../common/generic-error-svg"));
+var _genericErrorSvg = _interopRequireDefault(require("../../../common/generic-error-svg"));
 
-var _styled = require("../link-picker/styled");
+var _styled = require("../../link-picker/styled");
 
 /** @jsx jsx */
 var messages = (0, _reactIntlNext.defineMessages)({

package/dist/cjs/ui/error-boundary/index.js

@@ -7,98 +7,50 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.BaseErrorBoundary = void 0;
+exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _analytics = _interopRequireDefault(require("../../analytics.codegen"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _constants = require("../../common/constants");
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _experiences = require("../../common/analytics/experiences");
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _sessionProvider = require("../../controllers/session-provider");
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _errorBoundaryFallback = require("./error-boundary-fallback");
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _analyticsNext = require("@atlaskit/analytics-next");
-
-var _analytics = _interopRequireDefault(require("../../analytics.codegen"));
+var _errorBoundaryBase = require("./error-boundary-base");
 
 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; } }
-
-// eslint-disable-next-line @repo/internal/react/no-class-components
-var BaseErrorBoundary = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(BaseErrorBoundary, _Component);
-
-  var _super = _createSuper(BaseErrorBoundary);
-
-  function BaseErrorBoundary(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, BaseErrorBoundary);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireAnalytics", function (analyticsErrorPayload) {
-      var _window, _window$navigator, _analyticsErrorPayloa, _analyticsErrorPayloa2;
-
-      var _this$props = _this.props,
-          createAnalyticsEvent = _this$props.createAnalyticsEvent,
-          channel = _this$props.channel;
-      createAnalyticsEvent((0, _analytics.default)('ui.linkPicker.unhandledErrorCaught', {
-        browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
-        error: analyticsErrorPayload.error.toString(),
-        componentStack: (_analyticsErrorPayloa = (_analyticsErrorPayloa2 = analyticsErrorPayload.info) === null || _analyticsErrorPayloa2 === void 0 ? void 0 : _analyticsErrorPayloa2.componentStack) !== null && _analyticsErrorPayloa !== void 0 ? _analyticsErrorPayloa : ''
-      })).fire(channel);
-    });
-    _this.state = {
-      hasError: false
-    };
-    return _this;
-  }
-
-  (0, _createClass2.default)(BaseErrorBoundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error, info) {
-      var onError = this.props.onError;
-      var payload = {
-        error: error,
-        info: info
-      };
-      this.fireAnalytics(payload);
-      onError && onError(error, info);
-      this.setState({
-        hasError: true
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          children = _this$props2.children,
-          ErrorComponent = _this$props2.ErrorComponent;
-      var hasError = this.state.hasError;
-
-      if (hasError && ErrorComponent) {
-        return /*#__PURE__*/_react.default.createElement(ErrorComponent, null);
-      }
-
-      return children;
-    }
-  }]);
-  return BaseErrorBoundary;
-}(_react.Component);
-
-exports.BaseErrorBoundary = BaseErrorBoundary;
-var ErrorBoundary = (0, _analyticsNext.withAnalyticsEvents)()(BaseErrorBoundary);
-var _default = ErrorBoundary;
+function ErrorBoundary(_ref) {
+  var children = _ref.children,
+      createAnalyticsEvent = _ref.createAnalyticsEvent;
+  var linkPickerSessionId = (0, _sessionProvider.useLinkPickerSessionId)();
+  var handleError = (0, _react.useCallback)(function (error, info) {
+    var _window, _window$navigator, _info$componentStack;
+
+    // Fire Analytics event
+    createAnalyticsEvent((0, _analytics.default)('ui.linkPicker.unhandledErrorCaught', {
+      browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
+      error: error.toString(),
+      componentStack: (_info$componentStack = info === null || info === void 0 ? void 0 : info.componentStack) !== null && _info$componentStack !== void 0 ? _info$componentStack : ''
+    })).fire(_constants.ANALYTICS_CHANNEL); // Fire UFO failed experience
+
+    (0, _experiences.failUfoExperience)(_experiences.ufoExperience.mounted, linkPickerSessionId);
+  }, [createAnalyticsEvent, linkPickerSessionId]);
+  return /*#__PURE__*/_react.default.createElement(_errorBoundaryBase.BaseErrorBoundary, {
+    onError: handleError,
+    ErrorComponent: _errorBoundaryFallback.ErrorBoundaryFallback
+  }, children);
+}
+
+var _default = (0, _analyticsNext.withAnalyticsEvents)()(ErrorBoundary);
+
 exports.default = _default;

package/dist/cjs/ui/index.js

@@ -9,22 +9,22 @@ exports.PACKAGE_DATA = exports.ComposedLinkPicker = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
+var _analyticsNext = require("@atlaskit/analytics-next");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactLooselyLazy = require("react-loosely-lazy");
 
-var _analyticsNext = require("@atlaskit/analytics-next");
-
 var _constants = require("../common/constants");
 
 var _version = require("../version.json");
 
 var _errorBoundary = _interopRequireDefault(require("./error-boundary"));
 
-var _errorBoundaryFallback = require("./error-boundary-fallback");
-
 var _loaderFallback = require("./loader-fallback");
 
+var _sessionProvider = require("../controllers/session-provider");
+
 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 || (0, _typeof2.default)(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; }
@@ -44,11 +44,8 @@ var LazyLinkPicker = (0, _reactLooselyLazy.lazyForPaint)(function () {
 var ComposedLinkPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: PACKAGE_DATA
-  }, /*#__PURE__*/_react.default.createElement(_errorBoundary.default, {
-    channel: _constants.ANALYTICS_CHANNEL,
-    ErrorComponent: _errorBoundaryFallback.ErrorBoundaryFallback
-  }, /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
+  }, /*#__PURE__*/_react.default.createElement(_sessionProvider.LinkPickerSessionProvider, null, /*#__PURE__*/_react.default.createElement(_errorBoundary.default, null, /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
     fallback: _loaderFallback.LoaderFallback
-  }, /*#__PURE__*/_react.default.createElement(LazyLinkPicker, props))));
+  }, /*#__PURE__*/_react.default.createElement(LazyLinkPicker, props)))));
 });
 exports.ComposedLinkPicker = ComposedLinkPicker;

package/dist/cjs/ui/link-picker/index.js

@@ -61,6 +61,10 @@ var _formFooter = _interopRequireWildcard(require("./form-footer"));
 
 var _utils = require("./utils");
 
+var _experiences = require("../../common/analytics/experiences");
+
+var _sessionProvider = require("../../controllers/session-provider");
+
 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; }
@@ -173,6 +177,10 @@ function LinkPicker(_ref) {
       trackAttribute = _useLinkPickerAnalyti.trackAttribute,
       getAttributes = _useLinkPickerAnalyti.getAttributes;
 
+  var linkPickerSessionId = (0, _sessionProvider.useLinkPickerSessionId)();
+  (0, _react.useLayoutEffect)(function () {
+    (0, _experiences.succeedUfoExperience)(_experiences.ufoExperience.mounted, linkPickerSessionId);
+  }, [linkPickerSessionId]);
   (0, _react.useEffect)(function () {
     // Anything in here is fired on component mount.
     var event = createAnalyticsEvent((0, _analytics.default)('ui.inlineDialog.viewed.linkPicker', {}));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.10.3",
+	"version": "1.10.4",
 	"sideEffects": false
 }

package/dist/es2019/common/analytics/experiences.js

@@ -0,0 +1,39 @@
+import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+export const ufoExperience = {
+  mounted: 'component-mounted'
+};
+const ufoExperiences = {
+  [ufoExperience.mounted]: new ConcurrentExperience(ufoExperience.mounted, {
+    type: ExperienceTypes.Load,
+    performanceType: ExperiencePerformanceTypes.PageSegmentLoad,
+    platform: {
+      component: 'link-picker'
+    }
+  })
+};
+export const startUfoExperience = (experienceName, id, metadata) => {
+  const experience = ufoExperiences[experienceName].getInstance(id);
+  experience.start();
+
+  if (metadata) {
+    experience.addMetadata(metadata);
+  }
+};
+export const succeedUfoExperience = (experienceName, id, metadata) => {
+  const experience = ufoExperiences[experienceName].getInstance(id);
+  experience.success({
+    metadata
+  });
+};
+export const failUfoExperience = (experienceName, id, metadata) => {
+  const experience = ufoExperiences[experienceName].getInstance(id);
+  experience.failure({
+    metadata
+  });
+};
+export const abortUfoExperience = (experienceName, id, metadata) => {
+  const experience = ufoExperiences[experienceName].getInstance(id);
+  experience.abort({
+    metadata
+  });
+};

package/dist/es2019/controllers/session-provider/index.js

@@ -0,0 +1,32 @@
+import React, { createContext, useContext, useEffect, useRef } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { abortUfoExperience, startUfoExperience, ufoExperience } from '../../common/analytics/experiences';
+export const INIT_CONTEXT = 'SESSION_UNINITIALIZED';
+export const SessionContext = /*#__PURE__*/createContext(INIT_CONTEXT);
+
+const useConstructor = callback => {
+  const hasBeenFired = useRef(false);
+
+  if (!hasBeenFired.current) {
+    callback();
+    hasBeenFired.current = true;
+  }
+
+  return null;
+};
+
+export const LinkPickerSessionProvider = ({
+  children
+}) => {
+  const {
+    current: sessionId
+  } = useRef(uuidv4());
+  useEffect(() => {
+    return () => abortUfoExperience(ufoExperience.mounted, sessionId);
+  }, [sessionId]);
+  useConstructor(() => startUfoExperience(ufoExperience.mounted, sessionId));
+  return /*#__PURE__*/React.createElement(SessionContext.Provider, {
+    value: sessionId
+  }, children);
+};
+export const useLinkPickerSessionId = () => useContext(SessionContext);

package/dist/es2019/ui/error-boundary/error-boundary-base/index.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class BaseErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+
+  componentDidCatch(error, info) {
+    const {
+      onError
+    } = this.props;
+    onError && onError(error, info);
+    this.setState({
+      hasError: true
+    });
+  }
+
+  render() {
+    const {
+      children,
+      ErrorComponent
+    } = this.props;
+    const {
+      hasError
+    } = this.state;
+
+    if (hasError && ErrorComponent) {
+      return /*#__PURE__*/React.createElement(ErrorComponent, null);
+    }
+
+    return children;
+  }
+
+}

package/dist/es2019/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js

@@ -2,8 +2,8 @@
 import { jsx } from '@emotion/react';
 import EmptyState from '@atlaskit/empty-state';
 import { defineMessages, useIntl } from 'react-intl-next';
-import GenericErrorSVG from '../../common/generic-error-svg';
-import { rootContainerStyles } from '../link-picker/styled';
+import GenericErrorSVG from '../../../common/generic-error-svg';
+import { rootContainerStyles } from '../../link-picker/styled';
 const messages = defineMessages({
   heading: {
     defaultMessage: 'Something went wrong!',

package/dist/es2019/ui/error-boundary/index.js

@@ -1,62 +1,33 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import createEventPayload from '../../analytics.codegen';
-// eslint-disable-next-line @repo/internal/react/no-class-components
-export class BaseErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "fireAnalytics", analyticsErrorPayload => {
-      var _window, _window$navigator, _analyticsErrorPayloa, _analyticsErrorPayloa2;
-
-      const {
-        createAnalyticsEvent,
-        channel
-      } = this.props;
-      createAnalyticsEvent(createEventPayload('ui.linkPicker.unhandledErrorCaught', {
-        browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
-        error: analyticsErrorPayload.error.toString(),
-        componentStack: (_analyticsErrorPayloa = (_analyticsErrorPayloa2 = analyticsErrorPayload.info) === null || _analyticsErrorPayloa2 === void 0 ? void 0 : _analyticsErrorPayloa2.componentStack) !== null && _analyticsErrorPayloa !== void 0 ? _analyticsErrorPayloa : ''
-      })).fire(channel);
-    });
-
-    this.state = {
-      hasError: false
-    };
-  }
-
-  componentDidCatch(error, info) {
-    const {
-      onError
-    } = this.props;
-    const payload = {
-      error,
-      info
-    };
-    this.fireAnalytics(payload);
-    onError && onError(error, info);
-    this.setState({
-      hasError: true
-    });
-  }
-
-  render() {
-    const {
-      children,
-      ErrorComponent
-    } = this.props;
-    const {
-      hasError
-    } = this.state;
-
-    if (hasError && ErrorComponent) {
-      return /*#__PURE__*/React.createElement(ErrorComponent, null);
-    }
-
-    return children;
-  }
-
+import { ANALYTICS_CHANNEL } from '../../common/constants';
+import { failUfoExperience, ufoExperience } from '../../common/analytics/experiences';
+import { useLinkPickerSessionId } from '../../controllers/session-provider';
+import { ErrorBoundaryFallback } from './error-boundary-fallback';
+import { BaseErrorBoundary } from './error-boundary-base';
+
+function ErrorBoundary({
+  children,
+  createAnalyticsEvent
+}) {
+  const linkPickerSessionId = useLinkPickerSessionId();
+  const handleError = useCallback((error, info) => {
+    var _window, _window$navigator, _info$componentStack;
+
+    // Fire Analytics event
+    createAnalyticsEvent(createEventPayload('ui.linkPicker.unhandledErrorCaught', {
+      browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
+      error: error.toString(),
+      componentStack: (_info$componentStack = info === null || info === void 0 ? void 0 : info.componentStack) !== null && _info$componentStack !== void 0 ? _info$componentStack : ''
+    })).fire(ANALYTICS_CHANNEL); // Fire UFO failed experience
+
+    failUfoExperience(ufoExperience.mounted, linkPickerSessionId);
+  }, [createAnalyticsEvent, linkPickerSessionId]);
+  return /*#__PURE__*/React.createElement(BaseErrorBoundary, {
+    onError: handleError,
+    ErrorComponent: ErrorBoundaryFallback
+  }, children);
 }
-const ErrorBoundary = withAnalyticsEvents()(BaseErrorBoundary);
-export default ErrorBoundary;
+
+export default withAnalyticsEvents()(ErrorBoundary);

package/dist/es2019/ui/index.js

@@ -1,11 +1,11 @@
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 import React, { memo } from 'react';
 import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
-import { AnalyticsContext } from '@atlaskit/analytics-next';
-import { COMPONENT_NAME, ANALYTICS_CHANNEL } from '../common/constants';
+import { COMPONENT_NAME } from '../common/constants';
 import { name as packageName, version as packageVersion } from '../version.json';
 import ErrorBoundary from './error-boundary';
-import { ErrorBoundaryFallback } from './error-boundary-fallback';
 import { LoaderFallback } from './loader-fallback';
+import { LinkPickerSessionProvider } from '../controllers/session-provider';
 export const PACKAGE_DATA = {
   packageName,
   packageVersion,
@@ -17,9 +17,6 @@ const LazyLinkPicker = lazyForPaint(() => import(
 './link-picker'));
 export const ComposedLinkPicker = /*#__PURE__*/memo(props => /*#__PURE__*/React.createElement(AnalyticsContext, {
   data: PACKAGE_DATA
-}, /*#__PURE__*/React.createElement(ErrorBoundary, {
-  channel: ANALYTICS_CHANNEL,
-  ErrorComponent: ErrorBoundaryFallback
-}, /*#__PURE__*/React.createElement(LazySuspense, {
+}, /*#__PURE__*/React.createElement(LinkPickerSessionProvider, null, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(LazySuspense, {
   fallback: LoaderFallback
-}, /*#__PURE__*/React.createElement(LazyLinkPicker, props)))));
+}, /*#__PURE__*/React.createElement(LazyLinkPicker, props))))));

package/dist/es2019/ui/link-picker/index.js

@@ -24,6 +24,8 @@ import LinkSearchList, { testIds as listTestIds } from './link-search-list';
 import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
 import FormFooter, { testIds as formFooterTestIds } from './form-footer';
 import { getDataSource, getScreenReaderText } from './utils';
+import { succeedUfoExperience, ufoExperience } from '../../common/analytics/experiences';
+import { useLinkPickerSessionId } from '../../controllers/session-provider';
 export const RECENT_SEARCH_LIST_SIZE = 5;
 export const testIds = {
   linkPicker: 'link-picker',
@@ -123,6 +125,10 @@ function LinkPicker({
     trackAttribute,
     getAttributes
   } = useLinkPickerAnalytics();
+  const linkPickerSessionId = useLinkPickerSessionId();
+  useLayoutEffect(() => {
+    succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
+  }, [linkPickerSessionId]);
   useEffect(() => {
     // Anything in here is fired on component mount.
     const event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {}));

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.10.3",
+	"version": "1.10.4",
 	"sideEffects": false
 }

package/dist/esm/common/analytics/experiences.js

@@ -0,0 +1,40 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+export var ufoExperience = {
+  mounted: 'component-mounted'
+};
+
+var ufoExperiences = _defineProperty({}, ufoExperience.mounted, new ConcurrentExperience(ufoExperience.mounted, {
+  type: ExperienceTypes.Load,
+  performanceType: ExperiencePerformanceTypes.PageSegmentLoad,
+  platform: {
+    component: 'link-picker'
+  }
+}));
+
+export var startUfoExperience = function startUfoExperience(experienceName, id, metadata) {
+  var experience = ufoExperiences[experienceName].getInstance(id);
+  experience.start();
+
+  if (metadata) {
+    experience.addMetadata(metadata);
+  }
+};
+export var succeedUfoExperience = function succeedUfoExperience(experienceName, id, metadata) {
+  var experience = ufoExperiences[experienceName].getInstance(id);
+  experience.success({
+    metadata: metadata
+  });
+};
+export var failUfoExperience = function failUfoExperience(experienceName, id, metadata) {
+  var experience = ufoExperiences[experienceName].getInstance(id);
+  experience.failure({
+    metadata: metadata
+  });
+};
+export var abortUfoExperience = function abortUfoExperience(experienceName, id, metadata) {
+  var experience = ufoExperiences[experienceName].getInstance(id);
+  experience.abort({
+    metadata: metadata
+  });
+};

package/dist/esm/controllers/session-provider/index.js

@@ -0,0 +1,38 @@
+import React, { createContext, useContext, useEffect, useRef } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { abortUfoExperience, startUfoExperience, ufoExperience } from '../../common/analytics/experiences';
+export var INIT_CONTEXT = 'SESSION_UNINITIALIZED';
+export var SessionContext = /*#__PURE__*/createContext(INIT_CONTEXT);
+
+var useConstructor = function useConstructor(callback) {
+  var hasBeenFired = useRef(false);
+
+  if (!hasBeenFired.current) {
+    callback();
+    hasBeenFired.current = true;
+  }
+
+  return null;
+};
+
+export var LinkPickerSessionProvider = function LinkPickerSessionProvider(_ref) {
+  var children = _ref.children;
+
+  var _useRef = useRef(uuidv4()),
+      sessionId = _useRef.current;
+
+  useEffect(function () {
+    return function () {
+      return abortUfoExperience(ufoExperience.mounted, sessionId);
+    };
+  }, [sessionId]);
+  useConstructor(function () {
+    return startUfoExperience(ufoExperience.mounted, sessionId);
+  });
+  return /*#__PURE__*/React.createElement(SessionContext.Provider, {
+    value: sessionId
+  }, children);
+};
+export var useLinkPickerSessionId = function useLinkPickerSessionId() {
+  return useContext(SessionContext);
+};

package/dist/esm/ui/error-boundary/error-boundary-base/index.js

@@ -0,0 +1,56 @@
+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, { Component } from 'react';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var BaseErrorBoundary = /*#__PURE__*/function (_Component) {
+  _inherits(BaseErrorBoundary, _Component);
+
+  var _super = _createSuper(BaseErrorBoundary);
+
+  function BaseErrorBoundary(props) {
+    var _this;
+
+    _classCallCheck(this, BaseErrorBoundary);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+
+  _createClass(BaseErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      var onError = this.props.onError;
+      onError && onError(error, info);
+      this.setState({
+        hasError: true
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          ErrorComponent = _this$props.ErrorComponent;
+      var hasError = this.state.hasError;
+
+      if (hasError && ErrorComponent) {
+        return /*#__PURE__*/React.createElement(ErrorComponent, null);
+      }
+
+      return children;
+    }
+  }]);
+
+  return BaseErrorBoundary;
+}(Component);

package/dist/esm/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js

@@ -2,8 +2,8 @@
 import { jsx } from '@emotion/react';
 import EmptyState from '@atlaskit/empty-state';
 import { defineMessages, useIntl } from 'react-intl-next';
-import GenericErrorSVG from '../../common/generic-error-svg';
-import { rootContainerStyles } from '../link-picker/styled';
+import GenericErrorSVG from '../../../common/generic-error-svg';
+import { rootContainerStyles } from '../../link-picker/styled';
 var messages = defineMessages({
   heading: {
     defaultMessage: 'Something went wrong!',

package/dist/esm/ui/error-boundary/index.js

@@ -1,81 +1,32 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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, { Component } from 'react';
+import React, { useCallback } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import createEventPayload from '../../analytics.codegen';
-// eslint-disable-next-line @repo/internal/react/no-class-components
-export var BaseErrorBoundary = /*#__PURE__*/function (_Component) {
-  _inherits(BaseErrorBoundary, _Component);
-
-  var _super = _createSuper(BaseErrorBoundary);
-
-  function BaseErrorBoundary(props) {
-    var _this;
-
-    _classCallCheck(this, BaseErrorBoundary);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "fireAnalytics", function (analyticsErrorPayload) {
-      var _window, _window$navigator, _analyticsErrorPayloa, _analyticsErrorPayloa2;
-
-      var _this$props = _this.props,
-          createAnalyticsEvent = _this$props.createAnalyticsEvent,
-          channel = _this$props.channel;
-      createAnalyticsEvent(createEventPayload('ui.linkPicker.unhandledErrorCaught', {
-        browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
-        error: analyticsErrorPayload.error.toString(),
-        componentStack: (_analyticsErrorPayloa = (_analyticsErrorPayloa2 = analyticsErrorPayload.info) === null || _analyticsErrorPayloa2 === void 0 ? void 0 : _analyticsErrorPayloa2.componentStack) !== null && _analyticsErrorPayloa !== void 0 ? _analyticsErrorPayloa : ''
-      })).fire(channel);
-    });
-
-    _this.state = {
-      hasError: false
-    };
-    return _this;
-  }
-
-  _createClass(BaseErrorBoundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error, info) {
-      var onError = this.props.onError;
-      var payload = {
-        error: error,
-        info: info
-      };
-      this.fireAnalytics(payload);
-      onError && onError(error, info);
-      this.setState({
-        hasError: true
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          children = _this$props2.children,
-          ErrorComponent = _this$props2.ErrorComponent;
-      var hasError = this.state.hasError;
-
-      if (hasError && ErrorComponent) {
-        return /*#__PURE__*/React.createElement(ErrorComponent, null);
-      }
-
-      return children;
-    }
-  }]);
-
-  return BaseErrorBoundary;
-}(Component);
-var ErrorBoundary = withAnalyticsEvents()(BaseErrorBoundary);
-export default ErrorBoundary;
+import { ANALYTICS_CHANNEL } from '../../common/constants';
+import { failUfoExperience, ufoExperience } from '../../common/analytics/experiences';
+import { useLinkPickerSessionId } from '../../controllers/session-provider';
+import { ErrorBoundaryFallback } from './error-boundary-fallback';
+import { BaseErrorBoundary } from './error-boundary-base';
+
+function ErrorBoundary(_ref) {
+  var children = _ref.children,
+      createAnalyticsEvent = _ref.createAnalyticsEvent;
+  var linkPickerSessionId = useLinkPickerSessionId();
+  var handleError = useCallback(function (error, info) {
+    var _window, _window$navigator, _info$componentStack;
+
+    // Fire Analytics event
+    createAnalyticsEvent(createEventPayload('ui.linkPicker.unhandledErrorCaught', {
+      browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
+      error: error.toString(),
+      componentStack: (_info$componentStack = info === null || info === void 0 ? void 0 : info.componentStack) !== null && _info$componentStack !== void 0 ? _info$componentStack : ''
+    })).fire(ANALYTICS_CHANNEL); // Fire UFO failed experience
+
+    failUfoExperience(ufoExperience.mounted, linkPickerSessionId);
+  }, [createAnalyticsEvent, linkPickerSessionId]);
+  return /*#__PURE__*/React.createElement(BaseErrorBoundary, {
+    onError: handleError,
+    ErrorComponent: ErrorBoundaryFallback
+  }, children);
+}
+
+export default withAnalyticsEvents()(ErrorBoundary);

package/dist/esm/ui/index.js

@@ -1,11 +1,11 @@
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 import React, { memo } from 'react';
 import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
-import { AnalyticsContext } from '@atlaskit/analytics-next';
-import { COMPONENT_NAME, ANALYTICS_CHANNEL } from '../common/constants';
+import { COMPONENT_NAME } from '../common/constants';
 import { name as packageName, version as packageVersion } from '../version.json';
 import ErrorBoundary from './error-boundary';
-import { ErrorBoundaryFallback } from './error-boundary-fallback';
 import { LoaderFallback } from './loader-fallback';
+import { LinkPickerSessionProvider } from '../controllers/session-provider';
 export var PACKAGE_DATA = {
   packageName: packageName,
   packageVersion: packageVersion,
@@ -20,10 +20,7 @@ var LazyLinkPicker = lazyForPaint(function () {
 export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: PACKAGE_DATA
-  }, /*#__PURE__*/React.createElement(ErrorBoundary, {
-    channel: ANALYTICS_CHANNEL,
-    ErrorComponent: ErrorBoundaryFallback
-  }, /*#__PURE__*/React.createElement(LazySuspense, {
+  }, /*#__PURE__*/React.createElement(LinkPickerSessionProvider, null, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(LazySuspense, {
     fallback: LoaderFallback
-  }, /*#__PURE__*/React.createElement(LazyLinkPicker, props))));
+  }, /*#__PURE__*/React.createElement(LazyLinkPicker, props)))));
 });

package/dist/esm/ui/link-picker/index.js

@@ -30,6 +30,8 @@ import LinkSearchList, { testIds as listTestIds } from './link-search-list';
 import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
 import FormFooter, { testIds as formFooterTestIds } from './form-footer';
 import { getDataSource, getScreenReaderText } from './utils';
+import { succeedUfoExperience, ufoExperience } from '../../common/analytics/experiences';
+import { useLinkPickerSessionId } from '../../controllers/session-provider';
 export var RECENT_SEARCH_LIST_SIZE = 5;
 export var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
   linkPicker: 'link-picker',
@@ -130,6 +132,10 @@ function LinkPicker(_ref) {
       trackAttribute = _useLinkPickerAnalyti.trackAttribute,
       getAttributes = _useLinkPickerAnalyti.getAttributes;
 
+  var linkPickerSessionId = useLinkPickerSessionId();
+  useLayoutEffect(function () {
+    succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
+  }, [linkPickerSessionId]);
   useEffect(function () {
     // Anything in here is fired on component mount.
     var event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {}));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.10.3",
+	"version": "1.10.4",
 	"sideEffects": false
 }

package/dist/types/common/analytics/experiences.d.ts

@@ -0,0 +1,11 @@
+import { CustomData } from '@atlaskit/ufo';
+export declare const ufoExperience: {
+    readonly mounted: "component-mounted";
+};
+declare type ExperienceType = keyof typeof ufoExperience;
+declare type ExperienceName = typeof ufoExperience[ExperienceType];
+export declare const startUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
+export declare const succeedUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
+export declare const failUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
+export declare const abortUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
+export {};

package/dist/types/controllers/session-provider/index.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+export declare type LinkPickerSessionId = string;
+export declare const INIT_CONTEXT = "SESSION_UNINITIALIZED";
+export declare const SessionContext: React.Context<string>;
+interface SessionProviderProps {
+    children: ReactNode;
+}
+export declare const LinkPickerSessionProvider: ({ children, }: SessionProviderProps) => JSX.Element;
+export declare const useLinkPickerSessionId: () => string;
+export {};

package/dist/types/ui/error-boundary/error-boundary-base/index.d.ts

@@ -0,0 +1,18 @@
+import React, { Component, ReactNode } from 'react';
+export declare type ErrorBoundaryErrorInfo = {
+    componentStack: string;
+};
+declare type BaseErrorBoundaryState = {
+    hasError: boolean;
+};
+interface BaseErrorBoundaryProps {
+    children: ReactNode;
+    ErrorComponent?: React.ComponentType;
+    onError?: (error: Error, info?: ErrorBoundaryErrorInfo) => void;
+}
+export declare class BaseErrorBoundary extends Component<BaseErrorBoundaryProps, BaseErrorBoundaryState> {
+    constructor(props: BaseErrorBoundaryProps);
+    componentDidCatch(error: Error, info?: ErrorBoundaryErrorInfo): void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/types/ui/error-boundary/index.d.ts

@@ -1,27 +1,7 @@
-import React, { Component, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-declare type ErrorBoundaryErrorInfo = {
-    componentStack: string;
-};
-export interface ErrorBoundaryProps extends WithAnalyticsEventsProps {
+interface ErrorBoundaryProps extends WithAnalyticsEventsProps {
     children: ReactNode;
-    channel: string;
-    ErrorComponent?: React.ComponentType;
-    onError?: (error: Error, info?: ErrorBoundaryErrorInfo) => void;
 }
-declare type ErrorBoundaryPayload = {
-    error: Error | string;
-    info?: ErrorBoundaryErrorInfo;
-    [key: string]: any;
-};
-declare type ErrorBoundaryState = {
-    hasError: boolean;
-};
-export declare class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    constructor(props: ErrorBoundaryProps);
-    fireAnalytics: (analyticsErrorPayload: ErrorBoundaryPayload) => void;
-    componentDidCatch(error: Error, info?: ErrorBoundaryErrorInfo): void;
-    render(): React.ReactNode;
-}
-declare const ErrorBoundary: React.ForwardRefExoticComponent<Omit<ErrorBoundaryProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
-export default ErrorBoundary;
+declare const _default: React.ForwardRefExoticComponent<Omit<ErrorBoundaryProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export default _default;

package/dist/types-ts4.0/common/analytics/experiences.d.ts

@@ -0,0 +1,11 @@
+import { CustomData } from '@atlaskit/ufo';
+export declare const ufoExperience: {
+    readonly mounted: "component-mounted";
+};
+declare type ExperienceType = keyof typeof ufoExperience;
+declare type ExperienceName = typeof ufoExperience[ExperienceType];
+export declare const startUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
+export declare const succeedUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
+export declare const failUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
+export declare const abortUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
+export {};

package/dist/types-ts4.0/controllers/session-provider/index.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+export declare type LinkPickerSessionId = string;
+export declare const INIT_CONTEXT = "SESSION_UNINITIALIZED";
+export declare const SessionContext: React.Context<string>;
+interface SessionProviderProps {
+    children: ReactNode;
+}
+export declare const LinkPickerSessionProvider: ({ children, }: SessionProviderProps) => JSX.Element;
+export declare const useLinkPickerSessionId: () => string;
+export {};

package/dist/types-ts4.0/ui/error-boundary/error-boundary-base/index.d.ts

@@ -0,0 +1,18 @@
+import React, { Component, ReactNode } from 'react';
+export declare type ErrorBoundaryErrorInfo = {
+    componentStack: string;
+};
+declare type BaseErrorBoundaryState = {
+    hasError: boolean;
+};
+interface BaseErrorBoundaryProps {
+    children: ReactNode;
+    ErrorComponent?: React.ComponentType;
+    onError?: (error: Error, info?: ErrorBoundaryErrorInfo) => void;
+}
+export declare class BaseErrorBoundary extends Component<BaseErrorBoundaryProps, BaseErrorBoundaryState> {
+    constructor(props: BaseErrorBoundaryProps);
+    componentDidCatch(error: Error, info?: ErrorBoundaryErrorInfo): void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/types-ts4.0/ui/error-boundary/index.d.ts

@@ -1,27 +1,7 @@
-import React, { Component, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-declare type ErrorBoundaryErrorInfo = {
-    componentStack: string;
-};
-export interface ErrorBoundaryProps extends WithAnalyticsEventsProps {
+interface ErrorBoundaryProps extends WithAnalyticsEventsProps {
     children: ReactNode;
-    channel: string;
-    ErrorComponent?: React.ComponentType;
-    onError?: (error: Error, info?: ErrorBoundaryErrorInfo) => void;
 }
-declare type ErrorBoundaryPayload = {
-    error: Error | string;
-    info?: ErrorBoundaryErrorInfo;
-    [key: string]: any;
-};
-declare type ErrorBoundaryState = {
-    hasError: boolean;
-};
-export declare class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    constructor(props: ErrorBoundaryProps);
-    fireAnalytics: (analyticsErrorPayload: ErrorBoundaryPayload) => void;
-    componentDidCatch(error: Error, info?: ErrorBoundaryErrorInfo): void;
-    render(): React.ReactNode;
-}
-declare const ErrorBoundary: React.ForwardRefExoticComponent<Omit<ErrorBoundaryProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
-export default ErrorBoundary;
+declare const _default: React.ForwardRefExoticComponent<Omit<ErrorBoundaryProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.10.3",
+  "version": "1.10.4",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -49,12 +49,14 @@
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/visually-hidden": "^1.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
     "linkify-it": "^2.0.3",
-    "react-loosely-lazy": "^0.5.0"
+    "react-loosely-lazy": "^0.5.0",
+    "uuid": "^3.1.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -84,6 +86,7 @@
     "@types/js-yaml": "^3.12.5",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",
+    "jest-extended": "^0.11.2",
     "js-yaml": "^3.13.1",
     "lodash": "^4.17.21",
     "mockdate": "^3.0.2",