@atlaskit/link-picker 1.11.0 → 1.11.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/link-picker
 
+## 1.11.2
+
+### Patch Changes
+
+- [`841110b3cf0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/841110b3cf0) - Adds tab attribute to analytics context
+
+## 1.11.1
+
+### Patch Changes
+
+- [`af6e73a1e17`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af6e73a1e17) - Bumping dependencies via Renovate:
+
+  - react-loosely-lazy
+
 ## 1.11.0
 
 ### Minor Changes

package/dist/cjs/analytics.codegen.js

@@ -10,7 +10,7 @@ exports.default = void 0;
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::05d8b1c9e46066efd0d11fa9d19c32a9>>
+ * @codegen <<SignedSource::c0fb3bb39f50f3a7c35ebd90e8903280>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 function createEventPayload(eventKey, attributes) {

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

@@ -38,7 +38,8 @@ var DEFAULT_CONTEXT_ATTRIBUTES = {
   linkFieldContentInputMethod: null,
   linkFieldContentInputSource: null,
   displayTextFieldContent: null,
-  displayTextFieldContentInputMethod: null
+  displayTextFieldContentInputMethod: null,
+  tab: null
 };
 
 var LinkPickerAnalyticsContext = /*#__PURE__*/_react.default.createContext({
@@ -50,14 +51,19 @@ var LinkPickerAnalyticsContext = /*#__PURE__*/_react.default.createContext({
 });
 /**
  * TODO: Should we hook this into the form state/reducer?
+ * This function continues to duplicate / assume logic that runs in the picker
  */
 
 
 var contextAttributesFromIntialProps = function contextAttributesFromIntialProps(props) {
+  var _props$plugins$0$tabK, _props$plugins, _props$plugins$;
+
   return {
     linkState: (0, _url.normalizeUrl)(props.url) ? 'editLink' : 'newLink',
     linkFieldContent: (0, _url.normalizeUrl)(props.url) ? 'url' : null,
-    displayTextFieldContent: Boolean(props.displayText) ? 'text_string' : null
+    displayTextFieldContent: Boolean(props.displayText) ? 'text_string' : null,
+    // TODO: Assumes we alway load the first plugin as the current tab
+    tab: (_props$plugins$0$tabK = (_props$plugins = props.plugins) === null || _props$plugins === void 0 ? void 0 : (_props$plugins$ = _props$plugins[0]) === null || _props$plugins$ === void 0 ? void 0 : _props$plugins$.tabKey) !== null && _props$plugins$0$tabK !== void 0 ? _props$plugins$0$tabK : null
   };
 };
 /**

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

@@ -47,7 +47,7 @@ var _useFixHeight = _interopRequireDefault(require("../../controllers/use-fix-he
 
 var _messages = require("./messages");
 
-var _textInput = _interopRequireDefault(require("./text-input"));
+var _textInput = _interopRequireWildcard(require("./text-input"));
 
 var _styled = require("./styled");
 
@@ -63,9 +63,9 @@ var _formFooter = _interopRequireWildcard(require("./form-footer"));
 
 var _utils = require("./utils");
 
-var _experiences = require("../../common/analytics/experiences");
+var _trackTabViewed = _interopRequireDefault(require("./track-tab-viewed"));
 
-var _sessionProvider = require("../../controllers/session-provider");
+var _trackMount = _interopRequireDefault(require("./track-mount"));
 
 var _excluded = ["component"];
 
@@ -80,15 +80,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var RECENT_SEARCH_LIST_SIZE = 5;
 exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
 
-var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
   textInputField: 'link-text',
   searchIcon: 'link-picker-search-icon'
-}, _formFooter.testIds), _linkSearchError.testIds), _linkSearchList.testIds), {}, {
-  clearUrlButton: 'clear-text',
-  urlError: 'link-error',
+}, _formFooter.testIds), _linkSearchError.testIds), _linkSearchList.testIds), _textInput.testIds), {}, {
   tabList: 'link-picker-tabs',
   tabItem: 'link-picker-tab'
 });
@@ -182,20 +180,6 @@ 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', {}));
-    event.fire(_constants.ANALYTICS_CHANNEL);
-    return function () {
-      // Anything in here is fired on component unmount.
-      var event = createAnalyticsEvent((0, _analytics.default)('ui.inlineDialog.closed.linkPicker', {}));
-      event.fire(_constants.ANALYTICS_CHANNEL);
-    };
-  }, [createAnalyticsEvent]);
   (0, _react.useLayoutEffect)(function () {
     if (onContentResize) {
       onContentResize();
@@ -340,6 +324,17 @@ function LinkPicker(_ref) {
       invalidUrl: true
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
+  var handleTabChange = (0, _react.useCallback)(function (activeTab) {
+    var _plugins$activeTab$ta, _plugins$activeTab;
+
+    dispatch({
+      selectedIndex: -1,
+      activeIndex: -1,
+      invalidUrl: false,
+      activeTab: activeTab
+    });
+    trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 ? void 0 : (_plugins$activeTab = plugins[activeTab]) === null || _plugins$activeTab === void 0 ? void 0 : _plugins$activeTab.tabKey) !== null && _plugins$activeTab$ta !== void 0 ? _plugins$activeTab$ta : null);
+  }, [dispatch, plugins, trackAttribute]);
   var messages = isActivePlugin ? _messages.searchMessages : _messages.linkMessages;
   var screenReaderDescriptionId = 'search-recent-links-field-description';
   var linkSearchListId = 'link-picker-search-list';
@@ -359,7 +354,7 @@ function LinkPicker(_ref) {
     "data-testid": testIds.linkPicker,
     css: _styled.rootContainerStyles,
     onSubmit: handleSubmit
-  }, screenReaderText && (0, _react2.jsx)(_announcer.default, {
+  }, (0, _react2.jsx)(_trackMount.default, null), screenReaderText && (0, _react2.jsx)(_announcer.default, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -403,20 +398,16 @@ function LinkPicker(_ref) {
   }, (0, _react2.jsx)(_tabs.default, {
     id: testIds.tabList,
     testId: testIds.tabList,
-    onChange: function onChange(activeTab) {
-      return dispatch({
-        selectedIndex: -1,
-        activeIndex: -1,
-        invalidUrl: false,
-        activeTab: activeTab
-      });
-    }
+    selected: activeTab,
+    onChange: handleTabChange
   }, (0, _react2.jsx)(_tabs.TabList, null, tabs.map(function (tab) {
     return (0, _react2.jsx)(_tabs.Tab, {
       key: tab.tabTitle,
       testId: testIds.tabItem
     }, tab.tabTitle);
-  })))), (0, _react2.jsx)("div", (0, _extends2.default)({
+  }))), (0, _react2.jsx)(_trackTabViewed.default, {
+    activeTab: activeTab
+  })), (0, _react2.jsx)("div", (0, _extends2.default)({
     css: _styled.flexColumnStyles
   }, fixListHeightProps), !error && (0, _react2.jsx)(_linkSearchList.default, {
     id: linkSearchListId,
@@ -428,7 +419,6 @@ function LinkPicker(_ref) {
     onSelect: handleSelected,
     onMouseEnter: handleMouseEnterResultItem,
     onMouseLeave: handleMouseLeaveResultItem,
-    error: error,
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length)
   }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : (0, _react2.jsx)(_linkSearchError.default, null)))), (0, _react2.jsx)(_formFooter.default, {
     css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? _styled.formFooterMargin : undefined,

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

@@ -15,7 +15,7 @@ var _transformTimeStamp = require("../transformTimeStamp");
 
 var _styled = require("./styled");
 
-var _ = require("../");
+var _ = require("..");
 
 /** @jsx jsx */
 var LinkSearchListItem = function LinkSearchListItem(_ref) {

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.testIds = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -25,11 +25,14 @@ var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-c
 
 var _utils = require("../utils");
 
-var _ = require("../");
-
 var _styled = require("./styled");
 
 var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error"];
+var testIds = {
+  urlError: 'link-error',
+  clearUrlButton: 'clear-text'
+};
+exports.testIds = testIds;
 
 var TextInput = function TextInput(_ref) {
   var name = _ref.name,
@@ -82,7 +85,7 @@ var TextInput = function TextInput(_ref) {
     type: "button",
     css: _styled.clearTextButtonStyles,
     onClick: handleClear,
-    "data-testid": _.testIds.clearUrlButton
+    "data-testid": testIds.clearUrlButton
   }, (0, _react2.jsx)(_selectClear.default, {
     size: "medium",
     label: clearLabel || ''
@@ -100,7 +103,7 @@ var TextInput = function TextInput(_ref) {
       elemAfterInput: clearText,
       isInvalid: !!error
     })), error && (0, _react2.jsx)(_form.ErrorMessage, {
-      testId: _.testIds.urlError
+      testId: testIds.urlError
     }, error));
   }));
 };

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _experiences = require("../../../common/analytics/experiences");
+
+var _analytics = _interopRequireDefault(require("../../../analytics.codegen"));
+
+var _constants = require("../../../common/constants");
+
+var _sessionProvider = require("../../../controllers/session-provider");
+
+/** @jsx jsx */
+
+/**
+ * UFO + Analytics tracking for component mount (and unmount)
+ */
+function TrackMount() {
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  var linkPickerSessionId = (0, _sessionProvider.useLinkPickerSessionId)();
+  (0, _react.useLayoutEffect)(function () {
+    (0, _experiences.succeedUfoExperience)(_experiences.ufoExperience.mounted, linkPickerSessionId);
+  }, [linkPickerSessionId]);
+  (0, _react.useLayoutEffect)(function () {
+    // Anything in here is fired on component mount.
+    createAnalyticsEvent((0, _analytics.default)('ui.inlineDialog.viewed.linkPicker', {})).fire(_constants.ANALYTICS_CHANNEL);
+    return function () {
+      // Anything in here is fired on component unmount.
+      createAnalyticsEvent((0, _analytics.default)('ui.inlineDialog.closed.linkPicker', {})).fire(_constants.ANALYTICS_CHANNEL);
+    };
+  }, [createAnalyticsEvent]);
+  return null;
+}
+
+var _default = TrackMount;
+exports.default = _default;

package/dist/cjs/ui/link-picker/track-tab-viewed/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _analytics = _interopRequireDefault(require("../../../analytics.codegen"));
+
+var _constants = require("../../../common/constants");
+
+/** @jsx jsx */
+function TrackTabViewed(_ref) {
+  var activeTab = _ref.activeTab;
+
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  (0, _react.useLayoutEffect)(function () {
+    createAnalyticsEvent((0, _analytics.default)('ui.tab.viewed', {})).fire(_constants.ANALYTICS_CHANNEL);
+  }, [activeTab, createAnalyticsEvent]);
+  return null;
+}
+
+var _default = TrackTabViewed;
+exports.default = _default;

package/dist/cjs/version.json

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

package/dist/es2019/analytics.codegen.js

@@ -3,7 +3,7 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::05d8b1c9e46066efd0d11fa9d19c32a9>>
+ * @codegen <<SignedSource::c0fb3bb39f50f3a7c35ebd90e8903280>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 function createEventPayload(eventKey, attributes) {

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

@@ -9,7 +9,8 @@ const DEFAULT_CONTEXT_ATTRIBUTES = {
   linkFieldContentInputMethod: null,
   linkFieldContentInputSource: null,
   displayTextFieldContent: null,
-  displayTextFieldContentInputMethod: null
+  displayTextFieldContentInputMethod: null,
+  tab: null
 };
 const LinkPickerAnalyticsContext = /*#__PURE__*/React.createContext({
   trackAttribute: () => {},
@@ -18,13 +19,18 @@ const LinkPickerAnalyticsContext = /*#__PURE__*/React.createContext({
 });
 /**
  * TODO: Should we hook this into the form state/reducer?
+ * This function continues to duplicate / assume logic that runs in the picker
  */
 
 const contextAttributesFromIntialProps = props => {
+  var _props$plugins$0$tabK, _props$plugins, _props$plugins$;
+
   return {
     linkState: normalizeUrl(props.url) ? 'editLink' : 'newLink',
     linkFieldContent: normalizeUrl(props.url) ? 'url' : null,
-    displayTextFieldContent: Boolean(props.displayText) ? 'text_string' : null
+    displayTextFieldContent: Boolean(props.displayText) ? 'text_string' : null,
+    // TODO: Assumes we alway load the first plugin as the current tab
+    tab: (_props$plugins$0$tabK = (_props$plugins = props.plugins) === null || _props$plugins === void 0 ? void 0 : (_props$plugins$ = _props$plugins[0]) === null || _props$plugins$ === void 0 ? void 0 : _props$plugins$.tabKey) !== null && _props$plugins$0$tabK !== void 0 ? _props$plugins$0$tabK : null
   };
 };
 /**

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { Fragment, useCallback, useEffect, useLayoutEffect, useReducer, memo } from 'react';
+import { Fragment, useCallback, useLayoutEffect, useReducer, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -16,7 +16,7 @@ import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import useFixHeight from '../../controllers/use-fix-height';
 import { searchMessages, linkMessages, formMessages, linkTextMessages } from './messages';
-import TextInput from './text-input';
+import TextInput, { testIds as textFieldTestIds } from './text-input';
 import { rootContainerStyles, searchIconStyles, tabsWrapperStyles, flexColumnStyles, formFooterMargin } from './styled';
 import { browser } from './browser';
 import Announcer from './announcer';
@@ -24,8 +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';
+import TrackTabViewed from './track-tab-viewed';
+import TrackMount from './track-mount';
 export const RECENT_SEARCH_LIST_SIZE = 5;
 export const testIds = {
   linkPickerRoot: 'link-picker-root',
@@ -36,8 +36,7 @@ export const testIds = {
   ...formFooterTestIds,
   ...searchErrorTestIds,
   ...listTestIds,
-  clearUrlButton: 'clear-text',
-  urlError: 'link-error',
+  ...textFieldTestIds,
   tabList: 'link-picker-tabs',
   tabItem: 'link-picker-tab'
 };
@@ -126,20 +125,6 @@ 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', {}));
-    event.fire(ANALYTICS_CHANNEL);
-    return () => {
-      // Anything in here is fired on component unmount.
-      const event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.closed.linkPicker', {}));
-      event.fire(ANALYTICS_CHANNEL);
-    };
-  }, [createAnalyticsEvent]);
   useLayoutEffect(() => {
     if (onContentResize) {
       onContentResize();
@@ -285,6 +270,17 @@ function LinkPicker({
       invalidUrl: true
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
+  const handleTabChange = useCallback(activeTab => {
+    var _plugins$activeTab$ta, _plugins$activeTab;
+
+    dispatch({
+      selectedIndex: -1,
+      activeIndex: -1,
+      invalidUrl: false,
+      activeTab
+    });
+    trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 ? void 0 : (_plugins$activeTab = plugins[activeTab]) === null || _plugins$activeTab === void 0 ? void 0 : _plugins$activeTab.tabKey) !== null && _plugins$activeTab$ta !== void 0 ? _plugins$activeTab$ta : null);
+  }, [dispatch, plugins, trackAttribute]);
   const messages = isActivePlugin ? searchMessages : linkMessages;
   const screenReaderDescriptionId = 'search-recent-links-field-description';
   const linkSearchListId = 'link-picker-search-list';
@@ -304,7 +300,7 @@ function LinkPicker({
     "data-testid": testIds.linkPicker,
     css: rootContainerStyles,
     onSubmit: handleSubmit
-  }, screenReaderText && jsx(Announcer, {
+  }, jsx(TrackMount, null), screenReaderText && jsx(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -348,16 +344,14 @@ function LinkPicker({
   }, jsx(Tabs, {
     id: testIds.tabList,
     testId: testIds.tabList,
-    onChange: activeTab => dispatch({
-      selectedIndex: -1,
-      activeIndex: -1,
-      invalidUrl: false,
-      activeTab
-    })
+    selected: activeTab,
+    onChange: handleTabChange
   }, jsx(TabList, null, tabs.map(tab => jsx(Tab, {
     key: tab.tabTitle,
     testId: testIds.tabItem
-  }, tab.tabTitle))))), jsx("div", _extends({
+  }, tab.tabTitle)))), jsx(TrackTabViewed, {
+    activeTab: activeTab
+  })), jsx("div", _extends({
     css: flexColumnStyles
   }, fixListHeightProps), !error && jsx(LinkSearchList, {
     id: linkSearchListId,
@@ -369,7 +363,6 @@ function LinkPicker({
     onSelect: handleSelected,
     onMouseEnter: handleMouseEnterResultItem,
     onMouseLeave: handleMouseLeaveResultItem,
-    error: error,
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length)
   }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : jsx(LinkSearchError, null)))), jsx(FormFooter, {
     css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? formFooterMargin : undefined,

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

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { transformTimeStamp } from '../transformTimeStamp';
 import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles, listItemContainerStyles, listItemContainerInnerStyles } from './styled';
-import { testIds } from '../';
+import { testIds } from '..';
 
 const LinkSearchListItem = ({
   item,

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

@@ -8,8 +8,11 @@ import Tooltip from '@atlaskit/tooltip';
 import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
 import { isRedoEvent, isUndoEvent } from '../utils';
-import { testIds } from '../';
 import { clearTextButtonStyles, fieldStyles } from './styled';
+export const testIds = {
+  urlError: 'link-error',
+  clearUrlButton: 'clear-text'
+};
 
 const TextInput = ({
   name,

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

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { useLayoutEffect } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { succeedUfoExperience, ufoExperience } from '../../../common/analytics/experiences';
+import createEventPayload from '../../../analytics.codegen';
+import { ANALYTICS_CHANNEL } from '../../../common/constants';
+import { useLinkPickerSessionId } from '../../../controllers/session-provider';
+/**
+ * UFO + Analytics tracking for component mount (and unmount)
+ */
+
+function TrackMount() {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const linkPickerSessionId = useLinkPickerSessionId();
+  useLayoutEffect(() => {
+    succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
+  }, [linkPickerSessionId]);
+  useLayoutEffect(() => {
+    // Anything in here is fired on component mount.
+    createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {})).fire(ANALYTICS_CHANNEL);
+    return () => {
+      // Anything in here is fired on component unmount.
+      createAnalyticsEvent(createEventPayload('ui.inlineDialog.closed.linkPicker', {})).fire(ANALYTICS_CHANNEL);
+    };
+  }, [createAnalyticsEvent]);
+  return null;
+}
+
+export default TrackMount;

package/dist/es2019/ui/link-picker/track-tab-viewed/index.js

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { useLayoutEffect } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import createEventPayload from '../../../analytics.codegen';
+import { ANALYTICS_CHANNEL } from '../../../common/constants';
+
+function TrackTabViewed({
+  activeTab
+}) {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  useLayoutEffect(() => {
+    createAnalyticsEvent(createEventPayload('ui.tab.viewed', {})).fire(ANALYTICS_CHANNEL);
+  }, [activeTab, createAnalyticsEvent]);
+  return null;
+}
+
+export default TrackTabViewed;

package/dist/es2019/version.json

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

package/dist/esm/analytics.codegen.js

@@ -3,7 +3,7 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::05d8b1c9e46066efd0d11fa9d19c32a9>>
+ * @codegen <<SignedSource::c0fb3bb39f50f3a7c35ebd90e8903280>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 function createEventPayload(eventKey, attributes) {

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

@@ -16,7 +16,8 @@ var DEFAULT_CONTEXT_ATTRIBUTES = {
   linkFieldContentInputMethod: null,
   linkFieldContentInputSource: null,
   displayTextFieldContent: null,
-  displayTextFieldContentInputMethod: null
+  displayTextFieldContentInputMethod: null,
+  tab: null
 };
 var LinkPickerAnalyticsContext = /*#__PURE__*/React.createContext({
   trackAttribute: function trackAttribute() {},
@@ -27,13 +28,18 @@ var LinkPickerAnalyticsContext = /*#__PURE__*/React.createContext({
 });
 /**
  * TODO: Should we hook this into the form state/reducer?
+ * This function continues to duplicate / assume logic that runs in the picker
  */
 
 var contextAttributesFromIntialProps = function contextAttributesFromIntialProps(props) {
+  var _props$plugins$0$tabK, _props$plugins, _props$plugins$;
+
   return {
     linkState: normalizeUrl(props.url) ? 'editLink' : 'newLink',
     linkFieldContent: normalizeUrl(props.url) ? 'url' : null,
-    displayTextFieldContent: Boolean(props.displayText) ? 'text_string' : null
+    displayTextFieldContent: Boolean(props.displayText) ? 'text_string' : null,
+    // TODO: Assumes we alway load the first plugin as the current tab
+    tab: (_props$plugins$0$tabK = (_props$plugins = props.plugins) === null || _props$plugins === void 0 ? void 0 : (_props$plugins$ = _props$plugins[0]) === null || _props$plugins$ === void 0 ? void 0 : _props$plugins$.tabKey) !== null && _props$plugins$0$tabK !== void 0 ? _props$plugins$0$tabK : null
   };
 };
 /**

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

@@ -9,7 +9,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; }
 
 /** @jsx jsx */
-import { Fragment, useCallback, useEffect, useLayoutEffect, useReducer, memo } from 'react';
+import { Fragment, useCallback, useLayoutEffect, useReducer, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -24,7 +24,7 @@ import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import useFixHeight from '../../controllers/use-fix-height';
 import { searchMessages, linkMessages, formMessages, linkTextMessages } from './messages';
-import TextInput from './text-input';
+import TextInput, { testIds as textFieldTestIds } from './text-input';
 import { rootContainerStyles, searchIconStyles, tabsWrapperStyles, flexColumnStyles, formFooterMargin } from './styled';
 import { browser } from './browser';
 import Announcer from './announcer';
@@ -32,18 +32,16 @@ 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';
+import TrackTabViewed from './track-tab-viewed';
+import TrackMount from './track-mount';
 export var RECENT_SEARCH_LIST_SIZE = 5;
-export var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+export var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
   textInputField: 'link-text',
   searchIcon: 'link-picker-search-icon'
-}, formFooterTestIds), searchErrorTestIds), listTestIds), {}, {
-  clearUrlButton: 'clear-text',
-  urlError: 'link-error',
+}, formFooterTestIds), searchErrorTestIds), listTestIds), textFieldTestIds), {}, {
   tabList: 'link-picker-tabs',
   tabItem: 'link-picker-tab'
 });
@@ -135,20 +133,6 @@ 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', {}));
-    event.fire(ANALYTICS_CHANNEL);
-    return function () {
-      // Anything in here is fired on component unmount.
-      var event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.closed.linkPicker', {}));
-      event.fire(ANALYTICS_CHANNEL);
-    };
-  }, [createAnalyticsEvent]);
   useLayoutEffect(function () {
     if (onContentResize) {
       onContentResize();
@@ -293,6 +277,17 @@ function LinkPicker(_ref) {
       invalidUrl: true
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
+  var handleTabChange = useCallback(function (activeTab) {
+    var _plugins$activeTab$ta, _plugins$activeTab;
+
+    dispatch({
+      selectedIndex: -1,
+      activeIndex: -1,
+      invalidUrl: false,
+      activeTab: activeTab
+    });
+    trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 ? void 0 : (_plugins$activeTab = plugins[activeTab]) === null || _plugins$activeTab === void 0 ? void 0 : _plugins$activeTab.tabKey) !== null && _plugins$activeTab$ta !== void 0 ? _plugins$activeTab$ta : null);
+  }, [dispatch, plugins, trackAttribute]);
   var messages = isActivePlugin ? searchMessages : linkMessages;
   var screenReaderDescriptionId = 'search-recent-links-field-description';
   var linkSearchListId = 'link-picker-search-list';
@@ -312,7 +307,7 @@ function LinkPicker(_ref) {
     "data-testid": testIds.linkPicker,
     css: rootContainerStyles,
     onSubmit: handleSubmit
-  }, screenReaderText && jsx(Announcer, {
+  }, jsx(TrackMount, null), screenReaderText && jsx(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -356,20 +351,16 @@ function LinkPicker(_ref) {
   }, jsx(Tabs, {
     id: testIds.tabList,
     testId: testIds.tabList,
-    onChange: function onChange(activeTab) {
-      return dispatch({
-        selectedIndex: -1,
-        activeIndex: -1,
-        invalidUrl: false,
-        activeTab: activeTab
-      });
-    }
+    selected: activeTab,
+    onChange: handleTabChange
   }, jsx(TabList, null, tabs.map(function (tab) {
     return jsx(Tab, {
       key: tab.tabTitle,
       testId: testIds.tabItem
     }, tab.tabTitle);
-  })))), jsx("div", _extends({
+  }))), jsx(TrackTabViewed, {
+    activeTab: activeTab
+  })), jsx("div", _extends({
     css: flexColumnStyles
   }, fixListHeightProps), !error && jsx(LinkSearchList, {
     id: linkSearchListId,
@@ -381,7 +372,6 @@ function LinkPicker(_ref) {
     onSelect: handleSelected,
     onMouseEnter: handleMouseEnterResultItem,
     onMouseLeave: handleMouseLeaveResultItem,
-    error: error,
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length)
   }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : jsx(LinkSearchError, null)))), jsx(FormFooter, {
     css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? formFooterMargin : undefined,

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

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { transformTimeStamp } from '../transformTimeStamp';
 import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles, listItemContainerStyles, listItemContainerInnerStyles } from './styled';
-import { testIds } from '../';
+import { testIds } from '..';
 
 var LinkSearchListItem = function LinkSearchListItem(_ref) {
   var item = _ref.item,

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

@@ -10,8 +10,11 @@ import Tooltip from '@atlaskit/tooltip';
 import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
 import { isRedoEvent, isUndoEvent } from '../utils';
-import { testIds } from '../';
 import { clearTextButtonStyles, fieldStyles } from './styled';
+export var testIds = {
+  urlError: 'link-error',
+  clearUrlButton: 'clear-text'
+};
 
 var TextInput = function TextInput(_ref) {
   var name = _ref.name,

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

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { useLayoutEffect } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { succeedUfoExperience, ufoExperience } from '../../../common/analytics/experiences';
+import createEventPayload from '../../../analytics.codegen';
+import { ANALYTICS_CHANNEL } from '../../../common/constants';
+import { useLinkPickerSessionId } from '../../../controllers/session-provider';
+/**
+ * UFO + Analytics tracking for component mount (and unmount)
+ */
+
+function TrackMount() {
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  var linkPickerSessionId = useLinkPickerSessionId();
+  useLayoutEffect(function () {
+    succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
+  }, [linkPickerSessionId]);
+  useLayoutEffect(function () {
+    // Anything in here is fired on component mount.
+    createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {})).fire(ANALYTICS_CHANNEL);
+    return function () {
+      // Anything in here is fired on component unmount.
+      createAnalyticsEvent(createEventPayload('ui.inlineDialog.closed.linkPicker', {})).fire(ANALYTICS_CHANNEL);
+    };
+  }, [createAnalyticsEvent]);
+  return null;
+}
+
+export default TrackMount;

package/dist/esm/ui/link-picker/track-tab-viewed/index.js

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { useLayoutEffect } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import createEventPayload from '../../../analytics.codegen';
+import { ANALYTICS_CHANNEL } from '../../../common/constants';
+
+function TrackTabViewed(_ref) {
+  var activeTab = _ref.activeTab;
+
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  useLayoutEffect(function () {
+    createAnalyticsEvent(createEventPayload('ui.tab.viewed', {})).fire(ANALYTICS_CHANNEL);
+  }, [activeTab, createAnalyticsEvent]);
+  return null;
+}
+
+export default TrackTabViewed;

package/dist/esm/version.json

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

package/dist/types/analytics.codegen.d.ts

@@ -3,7 +3,7 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::05d8b1c9e46066efd0d11fa9d19c32a9>>
+ * @codegen <<SignedSource::c0fb3bb39f50f3a7c35ebd90e8903280>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 export declare type PackageMetaDataType = {
@@ -19,12 +19,14 @@ export declare type LinkPickerAnalyticsContextType = {
     linkFieldContentInputSource: string | null;
     displayTextFieldContent: 'text_string' | null;
     displayTextFieldContentInputMethod: 'manual' | 'paste' | null;
+    tab: string | null;
 };
 export declare type FormSubmittedLinkPickerAttributesType = {};
 export declare type InlineDialogViewedLinkPickerAttributesType = {};
 export declare type InlineDialogClosedLinkPickerAttributesType = {};
 export declare type TextFieldUpdatedLinkFieldAttributesType = {};
 export declare type TextFieldUpdatedDisplayTextFieldAttributesType = {};
+export declare type TabViewedAttributesType = {};
 export declare type LinkPickerUnhandledErrorCaughtAttributesType = {
     browserInfo: string;
     error: string;
@@ -39,6 +41,7 @@ declare type AnalyticsEventAttributes = {
     'ui.inlineDialog.closed.linkPicker': InlineDialogClosedLinkPickerAttributesType;
     'ui.textField.updated.linkField': TextFieldUpdatedLinkFieldAttributesType;
     'ui.textField.updated.displayTextField': TextFieldUpdatedDisplayTextFieldAttributesType;
+    'ui.tab.viewed': TabViewedAttributesType;
     'ui.linkPicker.unhandledErrorCaught': LinkPickerUnhandledErrorCaughtAttributesType;
     'operational.resultsResolve.failed': ResultsResolveFailedAttributesType;
 };

package/dist/types/ui/link-picker/index.d.ts

@@ -3,10 +3,10 @@ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { LinkInputType, LinkPickerPlugin } from '../types';
 export declare const RECENT_SEARCH_LIST_SIZE = 5;
 export declare const testIds: {
-    readonly clearUrlButton: "clear-text";
-    readonly urlError: "link-error";
     readonly tabList: "link-picker-tabs";
     readonly tabItem: "link-picker-tab";
+    readonly urlError: string;
+    readonly clearUrlButton: string;
     readonly resultListTitle: string;
     readonly searchResultItem: string;
     readonly searchResultList: string;

package/dist/types/ui/link-picker/link-search-list/index.d.ts

@@ -36,7 +36,6 @@ export interface LinkSearchListProps extends Omit<React.HTMLAttributes<HTMLDivEl
     ariaLabelledBy?: string;
     role?: string;
     id?: string;
-    error?: unknown;
     hasSearchTerm?: boolean;
 }
 declare const LinkSearchList: import("react").ForwardRefExoticComponent<LinkSearchListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/ui/link-picker/text-input/index.d.ts

@@ -10,5 +10,9 @@ export declare type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & {
     clearLabel?: string;
     error?: string | null;
 };
+export declare const testIds: {
+    urlError: string;
+    clearUrlButton: string;
+};
 declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, ...restProps }: TextInputProps) => jsx.JSX.Element;
 export default TextInput;

package/dist/types/ui/link-picker/track-mount/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * UFO + Analytics tracking for component mount (and unmount)
+ */
+declare function TrackMount(): null;
+export default TrackMount;

package/dist/types/ui/link-picker/track-tab-viewed/index.d.ts

@@ -0,0 +1,4 @@
+declare function TrackTabViewed({ activeTab }: {
+    activeTab: number | null;
+}): null;
+export default TrackTabViewed;

package/dist/types-ts4.0/analytics.codegen.d.ts

@@ -3,7 +3,7 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::05d8b1c9e46066efd0d11fa9d19c32a9>>
+ * @codegen <<SignedSource::c0fb3bb39f50f3a7c35ebd90e8903280>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 export declare type PackageMetaDataType = {
@@ -19,12 +19,14 @@ export declare type LinkPickerAnalyticsContextType = {
     linkFieldContentInputSource: string | null;
     displayTextFieldContent: 'text_string' | null;
     displayTextFieldContentInputMethod: 'manual' | 'paste' | null;
+    tab: string | null;
 };
 export declare type FormSubmittedLinkPickerAttributesType = {};
 export declare type InlineDialogViewedLinkPickerAttributesType = {};
 export declare type InlineDialogClosedLinkPickerAttributesType = {};
 export declare type TextFieldUpdatedLinkFieldAttributesType = {};
 export declare type TextFieldUpdatedDisplayTextFieldAttributesType = {};
+export declare type TabViewedAttributesType = {};
 export declare type LinkPickerUnhandledErrorCaughtAttributesType = {
     browserInfo: string;
     error: string;
@@ -39,6 +41,7 @@ declare type AnalyticsEventAttributes = {
     'ui.inlineDialog.closed.linkPicker': InlineDialogClosedLinkPickerAttributesType;
     'ui.textField.updated.linkField': TextFieldUpdatedLinkFieldAttributesType;
     'ui.textField.updated.displayTextField': TextFieldUpdatedDisplayTextFieldAttributesType;
+    'ui.tab.viewed': TabViewedAttributesType;
     'ui.linkPicker.unhandledErrorCaught': LinkPickerUnhandledErrorCaughtAttributesType;
     'operational.resultsResolve.failed': ResultsResolveFailedAttributesType;
 };

package/dist/types-ts4.0/ui/link-picker/index.d.ts

@@ -3,10 +3,10 @@ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { LinkInputType, LinkPickerPlugin } from '../types';
 export declare const RECENT_SEARCH_LIST_SIZE = 5;
 export declare const testIds: {
-    readonly clearUrlButton: "clear-text";
-    readonly urlError: "link-error";
     readonly tabList: "link-picker-tabs";
     readonly tabItem: "link-picker-tab";
+    readonly urlError: string;
+    readonly clearUrlButton: string;
     readonly resultListTitle: string;
     readonly searchResultItem: string;
     readonly searchResultList: string;

package/dist/types-ts4.0/ui/link-picker/link-search-list/index.d.ts

@@ -36,7 +36,6 @@ export interface LinkSearchListProps extends Omit<React.HTMLAttributes<HTMLDivEl
     ariaLabelledBy?: string;
     role?: string;
     id?: string;
-    error?: unknown;
     hasSearchTerm?: boolean;
 }
 declare const LinkSearchList: import("react").ForwardRefExoticComponent<LinkSearchListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types-ts4.0/ui/link-picker/text-input/index.d.ts

@@ -10,5 +10,9 @@ export declare type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & {
     clearLabel?: string;
     error?: string | null;
 };
+export declare const testIds: {
+    urlError: string;
+    clearUrlButton: string;
+};
 declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, ...restProps }: TextInputProps) => jsx.JSX.Element;
 export default TextInput;

package/dist/types-ts4.0/ui/link-picker/track-mount/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * UFO + Analytics tracking for component mount (and unmount)
+ */
+declare function TrackMount(): null;
+export default TrackMount;

package/dist/types-ts4.0/ui/link-picker/track-tab-viewed/index.d.ts

@@ -0,0 +1,4 @@
+declare function TrackTabViewed({ activeTab }: {
+    activeTab: number | null;
+}): null;
+export default TrackTabViewed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -23,7 +23,8 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
@@ -34,28 +35,30 @@
   },
   "scripts": {
     "ak-postbuild": "ls -d dist/* | grep -v dist/types | xargs -n 1 copyfiles -u 1 -V src/**/*.svg",
-    "codegen-analytics": "ts-node --project ../../../tsconfig.node.json ./scripts/build/codegen-analytics"
+    "codegen-analytics": "ts-node --project ../../../tsconfig.node.json ./scripts/build/codegen-analytics",
+    "docs-analytics": "ts-node --project ../../../tsconfig.node.json ./scripts/build/docs-analytics"
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.3.1",
     "@atlaskit/button": "^16.2.0",
     "@atlaskit/empty-state": "^7.4.0",
-    "@atlaskit/form": "^8.5.1",
+    "@atlaskit/form": "^8.6.0",
     "@atlaskit/frontend-utilities": "^2.0.0",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/tabs": "^13.3.0",
     "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/visually-hidden": "^1.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
+    "@react-loosely-lazy/manifest": "^1.0.0",
     "date-fns": "^2.17.0",
     "linkify-it": "^2.0.3",
-    "react-loosely-lazy": "^0.5.0",
+    "react-loosely-lazy": "^1.0.0",
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
@@ -65,18 +68,20 @@
   "devDependencies": {
     "@af/codegen": "*",
     "@atlaskit/activity-provider": "^2.3.2",
+    "@atlaskit/adf-schema": "^24.0.0",
+    "@atlaskit/adf-utils": "^17.1.4",
     "@atlaskit/docs": "*",
-    "@atlaskit/link-analytics": "^1.1.0",
-    "@atlaskit/link-provider": "^1.2.9",
-    "@atlaskit/link-test-helpers": "^1.5.0",
-    "@atlaskit/popup": "^1.4.0",
+    "@atlaskit/link-analytics": "^2.0.0",
+    "@atlaskit/link-provider": "^1.3.0",
+    "@atlaskit/link-test-helpers": "^2.0.0",
+    "@atlaskit/popup": "^1.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@atlassian/link-picker-atlassian-plugin": "^21.0.0",
-    "@atlassian/link-picker-plugins": "^8.0.0",
+    "@atlassian/link-picker-plugins": "^9.0.0",
     "@atlassian/recent-work-client": "^1.6.0",
     "@atlassian/search-provider": "^2.3.0",
     "@testing-library/dom": "^8.17.1",
@@ -85,12 +90,13 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/js-yaml": "^3.12.5",
-    "enzyme": "^3.10.0",
+    "enquirer": "^2.3.4",
     "fetch-mock": "^8.0.0",
     "jest-extended": "^0.11.2",
     "js-yaml": "^3.13.1",
     "lodash": "^4.17.21",
     "mockdate": "^3.0.2",
+    "node-fetch": "^2.6.7",
     "prettier": "^2.1.1",
     "react-dom": "^16.8.0",
     "sinon": "^2.2.0",

package/report.api.md

@@ -1,12 +1,17 @@
+<!-- API Report Version: 2.3 -->
+
 ## API Report File for "@atlaskit/link-picker"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
 
-<!--
-	Generated API Report version: 2.0
--->
+- [Main Entry Types](#main-entry-types)
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 /// <reference types="react" />
@@ -33,7 +38,7 @@ export interface LinkPickerPlugin {
   // (undocumented)
   resolve: (
     state: LinkPickerState,
-  ) => Promise<ResolveResult> | AsyncGenerator<ResolveResult, ResolveResult>;
+  ) => AsyncGenerator<ResolveResult, ResolveResult> | Promise<ResolveResult>;
   tabKey?: string;
   tabTitle?: string;
 }
@@ -51,7 +56,7 @@ export interface LinkPickerProps {
       children: React.ReactElement;
     }
   >;
-  displayText?: string | null;
+  displayText?: null | string;
   onCancel: () => void;
   onContentResize?: () => void;
   onSubmit: (
@@ -71,11 +76,11 @@ export interface LinkPickerState {
 export interface LinkSearchListItemData {
   container?: string;
   icon:
-    | string
     | React.ComponentType<{
         alt: string;
-      }>;
-  iconAlt: string | MessageDescriptor;
+      }>
+    | string;
+  iconAlt: MessageDescriptor | string;
   lastUpdatedDate?: Date;
   lastViewedDate?: Date;
   meta?: {
@@ -94,10 +99,10 @@ interface Meta {
 
 // @public (undocumented)
 interface OnSubmitParameter {
-  displayText: string | null;
+  displayText: null | string;
   meta: Meta;
   rawUrl?: string;
-  title: string | null;
+  title: null | string;
   url: string;
 }
 
@@ -109,3 +114,5 @@ interface ResolveResult {
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,93 @@
+## API Report File for "@atlaskit/link-picker"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import { MessageDescriptor } from 'react-intl-next';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+// @public (undocumented)
+export type LinkInputType = 'manual' | 'typeAhead';
+
+// @public (undocumented)
+export const LinkPicker: React_2.MemoExoticComponent<(props: LinkPickerProps) => JSX.Element>;
+
+// @public (undocumented)
+export interface LinkPickerPlugin {
+    errorFallback?: LinkPickerPluginErrorFallback;
+    meta?: {
+        source?: string;
+    };
+    // (undocumented)
+    resolve: (state: LinkPickerState) => AsyncGenerator<ResolveResult, ResolveResult> | Promise<ResolveResult>;
+    tabKey?: string;
+    tabTitle?: string;
+}
+
+// @public (undocumented)
+export type LinkPickerPluginErrorFallback = (error: unknown, retry: () => void) => ReactNode;
+
+// @public (undocumented)
+export interface LinkPickerProps {
+    component?: React.ComponentType<Partial<LinkPickerProps> & {
+        children: React.ReactElement;
+    }>;
+    displayText?: null | string;
+    onCancel: () => void;
+    onContentResize?: () => void;
+    onSubmit: (arg: OnSubmitParameter, analytic?: UIAnalyticsEvent | null) => void;
+    plugins?: LinkPickerPlugin[];
+    url?: string;
+}
+
+// @public (undocumented)
+export interface LinkPickerState {
+    query: string;
+}
+
+// @public (undocumented)
+export interface LinkSearchListItemData {
+    container?: string;
+    icon: React.ComponentType<{
+        alt: string;
+    }> | string;
+    iconAlt: MessageDescriptor | string;
+    lastUpdatedDate?: Date;
+    lastViewedDate?: Date;
+    meta?: {
+        source?: string;
+    };
+    name: string;
+    objectId: string;
+    prefetch?: boolean;
+    url: string;
+}
+
+// @public (undocumented)
+interface Meta {
+    inputMethod: LinkInputType;
+}
+
+// @public (undocumented)
+interface OnSubmitParameter {
+    displayText: null | string;
+    meta: Meta;
+    rawUrl?: string;
+    title: null | string;
+    url: string;
+}
+
+// @public (undocumented)
+interface ResolveResult {
+    // (undocumented)
+    data: LinkSearchListItemData[];
+}
+
+// (No @packageDocumentation comment for this package)
+
+```