@atlaskit/smart-card 17.7.11 → 18.0.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/smart-card
 
+## 18.0.1
+
+### Patch Changes
+
+- [`75c16ae4964`](https://bitbucket.org/atlassian/atlassian-frontend/commits/75c16ae4964) - refactor code to use atlaskit/popup instead of atlaskit/tooltip as a base component
+
+## 18.0.0
+
+### Major Changes
+
+- [`dd429d9fdca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dd429d9fdca) - [ux] EDM-2822: Fix smart link wraps just after the icon
+
+### Patch Changes
+
+- [`fb1cf506701`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fb1cf506701) - [ux] ED-14487: polyfill ResizeObserver and IntersectionObserver for unit tests, but mock isIntersectionObserverSupported() for tests related to smart-cards
+- Updated dependencies
+
+## 17.7.12
+
+### Patch Changes
+
+- [`f9bbe6d0a56`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9bbe6d0a56) - Add View, Vote and React badge elements
+
 ## 17.7.11
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -132,6 +132,9 @@ exports.ElementName = ElementName;
   ElementName["AuthorGroup"] = "AuthorGroup";
   ElementName["CollaboratorGroup"] = "CollaboratorGroup";
   ElementName["CommentCount"] = "CommentCount";
+  ElementName["ViewCount"] = "ViewCount";
+  ElementName["ReactCount"] = "ReactCount";
+  ElementName["VoteCount"] = "VoteCount";
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
   ElementName["LinkIcon"] = "LinkIcon";
@@ -212,6 +215,9 @@ exports.IconType = IconType;
   IconType["Error"] = "Default:Error";
   IconType["Forbidden"] = "Default:Forbidden";
   IconType["Comment"] = "Badge:Comment";
+  IconType["View"] = "Badge:View";
+  IconType["React"] = "Badge:React";
+  IconType["Vote"] = "Badge:Vote";
   IconType["PriorityBlocker"] = "Badge:PriorityBlocker";
   IconType["PriorityCritical"] = "Badge:PriorityCritical";
   IconType["PriorityHigh"] = "Badge:PriorityHigh";

package/dist/cjs/extractors/flexible/index.js

@@ -40,6 +40,9 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     authorGroup: (0, _person.extractPersonCreatedBy)(data),
     collaboratorGroup: (0, _collaboratorGroup.extractPersonsUpdatedBy)(data),
     commentCount: (0, _utils.extractCommentCount)(data),
+    viewCount: (0, _utils.extractViewCount)(data),
+    reactCount: (0, _utils.extractReactCount)(data),
+    voteCount: (0, _utils.extractVoteCount)(data),
     createdBy: (0, _utils.extractCreatedBy)(data),
     createdOn: (0, _extractDateCreated.extractDateCreated)(data),
     linkIcon: (0, _icon.extractLinkIcon)(response, renderers),

package/dist/cjs/extractors/flexible/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractSubscriberCount = exports.extractProgrammingLanguage = exports.extractModifiedBy = exports.extractCreatedBy = exports.extractCommentCount = void 0;
+exports.extractVoteCount = exports.extractViewCount = exports.extractSubscriberCount = exports.extractReactCount = exports.extractProgrammingLanguage = exports.extractModifiedBy = exports.extractCreatedBy = exports.extractCommentCount = void 0;
 
 var _person = require("../common/person");
 
@@ -17,6 +17,24 @@ var extractCommentCount = function extractCommentCount(data) {
 
 exports.extractCommentCount = extractCommentCount;
 
+var extractViewCount = function extractViewCount(data) {
+  return extractValue(data, 'atlassian:viewCount');
+};
+
+exports.extractViewCount = extractViewCount;
+
+var extractReactCount = function extractReactCount(data) {
+  return extractValue(data, 'atlassian:reactCount');
+};
+
+exports.extractReactCount = extractReactCount;
+
+var extractVoteCount = function extractVoteCount(data) {
+  return extractValue(data, 'atlassian:voteCount');
+};
+
+exports.extractVoteCount = extractVoteCount;
+
 var extractCreatedBy = function extractCreatedBy(data) {
   var persons = (0, _person.extractPersonCreatedBy)(data);
 

package/dist/cjs/version.json

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

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -126,7 +126,7 @@ exports.TextWrapper = TextWrapper;
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  ", "\n  ", "\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), _mediaUi.borderRadius, cardShadow, (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), _mediaUi.borderRadius, cardShadow, (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {

package/dist/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -48,7 +48,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), _ElementDisplaySchema);
+var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), _ElementDisplaySchema);
 exports.ElementDisplaySchema = ElementDisplaySchema;
 
 var getDirectionStyles = function getDirectionStyles(direction) {

package/dist/cjs/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -212,6 +212,18 @@ var importIconMapper = (_importIconMapper = {}, (0, _defineProperty2.default)(_i
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require('@atlaskit/icon/glyph/comment'));
   });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.View, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/watch'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.React, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/like'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Vote, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/arrow-up'));
+  });
 }), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityBlocker, function () {
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require('@atlaskit/icon-priority/glyph/priority-blocker'));

package/dist/cjs/view/FlexibleCard/components/elements/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.SubscriberCount = exports.State = exports.Snippet = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
+exports.VoteCount = exports.ViewCount = exports.Title = exports.SubscriberCount = exports.State = exports.Snippet = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
 
 var _utils = require("./utils");
 
@@ -18,6 +18,12 @@ var CollaboratorGroup = (0, _utils.createElement)(_constants.ElementName.Collabo
 exports.CollaboratorGroup = CollaboratorGroup;
 var CommentCount = (0, _utils.createElement)(_constants.ElementName.CommentCount);
 exports.CommentCount = CommentCount;
+var ViewCount = (0, _utils.createElement)(_constants.ElementName.ViewCount);
+exports.ViewCount = ViewCount;
+var ReactCount = (0, _utils.createElement)(_constants.ElementName.ReactCount);
+exports.ReactCount = ReactCount;
+var VoteCount = (0, _utils.createElement)(_constants.ElementName.VoteCount);
+exports.VoteCount = VoteCount;
 var CreatedBy = (0, _utils.createElement)(_constants.ElementName.CreatedBy);
 exports.CreatedBy = CreatedBy;
 var CreatedOn = (0, _utils.createElement)(_constants.ElementName.CreatedOn);

package/dist/cjs/view/FlexibleCard/components/elements/utils.js

@@ -55,6 +55,21 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   props: {
     icon: _constants.IconType.Comment
   }
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ViewCount, {
+  component: _badge.default,
+  props: {
+    icon: _constants.IconType.View
+  }
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ReactCount, {
+  component: _badge.default,
+  props: {
+    icon: _constants.IconType.React
+  }
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.VoteCount, {
+  component: _badge.default,
+  props: {
+    icon: _constants.IconType.Vote
+  }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.CreatedBy, {
   component: _text.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.LinkIcon, {
@@ -112,6 +127,9 @@ var getData = function getData(elementName, contextKey, context) {
       return toAvatarGroupProps(data);
 
     case _constants.ElementName.CommentCount:
+    case _constants.ElementName.ViewCount:
+    case _constants.ElementName.ReactCount:
+    case _constants.ElementName.VoteCount:
     case _constants.ElementName.ProgrammingLanguage:
     case _constants.ElementName.SubscriberCount:
       return toBadgeProps(data);

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

@@ -2,36 +2,92 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HoverCard = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _blocks = require("../FlexibleCard/components/blocks");
 
 var _Card = require("../Card");
 
-var _styled = require("./styled");
+var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+
+var _constants = require("../../constants");
+
+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 HoverCard = function HoverCard(_ref) {
   var children = _ref.children,
       url = _ref.url;
+  var delay = 300;
 
-  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));
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    content: cardComponent,
-    component: _styled.HoverCardContainer,
+  var fadeOutTimeoutId = (0, _react.useRef)();
+  var fadeInTimeoutId = (0, _react.useRef)();
+  var initHideCard = (0, _react.useCallback)(function () {
+    if (fadeInTimeoutId.current) {
+      clearTimeout(fadeInTimeoutId.current);
+    }
+
+    fadeOutTimeoutId.current = setTimeout(function () {
+      setIsOpen(false);
+    }, delay);
+  }, [delay]);
+  var initShowCard = (0, _react.useCallback)(function () {
+    if (fadeOutTimeoutId.current) {
+      clearTimeout(fadeOutTimeoutId.current);
+    }
+
+    fadeInTimeoutId.current = setTimeout(function () {
+      setIsOpen(true);
+    }, delay);
+  }, [delay]);
+
+  var cardComponent = function cardComponent() {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard
+    }, /*#__PURE__*/_react.default.createElement(_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)));
+  };
+
+  var onClose = (0, _react.useCallback)(function () {
+    return setIsOpen(false);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_popup.default, {
     testId: "hover-card",
-    tag: "span"
-  }, children);
+    isOpen: isOpen,
+    onClose: onClose,
+    placement: "bottom",
+    content: cardComponent,
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, triggerProps, {
+        onMouseEnter: initShowCard,
+        onMouseLeave: initHideCard
+      }), children);
+    }
+  });
 };
 
 exports.HoverCard = HoverCard;

package/dist/cjs/view/InlineCard/IconAndTitleLayout/styled.js

@@ -33,12 +33,12 @@ exports.IconWrapper = IconWrapper;
 
 var EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides); // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
-// NB: `hyphens` enables hyphenation on word break.
+// NB: `word-break` line breaks as soon as an overflow takes place.
 
 
 exports.EmojiWrapper = EmojiWrapper;
 
-var IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  hyphens: auto;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  word-break: break-word;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
+var IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
 
 
 exports.IconTitleWrapper = IconTitleWrapper;

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

@@ -20,7 +20,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var LINK_COLOR_DARK = '#4794FF'; // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
 
-var IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: initial !important;\n  display: inline !important;\n\n  &:hover {\n    /* Remove the text-decoration to match other inline card hover states*/\n    text-decoration: none !important;\n  }\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
+var IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: initial !important;\n  display: inline !important;\n\n  &:hover {\n    /* Remove the text-decoration to match other inline card hover states */\n    text-decoration: none !important;\n  }\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
 
 exports.IconStyledButton = IconStyledButton;
 

package/dist/es2019/constants.js

@@ -109,6 +109,9 @@ export let ElementName;
   ElementName["AuthorGroup"] = "AuthorGroup";
   ElementName["CollaboratorGroup"] = "CollaboratorGroup";
   ElementName["CommentCount"] = "CommentCount";
+  ElementName["ViewCount"] = "ViewCount";
+  ElementName["ReactCount"] = "ReactCount";
+  ElementName["VoteCount"] = "VoteCount";
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
   ElementName["LinkIcon"] = "LinkIcon";
@@ -185,6 +188,9 @@ export let IconType;
   IconType["Error"] = "Default:Error";
   IconType["Forbidden"] = "Default:Forbidden";
   IconType["Comment"] = "Badge:Comment";
+  IconType["View"] = "Badge:View";
+  IconType["React"] = "Badge:React";
+  IconType["Vote"] = "Badge:Vote";
   IconType["PriorityBlocker"] = "Badge:PriorityBlocker";
   IconType["PriorityCritical"] = "Badge:PriorityCritical";
   IconType["PriorityHigh"] = "Badge:PriorityHigh";

package/dist/es2019/extractors/flexible/index.js

@@ -1,7 +1,7 @@
 import { extractLink, extractSummary, extractTitle } from '../common/primitives';
 import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
-import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount } from './utils';
+import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount } from './utils';
 import { extractPersonCreatedBy } from '../common/person';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractDateUpdated } from '../common/date/extractDateUpdated';
@@ -21,6 +21,9 @@ const extractFlexibleUiContext = (response, renderers) => {
     authorGroup: extractPersonCreatedBy(data),
     collaboratorGroup: extractPersonsUpdatedBy(data),
     commentCount: extractCommentCount(data),
+    viewCount: extractViewCount(data),
+    reactCount: extractReactCount(data),
+    voteCount: extractVoteCount(data),
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
     linkIcon: extractLinkIcon(response, renderers),

package/dist/es2019/extractors/flexible/utils.js

@@ -5,6 +5,9 @@ const extractValue = (data, key) => {
 };
 
 export const extractCommentCount = data => extractValue(data, 'schema:commentCount');
+export const extractViewCount = data => extractValue(data, 'atlassian:viewCount');
+export const extractReactCount = data => extractValue(data, 'atlassian:reactCount');
+export const extractVoteCount = data => extractValue(data, 'atlassian:voteCount');
 export const extractCreatedBy = data => {
   const persons = extractPersonCreatedBy(data);
 

package/dist/es2019/version.json

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

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -170,8 +170,6 @@ export const TextWrapper = styled.div`
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
 export const Content = styled.div`
-  position: relative;
-
   ${borderRadius}
   ${cardShadow}
   background-color: white;

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -11,6 +11,9 @@ export const ElementDisplaySchema = {
   [ElementName.AuthorGroup]: ['inline'],
   [ElementName.CollaboratorGroup]: ['inline'],
   [ElementName.CommentCount]: ['inline'],
+  [ElementName.ViewCount]: ['inline'],
+  [ElementName.ReactCount]: ['inline'],
+  [ElementName.VoteCount]: ['inline'],
   [ElementName.CreatedBy]: ['inline'],
   [ElementName.CreatedOn]: ['inline'],
   [ElementName.LinkIcon]: ['inline'],

package/dist/es2019/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -149,6 +149,15 @@ const importIconMapper = {
   [IconType.Comment]: () => import(
   /* webpackChunkName: "glyphComment" */
   '@atlaskit/icon/glyph/comment'),
+  [IconType.View]: () => import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/watch'),
+  [IconType.React]: () => import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/like'),
+  [IconType.Vote]: () => import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/arrow-up'),
   [IconType.PriorityBlocker]: () => import(
   /* webpackChunkName: "glyphBlocker" */
   '@atlaskit/icon-priority/glyph/priority-blocker'),

package/dist/es2019/view/FlexibleCard/components/elements/index.js

@@ -6,6 +6,9 @@ import { ElementName } from '../../../../constants';
 export const AuthorGroup = createElement(ElementName.AuthorGroup);
 export const CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
 export const CommentCount = createElement(ElementName.CommentCount);
+export const ViewCount = createElement(ElementName.ViewCount);
+export const ReactCount = createElement(ElementName.ReactCount);
+export const VoteCount = createElement(ElementName.VoteCount);
 export const CreatedBy = createElement(ElementName.CreatedBy);
 export const CreatedOn = createElement(ElementName.CreatedOn);
 export const LinkIcon = createElement(ElementName.LinkIcon);

package/dist/es2019/view/FlexibleCard/components/elements/utils.js

@@ -26,6 +26,24 @@ const elementMappings = {
       icon: IconType.Comment
     }
   },
+  [ElementName.ViewCount]: {
+    component: Badge,
+    props: {
+      icon: IconType.View
+    }
+  },
+  [ElementName.ReactCount]: {
+    component: Badge,
+    props: {
+      icon: IconType.React
+    }
+  },
+  [ElementName.VoteCount]: {
+    component: Badge,
+    props: {
+      icon: IconType.Vote
+    }
+  },
   [ElementName.CreatedBy]: {
     component: Text
   },
@@ -96,6 +114,9 @@ const getData = (elementName, contextKey, context) => {
       return toAvatarGroupProps(data);
 
     case ElementName.CommentCount:
+    case ElementName.ViewCount:
+    case ElementName.ReactCount:
+    case ElementName.VoteCount:
     case ElementName.ProgrammingLanguage:
     case ElementName.SubscriberCount:
       return toBadgeProps(data);

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

@@ -1,20 +1,58 @@
-import React from 'react';
-import Tooltip from '@atlaskit/tooltip';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useRef } from 'react';
 import { TitleBlock, SnippetBlock, FooterBlock } from '../FlexibleCard/components/blocks';
 import { Card } from '../Card';
-import { HoverCardContainer } from './styled';
+import Popup from '@atlaskit/popup';
+import { SmartLinkSize } from '../../constants';
 export const HoverCard = ({
   children,
   url
 }) => {
-  const cardComponent = /*#__PURE__*/React.createElement(Card, {
+  const delay = 300;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const fadeOutTimeoutId = useRef();
+  const fadeInTimeoutId = useRef();
+  const initHideCard = useCallback(() => {
+    if (fadeInTimeoutId.current) {
+      clearTimeout(fadeInTimeoutId.current);
+    }
+
+    fadeOutTimeoutId.current = setTimeout(() => {
+      setIsOpen(false);
+    }, delay);
+  }, [delay]);
+  const initShowCard = useCallback(() => {
+    if (fadeOutTimeoutId.current) {
+      clearTimeout(fadeOutTimeoutId.current);
+    }
+
+    fadeInTimeoutId.current = setTimeout(() => {
+      setIsOpen(true);
+    }, delay);
+  }, [delay]);
+
+  const cardComponent = () => /*#__PURE__*/React.createElement("span", {
+    onMouseEnter: initShowCard,
+    onMouseLeave: initHideCard
+  }, /*#__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,
+    url: url,
+    ui: {
+      hideElevation: true,
+      size: SmartLinkSize.Large
+    }
+  }, /*#__PURE__*/React.createElement(TitleBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(FooterBlock, null)));
+
+  const onClose = useCallback(() => setIsOpen(false), []);
+  return /*#__PURE__*/React.createElement(Popup, {
     testId: "hover-card",
-    tag: "span"
-  }, children);
+    isOpen: isOpen,
+    onClose: onClose,
+    placement: "bottom",
+    content: cardComponent,
+    trigger: triggerProps => /*#__PURE__*/React.createElement("span", _extends({}, triggerProps, {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard
+    }), children)
+  });
 };

package/dist/es2019/view/InlineCard/IconAndTitleLayout/styled.js

@@ -52,13 +52,11 @@ export const EmojiWrapper = styled.span`
   ${IconObjectOverrides}
 `; // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
-// NB: `hyphens` enables hyphenation on word break.
+// NB: `word-break` line breaks as soon as an overflow takes place.
 
 export const IconTitleWrapper = styled.span`
-  hyphens: auto;
   white-space: pre-wrap;
-  overflow-wrap: break-word;
-  word-break: break-word;
+  word-break: break-all;
 `; // TODO: Replace overrides with proper AtlasKit solution.
 
 export const LozengeWrapper = styled.span`

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

@@ -9,7 +9,7 @@ export const IconStyledButton = styled.span`
   display: inline !important;
 
   &:hover {
-    /* Remove the text-decoration to match other inline card hover states*/
+    /* Remove the text-decoration to match other inline card hover states */
     text-decoration: none !important;
   }
 

package/dist/esm/constants.js

@@ -109,6 +109,9 @@ export var ElementName;
   ElementName["AuthorGroup"] = "AuthorGroup";
   ElementName["CollaboratorGroup"] = "CollaboratorGroup";
   ElementName["CommentCount"] = "CommentCount";
+  ElementName["ViewCount"] = "ViewCount";
+  ElementName["ReactCount"] = "ReactCount";
+  ElementName["VoteCount"] = "VoteCount";
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
   ElementName["LinkIcon"] = "LinkIcon";
@@ -185,6 +188,9 @@ export var IconType;
   IconType["Error"] = "Default:Error";
   IconType["Forbidden"] = "Default:Forbidden";
   IconType["Comment"] = "Badge:Comment";
+  IconType["View"] = "Badge:View";
+  IconType["React"] = "Badge:React";
+  IconType["Vote"] = "Badge:Vote";
   IconType["PriorityBlocker"] = "Badge:PriorityBlocker";
   IconType["PriorityCritical"] = "Badge:PriorityCritical";
   IconType["PriorityHigh"] = "Badge:PriorityHigh";

package/dist/esm/extractors/flexible/index.js

@@ -1,7 +1,7 @@
 import { extractLink, extractSummary, extractTitle } from '../common/primitives';
 import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
-import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount } from './utils';
+import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount } from './utils';
 import { extractPersonCreatedBy } from '../common/person';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractDateUpdated } from '../common/date/extractDateUpdated';
@@ -21,6 +21,9 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     authorGroup: extractPersonCreatedBy(data),
     collaboratorGroup: extractPersonsUpdatedBy(data),
     commentCount: extractCommentCount(data),
+    viewCount: extractViewCount(data),
+    reactCount: extractReactCount(data),
+    voteCount: extractVoteCount(data),
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
     linkIcon: extractLinkIcon(response, renderers),

package/dist/esm/extractors/flexible/utils.js

@@ -7,6 +7,15 @@ var extractValue = function extractValue(data, key) {
 export var extractCommentCount = function extractCommentCount(data) {
   return extractValue(data, 'schema:commentCount');
 };
+export var extractViewCount = function extractViewCount(data) {
+  return extractValue(data, 'atlassian:viewCount');
+};
+export var extractReactCount = function extractReactCount(data) {
+  return extractValue(data, 'atlassian:reactCount');
+};
+export var extractVoteCount = function extractVoteCount(data) {
+  return extractValue(data, 'atlassian:voteCount');
+};
 export var extractCreatedBy = function extractCreatedBy(data) {
   var persons = extractPersonCreatedBy(data);
 

package/dist/esm/version.json

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

package/dist/esm/view/EmbedCard/components/styled.js

@@ -88,7 +88,7 @@ export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _tag
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", "\n  ", "\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), borderRadius, cardShadow, gridSize(4), gridSize(4), function (_ref9) {
+export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), borderRadius, cardShadow, gridSize(4), gridSize(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {

package/dist/esm/view/FlexibleCard/components/blocks/utils.js

@@ -20,7 +20,7 @@ import * as Actions from '../actions';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
 import ElementGroup from './element-group';
-export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _ElementDisplaySchema);
+export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ViewCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ReactCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.VoteCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _ElementDisplaySchema);
 
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {

package/dist/esm/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -193,6 +193,18 @@ var importIconMapper = (_importIconMapper = {}, _defineProperty(_importIconMappe
   return import(
   /* webpackChunkName: "glyphComment" */
   '@atlaskit/icon/glyph/comment');
+}), _defineProperty(_importIconMapper, IconType.View, function () {
+  return import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/watch');
+}), _defineProperty(_importIconMapper, IconType.React, function () {
+  return import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/like');
+}), _defineProperty(_importIconMapper, IconType.Vote, function () {
+  return import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/arrow-up');
 }), _defineProperty(_importIconMapper, IconType.PriorityBlocker, function () {
   return import(
   /* webpackChunkName: "glyphBlocker" */

package/dist/esm/view/FlexibleCard/components/elements/index.js

@@ -6,6 +6,9 @@ import { ElementName } from '../../../../constants';
 export var AuthorGroup = createElement(ElementName.AuthorGroup);
 export var CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
 export var CommentCount = createElement(ElementName.CommentCount);
+export var ViewCount = createElement(ElementName.ViewCount);
+export var ReactCount = createElement(ElementName.ReactCount);
+export var VoteCount = createElement(ElementName.VoteCount);
 export var CreatedBy = createElement(ElementName.CreatedBy);
 export var CreatedOn = createElement(ElementName.CreatedOn);
 export var LinkIcon = createElement(ElementName.LinkIcon);

package/dist/esm/view/FlexibleCard/components/elements/utils.js

@@ -26,6 +26,21 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   props: {
     icon: IconType.Comment
   }
+}), _defineProperty(_elementMappings, ElementName.ViewCount, {
+  component: Badge,
+  props: {
+    icon: IconType.View
+  }
+}), _defineProperty(_elementMappings, ElementName.ReactCount, {
+  component: Badge,
+  props: {
+    icon: IconType.React
+  }
+}), _defineProperty(_elementMappings, ElementName.VoteCount, {
+  component: Badge,
+  props: {
+    icon: IconType.Vote
+  }
 }), _defineProperty(_elementMappings, ElementName.CreatedBy, {
   component: Text
 }), _defineProperty(_elementMappings, ElementName.LinkIcon, {
@@ -83,6 +98,9 @@ var getData = function getData(elementName, contextKey, context) {
       return toAvatarGroupProps(data);
 
     case ElementName.CommentCount:
+    case ElementName.ViewCount:
+    case ElementName.ReactCount:
+    case ElementName.VoteCount:
     case ElementName.ProgrammingLanguage:
     case ElementName.SubscriberCount:
       return toBadgeProps(data);

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

@@ -1,19 +1,69 @@
-import React from 'react';
-import Tooltip from '@atlaskit/tooltip';
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useRef } from 'react';
 import { TitleBlock, SnippetBlock, FooterBlock } from '../FlexibleCard/components/blocks';
 import { Card } from '../Card';
-import { HoverCardContainer } from './styled';
+import Popup from '@atlaskit/popup';
+import { SmartLinkSize } from '../../constants';
 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,
+  var delay = 300;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  var fadeOutTimeoutId = useRef();
+  var fadeInTimeoutId = useRef();
+  var initHideCard = useCallback(function () {
+    if (fadeInTimeoutId.current) {
+      clearTimeout(fadeInTimeoutId.current);
+    }
+
+    fadeOutTimeoutId.current = setTimeout(function () {
+      setIsOpen(false);
+    }, delay);
+  }, [delay]);
+  var initShowCard = useCallback(function () {
+    if (fadeOutTimeoutId.current) {
+      clearTimeout(fadeOutTimeoutId.current);
+    }
+
+    fadeInTimeoutId.current = setTimeout(function () {
+      setIsOpen(true);
+    }, delay);
+  }, [delay]);
+
+  var cardComponent = function cardComponent() {
+    return /*#__PURE__*/React.createElement("span", {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard
+    }, /*#__PURE__*/React.createElement(Card, {
+      appearance: "block",
+      url: url,
+      ui: {
+        hideElevation: true,
+        size: SmartLinkSize.Large
+      }
+    }, /*#__PURE__*/React.createElement(TitleBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(FooterBlock, null)));
+  };
+
+  var onClose = useCallback(function () {
+    return setIsOpen(false);
+  }, []);
+  return /*#__PURE__*/React.createElement(Popup, {
     testId: "hover-card",
-    tag: "span"
-  }, children);
+    isOpen: isOpen,
+    onClose: onClose,
+    placement: "bottom",
+    content: cardComponent,
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/React.createElement("span", _extends({}, triggerProps, {
+        onMouseEnter: initShowCard,
+        onMouseLeave: initHideCard
+      }), children);
+    }
+  });
 };

package/dist/esm/view/InlineCard/IconAndTitleLayout/styled.js

@@ -17,9 +17,9 @@ export var IconWrapper = styled.span(_templateObject || (_templateObject = _tagg
 
 export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides); // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
-// NB: `hyphens` enables hyphenation on word break.
+// NB: `word-break` line breaks as soon as an overflow takes place.
 
-export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  hyphens: auto;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  word-break: break-word;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
+export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
 
 export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
 

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

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 var LINK_COLOR_DARK = '#4794FF'; // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
 
-export var IconStyledButton = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: initial !important;\n  display: inline !important;\n\n  &:hover {\n    /* Remove the text-decoration to match other inline card hover states*/\n    text-decoration: none !important;\n  }\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
+export var IconStyledButton = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: initial !important;\n  display: inline !important;\n\n  &:hover {\n    /* Remove the text-decoration to match other inline card hover states */\n    text-decoration: none !important;\n  }\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
 export var NoLinkAppearance = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), themed({
   light: N200,
   dark: LINK_COLOR_DARK

package/dist/types/constants.d.ts

@@ -83,6 +83,9 @@ export declare enum ElementName {
     AuthorGroup = "AuthorGroup",
     CollaboratorGroup = "CollaboratorGroup",
     CommentCount = "CommentCount",
+    ViewCount = "ViewCount",
+    ReactCount = "ReactCount",
+    VoteCount = "VoteCount",
     CreatedBy = "CreatedBy",
     CreatedOn = "CreatedOn",
     LinkIcon = "LinkIcon",
@@ -153,6 +156,9 @@ export declare enum IconType {
     Error = "Default:Error",
     Forbidden = "Default:Forbidden",
     Comment = "Badge:Comment",
+    View = "Badge:View",
+    React = "Badge:React",
+    Vote = "Badge:Vote",
     PriorityBlocker = "Badge:PriorityBlocker",
     PriorityCritical = "Badge:PriorityCritical",
     PriorityHigh = "Badge:PriorityHigh",

package/dist/types/extractors/common/__mocks__/jsonld.d.ts

@@ -34,7 +34,11 @@ export declare const TEST_DOCUMENT_WITH_ACTIONS: {
     'atlassian:updatedBy'?: string | JsonLd.Primitives.LinkModel | JsonLd.Primitives.Person<any> | undefined;
     'schema:commentCount'?: number | undefined;
     'atlassian:isDeleted'?: boolean | undefined;
+    'atlassian:dateViewed'?: string | undefined;
+    'atlassian:reactCount'?: number | undefined;
     'atlassian:state'?: string | undefined;
+    'atlassian:viewCount'?: number | undefined;
+    'atlassian:voteCount'?: number | undefined;
     '@context': JsonLd.Primitives.Context;
     'atlassian:downloadUrl'?: string | undefined;
     'atlassian:visitUrl'?: string | undefined;
@@ -96,7 +100,11 @@ export declare const TEST_DOCUMENT_WITH_PREVIEW: {
     'schema:commentCount'?: number | undefined;
     'atlassian:isDeleted'?: boolean | undefined;
     'schema:potentialAction'?: import("schema-dts").DeleteAction | import("schema-dts").ViewAction | import("schema-dts").DownloadAction | import("schema-dts").WatchAction | import("schema-dts").CommentAction | import("schema-dts").ShareAction | JsonLd.Data.DocumentAction[] | undefined;
+    'atlassian:dateViewed'?: string | undefined;
+    'atlassian:reactCount'?: number | undefined;
     'atlassian:state'?: string | undefined;
+    'atlassian:viewCount'?: number | undefined;
+    'atlassian:voteCount'?: number | undefined;
     '@context': JsonLd.Primitives.Context;
     'atlassian:downloadUrl'?: string | undefined;
     'atlassian:visitUrl'?: string | undefined;

package/dist/types/extractors/flexible/utils.d.ts

@@ -1,5 +1,8 @@
 import { JsonLd } from 'json-ld-types';
 export declare const extractCommentCount: (data: JsonLd.Data.BaseData) => number | undefined;
+export declare const extractViewCount: (data: JsonLd.Data.BaseData) => number | undefined;
+export declare const extractReactCount: (data: JsonLd.Data.BaseData) => number | undefined;
+export declare const extractVoteCount: (data: JsonLd.Data.BaseData) => number | undefined;
 export declare const extractCreatedBy: (data: JsonLd.Data.BaseData) => string | undefined;
 export declare const extractModifiedBy: (data: JsonLd.Data.BaseData) => string | undefined;
 export declare const extractProgrammingLanguage: (data: JsonLd.Data.BaseData) => string | undefined;

package/dist/types/state/flexible-ui-context/types.d.ts

@@ -5,6 +5,9 @@ export declare type FlexibleUiDataContext = {
     authorGroup?: LinkPerson[];
     collaboratorGroup?: LinkPerson[];
     commentCount?: number;
+    viewCount?: number;
+    reactCount?: number;
+    voteCount?: number;
     createdBy?: string;
     createdOn?: string;
     linkIcon?: Icon;

package/dist/types/view/FlexibleCard/components/elements/index.d.ts

@@ -10,6 +10,9 @@ import { MediaProps } from './media/types';
 export declare const AuthorGroup: import("react").FC<AvatarGroupProps>;
 export declare const CollaboratorGroup: import("react").FC<AvatarGroupProps>;
 export declare const CommentCount: import("react").FC<BadgeProps>;
+export declare const ViewCount: import("react").FC<BadgeProps>;
+export declare const ReactCount: import("react").FC<BadgeProps>;
+export declare const VoteCount: import("react").FC<BadgeProps>;
 export declare const CreatedBy: import("react").FC<TextProps>;
 export declare const CreatedOn: import("react").FC<DateTimeProps>;
 export declare const LinkIcon: import("react").FC<IconProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.7.11",
+  "version": "18.0.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,12 +36,13 @@
     "@atlaskit/logo": "^13.5.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-common": "^2.11.0",
-    "@atlaskit/media-ui": "^20.1.0",
+    "@atlaskit/media-ui": "^21.0.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/outbound-auth-flow-client": "^3.3.0",
+    "@atlaskit/popup": "^1.3.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.7.0",
+    "@atlaskit/tokens": "^0.8.0",
     "@atlaskit/tooltip": "^17.5.2",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -51,7 +52,7 @@
     "async-retry": "^1.2.3",
     "dataloader": "^2.0.0",
     "facepaint": "^1.2.1",
-    "json-ld-types": "2.4.0",
+    "json-ld-types": "2.4.1",
     "p-throttle": "^4.1.1",
     "react-error-boundary": "^3.1.3",
     "react-lazily-render": "^1.2.0",
@@ -76,7 +77,7 @@
     "@atlaskit/inline-message": "^11.2.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-integration-test-helpers": "^2.5.0",
-    "@atlaskit/media-test-helpers": "^29.2.0",
+    "@atlaskit/media-test-helpers": "^29.3.0",
     "@atlaskit/page": "^12.1.0",
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/range": "^6.0.0",