@atlaskit/smart-card 44.14.1 → 44.15.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/smart-card
 
+## 44.15.0
+
+### Minor Changes
+
+- [`fa8f6894161e0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa8f6894161e0) -
+  Track middle- and right-clicks on resolved third-party Smart Links rendered by EmbedCard. Fires
+  fire3PClickEvent({isAuxClick}) / fire3PClickEvent({isContextMenu}). Gated by
+  linking_platform_track_non_primary_3p_clicks experiment.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 44.14.1
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card" || '',
-  packageVersion: "44.14.0" || ''
+  packageVersion: "44.14.1" || ''
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/CardWithUrl/component.js

@@ -382,6 +382,8 @@ function Component(_ref) {
         handleAuthorize: services.length && handleAuthorize || undefined,
         handleErrorRetry: handleRetry,
         handleFrameClick: handleClickWrapper,
+        handleFrameAuxClick: handleFrameAuxClick,
+        handleFrameContextMenu: handleFrameContextMenu,
         handleInvoke: handleInvoke,
         isSelected: isSelected,
         frameStyle: frameStyle,

package/dist/cjs/view/EmbedCard/components/ExpandedFrame.js

@@ -37,6 +37,8 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
     children = _ref.children,
     onClick = _ref.onClick,
+    onAuxClick = _ref.onAuxClick,
+    onContextMenu = _ref.onContextMenu,
     icon = _ref.icon,
     text = _ref.text,
     isSelected = _ref.isSelected,
@@ -81,6 +83,8 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     }, /*#__PURE__*/React.createElement("a", {
       href: href,
       onClick: handleClick,
+      onAuxClick: onAuxClick,
+      onContextMenu: onContextMenu,
       onMouseDown: handleMouseDown,
       className: (0, _runtime.ax)([styles.headerAnchor])
     }, text)))), CompetitorPromptComponent);

package/dist/cjs/view/EmbedCard/index.js

@@ -36,6 +36,8 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
     handleAuthorize = _ref2.handleAuthorize,
     handleErrorRetry = _ref2.handleErrorRetry,
     handleFrameClick = _ref2.handleFrameClick,
+    handleFrameAuxClick = _ref2.handleFrameAuxClick,
+    handleFrameContextMenu = _ref2.handleFrameContextMenu,
     isSelected = _ref2.isSelected,
     frameStyle = _ref2.frameStyle,
     platform = _ref2.platform,
@@ -105,7 +107,12 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
           isSelected: isSelected,
           frameStyle: frameStyle,
           inheritDimensions: inheritDimensions,
-          onClick: handleFrameClick,
+          onClick: handleFrameClick
+          // Support middle-/right-clicks for "resolved" only — the vast majority of clicks happen here.
+          // Other states (e.g. "resolving") could be added later for completeness.
+          ,
+          onAuxClick: handleFrameAuxClick,
+          onContextMenu: handleFrameContextMenu,
           ref: iframeRef,
           onIframeDwell: onIframeDwell,
           onIframeFocus: onIframeFocus,
@@ -128,7 +135,12 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
         return /*#__PURE__*/_react.default.createElement(_ResolvedView.default, {
           url: url,
           cardState: cardState,
-          onClick: handleFrameClick,
+          onClick: handleFrameClick
+          // Support middle-/right-clicks for "resolved" only — the vast majority of clicks happen here.
+          // Other states (e.g. "resolving") could be added later for completeness.
+          ,
+          onAuxClick: handleFrameAuxClick,
+          onContextMenu: handleFrameContextMenu,
           onError: onError,
           onResolve: onResolve,
           renderers: renderers,

package/dist/cjs/view/EmbedCard/views/ResolvedView.js

@@ -20,6 +20,8 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
   var link = _ref.link,
     context = _ref.context,
     onClick = _ref.onClick,
+    onAuxClick = _ref.onAuxClick,
+    onContextMenu = _ref.onContextMenu,
     isSelected = _ref.isSelected,
     frameStyle = _ref.frameStyle,
     preview = _ref.preview,
@@ -83,6 +85,8 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
     icon: icon,
     text: text,
     onClick: onClick,
+    onAuxClick: onAuxClick,
+    onContextMenu: onContextMenu,
     inheritDimensions: inheritDimensions,
     setOverflow: false,
     CompetitorPrompt: CompetitorPrompt,

package/dist/cjs/view/LinkUrl/index.js

@@ -19,7 +19,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "44.14.0",
+  packageVersion: "44.14.1",
   componentName: 'linkUrl'
 };
 var LinkUrl = function LinkUrl(_ref) {

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card" || '',
-  packageVersion: "44.14.0" || ''
+  packageVersion: "44.14.1" || ''
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/CardWithUrl/component.js

@@ -371,6 +371,8 @@ function Component({
         handleAuthorize: services.length && handleAuthorize || undefined,
         handleErrorRetry: handleRetry,
         handleFrameClick: handleClickWrapper,
+        handleFrameAuxClick: handleFrameAuxClick,
+        handleFrameContextMenu: handleFrameContextMenu,
         handleInvoke: handleInvoke,
         isSelected: isSelected,
         frameStyle: frameStyle,

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -28,6 +28,8 @@ export const ExpandedFrame = ({
   isPlaceholder = false,
   children,
   onClick,
+  onAuxClick,
+  onContextMenu,
   icon,
   text,
   isSelected,
@@ -65,6 +67,8 @@ export const ExpandedFrame = ({
     }, /*#__PURE__*/React.createElement("a", {
       href: href,
       onClick: handleClick,
+      onAuxClick: onAuxClick,
+      onContextMenu: onContextMenu,
       onMouseDown: handleMouseDown,
       className: ax([styles.headerAnchor])
     }, text)))), CompetitorPromptComponent);

package/dist/es2019/view/EmbedCard/index.js

@@ -27,6 +27,8 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   handleAuthorize,
   handleErrorRetry,
   handleFrameClick,
+  handleFrameAuxClick,
+  handleFrameContextMenu,
   isSelected,
   frameStyle,
   platform,
@@ -101,7 +103,12 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
           isSelected: isSelected,
           frameStyle: frameStyle,
           inheritDimensions: inheritDimensions,
-          onClick: handleFrameClick,
+          onClick: handleFrameClick
+          // Support middle-/right-clicks for "resolved" only — the vast majority of clicks happen here.
+          // Other states (e.g. "resolving") could be added later for completeness.
+          ,
+          onAuxClick: handleFrameAuxClick,
+          onContextMenu: handleFrameContextMenu,
           ref: iframeRef,
           onIframeDwell: onIframeDwell,
           onIframeFocus: onIframeFocus,
@@ -124,7 +131,12 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
         return /*#__PURE__*/React.createElement(BlockCardResolvedView, {
           url: url,
           cardState: cardState,
-          onClick: handleFrameClick,
+          onClick: handleFrameClick
+          // Support middle-/right-clicks for "resolved" only — the vast majority of clicks happen here.
+          // Other states (e.g. "resolving") could be added later for completeness.
+          ,
+          onAuxClick: handleFrameAuxClick,
+          onContextMenu: handleFrameContextMenu,
           onError: onError,
           onResolve: onResolve,
           renderers: renderers,

package/dist/es2019/view/EmbedCard/views/ResolvedView.js

@@ -12,6 +12,8 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   link,
   context,
   onClick,
+  onAuxClick,
+  onContextMenu,
   isSelected,
   frameStyle,
   preview,
@@ -70,6 +72,8 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     icon: icon,
     text: text,
     onClick: onClick,
+    onAuxClick: onAuxClick,
+    onContextMenu: onContextMenu,
     inheritDimensions: inheritDimensions,
     setOverflow: false,
     CompetitorPrompt: CompetitorPrompt,

package/dist/es2019/view/LinkUrl/index.js

@@ -9,7 +9,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "44.14.0",
+  packageVersion: "44.14.1",
   componentName: 'linkUrl'
 };
 const LinkUrl = ({

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card" || '',
-  packageVersion: "44.14.0" || ''
+  packageVersion: "44.14.1" || ''
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/CardWithUrl/component.js

@@ -373,6 +373,8 @@ function Component(_ref) {
         handleAuthorize: services.length && handleAuthorize || undefined,
         handleErrorRetry: handleRetry,
         handleFrameClick: handleClickWrapper,
+        handleFrameAuxClick: handleFrameAuxClick,
+        handleFrameContextMenu: handleFrameContextMenu,
         handleInvoke: handleInvoke,
         isSelected: isSelected,
         frameStyle: frameStyle,

package/dist/esm/view/EmbedCard/components/ExpandedFrame.js

@@ -29,6 +29,8 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
     children = _ref.children,
     onClick = _ref.onClick,
+    onAuxClick = _ref.onAuxClick,
+    onContextMenu = _ref.onContextMenu,
     icon = _ref.icon,
     text = _ref.text,
     isSelected = _ref.isSelected,
@@ -73,6 +75,8 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     }, /*#__PURE__*/React.createElement("a", {
       href: href,
       onClick: handleClick,
+      onAuxClick: onAuxClick,
+      onContextMenu: onContextMenu,
       onMouseDown: handleMouseDown,
       className: ax([styles.headerAnchor])
     }, text)))), CompetitorPromptComponent);

package/dist/esm/view/EmbedCard/index.js

@@ -29,6 +29,8 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref2, iframeRef)
     handleAuthorize = _ref2.handleAuthorize,
     handleErrorRetry = _ref2.handleErrorRetry,
     handleFrameClick = _ref2.handleFrameClick,
+    handleFrameAuxClick = _ref2.handleFrameAuxClick,
+    handleFrameContextMenu = _ref2.handleFrameContextMenu,
     isSelected = _ref2.isSelected,
     frameStyle = _ref2.frameStyle,
     platform = _ref2.platform,
@@ -98,7 +100,12 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref2, iframeRef)
           isSelected: isSelected,
           frameStyle: frameStyle,
           inheritDimensions: inheritDimensions,
-          onClick: handleFrameClick,
+          onClick: handleFrameClick
+          // Support middle-/right-clicks for "resolved" only — the vast majority of clicks happen here.
+          // Other states (e.g. "resolving") could be added later for completeness.
+          ,
+          onAuxClick: handleFrameAuxClick,
+          onContextMenu: handleFrameContextMenu,
           ref: iframeRef,
           onIframeDwell: onIframeDwell,
           onIframeFocus: onIframeFocus,
@@ -121,7 +128,12 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref2, iframeRef)
         return /*#__PURE__*/React.createElement(BlockCardResolvedView, {
           url: url,
           cardState: cardState,
-          onClick: handleFrameClick,
+          onClick: handleFrameClick
+          // Support middle-/right-clicks for "resolved" only — the vast majority of clicks happen here.
+          // Other states (e.g. "resolving") could be added later for completeness.
+          ,
+          onAuxClick: handleFrameAuxClick,
+          onContextMenu: handleFrameContextMenu,
           onError: onError,
           onResolve: onResolve,
           renderers: renderers,

package/dist/esm/view/EmbedCard/views/ResolvedView.js

@@ -13,6 +13,8 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
   var link = _ref.link,
     context = _ref.context,
     onClick = _ref.onClick,
+    onAuxClick = _ref.onAuxClick,
+    onContextMenu = _ref.onContextMenu,
     isSelected = _ref.isSelected,
     frameStyle = _ref.frameStyle,
     preview = _ref.preview,
@@ -76,6 +78,8 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     icon: icon,
     text: text,
     onClick: onClick,
+    onAuxClick: onAuxClick,
+    onContextMenu: onContextMenu,
     inheritDimensions: inheritDimensions,
     setOverflow: false,
     CompetitorPrompt: CompetitorPrompt,

package/dist/esm/view/LinkUrl/index.js

@@ -12,7 +12,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "44.14.0",
+  packageVersion: "44.14.1",
   componentName: 'linkUrl'
 };
 var LinkUrl = function LinkUrl(_ref) {

package/dist/types/view/EmbedCard/components/ExpandedFrame.d.ts

@@ -25,8 +25,12 @@ export interface ExpandedFrameProps {
     isSelected?: boolean;
     maxWidth?: number;
     minWidth?: number;
+    /** Optional middle-click handler. */
+    onAuxClick?: React.EventHandler<React.MouseEvent>;
     /** The optional click handler */
     onClick?: (evt: React.MouseEvent) => void;
+    /** Optional right-click handler. */
+    onContextMenu?: React.EventHandler<React.MouseEvent>;
     /** Callback for when mouse enters the content wrapper - for dwell tracking */
     onContentMouseEnter?: () => void;
     /** Callback for when mouse leaves the content wrapper - for dwell tracking */
@@ -45,4 +49,4 @@ export interface ExpandedFrameProps {
     testId?: string;
     text?: React.ReactNode;
 }
-export declare const ExpandedFrame: ({ isPlaceholder, children, onClick, icon, text, isSelected, frameStyle, href, minWidth, maxWidth, testId, inheritDimensions, allowScrollBar, setOverflow, CompetitorPrompt, onContentMouseEnter, onContentMouseLeave, }: ExpandedFrameProps) => React.JSX.Element;
+export declare const ExpandedFrame: ({ isPlaceholder, children, onClick, onAuxClick, onContextMenu, icon, text, isSelected, frameStyle, href, minWidth, maxWidth, testId, inheritDimensions, allowScrollBar, setOverflow, CompetitorPrompt, onContentMouseEnter, onContentMouseLeave, }: ExpandedFrameProps) => React.JSX.Element;

package/dist/types/view/EmbedCard/types.d.ts

@@ -14,7 +14,11 @@ export type EmbedCardProps = {
     frameStyle?: FrameStyle;
     handleAuthorize: (() => void) | undefined;
     handleErrorRetry: () => void;
+    /** Optional middle-click handler. */
+    handleFrameAuxClick?: React.EventHandler<React.MouseEvent>;
     handleFrameClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+    /** Optional right-click handler. */
+    handleFrameContextMenu?: React.EventHandler<React.MouseEvent>;
     handleInvoke: InvokeHandler;
     hideIconLoadingSkeleton?: boolean;
     id?: string;

package/dist/types/view/EmbedCard/views/ResolvedView.d.ts

@@ -22,8 +22,12 @@ export interface EmbedCardResolvedViewProps {
     isTrusted?: boolean;
     /** The link to display */
     link: string;
+    /** Optional middle-click handler. */
+    onAuxClick?: React.EventHandler<React.MouseEvent>;
     /** The optional click handler */
     onClick?: (evt: React.MouseEvent) => void;
+    /** Optional right-click handler. */
+    onContextMenu?: React.EventHandler<React.MouseEvent>;
     /** Optional callback for when user dwells cursor over iframe - for analytics **/
     onIframeDwell?: (dwellTime: number, dwellPercentVisible: number) => void;
     /** Optional callback for when user navigates into an iframe - for analytics **/

package/dist/types-ts4.5/view/EmbedCard/components/ExpandedFrame.d.ts

@@ -25,8 +25,12 @@ export interface ExpandedFrameProps {
     isSelected?: boolean;
     maxWidth?: number;
     minWidth?: number;
+    /** Optional middle-click handler. */
+    onAuxClick?: React.EventHandler<React.MouseEvent>;
     /** The optional click handler */
     onClick?: (evt: React.MouseEvent) => void;
+    /** Optional right-click handler. */
+    onContextMenu?: React.EventHandler<React.MouseEvent>;
     /** Callback for when mouse enters the content wrapper - for dwell tracking */
     onContentMouseEnter?: () => void;
     /** Callback for when mouse leaves the content wrapper - for dwell tracking */
@@ -45,4 +49,4 @@ export interface ExpandedFrameProps {
     testId?: string;
     text?: React.ReactNode;
 }
-export declare const ExpandedFrame: ({ isPlaceholder, children, onClick, icon, text, isSelected, frameStyle, href, minWidth, maxWidth, testId, inheritDimensions, allowScrollBar, setOverflow, CompetitorPrompt, onContentMouseEnter, onContentMouseLeave, }: ExpandedFrameProps) => React.JSX.Element;
+export declare const ExpandedFrame: ({ isPlaceholder, children, onClick, onAuxClick, onContextMenu, icon, text, isSelected, frameStyle, href, minWidth, maxWidth, testId, inheritDimensions, allowScrollBar, setOverflow, CompetitorPrompt, onContentMouseEnter, onContentMouseLeave, }: ExpandedFrameProps) => React.JSX.Element;

package/dist/types-ts4.5/view/EmbedCard/types.d.ts

@@ -14,7 +14,11 @@ export type EmbedCardProps = {
     frameStyle?: FrameStyle;
     handleAuthorize: (() => void) | undefined;
     handleErrorRetry: () => void;
+    /** Optional middle-click handler. */
+    handleFrameAuxClick?: React.EventHandler<React.MouseEvent>;
     handleFrameClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+    /** Optional right-click handler. */
+    handleFrameContextMenu?: React.EventHandler<React.MouseEvent>;
     handleInvoke: InvokeHandler;
     hideIconLoadingSkeleton?: boolean;
     id?: string;

package/dist/types-ts4.5/view/EmbedCard/views/ResolvedView.d.ts

@@ -22,8 +22,12 @@ export interface EmbedCardResolvedViewProps {
     isTrusted?: boolean;
     /** The link to display */
     link: string;
+    /** Optional middle-click handler. */
+    onAuxClick?: React.EventHandler<React.MouseEvent>;
     /** The optional click handler */
     onClick?: (evt: React.MouseEvent) => void;
+    /** Optional right-click handler. */
+    onContextMenu?: React.EventHandler<React.MouseEvent>;
     /** Optional callback for when user dwells cursor over iframe - for analytics **/
     onIframeDwell?: (dwellTime: number, dwellPercentVisible: number) => void;
     /** Optional callback for when user navigates into an iframe - for analytics **/

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "44.14.1",
+	"version": "44.15.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -62,7 +62,7 @@
 		"@atlaskit/link-analytics": "^11.1.0",
 		"@atlaskit/link-client-extension": "^6.1.0",
 		"@atlaskit/link-extractors": "^2.6.0",
-		"@atlaskit/link-test-helpers": "^10.2.0",
+		"@atlaskit/link-test-helpers": "^10.3.0",
 		"@atlaskit/linking-common": "^9.11.0",
 		"@atlaskit/linking-types": "^14.4.0",
 		"@atlaskit/logo": "^20.1.0",
@@ -86,7 +86,7 @@
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlaskit/theme": "^24.0.0",
 		"@atlaskit/tile": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^82.3.0",
+		"@atlaskit/tmp-editor-statsig": "^82.4.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^22.2.0",
 		"@atlaskit/ufo": "^0.5.0",