@atlaskit/smart-card 18.0.1 → 18.0.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 18.0.4
+
+### Patch Changes
+
+- [`dd4ae8205d1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dd4ae8205d1) - Add actions for non-resolved view of flexible ui
+
+## 18.0.3
+
+### Patch Changes
+
+- [`7dc2fb8eb8b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7dc2fb8eb8b) - Handle exceptions coming from client
+
+## 18.0.2
+
+### Patch Changes
+
+- [`cff21812950`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cff21812950) - add smart link actions to footer of hover card, plus small styling changes
+
 ## 18.0.1
 
 ### Patch Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "18.0.1",
+	"version": "18.0.4",
 	"sideEffects": false
 }

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

@@ -29,6 +29,8 @@ var _flexible = require("../../utils/flexible");
 
 var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
 
+var _ = require("../..");
+
 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); }
 
 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; }
@@ -107,15 +109,14 @@ function CardWithUrlContent(_ref) {
     if ((0, _helpers.isFinalState)(state.status)) {
       analytics.ui.renderSuccessEvent(appearance, id, definitionId, extensionKey);
     }
-  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]); // We have to keep this last to prevent hook order from being violated
-
-  if (error) {
-    throw error;
-  }
+  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]);
 
   if (isFlexibleUi) {
+    var cardState = (error === null || error === void 0 ? void 0 : error.constructor) === _.APIError ? {
+      status: 'errored'
+    } : state;
     return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
-      cardState: state,
+      cardState: cardState,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
       renderers: renderers,
@@ -123,6 +124,11 @@ function CardWithUrlContent(_ref) {
       url: url,
       testId: testId
     }, children);
+  } // We have to keep this last to prevent hook order from being violated
+
+
+  if (error) {
+    throw error;
   }
 
   switch (appearance) {

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -19,10 +17,6 @@ var _reactIntlNext = require("react-intl-next");
 
 var _core = require("@emotion/core");
 
-var _elements = require("../../../elements");
-
-var _block = _interopRequireDefault(require("../../block"));
-
 var _constants = require("../../../../../../constants");
 
 var _utils = require("../../../utils");
@@ -31,7 +25,7 @@ var _elementGroup = _interopRequireDefault(require("../../element-group"));
 
 var _token = require("../../../../../../utils/token");
 
-var _excluded = ["maxLines", "retry", "position", "testId", "theme", "text"];
+var _utils2 = require("../utils");
 
 var _templateObject, _templateObject2;
 
@@ -42,42 +36,29 @@ var getMessageStyles = function getMessageStyles(size, hasAction) {
   return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), _token.tokens.errorMessage);
 };
 
-var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
-  var maxLines = _ref.maxLines,
-      retry = _ref.retry,
-      position = _ref.position,
-      testId = _ref.testId,
-      theme = _ref.theme,
-      text = _ref.text,
-      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
-  var _ref2 = retry || {},
-      descriptor = _ref2.descriptor,
-      onClick = _ref2.onClick,
-      values = _ref2.values;
-
-  var _blockProps$size = blockProps.size,
-      size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+var TitleBlockErroredView = function TitleBlockErroredView(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
+      retry = props.retry,
+      testId = props.testId;
+
+  var _ref = retry || {},
+      retryDescriptor = _ref.descriptor,
+      onClick = _ref.onClick,
+      retryValues = _ref.values;
+
   var hasAction = onClick !== undefined;
-  var overrideText = !!text ? {
-    text: text
-  } : {};
-  return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
-    testId: "".concat(testId, "-errored-view")
-  }), (0, _core.jsx)(_elements.LinkIcon, {
-    position: position
-  }), (0, _core.jsx)(_elements.Title, (0, _extends2.default)({}, overrideText, {
-    maxLines: maxLines,
-    theme: theme
-  })), descriptor && (0, _core.jsx)(_elementGroup.default, {
+  return (0, _core.jsx)(_utils2.BaseTitleBlockComponent, (0, _extends2.default)({}, props, {
+    blockTestIdPostfix: "errored-view"
+  }), retryDescriptor && (0, _core.jsx)(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right
   }, (0, _core.jsx)("span", {
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
     "data-testid": "".concat(testId, "-errored-view-message")
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
-    values: values
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, retryDescriptor, {
+    values: retryValues
   })))));
 };
 

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,88 +9,16 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _core = require("@emotion/core");
 
-var _elements = require("../../../elements");
-
-var _block = _interopRequireDefault(require("../../block"));
-
-var _elementGroup = _interopRequireDefault(require("../../element-group"));
-
-var _constants = require("../../../../../../constants");
-
-var _utils = require("../../utils");
-
-var _actionGroup = _interopRequireDefault(require("../../action-group"));
-
-var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme", "onClick", "text", "showActionOnHover"];
-
-var _templateObject;
-
-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); }
-
-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; }
-
-var actionOnHoverOnlyStyle = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .action-group-more-button {\n    visibility: hidden;\n  }\n\n  &:hover {\n    .action-group-more-button {\n      visibility: visible;\n    }\n  }\n"])));
-
-var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
-  var maxLines = _ref.maxLines,
-      _ref$metadata = _ref.metadata,
-      metadata = _ref$metadata === void 0 ? [] : _ref$metadata,
-      position = _ref.position,
-      _ref$subtitle = _ref.subtitle,
-      subtitle = _ref$subtitle === void 0 ? [] : _ref$subtitle,
-      _ref$actions = _ref.actions,
-      actions = _ref$actions === void 0 ? [] : _ref$actions,
-      testId = _ref.testId,
-      theme = _ref.theme,
-      onClick = _ref.onClick,
-      text = _ref.text,
-      showActionOnHover = _ref.showActionOnHover,
-      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      actionDropdownOpen = _useState2[0],
-      setActionDropdownOpen = _useState2[1];
+var _utils = require("../utils");
 
-  var metadataElements = (0, _utils.renderElementItems)(metadata);
-  var subtitleElements = (0, _utils.renderElementItems)(subtitle);
-  var overrideText = !!text ? {
-    text: text
-  } : {};
-  var extraCss = showActionOnHover && !actionDropdownOpen ? actionOnHoverOnlyStyle : undefined;
-  return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
-    testId: "".concat(testId, "-resolved-view"),
-    extraCss: extraCss
-  }), (0, _core.jsx)(_elements.LinkIcon, {
-    position: position
-  }), (0, _core.jsx)(_elementGroup.default, {
-    direction: _constants.SmartLinkDirection.Vertical,
-    width: _constants.SmartLinkWidth.Flexible
-  }, (0, _core.jsx)(_elements.Title, (0, _extends2.default)({
-    maxLines: maxLines,
-    theme: theme,
-    onClick: onClick
-  }, overrideText)), subtitleElements && (0, _core.jsx)(_elementGroup.default, {
-    direction: _constants.SmartLinkDirection.Horizontal
-  }, subtitleElements)), metadataElements && (0, _core.jsx)(_elementGroup.default, {
-    direction: _constants.SmartLinkDirection.Horizontal,
-    align: _constants.SmartLinkAlignment.Right
-  }, metadataElements), actions.length > 0 && (0, _core.jsx)(_actionGroup.default, {
-    items: actions,
-    visibleButtonsNum: showActionOnHover ? 1 : 2,
-    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
-      return setActionDropdownOpen(isOpen);
-    }
+/** @jsx jsx */
+var TitleBlockResolvedView = function TitleBlockResolvedView(props) {
+  return (0, _core.jsx)(_utils.BaseTitleBlockComponent, (0, _extends2.default)({}, props, {
+    blockTestIdPostfix: "resolved-view"
   }));
 };
 

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -9,22 +9,17 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _core = require("@emotion/core");
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
-var _elements = require("../../../elements");
-
-var _block = _interopRequireDefault(require("../../block"));
-
 var _constants = require("../../../../../../constants");
 
-var _excluded = ["maxLines", "retry", "position", "testId", "theme", "text"];
+var _utils = require("../utils");
 
+/** @jsx jsx */
 var getSpinnerSize = function getSpinnerSize(size) {
   // Spinner sizes should be equivalent or smaller than Icon size
   // to avoid the jumping.
@@ -44,28 +39,18 @@ var getSpinnerSize = function getSpinnerSize(size) {
   }
 };
 
-var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
-  var maxLines = _ref.maxLines,
-      retry = _ref.retry,
-      position = _ref.position,
-      testId = _ref.testId,
-      theme = _ref.theme,
-      text = _ref.text,
-      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _blockProps$size = blockProps.size,
-      size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
-  var overrideText = !!text ? {
-    text: text
-  } : {};
-  return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
-    testId: "".concat(testId, "-resolving-view")
-  }), (0, _core.jsx)(_spinner.default, {
+var TitleBlockResolvingView = function TitleBlockResolvingView(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
+      testId = props.testId;
+  var spinnerIcon = (0, _core.jsx)(_spinner.default, {
     size: getSpinnerSize(size),
     testId: "".concat(testId, "-resolving-spinner")
-  }), (0, _core.jsx)(_elements.Title, (0, _extends2.default)({}, overrideText, {
-    maxLines: maxLines,
-    theme: theme
-  })));
+  });
+  return (0, _core.jsx)(_utils.BaseTitleBlockComponent, (0, _extends2.default)({}, props, {
+    blockIcon: spinnerIcon,
+    blockTestIdPostfix: "resolving-view"
+  }));
 };
 
 var _default = TitleBlockResolvingView;

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/utils.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.actionOnHoverOnlyStyle = exports.BaseTitleBlockComponent = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
+
+var _block = _interopRequireDefault(require("../block"));
+
+var _elements = require("../../elements");
+
+var _actionGroup = _interopRequireDefault(require("../action-group"));
+
+var _constants = require("../../../../../constants");
+
+var _elementGroup = _interopRequireDefault(require("../element-group"));
+
+var _utils = require("../utils");
+
+var _excluded = ["children", "blockTestIdPostfix", "blockIcon", "testId", "showActionOnHover", "position", "actions", "text", "maxLines", "theme", "onClick", "metadata", "subtitle"];
+
+var _templateObject;
+
+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); }
+
+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; }
+
+var actionOnHoverOnlyStyle = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .action-group-more-button {\n    visibility: hidden;\n  }\n\n  &:hover {\n    .action-group-more-button {\n      visibility: visible;\n    }\n  }\n"])));
+exports.actionOnHoverOnlyStyle = actionOnHoverOnlyStyle;
+
+var BaseTitleBlockComponent = function BaseTitleBlockComponent(_ref) {
+  var children = _ref.children,
+      blockTestIdPostfix = _ref.blockTestIdPostfix,
+      blockIcon = _ref.blockIcon,
+      testId = _ref.testId,
+      showActionOnHover = _ref.showActionOnHover,
+      position = _ref.position,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      text = _ref.text,
+      maxLines = _ref.maxLines,
+      theme = _ref.theme,
+      onClick = _ref.onClick,
+      _ref$metadata = _ref.metadata,
+      metadata = _ref$metadata === void 0 ? [] : _ref$metadata,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === void 0 ? [] : _ref$subtitle,
+      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      actionDropdownOpen = _useState2[0],
+      setActionDropdownOpen = _useState2[1];
+
+  var extraCss = showActionOnHover && !actionDropdownOpen ? actionOnHoverOnlyStyle : undefined;
+  var overrideText = !!text ? {
+    text: text
+  } : {};
+  var metadataElements = (0, _utils.renderElementItems)(metadata);
+  var subtitleElements = (0, _utils.renderElementItems)(subtitle);
+  return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-").concat(blockTestIdPostfix),
+    extraCss: extraCss
+  }), blockIcon || (0, _core.jsx)(_elements.LinkIcon, {
+    position: position
+  }), (0, _core.jsx)(_elementGroup.default, {
+    direction: _constants.SmartLinkDirection.Vertical,
+    width: _constants.SmartLinkWidth.Flexible
+  }, (0, _core.jsx)(_elements.Title, (0, _extends2.default)({
+    maxLines: maxLines,
+    theme: theme,
+    onClick: onClick
+  }, overrideText)), subtitleElements && (0, _core.jsx)(_elementGroup.default, {
+    direction: _constants.SmartLinkDirection.Horizontal
+  }, subtitleElements)), metadataElements && (0, _core.jsx)(_elementGroup.default, {
+    direction: _constants.SmartLinkDirection.Horizontal,
+    align: _constants.SmartLinkAlignment.Right
+  }, metadataElements), children, actions.length > 0 && (0, _core.jsx)(_actionGroup.default, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
+      return setActionDropdownOpen(isOpen);
+    }
+  }));
+};
+
+exports.BaseTitleBlockComponent = BaseTitleBlockComponent;

package/dist/cjs/view/HoverCard/index.js

@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _core = require("@emotion/core");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _blocks = require("../FlexibleCard/components/blocks");
@@ -23,10 +25,15 @@ var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 
 var _constants = require("../../constants");
 
+var _useSmartLinkActions = require("../../state/hooks-external/useSmartLinkActions");
+
+var _styled = require("./styled");
+
 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); }
 
 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; }
 
+/** @jsx jsx */
 var HoverCard = function HoverCard(_ref) {
   var children = _ref.children,
       url = _ref.url;
@@ -56,33 +63,55 @@ var HoverCard = function HoverCard(_ref) {
     fadeInTimeoutId.current = setTimeout(function () {
       setIsOpen(true);
     }, delay);
-  }, [delay]);
+  }, [delay]); //TODO: EDM-2905: Add analytics events
+
+  var analyticsHandler = (0, _react.useCallback)(function () {}, []);
+  var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
+    url: url,
+    appearance: 'block',
+    analyticsHandler: analyticsHandler
+  });
+  var actions = (0, _react.useMemo)(function () {
+    return linkActions.map(function (action) {
+      return {
+        content: action.text,
+        name: _constants.ActionName.CustomAction,
+        onClick: function onClick() {
+          return action.invoke();
+        },
+        testId: action.id
+      };
+    });
+  }, [linkActions]);
 
   var cardComponent = function cardComponent() {
-    return /*#__PURE__*/_react.default.createElement("span", {
+    return (0, _core.jsx)("div", {
       onMouseEnter: initShowCard,
-      onMouseLeave: initHideCard
-    }, /*#__PURE__*/_react.default.createElement(_Card.Card, {
+      onMouseLeave: initHideCard,
+      css: _styled.HoverCardContainer
+    }, (0, _core.jsx)(_Card.Card, {
       appearance: "block",
       url: url,
       ui: {
         hideElevation: true,
         size: _constants.SmartLinkSize.Large
       }
-    }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, null)));
+    }, (0, _core.jsx)(_blocks.TitleBlock, null), (0, _core.jsx)(_blocks.SnippetBlock, null), (0, _core.jsx)(_blocks.FooterBlock, {
+      actions: actions
+    })));
   };
 
   var onClose = (0, _react.useCallback)(function () {
     return setIsOpen(false);
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_popup.default, {
+  return (0, _core.jsx)(_popup.default, {
     testId: "hover-card",
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom",
     content: cardComponent,
     trigger: function trigger(triggerProps) {
-      return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, triggerProps, {
+      return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
         onMouseEnter: initShowCard,
         onMouseLeave: initHideCard
       }), children);

package/dist/cjs/view/HoverCard/styled.js

@@ -9,11 +9,9 @@ exports.HoverCardContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _tooltip = require("@atlaskit/tooltip");
+var _core = require("@emotion/core");
 
 var _templateObject;
 
-var HoverCardContainer = (0, _styled.default)(_tooltip.TooltipPrimitive)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: content-box; /* do not set this to border-box or it will break the overflow handling */\n  max-width: 500px;\n  padding: 0;\n"])));
+var HoverCardContainer = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  max-width: 500px;\n  padding: 0;\n"])));
 exports.HoverCardContainer = HoverCardContainer;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "18.0.1",
+	"version": "18.0.4",
 	"sideEffects": false
 }

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

@@ -8,6 +8,7 @@ import { InlineCard } from '../InlineCard';
 import { EmbedCard } from '../EmbedCard';
 import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
+import { APIError } from '../..';
 export function CardWithUrlContent({
   id,
   url,
@@ -76,15 +77,14 @@ export function CardWithUrlContent({
     if (isFinalState(state.status)) {
       analytics.ui.renderSuccessEvent(appearance, id, definitionId, extensionKey);
     }
-  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]); // We have to keep this last to prevent hook order from being violated
-
-  if (error) {
-    throw error;
-  }
+  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]);
 
   if (isFlexibleUi) {
+    let cardState = (error === null || error === void 0 ? void 0 : error.constructor) === APIError ? {
+      status: 'errored'
+    } : state;
     return /*#__PURE__*/React.createElement(FlexibleCard, {
-      cardState: state,
+      cardState: cardState,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
       renderers: renderers,
@@ -92,6 +92,11 @@ export function CardWithUrlContent({
       url: url,
       testId: testId
     }, children);
+  } // We have to keep this last to prevent hook order from being violated
+
+
+  if (error) {
+    throw error;
   }
 
   switch (appearance) {

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -4,12 +4,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
-import { LinkIcon, Title } from '../../../elements';
-import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
 import ElementGroup from '../../element-group';
 import { tokens } from '../../../../../../utils/token';
+import { BaseTitleBlockComponent } from '../utils';
 const actionStyles = css`
   cursor: pointer;
   :hover {
@@ -30,43 +29,29 @@ const getMessageStyles = (size, hasAction) => {
   `;
 };
 
-const TitleBlockErroredView = ({
-  maxLines,
-  retry,
-  position,
-  testId,
-  theme,
-  text,
-  ...blockProps
-}) => {
+const TitleBlockErroredView = props => {
   const {
-    descriptor,
+    size = SmartLinkSize.Medium,
+    retry,
+    testId
+  } = props;
+  const {
+    descriptor: retryDescriptor,
     onClick,
-    values
+    values: retryValues
   } = retry || {};
-  const {
-    size = SmartLinkSize.Medium
-  } = blockProps;
   const hasAction = onClick !== undefined;
-  const overrideText = !!text ? {
-    text
-  } : {};
-  return jsx(Block, _extends({}, blockProps, {
-    testId: `${testId}-errored-view`
-  }), jsx(LinkIcon, {
-    position: position
-  }), jsx(Title, _extends({}, overrideText, {
-    maxLines: maxLines,
-    theme: theme
-  })), descriptor && jsx(ElementGroup, {
+  return jsx(BaseTitleBlockComponent, _extends({}, props, {
+    blockTestIdPostfix: "errored-view"
+  }), retryDescriptor && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
     "data-testid": `${testId}-errored-view-message`
-  }, jsx(FormattedMessage, _extends({}, descriptor, {
-    values: values
+  }, jsx(FormattedMessage, _extends({}, retryDescriptor, {
+    values: retryValues
   })))));
 };