@atlaskit/smart-card 17.7.1 → 17.7.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 17.7.4
+
+### Patch Changes
+
+- [`ff7b1126682`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ff7b1126682) - Set up base component and relevant tests for hover previews
+
+## 17.7.3
+
+### Patch Changes
+
+- [`474d69913ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/474d69913ef) - Title block can have an action visible only on hover
+
+## 17.7.2
+
+### Patch Changes
+
+- [`9066a1e8154`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9066a1e8154) - EDM-2926: Add title override for title block
+
 ## 17.7.1
 
 ### Patch Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -40,18 +40,26 @@ var ActionGroup = function ActionGroup(_ref) {
       items = _ref$items === void 0 ? [] : _ref$items,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
-      appearance = _ref.appearance;
-  var isMoreThenTwoItems = items.length > 2;
-  var firstActions = isMoreThenTwoItems ? items.slice(0, 1) : items;
-  var restActions = isMoreThenTwoItems ? items.slice(1) : [];
+      appearance = _ref.appearance,
+      _ref$visibleButtonsNu = _ref.visibleButtonsNum,
+      visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
+      onDropdownOpenChange = _ref.onDropdownOpenChange;
+  var isMoreThenTwoItems = items.length > visibleButtonsNum;
+  var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
+  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
   return (0, _core.jsx)("div", {
     css: styles
   }, (0, _core.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(firstActions, size, appearance), restActions.length > 0 ? (0, _core.jsx)(_dropdownMenu.default, {
-    trigger: function trigger(_ref2) {
-      var triggerRef = _ref2.triggerRef,
-          props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    onOpenChange: function onOpenChange(_ref2) {
+      var isOpen = _ref2.isOpen;
+      return onDropdownOpenChange && onDropdownOpenChange(isOpen);
+    },
+    trigger: function trigger(_ref3) {
+      var triggerRef = _ref3.triggerRef,
+          props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
       return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
         spacing: _action.sizeToSpacing[size],
+        className: "action-group-more-button",
         testId: "action-group-more-button",
         iconBefore: (0, _core.jsx)(_more.default, {
           label: "more"

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

@@ -30,9 +30,10 @@ var Block = function Block(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId;
+      testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId,
+      extraCss = _ref.extraCss;
   return (0, _core.jsx)("div", {
-    css: getBlockStyles(direction, size),
+    css: [getBlockStyles(direction, size), extraCss],
     "data-smart-block": true,
     "data-testid": testId
   }, (0, _utils.renderChildren)(children, size));

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

@@ -31,7 +31,7 @@ var _elementGroup = _interopRequireDefault(require("../../element-group"));
 
 var _token = require("../../../../../../utils/token");
 
-var _excluded = ["maxLines", "retry", "position", "testId", "theme"];
+var _excluded = ["maxLines", "retry", "position", "testId", "theme", "text"];
 
 var _templateObject, _templateObject2;
 
@@ -48,6 +48,7 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
       position = _ref.position,
       testId = _ref.testId,
       theme = _ref.theme,
+      text = _ref.text,
       blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _ref2 = retry || {},
@@ -58,14 +59,17 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
   var _blockProps$size = blockProps.size,
       size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
   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, _core.jsx)(_elements.Title, (0, _extends2.default)({}, overrideText, {
     maxLines: maxLines,
     theme: theme
-  }), descriptor && (0, _core.jsx)(_elementGroup.default, {
+  })), descriptor && (0, _core.jsx)(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right
   }, (0, _core.jsx)("span", {

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,9 +11,15 @@ 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 _react = _interopRequireDefault(require("react"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
 
 var _elements = require("../../../elements");
 
@@ -25,7 +33,15 @@ var _utils = require("../../utils");
 
 var _actionGroup = _interopRequireDefault(require("../../action-group"));
 
-var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme"];
+var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme", "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,
@@ -38,26 +54,43 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
       actions = _ref$actions === void 0 ? [] : _ref$actions,
       testId = _ref.testId,
       theme = _ref.theme,
+      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 metadataElements = (0, _utils.renderElementItems)(metadata);
   var subtitleElements = (0, _utils.renderElementItems)(subtitle);
-  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
-    testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/_react.default.createElement(_elements.LinkIcon, {
+  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
-  }), /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+  }), (0, _core.jsx)(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Vertical,
     width: _constants.SmartLinkWidth.Flexible
-  }, /*#__PURE__*/_react.default.createElement(_elements.Title, {
+  }, (0, _core.jsx)(_elements.Title, (0, _extends2.default)({
     maxLines: maxLines,
     theme: theme
-  }), subtitleElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+  }, overrideText)), subtitleElements && (0, _core.jsx)(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal
-  }, subtitleElements)), metadataElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+  }, subtitleElements)), metadataElements && (0, _core.jsx)(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right
-  }, metadataElements), actions.length > 0 && /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
-    items: actions
+  }, metadataElements), actions.length > 0 && (0, _core.jsx)(_actionGroup.default, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
+      return setActionDropdownOpen(isOpen);
+    }
   }));
 };
 

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

@@ -23,7 +23,7 @@ var _block = _interopRequireDefault(require("../../block"));
 
 var _constants = require("../../../../../../constants");
 
-var _excluded = ["maxLines", "retry", "position", "testId", "theme"];
+var _excluded = ["maxLines", "retry", "position", "testId", "theme", "text"];
 
 var getSpinnerSize = function getSpinnerSize(size) {
   // Spinner sizes should be equivalent or smaller than Icon size
@@ -50,18 +50,22 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
       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, {
     size: getSpinnerSize(size),
     testId: "".concat(testId, "-resolving-spinner")
-  }), (0, _core.jsx)(_elements.Title, {
+  }), (0, _core.jsx)(_elements.Title, (0, _extends2.default)({}, overrideText, {
     maxLines: maxLines,
     theme: theme
-  }));
+  })));
 };
 
 var _default = TitleBlockResolvingView;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HoverCard = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _blocks = require("../FlexibleCard/components/blocks");
+
+var _Card = require("../Card");
+
+var _styled = require("./styled");
+
+var HoverCard = function HoverCard(_ref) {
+  var children = _ref.children,
+      url = _ref.url;
+
+  var cardComponent = /*#__PURE__*/_react.default.createElement(_Card.Card, {
+    appearance: "block",
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, null));
+
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: cardComponent,
+    component: _styled.HoverCardContainer,
+    testId: "hover-card",
+    tag: "span"
+  }, children);
+};
+
+exports.HoverCard = HoverCard;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HoverCardContainer = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _tooltip = require("@atlaskit/tooltip");
+
+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"])));
+exports.HoverCardContainer = HoverCardContainer;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/InlineCard/ResolvedView/index.js

@@ -27,6 +27,8 @@ var _IconAndTitleLayout = require("../IconAndTitleLayout");
 
 var _styled = require("../IconAndTitleLayout/styled");
 
+var _index = require("../../../view/HoverCard/index");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -68,8 +70,11 @@ var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
           _this$props$testId = _this$props.testId,
           testId = _this$props$testId === void 0 ? 'inline-card-resolved-view' : _this$props$testId,
           titleTextColor = _this$props.titleTextColor,
-          titlePrefix = _this$props.titlePrefix;
-      return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+          titlePrefix = _this$props.titlePrefix,
+          _this$props$showHover = _this$props.showHoverPreview,
+          showHoverPreview = _this$props$showHover === void 0 ? false : _this$props$showHover;
+
+      var inlineCardResolvedView = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
         link: link,
         isSelected: isSelected,
@@ -80,6 +85,14 @@ var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         title: title,
         titleTextColor: titleTextColor
       }), this.renderLozenge());
+
+      if (showHoverPreview && link) {
+        return /*#__PURE__*/_react.default.createElement(_index.HoverCard, {
+          url: link
+        }, inlineCardResolvedView);
+      }
+
+      return inlineCardResolvedView;
     }
   }]);
   return InlineCardResolvedView;

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

@@ -70,7 +70,8 @@ var InlineCard = function InlineCard(_ref) {
       renderers = _ref.renderers,
       onResolve = _ref.onResolve,
       testId = _ref.testId,
-      inlinePreloaderStyle = _ref.inlinePreloaderStyle;
+      inlinePreloaderStyle = _ref.inlinePreloaderStyle,
+      showHoverPreview = _ref.showHoverPreview;
   var status = cardState.status,
       details = cardState.details;
   var cardDetails = details && details.data || (0, _jsonld.getEmptyJsonLd)();
@@ -98,6 +99,7 @@ var InlineCard = function InlineCard(_ref) {
       }
 
       return /*#__PURE__*/_react.default.createElement(_ResolvedView.InlineCardResolvedView, (0, _extends2.default)({}, resolvedProps, {
+        showHoverPreview: showHoverPreview,
         link: url,
         isSelected: isSelected,
         onClick: handleFrameClick,

package/dist/es2019/version.json

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

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -17,19 +17,25 @@ const styles = css`
 const ActionGroup = ({
   items = [],
   size = SmartLinkSize.Medium,
-  appearance
+  appearance,
+  visibleButtonsNum = 2,
+  onDropdownOpenChange
 }) => {
-  const isMoreThenTwoItems = items.length > 2;
-  const firstActions = isMoreThenTwoItems ? items.slice(0, 1) : items;
-  const restActions = isMoreThenTwoItems ? items.slice(1) : [];
+  const isMoreThenTwoItems = items.length > visibleButtonsNum;
+  const firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
+  const restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
   return jsx("div", {
     css: styles
   }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
+    onOpenChange: ({
+      isOpen
+    }) => onDropdownOpenChange && onDropdownOpenChange(isOpen),
     trigger: ({
       triggerRef,
       ...props
     }) => jsx(Button, _extends({}, props, {
       spacing: sizeToSpacing[size],
+      className: "action-group-more-button",
       testId: "action-group-more-button",
       iconBefore: jsx(MoreIcon, {
         label: "more"

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

@@ -13,9 +13,10 @@ const Block = ({
   children,
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
-  testId = 'smart-block'
+  testId = 'smart-block',
+  extraCss
 }) => jsx("div", {
-  css: getBlockStyles(direction, size),
+  css: [getBlockStyles(direction, size), extraCss],
   "data-smart-block": true,
   "data-testid": testId
 }, renderChildren(children, size));

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

@@ -36,6 +36,7 @@ const TitleBlockErroredView = ({
   position,
   testId,
   theme,
+  text,
   ...blockProps
 }) => {
   const {
@@ -47,14 +48,17 @@ const TitleBlockErroredView = ({
     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, {
+  }), jsx(Title, _extends({}, overrideText, {
     maxLines: maxLines,
     theme: theme
-  }), descriptor && jsx(ElementGroup, {
+  })), descriptor && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {

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

@@ -1,11 +1,25 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+
+/** @jsx jsx */
+import React, { useState } from 'react';
+import { css, jsx } from '@emotion/core';
 import { LinkIcon, Title } from '../../../elements';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkWidth } from '../../../../../../constants';
 import { renderElementItems } from '../../utils';
 import ActionGroup from '../../action-group';
+const actionOnHoverOnlyStyle = css`
+  .action-group-more-button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    .action-group-more-button {
+      visibility: visible;
+    }
+  }
+`;
 
 const TitleBlockResolvedView = ({
   maxLines,
@@ -15,27 +29,37 @@ const TitleBlockResolvedView = ({
   actions = [],
   testId,
   theme,
+  text,
+  showActionOnHover,
   ...blockProps
 }) => {
+  const [actionDropdownOpen, setActionDropdownOpen] = useState(false);
   const metadataElements = renderElementItems(metadata);
   const subtitleElements = renderElementItems(subtitle);
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-    testId: `${testId}-resolved-view`
-  }), /*#__PURE__*/React.createElement(LinkIcon, {
+  const overrideText = !!text ? {
+    text
+  } : {};
+  const extraCss = showActionOnHover && !actionDropdownOpen ? actionOnHoverOnlyStyle : undefined;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: `${testId}-resolved-view`,
+    extraCss: extraCss
+  }), jsx(LinkIcon, {
     position: position
-  }), /*#__PURE__*/React.createElement(ElementGroup, {
+  }), jsx(ElementGroup, {
     direction: SmartLinkDirection.Vertical,
     width: SmartLinkWidth.Flexible
-  }, /*#__PURE__*/React.createElement(Title, {
+  }, jsx(Title, _extends({
     maxLines: maxLines,
     theme: theme
-  }), subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
+  }, overrideText)), subtitleElements && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal
-  }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
+  }, subtitleElements)), metadataElements && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
-  }, metadataElements), actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
-    items: actions
+  }, metadataElements), actions.length > 0 && jsx(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: isOpen => setActionDropdownOpen(isOpen)
   }));
 };
 

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

@@ -33,20 +33,24 @@ const TitleBlockResolvingView = ({
   position,
   testId,
   theme,
+  text,
   ...blockProps
 }) => {
   const {
     size = SmartLinkSize.Medium
   } = blockProps;
+  const overrideText = !!text ? {
+    text
+  } : {};
   return jsx(Block, _extends({}, blockProps, {
     testId: `${testId}-resolving-view`
   }), jsx(Spinner, {
     size: getSpinnerSize(size),
     testId: `${testId}-resolving-spinner`
-  }), jsx(Title, {
+  }), jsx(Title, _extends({}, overrideText, {
     maxLines: maxLines,
     theme: theme
-  }));
+  })));
 };
 
 export default TitleBlockResolvingView;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { TitleBlock, SnippetBlock, FooterBlock } from '../FlexibleCard/components/blocks';
+import { Card } from '../Card';
+import { HoverCardContainer } from './styled';
+export const HoverCard = ({
+  children,
+  url
+}) => {
+  const cardComponent = /*#__PURE__*/React.createElement(Card, {
+    appearance: "block",
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(FooterBlock, null));
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: cardComponent,
+    component: HoverCardContainer,
+    testId: "hover-card",
+    tag: "span"
+  }, children);
+};

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

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+import { TooltipPrimitive } from '@atlaskit/tooltip';
+export const HoverCardContainer = styled(TooltipPrimitive)`
+  background: none;
+  border-width: 0;
+  box-sizing: content-box; /* do not set this to border-box or it will break the overflow handling */
+  max-width: 500px;
+  padding: 0;
+`;

package/dist/es2019/view/HoverCard/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/view/InlineCard/ResolvedView/index.js

@@ -3,6 +3,7 @@ import { Frame } from '../Frame';
 import Lozenge from '@atlaskit/lozenge';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { LozengeWrapper } from '../IconAndTitleLayout/styled';
+import { HoverCard } from '../../../view/HoverCard/index';
 export class InlineCardResolvedView extends React.Component {
   renderLozenge() {
     const {
@@ -28,9 +29,10 @@ export class InlineCardResolvedView extends React.Component {
       link,
       testId = 'inline-card-resolved-view',
       titleTextColor,
-      titlePrefix
+      titlePrefix,
+      showHoverPreview = false
     } = this.props;
-    return /*#__PURE__*/React.createElement(Frame, {
+    const inlineCardResolvedView = /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
       link: link,
       isSelected: isSelected,
@@ -41,6 +43,14 @@ export class InlineCardResolvedView extends React.Component {
       title: title,
       titleTextColor: titleTextColor
     }), this.renderLozenge());
+
+    if (showHoverPreview && link) {
+      return /*#__PURE__*/React.createElement(HoverCard, {
+        url: link
+      }, inlineCardResolvedView);
+    }
+
+    return inlineCardResolvedView;
   }
 
 }

package/dist/es2019/view/InlineCard/index.js

@@ -19,7 +19,8 @@ export const InlineCard = ({
   renderers,
   onResolve,
   testId,
-  inlinePreloaderStyle
+  inlinePreloaderStyle,
+  showHoverPreview
 }) => {
   var _details$meta;
 
@@ -52,6 +53,7 @@ export const InlineCard = ({
       }
 
       return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedProps, {
+        showHoverPreview: showHoverPreview,
         link: url,
         isSelected: isSelected,
         onClick: handleFrameClick,

package/dist/esm/version.json

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

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -21,19 +21,27 @@ var ActionGroup = function ActionGroup(_ref) {
       items = _ref$items === void 0 ? [] : _ref$items,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
-      appearance = _ref.appearance;
-  var isMoreThenTwoItems = items.length > 2;
-  var firstActions = isMoreThenTwoItems ? items.slice(0, 1) : items;
-  var restActions = isMoreThenTwoItems ? items.slice(1) : [];
+      appearance = _ref.appearance,
+      _ref$visibleButtonsNu = _ref.visibleButtonsNum,
+      visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
+      onDropdownOpenChange = _ref.onDropdownOpenChange;
+  var isMoreThenTwoItems = items.length > visibleButtonsNum;
+  var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
+  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
   return jsx("div", {
     css: styles
   }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
-    trigger: function trigger(_ref2) {
-      var triggerRef = _ref2.triggerRef,
-          props = _objectWithoutProperties(_ref2, _excluded);
+    onOpenChange: function onOpenChange(_ref2) {
+      var isOpen = _ref2.isOpen;
+      return onDropdownOpenChange && onDropdownOpenChange(isOpen);
+    },
+    trigger: function trigger(_ref3) {
+      var triggerRef = _ref3.triggerRef,
+          props = _objectWithoutProperties(_ref3, _excluded);
 
       return jsx(Button, _extends({}, props, {
         spacing: sizeToSpacing[size],
+        className: "action-group-more-button",
         testId: "action-group-more-button",
         iconBefore: jsx(MoreIcon, {
           label: "more"

package/dist/esm/view/FlexibleCard/components/blocks/block/index.js

@@ -19,9 +19,10 @@ var Block = function Block(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId;
+      testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId,
+      extraCss = _ref.extraCss;
   return jsx("div", {
-    css: getBlockStyles(direction, size),
+    css: [getBlockStyles(direction, size), extraCss],
     "data-smart-block": true,
     "data-testid": testId
   }, renderChildren(children, size));

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["maxLines", "retry", "position", "testId", "theme"];
+var _excluded = ["maxLines", "retry", "position", "testId", "theme", "text"];
 
 var _templateObject, _templateObject2;
 
@@ -28,6 +28,7 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
       position = _ref.position,
       testId = _ref.testId,
       theme = _ref.theme,
+      text = _ref.text,
       blockProps = _objectWithoutProperties(_ref, _excluded);
 
   var _ref2 = retry || {},
@@ -38,14 +39,17 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
   var _blockProps$size = blockProps.size,
       size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
   var hasAction = onClick !== undefined;
+  var overrideText = !!text ? {
+    text: text
+  } : {};
   return jsx(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-errored-view")
   }), jsx(LinkIcon, {
     position: position
-  }), jsx(Title, {
+  }), jsx(Title, _extends({}, overrideText, {
     maxLines: maxLines,
     theme: theme
-  }), descriptor && jsx(ElementGroup, {
+  })), descriptor && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {

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

@@ -1,13 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme"];
-import React from 'react';
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme", "text", "showActionOnHover"];
+
+var _templateObject;
+
+/** @jsx jsx */
+import React, { useState } from 'react';
+import { css, jsx } from '@emotion/core';
 import { LinkIcon, Title } from '../../../elements';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkWidth } from '../../../../../../constants';
 import { renderElementItems } from '../../utils';
 import ActionGroup from '../../action-group';
+var actionOnHoverOnlyStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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,
@@ -20,27 +28,43 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
       actions = _ref$actions === void 0 ? [] : _ref$actions,
       testId = _ref.testId,
       theme = _ref.theme,
+      text = _ref.text,
+      showActionOnHover = _ref.showActionOnHover,
       blockProps = _objectWithoutProperties(_ref, _excluded);
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      actionDropdownOpen = _useState2[0],
+      setActionDropdownOpen = _useState2[1];
+
   var metadataElements = renderElementItems(metadata);
   var subtitleElements = renderElementItems(subtitle);
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-    testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/React.createElement(LinkIcon, {
+  var overrideText = !!text ? {
+    text: text
+  } : {};
+  var extraCss = showActionOnHover && !actionDropdownOpen ? actionOnHoverOnlyStyle : undefined;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view"),
+    extraCss: extraCss
+  }), jsx(LinkIcon, {
     position: position
-  }), /*#__PURE__*/React.createElement(ElementGroup, {
+  }), jsx(ElementGroup, {
     direction: SmartLinkDirection.Vertical,
     width: SmartLinkWidth.Flexible
-  }, /*#__PURE__*/React.createElement(Title, {
+  }, jsx(Title, _extends({
     maxLines: maxLines,
     theme: theme
-  }), subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
+  }, overrideText)), subtitleElements && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal
-  }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
+  }, subtitleElements)), metadataElements && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
-  }, metadataElements), actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
-    items: actions
+  }, metadataElements), actions.length > 0 && jsx(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
+      return setActionDropdownOpen(isOpen);
+    }
   }));
 };
 

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxLines", "retry", "position", "testId", "theme"];
+var _excluded = ["maxLines", "retry", "position", "testId", "theme", "text"];
 
 /** @jsx jsx */
 import React from 'react';
@@ -35,19 +35,23 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
       position = _ref.position,
       testId = _ref.testId,
       theme = _ref.theme,
+      text = _ref.text,
       blockProps = _objectWithoutProperties(_ref, _excluded);
 
   var _blockProps$size = blockProps.size,
       size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  var overrideText = !!text ? {
+    text: text
+  } : {};
   return jsx(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
   }), jsx(Spinner, {
     size: getSpinnerSize(size),
     testId: "".concat(testId, "-resolving-spinner")
-  }), jsx(Title, {
+  }), jsx(Title, _extends({}, overrideText, {
     maxLines: maxLines,
     theme: theme
-  }));
+  })));
 };
 
 export default TitleBlockResolvingView;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { TitleBlock, SnippetBlock, FooterBlock } from '../FlexibleCard/components/blocks';
+import { Card } from '../Card';
+import { HoverCardContainer } from './styled';
+export var HoverCard = function HoverCard(_ref) {
+  var children = _ref.children,
+      url = _ref.url;
+  var cardComponent = /*#__PURE__*/React.createElement(Card, {
+    appearance: "block",
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(FooterBlock, null));
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: cardComponent,
+    component: HoverCardContainer,
+    testId: "hover-card",
+    tag: "span"
+  }, children);
+};

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

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import styled from '@emotion/styled';
+import { TooltipPrimitive } from '@atlaskit/tooltip';
+export var HoverCardContainer = styled(TooltipPrimitive)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));

package/dist/esm/view/HoverCard/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/InlineCard/ResolvedView/index.js

@@ -13,6 +13,7 @@ import { Frame } from '../Frame';
 import Lozenge from '@atlaskit/lozenge';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { LozengeWrapper } from '../IconAndTitleLayout/styled';
+import { HoverCard } from '../../../view/HoverCard/index';
 export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardResolvedView, _React$Component);
 
@@ -51,8 +52,10 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
           _this$props$testId = _this$props.testId,
           testId = _this$props$testId === void 0 ? 'inline-card-resolved-view' : _this$props$testId,
           titleTextColor = _this$props.titleTextColor,
-          titlePrefix = _this$props.titlePrefix;
-      return /*#__PURE__*/React.createElement(Frame, {
+          titlePrefix = _this$props.titlePrefix,
+          _this$props$showHover = _this$props.showHoverPreview,
+          showHoverPreview = _this$props$showHover === void 0 ? false : _this$props$showHover;
+      var inlineCardResolvedView = /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         link: link,
         isSelected: isSelected,
@@ -63,6 +66,14 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         title: title,
         titleTextColor: titleTextColor
       }), this.renderLozenge());
+
+      if (showHoverPreview && link) {
+        return /*#__PURE__*/React.createElement(HoverCard, {
+          url: link
+        }, inlineCardResolvedView);
+      }
+
+      return inlineCardResolvedView;
     }
   }]);
 

package/dist/esm/view/InlineCard/index.js

@@ -21,7 +21,8 @@ export var InlineCard = function InlineCard(_ref) {
       renderers = _ref.renderers,
       onResolve = _ref.onResolve,
       testId = _ref.testId,
-      inlinePreloaderStyle = _ref.inlinePreloaderStyle;
+      inlinePreloaderStyle = _ref.inlinePreloaderStyle,
+      showHoverPreview = _ref.showHoverPreview;
   var status = cardState.status,
       details = cardState.details;
   var cardDetails = details && details.data || getEmptyJsonLd();
@@ -49,6 +50,7 @@ export var InlineCard = function InlineCard(_ref) {
       }
 
       return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedProps, {
+        showHoverPreview: showHoverPreview,
         link: url,
         isSelected: isSelected,
         onClick: handleFrameClick,

package/dist/types/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Pick<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "onClick" | "url" | "ui" | "showActions" | "onResolve" | "platform" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "embedIframeRef" | "forwardedRef"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "onClick" | "analyticsContext" | "key" | "url" | "ui" | "showActions" | "onResolve" | "platform" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "embedIframeRef" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Pick<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "onClick" | "url" | "forwardedRef" | "platform" | "isFrameVisible" | "importer" | "container" | "showActions" | "onResolve" | "embedIframeRef" | "inlinePreloaderStyle" | "ui"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "onClick" | "analyticsContext" | "key" | "url" | "forwardedRef" | "platform" | "isFrameVisible" | "importer" | "container" | "showActions" | "onResolve" | "embedIframeRef" | "inlinePreloaderStyle" | "ui"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types/view/FlexibleCard/components/blocks/action-group/types.d.ts

@@ -7,4 +7,6 @@ export declare type ActionGroupProps = {
     direction?: SmartLinkDirection;
     testId?: string;
     appearance?: Appearance;
+    visibleButtonsNum?: number;
+    onDropdownOpenChange?: (isOpen: boolean) => void;
 };

package/dist/types/view/FlexibleCard/components/blocks/title-block/resolved/index.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { TitleBlockProps } from '../types';
 declare const TitleBlockResolvedView: React.FC<TitleBlockProps>;

package/dist/types/view/FlexibleCard/components/blocks/title-block/types.d.ts

@@ -9,4 +9,6 @@ export declare type TitleBlockProps = BlockProps & {
     subtitle?: ElementItem[];
     actions?: ActionItem[];
     theme?: SmartLinkTheme;
+    text?: string;
+    showActionOnHover?: boolean;
 };

package/dist/types/view/FlexibleCard/components/blocks/types.d.ts

@@ -1,10 +1,12 @@
 import { ActionName, ElementName, SmartLinkDirection, SmartLinkSize, SmartLinkStatus } from '../../../../constants';
+import { SerializedStyles } from '@emotion/core';
 import { ActionProps } from '../actions/action/types';
 export declare type BlockProps = {
     direction?: SmartLinkDirection;
     size?: SmartLinkSize;
     status?: SmartLinkStatus;
     testId?: string;
+    extraCss?: SerializedStyles;
 };
 export declare type ElementItem = {
     name: ElementName;

package/dist/types/view/HoverCard/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { HoverCardProps } from './types';
+export declare const HoverCard: FC<HoverCardProps>;

package/dist/types/view/HoverCard/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const HoverCardContainer: import("@emotion/styled-base").StyledComponent<Pick<import("@atlaskit/tooltip").TooltipPrimitiveProps, "children" | "style" | "testId" | "className" | "id" | "onMouseOut" | "onMouseOver" | "placement" | "truncate"> & import("react").RefAttributes<HTMLDivElement> & import("react").Attributes, Pick<Pick<import("@atlaskit/tooltip").TooltipPrimitiveProps, "children" | "style" | "testId" | "className" | "id" | "onMouseOut" | "onMouseOver" | "placement" | "truncate"> & import("react").RefAttributes<HTMLDivElement> & import("react").Attributes, "children" | "style" | "testId" | "className" | "id" | "onMouseOut" | "onMouseOver" | "placement" | "truncate">, any>;

package/dist/types/view/HoverCard/types.d.ts

@@ -0,0 +1,3 @@
+export declare type HoverCardProps = {
+    url: string;
+};

package/dist/types/view/InlineCard/ResolvedView/index.d.ts

@@ -19,6 +19,8 @@ export interface InlineCardResolvedViewProps {
     titleTextColor?: string;
     /** The Emoji icon prefix that was added to the title text via Add emoji button */
     titlePrefix?: React.ReactNode;
+    /** Enables showing a custom preview on hover of link */
+    showHoverPreview?: boolean;
 }
 export declare class InlineCardResolvedView extends React.Component<InlineCardResolvedViewProps> {
     renderLozenge(): JSX.Element | null;

package/dist/types/view/InlineCard/types.d.ts

@@ -15,4 +15,5 @@ export declare type InlineCardProps = {
     }) => void;
     inlinePreloaderStyle?: InlinePreloaderStyle;
     renderers?: CardProviderRenderers;
+    showHoverPreview?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.7.1",
+  "version": "17.7.4",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"