@atlaskit/smart-card 23.8.1 → 23.9.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.
Files changed (138) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/i18n/cs.js +2 -0
  3. package/dist/cjs/i18n/da.js +2 -1
  4. package/dist/cjs/i18n/de.js +2 -0
  5. package/dist/cjs/i18n/en.js +1 -1
  6. package/dist/cjs/i18n/en_GB.js +1 -1
  7. package/dist/cjs/i18n/es.js +3 -0
  8. package/dist/cjs/i18n/fi.js +2 -1
  9. package/dist/cjs/i18n/fr.js +2 -1
  10. package/dist/cjs/i18n/hu.js +2 -0
  11. package/dist/cjs/i18n/it.js +2 -1
  12. package/dist/cjs/i18n/ja.js +2 -1
  13. package/dist/cjs/i18n/ko.js +2 -1
  14. package/dist/cjs/i18n/nb.js +2 -0
  15. package/dist/cjs/i18n/nl.js +2 -1
  16. package/dist/cjs/i18n/pl.js +2 -0
  17. package/dist/cjs/i18n/pt_BR.js +2 -1
  18. package/dist/cjs/i18n/ru.js +2 -1
  19. package/dist/cjs/i18n/sv.js +2 -1
  20. package/dist/cjs/i18n/th.js +2 -1
  21. package/dist/cjs/i18n/tr.js +2 -0
  22. package/dist/cjs/i18n/uk.js +2 -0
  23. package/dist/cjs/i18n/vi.js +2 -1
  24. package/dist/cjs/i18n/zh.js +2 -0
  25. package/dist/cjs/i18n/zh_TW.js +2 -0
  26. package/dist/cjs/utils/flexible.js +8 -2
  27. package/dist/cjs/version.json +1 -1
  28. package/dist/cjs/view/CardWithUrl/component.js +1 -6
  29. package/dist/cjs/view/FlexibleCard/components/actions/action/action-button/index.js +1 -6
  30. package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js +2 -7
  31. package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/index.js +17 -2
  32. package/dist/cjs/view/FlexibleCard/components/container/index.js +34 -3
  33. package/dist/cjs/view/FlexibleCard/index.js +3 -1
  34. package/dist/cjs/view/HoverCard/components/HoverCardComponent.js +15 -3
  35. package/dist/cjs/view/InlineCard/index.js +7 -0
  36. package/dist/es2019/i18n/cs.js +2 -0
  37. package/dist/es2019/i18n/da.js +2 -1
  38. package/dist/es2019/i18n/de.js +2 -0
  39. package/dist/es2019/i18n/en.js +1 -1
  40. package/dist/es2019/i18n/en_GB.js +1 -1
  41. package/dist/es2019/i18n/es.js +3 -0
  42. package/dist/es2019/i18n/fi.js +2 -1
  43. package/dist/es2019/i18n/fr.js +2 -1
  44. package/dist/es2019/i18n/hu.js +2 -0
  45. package/dist/es2019/i18n/it.js +2 -1
  46. package/dist/es2019/i18n/ja.js +2 -1
  47. package/dist/es2019/i18n/ko.js +2 -1
  48. package/dist/es2019/i18n/nb.js +2 -0
  49. package/dist/es2019/i18n/nl.js +2 -1
  50. package/dist/es2019/i18n/pl.js +2 -0
  51. package/dist/es2019/i18n/pt_BR.js +2 -1
  52. package/dist/es2019/i18n/ru.js +2 -1
  53. package/dist/es2019/i18n/sv.js +2 -1
  54. package/dist/es2019/i18n/th.js +2 -1
  55. package/dist/es2019/i18n/tr.js +2 -0
  56. package/dist/es2019/i18n/uk.js +2 -0
  57. package/dist/es2019/i18n/vi.js +2 -1
  58. package/dist/es2019/i18n/zh.js +2 -0
  59. package/dist/es2019/i18n/zh_TW.js +2 -0
  60. package/dist/es2019/utils/flexible.js +3 -2
  61. package/dist/es2019/version.json +1 -1
  62. package/dist/es2019/view/CardWithUrl/component.js +1 -6
  63. package/dist/es2019/view/FlexibleCard/components/actions/action/action-button/index.js +1 -6
  64. package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js +2 -5
  65. package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/index.js +11 -2
  66. package/dist/es2019/view/FlexibleCard/components/container/index.js +25 -5
  67. package/dist/es2019/view/FlexibleCard/index.js +3 -1
  68. package/dist/es2019/view/HoverCard/components/HoverCardComponent.js +13 -3
  69. package/dist/es2019/view/InlineCard/index.js +6 -0
  70. package/dist/esm/i18n/cs.js +2 -0
  71. package/dist/esm/i18n/da.js +2 -1
  72. package/dist/esm/i18n/de.js +2 -0
  73. package/dist/esm/i18n/en.js +1 -1
  74. package/dist/esm/i18n/en_GB.js +1 -1
  75. package/dist/esm/i18n/es.js +3 -0
  76. package/dist/esm/i18n/fi.js +2 -1
  77. package/dist/esm/i18n/fr.js +2 -1
  78. package/dist/esm/i18n/hu.js +2 -0
  79. package/dist/esm/i18n/it.js +2 -1
  80. package/dist/esm/i18n/ja.js +2 -1
  81. package/dist/esm/i18n/ko.js +2 -1
  82. package/dist/esm/i18n/nb.js +2 -0
  83. package/dist/esm/i18n/nl.js +2 -1
  84. package/dist/esm/i18n/pl.js +2 -0
  85. package/dist/esm/i18n/pt_BR.js +2 -1
  86. package/dist/esm/i18n/ru.js +2 -1
  87. package/dist/esm/i18n/sv.js +2 -1
  88. package/dist/esm/i18n/th.js +2 -1
  89. package/dist/esm/i18n/tr.js +2 -0
  90. package/dist/esm/i18n/uk.js +2 -0
  91. package/dist/esm/i18n/vi.js +2 -1
  92. package/dist/esm/i18n/zh.js +2 -0
  93. package/dist/esm/i18n/zh_TW.js +2 -0
  94. package/dist/esm/utils/flexible.js +4 -1
  95. package/dist/esm/version.json +1 -1
  96. package/dist/esm/view/CardWithUrl/component.js +1 -6
  97. package/dist/esm/view/FlexibleCard/components/actions/action/action-button/index.js +1 -6
  98. package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js +2 -7
  99. package/dist/esm/view/FlexibleCard/components/blocks/footer-block/index.js +11 -2
  100. package/dist/esm/view/FlexibleCard/components/container/index.js +34 -5
  101. package/dist/esm/view/FlexibleCard/index.js +3 -1
  102. package/dist/esm/view/HoverCard/components/HoverCardComponent.js +15 -3
  103. package/dist/esm/view/InlineCard/index.js +6 -0
  104. package/dist/types/i18n/cs.d.ts +2 -0
  105. package/dist/types/i18n/da.d.ts +2 -1
  106. package/dist/types/i18n/de.d.ts +2 -0
  107. package/dist/types/i18n/en.d.ts +1 -1
  108. package/dist/types/i18n/en_GB.d.ts +1 -1
  109. package/dist/types/i18n/es.d.ts +3 -0
  110. package/dist/types/i18n/fi.d.ts +2 -1
  111. package/dist/types/i18n/fr.d.ts +2 -1
  112. package/dist/types/i18n/hu.d.ts +2 -0
  113. package/dist/types/i18n/it.d.ts +2 -1
  114. package/dist/types/i18n/ja.d.ts +2 -1
  115. package/dist/types/i18n/ko.d.ts +2 -1
  116. package/dist/types/i18n/nb.d.ts +2 -0
  117. package/dist/types/i18n/nl.d.ts +2 -1
  118. package/dist/types/i18n/pl.d.ts +2 -0
  119. package/dist/types/i18n/pt_BR.d.ts +2 -1
  120. package/dist/types/i18n/ru.d.ts +2 -1
  121. package/dist/types/i18n/sv.d.ts +2 -1
  122. package/dist/types/i18n/th.d.ts +2 -1
  123. package/dist/types/i18n/tr.d.ts +2 -0
  124. package/dist/types/i18n/uk.d.ts +2 -0
  125. package/dist/types/i18n/vi.d.ts +2 -1
  126. package/dist/types/i18n/zh.d.ts +2 -0
  127. package/dist/types/i18n/zh_TW.d.ts +2 -0
  128. package/dist/types/utils/flexible.d.ts +1 -0
  129. package/dist/types/view/Card/index.d.ts +1 -1
  130. package/dist/types/view/FlexibleCard/components/blocks/action-group/types.d.ts +1 -1
  131. package/dist/types/view/FlexibleCard/components/blocks/footer-block/types.d.ts +5 -0
  132. package/dist/types/view/FlexibleCard/components/container/types.d.ts +5 -0
  133. package/dist/types/view/FlexibleCard/types.d.ts +5 -0
  134. package/dist/types/view/HoverCard/index.d.ts +1 -1
  135. package/dist/types/view/HoverCard/types.d.ts +24 -0
  136. package/package.json +1 -1
  137. package/report.api.md +1 -0
  138. package/tmp/api-report-tmp.d.ts +1 -0
@@ -21,6 +21,7 @@ export default {
21
21
  'fabric.linking.connect_link_account_card_view_name': 'Kết nối tài khoản {context} của bạn',
22
22
  'fabric.linking.connect_to': 'Kết nối với {name}',
23
23
  'fabric.linking.connect_unauthorised_account_action': 'Kết nối với {context}',
24
+ 'fabric.linking.connect_unauthorised_account_description': 'Kết nối với Atlassian để xem thêm chi tiết về công việc và hoạt động cộng tác của bạn ở một nơi tập trung.',
24
25
  'fabric.linking.couldnt_load_link': 'Chúng tôi không thể tải đường liên kết này vì một lý do không xác định.',
25
26
  'fabric.linking.create_on_absolute': 'Đã tạo vào {context}',
26
27
  'fabric.linking.create_on_relative': 'Đã tạo {context}',
@@ -33,7 +34,7 @@ export default {
33
34
  'fabric.linking.invalid_permissions': 'Đường liên kết bị hạn chế',
34
35
  'fabric.linking.invalid_permissions_description': 'Bạn cần có quyền truy cập hoặc thử một tài khoản khác để xem bản xem trước này.',
35
36
  'fabric.linking.join_to_view': 'Tham gia {context} để xem vấn đề này',
36
- 'fabric.linking.learn_more_about_smart_links_security': 'Tìm hiểu thêm về các quyền và bảo mật liên kết thông minh',
37
+ 'fabric.linking.learn_more_about_smart_links': 'Tìm hiểu thêm về Smart Link.',
37
38
  'fabric.linking.loading': 'Đang tải...',
38
39
  'fabric.linking.modified_on_absolute': 'Đã cập nhật trên {context}',
39
40
  'fabric.linking.modified_on_relative': 'Đã cập nhật {context}',
@@ -21,6 +21,7 @@ export default {
21
21
  'fabric.linking.connect_link_account_card_view_name': '连接您的 {context} 帐户',
22
22
  'fabric.linking.connect_to': '连接到 {name}',
23
23
  'fabric.linking.connect_unauthorised_account_action': '连接到 {context}',
24
+ 'fabric.linking.connect_unauthorised_account_description': '连接到 Atlassian,以从一个位置查看工作和协作的更多详细信息。',
24
25
  'fabric.linking.couldnt_load_link': '由于未知原因,无法加载此链接。',
25
26
  'fabric.linking.create_on_absolute': '创建时间:{context}',
26
27
  'fabric.linking.create_on_relative': '创建时间:{context}',
@@ -33,6 +34,7 @@ export default {
33
34
  'fabric.linking.invalid_permissions': '受限链接',
34
35
  'fabric.linking.invalid_permissions_description': '您需要请求访问权限或尝试使用其他帐户来查看此预览。',
35
36
  'fabric.linking.join_to_view': '加入{context}以查看此事务',
37
+ 'fabric.linking.learn_more_about_smart_links': '了解有关 Smart Link 的更多信息。',
36
38
  'fabric.linking.loading': '正在加载...',
37
39
  'fabric.linking.modified_on_absolute': '更新时间:{context}',
38
40
  'fabric.linking.modified_on_relative': '更新时间:{context}',
@@ -21,6 +21,7 @@ export default {
21
21
  'fabric.linking.connect_link_account_card_view_name': '連結 {context} 帳戶',
22
22
  'fabric.linking.connect_to': '連結至 {name}',
23
23
  'fabric.linking.connect_unauthorised_account_action': '連結至 {context}',
24
+ 'fabric.linking.connect_unauthorised_account_description': '連結至 Atlassian 以從單一位置檢視更多工作和協作的詳細資料。',
24
25
  'fabric.linking.couldnt_load_link': '基於不明原因,我們無法載入此連結。',
25
26
  'fabric.linking.create_on_absolute': '於 {context} 建立',
26
27
  'fabric.linking.create_on_relative': '建立時間:{context}',
@@ -33,6 +34,7 @@ export default {
33
34
  'fabric.linking.invalid_permissions': '限制連結',
34
35
  'fabric.linking.invalid_permissions_description': '您需要請求存取或嘗試不同的帳戶,來檢視此預覽。',
35
36
  'fabric.linking.join_to_view': '加入 {context} 以查看此議題',
37
+ 'fabric.linking.learn_more_about_smart_links': '深入了解 Smart Links。',
36
38
  'fabric.linking.loading': '正在載入...',
37
39
  'fabric.linking.modified_on_absolute': '更新於 {context}',
38
40
  'fabric.linking.modified_on_relative': '更新時間:{context}',
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import * as Blocks from '../view/FlexibleCard/components/blocks';
3
- import { PreviewBlock, TitleBlock } from '../view/FlexibleCard/components/blocks';
3
+ import { PreviewBlock, TitleBlock, FooterBlock } from '../view/FlexibleCard/components/blocks';
4
4
  import * as Elements from '../view/FlexibleCard/components/elements';
5
5
  export var isFlexibleUiCard = function isFlexibleUiCard(children) {
6
6
  if (children && React.Children.toArray(children).some(function (child) {
@@ -26,4 +26,7 @@ export var isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
26
26
  };
27
27
  export var isFlexibleUiPreviewBlock = function isFlexibleUiPreviewBlock(node) {
28
28
  return /*#__PURE__*/React.isValidElement(node) && node.type === PreviewBlock;
29
+ };
30
+ export var isFlexibleUiFooterBlock = function isFlexibleUiFooterBlock(node) {
31
+ return /*#__PURE__*/React.isValidElement(node) && node.type === FooterBlock;
29
32
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "23.8.1",
3
+ "version": "23.9.0",
4
4
  "sideEffects": false
5
5
  }
@@ -51,12 +51,6 @@ export function CardWithUrlContent(_ref) {
51
51
  var isFlexibleUi = useMemo(function () {
52
52
  return isFlexibleUiCard(children);
53
53
  }, [children]);
54
- var showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
55
-
56
- if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
57
- showHoverPreview = Boolean(showHoverPreviewFlag);
58
- }
59
-
60
54
  var showAuthTooltipValue = useFeatureFlag('showAuthTooltip');
61
55
  var showAuthTooltip = !!showAuthTooltipValue && showAuthTooltipValue === 'experiment';
62
56
  var enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard')); // Setup UI handlers.
@@ -146,6 +140,7 @@ export function CardWithUrlContent(_ref) {
146
140
  onClick: handleClickWrapper,
147
141
  renderers: renderers,
148
142
  ui: ui,
143
+ showHoverPreview: showHoverPreview,
149
144
  url: url,
150
145
  testId: testId,
151
146
  onResolve: onResolve,
@@ -42,14 +42,9 @@ var ActionButton = function ActionButton(_ref) {
42
42
  handler();
43
43
  };
44
44
  }, []);
45
- var onContainerClick = useCallback(function (e) {
46
- // Stop button on click event from propagate into parent container.
47
- e.stopPropagation();
48
- }, []);
49
45
  return jsx("div", {
50
46
  css: [getButtonStyle(size, iconOnly), overrideCss],
51
- "data-testid": "".concat(testId, "-button-wrapper"),
52
- onClick: onContainerClick
47
+ "data-testid": "".concat(testId, "-button-wrapper")
53
48
  }, jsx(Tooltip, {
54
49
  content: tooltipMessage,
55
50
  hideTooltipOnClick: true,
@@ -43,12 +43,8 @@ var ActionGroup = function ActionGroup(_ref) {
43
43
  var _useState = useState(false),
44
44
  _useState2 = _slicedToArray(_useState, 2),
45
45
  isOpen = _useState2[0],
46
- setIsOpen = _useState2[1]; // Stop AK dropdown menu to propagate event on click.
46
+ setIsOpen = _useState2[1];
47
47
 
48
-
49
- var onClick = useCallback(function (e) {
50
- return e.stopPropagation();
51
- }, []);
52
48
  var onOpenChange = useCallback(function (attrs) {
53
49
  setIsOpen(attrs.isOpen);
54
50
 
@@ -81,8 +77,7 @@ var ActionGroup = function ActionGroup(_ref) {
81
77
  var buttonGroupElement = renderActionItems(buttonActions, size, appearance, false, onActionClick);
82
78
  return jsx("div", {
83
79
  css: styles,
84
- className: "actions-button-group",
85
- onClick: onClick
80
+ className: "actions-button-group"
86
81
  }, jsx(ButtonGroup, null, buttonGroupElement, dropdownItemActions.length > 0 && dropdownMenuElement && dropdownMenuElement.length > 0 ? jsx(DropdownMenu, {
87
82
  isOpen: isOpen,
88
83
  onOpenChange: onOpenChange,
@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
3
3
 
4
4
  var _templateObject;
5
5
 
6
- import React from 'react';
6
+ import React, { useCallback } from 'react';
7
7
  import { css } from '@emotion/react';
8
8
  import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
9
9
  import Block from '../block';
@@ -34,7 +34,15 @@ var FooterBlock = function FooterBlock(props) {
34
34
  _props$size = props.size,
35
35
  size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
36
36
  _props$testId = props.testId,
37
- testId = _props$testId === void 0 ? 'smart-footer-block' : _props$testId;
37
+ testId = _props$testId === void 0 ? 'smart-footer-block' : _props$testId,
38
+ onActionMenuOpenChange = props.onActionMenuOpenChange;
39
+ var onDropdownOpenChange = useCallback(function (isOpen) {
40
+ if (onActionMenuOpenChange) {
41
+ onActionMenuOpenChange({
42
+ isOpen: isOpen
43
+ });
44
+ }
45
+ }, [onActionMenuOpenChange]);
38
46
 
39
47
  if (status !== SmartLinkStatus.Resolved) {
40
48
  return null;
@@ -51,6 +59,7 @@ var FooterBlock = function FooterBlock(props) {
51
59
  overrideCss: getActionGroupStyles(size),
52
60
  width: SmartLinkWidth.Flexible
53
61
  }, /*#__PURE__*/React.createElement(ActionGroup, {
62
+ onDropdownOpenChange: onDropdownOpenChange,
54
63
  items: actions,
55
64
  appearance: "default"
56
65
  })) : null);
@@ -1,15 +1,17 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
1
2
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
3
 
3
4
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
4
5
 
5
6
  /** @jsx jsx */
6
- import React, { useContext } from 'react';
7
+ import React, { useContext, useState, useCallback } from 'react';
7
8
  import { css, jsx } from '@emotion/react';
8
9
  import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
9
- import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
10
+ import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock, isFlexibleUiFooterBlock } from '../../../../utils/flexible';
10
11
  import { tokens } from '../../../../utils/token';
11
12
  import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
12
13
  import LayeredLink from './layered-link';
14
+ import { HoverCard } from '../../../HoverCard';
13
15
  import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
14
16
  var elevationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: 1px solid transparent;\n border-radius: 1.5px;\n box-shadow: ", ";\n margin: 2px;\n"])), tokens.elevation);
15
17
 
@@ -86,7 +88,7 @@ export var getContainerStyles = function getContainerStyles(size, hideBackground
86
88
  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n gap: ", " 0;\n flex-direction: column;\n min-width: 0;\n overflow-x: hidden;\n position: relative;\n ", "\n ", "\n ", "\n ", "\n &:hover ~ .actions-button-group {\n opacity: 1;\n }\n a:focus,\n .has-action:focus {\n outline-offset: -2px;\n }\n "])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
87
89
  };
88
90
 
89
- var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
91
+ var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) {
90
92
  return React.Children.map(children, function (child) {
91
93
  if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
92
94
  var blockSize = child.props.size;
@@ -100,6 +102,12 @@ var renderChildren = function renderChildren(children, containerSize, containerT
100
102
  status: status,
101
103
  theme: containerTheme
102
104
  });
105
+ } else if (onActionMenuOpenChange && isFlexibleUiFooterBlock(child)) {
106
+ return /*#__PURE__*/React.cloneElement(child, {
107
+ size: size,
108
+ status: status,
109
+ onActionMenuOpenChange: onActionMenuOpenChange
110
+ });
103
111
  }
104
112
 
105
113
  return /*#__PURE__*/React.cloneElement(child, {
@@ -158,6 +166,8 @@ var Container = function Container(_ref3) {
158
166
  hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
159
167
  _ref3$hidePadding = _ref3.hidePadding,
160
168
  hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
169
+ _ref3$showHoverPrevie = _ref3.showHoverPreview,
170
+ showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
161
171
  onClick = _ref3.onClick,
162
172
  retry = _ref3.retry,
163
173
  _ref3$size = _ref3.size,
@@ -169,11 +179,30 @@ var Container = function Container(_ref3) {
169
179
  theme = _ref3$theme === void 0 ? SmartLinkTheme.Link : _ref3$theme;
170
180
  var context = useContext(FlexibleUiContext);
171
181
  var childrenOptions = getChildrenOptions(children, context);
172
- return jsx("div", {
182
+
183
+ var _useState = useState(true),
184
+ _useState2 = _slicedToArray(_useState, 2),
185
+ hoverCardCanOpen = _useState2[0],
186
+ setHoverCardCanOpen = _useState2[1];
187
+
188
+ var onActionMenuOpenChange = useCallback(function (options) {
189
+ return setHoverCardCanOpen(!options.isOpen);
190
+ }, []);
191
+ var containerContent = jsx("div", {
173
192
  css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
174
193
  "data-smart-link-container": true,
175
194
  "data-testid": testId
176
- }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
195
+ }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, showHoverPreview ? onActionMenuOpenChange : undefined));
196
+
197
+ if (showHoverPreview && context !== null && context !== void 0 && context.url) {
198
+ return jsx(HoverCard, {
199
+ url: context === null || context === void 0 ? void 0 : context.url,
200
+ canOpen: hoverCardCanOpen,
201
+ closeOnChildClick: true
202
+ }, containerContent);
203
+ }
204
+
205
+ return containerContent;
177
206
  };
178
207
 
179
208
  export default Container;
@@ -22,7 +22,8 @@ var FlexibleCard = function FlexibleCard(_ref) {
22
22
  url = _ref.url,
23
23
  onClick = _ref.onClick,
24
24
  testId = _ref.testId,
25
- analytics = _ref.analytics;
25
+ analytics = _ref.analytics,
26
+ showHoverPreview = _ref.showHoverPreview;
26
27
  var cardType = cardState.status,
27
28
  details = cardState.details;
28
29
  var status = cardType;
@@ -66,6 +67,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
66
67
  }, /*#__PURE__*/React.createElement(Container, _extends({
67
68
  testId: testId
68
69
  }, ui, {
70
+ showHoverPreview: showHoverPreview,
69
71
  onClick: onClick,
70
72
  retry: retry,
71
73
  status: status
@@ -15,7 +15,11 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
15
15
  var children = _ref.children,
16
16
  url = _ref.url,
17
17
  analyticsHandler = _ref.analyticsHandler,
18
- analytics = _ref.analytics;
18
+ analytics = _ref.analytics,
19
+ _ref$canOpen = _ref.canOpen,
20
+ canOpen = _ref$canOpen === void 0 ? true : _ref$canOpen,
21
+ _ref$closeOnChildClic = _ref.closeOnChildClick,
22
+ closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic;
19
23
  var delay = 300;
20
24
 
21
25
  var _React$useState = React.useState(false),
@@ -109,9 +113,16 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
109
113
  }
110
114
  }, [hideCard]); // Stop hover preview content to propagate event to parent.
111
115
 
116
+ var onChildClick = useCallback(function (e) {
117
+ e.stopPropagation();
118
+
119
+ if (closeOnChildClick) {
120
+ hideCard();
121
+ }
122
+ }, [closeOnChildClick, hideCard]);
112
123
  return jsx(Popup, {
113
124
  testId: "hover-card",
114
- isOpen: isOpen,
125
+ isOpen: isOpen && canOpen,
115
126
  onClose: hideCard,
116
127
  placement: "bottom-start",
117
128
  offset: popupOffset.current,
@@ -136,7 +147,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
136
147
  }, jsx("span", _extends({}, triggerProps, {
137
148
  onMouseEnter: initShowCard,
138
149
  onMouseLeave: initHideCard,
139
- onMouseMove: setMousePosition
150
+ onMouseMove: setMousePosition,
151
+ onClick: onChildClick
140
152
  }), children));
141
153
  },
142
154
  zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
@@ -10,6 +10,7 @@ import { InlineCardResolvedView } from './ResolvedView';
10
10
  import { InlineCardResolvingView } from './ResolvingView';
11
11
  import { InlineCardUnauthorizedView } from './UnauthorisedView';
12
12
  import { extractProvider } from '@atlaskit/linking-common/extractors';
13
+ import { useFeatureFlag } from '@atlaskit/link-provider';
13
14
  export { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, InlineCardForbiddenView, InlineCardUnauthorizedView };
14
15
  export var InlineCard = function InlineCard(_ref) {
15
16
  var _details$meta;
@@ -31,6 +32,11 @@ export var InlineCard = function InlineCard(_ref) {
31
32
  details = cardState.details;
32
33
  var cardDetails = details && details.data || getEmptyJsonLd();
33
34
  var testIdWithStatus = testId ? "".concat(testId, "-").concat(status, "-view") : undefined;
35
+ var showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
36
+
37
+ if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
38
+ showHoverPreview = Boolean(showHoverPreviewFlag);
39
+ }
34
40
 
35
41
  switch (status) {
36
42
  case 'pending':
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,6 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
29
31
  'fabric.linking.loading': string;
30
32
  'fabric.linking.modified_on_absolute': string;
31
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,7 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
29
- 'fabric.linking.learn_more_about_smart_links_security': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
30
31
  'fabric.linking.loading': string;
31
32
  'fabric.linking.modified_on_absolute': string;
32
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,6 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
29
31
  'fabric.linking.loading': string;
30
32
  'fabric.linking.modified_on_absolute': string;
31
33
  'fabric.linking.modified_on_relative': string;
@@ -27,7 +27,7 @@ declare const _default: {
27
27
  'fabric.linking.invalid_permissions': string;
28
28
  'fabric.linking.invalid_permissions_description': string;
29
29
  'fabric.linking.join_to_view': string;
30
- 'fabric.linking.learn_more_about_smart_links_security': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
31
31
  'fabric.linking.loading': string;
32
32
  'fabric.linking.modified_on_absolute': string;
33
33
  'fabric.linking.modified_on_relative': string;
@@ -27,7 +27,7 @@ declare const _default: {
27
27
  'fabric.linking.invalid_permissions': string;
28
28
  'fabric.linking.invalid_permissions_description': string;
29
29
  'fabric.linking.join_to_view': string;
30
- 'fabric.linking.learn_more_about_smart_links_security': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
31
31
  'fabric.linking.loading': string;
32
32
  'fabric.linking.modified_on_absolute': string;
33
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,12 +27,14 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
29
31
  'fabric.linking.loading': string;
30
32
  'fabric.linking.modified_on_absolute': string;
31
33
  'fabric.linking.modified_on_relative': string;
32
34
  'fabric.linking.more_actions': string;
33
35
  'fabric.linking.not_found_description': string;
34
36
  'fabric.linking.not_found_title': string;
37
+ 'fabric.linking.open_link_in_a_new_tab': string;
35
38
  'fabric.linking.pending_request': string;
36
39
  'fabric.linking.preview': string;
37
40
  'fabric.linking.preview_close': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,7 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
29
- 'fabric.linking.learn_more_about_smart_links_security': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
30
31
  'fabric.linking.loading': string;
31
32
  'fabric.linking.modified_on_absolute': string;
32
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,7 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
29
- 'fabric.linking.learn_more_about_smart_links_security': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
30
31
  'fabric.linking.loading': string;
31
32
  'fabric.linking.modified_on_absolute': string;
32
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,6 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
29
31
  'fabric.linking.loading': string;
30
32
  'fabric.linking.modified_on_absolute': string;
31
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,7 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
29
- 'fabric.linking.learn_more_about_smart_links_security': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
30
31
  'fabric.linking.loading': string;
31
32
  'fabric.linking.modified_on_absolute': string;
32
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,7 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
29
- 'fabric.linking.learn_more_about_smart_links_security': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
30
31
  'fabric.linking.loading': string;
31
32
  'fabric.linking.modified_on_absolute': string;
32
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,7 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
29
- 'fabric.linking.learn_more_about_smart_links_security': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
30
31
  'fabric.linking.loading': string;
31
32
  'fabric.linking.modified_on_absolute': string;
32
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,6 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
29
31
  'fabric.linking.loading': string;
30
32
  'fabric.linking.modified_on_absolute': string;
31
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,7 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
29
- 'fabric.linking.learn_more_about_smart_links_security': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
30
31
  'fabric.linking.loading': string;
31
32
  'fabric.linking.modified_on_absolute': string;
32
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,6 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
29
31
  'fabric.linking.loading': string;
30
32
  'fabric.linking.modified_on_absolute': string;
31
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,7 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
29
- 'fabric.linking.learn_more_about_smart_links_security': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
30
31
  'fabric.linking.loading': string;
31
32
  'fabric.linking.modified_on_absolute': string;
32
33
  'fabric.linking.modified_on_relative': string;
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  'fabric.linking.connect_link_account_card_view_name': string;
15
15
  'fabric.linking.connect_to': string;
16
16
  'fabric.linking.connect_unauthorised_account_action': string;
17
+ 'fabric.linking.connect_unauthorised_account_description': string;
17
18
  'fabric.linking.couldnt_load_link': string;
18
19
  'fabric.linking.create_on_absolute': string;
19
20
  'fabric.linking.create_on_relative': string;
@@ -26,7 +27,7 @@ declare const _default: {
26
27
  'fabric.linking.invalid_permissions': string;
27
28
  'fabric.linking.invalid_permissions_description': string;
28
29
  'fabric.linking.join_to_view': string;
29
- 'fabric.linking.learn_more_about_smart_links_security': string;
30
+ 'fabric.linking.learn_more_about_smart_links': string;
30
31
  'fabric.linking.loading': string;
31
32
  'fabric.linking.modified_on_absolute': string;
32
33
  'fabric.linking.modified_on_relative': string;