@atlaskit/smart-card 44.3.24 → 44.5.0
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 +28 -0
- package/analytics.spec.yaml +5 -0
- package/dist/cjs/__tests__/vr-tests/__snapshots__/block-card/vrblock-card-resolved-rovo-actions--default.png +3 -0
- package/dist/cjs/__tests__/vr-tests/__snapshots__/hover-card/hover-card-with-generic-3p-rovo-chat-action--default.png +2 -2
- package/dist/cjs/__tests__/vr-tests/__snapshots__/hover-card/hover-card-with-google-rovo-chat-action--default--rovogrowth-640-inline-action-nudge-exp-true.png +2 -2
- package/dist/cjs/common/analytics/generated/create-event-payload.js +7 -7
- package/dist/cjs/common/analytics/generated/use-analytics-events.js +1 -1
- package/dist/cjs/messages.js +59 -49
- package/dist/cjs/preloadLazyCardWithUrlContent.js +15 -0
- package/dist/cjs/utils/analytics/analytics.js +1 -1
- package/dist/cjs/view/BlockCard/views/ResolvedView.js +17 -11
- package/dist/cjs/view/FlexibleCard/components/actions/action/action-button/index.compiled.css +4 -0
- package/dist/cjs/view/FlexibleCard/components/actions/action/action-button/index.js +10 -1
- package/dist/cjs/view/FlexibleCard/components/actions/action/action-stack-item/action-button.compiled.css +0 -2
- package/dist/cjs/view/FlexibleCard/components/actions/action/action-stack-item/action-button.js +1 -1
- package/dist/cjs/view/FlexibleCard/components/actions/action/action-stack-item/index.js +10 -1
- package/dist/cjs/view/FlexibleCard/components/actions/ai-summary-action/ai-summarise-action.js +1 -1
- package/dist/cjs/view/FlexibleCard/components/actions/automation-action/index.js +1 -1
- package/dist/cjs/view/FlexibleCard/components/actions/copy-link-action/index.js +1 -1
- package/dist/cjs/view/FlexibleCard/components/actions/preview-action/index.js +2 -2
- package/dist/cjs/view/FlexibleCard/components/actions/rovo-chat-action/index.js +41 -26
- package/dist/cjs/view/FlexibleCard/components/blocks/action-block/ask-rovo-section-header.compiled.css +1 -1
- package/dist/cjs/view/FlexibleCard/components/blocks/action-block/ask-rovo-section-header.js +1 -1
- package/dist/cjs/view/FlexibleCard/components/blocks/action-block/index.compiled.css +4 -3
- package/dist/cjs/view/FlexibleCard/components/blocks/action-block/index.js +1 -1
- package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js +29 -11
- package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/resolved/index.compiled.css +3 -1
- package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/resolved/index.js +25 -7
- package/dist/cjs/view/FlexibleCard/components/blocks/hover-card-footer-block/index.compiled.css +1 -0
- package/dist/cjs/view/FlexibleCard/components/blocks/hover-card-footer-block/index.js +4 -1
- package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js +1 -1
- package/dist/cjs/view/FlexibleCard/components/elements/common/base-badge-element/index.js +6 -2
- package/dist/cjs/view/LinkUrl/index.js +1 -1
- package/dist/es2019/__tests__/vr-tests/__snapshots__/block-card/vrblock-card-resolved-rovo-actions--default.png +3 -0
- package/dist/es2019/__tests__/vr-tests/__snapshots__/hover-card/hover-card-with-generic-3p-rovo-chat-action--default.png +2 -2
- package/dist/es2019/__tests__/vr-tests/__snapshots__/hover-card/hover-card-with-google-rovo-chat-action--default--rovogrowth-640-inline-action-nudge-exp-true.png +2 -2
- package/dist/es2019/common/analytics/generated/create-event-payload.js +6 -6
- package/dist/es2019/common/analytics/generated/use-analytics-events.js +2 -2
- package/dist/es2019/messages.js +59 -49
- package/dist/es2019/preloadLazyCardWithUrlContent.js +2 -0
- package/dist/es2019/utils/analytics/analytics.js +1 -1
- package/dist/es2019/view/BlockCard/views/ResolvedView.js +29 -21
- package/dist/es2019/view/FlexibleCard/components/actions/action/action-button/index.compiled.css +4 -0
- package/dist/es2019/view/FlexibleCard/components/actions/action/action-button/index.js +12 -3
- package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/action-button.compiled.css +0 -2
- package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/action-button.js +1 -1
- package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/index.js +21 -10
- package/dist/es2019/view/FlexibleCard/components/actions/ai-summary-action/ai-summarise-action.js +1 -1
- package/dist/es2019/view/FlexibleCard/components/actions/automation-action/index.js +1 -1
- package/dist/es2019/view/FlexibleCard/components/actions/copy-link-action/index.js +1 -1
- package/dist/es2019/view/FlexibleCard/components/actions/preview-action/index.js +2 -2
- package/dist/es2019/view/FlexibleCard/components/actions/rovo-chat-action/index.js +41 -28
- package/dist/es2019/view/FlexibleCard/components/blocks/action-block/ask-rovo-section-header.compiled.css +1 -1
- package/dist/es2019/view/FlexibleCard/components/blocks/action-block/ask-rovo-section-header.js +1 -1
- package/dist/es2019/view/FlexibleCard/components/blocks/action-block/index.compiled.css +4 -3
- package/dist/es2019/view/FlexibleCard/components/blocks/action-block/index.js +1 -1
- package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js +29 -12
- package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/resolved/index.compiled.css +3 -1
- package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/resolved/index.js +22 -8
- package/dist/es2019/view/FlexibleCard/components/blocks/hover-card-footer-block/index.compiled.css +1 -0
- package/dist/es2019/view/FlexibleCard/components/blocks/hover-card-footer-block/index.js +4 -1
- package/dist/es2019/view/FlexibleCard/components/common/image-icon/index.js +1 -1
- package/dist/es2019/view/FlexibleCard/components/elements/common/base-badge-element/index.js +5 -2
- package/dist/es2019/view/LinkUrl/index.js +1 -1
- package/dist/esm/__tests__/vr-tests/__snapshots__/block-card/vrblock-card-resolved-rovo-actions--default.png +3 -0
- package/dist/esm/__tests__/vr-tests/__snapshots__/hover-card/hover-card-with-generic-3p-rovo-chat-action--default.png +2 -2
- package/dist/esm/__tests__/vr-tests/__snapshots__/hover-card/hover-card-with-google-rovo-chat-action--default--rovogrowth-640-inline-action-nudge-exp-true.png +2 -2
- package/dist/esm/common/analytics/generated/create-event-payload.js +7 -7
- package/dist/esm/common/analytics/generated/use-analytics-events.js +1 -1
- package/dist/esm/messages.js +59 -49
- package/dist/esm/preloadLazyCardWithUrlContent.js +4 -0
- package/dist/esm/utils/analytics/analytics.js +1 -1
- package/dist/esm/view/BlockCard/views/ResolvedView.js +18 -12
- package/dist/esm/view/FlexibleCard/components/actions/action/action-button/index.compiled.css +4 -0
- package/dist/esm/view/FlexibleCard/components/actions/action/action-button/index.js +12 -3
- package/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/action-button.compiled.css +0 -2
- package/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/action-button.js +1 -1
- package/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/index.js +10 -1
- package/dist/esm/view/FlexibleCard/components/actions/ai-summary-action/ai-summarise-action.js +1 -1
- package/dist/esm/view/FlexibleCard/components/actions/automation-action/index.js +1 -1
- package/dist/esm/view/FlexibleCard/components/actions/copy-link-action/index.js +1 -1
- package/dist/esm/view/FlexibleCard/components/actions/preview-action/index.js +2 -2
- package/dist/esm/view/FlexibleCard/components/actions/rovo-chat-action/index.js +42 -27
- package/dist/esm/view/FlexibleCard/components/blocks/action-block/ask-rovo-section-header.compiled.css +1 -1
- package/dist/esm/view/FlexibleCard/components/blocks/action-block/ask-rovo-section-header.js +1 -1
- package/dist/esm/view/FlexibleCard/components/blocks/action-block/index.compiled.css +4 -3
- package/dist/esm/view/FlexibleCard/components/blocks/action-block/index.js +1 -1
- package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js +30 -12
- package/dist/esm/view/FlexibleCard/components/blocks/footer-block/resolved/index.compiled.css +3 -1
- package/dist/esm/view/FlexibleCard/components/blocks/footer-block/resolved/index.js +26 -8
- package/dist/esm/view/FlexibleCard/components/blocks/hover-card-footer-block/index.compiled.css +1 -0
- package/dist/esm/view/FlexibleCard/components/blocks/hover-card-footer-block/index.js +4 -1
- package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js +1 -1
- package/dist/esm/view/FlexibleCard/components/elements/common/base-badge-element/index.js +6 -2
- package/dist/esm/view/LinkUrl/index.js +1 -1
- package/dist/types/common/analytics/generated/analytics.types.d.ts +116 -114
- package/dist/types/common/analytics/generated/create-event-payload.d.ts +1 -1
- package/dist/types/common/analytics/generated/use-analytics-events.d.ts +4 -1
- package/dist/types/messages.d.ts +1 -1
- package/dist/types/preloadLazyCardWithUrlContent.d.ts +1 -0
- package/dist/types/view/FlexibleCard/components/actions/action/types.d.ts +6 -1
- package/dist/types/view/FlexibleCard/components/blocks/action-group/index.d.ts +1 -1
- package/dist/types/view/FlexibleCard/components/blocks/action-group/types.d.ts +4 -0
- package/dist/types/view/FlexibleCard/components/blocks/footer-block/types.d.ts +4 -0
- package/dist/types/view/FlexibleCard/components/blocks/types.d.ts +7 -2
- package/dist/types/view/FlexibleCard/components/elements/common/base-badge-element/index.d.ts +5 -0
- package/dist/types-ts4.5/common/analytics/generated/analytics.types.d.ts +116 -114
- package/dist/types-ts4.5/common/analytics/generated/create-event-payload.d.ts +1 -1
- package/dist/types-ts4.5/common/analytics/generated/use-analytics-events.d.ts +4 -5
- package/dist/types-ts4.5/messages.d.ts +1 -1
- package/dist/types-ts4.5/preloadLazyCardWithUrlContent.d.ts +1 -0
- package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/types.d.ts +6 -1
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/action-group/index.d.ts +1 -1
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/action-group/types.d.ts +4 -0
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/footer-block/types.d.ts +4 -0
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/types.d.ts +7 -2
- package/dist/types-ts4.5/view/FlexibleCard/components/elements/common/base-badge-element/index.d.ts +5 -0
- package/package.json +5 -4
- package/preload-lazy-card-with-url-content/package.json +17 -0
|
@@ -8,12 +8,14 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
8
8
|
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; }
|
|
9
9
|
import React, { useCallback, useMemo } from 'react';
|
|
10
10
|
import { useIntl } from 'react-intl';
|
|
11
|
-
import AiGenerativeTextIcon from '@atlaskit/icon-lab/core/ai-generative-text';
|
|
12
11
|
import AiSearchIcon from '@atlaskit/icon-lab/core/ai-search';
|
|
12
|
+
import AiChatIcon from '@atlaskit/icon/core/ai-chat';
|
|
13
13
|
import AiGenerativeTextSummaryIcon from '@atlaskit/icon/core/ai-generative-text-summary';
|
|
14
14
|
import RovoChatIcon from '@atlaskit/icon/core/rovo-chat';
|
|
15
|
+
import { RovoIcon } from '@atlaskit/logo';
|
|
16
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
17
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
16
|
-
import { ActionName } from '../../../../../constants';
|
|
18
|
+
import { ActionName, CardDisplay } from '../../../../../constants';
|
|
17
19
|
import { messages } from '../../../../../messages';
|
|
18
20
|
import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
|
|
19
21
|
import useInvokeClientAction from '../../../../../state/hooks/use-invoke-client-action';
|
|
@@ -65,6 +67,8 @@ var getPromptAction = function getPromptAction(promptKey, intl) {
|
|
|
65
67
|
var _getContext;
|
|
66
68
|
var url = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
|
|
67
69
|
var product = arguments.length > 3 ? arguments[3] : undefined;
|
|
70
|
+
var iconSize = arguments.length > 4 ? arguments[4] : undefined;
|
|
71
|
+
var cardAppearance = arguments.length > 5 ? arguments[5] : undefined;
|
|
68
72
|
var _ref = (_getContext = getContext(intl, product)) !== null && _getContext !== void 0 ? _getContext : {
|
|
69
73
|
contextLong: intl.formatMessage(messages.rovo_prompt_context_generic),
|
|
70
74
|
contextShort: intl.formatMessage(messages.rovo_prompt_context_generic)
|
|
@@ -136,7 +140,10 @@ var getPromptAction = function getPromptAction(promptKey, intl) {
|
|
|
136
140
|
ignoreTag: true
|
|
137
141
|
});
|
|
138
142
|
return {
|
|
139
|
-
icon: /*#__PURE__*/React.createElement(
|
|
143
|
+
icon: cardAppearance === CardDisplay.Block && fg('platform_sl_3p_auth_rovo_block_card_kill_switch') ? /*#__PURE__*/React.createElement(AiChatIcon, {
|
|
144
|
+
label: label_summarize,
|
|
145
|
+
size: iconSize
|
|
146
|
+
}) : /*#__PURE__*/React.createElement(AIEditIcon, null),
|
|
140
147
|
content: label_summarize,
|
|
141
148
|
tooltipMessage: label_summarize,
|
|
142
149
|
data: {
|
|
@@ -170,9 +177,9 @@ var getPromptAction = function getPromptAction(promptKey, intl) {
|
|
|
170
177
|
}
|
|
171
178
|
}
|
|
172
179
|
};
|
|
173
|
-
case RovoChatPromptKey.
|
|
174
|
-
var
|
|
175
|
-
var
|
|
180
|
+
case RovoChatPromptKey.HIGHLIGHT_RELEVANT_CONTENT:
|
|
181
|
+
var label_highlight_relevant_content = intl.formatMessage(messages.rovo_prompt_button_highlight_relevant_content);
|
|
182
|
+
var html_highlight_relevant_content = intl.formatMessage(messages.rovo_prompt_message_highlight_relevant_content, {
|
|
176
183
|
context: contextLong,
|
|
177
184
|
url: url
|
|
178
185
|
}, {
|
|
@@ -180,12 +187,12 @@ var getPromptAction = function getPromptAction(promptKey, intl) {
|
|
|
180
187
|
});
|
|
181
188
|
return {
|
|
182
189
|
icon: /*#__PURE__*/React.createElement(AiChapterIcon, null),
|
|
183
|
-
content:
|
|
184
|
-
tooltipMessage:
|
|
190
|
+
content: label_highlight_relevant_content,
|
|
191
|
+
tooltipMessage: label_highlight_relevant_content,
|
|
185
192
|
data: {
|
|
186
|
-
name:
|
|
193
|
+
name: label_highlight_relevant_content,
|
|
187
194
|
dialogues: [],
|
|
188
|
-
prompt: htmlToAdf(
|
|
195
|
+
prompt: htmlToAdf(html_highlight_relevant_content),
|
|
189
196
|
mode: {
|
|
190
197
|
fastModeEnabled: true
|
|
191
198
|
}
|
|
@@ -197,7 +204,11 @@ var getPromptAction = function getPromptAction(promptKey, intl) {
|
|
|
197
204
|
url: url
|
|
198
205
|
});
|
|
199
206
|
return {
|
|
200
|
-
icon: /*#__PURE__*/React.createElement(
|
|
207
|
+
icon: cardAppearance === CardDisplay.Block && fg('platform_sl_3p_auth_rovo_block_card_kill_switch') ? /*#__PURE__*/React.createElement(RovoIcon, {
|
|
208
|
+
label: label_ask_rovo_anything,
|
|
209
|
+
size: 'xxsmall',
|
|
210
|
+
shouldUseHexLogo: true
|
|
211
|
+
}) : /*#__PURE__*/React.createElement(AISearchIcon, null),
|
|
201
212
|
content: label_ask_rovo_anything,
|
|
202
213
|
tooltipMessage: label_ask_rovo_anything,
|
|
203
214
|
data: {
|
|
@@ -227,24 +238,25 @@ var getPromptAction = function getPromptAction(promptKey, intl) {
|
|
|
227
238
|
placeholderType: 'generic'
|
|
228
239
|
}
|
|
229
240
|
};
|
|
230
|
-
case RovoChatPromptKey.
|
|
231
|
-
var
|
|
232
|
-
var
|
|
241
|
+
case RovoChatPromptKey.KEY_HIGHLIGHTS:
|
|
242
|
+
var label_key_highlights = intl.formatMessage(messages.rovo_prompt_button_key_highlights);
|
|
243
|
+
var html_key_highlights = intl.formatMessage(messages.rovo_prompt_message_key_highlights, {
|
|
233
244
|
context: contextLong,
|
|
234
245
|
url: url
|
|
235
246
|
}, {
|
|
236
247
|
ignoreTag: true
|
|
237
248
|
});
|
|
238
249
|
return {
|
|
239
|
-
icon: /*#__PURE__*/React.createElement(
|
|
240
|
-
label:
|
|
250
|
+
icon: /*#__PURE__*/React.createElement(AiChatIcon, {
|
|
251
|
+
label: label_key_highlights,
|
|
252
|
+
size: iconSize
|
|
241
253
|
}),
|
|
242
|
-
content:
|
|
243
|
-
tooltipMessage:
|
|
254
|
+
content: label_key_highlights,
|
|
255
|
+
tooltipMessage: label_key_highlights,
|
|
244
256
|
data: {
|
|
245
|
-
name:
|
|
257
|
+
name: label_key_highlights,
|
|
246
258
|
dialogues: [],
|
|
247
|
-
prompt: htmlToAdf(
|
|
259
|
+
prompt: htmlToAdf(html_key_highlights)
|
|
248
260
|
}
|
|
249
261
|
};
|
|
250
262
|
case RovoChatPromptKey.SHOW_ME_WHATS_RELEVANT:
|
|
@@ -275,8 +287,9 @@ var getPromptAction = function getPromptAction(promptKey, intl) {
|
|
|
275
287
|
ignoreTag: true
|
|
276
288
|
});
|
|
277
289
|
return {
|
|
278
|
-
icon: /*#__PURE__*/React.createElement(
|
|
279
|
-
label: label_identify_key_trends
|
|
290
|
+
icon: /*#__PURE__*/React.createElement(AiChatIcon, {
|
|
291
|
+
label: label_identify_key_trends,
|
|
292
|
+
size: iconSize
|
|
280
293
|
}),
|
|
281
294
|
content: label_identify_key_trends,
|
|
282
295
|
tooltipMessage: label_identify_key_trends,
|
|
@@ -294,8 +307,9 @@ var getPromptAction = function getPromptAction(promptKey, intl) {
|
|
|
294
307
|
ignoreTag: true
|
|
295
308
|
});
|
|
296
309
|
return {
|
|
297
|
-
icon: /*#__PURE__*/React.createElement(
|
|
298
|
-
label: label_identify_key_points
|
|
310
|
+
icon: /*#__PURE__*/React.createElement(AiChatIcon, {
|
|
311
|
+
label: label_identify_key_points,
|
|
312
|
+
size: iconSize
|
|
299
313
|
}),
|
|
300
314
|
content: label_identify_key_points,
|
|
301
315
|
tooltipMessage: label_identify_key_points,
|
|
@@ -313,8 +327,9 @@ var getPromptAction = function getPromptAction(promptKey, intl) {
|
|
|
313
327
|
ignoreTag: true
|
|
314
328
|
});
|
|
315
329
|
return {
|
|
316
|
-
icon: /*#__PURE__*/React.createElement(
|
|
317
|
-
label: label_find_open_questions
|
|
330
|
+
icon: /*#__PURE__*/React.createElement(AiChatIcon, {
|
|
331
|
+
label: label_find_open_questions,
|
|
332
|
+
size: iconSize
|
|
318
333
|
}),
|
|
319
334
|
content: label_find_open_questions,
|
|
320
335
|
tooltipMessage: label_find_open_questions,
|
|
@@ -376,7 +391,7 @@ var RovoChatAction = function RovoChatAction(_ref2) {
|
|
|
376
391
|
}, [data === null || data === void 0 ? void 0 : data.invokeAction, invoke, onClickCallback, sendPromptMessage]);
|
|
377
392
|
var promptActions = useMemo(function () {
|
|
378
393
|
return resolvedPrompts.map(function (promptKey, idx) {
|
|
379
|
-
var _ref3 = getPromptAction(promptKey, intl, data === null || data === void 0 ? void 0 : data.url, data === null || data === void 0 ? void 0 : data.product) || {},
|
|
394
|
+
var _ref3 = getPromptAction(promptKey, intl, data === null || data === void 0 ? void 0 : data.url, data === null || data === void 0 ? void 0 : data.product, props.iconSize, props.cardAppearance) || {},
|
|
380
395
|
icon = _ref3.icon,
|
|
381
396
|
content = _ref3.content,
|
|
382
397
|
tooltipMessage = _ref3.tooltipMessage,
|
|
@@ -11,5 +11,5 @@
|
|
|
11
11
|
._4t3it94y{height:1px}
|
|
12
12
|
._bfhk1l7x{background-color:var(--ds-border,#0b120e24)}
|
|
13
13
|
._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
|
|
14
|
-
.
|
|
14
|
+
._otyrutpp{margin-bottom:var(--ds-space-150,9pt)}
|
|
15
15
|
._syazazsu{color:var(--ds-text-subtle,#505258)}
|
package/dist/esm/view/FlexibleCard/components/blocks/action-block/ask-rovo-section-header.js
CHANGED
|
@@ -21,7 +21,7 @@ var AskRovoSectionHeader = function AskRovoSectionHeader(_ref) {
|
|
|
21
21
|
var intl = useIntl();
|
|
22
22
|
return /*#__PURE__*/React.createElement("div", {
|
|
23
23
|
"data-testid": testId,
|
|
24
|
-
className: ax(["_zulputpp _1e0c1txw _2lx21bp4
|
|
24
|
+
className: ax(["_zulputpp _1e0c1txw _2lx21bp4 _otyrutpp _18u0v77o _1bsb1osq _1wpz1fhb"])
|
|
25
25
|
}, /*#__PURE__*/React.createElement("div", {
|
|
26
26
|
role: "separator",
|
|
27
27
|
"aria-orientation": "horizontal",
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
|
|
2
|
-
.
|
|
2
|
+
._zulpu2gc{gap:var(--ds-space-100,8px)}._16jlkb7n{flex-grow:1}
|
|
3
3
|
._18u01ivi{margin-left:calc(var(--container-gap-left)*-1)}
|
|
4
4
|
._1bsb129b{width:calc(100% + var(--container-gap-left) + var(--container-gap-right))}
|
|
5
5
|
._1bsb1osq{width:100%}
|
|
6
|
+
._1e0c11p5{display:grid}
|
|
6
7
|
._1e0c1txw{display:flex}
|
|
7
8
|
._2hwxc10g{margin-right:calc(var(--container-gap-right)*-1)}
|
|
8
9
|
._2lx21bp4{flex-direction:column}
|
|
9
|
-
.
|
|
10
|
-
.
|
|
10
|
+
._vchhusvi{box-sizing:border-box}
|
|
11
|
+
._yv0e1ris{grid-template-columns:max-content}
|
|
@@ -127,7 +127,7 @@ var ActionBlock = function ActionBlock(_ref) {
|
|
|
127
127
|
}, showRovoSectionHeader && /*#__PURE__*/React.createElement(AskRovoSectionHeader, {
|
|
128
128
|
testId: testId ? "".concat(testId, "-rovo-section-header") : undefined
|
|
129
129
|
}), /*#__PURE__*/React.createElement("div", {
|
|
130
|
-
className: ax(["
|
|
130
|
+
className: ax(["_zulpu2gc _1e0c11p5 _yv0e1ris"])
|
|
131
131
|
}, actions), /*#__PURE__*/React.createElement(ActionFooter, {
|
|
132
132
|
message: message,
|
|
133
133
|
testId: testId
|
|
@@ -18,13 +18,16 @@ import DropdownMenu from '@atlaskit/dropdown-menu';
|
|
|
18
18
|
import MoreIcon from '@atlaskit/icon/core/show-more-horizontal';
|
|
19
19
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
20
20
|
import Tooltip from '@atlaskit/tooltip';
|
|
21
|
-
import { ActionName, SmartLinkSize } from '../../../../../constants';
|
|
21
|
+
import { ActionName, CardDisplay, SmartLinkSize } from '../../../../../constants';
|
|
22
22
|
import { messages } from '../../../../../messages';
|
|
23
23
|
import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
|
|
24
|
+
import { RovoChatPromptKey } from '../../actions/rovo-chat-action';
|
|
24
25
|
import { sizeToButtonSpacing } from '../../utils';
|
|
25
26
|
import { filterActionItems } from '../utils';
|
|
26
27
|
import ActionGroupItem from './action-group-item';
|
|
27
28
|
var styles = null;
|
|
29
|
+
var FULL_ACTIONS_SIZE = 450;
|
|
30
|
+
var REDUCED_ACTIONS_SIZE = 360;
|
|
28
31
|
var renderActionItems = function renderActionItems() {
|
|
29
32
|
var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
30
33
|
var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SmartLinkSize.Medium;
|
|
@@ -59,7 +62,9 @@ var ActionGroup = function ActionGroup(_ref) {
|
|
|
59
62
|
appearance = _ref.appearance,
|
|
60
63
|
_ref$visibleButtonsNu = _ref.visibleButtonsNum,
|
|
61
64
|
visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
|
|
62
|
-
onDropdownOpenChange = _ref.onDropdownOpenChange
|
|
65
|
+
onDropdownOpenChange = _ref.onDropdownOpenChange,
|
|
66
|
+
_ref$containerWidth = _ref.containerWidth,
|
|
67
|
+
containerWidth = _ref$containerWidth === void 0 ? Infinity : _ref$containerWidth;
|
|
63
68
|
var context = useFlexibleUiContext();
|
|
64
69
|
var ui = useFlexibleUiOptionContext();
|
|
65
70
|
var _useState = useState(false),
|
|
@@ -70,7 +75,7 @@ var ActionGroup = function ActionGroup(_ref) {
|
|
|
70
75
|
return filterActionItems(items, context);
|
|
71
76
|
}, [context, items]);
|
|
72
77
|
var isMoreThenTwoItems = renderableActionItems.length > visibleButtonsNum;
|
|
73
|
-
var isRovoActionsEnabled = !!(context !== null && context !== void 0 && (_context$actions = context.actions) !== null && _context$actions !== void 0 && _context$actions[ActionName.RovoChatAction]);
|
|
78
|
+
var isRovoActionsEnabled = !!(context !== null && context !== void 0 && (_context$actions = context.actions) !== null && _context$actions !== void 0 && _context$actions[ActionName.RovoChatAction]) && fg('platform_sl_3p_auth_rovo_block_card_kill_switch');
|
|
74
79
|
var onOpenChange = useCallback(function (attrs) {
|
|
75
80
|
setIsOpen(attrs.isOpen);
|
|
76
81
|
if (onDropdownOpenChange) {
|
|
@@ -85,21 +90,34 @@ var ActionGroup = function ActionGroup(_ref) {
|
|
|
85
90
|
}
|
|
86
91
|
}, [isOpen, onOpenChange]);
|
|
87
92
|
var actionButtons = useMemo(function () {
|
|
88
|
-
if (isRovoActionsEnabled
|
|
89
|
-
var rovoActions = [].concat(_toConsumableArray(renderableActionItems.slice(0, visibleButtonsNum - 1)), [{
|
|
90
|
-
name: ActionName.
|
|
91
|
-
|
|
93
|
+
if (isRovoActionsEnabled) {
|
|
94
|
+
var rovoActions = [].concat(_toConsumableArray(containerWidth >= REDUCED_ACTIONS_SIZE ? renderableActionItems.slice(0, visibleButtonsNum - 1) : []), [{
|
|
95
|
+
name: ActionName.RovoChatAction,
|
|
96
|
+
prompts: [RovoChatPromptKey.ASK_ROVO_ANYTHING],
|
|
97
|
+
iconSize: 'small',
|
|
98
|
+
cardAppearance: CardDisplay.Block,
|
|
99
|
+
hideContent: containerWidth < FULL_ACTIONS_SIZE && containerWidth >= REDUCED_ACTIONS_SIZE
|
|
92
100
|
}, {
|
|
93
101
|
name: ActionName.CopyLinkAction,
|
|
94
|
-
hideContent: true
|
|
102
|
+
hideContent: true,
|
|
103
|
+
iconSize: 'small'
|
|
104
|
+
}, {
|
|
105
|
+
name: ActionName.PreviewAction,
|
|
106
|
+
hideContent: true,
|
|
107
|
+
iconSize: 'small'
|
|
95
108
|
}]);
|
|
96
109
|
return renderActionItems(rovoActions, size, appearance, false, onActionItemClick);
|
|
97
110
|
}
|
|
98
111
|
var actionItems = isMoreThenTwoItems ? renderableActionItems.slice(0, visibleButtonsNum - 1) : renderableActionItems;
|
|
99
112
|
return renderActionItems(actionItems, size, appearance, false, onActionItemClick);
|
|
100
|
-
}, [appearance, isMoreThenTwoItems, onActionItemClick, renderableActionItems, size, visibleButtonsNum,
|
|
113
|
+
}, [appearance, isMoreThenTwoItems, isRovoActionsEnabled, onActionItemClick, renderableActionItems, size, visibleButtonsNum, containerWidth]);
|
|
101
114
|
var moreActionDropdown = useMemo(function () {
|
|
102
|
-
var actionItems
|
|
115
|
+
var actionItems;
|
|
116
|
+
if (isRovoActionsEnabled && containerWidth < REDUCED_ACTIONS_SIZE) {
|
|
117
|
+
actionItems = renderableActionItems;
|
|
118
|
+
} else {
|
|
119
|
+
actionItems = isMoreThenTwoItems ? renderableActionItems.slice(visibleButtonsNum - 1) : [];
|
|
120
|
+
}
|
|
103
121
|
if (actionItems.length > 0) {
|
|
104
122
|
var spacing = sizeToButtonSpacing[size];
|
|
105
123
|
var moreIcon = /*#__PURE__*/React.createElement(MoreIcon, {
|
|
@@ -119,7 +137,7 @@ var ActionGroup = function ActionGroup(_ref) {
|
|
|
119
137
|
testId: "action-group-more-button-tooltip",
|
|
120
138
|
tag: "span"
|
|
121
139
|
}, /*#__PURE__*/React.createElement(Button, _extends({}, props, {
|
|
122
|
-
spacing: spacing,
|
|
140
|
+
spacing: isRovoActionsEnabled && fg('platform_sl_3p_auth_rovo_block_card_kill_switch') ? size === SmartLinkSize.XLarge ? 'default' : 'compact' : spacing,
|
|
123
141
|
testId: "action-group-more-button",
|
|
124
142
|
iconBefore: moreIcon,
|
|
125
143
|
ref: triggerRef
|
|
@@ -132,7 +150,7 @@ var ActionGroup = function ActionGroup(_ref) {
|
|
|
132
150
|
}, renderActionItems(actionItems, size, appearance, true, onActionItemClick));
|
|
133
151
|
}
|
|
134
152
|
return null;
|
|
135
|
-
}, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum,
|
|
153
|
+
}, [appearance, isMoreThenTwoItems, isOpen, isRovoActionsEnabled, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum, containerWidth]);
|
|
136
154
|
return renderableActionItems.length > 0 ? /*#__PURE__*/React.createElement("div", {
|
|
137
155
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
138
156
|
className: ax(["_1e0c116y _dzc21h6o _1ilq1i6y", "actions-button-group"]),
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
4
|
import "./index.compiled.css";
|
|
4
5
|
import * as React from 'react';
|
|
5
6
|
import { ax, ix } from "@compiled/react/runtime";
|
|
6
|
-
import { useCallback, useMemo } from 'react';
|
|
7
|
+
import { useCallback, useMemo, useState } from 'react';
|
|
7
8
|
import { browser } from '@atlaskit/linking-common/user-agent';
|
|
8
9
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
|
+
import { WidthObserver } from '@atlaskit/width-detector';
|
|
9
11
|
import { ActionName, SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
|
|
10
12
|
import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
|
|
11
13
|
import { Provider } from '../../../elements';
|
|
@@ -15,6 +17,8 @@ import ElementGroup from '../../element-group';
|
|
|
15
17
|
import { filterActionItems } from '../../utils';
|
|
16
18
|
var actionGroupStyles = null;
|
|
17
19
|
var safariStyles = null;
|
|
20
|
+
var providerStyles = null;
|
|
21
|
+
var rovoActionStyles = null;
|
|
18
22
|
var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
|
|
19
23
|
var _context$actions;
|
|
20
24
|
var actions = props.actions,
|
|
@@ -22,9 +26,11 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
|
|
|
22
26
|
onActionMenuOpenChange = props.onActionMenuOpenChange,
|
|
23
27
|
_props$size = props.size,
|
|
24
28
|
size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
|
|
25
|
-
hideProvider = props.hideProvider
|
|
29
|
+
hideProvider = props.hideProvider,
|
|
30
|
+
isPreviewBlockErrored = props.isPreviewBlockErrored;
|
|
26
31
|
var context = useFlexibleUiContext();
|
|
27
|
-
var isRovoSupportedFeature = !!(context !== null && context !== void 0 && (_context$actions = context.actions) !== null && _context$actions !== void 0 && _context$actions[ActionName.RovoChatAction]);
|
|
32
|
+
var isRovoSupportedFeature = !!(context !== null && context !== void 0 && (_context$actions = context.actions) !== null && _context$actions !== void 0 && _context$actions[ActionName.RovoChatAction]) && fg('platform_sl_3p_auth_rovo_block_card_kill_switch');
|
|
33
|
+
var hasPreview = isRovoSupportedFeature && !!(context !== null && context !== void 0 && context.preview) && !isPreviewBlockErrored;
|
|
28
34
|
var hasActions = useMemo(function () {
|
|
29
35
|
var _filterActionItems;
|
|
30
36
|
return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
|
|
@@ -43,22 +49,34 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
|
|
|
43
49
|
});
|
|
44
50
|
}
|
|
45
51
|
}, [onActionMenuOpenChange]);
|
|
52
|
+
|
|
53
|
+
// WidthObserver fires whenever the footer's available width changes.
|
|
54
|
+
var _useState = useState(undefined),
|
|
55
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
56
|
+
containerWidth = _useState2[0],
|
|
57
|
+
setContainerWidth = _useState2[1];
|
|
46
58
|
return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
|
|
47
59
|
testId: "".concat(testId, "-resolved-view")
|
|
48
60
|
}), !hideProvider && /*#__PURE__*/React.createElement(Provider, {
|
|
49
61
|
appearance: "subtle",
|
|
50
|
-
testId: "".concat(testId, "-provider")
|
|
62
|
+
testId: "".concat(testId, "-provider"),
|
|
63
|
+
hideLabel: hasPreview,
|
|
64
|
+
className: ax([isRovoSupportedFeature && "_1wpz1h6o"])
|
|
51
65
|
}), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
|
|
52
66
|
testId: "smart-element-group-actions",
|
|
53
67
|
align: SmartLinkAlignment.Right,
|
|
54
68
|
direction: SmartLinkDirection.Horizontal,
|
|
55
69
|
width: SmartLinkWidth.Flexible,
|
|
56
|
-
className: ax([size === SmartLinkSize.XLarge && "_c71lxy5q", safari && "_4t3i1osq"])
|
|
57
|
-
}, /*#__PURE__*/React.createElement(
|
|
70
|
+
className: ax([size === SmartLinkSize.XLarge && "_c71lxy5q", safari && "_4t3i1osq", isRovoSupportedFeature && "_kqswh2mm"])
|
|
71
|
+
}, isRovoSupportedFeature && /*#__PURE__*/React.createElement(WidthObserver, {
|
|
72
|
+
setWidth: setContainerWidth,
|
|
73
|
+
offscreen: true
|
|
74
|
+
}), /*#__PURE__*/React.createElement(ActionGroup, {
|
|
58
75
|
onDropdownOpenChange: onDropdownOpenChange,
|
|
59
76
|
items: actions,
|
|
60
|
-
appearance: isRovoSupportedFeature
|
|
61
|
-
size: size
|
|
77
|
+
appearance: isRovoSupportedFeature ? 'subtle' : 'default',
|
|
78
|
+
size: isRovoSupportedFeature ? SmartLinkSize.Small : size,
|
|
79
|
+
containerWidth: isRovoSupportedFeature ? containerWidth : undefined
|
|
62
80
|
})) : null);
|
|
63
81
|
};
|
|
64
82
|
export default FooterBlockResolvedView;
|
package/dist/esm/view/FlexibleCard/components/blocks/hover-card-footer-block/index.compiled.css
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
._18u01ivi{margin-left:calc(var(--container-gap-left)*-1)}
|
|
11
11
|
._18u01wug{margin-left:auto}
|
|
12
12
|
._19p4ze3t *{padding-right:var(--ds-space-0,0)}
|
|
13
|
+
._19pkutpp{margin-top:var(--ds-space-150,9pt)}
|
|
13
14
|
._1bah1y6m{justify-content:flex-start}
|
|
14
15
|
._1bsb129b{width:calc(100% + var(--container-gap-left) + var(--container-gap-right))}
|
|
15
16
|
._1e0c1txw{display:flex}
|
|
@@ -6,6 +6,8 @@ import "./index.compiled.css";
|
|
|
6
6
|
import * as React from 'react';
|
|
7
7
|
import { ax, ix } from "@compiled/react/runtime";
|
|
8
8
|
import { useMemo } from 'react';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
9
11
|
import { ActionName } from '../../../../../constants';
|
|
10
12
|
import { useFlexibleCardContext } from '../../../../../state/flexible-ui-context';
|
|
11
13
|
import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
|
|
@@ -18,6 +20,7 @@ import Block from '../block';
|
|
|
18
20
|
*/
|
|
19
21
|
var HIDDEN_HOVER_CARD_FOOTER_ACTIONS = [ActionName.RovoChatAction];
|
|
20
22
|
var ignoreContainerMarginStyles = null;
|
|
23
|
+
var inlineActionNudgeFooterMarginStyles = null;
|
|
21
24
|
var elevatedFooterStyles = null;
|
|
22
25
|
var providerStyles = null;
|
|
23
26
|
var actionsStyles = null;
|
|
@@ -63,7 +66,7 @@ var ResolvedHoverCardFooterBlock = function ResolvedHoverCardFooterBlock(_ref) {
|
|
|
63
66
|
return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
|
|
64
67
|
size: size,
|
|
65
68
|
testId: "".concat(testId, "-resolved-view"),
|
|
66
|
-
className: ax(["_18zrpxbi _1rjcutpp _vchhusvi _1bsb129b _18u01ivi _2hwxc10g _otyr1ya9 _4t3ioahv", "_zulpu2gc _x3doj0fz _bfhkhfxm _mrkb1mok _1o0z1mok"])
|
|
69
|
+
className: ax(["_18zrpxbi _1rjcutpp _vchhusvi _1bsb129b _18u01ivi _2hwxc10g _otyr1ya9 _4t3ioahv", "_zulpu2gc _x3doj0fz _bfhkhfxm _mrkb1mok _1o0z1mok", fg('rovogrowth-640-inline-action-nudge-fg') && expValEqualsNoExposure('rovogrowth-640-inline-action-nudge-exp', 'isEnabled', true) && "_19pkutpp"])
|
|
67
70
|
}), !hideProvider && /*#__PURE__*/React.createElement("div", {
|
|
68
71
|
className: ax(["_4t3i1ejb _1e0c1txw _4cvr1h6o _1bah1y6m _vchhusvi _16jlkb7n"])
|
|
69
72
|
}, /*#__PURE__*/React.createElement(Provider, {
|
|
@@ -15,7 +15,7 @@ var messages = defineMessages({
|
|
|
15
15
|
imageAltText: {
|
|
16
16
|
id: 'smart-link.image-icon.altText',
|
|
17
17
|
defaultMessage: 'Link Icon',
|
|
18
|
-
description: '
|
|
18
|
+
description: 'Alternative text for the link icon image displayed on a flexible smart link card, used by screen readers and when the image cannot be rendered.'
|
|
19
19
|
}
|
|
20
20
|
});
|
|
21
21
|
var ImageIcon = function ImageIcon(_ref) {
|
|
@@ -6,6 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
6
6
|
/* eslint-disable @atlaskit/design-system/use-tokens-typography */
|
|
7
7
|
|
|
8
8
|
import React, { forwardRef } from 'react';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
10
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
10
11
|
import { IconType } from '../../../../../../constants';
|
|
11
12
|
import { messages } from '../../../../../../messages';
|
|
@@ -76,13 +77,16 @@ var BaseBadgeRefreshNew = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
76
77
|
_ref$testId = _ref.testId,
|
|
77
78
|
testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId,
|
|
78
79
|
url = _ref.url,
|
|
79
|
-
color = _ref.color
|
|
80
|
+
color = _ref.color,
|
|
81
|
+
_ref$hideLabel = _ref.hideLabel,
|
|
82
|
+
hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel;
|
|
80
83
|
var ui = useFlexibleUiOptionContext();
|
|
81
84
|
var formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
|
|
82
85
|
var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId, ui === null || ui === void 0 ? void 0 : ui.hideLoadingSkeleton);
|
|
83
86
|
if (!formattedMessageOrLabel || !badgeIcon) {
|
|
84
87
|
return null;
|
|
85
88
|
}
|
|
89
|
+
var shouldHideLabel = hideLabel && fg('platform_sl_3p_auth_rovo_block_card_kill_switch');
|
|
86
90
|
return /*#__PURE__*/React.createElement("span", {
|
|
87
91
|
"data-smart-element": name,
|
|
88
92
|
"data-smart-element-badge": true,
|
|
@@ -95,7 +99,7 @@ var BaseBadgeRefreshNew = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
95
99
|
}, !hideIcon && /*#__PURE__*/React.createElement(Box, {
|
|
96
100
|
as: "span",
|
|
97
101
|
xcss: styles.icon
|
|
98
|
-
}, badgeIcon), /*#__PURE__*/React.createElement(Box, {
|
|
102
|
+
}, badgeIcon), !shouldHideLabel && /*#__PURE__*/React.createElement(Box, {
|
|
99
103
|
as: "span",
|
|
100
104
|
testId: "".concat(testId, "-label"),
|
|
101
105
|
xcss: styles.text
|
|
@@ -15,7 +15,7 @@ import LinkWarningModal from './LinkWarningModal';
|
|
|
15
15
|
import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
|
|
16
16
|
var PACKAGE_DATA = {
|
|
17
17
|
packageName: "@atlaskit/smart-card",
|
|
18
|
-
packageVersion: "44.
|
|
18
|
+
packageVersion: "44.4.0",
|
|
19
19
|
componentName: 'linkUrl'
|
|
20
20
|
};
|
|
21
21
|
var Anchor = withLinkClickedEvent('a');
|