@atlaskit/link-picker 1.9.1 → 1.9.3

package/dist/esm/ui/index.js

@@ -8,7 +8,8 @@ import { LoaderFallback } from './loader-fallback';
 export var PACKAGE_DATA = {
   packageName: packageName,
   packageVersion: packageVersion,
-  componentName: COMPONENT_NAME
+  componentName: COMPONENT_NAME,
+  source: COMPONENT_NAME
 };
 var LazyLinkPicker = lazyForPaint(function () {
   return import(

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

@@ -16,13 +16,13 @@ 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 { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../common/analytics';
+import { normalizeUrl, isSafeUrl } from '../../common/utils/url';
 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 { normalizeUrl, isSafeUrl } from '../../common/utils/url';
 import useFixHeight from '../../controllers/use-fix-height';
+import { messages } from './messages';
+import TextInput from './text-input';
 import { rootContainerStyles, searchIconStyles, tabsWrapperStyles, flexColumnStyles, formFooterMargin } from './styled';
 import { browser } from './browser';
 import Announcer from './announcer';
@@ -62,6 +62,25 @@ function reducer(state, payload) {
 
   return _objectSpread(_objectSpread({}, state), payload);
 }
+/**
+ * Bind input fields to analytics tracking
+ */
+
+
+var getLinkFieldContent = function getLinkFieldContent(value) {
+  if (!Boolean(value)) {
+    return null;
+  }
+
+  return isSafeUrl(value) ? 'url' : 'text_string';
+};
+
+var LinkInputField = withInputFieldTracking(TextInput, 'link', function (event, attributes) {
+  return _objectSpread(_objectSpread({}, attributes), {}, {
+    linkFieldContent: getLinkFieldContent(event.currentTarget.value)
+  });
+});
+var DisplayTextInputField = withInputFieldTracking(TextInput, 'displayText');
 
 function LinkPicker(_ref) {
   var _errorFallback;
@@ -106,6 +125,11 @@ 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;
+
+  var _useLinkPickerAnalyti = useLinkPickerAnalytics(),
+      trackAttribute = _useLinkPickerAnalyti.trackAttribute,
+      getAttributes = _useLinkPickerAnalyti.getAttributes;
+
   useEffect(function () {
     // Anything in here is fired on component mount.
     var event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {}));
@@ -121,14 +145,14 @@ function LinkPicker(_ref) {
       onContentResize();
     }
   }, [onContentResize, items, isLoading, isActivePlugin, tabs]);
-  var handleChangeUrl = useCallback(function (url) {
+  var handleChangeUrl = useCallback(function (e) {
     dispatch({
-      url: url
+      url: e.currentTarget.value
     });
   }, []);
-  var handleChangeText = useCallback(function (displayText) {
+  var handleChangeText = useCallback(function (e) {
     dispatch({
-      displayText: displayText
+      displayText: e.currentTarget.value
     });
   }, []);
   var handleKeyDown = useCallback(function (event) {
@@ -157,6 +181,11 @@ function LinkPicker(_ref) {
     }
 
     if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && items[updatedIndex]) {
+      /**
+       * Manually track that the url has been updated using searchResult method
+       */
+      trackAttribute('linkFieldContent', getLinkFieldContent(items[updatedIndex].url));
+      trackAttribute('linkFieldContentInputMethod', 'searchResult');
       dispatch({
         activeIndex: updatedIndex,
         selectedIndex: updatedIndex,
@@ -164,7 +193,7 @@ function LinkPicker(_ref) {
         invalidUrl: false
       });
     }
-  }, [activeIndex, items]);
+  }, [activeIndex, items, trackAttribute]);
   var handleClear = useCallback(function (field) {
     dispatch(_defineProperty({}, field, ''));
   }, []);
@@ -191,7 +220,12 @@ function LinkPicker(_ref) {
     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
+    var consumerEvent = event.clone(); // Cloned event doesnt have the attributes that are added by
+    // the analytics listener in the LinkPickerAnalyticsContext, add them here
+
+    consumerEvent === null || consumerEvent === void 0 ? void 0 : consumerEvent.update({
+      attributes: getAttributes()
+    }); // Dispatch the original event to our channel
 
     event.fire(ANALYTICS_CHANNEL);
     onSubmit(_objectSpread({
@@ -204,7 +238,7 @@ function LinkPicker(_ref) {
     }, inputType === 'manual' ? {
       rawUrl: state.url
     } : {}), consumerEvent);
-  }, [displayText, onSubmit, state.url, createAnalyticsEvent]);
+  }, [displayText, onSubmit, state.url, createAnalyticsEvent, getAttributes]);
   var handleSelected = useCallback(function (objectId) {
     var selectedItem = items === null || items === void 0 ? void 0 : items.find(function (item) {
       return item.objectId === objectId;
@@ -214,9 +248,15 @@ function LinkPicker(_ref) {
       var _url = selectedItem.url,
           name = selectedItem.name;
       dispatchEvent(new Event('submit'));
+      /**
+       * Manually track that the url has been updated using searchResult method
+       */
+
+      trackAttribute('linkFieldContent', getLinkFieldContent(_url));
+      trackAttribute('linkFieldContentInputMethod', 'searchResult');
       handleInsert(_url, name, 'typeAhead');
     }
-  }, [handleInsert, items]);
+  }, [handleInsert, trackAttribute, items]);
   var handleSubmit = useCallback(function (event) {
     event.preventDefault();
 
@@ -260,7 +300,7 @@ function LinkPicker(_ref) {
     delay: 250
   }), jsx(VisuallyHidden, {
     id: screenReaderDescriptionId
-  }, jsx(FormattedMessage, messages.searchLinkAriaDescription)), jsx(PanelTextInput, {
+  }, jsx(FormattedMessage, messages.searchLinkAriaDescription)), jsx(LinkInputField, {
     role: "combobox",
     autoComplete: "off",
     name: "url",
@@ -280,7 +320,7 @@ function LinkPicker(_ref) {
     onClear: handleClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
-  }), jsx(PanelTextInput, {
+  }), jsx(DisplayTextInputField, {
     autoComplete: "off",
     name: "displayText",
     testId: testIds.textInputField,

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

@@ -4,6 +4,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl-next';
 import Button from '@atlaskit/button';
+import EmptyState from '@atlaskit/empty-state';
+import GenericErrorSVG from '../../../common/generic-error-svg';
 export var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 export var messages = defineMessages({
   searchErrorHeader: {
@@ -17,8 +19,6 @@ export var messages = defineMessages({
     description: 'Describes possible actions when search throws an error'
   }
 });
-import EmptyState from '@atlaskit/empty-state';
-import GenericErrorSVG from '../../../common/generic-error-svg';
 export var testIds = {
   searchError: 'link-search-error'
 };

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", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
+var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error"];
 
 /** @jsx jsx */
 import { useCallback, useRef, Fragment } from 'react';
@@ -10,21 +10,20 @@ import Tooltip from '@atlaskit/tooltip';
 import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
 import { isRedoEvent, isUndoEvent } from '../utils';
-import { clearTextButtonStyles, fieldStyles } from './styled';
 import { testIds } from '../';
+import { clearTextButtonStyles, fieldStyles } from './styled';
 
-var PanelTextInput = function PanelTextInput(props) {
-  var name = props.name,
-      label = props.label,
-      autoFocus = props.autoFocus,
-      onRedo = props.onRedo,
-      onUndo = props.onUndo,
-      onChange = props.onChange,
-      onKeyDown = props.onKeyDown,
-      onClear = props.onClear,
-      clearLabel = props.clearLabel,
-      error = props.error,
-      restProps = _objectWithoutProperties(props, _excluded);
+var TextInput = function TextInput(_ref) {
+  var name = _ref.name,
+      label = _ref.label,
+      autoFocus = _ref.autoFocus,
+      onRedo = _ref.onRedo,
+      onUndo = _ref.onUndo,
+      onKeyDown = _ref.onKeyDown,
+      onClear = _ref.onClear,
+      clearLabel = _ref.clearLabel,
+      error = _ref.error,
+      restProps = _objectWithoutProperties(_ref, _excluded);
 
   var inputRef = useRef(null);
   var handleRef = useCallback(function (input) {
@@ -39,9 +38,6 @@ var PanelTextInput = function PanelTextInput(props) {
       }
     }
   }, [autoFocus]);
-  var handleChange = useCallback(function (e) {
-    onChange(e.currentTarget.value);
-  }, [onChange]);
   var handleKeydown = useCallback(function (e) {
     if (typeof onUndo === 'function' && isUndoEvent(e)) {
       e.preventDefault();
@@ -55,11 +51,13 @@ var PanelTextInput = function PanelTextInput(props) {
       onKeyDown(e);
     }
   }, [onUndo, onRedo, onKeyDown]);
-  var handleClear = useCallback(function () {
-    if (inputRef.current && onClear) {
-      inputRef.current.focus();
-      onClear(name);
-    }
+  var handleClear = useCallback(function (e) {
+    var _inputRef$current;
+
+    e.preventDefault();
+    e.stopPropagation();
+    onClear === null || onClear === void 0 ? void 0 : onClear(name);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }, [name, onClear]);
   var clearText = restProps.value !== '' && jsx(Tooltip, {
     content: clearLabel
@@ -77,11 +75,10 @@ var PanelTextInput = function PanelTextInput(props) {
   }, jsx(Field, {
     label: label,
     name: name
-  }, function (_ref) {
-    var fieldProps = _ref.fieldProps;
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps;
     return jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
       onKeyDown: handleKeydown,
-      onChange: handleChange,
       ref: handleRef,
       elemAfterInput: clearText,
       isInvalid: !!error
@@ -91,4 +88,4 @@ var PanelTextInput = function PanelTextInput(props) {
   }));
 };
 
-export default PanelTextInput;
+export default TextInput;

package/dist/esm/version.json

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

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

@@ -3,19 +3,27 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::115bafba068f36f76da67200ee2d08c4>>
+ * @codegen <<SignedSource::e4f7029050ef6edde92cac3d9535cd4a>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 export declare type LinkPickerAnalyticsContextType = {
     linkState: 'editLink' | 'newLink';
+    linkFieldContent: 'url' | 'text_string' | null;
+    linkFieldContentInputMethod: 'manual' | 'paste' | 'searchResult' | null;
+    displayTextFieldContent: 'text_string' | null;
+    displayTextFieldContentInputMethod: 'manual' | 'paste' | null;
 };
 export declare type FormSubmittedLinkPickerAttributesType = {};
 export declare type InlineDialogViewedLinkPickerAttributesType = {};
 export declare type InlineDialogClosedLinkPickerAttributesType = {};
+export declare type TextFieldUpdatedLinkFieldAttributesType = {};
+export declare type TextFieldUpdatedDisplayTextFieldAttributesType = {};
 declare type AnalyticsEventAttributes = {
     'ui.form.submitted.linkPicker': FormSubmittedLinkPickerAttributesType;
     'ui.inlineDialog.viewed.linkPicker': InlineDialogViewedLinkPickerAttributesType;
     'ui.inlineDialog.closed.linkPicker': InlineDialogClosedLinkPickerAttributesType;
+    'ui.textField.updated.linkField': TextFieldUpdatedLinkFieldAttributesType;
+    'ui.textField.updated.displayTextField': TextFieldUpdatedDisplayTextFieldAttributesType;
 };
 declare function createEventPayload<K extends keyof AnalyticsEventAttributes>(eventKey: K, attributes: AnalyticsEventAttributes[K]): {
     eventType: string;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LinkPickerAnalyticsContextType } from '../../analytics.codegen';
+export declare type TrackAttribute = <K extends keyof LinkPickerAnalyticsContextType>(attribute: K, value: LinkPickerAnalyticsContextType[K]) => void;
+interface AnalyticsContextType {
+    /**
+     * Update a single attribute in the analytics context
+     */
+    trackAttribute: TrackAttribute;
+    /**
+     * Update a set of attributes in the analytics context
+     */
+    trackAttributes: (attributes: Partial<LinkPickerAnalyticsContextType>) => void;
+    /**
+     * Retrieve the current set of attributes
+     * Can be used by components to derive/compute new attributes for specific events
+     */
+    getAttributes: () => LinkPickerAnalyticsContextType;
+}
+/**
+ * Hook that exposes the context-level attribute getters and setters.
+ */
+export declare const useLinkPickerAnalytics: () => AnalyticsContextType;
+/**
+ * Wraps a component with the analytics context + listener to update events with contextual-level attributes.
+ * Should be implemented once at the root of the link picker.
+ */
+export declare function withLinkPickerAnalyticsContext<P>(WrappedComponent: React.ComponentType<P>): React.ComponentType<P>;
+export {};

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

@@ -0,0 +1,2 @@
+export { useLinkPickerAnalytics, withLinkPickerAnalyticsContext, } from './context';
+export { withInputFieldTracking } from './input-field-tracking';

package/dist/types/common/analytics/input-field-tracking.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { LinkPickerAnalyticsContextType } from '../../analytics.codegen';
+declare type InputFields = 'link' | 'displayText';
+/**
+ * Wraps an input field and connects it to the link picker analytics context to provide a baseline of analytics tracking
+ * @param WrappedComponent The input field to be tracked
+ * @param field The name of the field (ie matching actionSubjectId)
+ * @param filterOnChangeEventAttrs Function to hook into and filter/customise the default attribute tracking logic
+ * @returns HOC Input field with tracking
+ */
+export declare const withInputFieldTracking: <P extends {
+    onBlur?: ((e: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    onClear?: Function | undefined;
+    onFocus?: ((e: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+}, Field extends InputFields>(WrappedComponent: React.ComponentType<P>, field: Field, filterOnChangeEventAttrs?: <OnChangeAttributes extends Partial<LinkPickerAnalyticsContextType>>(event: React.ChangeEvent<HTMLInputElement>, attributes: OnChangeAttributes) => OnChangeAttributes) => React.ComponentType<P>;
+export {};

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

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

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

@@ -4,5 +4,6 @@ export declare const PACKAGE_DATA: {
     packageName: any;
     packageVersion: any;
     componentName: string;
+    source: string;
 };
 export declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => JSX.Element>;

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

@@ -1,16 +1,14 @@
 import { jsx } from '@emotion/react';
 import { TextFieldProps } from '@atlaskit/textfield';
-export interface Props extends Omit<TextFieldProps, 'value' | 'onChange' | 'autoFocus' | 'onSubmit'> {
+export declare type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & {
     name: string;
-    label?: string;
-    autoFocus?: boolean;
     value: string;
-    onChange: (value: string) => void;
+    label?: string;
     onUndo?: Function;
     onRedo?: Function;
-    onClear?: Function;
+    onClear?: (name: string) => void;
     clearLabel?: string;
     error?: string | null;
-}
-declare const PanelTextInput: (props: Props) => jsx.JSX.Element;
-export default PanelTextInput;
+};
+declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, ...restProps }: TextInputProps) => jsx.JSX.Element;
+export default TextInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {

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

@@ -1,33 +0,0 @@
-"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/es2019/services/with-link-picker-analytics/index.js

@@ -1,15 +0,0 @@
-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/esm/services/with-link-picker-analytics/index.js

@@ -1,17 +0,0 @@
-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/types/services/with-link-picker-analytics/index.d.ts

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