@atlaskit/link-picker 1.7.0 → 1.8.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/link-picker
 
+## 1.8.1
+
+### Patch Changes
+
+- [`afd2368145a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/afd2368145a) - Added link picker mount/unmount analytic events
+
+## 1.8.0
+
+### Minor Changes
+
+- [`89fffde2a59`](https://bitbucket.org/atlassian/atlassian-frontend/commits/89fffde2a59) - Wrap link picker in native form element
+
+## 1.7.1
+
+### Patch Changes
+
+- [`e900714203d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e900714203d) - Add "form submitted" analytics event.
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/cjs/analytics.codegen.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Generates analytics utilities from the package analytics spec yaml
+ *
+ * @codegen <<SignedSource::ffa7ec78cc793f941d06cdb25b07dc8a>>
+ * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
+ */
+function createEventPayload(eventKey, attributes) {
+  var event = eventKey.split('.');
+  return {
+    eventType: event[0],
+    actionSubject: event[1],
+    action: event[2],
+    actionSubjectId: event[3],
+    attributes: attributes
+  };
+}
+
+var _default = createEventPayload;
+exports.default = _default;

package/dist/cjs/common/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
+var ANALYTICS_CHANNEL = 'media';
+exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
+var COMPONENT_NAME = 'LinkPicker';
+exports.COMPONENT_NAME = COMPONENT_NAME;

package/dist/cjs/ui/index.js

@@ -15,6 +15,8 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _reactLooselyLazy = require("react-loosely-lazy");
 
+var _constants = require("../common/constants");
+
 var _version = require("../version.json");
 
 var _errorBoundaryFallback = require("./error-boundary-fallback");
@@ -25,12 +27,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-var COMPONENT_NAME = 'LinkPicker';
-var ANALYTICS_CHANNEL = 'media';
 var PACKAGE_DATA = {
   packageName: _version.name,
   packageVersion: _version.version,
-  componentName: COMPONENT_NAME
+  componentName: _constants.COMPONENT_NAME
 };
 var LazyLinkPicker = (0, _reactLooselyLazy.lazyForPaint)(function () {
   return Promise.resolve().then(function () {
@@ -39,7 +39,7 @@ var LazyLinkPicker = (0, _reactLooselyLazy.lazyForPaint)(function () {
 });
 var ComposedLinkPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsErrorBoundary, {
-    channel: ANALYTICS_CHANNEL,
+    channel: _constants.ANALYTICS_CHANNEL,
     data: PACKAGE_DATA,
     ErrorComponent: _errorBoundaryFallback.ErrorBoundaryFallback
   }, /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {

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

@@ -21,6 +21,8 @@ var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
+var _analyticsNext = require("@atlaskit/analytics-next");
+
 var _button = _interopRequireWildcard(require("@atlaskit/button"));
 
 var _form = require("@atlaskit/form");
@@ -31,6 +33,10 @@ var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 
+var _analytics = _interopRequireDefault(require("../../analytics.codegen"));
+
+var _constants = require("../../common/constants");
+
 var _usePlugins2 = require("../../services/use-plugins");
 
 var _useSearchQuery = require("../../services/use-search-query");
@@ -116,6 +122,9 @@ function LinkPicker(_ref) {
       initUrl = _ref.url,
       initDisplayText = _ref.displayText;
 
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
   var _useReducer = (0, _react.useReducer)(reducer, _objectSpread(_objectSpread({}, initState), {}, {
     url: (0, _url2.normalizeUrl)(initUrl) || '',
     displayText: initDisplayText || ''
@@ -145,6 +154,16 @@ function LinkPicker(_ref) {
   var isEditing = !!initUrl;
   var selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
+  (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();
@@ -217,6 +236,8 @@ function LinkPicker(_ref) {
     }
   }, [activeIndex, items]);
   var handleInsert = (0, _react.useCallback)(function (url, title, inputType) {
+    var event = createAnalyticsEvent((0, _analytics.default)('ui.form.submitted.linkPicker', {}));
+    event.fire(_constants.ANALYTICS_CHANNEL);
     onSubmit(_objectSpread({
       url: url,
       displayText: displayText || null,
@@ -227,7 +248,7 @@ function LinkPicker(_ref) {
     }, inputType === 'manual' ? {
       rawUrl: state.url
     } : {}));
-  }, [displayText, onSubmit, state.url]);
+  }, [displayText, onSubmit, state.url, createAnalyticsEvent]);
   var handleSelected = (0, _react.useCallback)(function (objectId) {
     var selectedItem = items === null || items === void 0 ? void 0 : items.find(function (item) {
       return item.objectId === objectId;
@@ -236,10 +257,13 @@ function LinkPicker(_ref) {
     if (selectedItem) {
       var _url = selectedItem.url,
           name = selectedItem.name;
+      dispatchEvent(new Event('submit'));
       handleInsert(_url, name, 'typeAhead');
     }
   }, [handleInsert, items]);
-  var handleSubmit = (0, _react.useCallback)(function () {
+  var handleSubmit = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+
     if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
@@ -272,9 +296,10 @@ function LinkPicker(_ref) {
     size: "medium",
     label: ''
   }));
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)("form", {
     "data-testid": testIds.linkPicker,
-    css: _styled.rootContainerStyles
+    css: _styled.rootContainerStyles,
+    onSubmit: handleSubmit
   }, screenReaderText && (0, _react2.jsx)(_announcer.default, {
     ariaLive: "assertive",
     text: screenReaderText,
@@ -300,7 +325,6 @@ function LinkPicker(_ref) {
     "aria-describedby": screenReaderDescriptionId,
     error: invalidUrl ? intl.formatMessage(_messages.messages.linkInvalid) : null,
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
   }), (0, _react2.jsx)(_textInput.default, {
@@ -313,7 +337,6 @@ function LinkPicker(_ref) {
     clearLabel: intl.formatMessage(_messages.messages.clearText),
     "aria-label": intl.formatMessage(_messages.messages.linkAriaLabel),
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
   }), queryState && (0, _react2.jsx)(_react.Fragment, null, tabs.length > 0 && (0, _react2.jsx)("div", {
@@ -387,7 +410,6 @@ function LinkPicker(_ref) {
   }, intl.formatMessage(_messages.messages.cancelButton)), (0, _react2.jsx)(_button.default, {
     type: "submit",
     appearance: "primary",
-    onClick: handleSubmit,
     testId: testIds.insertButton
   }, intl.formatMessage(insertButtonMsg)))));
 }

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

@@ -29,13 +29,12 @@ var _styled = require("./styled");
 
 var _ = require("../");
 
-var _excluded = ["name", "label", "autoFocus", "onSubmit", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
+var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
 
 var PanelTextInput = function PanelTextInput(props) {
   var name = props.name,
       label = props.label,
       autoFocus = props.autoFocus,
-      onSubmit = props.onSubmit,
       onRedo = props.onRedo,
       onUndo = props.onUndo,
       onChange = props.onChange,
@@ -61,13 +60,7 @@ var PanelTextInput = function PanelTextInput(props) {
     onChange(e.currentTarget.value);
   }, [onChange]);
   var handleKeydown = (0, _react.useCallback)(function (e) {
-    var value = e.currentTarget.value;
-
-    if (e.keyCode === 13 && onSubmit) {
-      e.preventDefault(); // Prevent from submitting if an editor is inside a form.
-
-      onSubmit(value);
-    } else if (typeof onUndo === 'function' && (0, _utils.isUndoEvent)(e)) {
+    if (typeof onUndo === 'function' && (0, _utils.isUndoEvent)(e)) {
       e.preventDefault();
       onUndo();
     } else if (typeof onRedo === 'function' && (0, _utils.isRedoEvent)(e)) {
@@ -78,7 +71,7 @@ var PanelTextInput = function PanelTextInput(props) {
     if (onKeyDown) {
       onKeyDown(e);
     }
-  }, [onSubmit, onUndo, onRedo, onKeyDown]);
+  }, [onUndo, onRedo, onKeyDown]);
   var handleClear = (0, _react.useCallback)(function () {
     if (inputRef.current && onClear) {
       inputRef.current.focus();
@@ -88,6 +81,7 @@ var PanelTextInput = function PanelTextInput(props) {
   var clearText = restProps.value !== '' && (0, _react2.jsx)(_tooltip.default, {
     content: clearLabel
   }, (0, _react2.jsx)("button", {
+    type: "button",
     css: _styled.clearTextButtonStyles,
     onClick: handleClear,
     "data-testid": _.testIds.clearUrlButton

package/dist/cjs/version.json

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

package/dist/es2019/analytics.codegen.js

@@ -0,0 +1,20 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Generates analytics utilities from the package analytics spec yaml
+ *
+ * @codegen <<SignedSource::ffa7ec78cc793f941d06cdb25b07dc8a>>
+ * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
+ */
+function createEventPayload(eventKey, attributes) {
+  const event = eventKey.split('.');
+  return {
+    eventType: event[0],
+    actionSubject: event[1],
+    action: event[2],
+    actionSubjectId: event[3],
+    attributes: attributes
+  };
+}
+
+export default createEventPayload;

package/dist/es2019/common/constants.js

@@ -0,0 +1,2 @@
+export const ANALYTICS_CHANNEL = 'media';
+export const COMPONENT_NAME = 'LinkPicker';

package/dist/es2019/ui/index.js

@@ -1,11 +1,10 @@
 import React, { memo } from 'react';
 import { AnalyticsErrorBoundary } from '@atlaskit/analytics-next';
 import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
+import { COMPONENT_NAME, ANALYTICS_CHANNEL } from '../common/constants';
 import { name as packageName, version as packageVersion } from '../version.json';
 import { ErrorBoundaryFallback } from './error-boundary-fallback';
 import { LoaderFallback } from './loader-fallback';
-const COMPONENT_NAME = 'LinkPicker';
-const ANALYTICS_CHANNEL = 'media';
 const PACKAGE_DATA = {
   packageName,
   packageVersion,

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

@@ -1,14 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { Fragment, useCallback, useLayoutEffect, useReducer } from 'react';
+import { Fragment, useCallback, useEffect, useLayoutEffect, useReducer } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import Button, { ButtonGroup } from '@atlaskit/button';
 import { FormFooter } from '@atlaskit/form';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import Tabs, { Tab, TabList } from '@atlaskit/tabs';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import createEventPayload from '../../analytics.codegen';
+import { ANALYTICS_CHANNEL } from '../../common/constants';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import { messages } from './messages';
@@ -74,6 +77,9 @@ function LinkPicker({
 }) {
   var _queryState$query, _items$length, _errorFallback;
 
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const [state, dispatch] = useReducer(reducer, { ...initState,
     url: normalizeUrl(initUrl) || '',
     displayText: initDisplayText || ''
@@ -100,6 +106,16 @@ function LinkPicker({
   const isEditing = !!initUrl;
   const selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   const isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
+  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();
@@ -172,6 +188,8 @@ function LinkPicker({
     }
   }, [activeIndex, items]);
   const handleInsert = useCallback((url, title, inputType) => {
+    const event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {}));
+    event.fire(ANALYTICS_CHANNEL);
     onSubmit({
       url,
       displayText: displayText || null,
@@ -183,7 +201,7 @@ function LinkPicker({
         rawUrl: state.url
       } : {})
     });
-  }, [displayText, onSubmit, state.url]);
+  }, [displayText, onSubmit, state.url, createAnalyticsEvent]);
   const handleSelected = useCallback(objectId => {
     const selectedItem = items === null || items === void 0 ? void 0 : items.find(item => item.objectId === objectId);
 
@@ -192,10 +210,13 @@ function LinkPicker({
         url,
         name
       } = selectedItem;
+      dispatchEvent(new Event('submit'));
       handleInsert(url, name, 'typeAhead');
     }
   }, [handleInsert, items]);
-  const handleSubmit = useCallback(() => {
+  const handleSubmit = useCallback(event => {
+    event.preventDefault();
+
     if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
@@ -228,9 +249,10 @@ function LinkPicker({
     size: "medium",
     label: ''
   }));
-  return jsx("div", {
+  return jsx("form", {
     "data-testid": testIds.linkPicker,
-    css: rootContainerStyles
+    css: rootContainerStyles,
+    onSubmit: handleSubmit
   }, screenReaderText && jsx(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
@@ -256,7 +278,6 @@ function LinkPicker({
     "aria-describedby": screenReaderDescriptionId,
     error: invalidUrl ? intl.formatMessage(messages.linkInvalid) : null,
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
   }), jsx(PanelTextInput, {
@@ -269,7 +290,6 @@ function LinkPicker({
     clearLabel: intl.formatMessage(messages.clearText),
     "aria-label": intl.formatMessage(messages.linkAriaLabel),
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
   }), queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
@@ -337,7 +357,6 @@ function LinkPicker({
   }, intl.formatMessage(messages.cancelButton)), jsx(Button, {
     type: "submit",
     appearance: "primary",
-    onClick: handleSubmit,
     testId: testIds.insertButton
   }, intl.formatMessage(insertButtonMsg)))));
 }

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

@@ -16,7 +16,6 @@ const PanelTextInput = props => {
     name,
     label,
     autoFocus,
-    onSubmit,
     onRedo,
     onUndo,
     onChange,
@@ -43,13 +42,7 @@ const PanelTextInput = props => {
     onChange(e.currentTarget.value);
   }, [onChange]);
   const handleKeydown = useCallback(e => {
-    const value = e.currentTarget.value;
-
-    if (e.keyCode === 13 && onSubmit) {
-      e.preventDefault(); // Prevent from submitting if an editor is inside a form.
-
-      onSubmit(value);
-    } else if (typeof onUndo === 'function' && isUndoEvent(e)) {
+    if (typeof onUndo === 'function' && isUndoEvent(e)) {
       e.preventDefault();
       onUndo();
     } else if (typeof onRedo === 'function' && isRedoEvent(e)) {
@@ -60,7 +53,7 @@ const PanelTextInput = props => {
     if (onKeyDown) {
       onKeyDown(e);
     }
-  }, [onSubmit, onUndo, onRedo, onKeyDown]);
+  }, [onUndo, onRedo, onKeyDown]);
   const handleClear = useCallback(() => {
     if (inputRef.current && onClear) {
       inputRef.current.focus();
@@ -70,6 +63,7 @@ const PanelTextInput = props => {
   const clearText = restProps.value !== '' && jsx(Tooltip, {
     content: clearLabel
   }, jsx("button", {
+    type: "button",
     css: clearTextButtonStyles,
     onClick: handleClear,
     "data-testid": testIds.clearUrlButton

package/dist/es2019/version.json

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

package/dist/esm/analytics.codegen.js

@@ -0,0 +1,20 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Generates analytics utilities from the package analytics spec yaml
+ *
+ * @codegen <<SignedSource::ffa7ec78cc793f941d06cdb25b07dc8a>>
+ * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
+ */
+function createEventPayload(eventKey, attributes) {
+  var event = eventKey.split('.');
+  return {
+    eventType: event[0],
+    actionSubject: event[1],
+    action: event[2],
+    actionSubjectId: event[3],
+    attributes: attributes
+  };
+}
+
+export default createEventPayload;

package/dist/esm/common/constants.js

@@ -0,0 +1,2 @@
+export var ANALYTICS_CHANNEL = 'media';
+export var COMPONENT_NAME = 'LinkPicker';

package/dist/esm/ui/index.js

@@ -1,11 +1,10 @@
 import React, { memo } from 'react';
 import { AnalyticsErrorBoundary } from '@atlaskit/analytics-next';
 import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
+import { COMPONENT_NAME, ANALYTICS_CHANNEL } from '../common/constants';
 import { name as packageName, version as packageVersion } from '../version.json';
 import { ErrorBoundaryFallback } from './error-boundary-fallback';
 import { LoaderFallback } from './loader-fallback';
-var COMPONENT_NAME = 'LinkPicker';
-var ANALYTICS_CHANNEL = 'media';
 var PACKAGE_DATA = {
   packageName: packageName,
   packageVersion: packageVersion,

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

@@ -7,14 +7,17 @@ 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, useLayoutEffect, useReducer } from 'react';
+import { Fragment, useCallback, useEffect, useLayoutEffect, useReducer } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import Button, { ButtonGroup } from '@atlaskit/button';
 import { FormFooter } from '@atlaskit/form';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import Tabs, { Tab, TabList } from '@atlaskit/tabs';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import createEventPayload from '../../analytics.codegen';
+import { ANALYTICS_CHANNEL } from '../../common/constants';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import { messages } from './messages';
@@ -77,6 +80,9 @@ function LinkPicker(_ref) {
       initUrl = _ref.url,
       initDisplayText = _ref.displayText;
 
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
   var _useReducer = useReducer(reducer, _objectSpread(_objectSpread({}, initState), {}, {
     url: normalizeUrl(initUrl) || '',
     displayText: initDisplayText || ''
@@ -106,6 +112,16 @@ function LinkPicker(_ref) {
   var isEditing = !!initUrl;
   var selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
+  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();
@@ -178,6 +194,8 @@ function LinkPicker(_ref) {
     }
   }, [activeIndex, items]);
   var handleInsert = useCallback(function (url, title, inputType) {
+    var event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {}));
+    event.fire(ANALYTICS_CHANNEL);
     onSubmit(_objectSpread({
       url: url,
       displayText: displayText || null,
@@ -188,7 +206,7 @@ function LinkPicker(_ref) {
     }, inputType === 'manual' ? {
       rawUrl: state.url
     } : {}));
-  }, [displayText, onSubmit, state.url]);
+  }, [displayText, onSubmit, state.url, createAnalyticsEvent]);
   var handleSelected = useCallback(function (objectId) {
     var selectedItem = items === null || items === void 0 ? void 0 : items.find(function (item) {
       return item.objectId === objectId;
@@ -197,10 +215,13 @@ function LinkPicker(_ref) {
     if (selectedItem) {
       var _url = selectedItem.url,
           name = selectedItem.name;
+      dispatchEvent(new Event('submit'));
       handleInsert(_url, name, 'typeAhead');
     }
   }, [handleInsert, items]);
-  var handleSubmit = useCallback(function () {
+  var handleSubmit = useCallback(function (event) {
+    event.preventDefault();
+
     if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
@@ -233,9 +254,10 @@ function LinkPicker(_ref) {
     size: "medium",
     label: ''
   }));
-  return jsx("div", {
+  return jsx("form", {
     "data-testid": testIds.linkPicker,
-    css: rootContainerStyles
+    css: rootContainerStyles,
+    onSubmit: handleSubmit
   }, screenReaderText && jsx(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
@@ -261,7 +283,6 @@ function LinkPicker(_ref) {
     "aria-describedby": screenReaderDescriptionId,
     error: invalidUrl ? intl.formatMessage(messages.linkInvalid) : null,
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
   }), jsx(PanelTextInput, {
@@ -274,7 +295,6 @@ function LinkPicker(_ref) {
     clearLabel: intl.formatMessage(messages.clearText),
     "aria-label": intl.formatMessage(messages.linkAriaLabel),
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
   }), queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
@@ -348,7 +368,6 @@ function LinkPicker(_ref) {
   }, intl.formatMessage(messages.cancelButton)), jsx(Button, {
     type: "submit",
     appearance: "primary",
-    onClick: handleSubmit,
     testId: testIds.insertButton
   }, intl.formatMessage(insertButtonMsg)))));
 }

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "label", "autoFocus", "onSubmit", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
+var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
 
 /** @jsx jsx */
 import { useCallback, useRef, Fragment } from 'react';
@@ -17,7 +17,6 @@ var PanelTextInput = function PanelTextInput(props) {
   var name = props.name,
       label = props.label,
       autoFocus = props.autoFocus,
-      onSubmit = props.onSubmit,
       onRedo = props.onRedo,
       onUndo = props.onUndo,
       onChange = props.onChange,
@@ -44,13 +43,7 @@ var PanelTextInput = function PanelTextInput(props) {
     onChange(e.currentTarget.value);
   }, [onChange]);
   var handleKeydown = useCallback(function (e) {
-    var value = e.currentTarget.value;
-
-    if (e.keyCode === 13 && onSubmit) {
-      e.preventDefault(); // Prevent from submitting if an editor is inside a form.
-
-      onSubmit(value);
-    } else if (typeof onUndo === 'function' && isUndoEvent(e)) {
+    if (typeof onUndo === 'function' && isUndoEvent(e)) {
       e.preventDefault();
       onUndo();
     } else if (typeof onRedo === 'function' && isRedoEvent(e)) {
@@ -61,7 +54,7 @@ var PanelTextInput = function PanelTextInput(props) {
     if (onKeyDown) {
       onKeyDown(e);
     }
-  }, [onSubmit, onUndo, onRedo, onKeyDown]);
+  }, [onUndo, onRedo, onKeyDown]);
   var handleClear = useCallback(function () {
     if (inputRef.current && onClear) {
       inputRef.current.focus();
@@ -71,6 +64,7 @@ var PanelTextInput = function PanelTextInput(props) {
   var clearText = restProps.value !== '' && jsx(Tooltip, {
     content: clearLabel
   }, jsx("button", {
+    type: "button",
     css: clearTextButtonStyles,
     onClick: handleClear,
     "data-testid": testIds.clearUrlButton

package/dist/esm/version.json

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

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

@@ -0,0 +1,24 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Generates analytics utilities from the package analytics spec yaml
+ *
+ * @codegen <<SignedSource::ffa7ec78cc793f941d06cdb25b07dc8a>>
+ * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
+ */
+declare type FormSubmittedLinkPickerAttributesType = {};
+declare type InlineDialogViewedLinkPickerAttributesType = {};
+declare type InlineDialogClosedLinkPickerAttributesType = {};
+declare type AnalyticsEventAttributes = {
+    'ui.form.submitted.linkPicker': FormSubmittedLinkPickerAttributesType;
+    'ui.inlineDialog.viewed.linkPicker': InlineDialogViewedLinkPickerAttributesType;
+    'ui.inlineDialog.closed.linkPicker': InlineDialogClosedLinkPickerAttributesType;
+};
+declare function createEventPayload<K extends keyof AnalyticsEventAttributes>(eventKey: K, attributes: AnalyticsEventAttributes[K]): {
+    eventType: string;
+    actionSubject: string;
+    action: string;
+    actionSubjectId: string;
+    attributes: AnalyticsEventAttributes[K];
+};
+export default createEventPayload;

package/dist/types/common/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const ANALYTICS_CHANNEL = "media";
+export declare const COMPONENT_NAME = "LinkPicker";

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

@@ -6,7 +6,6 @@ export interface Props extends Omit<TextFieldProps, 'value' | 'onChange' | 'auto
     autoFocus?: boolean;
     value: string;
     onChange: (value: string) => void;
-    onSubmit?: (value: string) => void;
     onUndo?: Function;
     onRedo?: Function;
     onClear?: Function;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -26,7 +26,8 @@
     ".": "./src/index.ts"
   },
   "scripts": {
-    "ak-postbuild": "ls -d dist/* | grep -v dist/types | xargs -n 1 copyfiles -u 1 -V src/**/*.svg"
+    "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"
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.3.1",
@@ -52,6 +53,7 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
+    "@af/codegen": "*",
     "@atlaskit/activity-provider": "^2.3.2",
     "@atlaskit/docs": "*",
     "@atlaskit/link-test-helpers": "^1.4.0",
@@ -61,17 +63,22 @@
     "@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": "^17.0.0",
-    "@atlassian/link-picker-plugins": "^4.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^18.0.0",
+    "@atlassian/link-picker-plugins": "^5.1.0",
+    "@atlassian/recent-work-client": "^1.5.0",
     "@atlassian/search-provider": "^2.3.0",
     "@testing-library/dom": "^7.7.3",
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^8.0.1",
     "@testing-library/react-hooks": "^1.0.4",
     "@testing-library/user-event": "10.4.0",
+    "@types/js-yaml": "^3.12.5",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",
+    "js-yaml": "^3.13.1",
+    "lodash": "^4.17.21",
     "mockdate": "^3.0.2",
+    "prettier": "^2.1.1",
     "react-dom": "^16.8.0",
     "sinon": "^2.2.0",
     "typescript": "4.2.4"