@atlaskit/smart-card 44.23.3 → 44.24.0

package/dist/esm/extractors/flexible/extract-state.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { extractLink } from '@atlaskit/link-extractors';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { CardAction } from '../../constants';
 import { getExtensionKey } from '../../state/helpers';
 import { canShowAction } from '../../utils/actions/can-show-action';
@@ -21,7 +22,7 @@ var toInvokeRequest = function toInvokeRequest(extensionKey, resourceIdentifiers
     details: details
   };
 };
-var extractAction = function extractAction(response, id, actionOptions, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel) {
+var extractAction = function extractAction(response, id, actionOptions, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel, transformUrl) {
   var _action$dataRetrieval, _extractInvokePreview, _action$dataUpdateAct;
   var extensionKey = getExtensionKey(response);
   var data = response === null || response === void 0 ? void 0 : response.data;
@@ -37,7 +38,7 @@ var extractAction = function extractAction(response, id, actionOptions, appearan
   }
   var read = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataRetrieval = action.dataRetrievalAction) === null || _action$dataRetrieval === void 0 ? void 0 : _action$dataRetrieval.name);
   var url = extractLink(data);
-  var invokePreviewAction = response ? (_extractInvokePreview = extractInvokePreviewAction({
+  var invokePreviewAction = response ? (_extractInvokePreview = extractInvokePreviewAction(_objectSpread({
     actionOptions: actionOptions,
     appearance: appearance,
     fireEvent: fireEvent,
@@ -49,7 +50,9 @@ var extractAction = function extractAction(response, id, actionOptions, appearan
     response: response,
     isPreviewPanelAvailable: isPreviewPanelAvailable,
     openPreviewPanel: openPreviewPanel
-  })) === null || _extractInvokePreview === void 0 ? void 0 : _extractInvokePreview.invokeAction : undefined;
+  }, fg('platform_smartlink_xpc_url_wrapping') ? {
+    transformUrl: transformUrl
+  } : undefined))) === null || _extractInvokePreview === void 0 ? void 0 : _extractInvokePreview.invokeAction : undefined;
   var details = {
     id: id,
     url: url,
@@ -61,7 +64,7 @@ var extractAction = function extractAction(response, id, actionOptions, appearan
     update: update
   } : undefined;
 };
-var extractState = function extractState(response, actionOptions, id, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel) {
+var extractState = function extractState(response, actionOptions, id, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel, transformUrl) {
   if (!response || !response.data) {
     return;
   }
@@ -72,7 +75,7 @@ var extractState = function extractState(response, actionOptions, id, appearance
   if (!canShowAction(CardAction.ChangeStatusAction, actionOptions)) {
     return lozenge;
   }
-  var action = extractAction(response, id, actionOptions, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel);
+  var action = extractAction(response, id, actionOptions, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel, fg('platform_smartlink_xpc_url_wrapping') ? transformUrl : undefined);
   return _objectSpread(_objectSpread({}, lozenge), {}, {
     action: action
   });

package/dist/esm/extractors/flexible/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "fireEvent", "id", "onClick", "onAuxClick", "onContextMenu", "origin", "product", "resolve", "rovoConfig", "actionOptions", "response", "status", "aiSummaryConfig", "isPreviewPanelAvailable", "openPreviewPanel"];
+var _excluded = ["appearance", "fireEvent", "id", "onClick", "onAuxClick", "onContextMenu", "origin", "product", "resolve", "rovoConfig", "actionOptions", "response", "status", "aiSummaryConfig", "isPreviewPanelAvailable", "openPreviewPanel", "transformUrl"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { extractPersonOwnedBy, extractSmartLinkAri, extractSmartLinkAuthorGroup, extractSmartLinkCreatedBy, extractSmartLinkCreatedOn, extractSmartLinkModifiedBy, extractSmartLinkModifiedOn, extractSmartLinkUrl, extractType } from '@atlaskit/link-extractors';
@@ -34,6 +34,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     aiSummaryConfig = _ref.aiSummaryConfig,
     isPreviewPanelAvailable = _ref.isPreviewPanelAvailable,
     openPreviewPanel = _ref.openPreviewPanel,
+    transformUrl = _ref.transformUrl,
     props = _objectWithoutProperties(_ref, _excluded);
   if (!response) {
     return undefined;
@@ -58,7 +59,9 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
       // Use the original URL in edge cases, such as short links for AI summary and copy link actions.
       isPreviewPanelAvailable: isPreviewPanelAvailable,
       openPreviewPanel: openPreviewPanel
-    })),
+    }, fg('platform_smartlink_xpc_url_wrapping') ? {
+      transformUrl: transformUrl
+    } : undefined)),
     appliedToComponentsCount: extractAppliedToComponentsCount(data),
     assignedToGroup: extractPersonAssignedToAsArray(data),
     attachmentCount: extractAttachmentCount(data),
@@ -90,7 +93,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     snippet: extractSmartLinkSummary(response) || undefined,
     // Explicitly set here to remove an empty string
     sourceBranch: extractSourceBranch(data),
-    state: extractState(response, actionOptions, id, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel),
+    state: extractState(response, actionOptions, id, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel, fg('platform_smartlink_xpc_url_wrapping') ? transformUrl : undefined),
     subscriberCount: extractSubscriberCount(data),
     subTasksProgress: extractSubTasksProgress(data),
     storyPoints: extractStoryPoints(data),

package/dist/esm/state/hooks-external/useSmartLinkActions.js

@@ -6,6 +6,7 @@ import { useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { extractInvokeDownloadAction } from '../../extractors/action/extract-invoke-download-action';
@@ -15,6 +16,7 @@ import { messages } from '../../messages';
 import { toAction } from '../../utils/actions/to-action';
 import useInvokeClientAction from '../hooks/use-invoke-client-action';
 import useResolve from '../hooks/use-resolve';
+import { useSmartLinkCrossProductUrlWrapperGated } from '../hooks/use-smart-link-cross-product-url-wrapper';
 import { useSmartCardState as useLinkState } from '../store';
 export function useSmartLinkActions(_ref) {
   var url = _ref.url,
@@ -36,6 +38,9 @@ export function useSmartLinkActions(_ref) {
     fireEvent: fireEvent
   });
   var resolve = useResolve();
+  var appendCrossProductAnalyticsParams = useSmartLinkCrossProductUrlWrapperGated({
+    details: linkState.details
+  });
   if (expValEquals('platform_hover_card_preview_panel', 'cohort', 'test') && prefetch && !linkState.details) {
     resolve(url);
   }
@@ -51,7 +56,12 @@ export function useSmartLinkActions(_ref) {
     if (downloadActionProps) {
       actions.push(toAction(downloadActionProps, invokeClientAction, messages.download, 'download-content'));
     }
-    var viewActionProps = extractInvokeViewAction(invokeParam);
+    var viewActionProps = fg('platform_smartlink_xpc_url_wrapping') ? extractInvokeViewAction(_objectSpread(_objectSpread({}, invokeParam), {}, {
+      transformUrl: function transformUrl() {
+        var destinationUrl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : url;
+        return appendCrossProductAnalyticsParams(destinationUrl);
+      }
+    })) : extractInvokeViewAction(invokeParam);
     if (viewActionProps) {
       actions.push(toAction(viewActionProps, invokeClientAction, messages.view, 'view-content'));
     }
@@ -60,7 +70,12 @@ export function useSmartLinkActions(_ref) {
       origin: origin,
       isPreviewPanelAvailable: isPreviewPanelAvailable,
       openPreviewPanel: openPreviewPanel
-    }));
+    }, fg('platform_smartlink_xpc_url_wrapping') ? {
+      transformUrl: function transformUrl() {
+        var destinationUrl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : url;
+        return appendCrossProductAnalyticsParams(destinationUrl);
+      }
+    } : undefined));
     if (previewActionProps) {
       actions.push(toAction(previewActionProps.invokeAction, invokeClientAction, messages.preview_improved, 'preview-content'));
     }

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.23.2" || ''
+  packageVersion: "44.23.4" || ''
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -161,9 +161,10 @@ function Component(_ref) {
       // FIXME: preferredUrl should be rendered in the DOM anchor href instead of derived at click time
       var preferredUrl = getClickUrl(url, state.details);
       var destinationUrl = (_appendCrossProductAn = appendCrossProductAnalyticsParams(preferredUrl)) !== null && _appendCrossProductAn !== void 0 ? _appendCrossProductAn : preferredUrl;
-
-      // FIXME: Consumer that handle click even themselves via callback won't have the decorated URL
-      onClick === null || onClick === void 0 || onClick(event);
+      onClick === null || onClick === void 0 || onClick(event, {
+        url: url,
+        destinationUrl: destinationUrl
+      });
 
       // Check if the event is prevented via onClick callback
       var consumerPreventedNavigation = event.defaultPrevented && !isEventDefaultPrevented;

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import UFOHoldLoad from '@atlaskit/react-ufo/load-hold';
@@ -13,6 +13,7 @@ import { FlexibleCardContext } from '../../state/flexible-ui-context';
 import { useAISummaryConfig } from '../../state/hooks/use-ai-summary-config';
 import useResolve from '../../state/hooks/use-resolve';
 import useRovoConfig from '../../state/hooks/use-rovo-config';
+import { useSmartLinkCrossProductUrlWrapperGated } from '../../state/hooks/use-smart-link-cross-product-url-wrapper';
 import Container from './components/container';
 import { getContextByStatus } from './utils';
 var PENDING_LINK_STATUSES = [SmartLinkStatus.Pending, SmartLinkStatus.Resolving];
@@ -59,6 +60,14 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var cardType = cardState.status,
     details = cardState.details;
   var status = cardType;
+  var appendCrossProductAnalyticsParams = useSmartLinkCrossProductUrlWrapperGated({
+    details: details
+  });
+  var transformUrlCallback = useCallback(function () {
+    var destinationUrl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : url;
+    return appendCrossProductAnalyticsParams(destinationUrl);
+  }, [appendCrossProductAnalyticsParams, url]);
+  var transformUrl = fg('platform_smartlink_xpc_url_wrapping') ? transformUrlCallback : undefined;
 
   // if we have placeholder state it means we can internally use it
   // as temporary resolved data until the actual data comes back as one of the final statuses
@@ -88,9 +97,10 @@ var FlexibleCard = function FlexibleCard(_ref) {
       status: placeholderCardState ? placeHolderStatus : status,
       url: url,
       isPreviewPanelAvailable: isPreviewPanelAvailable,
-      openPreviewPanel: openPreviewPanel
+      openPreviewPanel: openPreviewPanel,
+      transformUrl: transformUrl
     }));
-  }, [aiSummaryConfig, appearance, actionOptions, details, id, isPreviewPanelAvailable, onAuthorize, onClick, onAuxClick, onContextMenu, openPreviewPanel, origin, placeholderCardState, placeHolderStatus, product, renderers, resolve, rovoConfig, status, url, fireEvent]);
+  }, [aiSummaryConfig, appearance, actionOptions, details, id, isPreviewPanelAvailable, onAuthorize, onClick, onAuxClick, onContextMenu, openPreviewPanel, origin, placeholderCardState, placeHolderStatus, product, renderers, resolve, rovoConfig, status, transformUrl, url, fireEvent]);
   var flexibleCardContext = useMemo(function () {
     return {
       data: context,

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.23.2",
+  packageVersion: "44.23.4",
   componentName: 'linkUrl'
 };
 var LinkUrl = function LinkUrl(_ref) {

package/dist/types/entry-points/card-types.d.ts

@@ -1 +1 @@
-export type { CardProps, CardAppearance, CardPlatform } from '../view/Card/types';
+export type { CardProps, CardAppearance, CardPlatform, OnClickCallback } from '../view/Card/types';

package/dist/types/extractors/action/extract-invoke-preview-action.d.ts

@@ -2,7 +2,7 @@ import { type FireEventFunction } from '../../common/analytics/types';
 import { type InvokeClientActionProps } from '../../state/hooks/use-invoke-client-action/types';
 import { type AnalyticsOrigin } from '../../utils/types';
 import { type EmbedModalProps } from '../../view/EmbedModal/types';
-import { type ExtractClientActionsParam } from './types';
+import { type ExtractClientActionsParam, type TransformUrlFn } from './types';
 export type ExtractInvokePreviewActionParam = ExtractClientActionsParam & {
     fireEvent?: FireEventFunction;
     isPreviewPanelAvailable?: (params: {
@@ -19,6 +19,7 @@ export type ExtractInvokePreviewActionParam = ExtractClientActionsParam & {
         url: string;
     }) => void;
     origin?: AnalyticsOrigin;
+    transformUrl?: TransformUrlFn;
 };
 type ExtractInvokePreviewActionReturn = {
     hasPreviewPanel?: boolean;

package/dist/types/extractors/action/extract-invoke-view-action.d.ts

@@ -1,3 +1,6 @@
 import { type InvokeClientActionProps } from '../../state/hooks/use-invoke-client-action/types';
-import { type ExtractClientActionsParam } from './types';
-export declare const extractInvokeViewAction: ({ actionOptions, appearance, id, response }: ExtractClientActionsParam, force?: boolean) => InvokeClientActionProps | undefined;
+import { type ExtractClientActionsParam, type TransformUrlFn } from './types';
+export type ExtractInvokeViewActionParam = ExtractClientActionsParam & {
+    transformUrl?: TransformUrlFn;
+};
+export declare const extractInvokeViewAction: ({ actionOptions, appearance, transformUrl, id, response }: ExtractInvokeViewActionParam, force?: boolean) => InvokeClientActionProps | undefined;

package/dist/types/extractors/action/types.d.ts

@@ -1,6 +1,7 @@
 import type { JsonLd } from '@atlaskit/json-ld-types';
 import type { InternalCardActionOptions as CardActionOptions } from '../../view/Card/types';
 import type { FlexibleCardProps } from '../../view/FlexibleCard/types';
+export type TransformUrlFn = (url?: string) => string | undefined;
 export type ExtractClientActionsParam = {
     actionOptions?: CardActionOptions;
     appearance?: FlexibleCardProps['appearance'];

package/dist/types/extractors/flexible/actions/index.d.ts

@@ -6,6 +6,7 @@ import { type AISummaryConfig } from '../../../state/hooks/use-ai-summary-config
 import type { RovoConfig } from '../../../state/hooks/use-rovo-config';
 import { type AnalyticsOrigin } from '../../../utils/types';
 import { type InternalCardActionOptions as CardActionOptions, type CardInnerAppearance } from '../../../view/Card/types';
+import { type TransformUrlFn } from '../../action/types';
 export type ExtractActionsParam = {
     actionOptions?: CardActionOptions;
     aiSummaryConfig?: AISummaryConfig;
@@ -28,6 +29,7 @@ export type ExtractActionsParam = {
     product?: ProductType;
     response: JsonLd.Response;
     rovoConfig?: RovoConfig;
+    transformUrl?: TransformUrlFn;
     url?: string;
 };
-export declare const extractFlexibleCardActions: ({ actionOptions, aiSummaryConfig, appearance, fireEvent, id, origin, product, response, rovoConfig, url, isPreviewPanelAvailable, openPreviewPanel, }: ExtractActionsParam) => FlexibleUiActions | undefined;
+export declare const extractFlexibleCardActions: ({ actionOptions, aiSummaryConfig, appearance, fireEvent, id, origin, product, response, rovoConfig, transformUrl, url, isPreviewPanelAvailable, openPreviewPanel, }: ExtractActionsParam) => FlexibleUiActions | undefined;

package/dist/types/extractors/flexible/extract-state.d.ts

@@ -3,6 +3,7 @@ import { type FireEventFunction } from '../../common/analytics/types';
 import { type ResolveFunction } from '../../state/hooks/use-resolve';
 import { type AnalyticsOrigin } from '../../utils/types';
 import { type InternalCardActionOptions as CardActionOptions, type CardInnerAppearance } from '../../view/Card/types';
+import { type TransformUrlFn } from '../action/types';
 import { type LinkLozenge } from '../common/lozenge/types';
 declare const extractState: (response?: JsonLd.Response, actionOptions?: CardActionOptions, id?: string, appearance?: CardInnerAppearance, origin?: AnalyticsOrigin, fireEvent?: FireEventFunction, resolve?: ResolveFunction, isPreviewPanelAvailable?: (params: {
     ari: string;
@@ -14,5 +15,5 @@ declare const extractState: (response?: JsonLd.Response, actionOptions?: CardAct
         embedUrl?: string;
     };
     url: string;
-}) => void) => LinkLozenge | undefined;
+}) => void, transformUrl?: TransformUrlFn) => LinkLozenge | undefined;
 export default extractState;

package/dist/types/extractors/flexible/index.d.ts

@@ -1,4 +1,4 @@
 import { type FlexibleUiDataContext } from '../../state/flexible-ui-context/types';
 import { type ExtractFlexibleUiDataContextParams } from '../../view/FlexibleCard/types';
-declare const extractFlexibleUiContext: ({ appearance, fireEvent, id, onClick, onAuxClick, onContextMenu, origin, product, resolve, rovoConfig, actionOptions, response, status, aiSummaryConfig, isPreviewPanelAvailable, openPreviewPanel, ...props }?: Partial<ExtractFlexibleUiDataContextParams>) => FlexibleUiDataContext | undefined;
+declare const extractFlexibleUiContext: ({ appearance, fireEvent, id, onClick, onAuxClick, onContextMenu, origin, product, resolve, rovoConfig, actionOptions, response, status, aiSummaryConfig, isPreviewPanelAvailable, openPreviewPanel, transformUrl, ...props }?: Partial<ExtractFlexibleUiDataContextParams>) => FlexibleUiDataContext | undefined;
 export default extractFlexibleUiContext;

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

@@ -6,7 +6,7 @@ import { type FrameStyle } from '../EmbedCard/types';
 import type { EmbedModalSize } from '../EmbedModal/types';
 import { type FlexibleUiOptions } from '../FlexibleCard/types';
 import { type HoverPreviewOptions } from '../HoverCard/types';
-import { type InlinePreloaderStyle, type OnErrorCallback } from '../types';
+import { type EventHandlerWithData, type InlinePreloaderStyle, type OnErrorCallback } from '../types';
 export type { CardAppearance, CardPlatform };
 export type CardInnerAppearance = CardAppearance | 'embedPreview' | 'flexible' | 'hoverCardPreview' | 'url';
 export type EmbedIframeUrlType = 'href' | 'interactiveHref';
@@ -77,6 +77,83 @@ interface HoverPreviewProps extends ActionProps {
      */
     showHoverPreview?: boolean;
 }
+export type OnClickData = {
+    /**
+     * The destination URL that Smart Link resolved and will navigate to.
+     * This may differ from the original `url` prop if Smart Link applied
+     * cross-product analytics parameters or resolved a preferred URL from metadata.
+     */
+    destinationUrl?: string;
+    /**
+     * The original `url` prop given to the component
+     * and the key to access link metadata in SmartCardProvider.
+     */
+    url?: string;
+};
+/**
+ * Callback type for click events on Smart Links.
+ *
+ * Equivalent to:
+ *   (event: React.MouseEvent | React.KeyboardEvent, data?: OnClickData) => void
+ *
+ * Uses `EventHandlerWithData` (a bivariant method type) so that consumers can pass
+ * callbacks with narrower event types (e.g. `React.MouseEvent<HTMLElement>`) without
+ * TypeScript errors — the same technique React uses internally for `React.EventHandler`.
+ *
+ * The optional `data` argument provides additional context:
+ * - `data.destinationUrl` — the URL Smart Link resolved and will navigate to.
+ * - `data.url` — the original `url` prop passed to the component.
+ *
+ * Use this type when typing your own click handler variable or function outside JSX:
+ * @example
+ * const handleClick: OnClickCallback = (event, data) => {
+ *   event.preventDefault();
+ *   navigate(data?.destinationUrl ?? fallbackUrl);
+ * };
+ */
+export type OnClickCallback = EventHandlerWithData<React.MouseEvent | React.KeyboardEvent, OnClickData>;
+interface CardEventProps {
+    /**
+     * A React component responsible for returning a fallback UI when smart link fails to render because of uncaught errors.
+     */
+    fallbackComponent?: React.ComponentType;
+    /**
+     * A callback function triggered when a Smart Link is clicked.
+     *
+     * When defined, the default browser navigation is prevented and your handler
+     * is responsible for navigation — except for Flexible Card, which always opens
+     * the link and then calls the callback.
+     *
+     * The optional second argument `data` provides additional context about the click:
+     * - `data.destinationUrl` — the resolved URL Smart Link will navigate to.
+     *   This may differ from the original `url` prop if Smart Link resolved a
+     *   preferred URL from metadata or appended analytics parameters.
+     * - `data.url` — the original `url` prop passed to the component.
+     *
+     * @example
+     * // Basic usage
+     * onClick={(e) => { e.preventDefault(); window.location.href = myUrl; }}
+     *
+     * // With destination URL
+     * onClick={(e, data) => { navigate(data?.destinationUrl ?? url); }}
+     */
+    onClick?: OnClickCallback;
+    /**
+     * A callback function currently invoked in two cases:
+     * 1. When the `CardState.status` is one of `ErrorCardType`. "err" property in argument will be undefined in this case
+     *    This does not mean that smart card failed to render.
+     * 2. When there is any unhandled error inside smart card while rendering, resulting in failure to render smart card successfully.
+     *    "err" property in argument will be provided in this case.
+     *    Presence of an err property indicates that the client should either render their own fallback
+     *    or provide a fallbackComponent prop which will be rendered instead smart card component.
+     *    If fallbackComponent is not provided, smart card will render null
+     */
+    onError?: OnErrorCallback;
+    /**
+     * A callback function after the url is resolved into smart card.
+     */
+    onResolve?: OnResolveCallback;
+}
 export interface BaseCardProps {
     /**
      * Define smart card default appearance.
@@ -100,10 +177,6 @@ export interface BaseCardProps {
      * This prop allows smartlinks inside of editor to bypass that as they have other ways to open Preview panel.
      */
     disablePreviewPanel?: boolean;
-    /**
-     * A React component responsible for returning a fallback UI when smart link fails to render because of uncaught errors.
-     */
-    fallbackComponent?: React.ComponentType;
     /**
      * Unique id for smart link used in analytics.
      */
@@ -112,25 +185,6 @@ export interface BaseCardProps {
      * Show selected state of smart link.
      */
     isSelected?: boolean;
-    /**
-     * A callback function after a link is clicked.
-     */
-    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
-    /**
-     * A callback function currently invoked in two cases:
-     * 1. When the `CardState.status` is one of `ErrorCardType`. "err" property in argument will be undefined in this case
-     *    This does not mean that smart card failed to render.
-     * 2. When there is any unhandled error inside smart card while rendering, resulting in failure to render smart card successfully.
-     *    "err" property in argument will be provided in this case.
-     *    Presence of an err property indicates that the client should either render their own fallback
-     *    or provide a fallbackComponent prop which will be rendered instead smart card component.
-     *    If fallbackComponent is not provided, smart card will render null
-     */
-    onError?: OnErrorCallback;
-    /**
-     * A callback function after the url is resolved into smart card.
-     */
-    onResolve?: OnResolveCallback;
     /**
      * String to be displayed while the Card component is (lazy)loading.
      */
@@ -211,5 +265,5 @@ export interface FlexibleProps extends ActionProps, HoverPreviewProps {
     children?: React.ReactNode;
     ui?: FlexibleUiOptions;
 }
-export interface CardProps extends BaseCardProps, InlineProps, BlockProps, EmbedProps, FlexibleProps, WithAnalyticsEventsProps {
+export interface CardProps extends BaseCardProps, CardEventProps, InlineProps, BlockProps, EmbedProps, FlexibleProps, WithAnalyticsEventsProps {
 }

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

@@ -1,6 +1,5 @@
-import { type EventHandler, type KeyboardEvent, type MouseEvent } from 'react';
 import type { SmartLinkResponse } from '@atlaskit/linking-types';
-import type { CardAppearance, CardPlatform, EmbedIframeUrlType, InternalCardActionOptions, OnResolveCallback } from '../Card/types';
+import type { CardAppearance, CardPlatform, EmbedIframeUrlType, InternalCardActionOptions, OnClickCallback, OnResolveCallback } from '../Card/types';
 import { type FrameStyle } from '../EmbedCard/types';
 import { type FlexibleUiOptions } from '../FlexibleCard/types';
 import { type HoverPreviewOptions } from '../HoverCard/types';
@@ -25,7 +24,7 @@ export type CardWithUrlContentProps = {
     inlinePreloaderStyle?: InlinePreloaderStyle;
     isHovered?: boolean;
     isSelected?: boolean;
-    onClick?: EventHandler<MouseEvent | KeyboardEvent>;
+    onClick?: OnClickCallback;
     onError?: OnErrorCallback;
     onResolve?: OnResolveCallback;
     placeholder?: string;

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

@@ -4,6 +4,7 @@ import { type CardState, type ProductType } from '@atlaskit/linking-common';
 import { type SmartLinkResponse } from '@atlaskit/linking-types';
 import { type FireEventFunction } from '../../common/analytics/types';
 import { type SmartLinkSize, type SmartLinkStatus, type SmartLinkTheme } from '../../constants';
+import type { TransformUrlFn } from '../../extractors/action/types';
 import { type AISummaryConfig } from '../../state/hooks/use-ai-summary-config/types';
 import { type ResolveFunction } from '../../state/hooks/use-resolve';
 import type { RovoConfig } from '../../state/hooks/use-rovo-config';
@@ -197,6 +198,7 @@ export type ExtractFlexibleUiDataContextParams = Pick<FlexibleCardProps, 'appear
     response?: SmartLinkResponse;
     rovoConfig?: RovoConfig;
     status?: SmartLinkStatus;
+    transformUrl?: TransformUrlFn;
 };
 /**
  * Mark a specific props in the type as optional.

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

@@ -32,3 +32,15 @@ export type OnErrorCallback = (data: {
     status: Extract<CardType, ErrorCardType>;
     url: string;
 }) => void;
+/**
+ * The method-in-object pattern (extracting `handler` via indexed access) is used intentionally
+ * to replicate TypeScript's bivariant method parameter checking — the same technique React uses
+ * internally for `React.EventHandler`. This allows consumers to pass callbacks with narrower
+ * event types (e.g. `React.MouseEvent<HTMLElement>`) without TypeScript errors, while still
+ * enabling callers inside Smart Links to pass the optional `data` second argument.
+ *
+ * See: https://www.typescriptlang.org/docs/handbook/2/functions.html#function-compatibility
+ */
+export type EventHandlerWithData<TEvent extends React.SyntheticEvent<any>, TData extends object> = {
+    bivarianceHack(event: TEvent, data?: TData): void;
+}['bivarianceHack'];

package/dist/types-ts4.5/entry-points/card-types.d.ts

@@ -1 +1 @@
-export type { CardProps, CardAppearance, CardPlatform } from '../view/Card/types';
+export type { CardProps, CardAppearance, CardPlatform, OnClickCallback } from '../view/Card/types';

package/dist/types-ts4.5/extractors/action/extract-invoke-preview-action.d.ts

@@ -2,7 +2,7 @@ import { type FireEventFunction } from '../../common/analytics/types';
 import { type InvokeClientActionProps } from '../../state/hooks/use-invoke-client-action/types';
 import { type AnalyticsOrigin } from '../../utils/types';
 import { type EmbedModalProps } from '../../view/EmbedModal/types';
-import { type ExtractClientActionsParam } from './types';
+import { type ExtractClientActionsParam, type TransformUrlFn } from './types';
 export type ExtractInvokePreviewActionParam = ExtractClientActionsParam & {
     fireEvent?: FireEventFunction;
     isPreviewPanelAvailable?: (params: {
@@ -19,6 +19,7 @@ export type ExtractInvokePreviewActionParam = ExtractClientActionsParam & {
         url: string;
     }) => void;
     origin?: AnalyticsOrigin;
+    transformUrl?: TransformUrlFn;
 };
 type ExtractInvokePreviewActionReturn = {
     hasPreviewPanel?: boolean;

package/dist/types-ts4.5/extractors/action/extract-invoke-view-action.d.ts

@@ -1,3 +1,6 @@
 import { type InvokeClientActionProps } from '../../state/hooks/use-invoke-client-action/types';
-import { type ExtractClientActionsParam } from './types';
-export declare const extractInvokeViewAction: ({ actionOptions, appearance, id, response }: ExtractClientActionsParam, force?: boolean) => InvokeClientActionProps | undefined;
+import { type ExtractClientActionsParam, type TransformUrlFn } from './types';
+export type ExtractInvokeViewActionParam = ExtractClientActionsParam & {
+    transformUrl?: TransformUrlFn;
+};
+export declare const extractInvokeViewAction: ({ actionOptions, appearance, transformUrl, id, response }: ExtractInvokeViewActionParam, force?: boolean) => InvokeClientActionProps | undefined;

package/dist/types-ts4.5/extractors/action/types.d.ts

@@ -1,6 +1,7 @@
 import type { JsonLd } from '@atlaskit/json-ld-types';
 import type { InternalCardActionOptions as CardActionOptions } from '../../view/Card/types';
 import type { FlexibleCardProps } from '../../view/FlexibleCard/types';
+export type TransformUrlFn = (url?: string) => string | undefined;
 export type ExtractClientActionsParam = {
     actionOptions?: CardActionOptions;
     appearance?: FlexibleCardProps['appearance'];

package/dist/types-ts4.5/extractors/flexible/actions/index.d.ts

@@ -6,6 +6,7 @@ import { type AISummaryConfig } from '../../../state/hooks/use-ai-summary-config
 import type { RovoConfig } from '../../../state/hooks/use-rovo-config';
 import { type AnalyticsOrigin } from '../../../utils/types';
 import { type InternalCardActionOptions as CardActionOptions, type CardInnerAppearance } from '../../../view/Card/types';
+import { type TransformUrlFn } from '../../action/types';
 export type ExtractActionsParam = {
     actionOptions?: CardActionOptions;
     aiSummaryConfig?: AISummaryConfig;
@@ -28,6 +29,7 @@ export type ExtractActionsParam = {
     product?: ProductType;
     response: JsonLd.Response;
     rovoConfig?: RovoConfig;
+    transformUrl?: TransformUrlFn;
     url?: string;
 };
-export declare const extractFlexibleCardActions: ({ actionOptions, aiSummaryConfig, appearance, fireEvent, id, origin, product, response, rovoConfig, url, isPreviewPanelAvailable, openPreviewPanel, }: ExtractActionsParam) => FlexibleUiActions | undefined;
+export declare const extractFlexibleCardActions: ({ actionOptions, aiSummaryConfig, appearance, fireEvent, id, origin, product, response, rovoConfig, transformUrl, url, isPreviewPanelAvailable, openPreviewPanel, }: ExtractActionsParam) => FlexibleUiActions | undefined;

package/dist/types-ts4.5/extractors/flexible/extract-state.d.ts

@@ -3,6 +3,7 @@ import { type FireEventFunction } from '../../common/analytics/types';
 import { type ResolveFunction } from '../../state/hooks/use-resolve';
 import { type AnalyticsOrigin } from '../../utils/types';
 import { type InternalCardActionOptions as CardActionOptions, type CardInnerAppearance } from '../../view/Card/types';
+import { type TransformUrlFn } from '../action/types';
 import { type LinkLozenge } from '../common/lozenge/types';
 declare const extractState: (response?: JsonLd.Response, actionOptions?: CardActionOptions, id?: string, appearance?: CardInnerAppearance, origin?: AnalyticsOrigin, fireEvent?: FireEventFunction, resolve?: ResolveFunction, isPreviewPanelAvailable?: (params: {
     ari: string;
@@ -14,5 +15,5 @@ declare const extractState: (response?: JsonLd.Response, actionOptions?: CardAct
         embedUrl?: string;
     };
     url: string;
-}) => void) => LinkLozenge | undefined;
+}) => void, transformUrl?: TransformUrlFn) => LinkLozenge | undefined;
 export default extractState;

package/dist/types-ts4.5/extractors/flexible/index.d.ts

@@ -1,4 +1,4 @@
 import { type FlexibleUiDataContext } from '../../state/flexible-ui-context/types';
 import { type ExtractFlexibleUiDataContextParams } from '../../view/FlexibleCard/types';
-declare const extractFlexibleUiContext: ({ appearance, fireEvent, id, onClick, onAuxClick, onContextMenu, origin, product, resolve, rovoConfig, actionOptions, response, status, aiSummaryConfig, isPreviewPanelAvailable, openPreviewPanel, ...props }?: Partial<ExtractFlexibleUiDataContextParams>) => FlexibleUiDataContext | undefined;
+declare const extractFlexibleUiContext: ({ appearance, fireEvent, id, onClick, onAuxClick, onContextMenu, origin, product, resolve, rovoConfig, actionOptions, response, status, aiSummaryConfig, isPreviewPanelAvailable, openPreviewPanel, transformUrl, ...props }?: Partial<ExtractFlexibleUiDataContextParams>) => FlexibleUiDataContext | undefined;
 export default extractFlexibleUiContext;