@atlaskit/smart-card 20.0.4 → 20.1.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 (76) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/dist/cjs/state/actions/constants.js +4 -2
  3. package/dist/cjs/state/actions/index.js +51 -19
  4. package/dist/cjs/state/analytics/useSmartLinkAnalytics.js +26 -6
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/cjs/view/BlockCard/index.js +29 -0
  7. package/dist/cjs/view/CardWithUrl/component.js +7 -2
  8. package/dist/cjs/view/CardWithUrl/loader.js +7 -9
  9. package/dist/cjs/view/EmbedCard/index.js +29 -0
  10. package/dist/cjs/view/FlexibleCard/components/blocks/element-group/index.js +2 -2
  11. package/dist/cjs/view/FlexibleCard/index.js +34 -7
  12. package/dist/cjs/view/HoverCard/components/HoverCardComponent.js +143 -0
  13. package/dist/cjs/view/HoverCard/components/{hover-card-content.js → HoverCardContent.js} +29 -25
  14. package/dist/cjs/view/HoverCard/index.js +25 -126
  15. package/dist/cjs/view/HoverCard/styled.js +11 -1
  16. package/dist/cjs/view/HoverCard/utils.js +3 -3
  17. package/dist/cjs/view/InlineCard/index.js +29 -0
  18. package/dist/es2019/state/actions/constants.js +2 -1
  19. package/dist/es2019/state/actions/index.js +46 -18
  20. package/dist/es2019/state/analytics/useSmartLinkAnalytics.js +24 -7
  21. package/dist/es2019/version.json +1 -1
  22. package/dist/es2019/view/BlockCard/index.js +29 -0
  23. package/dist/es2019/view/CardWithUrl/component.js +7 -2
  24. package/dist/es2019/view/CardWithUrl/loader.js +8 -10
  25. package/dist/es2019/view/EmbedCard/index.js +29 -0
  26. package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.js +4 -0
  27. package/dist/es2019/view/FlexibleCard/index.js +32 -7
  28. package/dist/es2019/view/HoverCard/components/HoverCardComponent.js +102 -0
  29. package/dist/es2019/view/HoverCard/components/{hover-card-content.js → HoverCardContent.js} +18 -21
  30. package/dist/es2019/view/HoverCard/index.js +26 -97
  31. package/dist/es2019/view/HoverCard/styled.js +8 -0
  32. package/dist/es2019/view/HoverCard/utils.js +1 -1
  33. package/dist/es2019/view/InlineCard/index.js +29 -0
  34. package/dist/esm/state/actions/constants.js +2 -1
  35. package/dist/esm/state/actions/index.js +51 -20
  36. package/dist/esm/state/analytics/useSmartLinkAnalytics.js +27 -7
  37. package/dist/esm/version.json +1 -1
  38. package/dist/esm/view/BlockCard/index.js +29 -0
  39. package/dist/esm/view/CardWithUrl/component.js +7 -2
  40. package/dist/esm/view/CardWithUrl/loader.js +8 -10
  41. package/dist/esm/view/EmbedCard/index.js +29 -0
  42. package/dist/esm/view/FlexibleCard/components/blocks/element-group/index.js +2 -2
  43. package/dist/esm/view/FlexibleCard/index.js +33 -7
  44. package/dist/esm/view/HoverCard/components/HoverCardComponent.js +114 -0
  45. package/dist/esm/view/HoverCard/components/{hover-card-content.js → HoverCardContent.js} +20 -22
  46. package/dist/esm/view/HoverCard/index.js +24 -109
  47. package/dist/esm/view/HoverCard/styled.js +8 -0
  48. package/dist/esm/view/HoverCard/utils.js +1 -1
  49. package/dist/esm/view/InlineCard/index.js +29 -0
  50. package/dist/types/state/actions/constants.d.ts +1 -0
  51. package/dist/types/state/actions/index.d.ts +1 -0
  52. package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts +9 -0
  53. package/dist/types/state/hooks/useSmartLink.d.ts +3 -0
  54. package/dist/types/view/BlockCard/types.d.ts +2 -0
  55. package/dist/types/view/Card/index.d.ts +1 -1
  56. package/dist/types/view/Card/types.d.ts +2 -1
  57. package/dist/types/view/CardWithUrl/component.d.ts +1 -1
  58. package/dist/types/view/CardWithUrl/types.d.ts +2 -1
  59. package/dist/types/view/EmbedCard/components/styled.d.ts +16 -16
  60. package/dist/types/view/EmbedCard/types.d.ts +2 -0
  61. package/dist/types/view/FlexibleCard/types.d.ts +9 -4
  62. package/dist/types/view/HoverCard/components/HoverCardComponent.d.ts +4 -0
  63. package/dist/types/view/HoverCard/components/HoverCardContent.d.ts +9 -0
  64. package/dist/types/view/HoverCard/index.d.ts +2 -4
  65. package/dist/types/view/HoverCard/styled.d.ts +2 -0
  66. package/dist/types/view/HoverCard/types.d.ts +8 -0
  67. package/dist/types/view/HoverCard/utils.d.ts +1 -1
  68. package/dist/types/view/InlineCard/Frame/styled.d.ts +1 -1
  69. package/dist/types/view/InlineCard/Icon.d.ts +3 -3
  70. package/dist/types/view/InlineCard/IconAndTitleLayout/styled.d.ts +9 -9
  71. package/dist/types/view/InlineCard/ResolvingView/styled.d.ts +13 -5
  72. package/dist/types/view/InlineCard/styled.d.ts +8 -4
  73. package/dist/types/view/InlineCard/types.d.ts +2 -1
  74. package/dist/types/view/types.d.ts +6 -0
  75. package/package.json +4 -4
  76. package/dist/types/view/HoverCard/components/hover-card-content.d.ts +0 -4
@@ -0,0 +1,143 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.hoverCardClassName = exports.HoverCardComponent = void 0;
11
+
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
16
+ var _popup = _interopRequireDefault(require("@atlaskit/popup"));
17
+
18
+ var _core = require("@emotion/core");
19
+
20
+ var _react = _interopRequireWildcard(require("react"));
21
+
22
+ var _useSmartLinkActions = require("../../../state/hooks-external/useSmartLinkActions");
23
+
24
+ var _renderers = require("../../../state/renderers");
25
+
26
+ var _store = require("../../../state/store");
27
+
28
+ var _HoverCardContent = _interopRequireDefault(require("../components/HoverCardContent"));
29
+
30
+ var _styled = require("../styled");
31
+
32
+ var _utils = require("../utils");
33
+
34
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
35
+
36
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
37
+
38
+ /** @jsx jsx */
39
+ var hoverCardClassName = 'smart-links-hover-preview';
40
+ exports.hoverCardClassName = hoverCardClassName;
41
+
42
+ var HoverCardComponent = function HoverCardComponent(_ref) {
43
+ var children = _ref.children,
44
+ url = _ref.url,
45
+ analyticsHandler = _ref.analyticsHandler,
46
+ analytics = _ref.analytics;
47
+ var delay = 300;
48
+
49
+ var _React$useState = _react.default.useState(false),
50
+ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
51
+ isOpen = _React$useState2[0],
52
+ setIsOpen = _React$useState2[1];
53
+
54
+ var fadeOutTimeoutId = (0, _react.useRef)();
55
+ var fadeInTimeoutId = (0, _react.useRef)();
56
+ var cardOpenTime = (0, _react.useRef)();
57
+ var renderers = (0, _renderers.useSmartLinkRenderers)();
58
+ var linkState = (0, _store.useSmartCardState)(url);
59
+ var hoverDisplay = 'card';
60
+ var invokeMethod = 'mouse_hover';
61
+ var hideCard = (0, _react.useCallback)(function () {
62
+ //Check its previously open to avoid firing events when moving between the child and hover card components
63
+ if (isOpen === true && cardOpenTime.current) {
64
+ var hoverTime = Date.now() - cardOpenTime.current;
65
+ analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
66
+ }
67
+
68
+ setIsOpen(false);
69
+ }, [analytics.ui, isOpen]);
70
+ var initHideCard = (0, _react.useCallback)(function () {
71
+ if (fadeInTimeoutId.current) {
72
+ clearTimeout(fadeInTimeoutId.current);
73
+ }
74
+
75
+ fadeOutTimeoutId.current = setTimeout(function () {
76
+ return hideCard();
77
+ }, delay);
78
+ }, [hideCard]);
79
+ var initShowCard = (0, _react.useCallback)(function () {
80
+ if (fadeOutTimeoutId.current) {
81
+ clearTimeout(fadeOutTimeoutId.current);
82
+ }
83
+
84
+ fadeInTimeoutId.current = setTimeout(function () {
85
+ //Check if its previously closed to avoid firing events when moving between the child and hover card components
86
+ if (isOpen === false) {
87
+ cardOpenTime.current = Date.now();
88
+ analytics.ui.hoverCardViewedEvent(hoverDisplay, invokeMethod);
89
+ }
90
+
91
+ setIsOpen(true);
92
+ }, delay);
93
+ }, [delay, isOpen, analytics.ui]);
94
+ var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
95
+ url: url,
96
+ appearance: _utils.SMART_CARD_ANALYTICS_DISPLAY,
97
+ analyticsHandler: analyticsHandler
98
+ });
99
+ var onActionClick = (0, _react.useCallback)(function (actionId) {
100
+ if (actionId === 'preview-content') {
101
+ hideCard();
102
+ }
103
+ }, [hideCard]); // Stop hover preview content to propagate event to parent.
104
+
105
+ var onClick = (0, _react.useCallback)(function (e) {
106
+ return e.stopPropagation();
107
+ }, []);
108
+ return (0, _core.jsx)(_popup.default, {
109
+ testId: "hover-card",
110
+ isOpen: isOpen,
111
+ onClose: hideCard,
112
+ placement: "bottom-start",
113
+ content: function content(_ref2) {
114
+ var update = _ref2.update;
115
+ return (0, _core.jsx)("div", {
116
+ onMouseEnter: initShowCard,
117
+ onMouseLeave: initHideCard,
118
+ onClick: onClick,
119
+ css: _styled.HoverCardContainer // class name for trello to exclude click events
120
+ ,
121
+ className: hoverCardClassName
122
+ }, (0, _core.jsx)(_HoverCardContent.default, {
123
+ analytics: analytics,
124
+ cardActions: linkActions,
125
+ cardState: linkState,
126
+ onActionClick: onActionClick,
127
+ onResolve: update,
128
+ renderers: renderers,
129
+ url: url
130
+ }));
131
+ },
132
+ trigger: function trigger(triggerProps) {
133
+ return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
134
+ onMouseEnter: initShowCard,
135
+ onMouseLeave: initHideCard
136
+ }), children);
137
+ },
138
+ zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
139
+
140
+ });
141
+ };
142
+
143
+ exports.HoverCardComponent = HoverCardComponent;
@@ -7,44 +7,38 @@ var _typeof = require("@babel/runtime/helpers/typeof");
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
- exports.default = void 0;
10
+ exports.toFooterActions = exports.getOpenAction = exports.default = void 0;
11
11
 
12
- var _react = _interopRequireWildcard(require("react"));
12
+ var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
13
13
 
14
- var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
14
+ var _extractors = require("@atlaskit/linking-common/extractors");
15
15
 
16
- var _utils = require("../utils");
16
+ var _react = _interopRequireWildcard(require("react"));
17
+
18
+ var _constants = require("../../../constants");
17
19
 
18
20
  var _extractPreview = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
19
21
 
20
- var _constants = require("../../../constants");
22
+ var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
21
23
 
22
- var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
24
+ var _actions = require("../../../state/actions");
23
25
 
24
- var _blocks = require("../../FlexibleCard/components/blocks");
26
+ var _helpers = require("../../../state/helpers");
25
27
 
26
- var _utils2 = require("../../../utils");
28
+ var _utils = require("../../../utils");
27
29
 
28
- var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
30
+ var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
29
31
 
30
- var _helpers = require("../../../state/helpers");
32
+ var _blocks = require("../../FlexibleCard/components/blocks");
31
33
 
32
34
  var _styled = require("../styled");
33
35
 
34
- var _extractors = require("@atlaskit/linking-common/extractors");
36
+ var _utils2 = require("../utils");
35
37
 
36
38
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
37
39
 
38
40
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
39
41
 
40
- var flexibleUiOptions = {
41
- hideElevation: true,
42
- size: _constants.SmartLinkSize.Medium,
43
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
44
- theme: _constants.SmartLinkTheme.Black,
45
- hidePadding: true
46
- };
47
-
48
42
  var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
49
43
  return {
50
44
  name: _constants.ActionName.CustomAction,
@@ -65,6 +59,8 @@ var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
65
59
  };
66
60
  };
67
61
 
62
+ exports.getOpenAction = getOpenAction;
63
+
68
64
  var toFooterActions = function toFooterActions(cardActions, onActionClick) {
69
65
  return cardActions.map(function (action) {
70
66
  return {
@@ -82,10 +78,14 @@ var toFooterActions = function toFooterActions(cardActions, onActionClick) {
82
78
  });
83
79
  };
84
80
 
81
+ exports.toFooterActions = toFooterActions;
82
+
85
83
  var HoverCardContent = function HoverCardContent(_ref) {
86
84
  var _cardState$details;
87
85
 
88
- var analytics = _ref.analytics,
86
+ var _ref$id = _ref.id,
87
+ id = _ref$id === void 0 ? '' : _ref$id,
88
+ analytics = _ref.analytics,
89
89
  _ref$cardActions = _ref.cardActions,
90
90
  cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
91
91
  cardState = _ref.cardState,
@@ -93,17 +93,21 @@ var HoverCardContent = function HoverCardContent(_ref) {
93
93
  onResolve = _ref.onResolve,
94
94
  renderers = _ref.renderers,
95
95
  url = _ref.url;
96
+ var actions = (0, _actions.useSmartCardActions)(id, url, analytics);
97
+ (0, _react.useEffect)(function () {
98
+ actions.loadMetadata();
99
+ }, [actions]);
96
100
  (0, _react.useEffect)(function () {
97
101
  // Since hover preview only render on resolved status,
98
102
  // there is no need to check for statuses.
99
- analytics.ui.renderSuccessEvent(_utils.HOVER_CARD_ANALYTICS_DISPLAY, cardState.status);
103
+ analytics.ui.renderSuccessEvent(_utils2.SMART_CARD_ANALYTICS_DISPLAY, cardState.status);
100
104
  }, [analytics.ui, cardState.status]);
101
105
  var extensionKey = (0, _react.useMemo)(function () {
102
106
  return (0, _helpers.getExtensionKey)(cardState.details);
103
107
  }, [cardState.details]);
104
108
  var onClick = (0, _react.useCallback)(function (event) {
105
- var isModifierKeyPressed = (0, _utils2.isSpecialEvent)(event);
106
- analytics.ui.cardClickedEvent(undefined, _utils.HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
109
+ var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
110
+ analytics.ui.cardClickedEvent(undefined, _utils2.SMART_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
107
111
  }, [cardState.status, analytics.ui]);
108
112
  var titleActions = (0, _react.useMemo)(function () {
109
113
  return [getOpenAction(url, analytics, onActionClick)];
@@ -114,7 +118,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
114
118
  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
115
119
  var types = data ? (0, _extractors.extractType)(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
116
120
 
117
- var _extractMetadata = (0, _extractMetadata2.extractMetadata)((0, _utils.getSimulatedMetadata)(extensionKey, types)),
121
+ var _extractMetadata = (0, _extractMetadata2.extractMetadata)((0, _utils2.getSimulatedMetadata)(extensionKey, types)),
118
122
  primary = _extractMetadata.primary,
119
123
  secondary = _extractMetadata.secondary,
120
124
  subtitle = _extractMetadata.subtitle;
@@ -126,7 +130,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
126
130
  onClick: onClick,
127
131
  onResolve: onResolve,
128
132
  renderers: renderers,
129
- ui: flexibleUiOptions,
133
+ ui: _styled.flexibleUiOptions,
130
134
  url: url
131
135
  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, {
132
136
  actions: titleActions,
@@ -2,153 +2,52 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
- exports.hoverCardClassName = exports.HoverCardComponent = exports.HoverCard = void 0;
8
+ exports.HoverCard = void 0;
11
9
 
12
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
11
 
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
12
+ var _analyticsNext = require("@atlaskit/analytics-next");
15
13
 
16
14
  var _core = require("@emotion/core");
17
15
 
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _popup = _interopRequireDefault(require("@atlaskit/popup"));
21
-
22
- var _useSmartLinkActions = require("../../state/hooks-external/useSmartLinkActions");
23
-
24
- var _styled = require("./styled");
16
+ var _react = require("react");
25
17
 
26
- var _analyticsNext = require("@atlaskit/analytics-next");
27
-
28
- var _analytics = require("../../utils/analytics");
29
-
30
- var _store = require("../../state/store");
18
+ var _reactErrorBoundary = require("react-error-boundary");
31
19
 
32
- var _analytics2 = require("../../state/analytics");
20
+ var _analytics = require("../../state/analytics");
33
21
 
34
- var _renderers = require("../../state/renderers");
22
+ var _analytics2 = require("../../utils/analytics");
35
23
 
36
- var _hoverCardContent = _interopRequireDefault(require("./components/hover-card-content"));
24
+ var _HoverCardComponent = require("./components/HoverCardComponent");
37
25
 
38
26
  var _utils = require("./utils");
39
27
 
40
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
41
-
42
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
43
-
44
28
  /** @jsx jsx */
45
- var hoverCardClassName = 'smart-links-hover-preview';
46
- exports.hoverCardClassName = hoverCardClassName;
47
-
48
- var HoverCardComponent = function HoverCardComponent(_ref) {
49
- var children = _ref.children,
50
- id = _ref.id,
51
- url = _ref.url,
52
- createAnalyticsEvent = _ref.createAnalyticsEvent;
29
+ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
30
+ var url = props.url,
31
+ id = props.id,
32
+ children = props.children,
33
+ createAnalyticsEvent = props.createAnalyticsEvent;
53
34
  var analyticsHandler = (0, _react.useCallback)(function (analyticsPayload) {
54
- (0, _analytics.fireSmartLinkEvent)(analyticsPayload, createAnalyticsEvent);
35
+ (0, _analytics2.fireSmartLinkEvent)(analyticsPayload, createAnalyticsEvent);
55
36
  }, [createAnalyticsEvent]);
56
- var delay = 300;
57
-
58
- var _React$useState = _react.default.useState(false),
59
- _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
60
- isOpen = _React$useState2[0],
61
- setIsOpen = _React$useState2[1];
62
-
63
- var fadeOutTimeoutId = (0, _react.useRef)();
64
- var fadeInTimeoutId = (0, _react.useRef)();
65
- var cardOpenTime = (0, _react.useRef)();
66
- var renderers = (0, _renderers.useSmartLinkRenderers)();
67
- var linkState = (0, _store.useSmartCardState)(url);
68
- var analytics = (0, _analytics2.useSmartLinkAnalytics)(url, analyticsHandler, id);
69
- var hideCard = (0, _react.useCallback)(function () {
70
- //Check its previously open to avoid firing events when moving between the child and hover card components
71
- if (isOpen === true && cardOpenTime.current) {
72
- var hoverTime = Date.now() - cardOpenTime.current;
73
- analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
74
- }
75
-
76
- setIsOpen(false);
77
- }, [analytics.ui, isOpen]);
78
- var initHideCard = (0, _react.useCallback)(function () {
79
- if (fadeInTimeoutId.current) {
80
- clearTimeout(fadeInTimeoutId.current);
81
- }
82
-
83
- fadeOutTimeoutId.current = setTimeout(function () {
84
- return hideCard();
85
- }, delay);
86
- }, [hideCard]);
87
- var initShowCard = (0, _react.useCallback)(function () {
88
- if (fadeOutTimeoutId.current) {
89
- clearTimeout(fadeOutTimeoutId.current);
90
- }
91
-
92
- fadeInTimeoutId.current = setTimeout(function () {
93
- //Check if its previously closed to avoid firing events when moving between the child and hover card components
94
- if (isOpen === false) {
95
- cardOpenTime.current = Date.now();
96
- analytics.ui.hoverCardViewedEvent('card', 'mouse_hover');
97
- }
98
-
99
- setIsOpen(true);
100
- }, delay);
101
- }, [delay, isOpen, analytics.ui]);
102
- var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
103
- url: url,
104
- appearance: _utils.HOVER_CARD_ANALYTICS_DISPLAY,
105
- analyticsHandler: analyticsHandler
106
- });
107
- var onActionClick = (0, _react.useCallback)(function (actionId) {
108
- if (actionId === 'preview-content') {
109
- hideCard();
110
- }
111
- }, [hideCard]); // Stop hover preview content to propagate event to parent.
112
-
113
- var onClick = (0, _react.useCallback)(function (e) {
114
- return e.stopPropagation();
115
- }, []);
116
- return (0, _core.jsx)(_popup.default, {
117
- testId: "hover-card",
118
- isOpen: isOpen,
119
- onClose: hideCard,
120
- placement: "bottom-start",
121
- content: function content(_ref2) {
122
- var update = _ref2.update;
123
- return (0, _core.jsx)("div", {
124
- onMouseEnter: initShowCard,
125
- onMouseLeave: initHideCard,
126
- className: hoverCardClassName,
127
- css: _styled.HoverCardContainer,
128
- onClick: onClick
129
- }, (0, _core.jsx)(_hoverCardContent.default, {
130
- analytics: analytics,
131
- cardActions: linkActions,
132
- cardState: linkState,
133
- onActionClick: onActionClick,
134
- onResolve: update,
135
- renderers: renderers,
136
- url: url
137
- }));
138
- },
139
- trigger: function trigger(triggerProps) {
140
- return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
141
- onMouseEnter: initShowCard,
142
- onMouseLeave: initHideCard
143
- }), children);
144
- },
145
- zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
146
-
147
- });
37
+ var analytics = (0, _analytics.useSmartLinkAnalytics)(url, analyticsHandler, id);
38
+ var onError = (0, _react.useCallback)(function (error, info) {
39
+ analytics.ui.renderFailedEvent(_utils.SMART_CARD_ANALYTICS_DISPLAY, id, error, info);
40
+ }, [analytics.ui, id]);
41
+ return (0, _core.jsx)(_reactErrorBoundary.ErrorBoundary, {
42
+ fallback: children,
43
+ onError: onError
44
+ }, (0, _core.jsx)(_HoverCardComponent.HoverCardComponent, (0, _extends2.default)({}, props, {
45
+ analyticsHandler: analyticsHandler,
46
+ analytics: analytics
47
+ }), children));
148
48
  };
149
49
 
150
- exports.HoverCardComponent = HoverCardComponent;
151
50
  var HoverCard = (0, _analyticsNext.withAnalyticsContext)({
152
51
  source: 'smartLinkPreviewHoverCard'
153
- })((0, _analyticsNext.withAnalyticsEvents)()(HoverCardComponent));
52
+ })((0, _analyticsNext.withAnalyticsEvents)()(HoverCardWithErrorBoundary));
154
53
  exports.HoverCard = HoverCard;
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.HoverCardContainer = void 0;
8
+ exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = void 0;
9
9
 
10
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
11
 
@@ -13,8 +13,18 @@ var _core = require("@emotion/core");
13
13
 
14
14
  var _index = require("../../index");
15
15
 
16
+ var _constants = require("../../constants");
17
+
16
18
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
17
19
 
20
+ var flexibleUiOptions = {
21
+ hideElevation: true,
22
+ size: _constants.SmartLinkSize.Medium,
23
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
24
+ theme: _constants.SmartLinkTheme.Black,
25
+ hidePadding: true
26
+ };
27
+ exports.flexibleUiOptions = flexibleUiOptions;
18
28
  var blockGap = '0.5rem';
19
29
  var elementGap = '0.5rem';
20
30
  var separatorCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n [data-separator] + [data-separator]:before {\n margin-right: ", ";\n }\n"])), elementGap);
@@ -3,12 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.getSimulatedMetadata = exports.HOVER_CARD_ANALYTICS_DISPLAY = void 0;
6
+ exports.getSimulatedMetadata = exports.SMART_CARD_ANALYTICS_DISPLAY = void 0;
7
7
 
8
8
  var _constants = require("../../constants");
9
9
 
10
- var HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
11
- exports.HOVER_CARD_ANALYTICS_DISPLAY = HOVER_CARD_ANALYTICS_DISPLAY;
10
+ var SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
11
+ exports.SMART_CARD_ANALYTICS_DISPLAY = SMART_CARD_ANALYTICS_DISPLAY;
12
12
 
13
13
  var getSimulatedMetadata = function getSimulatedMetadata() {
14
14
  var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -72,6 +72,7 @@ var InlineCard = function InlineCard(_ref) {
72
72
  isSelected = _ref.isSelected,
73
73
  renderers = _ref.renderers,
74
74
  onResolve = _ref.onResolve,
75
+ onError = _ref.onError,
75
76
  testId = _ref.testId,
76
77
  inlinePreloaderStyle = _ref.inlinePreloaderStyle,
77
78
  showHoverPreview = _ref.showHoverPreview;
@@ -111,6 +112,13 @@ var InlineCard = function InlineCard(_ref) {
111
112
  }));
112
113
 
113
114
  case 'unauthorized':
115
+ if (onError) {
116
+ onError({
117
+ url: url,
118
+ status: status
119
+ });
120
+ }
121
+
114
122
  var provider = (0, _extractors.extractProvider)(cardDetails);
115
123
  return /*#__PURE__*/_react.default.createElement(_UnauthorisedView.InlineCardUnauthorizedView, {
116
124
  icon: provider && provider.icon,
@@ -122,6 +130,13 @@ var InlineCard = function InlineCard(_ref) {
122
130
  });
123
131
 
124
132
  case 'forbidden':
133
+ if (onError) {
134
+ onError({
135
+ url: url,
136
+ status: status
137
+ });
138
+ }
139
+
125
140
  var providerForbidden = (0, _extractors.extractProvider)(cardDetails);
126
141
  var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getUnauthorizedJsonLd)().meta;
127
142
  var requestAccessContext = (0, _context.extractRequestAccessContext)({
@@ -141,6 +156,13 @@ var InlineCard = function InlineCard(_ref) {
141
156
  });
142
157
 
143
158
  case 'not_found':
159
+ if (onError) {
160
+ onError({
161
+ url: url,
162
+ status: status
163
+ });
164
+ }
165
+
144
166
  var providerNotFound = (0, _extractors.extractProvider)(cardDetails);
145
167
  return /*#__PURE__*/_react.default.createElement(_ErroredView.InlineCardErroredView, {
146
168
  url: url,
@@ -153,6 +175,13 @@ var InlineCard = function InlineCard(_ref) {
153
175
 
154
176
  case 'fallback':
155
177
  case 'errored':
178
+ if (onError) {
179
+ onError({
180
+ url: url,
181
+ status: status
182
+ });
183
+ }
184
+
156
185
  return /*#__PURE__*/_react.default.createElement(_LinkView.CardLinkView, {
157
186
  link: url,
158
187
  isSelected: isSelected,
@@ -2,4 +2,5 @@ export const ANALYTICS_RESOLVING = 'resolving';
2
2
  export const ANALYTICS_ERROR = 'errored';
3
3
  export const ANALYTICS_FALLBACK = 'fallback';
4
4
  export const ERROR_MESSAGE_OAUTH = 'Provider.authFlow is not set to OAuth2.';
5
- export const ERROR_MESSAGE_FATAL = 'Fatal error resolving URL';
5
+ export const ERROR_MESSAGE_FATAL = 'Fatal error resolving URL';
6
+ export const ERROR_MESSAGE_METADATA = 'Error resolving metadata.';