@atlaskit/link-picker 1.8.5 → 1.9.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-picker
 
+## 1.9.1
+
+### Patch Changes
+
+- [`548071512ad`](https://bitbucket.org/atlassian/atlassian-frontend/commits/548071512ad) - [ux] Add truncating logic to metadata to be constrained to one line
+
+## 1.9.0
+
+### Minor Changes
+
+- [`26ca68a3993`](https://bitbucket.org/atlassian/atlassian-frontend/commits/26ca68a3993) - Add support for the onSubmit handler prop to receive a second argument, being a clone of the form submitted analytic event
+
 ## 1.8.5
 
 ### Patch Changes

package/dist/cjs/ui/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ComposedLinkPicker = void 0;
+exports.PACKAGE_DATA = exports.ComposedLinkPicker = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -32,6 +32,7 @@ var PACKAGE_DATA = {
   packageVersion: _version.version,
   componentName: _constants.COMPONENT_NAME
 };
+exports.PACKAGE_DATA = PACKAGE_DATA;
 var LazyLinkPicker = (0, _reactLooselyLazy.lazyForPaint)(function () {
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require('./link-picker'));

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

@@ -232,7 +232,11 @@ function LinkPicker(_ref) {
     }
   }, [activeIndex, items]);
   var handleInsert = (0, _react.useCallback)(function (url, title, inputType) {
-    var event = createAnalyticsEvent((0, _analytics.default)('ui.form.submitted.linkPicker', {}));
+    var event = createAnalyticsEvent((0, _analytics.default)('ui.form.submitted.linkPicker', {})); // Clone the event so that it can be emitted for consumer usage
+    // This must happen BEFORE the original event is fired!
+
+    var consumerEvent = event.clone(); // Dispatch the original event to our channel
+
     event.fire(_constants.ANALYTICS_CHANNEL);
     onSubmit(_objectSpread({
       url: url,
@@ -243,7 +247,7 @@ function LinkPicker(_ref) {
       }
     }, inputType === 'manual' ? {
       rawUrl: state.url
-    } : {}));
+    } : {}), consumerEvent);
   }, [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) {

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

@@ -63,7 +63,13 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
   }, item.name), (0, _react2.jsx)("div", {
     "data-testid": "".concat(_.testIds.searchResultItem, "-subtitle"),
     css: _styled.listItemContextStyles
-  }, container, container && date && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), date && (0, _react2.jsx)(_react.Fragment, null, formatDate(date)))));
+  }, container && (0, _react2.jsx)("div", {
+    css: _styled.listItemContainerStyles
+  }, (0, _react2.jsx)("span", {
+    css: _styled.listItemContainerInnerStyles
+  }, container)), date && (0, _react2.jsx)("div", {
+    css: _styled.listItemContainerInnerStyles
+  }, container && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), (0, _react2.jsx)(_react.Fragment, null, formatDate(date))))));
 };
 
 var _default = (0, _reactIntlNext.injectIntl)(LinkSearchListItem);

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.relativeFontSizeToBase16 = exports.listItemNameStyles = exports.listItemContextStyles = exports.itemNameStyles = exports.itemIconStyles = exports.imgStyles = exports.composeListItemStyles = void 0;
+exports.relativeFontSizeToBase16 = exports.listItemNameStyles = exports.listItemContextStyles = exports.listItemContainerStyles = exports.listItemContainerInnerStyles = exports.itemNameStyles = exports.itemIconStyles = exports.imgStyles = exports.composeListItemStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,7 +19,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _theme = require("@atlaskit/theme");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
   if (typeof px === 'string') {
@@ -51,9 +51,13 @@ var itemNameStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0,
 exports.itemNameStyles = itemNameStyles;
 var listItemNameStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), (0, _tokens.token)('color.text', _colors.N800));
 exports.listItemNameStyles = listItemNameStyles;
-var listItemContextStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n"])), (0, _tokens.token)('color.text', _colors.N300), relativeFontSizeToBase16((0, _theme.fontSizeSmall)()), (0, _theme.fontSize)());
+var listItemContextStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n  display: flex;\n"])), (0, _tokens.token)('color.text', _colors.N300), relativeFontSizeToBase16((0, _theme.fontSizeSmall)()), (0, _theme.fontSize)());
 exports.listItemContextStyles = listItemContextStyles;
-var itemIconStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n  margin-top: 3px;\n  margin-right: 12px;\n"])), (0, _constants.gridSize)() * 2);
+var listItemContainerStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+exports.listItemContainerStyles = listItemContainerStyles;
+var listItemContainerInnerStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: nowrap;\n"])));
+exports.listItemContainerInnerStyles = listItemContainerInnerStyles;
+var itemIconStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n  margin-top: 3px;\n  margin-right: 12px;\n"])), (0, _constants.gridSize)() * 2);
 exports.itemIconStyles = itemIconStyles;
-var imgStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+var imgStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: ", "px;\n"])), (0, _constants.gridSize)() * 2);
 exports.imgStyles = imgStyles;

package/dist/cjs/version.json

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

package/dist/es2019/ui/index.js

@@ -5,7 +5,7 @@ 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 PACKAGE_DATA = {
+export const PACKAGE_DATA = {
   packageName,
   packageVersion,
   componentName: COMPONENT_NAME

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

@@ -184,7 +184,11 @@ function LinkPicker({
     }
   }, [activeIndex, items]);
   const handleInsert = useCallback((url, title, inputType) => {
-    const event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {}));
+    const event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {})); // Clone the event so that it can be emitted for consumer usage
+    // This must happen BEFORE the original event is fired!
+
+    const consumerEvent = event.clone(); // Dispatch the original event to our channel
+
     event.fire(ANALYTICS_CHANNEL);
     onSubmit({
       url,
@@ -196,7 +200,7 @@ function LinkPicker({
       ...(inputType === 'manual' ? {
         rawUrl: state.url
       } : {})
-    });
+    }, consumerEvent);
   }, [displayText, onSubmit, state.url, createAnalyticsEvent]);
   const handleSelected = useCallback(objectId => {
     const selectedItem = items === null || items === void 0 ? void 0 : items.find(item => item.objectId === objectId);

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

@@ -3,7 +3,7 @@ import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { transformTimeStamp } from '../transformTimeStamp';
-import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
+import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles, listItemContainerStyles, listItemContainerInnerStyles } from './styled';
 import { testIds } from '../';
 
 const LinkSearchListItem = ({
@@ -45,7 +45,13 @@ const LinkSearchListItem = ({
   }, item.name), jsx("div", {
     "data-testid": `${testIds.searchResultItem}-subtitle`,
     css: listItemContextStyles
-  }, container, container && date && jsx(Fragment, null, "\xA0 \u2022\xA0 "), date && jsx(Fragment, null, formatDate(date)))));
+  }, container && jsx("div", {
+    css: listItemContainerStyles
+  }, jsx("span", {
+    css: listItemContainerInnerStyles
+  }, container)), date && jsx("div", {
+    css: listItemContainerInnerStyles
+  }, container && jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, formatDate(date))))));
 };
 
 export default injectIntl(LinkSearchListItem);

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

@@ -54,6 +54,14 @@ export const listItemContextStyles = css`
   color: ${token('color.text', N300)};
   font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
   line-height: ${fontSize()}px;
+  display: flex;
+`;
+export const listItemContainerStyles = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+export const listItemContainerInnerStyles = css`
+  white-space: nowrap;
 `;
 export const itemIconStyles = css`
   min-width: ${gridSize() * 2}px;

package/dist/es2019/version.json

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

package/dist/esm/ui/index.js

@@ -5,7 +5,7 @@ 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 PACKAGE_DATA = {
+export var PACKAGE_DATA = {
   packageName: packageName,
   packageVersion: packageVersion,
   componentName: COMPONENT_NAME

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

@@ -188,7 +188,11 @@ function LinkPicker(_ref) {
     }
   }, [activeIndex, items]);
   var handleInsert = useCallback(function (url, title, inputType) {
-    var event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {}));
+    var event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {})); // Clone the event so that it can be emitted for consumer usage
+    // This must happen BEFORE the original event is fired!
+
+    var consumerEvent = event.clone(); // Dispatch the original event to our channel
+
     event.fire(ANALYTICS_CHANNEL);
     onSubmit(_objectSpread({
       url: url,
@@ -199,7 +203,7 @@ function LinkPicker(_ref) {
       }
     }, inputType === 'manual' ? {
       rawUrl: state.url
-    } : {}));
+    } : {}), consumerEvent);
   }, [displayText, onSubmit, state.url, createAnalyticsEvent]);
   var handleSelected = useCallback(function (objectId) {
     var selectedItem = items === null || items === void 0 ? void 0 : items.find(function (item) {

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

@@ -3,7 +3,7 @@ import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { transformTimeStamp } from '../transformTimeStamp';
-import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
+import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles, listItemContainerStyles, listItemContainerInnerStyles } from './styled';
 import { testIds } from '../';
 
 var LinkSearchListItem = function LinkSearchListItem(_ref) {
@@ -51,7 +51,13 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
   }, item.name), jsx("div", {
     "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
     css: listItemContextStyles
-  }, container, container && date && jsx(Fragment, null, "\xA0 \u2022\xA0 "), date && jsx(Fragment, null, formatDate(date)))));
+  }, container && jsx("div", {
+    css: listItemContainerStyles
+  }, jsx("span", {
+    css: listItemContainerInnerStyles
+  }, container)), date && jsx("div", {
+    css: listItemContainerInnerStyles
+  }, container && jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, formatDate(date))))));
 };
 
 export default injectIntl(LinkSearchListItem);

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
@@ -32,6 +32,8 @@ export var composeListItemStyles = function composeListItemStyles() {
 };
 export var itemNameStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
 export var listItemNameStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), token('color.text', N800));
-export var listItemContextStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n"])), token('color.text', N300), relativeFontSizeToBase16(fontSizeSmall()), fontSize());
-export var itemIconStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n  margin-top: 3px;\n  margin-right: 12px;\n"])), gridSize() * 2);
-export var imgStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  max-width: ", "px;\n"])), gridSize() * 2);
+export var listItemContextStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n  display: flex;\n"])), token('color.text', N300), relativeFontSizeToBase16(fontSizeSmall()), fontSize());
+export var listItemContainerStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+export var listItemContainerInnerStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n"])));
+export var itemIconStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n  margin-top: 3px;\n  margin-right: 12px;\n"])), gridSize() * 2);
+export var imgStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  max-width: ", "px;\n"])), gridSize() * 2);

package/dist/esm/version.json

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

package/dist/types/ui/index.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
 import { LinkPickerProps } from './link-picker';
+export declare const PACKAGE_DATA: {
+    packageName: any;
+    packageVersion: any;
+    componentName: string;
+};
 export declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => JSX.Element>;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { LinkInputType, LinkPickerPlugin } from '../types';
 export declare const RECENT_SEARCH_LIST_SIZE = 5;
 export declare const CONTACT_SUPPORT_LINK = "https://support.atlassian.com/contact/";
@@ -42,8 +43,10 @@ interface OnSubmitParameter {
     rawUrl?: string;
 }
 export interface LinkPickerProps {
-    /** Callback to fire on form submission. */
-    onSubmit: (arg: OnSubmitParameter) => void;
+    /**
+     * Callback to fire on form submission.
+     */
+    onSubmit: (arg: OnSubmitParameter, analytic?: UIAnalyticsEvent | null) => void;
     /** Callback to fire when the cancel button is clicked. */
     onCancel: () => void;
     /** Callback to fire when content is changed inside the link picker e.g. items, when loading, tabs */

package/dist/types/ui/link-picker/list-item/styled.d.ts

@@ -3,5 +3,7 @@ export declare const composeListItemStyles: (active?: boolean, selected?: boolea
 export declare const itemNameStyles: import("@emotion/react").SerializedStyles;
 export declare const listItemNameStyles: import("@emotion/react").SerializedStyles;
 export declare const listItemContextStyles: import("@emotion/react").SerializedStyles;
+export declare const listItemContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const listItemContainerInnerStyles: import("@emotion/react").SerializedStyles;
 export declare const itemIconStyles: import("@emotion/react").SerializedStyles;
 export declare const imgStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.8.5",
+  "version": "1.9.1",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -56,6 +56,7 @@
     "@af/codegen": "*",
     "@atlaskit/activity-provider": "^2.3.2",
     "@atlaskit/docs": "*",
+    "@atlaskit/link-analytics": "^1.1.0",
     "@atlaskit/link-test-helpers": "^1.4.0",
     "@atlaskit/popup": "^1.4.0",
     "@atlaskit/ssr": "*",
@@ -63,8 +64,8 @@
     "@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": "^18.0.0",
-    "@atlassian/link-picker-plugins": "^5.1.0",
+    "@atlassian/link-picker-atlassian-plugin": "^19.0.0",
+    "@atlassian/link-picker-plugins": "^6.0.0",
     "@atlassian/recent-work-client": "^1.6.0",
     "@atlassian/search-provider": "^2.3.0",
     "@testing-library/dom": "^8.17.1",

package/report.api.md

@@ -10,6 +10,7 @@
 import { MessageDescriptor } from 'react-intl-next';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 
 export declare type LinkInputType = 'manual' | 'typeAhead';
 
@@ -35,8 +36,13 @@ export declare type LinkPickerPluginErrorFallback = (
 ) => ReactNode;
 
 export declare interface LinkPickerProps {
-  /** Callback to fire on form submission. */
-  onSubmit: (arg: OnSubmitParameter) => void;
+  /**
+   * Callback to fire on form submission.
+   */
+  onSubmit: (
+    arg: OnSubmitParameter,
+    analytic?: UIAnalyticsEvent | null,
+  ) => void;
   /** Callback to fire when the cancel button is clicked. */
   onCancel: () => void;
   /** Callback to fire when content is changed inside the link picker e.g. items, when loading, tabs */