@atlaskit/link-picker 1.8.0 → 1.8.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/link-picker
 
+## 1.8.3
+
+### Patch Changes
+
+- [`7e07778ec20`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e07778ec20) - Add linkState attribute to link picker analytics context
+
+## 1.8.2
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 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

package/dist/cjs/analytics.codegen.js

@@ -10,16 +10,16 @@ exports.default = void 0;
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::0cc1b4d9c22b31491ded3e581114ab2c>>
+ * @codegen <<SignedSource::115bafba068f36f76da67200ee2d08c4>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 function createEventPayload(eventKey, attributes) {
   var event = eventKey.split('.');
   return {
-    eventType: 'ui',
-    actionSubject: event[0],
-    action: event[1],
-    actionSubjectId: event[2],
+    eventType: event[0],
+    actionSubject: event[1],
+    action: event[2],
+    actionSubjectId: event[3],
     attributes: attributes
   };
 }

package/dist/cjs/services/use-search-query/index.js

@@ -7,7 +7,7 @@ exports.useSearchQuery = useSearchQuery;
 
 var _react = require("react");
 
-var _url = require("../../ui/link-picker/url");
+var _url = require("../../common/utils/url");
 
 function useSearchQuery(state) {
   var _queryState$current;

package/dist/cjs/services/with-link-picker-analytics/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withLinkPickerAnalyticsContext = withLinkPickerAnalyticsContext;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _url = require("../../common/utils/url");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function withLinkPickerAnalyticsContext(WrappedComponent) {
+  return function (props) {
+    var data = (0, _react.useMemo)(function () {
+      return {
+        attributes: {
+          linkState: (0, _url.normalizeUrl)(props.url) ? 'editLink' : 'newLink'
+        }
+      };
+    }, [props.url]);
+    return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+      data: data
+    }, /*#__PURE__*/_react.default.createElement(WrappedComponent, props));
+  };
+}

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

@@ -41,13 +41,15 @@ var _usePlugins2 = require("../../services/use-plugins");
 
 var _useSearchQuery = require("../../services/use-search-query");
 
+var _withLinkPickerAnalytics = require("../../services/with-link-picker-analytics");
+
 var _messages = require("./messages");
 
 var _textInput = _interopRequireDefault(require("./text-input"));
 
 var _linkSearchList = _interopRequireDefault(require("./link-search-list"));
 
-var _url2 = require("./url");
+var _url2 = require("../../common/utils/url");
 
 var _styled = require("./styled");
 
@@ -154,6 +156,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();
@@ -226,7 +238,7 @@ function LinkPicker(_ref) {
     }
   }, [activeIndex, items]);
   var handleInsert = (0, _react.useCallback)(function (url, title, inputType) {
-    var event = createAnalyticsEvent((0, _analytics.default)('form.submitted.linkPicker', {}));
+    var event = createAnalyticsEvent((0, _analytics.default)('ui.form.submitted.linkPicker', {}));
     event.fire(_constants.ANALYTICS_CHANNEL);
     onSubmit(_objectSpread({
       url: url,
@@ -404,7 +416,8 @@ function LinkPicker(_ref) {
   }, intl.formatMessage(insertButtonMsg)))));
 }
 
-var _default = LinkPicker;
+var _default = (0, _withLinkPickerAnalytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0, _react.memo)(LinkPicker));
+
 exports.default = _default;
 
 function getScreenReaderText(items, selectedIndex, intl) {

package/dist/cjs/version.json

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

package/dist/es2019/analytics.codegen.js

@@ -3,16 +3,16 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::0cc1b4d9c22b31491ded3e581114ab2c>>
+ * @codegen <<SignedSource::115bafba068f36f76da67200ee2d08c4>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 function createEventPayload(eventKey, attributes) {
   const event = eventKey.split('.');
   return {
-    eventType: 'ui',
-    actionSubject: event[0],
-    action: event[1],
-    actionSubjectId: event[2],
+    eventType: event[0],
+    actionSubject: event[1],
+    action: event[2],
+    actionSubjectId: event[3],
     attributes: attributes
   };
 }

package/dist/es2019/services/use-search-query/index.js

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { isSafeUrl } from '../../ui/link-picker/url';
+import { isSafeUrl } from '../../common/utils/url';
 export function useSearchQuery(state) {
   var _queryState$current;
 

package/dist/es2019/services/with-link-picker-analytics/index.js

@@ -0,0 +1,15 @@
+import React, { useMemo } from 'react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { normalizeUrl } from '../../common/utils/url';
+export function withLinkPickerAnalyticsContext(WrappedComponent) {
+  return props => {
+    const data = useMemo(() => ({
+      attributes: {
+        linkState: normalizeUrl(props.url) ? 'editLink' : 'newLink'
+      }
+    }), [props.url]);
+    return /*#__PURE__*/React.createElement(AnalyticsContext, {
+      data: data
+    }, /*#__PURE__*/React.createElement(WrappedComponent, props));
+  };
+}

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { Fragment, useCallback, useLayoutEffect, useReducer } from 'react';
+import { Fragment, useCallback, useEffect, useLayoutEffect, useReducer, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -14,10 +14,11 @@ 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 { withLinkPickerAnalyticsContext } from '../../services/with-link-picker-analytics';
 import { messages } from './messages';
 import PanelTextInput from './text-input';
 import LinkSearchList from './link-search-list';
-import { normalizeUrl, isSafeUrl } from './url';
+import { normalizeUrl, isSafeUrl } from '../../common/utils/url';
 import { rootContainerStyles, searchIconStyles, listTitleStyles, tabsWrapperStyles } from './styled';
 import { browser } from './browser';
 import Announcer from './announcer';
@@ -106,6 +107,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();
@@ -178,7 +189,7 @@ function LinkPicker({
     }
   }, [activeIndex, items]);
   const handleInsert = useCallback((url, title, inputType) => {
-    const event = createAnalyticsEvent(createEventPayload('form.submitted.linkPicker', {}));
+    const event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {}));
     event.fire(ANALYTICS_CHANNEL);
     onSubmit({
       url,
@@ -351,7 +362,7 @@ function LinkPicker({
   }, intl.formatMessage(insertButtonMsg)))));
 }
 
-export default LinkPicker;
+export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));
 
 function getScreenReaderText(items, selectedIndex, intl) {
   if (items.length && selectedIndex > -1) {

package/dist/es2019/version.json

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

package/dist/esm/analytics.codegen.js

@@ -3,16 +3,16 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::0cc1b4d9c22b31491ded3e581114ab2c>>
+ * @codegen <<SignedSource::115bafba068f36f76da67200ee2d08c4>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 function createEventPayload(eventKey, attributes) {
   var event = eventKey.split('.');
   return {
-    eventType: 'ui',
-    actionSubject: event[0],
-    action: event[1],
-    actionSubjectId: event[2],
+    eventType: event[0],
+    actionSubject: event[1],
+    action: event[2],
+    actionSubjectId: event[3],
     attributes: attributes
   };
 }

package/dist/esm/services/use-search-query/index.js

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { isSafeUrl } from '../../ui/link-picker/url';
+import { isSafeUrl } from '../../common/utils/url';
 export function useSearchQuery(state) {
   var _queryState$current;
 

package/dist/esm/services/with-link-picker-analytics/index.js

@@ -0,0 +1,17 @@
+import React, { useMemo } from 'react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { normalizeUrl } from '../../common/utils/url';
+export function withLinkPickerAnalyticsContext(WrappedComponent) {
+  return function (props) {
+    var data = useMemo(function () {
+      return {
+        attributes: {
+          linkState: normalizeUrl(props.url) ? 'editLink' : 'newLink'
+        }
+      };
+    }, [props.url]);
+    return /*#__PURE__*/React.createElement(AnalyticsContext, {
+      data: data
+    }, /*#__PURE__*/React.createElement(WrappedComponent, props));
+  };
+}

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

@@ -7,7 +7,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, useLayoutEffect, useReducer } from 'react';
+import { Fragment, useCallback, useEffect, useLayoutEffect, useReducer, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -20,10 +20,11 @@ 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 { withLinkPickerAnalyticsContext } from '../../services/with-link-picker-analytics';
 import { messages } from './messages';
 import PanelTextInput from './text-input';
 import LinkSearchList from './link-search-list';
-import { normalizeUrl, isSafeUrl } from './url';
+import { normalizeUrl, isSafeUrl } from '../../common/utils/url';
 import { rootContainerStyles, searchIconStyles, listTitleStyles, tabsWrapperStyles } from './styled';
 import { browser } from './browser';
 import Announcer from './announcer';
@@ -112,6 +113,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();
@@ -184,7 +195,7 @@ function LinkPicker(_ref) {
     }
   }, [activeIndex, items]);
   var handleInsert = useCallback(function (url, title, inputType) {
-    var event = createAnalyticsEvent(createEventPayload('form.submitted.linkPicker', {}));
+    var event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {}));
     event.fire(ANALYTICS_CHANNEL);
     onSubmit(_objectSpread({
       url: url,
@@ -362,7 +373,7 @@ function LinkPicker(_ref) {
   }, intl.formatMessage(insertButtonMsg)))));
 }
 
-export default LinkPicker;
+export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));
 
 function getScreenReaderText(items, selectedIndex, intl) {
   if (items.length && selectedIndex > -1) {

package/dist/esm/version.json

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

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

@@ -3,12 +3,19 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::0cc1b4d9c22b31491ded3e581114ab2c>>
+ * @codegen <<SignedSource::115bafba068f36f76da67200ee2d08c4>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
-declare type FormSubmittedLinkPickerAttributesType = {};
+export declare type LinkPickerAnalyticsContextType = {
+    linkState: 'editLink' | 'newLink';
+};
+export declare type FormSubmittedLinkPickerAttributesType = {};
+export declare type InlineDialogViewedLinkPickerAttributesType = {};
+export declare type InlineDialogClosedLinkPickerAttributesType = {};
 declare type AnalyticsEventAttributes = {
-    'form.submitted.linkPicker': FormSubmittedLinkPickerAttributesType;
+    '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;

package/dist/types/services/with-link-picker-analytics/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function withLinkPickerAnalyticsContext<P extends {
+    url?: string;
+}>(WrappedComponent: React.ComponentType<P>): React.ComponentType<P>;

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

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { LinkInputType, LinkPickerPlugin } from '../types';
 export declare const RECENT_SEARCH_LIST_SIZE = 5;
 export declare const CONTACT_SUPPORT_LINK = "https://support.atlassian.com/contact/";
@@ -63,5 +63,5 @@ export interface PickerState {
     invalidUrl: boolean;
     activeTab: number;
 }
-declare function LinkPicker({ onSubmit, onCancel, onContentResize, plugins, url: initUrl, displayText: initDisplayText, }: LinkPickerProps): jsx.JSX.Element;
-export default LinkPicker;
+declare const _default: import("react").ComponentType<LinkPickerProps>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -64,8 +64,8 @@
     "@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.0.0",
-    "@atlassian/recent-work-client": "^1.5.0",
+    "@atlassian/link-picker-plugins": "^5.1.0",
+    "@atlassian/recent-work-client": "^1.6.0",
     "@atlassian/search-provider": "^2.3.0",
     "@testing-library/dom": "^7.7.3",
     "@testing-library/jest-dom": "^4.1.0",
@@ -76,11 +76,12 @@
     "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"
+    "typescript": "4.3.5"
   },
   "techstack": {
     "@repo/internal": {

package/report.api.md

@@ -5,6 +5,8 @@
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
+/// <reference types="react" />
+
 import { MessageDescriptor } from 'react-intl-next';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';