@atlaskit/smart-card 44.23.4 → 44.24.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/utils/analytics/analytics.js +1 -1
- package/dist/cjs/view/CardWithUrl/component.js +4 -3
- package/dist/cjs/view/LinkUrl/index.js +1 -1
- package/dist/es2019/utils/analytics/analytics.js +1 -1
- package/dist/es2019/view/CardWithUrl/component.js +4 -3
- package/dist/es2019/view/LinkUrl/index.js +1 -1
- package/dist/esm/utils/analytics/analytics.js +1 -1
- package/dist/esm/view/CardWithUrl/component.js +4 -3
- package/dist/esm/view/LinkUrl/index.js +1 -1
- package/dist/types/entry-points/card-types.d.ts +1 -1
- package/dist/types/view/Card/types.d.ts +79 -25
- package/dist/types/view/CardWithUrl/types.d.ts +2 -3
- package/dist/types/view/types.d.ts +12 -0
- package/dist/types-ts4.5/entry-points/card-types.d.ts +1 -1
- package/dist/types-ts4.5/view/Card/types.d.ts +79 -25
- package/dist/types-ts4.5/view/CardWithUrl/types.d.ts +2 -3
- package/dist/types-ts4.5/view/types.d.ts +12 -0
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/smart-card
|
|
2
2
|
|
|
3
|
+
## 44.24.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 44.24.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`b108dbe3ff3fa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b108dbe3ff3fa) -
|
|
14
|
+
Return destination url from smart link onClick callback.
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 44.23.4
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
|
|
|
11
11
|
var context = exports.context = {
|
|
12
12
|
componentName: 'smart-cards',
|
|
13
13
|
packageName: "@atlaskit/smart-card" || '',
|
|
14
|
-
packageVersion: "44.
|
|
14
|
+
packageVersion: "44.24.0" || ''
|
|
15
15
|
};
|
|
16
16
|
var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
|
|
17
17
|
TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
|
|
@@ -170,9 +170,10 @@ function Component(_ref) {
|
|
|
170
170
|
// FIXME: preferredUrl should be rendered in the DOM anchor href instead of derived at click time
|
|
171
171
|
var preferredUrl = (0, _helpers.getClickUrl)(url, state.details);
|
|
172
172
|
var destinationUrl = (_appendCrossProductAn = appendCrossProductAnalyticsParams(preferredUrl)) !== null && _appendCrossProductAn !== void 0 ? _appendCrossProductAn : preferredUrl;
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
173
|
+
onClick === null || onClick === void 0 || onClick(event, {
|
|
174
|
+
url: url,
|
|
175
|
+
destinationUrl: destinationUrl
|
|
176
|
+
});
|
|
176
177
|
|
|
177
178
|
// Check if the event is prevented via onClick callback
|
|
178
179
|
var consumerPreventedNavigation = event.defaultPrevented && !isEventDefaultPrevented;
|
|
@@ -19,7 +19,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
|
|
|
19
19
|
_excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
|
|
20
20
|
var PACKAGE_DATA = {
|
|
21
21
|
packageName: "@atlaskit/smart-card",
|
|
22
|
-
packageVersion: "44.
|
|
22
|
+
packageVersion: "44.24.0",
|
|
23
23
|
componentName: 'linkUrl'
|
|
24
24
|
};
|
|
25
25
|
var LinkUrl = function LinkUrl(_ref) {
|
|
@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
|
|
|
2
2
|
export const context = {
|
|
3
3
|
componentName: 'smart-cards',
|
|
4
4
|
packageName: "@atlaskit/smart-card" || '',
|
|
5
|
-
packageVersion: "44.
|
|
5
|
+
packageVersion: "44.24.0" || ''
|
|
6
6
|
};
|
|
7
7
|
export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
|
|
8
8
|
TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
|
|
@@ -161,9 +161,10 @@ function Component({
|
|
|
161
161
|
// FIXME: preferredUrl should be rendered in the DOM anchor href instead of derived at click time
|
|
162
162
|
const preferredUrl = getClickUrl(url, state.details);
|
|
163
163
|
const destinationUrl = (_appendCrossProductAn = appendCrossProductAnalyticsParams(preferredUrl)) !== null && _appendCrossProductAn !== void 0 ? _appendCrossProductAn : preferredUrl;
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
164
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event, {
|
|
165
|
+
url,
|
|
166
|
+
destinationUrl
|
|
167
|
+
});
|
|
167
168
|
|
|
168
169
|
// Check if the event is prevented via onClick callback
|
|
169
170
|
const consumerPreventedNavigation = event.defaultPrevented && !isEventDefaultPrevented;
|
|
@@ -9,7 +9,7 @@ import LinkWarningModal from './LinkWarningModal';
|
|
|
9
9
|
import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
|
|
10
10
|
const PACKAGE_DATA = {
|
|
11
11
|
packageName: "@atlaskit/smart-card",
|
|
12
|
-
packageVersion: "44.
|
|
12
|
+
packageVersion: "44.24.0",
|
|
13
13
|
componentName: 'linkUrl'
|
|
14
14
|
};
|
|
15
15
|
const LinkUrl = ({
|
|
@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
|
|
|
4
4
|
export var context = {
|
|
5
5
|
componentName: 'smart-cards',
|
|
6
6
|
packageName: "@atlaskit/smart-card" || '',
|
|
7
|
-
packageVersion: "44.
|
|
7
|
+
packageVersion: "44.24.0" || ''
|
|
8
8
|
};
|
|
9
9
|
export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
|
|
10
10
|
TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
|
|
@@ -161,9 +161,10 @@ function Component(_ref) {
|
|
|
161
161
|
// FIXME: preferredUrl should be rendered in the DOM anchor href instead of derived at click time
|
|
162
162
|
var preferredUrl = getClickUrl(url, state.details);
|
|
163
163
|
var destinationUrl = (_appendCrossProductAn = appendCrossProductAnalyticsParams(preferredUrl)) !== null && _appendCrossProductAn !== void 0 ? _appendCrossProductAn : preferredUrl;
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
164
|
+
onClick === null || onClick === void 0 || onClick(event, {
|
|
165
|
+
url: url,
|
|
166
|
+
destinationUrl: destinationUrl
|
|
167
|
+
});
|
|
167
168
|
|
|
168
169
|
// Check if the event is prevented via onClick callback
|
|
169
170
|
var consumerPreventedNavigation = event.defaultPrevented && !isEventDefaultPrevented;
|
|
@@ -12,7 +12,7 @@ import LinkWarningModal from './LinkWarningModal';
|
|
|
12
12
|
import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
|
|
13
13
|
var PACKAGE_DATA = {
|
|
14
14
|
packageName: "@atlaskit/smart-card",
|
|
15
|
-
packageVersion: "44.
|
|
15
|
+
packageVersion: "44.24.0",
|
|
16
16
|
componentName: 'linkUrl'
|
|
17
17
|
};
|
|
18
18
|
var LinkUrl = function LinkUrl(_ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type { CardProps, CardAppearance, CardPlatform } from '../view/Card/types';
|
|
1
|
+
export type { CardProps, CardAppearance, CardPlatform, OnClickCallback } from '../view/Card/types';
|
|
@@ -6,7 +6,7 @@ import { type FrameStyle } from '../EmbedCard/types';
|
|
|
6
6
|
import type { EmbedModalSize } from '../EmbedModal/types';
|
|
7
7
|
import { type FlexibleUiOptions } from '../FlexibleCard/types';
|
|
8
8
|
import { type HoverPreviewOptions } from '../HoverCard/types';
|
|
9
|
-
import { type InlinePreloaderStyle, type OnErrorCallback } from '../types';
|
|
9
|
+
import { type EventHandlerWithData, type InlinePreloaderStyle, type OnErrorCallback } from '../types';
|
|
10
10
|
export type { CardAppearance, CardPlatform };
|
|
11
11
|
export type CardInnerAppearance = CardAppearance | 'embedPreview' | 'flexible' | 'hoverCardPreview' | 'url';
|
|
12
12
|
export type EmbedIframeUrlType = 'href' | 'interactiveHref';
|
|
@@ -77,6 +77,83 @@ interface HoverPreviewProps extends ActionProps {
|
|
|
77
77
|
*/
|
|
78
78
|
showHoverPreview?: boolean;
|
|
79
79
|
}
|
|
80
|
+
export type OnClickData = {
|
|
81
|
+
/**
|
|
82
|
+
* The destination URL that Smart Link resolved and will navigate to.
|
|
83
|
+
* This may differ from the original `url` prop if Smart Link applied
|
|
84
|
+
* cross-product analytics parameters or resolved a preferred URL from metadata.
|
|
85
|
+
*/
|
|
86
|
+
destinationUrl?: string;
|
|
87
|
+
/**
|
|
88
|
+
* The original `url` prop given to the component
|
|
89
|
+
* and the key to access link metadata in SmartCardProvider.
|
|
90
|
+
*/
|
|
91
|
+
url?: string;
|
|
92
|
+
};
|
|
93
|
+
/**
|
|
94
|
+
* Callback type for click events on Smart Links.
|
|
95
|
+
*
|
|
96
|
+
* Equivalent to:
|
|
97
|
+
* (event: React.MouseEvent | React.KeyboardEvent, data?: OnClickData) => void
|
|
98
|
+
*
|
|
99
|
+
* Uses `EventHandlerWithData` (a bivariant method type) so that consumers can pass
|
|
100
|
+
* callbacks with narrower event types (e.g. `React.MouseEvent<HTMLElement>`) without
|
|
101
|
+
* TypeScript errors — the same technique React uses internally for `React.EventHandler`.
|
|
102
|
+
*
|
|
103
|
+
* The optional `data` argument provides additional context:
|
|
104
|
+
* - `data.destinationUrl` — the URL Smart Link resolved and will navigate to.
|
|
105
|
+
* - `data.url` — the original `url` prop passed to the component.
|
|
106
|
+
*
|
|
107
|
+
* Use this type when typing your own click handler variable or function outside JSX:
|
|
108
|
+
* @example
|
|
109
|
+
* const handleClick: OnClickCallback = (event, data) => {
|
|
110
|
+
* event.preventDefault();
|
|
111
|
+
* navigate(data?.destinationUrl ?? fallbackUrl);
|
|
112
|
+
* };
|
|
113
|
+
*/
|
|
114
|
+
export type OnClickCallback = EventHandlerWithData<React.MouseEvent | React.KeyboardEvent, OnClickData>;
|
|
115
|
+
interface CardEventProps {
|
|
116
|
+
/**
|
|
117
|
+
* A React component responsible for returning a fallback UI when smart link fails to render because of uncaught errors.
|
|
118
|
+
*/
|
|
119
|
+
fallbackComponent?: React.ComponentType;
|
|
120
|
+
/**
|
|
121
|
+
* A callback function triggered when a Smart Link is clicked.
|
|
122
|
+
*
|
|
123
|
+
* When defined, the default browser navigation is prevented and your handler
|
|
124
|
+
* is responsible for navigation — except for Flexible Card, which always opens
|
|
125
|
+
* the link and then calls the callback.
|
|
126
|
+
*
|
|
127
|
+
* The optional second argument `data` provides additional context about the click:
|
|
128
|
+
* - `data.destinationUrl` — the resolved URL Smart Link will navigate to.
|
|
129
|
+
* This may differ from the original `url` prop if Smart Link resolved a
|
|
130
|
+
* preferred URL from metadata or appended analytics parameters.
|
|
131
|
+
* - `data.url` — the original `url` prop passed to the component.
|
|
132
|
+
*
|
|
133
|
+
* @example
|
|
134
|
+
* // Basic usage
|
|
135
|
+
* onClick={(e) => { e.preventDefault(); window.location.href = myUrl; }}
|
|
136
|
+
*
|
|
137
|
+
* // With destination URL
|
|
138
|
+
* onClick={(e, data) => { navigate(data?.destinationUrl ?? url); }}
|
|
139
|
+
*/
|
|
140
|
+
onClick?: OnClickCallback;
|
|
141
|
+
/**
|
|
142
|
+
* A callback function currently invoked in two cases:
|
|
143
|
+
* 1. When the `CardState.status` is one of `ErrorCardType`. "err" property in argument will be undefined in this case
|
|
144
|
+
* This does not mean that smart card failed to render.
|
|
145
|
+
* 2. When there is any unhandled error inside smart card while rendering, resulting in failure to render smart card successfully.
|
|
146
|
+
* "err" property in argument will be provided in this case.
|
|
147
|
+
* Presence of an err property indicates that the client should either render their own fallback
|
|
148
|
+
* or provide a fallbackComponent prop which will be rendered instead smart card component.
|
|
149
|
+
* If fallbackComponent is not provided, smart card will render null
|
|
150
|
+
*/
|
|
151
|
+
onError?: OnErrorCallback;
|
|
152
|
+
/**
|
|
153
|
+
* A callback function after the url is resolved into smart card.
|
|
154
|
+
*/
|
|
155
|
+
onResolve?: OnResolveCallback;
|
|
156
|
+
}
|
|
80
157
|
export interface BaseCardProps {
|
|
81
158
|
/**
|
|
82
159
|
* Define smart card default appearance.
|
|
@@ -100,10 +177,6 @@ export interface BaseCardProps {
|
|
|
100
177
|
* This prop allows smartlinks inside of editor to bypass that as they have other ways to open Preview panel.
|
|
101
178
|
*/
|
|
102
179
|
disablePreviewPanel?: boolean;
|
|
103
|
-
/**
|
|
104
|
-
* A React component responsible for returning a fallback UI when smart link fails to render because of uncaught errors.
|
|
105
|
-
*/
|
|
106
|
-
fallbackComponent?: React.ComponentType;
|
|
107
180
|
/**
|
|
108
181
|
* Unique id for smart link used in analytics.
|
|
109
182
|
*/
|
|
@@ -112,25 +185,6 @@ export interface BaseCardProps {
|
|
|
112
185
|
* Show selected state of smart link.
|
|
113
186
|
*/
|
|
114
187
|
isSelected?: boolean;
|
|
115
|
-
/**
|
|
116
|
-
* A callback function after a link is clicked.
|
|
117
|
-
*/
|
|
118
|
-
onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
|
|
119
|
-
/**
|
|
120
|
-
* A callback function currently invoked in two cases:
|
|
121
|
-
* 1. When the `CardState.status` is one of `ErrorCardType`. "err" property in argument will be undefined in this case
|
|
122
|
-
* This does not mean that smart card failed to render.
|
|
123
|
-
* 2. When there is any unhandled error inside smart card while rendering, resulting in failure to render smart card successfully.
|
|
124
|
-
* "err" property in argument will be provided in this case.
|
|
125
|
-
* Presence of an err property indicates that the client should either render their own fallback
|
|
126
|
-
* or provide a fallbackComponent prop which will be rendered instead smart card component.
|
|
127
|
-
* If fallbackComponent is not provided, smart card will render null
|
|
128
|
-
*/
|
|
129
|
-
onError?: OnErrorCallback;
|
|
130
|
-
/**
|
|
131
|
-
* A callback function after the url is resolved into smart card.
|
|
132
|
-
*/
|
|
133
|
-
onResolve?: OnResolveCallback;
|
|
134
188
|
/**
|
|
135
189
|
* String to be displayed while the Card component is (lazy)loading.
|
|
136
190
|
*/
|
|
@@ -211,5 +265,5 @@ export interface FlexibleProps extends ActionProps, HoverPreviewProps {
|
|
|
211
265
|
children?: React.ReactNode;
|
|
212
266
|
ui?: FlexibleUiOptions;
|
|
213
267
|
}
|
|
214
|
-
export interface CardProps extends BaseCardProps, InlineProps, BlockProps, EmbedProps, FlexibleProps, WithAnalyticsEventsProps {
|
|
268
|
+
export interface CardProps extends BaseCardProps, CardEventProps, InlineProps, BlockProps, EmbedProps, FlexibleProps, WithAnalyticsEventsProps {
|
|
215
269
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { type EventHandler, type KeyboardEvent, type MouseEvent } from 'react';
|
|
2
1
|
import type { SmartLinkResponse } from '@atlaskit/linking-types';
|
|
3
|
-
import type { CardAppearance, CardPlatform, EmbedIframeUrlType, InternalCardActionOptions, OnResolveCallback } from '../Card/types';
|
|
2
|
+
import type { CardAppearance, CardPlatform, EmbedIframeUrlType, InternalCardActionOptions, OnClickCallback, OnResolveCallback } from '../Card/types';
|
|
4
3
|
import { type FrameStyle } from '../EmbedCard/types';
|
|
5
4
|
import { type FlexibleUiOptions } from '../FlexibleCard/types';
|
|
6
5
|
import { type HoverPreviewOptions } from '../HoverCard/types';
|
|
@@ -25,7 +24,7 @@ export type CardWithUrlContentProps = {
|
|
|
25
24
|
inlinePreloaderStyle?: InlinePreloaderStyle;
|
|
26
25
|
isHovered?: boolean;
|
|
27
26
|
isSelected?: boolean;
|
|
28
|
-
onClick?:
|
|
27
|
+
onClick?: OnClickCallback;
|
|
29
28
|
onError?: OnErrorCallback;
|
|
30
29
|
onResolve?: OnResolveCallback;
|
|
31
30
|
placeholder?: string;
|
|
@@ -32,3 +32,15 @@ export type OnErrorCallback = (data: {
|
|
|
32
32
|
status: Extract<CardType, ErrorCardType>;
|
|
33
33
|
url: string;
|
|
34
34
|
}) => void;
|
|
35
|
+
/**
|
|
36
|
+
* The method-in-object pattern (extracting `handler` via indexed access) is used intentionally
|
|
37
|
+
* to replicate TypeScript's bivariant method parameter checking — the same technique React uses
|
|
38
|
+
* internally for `React.EventHandler`. This allows consumers to pass callbacks with narrower
|
|
39
|
+
* event types (e.g. `React.MouseEvent<HTMLElement>`) without TypeScript errors, while still
|
|
40
|
+
* enabling callers inside Smart Links to pass the optional `data` second argument.
|
|
41
|
+
*
|
|
42
|
+
* See: https://www.typescriptlang.org/docs/handbook/2/functions.html#function-compatibility
|
|
43
|
+
*/
|
|
44
|
+
export type EventHandlerWithData<TEvent extends React.SyntheticEvent<any>, TData extends object> = {
|
|
45
|
+
bivarianceHack(event: TEvent, data?: TData): void;
|
|
46
|
+
}['bivarianceHack'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type { CardProps, CardAppearance, CardPlatform } from '../view/Card/types';
|
|
1
|
+
export type { CardProps, CardAppearance, CardPlatform, OnClickCallback } from '../view/Card/types';
|
|
@@ -6,7 +6,7 @@ import { type FrameStyle } from '../EmbedCard/types';
|
|
|
6
6
|
import type { EmbedModalSize } from '../EmbedModal/types';
|
|
7
7
|
import { type FlexibleUiOptions } from '../FlexibleCard/types';
|
|
8
8
|
import { type HoverPreviewOptions } from '../HoverCard/types';
|
|
9
|
-
import { type InlinePreloaderStyle, type OnErrorCallback } from '../types';
|
|
9
|
+
import { type EventHandlerWithData, type InlinePreloaderStyle, type OnErrorCallback } from '../types';
|
|
10
10
|
export type { CardAppearance, CardPlatform };
|
|
11
11
|
export type CardInnerAppearance = CardAppearance | 'embedPreview' | 'flexible' | 'hoverCardPreview' | 'url';
|
|
12
12
|
export type EmbedIframeUrlType = 'href' | 'interactiveHref';
|
|
@@ -77,6 +77,83 @@ interface HoverPreviewProps extends ActionProps {
|
|
|
77
77
|
*/
|
|
78
78
|
showHoverPreview?: boolean;
|
|
79
79
|
}
|
|
80
|
+
export type OnClickData = {
|
|
81
|
+
/**
|
|
82
|
+
* The destination URL that Smart Link resolved and will navigate to.
|
|
83
|
+
* This may differ from the original `url` prop if Smart Link applied
|
|
84
|
+
* cross-product analytics parameters or resolved a preferred URL from metadata.
|
|
85
|
+
*/
|
|
86
|
+
destinationUrl?: string;
|
|
87
|
+
/**
|
|
88
|
+
* The original `url` prop given to the component
|
|
89
|
+
* and the key to access link metadata in SmartCardProvider.
|
|
90
|
+
*/
|
|
91
|
+
url?: string;
|
|
92
|
+
};
|
|
93
|
+
/**
|
|
94
|
+
* Callback type for click events on Smart Links.
|
|
95
|
+
*
|
|
96
|
+
* Equivalent to:
|
|
97
|
+
* (event: React.MouseEvent | React.KeyboardEvent, data?: OnClickData) => void
|
|
98
|
+
*
|
|
99
|
+
* Uses `EventHandlerWithData` (a bivariant method type) so that consumers can pass
|
|
100
|
+
* callbacks with narrower event types (e.g. `React.MouseEvent<HTMLElement>`) without
|
|
101
|
+
* TypeScript errors — the same technique React uses internally for `React.EventHandler`.
|
|
102
|
+
*
|
|
103
|
+
* The optional `data` argument provides additional context:
|
|
104
|
+
* - `data.destinationUrl` — the URL Smart Link resolved and will navigate to.
|
|
105
|
+
* - `data.url` — the original `url` prop passed to the component.
|
|
106
|
+
*
|
|
107
|
+
* Use this type when typing your own click handler variable or function outside JSX:
|
|
108
|
+
* @example
|
|
109
|
+
* const handleClick: OnClickCallback = (event, data) => {
|
|
110
|
+
* event.preventDefault();
|
|
111
|
+
* navigate(data?.destinationUrl ?? fallbackUrl);
|
|
112
|
+
* };
|
|
113
|
+
*/
|
|
114
|
+
export type OnClickCallback = EventHandlerWithData<React.MouseEvent | React.KeyboardEvent, OnClickData>;
|
|
115
|
+
interface CardEventProps {
|
|
116
|
+
/**
|
|
117
|
+
* A React component responsible for returning a fallback UI when smart link fails to render because of uncaught errors.
|
|
118
|
+
*/
|
|
119
|
+
fallbackComponent?: React.ComponentType;
|
|
120
|
+
/**
|
|
121
|
+
* A callback function triggered when a Smart Link is clicked.
|
|
122
|
+
*
|
|
123
|
+
* When defined, the default browser navigation is prevented and your handler
|
|
124
|
+
* is responsible for navigation — except for Flexible Card, which always opens
|
|
125
|
+
* the link and then calls the callback.
|
|
126
|
+
*
|
|
127
|
+
* The optional second argument `data` provides additional context about the click:
|
|
128
|
+
* - `data.destinationUrl` — the resolved URL Smart Link will navigate to.
|
|
129
|
+
* This may differ from the original `url` prop if Smart Link resolved a
|
|
130
|
+
* preferred URL from metadata or appended analytics parameters.
|
|
131
|
+
* - `data.url` — the original `url` prop passed to the component.
|
|
132
|
+
*
|
|
133
|
+
* @example
|
|
134
|
+
* // Basic usage
|
|
135
|
+
* onClick={(e) => { e.preventDefault(); window.location.href = myUrl; }}
|
|
136
|
+
*
|
|
137
|
+
* // With destination URL
|
|
138
|
+
* onClick={(e, data) => { navigate(data?.destinationUrl ?? url); }}
|
|
139
|
+
*/
|
|
140
|
+
onClick?: OnClickCallback;
|
|
141
|
+
/**
|
|
142
|
+
* A callback function currently invoked in two cases:
|
|
143
|
+
* 1. When the `CardState.status` is one of `ErrorCardType`. "err" property in argument will be undefined in this case
|
|
144
|
+
* This does not mean that smart card failed to render.
|
|
145
|
+
* 2. When there is any unhandled error inside smart card while rendering, resulting in failure to render smart card successfully.
|
|
146
|
+
* "err" property in argument will be provided in this case.
|
|
147
|
+
* Presence of an err property indicates that the client should either render their own fallback
|
|
148
|
+
* or provide a fallbackComponent prop which will be rendered instead smart card component.
|
|
149
|
+
* If fallbackComponent is not provided, smart card will render null
|
|
150
|
+
*/
|
|
151
|
+
onError?: OnErrorCallback;
|
|
152
|
+
/**
|
|
153
|
+
* A callback function after the url is resolved into smart card.
|
|
154
|
+
*/
|
|
155
|
+
onResolve?: OnResolveCallback;
|
|
156
|
+
}
|
|
80
157
|
export interface BaseCardProps {
|
|
81
158
|
/**
|
|
82
159
|
* Define smart card default appearance.
|
|
@@ -100,10 +177,6 @@ export interface BaseCardProps {
|
|
|
100
177
|
* This prop allows smartlinks inside of editor to bypass that as they have other ways to open Preview panel.
|
|
101
178
|
*/
|
|
102
179
|
disablePreviewPanel?: boolean;
|
|
103
|
-
/**
|
|
104
|
-
* A React component responsible for returning a fallback UI when smart link fails to render because of uncaught errors.
|
|
105
|
-
*/
|
|
106
|
-
fallbackComponent?: React.ComponentType;
|
|
107
180
|
/**
|
|
108
181
|
* Unique id for smart link used in analytics.
|
|
109
182
|
*/
|
|
@@ -112,25 +185,6 @@ export interface BaseCardProps {
|
|
|
112
185
|
* Show selected state of smart link.
|
|
113
186
|
*/
|
|
114
187
|
isSelected?: boolean;
|
|
115
|
-
/**
|
|
116
|
-
* A callback function after a link is clicked.
|
|
117
|
-
*/
|
|
118
|
-
onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
|
|
119
|
-
/**
|
|
120
|
-
* A callback function currently invoked in two cases:
|
|
121
|
-
* 1. When the `CardState.status` is one of `ErrorCardType`. "err" property in argument will be undefined in this case
|
|
122
|
-
* This does not mean that smart card failed to render.
|
|
123
|
-
* 2. When there is any unhandled error inside smart card while rendering, resulting in failure to render smart card successfully.
|
|
124
|
-
* "err" property in argument will be provided in this case.
|
|
125
|
-
* Presence of an err property indicates that the client should either render their own fallback
|
|
126
|
-
* or provide a fallbackComponent prop which will be rendered instead smart card component.
|
|
127
|
-
* If fallbackComponent is not provided, smart card will render null
|
|
128
|
-
*/
|
|
129
|
-
onError?: OnErrorCallback;
|
|
130
|
-
/**
|
|
131
|
-
* A callback function after the url is resolved into smart card.
|
|
132
|
-
*/
|
|
133
|
-
onResolve?: OnResolveCallback;
|
|
134
188
|
/**
|
|
135
189
|
* String to be displayed while the Card component is (lazy)loading.
|
|
136
190
|
*/
|
|
@@ -211,5 +265,5 @@ export interface FlexibleProps extends ActionProps, HoverPreviewProps {
|
|
|
211
265
|
children?: React.ReactNode;
|
|
212
266
|
ui?: FlexibleUiOptions;
|
|
213
267
|
}
|
|
214
|
-
export interface CardProps extends BaseCardProps, InlineProps, BlockProps, EmbedProps, FlexibleProps, WithAnalyticsEventsProps {
|
|
268
|
+
export interface CardProps extends BaseCardProps, CardEventProps, InlineProps, BlockProps, EmbedProps, FlexibleProps, WithAnalyticsEventsProps {
|
|
215
269
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { type EventHandler, type KeyboardEvent, type MouseEvent } from 'react';
|
|
2
1
|
import type { SmartLinkResponse } from '@atlaskit/linking-types';
|
|
3
|
-
import type { CardAppearance, CardPlatform, EmbedIframeUrlType, InternalCardActionOptions, OnResolveCallback } from '../Card/types';
|
|
2
|
+
import type { CardAppearance, CardPlatform, EmbedIframeUrlType, InternalCardActionOptions, OnClickCallback, OnResolveCallback } from '../Card/types';
|
|
4
3
|
import { type FrameStyle } from '../EmbedCard/types';
|
|
5
4
|
import { type FlexibleUiOptions } from '../FlexibleCard/types';
|
|
6
5
|
import { type HoverPreviewOptions } from '../HoverCard/types';
|
|
@@ -25,7 +24,7 @@ export type CardWithUrlContentProps = {
|
|
|
25
24
|
inlinePreloaderStyle?: InlinePreloaderStyle;
|
|
26
25
|
isHovered?: boolean;
|
|
27
26
|
isSelected?: boolean;
|
|
28
|
-
onClick?:
|
|
27
|
+
onClick?: OnClickCallback;
|
|
29
28
|
onError?: OnErrorCallback;
|
|
30
29
|
onResolve?: OnResolveCallback;
|
|
31
30
|
placeholder?: string;
|
|
@@ -32,3 +32,15 @@ export type OnErrorCallback = (data: {
|
|
|
32
32
|
status: Extract<CardType, ErrorCardType>;
|
|
33
33
|
url: string;
|
|
34
34
|
}) => void;
|
|
35
|
+
/**
|
|
36
|
+
* The method-in-object pattern (extracting `handler` via indexed access) is used intentionally
|
|
37
|
+
* to replicate TypeScript's bivariant method parameter checking — the same technique React uses
|
|
38
|
+
* internally for `React.EventHandler`. This allows consumers to pass callbacks with narrower
|
|
39
|
+
* event types (e.g. `React.MouseEvent<HTMLElement>`) without TypeScript errors, while still
|
|
40
|
+
* enabling callers inside Smart Links to pass the optional `data` second argument.
|
|
41
|
+
*
|
|
42
|
+
* See: https://www.typescriptlang.org/docs/handbook/2/functions.html#function-compatibility
|
|
43
|
+
*/
|
|
44
|
+
export type EventHandlerWithData<TEvent extends React.SyntheticEvent<any>, TData extends object> = {
|
|
45
|
+
bivarianceHack(event: TEvent, data?: TData): void;
|
|
46
|
+
}['bivarianceHack'];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/smart-card",
|
|
3
|
-
"version": "44.
|
|
3
|
+
"version": "44.24.1",
|
|
4
4
|
"description": "Smart card component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@atlaskit/dropdown-menu": "^16.10.0",
|
|
51
51
|
"@atlaskit/embedded-confluence": "^5.1.0",
|
|
52
52
|
"@atlaskit/feature-gate-js-client": "^5.7.0",
|
|
53
|
-
"@atlaskit/flag": "^17.
|
|
53
|
+
"@atlaskit/flag": "^17.13.0",
|
|
54
54
|
"@atlaskit/form": "^15.5.0",
|
|
55
55
|
"@atlaskit/frontend-utilities": "^3.4.0",
|
|
56
56
|
"@atlaskit/heading": "^5.4.0",
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"@atlaskit/textfield": "^8.3.0",
|
|
88
88
|
"@atlaskit/theme": "^25.0.0",
|
|
89
89
|
"@atlaskit/tile": "^1.1.0",
|
|
90
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
90
|
+
"@atlaskit/tmp-editor-statsig": "^92.0.0",
|
|
91
91
|
"@atlaskit/tokens": "^13.3.0",
|
|
92
92
|
"@atlaskit/tooltip": "^22.6.0",
|
|
93
93
|
"@atlaskit/ufo": "^0.5.0",
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
"@atlaskit/css-reset": "^7.4.0",
|
|
120
120
|
"@atlaskit/media-test-helpers": "^41.2.0",
|
|
121
121
|
"@atlaskit/ssr": "workspace:^",
|
|
122
|
-
"@atlassian/a11y-jest-testing": "^0.
|
|
122
|
+
"@atlassian/a11y-jest-testing": "^0.12.0",
|
|
123
123
|
"@atlassian/analytics-tooling": "workspace:^",
|
|
124
124
|
"@atlassian/feature-flags-test-utils": "^1.1.0",
|
|
125
125
|
"@atlassian/gemini": "^1.46.0",
|