@atlaskit/smart-card 19.1.2 → 19.1.5

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 19.1.5
+
+### Patch Changes
+
+- [`db78a813922`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db78a813922) - Add error handling to smart-card ssr component
+
+## 19.1.4
+
+### Patch Changes
+
+- [`cd2e7183aa5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd2e7183aa5) - Flexible UI: Fix action tooltips not displayed on hover
+
+## 19.1.3
+
+### Patch Changes
+
+- [`3de372f6670`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3de372f6670) - Hover Previews: use black flex-ui theme
+
 ## 19.1.2
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -68,6 +68,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Updated on {context}',
     description: 'Indicated when entity was modified (absolute form)'
   },
+  more_actions: {
+    id: 'fabric.linking.more_actions',
+    defaultMessage: 'More actions',
+    description: 'Allows the users to see more link actions'
+  },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',
     defaultMessage: 'Blocker',

package/dist/cjs/ssr.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardSSR = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -17,12 +17,20 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _uuid = _interopRequireDefault(require("uuid"));
 
+var _reactErrorBoundary = require("react-error-boundary");
+
 var _component = require("./view/CardWithUrl/component");
 
+var _LazyFallback = require("./view/CardWithUrl/component-lazy/LazyFallback");
+
 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; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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; }
+
 // SSR friendly version of smart-card
 // simplifies the logic around rendering and loading placeholders and
 // only contains whats necessary to render the card on SSR mode
@@ -36,10 +44,16 @@ var CardSSR = function CardSSR(props) {
   var dispatchAnalytics = function dispatchAnalytics() {}; // we can't dispatch events on SSR, after hydration the we will provide the real callback
 
 
-  return /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, (0, _extends2.default)({}, props, {
+  var cardProps = _objectSpread(_objectSpread({}, props), {}, {
     id: id,
     dispatchAnalytics: dispatchAnalytics
-  }));
+  });
+
+  return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
+    FallbackComponent: function FallbackComponent() {
+      return /*#__PURE__*/_react.default.createElement(_LazyFallback.LoadingCardLink, cardProps);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, cardProps));
 };
 
 exports.CardSSR = CardSSR;

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/actions/action/index.js

@@ -126,7 +126,8 @@ var Action = function Action(_ref2) {
     }, content);
   } else {
     return (0, _core.jsx)(_tooltip.default, {
-      content: tooltipMessage
+      content: tooltipMessage,
+      testId: "".concat(testId, "-tooltip")
     }, (0, _core.jsx)("div", {
       css: [getButtonStyle(size, iconOnly), overrideCss],
       "data-testid": "".concat(testId, "-button-wrapper")

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

@@ -50,7 +50,7 @@ var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actio
     icon: /*#__PURE__*/_react.default.createElement(_cross.default, {
       label: "Delete"
     }),
-    toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete)
+    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete)
   }
 }), (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.EditAction, {
   component: _action.default,
@@ -60,7 +60,7 @@ var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actio
     icon: /*#__PURE__*/_react.default.createElement(_edit.default, {
       label: "Edit"
     }),
-    toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit)
+    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit)
   }
 }), _actionMappings);
 

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

@@ -13,10 +13,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _core = require("@emotion/core");
 
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
 var _utils = require("../utils");
 
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
@@ -31,6 +35,8 @@ var _action = require("../../actions/action");
 
 var _token = require("../../../../../utils/token");
 
+var _messages = require("../../../../../messages");
+
 var _excluded = ["triggerRef"];
 
 var _templateObject;
@@ -52,7 +58,8 @@ var ActionGroup = function ActionGroup(_ref) {
       appearance = _ref.appearance,
       _ref$visibleButtonsNu = _ref.visibleButtonsNum,
       visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
-      onDropdownOpenChange = _ref.onDropdownOpenChange;
+      onDropdownOpenChange = _ref.onDropdownOpenChange,
+      testId = _ref.testId;
   var isMoreThenTwoItems = items.length > visibleButtonsNum;
   var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
   var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
@@ -67,14 +74,18 @@ var ActionGroup = function ActionGroup(_ref) {
     trigger: function trigger(_ref3) {
       var triggerRef = _ref3.triggerRef,
           props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-      return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
+      return (0, _core.jsx)(_tooltip.default, {
+        content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.more_actions),
+        testId: "action-group-more-button-tooltip",
+        tag: "span"
+      }, (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
         spacing: _action.sizeToSpacing[size],
         testId: "action-group-more-button",
         iconBefore: (0, _core.jsx)(_more.default, {
           label: "more"
         }),
         ref: triggerRef
-      }));
+      })));
     }
   }, (0, _utils.renderActionItems)(restActions, size, appearance, true)) : null));
 };

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

@@ -157,7 +157,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       url: url,
       ui: {
         hideElevation: true,
-        size: _constants.SmartLinkSize.Large
+        size: _constants.SmartLinkSize.Large,
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+        theme: _constants.SmartLinkTheme.Black
       },
       onResolve: update
     }, (0, _core.jsx)(_blocks.TitleBlock, {

package/dist/es2019/messages.js

@@ -60,6 +60,11 @@ export const messages = defineMessages({
     defaultMessage: 'Updated on {context}',
     description: 'Indicated when entity was modified (absolute form)'
   },
+  more_actions: {
+    id: 'fabric.linking.more_actions',
+    defaultMessage: 'More actions',
+    description: 'Allows the users to see more link actions'
+  },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',
     defaultMessage: 'Blocker',

package/dist/es2019/ssr.js

@@ -1,8 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useState } from 'react';
 import uuid from 'uuid';
+import { ErrorBoundary } from 'react-error-boundary';
 import { CardWithUrlContent } from './view/CardWithUrl/component';
+import { LoadingCardLink } from './view/CardWithUrl/component-lazy/LazyFallback';
 // SSR friendly version of smart-card
 // simplifies the logic around rendering and loading placeholders and
 // only contains whats necessary to render the card on SSR mode
@@ -12,8 +13,11 @@ export const CardSSR = props => {
   const dispatchAnalytics = () => {}; // we can't dispatch events on SSR, after hydration the we will provide the real callback
 
 
-  return /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
-    id: id,
-    dispatchAnalytics: dispatchAnalytics
-  }));
+  const cardProps = { ...props,
+    id,
+    dispatchAnalytics
+  };
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    FallbackComponent: () => /*#__PURE__*/React.createElement(LoadingCardLink, cardProps)
+  }, /*#__PURE__*/React.createElement(CardWithUrlContent, cardProps));
 };

package/dist/es2019/version.json

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

package/dist/es2019/view/FlexibleCard/components/actions/action/index.js

@@ -129,7 +129,8 @@ const Action = ({
     }, content);
   } else {
     return jsx(Tooltip, {
-      content: tooltipMessage
+      content: tooltipMessage,
+      testId: `${testId}-tooltip`
     }, jsx("div", {
       css: [getButtonStyle(size, iconOnly), overrideCss],
       "data-testid": `${testId}-button-wrapper`

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

@@ -20,7 +20,7 @@ const actionMappings = {
       icon: /*#__PURE__*/React.createElement(CrossIcon, {
         label: "Delete"
       }),
-      toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
+      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
     }
   },
   [ActionName.EditAction]: {
@@ -31,7 +31,7 @@ const actionMappings = {
       icon: /*#__PURE__*/React.createElement(EditIcon, {
         label: "Edit"
       }),
-      toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
+      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
     }
   }
 };

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

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
+import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
+import Tooltip from '@atlaskit/tooltip';
 import { renderActionItems } from '../utils';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { SmartLinkSize } from '../../../../../constants';
@@ -10,6 +12,7 @@ import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToSpacing } from '../../actions/action';
 import { tokens } from '../../../../../utils/token';
+import { messages } from '../../../../../messages';
 const styles = css`
   display: inline-flex;
   line-height: 1rem;
@@ -39,7 +42,8 @@ const ActionGroup = ({
   size = SmartLinkSize.Medium,
   appearance,
   visibleButtonsNum = 2,
-  onDropdownOpenChange
+  onDropdownOpenChange,
+  testId
 }) => {
   const isMoreThenTwoItems = items.length > visibleButtonsNum;
   const firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
@@ -54,14 +58,18 @@ const ActionGroup = ({
     trigger: ({
       triggerRef,
       ...props
-    }) => jsx(Button, _extends({}, props, {
+    }) => jsx(Tooltip, {
+      content: jsx(FormattedMessage, messages.more_actions),
+      testId: "action-group-more-button-tooltip",
+      tag: "span"
+    }, jsx(Button, _extends({}, props, {
       spacing: sizeToSpacing[size],
       testId: "action-group-more-button",
       iconBefore: jsx(MoreIcon, {
         label: "more"
       }),
       ref: triggerRef
-    }))
+    })))
   }, renderActionItems(restActions, size, appearance, true)) : null));
 };
 

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

@@ -6,7 +6,7 @@ import React, { useCallback, useRef, useMemo } from 'react';
 import { TitleBlock, SnippetBlock, FooterBlock, MetadataBlock, PreviewBlock } from '../FlexibleCard/components/blocks';
 import { Card } from '../Card';
 import Popup from '@atlaskit/popup';
-import { SmartLinkSize, ActionName } from '../../constants';
+import { SmartLinkSize, ActionName, SmartLinkTheme } from '../../constants';
 import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
 import { HoverCardContainer } from './styled';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
@@ -110,7 +110,9 @@ export const HoverCardComponent = ({
       url: url,
       ui: {
         hideElevation: true,
-        size: SmartLinkSize.Large
+        size: SmartLinkSize.Large,
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+        theme: SmartLinkTheme.Black
       },
       onResolve: update
     }, jsx(TitleBlock, {

package/dist/esm/messages.js

@@ -60,6 +60,11 @@ export var messages = defineMessages({
     defaultMessage: 'Updated on {context}',
     description: 'Indicated when entity was modified (absolute form)'
   },
+  more_actions: {
+    id: 'fabric.linking.more_actions',
+    defaultMessage: 'More actions',
+    description: 'Allows the users to see more link actions'
+  },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',
     defaultMessage: 'Blocker',

package/dist/esm/ssr.js

@@ -1,9 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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) { _defineProperty(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; }
+
 import React from 'react';
 import { useState } from 'react';
 import uuid from 'uuid';
+import { ErrorBoundary } from 'react-error-boundary';
 import { CardWithUrlContent } from './view/CardWithUrl/component';
+import { LoadingCardLink } from './view/CardWithUrl/component-lazy/LazyFallback';
 // SSR friendly version of smart-card
 // simplifies the logic around rendering and loading placeholders and
 // only contains whats necessary to render the card on SSR mode
@@ -17,8 +24,14 @@ export var CardSSR = function CardSSR(props) {
   var dispatchAnalytics = function dispatchAnalytics() {}; // we can't dispatch events on SSR, after hydration the we will provide the real callback
 
 
-  return /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
+  var cardProps = _objectSpread(_objectSpread({}, props), {}, {
     id: id,
     dispatchAnalytics: dispatchAnalytics
-  }));
+  });
+
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    FallbackComponent: function FallbackComponent() {
+      return /*#__PURE__*/React.createElement(LoadingCardLink, cardProps);
+    }
+  }, /*#__PURE__*/React.createElement(CardWithUrlContent, cardProps));
 };

package/dist/esm/version.json

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

package/dist/esm/view/FlexibleCard/components/actions/action/index.js

@@ -107,7 +107,8 @@ var Action = function Action(_ref2) {
     }, content);
   } else {
     return jsx(Tooltip, {
-      content: tooltipMessage
+      content: tooltipMessage,
+      testId: "".concat(testId, "-tooltip")
     }, jsx("div", {
       css: [getButtonStyle(size, iconOnly), overrideCss],
       "data-testid": "".concat(testId, "-button-wrapper")

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

@@ -26,7 +26,7 @@ var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, Act
     icon: /*#__PURE__*/React.createElement(CrossIcon, {
       label: "Delete"
     }),
-    toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
   }
 }), _defineProperty(_actionMappings, ActionName.EditAction, {
   component: Action,
@@ -36,7 +36,7 @@ var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, Act
     icon: /*#__PURE__*/React.createElement(EditIcon, {
       label: "Edit"
     }),
-    toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
   }
 }), _actionMappings);
 

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

@@ -6,8 +6,10 @@ var _excluded = ["triggerRef"];
 var _templateObject;
 
 /** @jsx jsx */
+import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
+import Tooltip from '@atlaskit/tooltip';
 import { renderActionItems } from '../utils';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { SmartLinkSize } from '../../../../../constants';
@@ -15,6 +17,7 @@ import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToSpacing } from '../../actions/action';
 import { tokens } from '../../../../../utils/token';
+import { messages } from '../../../../../messages';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), tokens.focus);
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
@@ -32,7 +35,8 @@ var ActionGroup = function ActionGroup(_ref) {
       appearance = _ref.appearance,
       _ref$visibleButtonsNu = _ref.visibleButtonsNum,
       visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
-      onDropdownOpenChange = _ref.onDropdownOpenChange;
+      onDropdownOpenChange = _ref.onDropdownOpenChange,
+      testId = _ref.testId;
   var isMoreThenTwoItems = items.length > visibleButtonsNum;
   var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
   var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
@@ -48,14 +52,18 @@ var ActionGroup = function ActionGroup(_ref) {
       var triggerRef = _ref3.triggerRef,
           props = _objectWithoutProperties(_ref3, _excluded);
 
-      return jsx(Button, _extends({}, props, {
+      return jsx(Tooltip, {
+        content: jsx(FormattedMessage, messages.more_actions),
+        testId: "action-group-more-button-tooltip",
+        tag: "span"
+      }, jsx(Button, _extends({}, props, {
         spacing: sizeToSpacing[size],
         testId: "action-group-more-button",
         iconBefore: jsx(MoreIcon, {
           label: "more"
         }),
         ref: triggerRef
-      }));
+      })));
     }
   }, renderActionItems(restActions, size, appearance, true)) : null));
 };

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

@@ -7,7 +7,7 @@ import React, { useCallback, useRef, useMemo } from 'react';
 import { TitleBlock, SnippetBlock, FooterBlock, MetadataBlock, PreviewBlock } from '../FlexibleCard/components/blocks';
 import { Card } from '../Card';
 import Popup from '@atlaskit/popup';
-import { SmartLinkSize, ActionName } from '../../constants';
+import { SmartLinkSize, ActionName, SmartLinkTheme } from '../../constants';
 import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
 import { HoverCardContainer } from './styled';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
@@ -124,7 +124,9 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       url: url,
       ui: {
         hideElevation: true,
-        size: SmartLinkSize.Large
+        size: SmartLinkSize.Large,
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+        theme: SmartLinkTheme.Black
       },
       onResolve: update
     }, jsx(TitleBlock, {

package/dist/types/messages.d.ts

@@ -1,5 +1,5 @@
 import { MessageDescriptor } from 'react-intl-next';
-export declare type MessageKey = 'cannot_find_link' | 'click_to_join' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access' | 'request_denied';
+export declare type MessageKey = 'cannot_find_link' | 'click_to_join' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access' | 'request_denied';
 declare type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/package.json

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