@atlaskit/smart-card 24.0.0 → 24.0.2

package/dist/esm/view/FlexibleCard/components/container/layered-link/index.js

@@ -3,6 +3,7 @@ var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { jsx, css } from '@emotion/react';
+import useMouseDownEvent from '../../../../../state/analytics/useMouseDownEvent';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // Stretch the invisible link over the whole of the post.\n  // Hide the link\u2019s text.\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow-x: hidden;\n  text-indent: 100%;\n  white-space: nowrap;\n\n  // Needs a heightened specificity to trump other anchor.\n  // Stack it under all other links in the post text.\n  a&.layered-link {\n    position: absolute;\n    z-index: 0;\n  }\n\n  // When hovering over the layered link, any hidden action buttons inside\n  // the Container should become visible.\n  // As actions resides inside blocks and layered link is expected to be\n  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n  // its sibling. Using general sibling combinator here to apply styling to\n  // all the siblings of layered link.\n  // The general sibling combinator (~) separates two selectors and matches all\n  // iterations of the second element, that are following the first element\n  // (though not necessarily immediately), and are children of the same parent\n  // element.\n  &:hover ~ * {\n    .actions-button-group {\n      opacity: 1;\n    }\n  }\n"])));
 
 /**
@@ -16,12 +17,14 @@ var LayeredLink = function LayeredLink(_ref) {
     testId = _ref.testId,
     text = _ref.text,
     url = _ref.url;
+  var onMouseDown = useMouseDownEvent();
   return jsx("a", {
     className: "layered-link",
     css: styles,
     "data-testid": "".concat(testId, "-layered-link"),
     href: url,
     onClick: onClick,
+    onMouseDown: onMouseDown,
     target: target,
     tabIndex: -1 // Hide tab index and let the title link be the link.
   }, text);

package/dist/esm/view/FlexibleCard/components/elements/link/index.js

@@ -7,6 +7,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
 import { tokens } from '../../../../../utils/token';
+import useMouseDownEvent from '../../../../../state/analytics/useMouseDownEvent';
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
@@ -64,6 +65,7 @@ var Link = function Link(_ref) {
     url = _ref.url,
     onClick = _ref.onClick,
     target = _ref.target;
+  var onMouseDown = useMouseDownEvent();
   var hasSpace = useMemo(function () {
     return text ? hasWhiteSpace(text) : false;
   }, [text]);
@@ -73,6 +75,7 @@ var Link = function Link(_ref) {
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,
+    onMouseDown: onMouseDown,
     href: url,
     target: target || '_blank'
   }, text);

package/dist/esm/view/HoverCard/components/HoverCardContent.js

@@ -5,6 +5,7 @@ import { jsx } from '@emotion/react';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { extractType } from '@atlaskit/linking-common/extractors';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
@@ -18,6 +19,7 @@ import HoverCardResolvedView from './views/resolved';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
 import { useSmartCardActions } from '../../../state/actions';
+import { fireLinkClickedEvent } from '../../../utils/analytics/click';
 export var hoverCardClassName = 'smart-links-hover-preview';
 export var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
@@ -88,6 +90,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
     url = _ref.url,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var extensionKey = useMemo(function () {
     return getExtensionKey(cardState.details);
   }, [cardState.details]);
@@ -104,7 +108,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
       isModifierKeyPressed: isModifierKeyPressed,
       actionSubjectId: 'titleGoToLink'
     });
-  }, [cardState.status, analytics.ui, id]);
+    fireLinkClickedEvent(createAnalyticsEvent)(event);
+  }, [createAnalyticsEvent, cardState.status, analytics.ui, id]);
   var titleActions = useMemo(function () {
     return [getCopyAction(url), getOpenAction(url, analytics, onActionClick)];
   }, [url, analytics, onActionClick]);

package/dist/esm/view/InlineCard/Frame/index.js

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { WrapperAnchor, WrapperSpan } from './styled';
+import useMouseDownEvent from '../../../state/analytics/useMouseDownEvent';
 export var Frame = function Frame(props) {
   var isSelected = props.isSelected,
     children = props.children,
@@ -26,6 +27,7 @@ export var Frame = function Frame(props) {
       onClick(event);
     }
   }, [onClick]);
+  var handleMouseDown = useMouseDownEvent();
   var isInteractive = Boolean(onClick);
 
   // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
@@ -42,6 +44,7 @@ export var Frame = function Frame(props) {
     tabIndex: isInteractive ? 0 : undefined,
     role: isInteractive ? 'button' : undefined,
     onClick: handleClick,
+    onMouseDown: handleMouseDown,
     onKeyPress: handleKeyPress,
     "data-testid": testId,
     className: className

package/dist/types/state/analytics/useMouseDownEvent.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const useMouseDownEvent: <T extends import("react").MouseEventHandler<Element>>(onMouseDown?: T | undefined) => (event: Parameters<T>[0]) => void;
+export default useMouseDownEvent;

package/dist/types/utils/analytics/click.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { AnalyticsEventPayload, UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { GasPayload } from '@atlaskit/analytics-gas-types';
+import { ClickOutcome, ClickType, UiLinkClickedEventProps } from './types';
+import { AnalyticsPayload } from '../types';
+export declare const buttonMap: Map<number | undefined, "left" | "right" | "none" | "middle">;
+export declare const getKeys: (e: React.MouseEvent) => ("meta" | "alt" | "shift" | "ctrl")[];
+export declare function getLinkClickOutcome(e: React.MouseEvent, clickType: ClickType): ClickOutcome;
+export declare const createLinkClickedPayload: (event: React.MouseEvent) => AnalyticsPayload | undefined;
+declare type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+export declare const fireLinkClickedEvent: (createAnalyticsEvent: (payload: AnalyticsEventPayload) => UIAnalyticsEvent) => (event: React.MouseEvent, overrides?: {
+    [x: string]: any;
+    attributes?: {
+        clickType?: ClickType | undefined;
+        clickOutcome?: ClickOutcome | undefined;
+        keysHeld?: ("meta" | "alt" | "shift" | "ctrl" | undefined)[] | undefined;
+    } | undefined;
+} | undefined) => void;
+export {};

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

@@ -105,3 +105,19 @@ export declare type InstrumentEventProps = CommonEventProps & {
     status: CardType;
     id: string;
 };
+export declare type ClickType = 'left' | 'middle' | 'right' | 'none';
+export declare type ClickOutcome = 'prevented' | 'clickThrough' | 'clickThroughNewTabOrWindow' | 'contextMenu' | 'alt' | 'contentEditable' | '_unknown';
+export declare type UiLinkClickedEventProps = {
+    /**
+     * Whether the click occurred with the left, middle or right mouse button
+     */
+    clickType: ClickType;
+    /**
+     * The user outcome for clicking the link as far as can be reasonably be determined
+     */
+    clickOutcome: ClickOutcome;
+    /**
+     * The keys held by the user at the time of clicking the link (which influence `clickOutcome`)
+     */
+    keysHeld: ('alt' | 'ctrl' | 'meta' | 'shift')[];
+};

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

@@ -3,6 +3,15 @@ import { CardProps } from '../view/Card';
 export declare const isCardWithData: (props: CardProps) => boolean;
 export declare const isSpecialEvent: (evt: React.MouseEvent | React.KeyboardEvent) => boolean;
 export declare const isIframe: () => boolean;
+/**
+ * Meta key = cmd on mac, windows key on windows
+ * Ctrl key on mac by default triggers a right click instead of left click
+ * Ctrl key on Windows has the same behaviour of cmd key of mac (open in new tab)
+ *
+ * `isSpecialKey` on a mouse event on mac with default behaviour should be equivalent to opening in new tab
+ * On Windows it will be equivalent to opening a new tab, unless its the Window key that is held
+ * in which case typically only a standard clickthrough will occur, this is likely a small portion of events
+ */
 export declare const isSpecialKey: (event: React.MouseEvent | React.KeyboardEvent) => boolean;
 export declare const isSpecialClick: (event: React.MouseEvent) => boolean;
 export declare const getIconForFileType: (fileMimeType: string) => React.ReactNode | undefined;

package/dist/types/view/FlexibleCard/components/elements/link/types.d.ts

@@ -12,6 +12,10 @@ export declare type LinkProps = ElementProps & {
      * propagate analytics.
      */
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+    /**
+     * Mouse event to be provided to the link
+     */
+    onMouseDown?: React.MouseEventHandler;
     /**
      * The number of lines that the link text should spread over. Maximum of 2 lines.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "24.0.0",
+  "version": "24.0.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     "@atlaskit/icon-object": "^6.2.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/linking-common": "^1.21.0",
+    "@atlaskit/linking-common": "^1.22.0",
     "@atlaskit/logo": "^13.11.0",
     "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/media-common": "^2.19.0",
@@ -72,6 +72,7 @@
     "@atlaskit/field-base": "^15.0.6",
     "@atlaskit/form": "^8.8.0",
     "@atlaskit/inline-message": "^11.4.0",
+    "@atlaskit/link-test-helpers": "^2.1.0",
     "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
     "@atlaskit/media-test-helpers": "^30.1.0",
@@ -87,6 +88,7 @@
     "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",