@atlaskit/smart-card 17.5.1 → 17.6.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 17.6.0
+
+### Minor Changes
+
+- [`0cab291e19e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0cab291e19e) - Add "more" and dopdown for actions when there is more then 2
+
+## 17.5.3
+
+### Patch Changes
+
+- [`e68f0f554fa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e68f0f554fa) - remove mousedown handler for inline links and add a vr test for the logic
+
+## 17.5.2
+
+### Patch Changes
+
+- [`0fb7e85e70a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0fb7e85e70a) - Flexible UI: Add PreviewBlock
+
 ## 17.5.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -53,12 +53,24 @@ Object.defineProperty(exports, "EmbedResizeMessageListener", {
     return _EmbedResizeMessageListener.EmbedResizeMessageListener;
   }
 });
+Object.defineProperty(exports, "FooterBlock", {
+  enumerable: true,
+  get: function get() {
+    return _blocks.FooterBlock;
+  }
+});
 Object.defineProperty(exports, "MetadataBlock", {
   enumerable: true,
   get: function get() {
     return _blocks.MetadataBlock;
   }
 });
+Object.defineProperty(exports, "PreviewBlock", {
+  enumerable: true,
+  get: function get() {
+    return _blocks.PreviewBlock;
+  }
+});
 Object.defineProperty(exports, "Provider", {
   enumerable: true,
   get: function get() {

package/dist/cjs/version.json

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

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.sizeToSpacing = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -21,6 +21,8 @@ var _constants = require("../../../../../constants");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
+var _dropdownMenu = require("@atlaskit/dropdown-menu");
+
 var _utils = require("../../utils");
 
 var _token = require("../../../../../utils/token");
@@ -61,6 +63,7 @@ var ActionIcon = function ActionIcon(_ref) {
 };
 
 var sizeToSpacing = (_sizeToSpacing = {}, (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Small, 'none'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Medium, 'compact'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Large, 'compact'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.XLarge, 'default'), _sizeToSpacing);
+exports.sizeToSpacing = sizeToSpacing;
 
 var Action = function Action(_ref2) {
   var _ref2$appearance = _ref2.appearance,
@@ -74,7 +77,8 @@ var Action = function Action(_ref2) {
       icon = _ref2.icon,
       _ref2$iconPosition = _ref2.iconPosition,
       iconPosition = _ref2$iconPosition === void 0 ? 'before' : _ref2$iconPosition,
-      tooltipMessage = _ref2.tooltipMessage;
+      tooltipMessage = _ref2.tooltipMessage,
+      asDropDownItem = _ref2.asDropDownItem;
 
   if (!onClick) {
     return null;
@@ -91,18 +95,28 @@ var Action = function Action(_ref2) {
     icon: icon
   }) : undefined;
   var iconOnly = !content;
-  return (0, _core.jsx)(_tooltip.default, {
-    content: tooltipMessage
-  }, (0, _core.jsx)("div", {
-    css: getButtonStyle(size, iconOnly)
-  }, (0, _core.jsx)(_customThemeButton.default, {
-    spacing: sizeToSpacing[size],
-    appearance: appearance,
-    testId: testId,
-    onClick: (0, _utils2.handleOnClick)(onClick),
-    iconBefore: iconBefore,
-    iconAfter: iconAfter
-  }, content)));
+
+  if (asDropDownItem) {
+    return (0, _core.jsx)(_dropdownMenu.DropdownItem, {
+      elemBefore: iconBefore,
+      elemAfter: iconAfter,
+      testId: testId,
+      onClick: (0, _utils2.handleOnClick)(onClick)
+    }, content);
+  } else {
+    return (0, _core.jsx)(_tooltip.default, {
+      content: tooltipMessage
+    }, (0, _core.jsx)("div", {
+      css: getButtonStyle(size, iconOnly)
+    }, (0, _core.jsx)(_customThemeButton.default, {
+      spacing: sizeToSpacing[size],
+      appearance: appearance,
+      testId: testId,
+      onClick: (0, _utils2.handleOnClick)(onClick),
+      iconBefore: iconBefore,
+      iconAfter: iconAfter
+    }, content)));
+  }
 };
 
 var _default = Action;

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

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _core = require("@emotion/core");
@@ -15,8 +19,18 @@ var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group
 
 var _utils = require("../utils");
 
+var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
+
 var _constants = require("../../../../../constants");
 
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+
+var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/more"));
+
+var _action = require("../../actions/action");
+
+var _excluded = ["triggerRef"];
+
 var _templateObject;
 
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 1rem;\n"])));
@@ -27,11 +41,25 @@ var ActionGroup = function ActionGroup(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
       appearance = _ref.appearance;
-  // Currently we only have delete action available, this prevents others from adding more delete actions
-  var actionsToRender = items.slice(0, 1);
+  var isMoreThenTwoItems = items.length > 2;
+  var firstActions = isMoreThenTwoItems ? items.slice(0, 1) : items;
+  var restActions = isMoreThenTwoItems ? items.slice(1) : [];
   return (0, _core.jsx)("div", {
     css: styles
-  }, (0, _core.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(actionsToRender, size, appearance)));
+  }, (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);
+      return (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));
 };
 
 var _default = ActionGroup;

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

@@ -17,6 +17,12 @@ Object.defineProperty(exports, "MetadataBlock", {
     return _metadataBlock.default;
   }
 });
+Object.defineProperty(exports, "PreviewBlock", {
+  enumerable: true,
+  get: function get() {
+    return _previewBlock.default;
+  }
+});
 Object.defineProperty(exports, "SnippetBlock", {
   enumerable: true,
   get: function get() {
@@ -34,6 +40,8 @@ var _footerBlock = _interopRequireDefault(require("./footer-block"));
 
 var _metadataBlock = _interopRequireDefault(require("./metadata-block"));
 
+var _previewBlock = _interopRequireDefault(require("./preview-block"));
+
 var _snippetBlock = _interopRequireDefault(require("./snippet-block"));
 
 var _titleBlock = _interopRequireDefault(require("./title-block"));

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _constants = require("../../../../../constants");
+
+var _block = _interopRequireDefault(require("../block"));
+
+var _elements = require("../../elements");
+
+var _excluded = ["status", "testId"];
+
+var PreviewBlock = function PreviewBlock(_ref) {
+  var _ref$status = _ref.status,
+      status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
+      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  if (status !== _constants.SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/_react.default.createElement(_elements.Preview, null));
+};
+
+var _default = PreviewBlock;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/types.js

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

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

@@ -153,6 +153,7 @@ var renderActionItems = function renderActionItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.SmartLinkSize.Medium;
   var appearance = arguments.length > 2 ? arguments[2] : undefined;
+  var asDropDownItems = arguments.length > 3 ? arguments[3] : undefined;
   var actions = items.reduce(function (acc, curr, idx) {
     var name = curr.name,
         hideContent = curr.hideContent,
@@ -163,7 +164,7 @@ var renderActionItems = function renderActionItems() {
 
     var actionProps = _objectSpread({}, props);
 
-    if (hideContent) {
+    if (hideContent && !asDropDownItems) {
       actionProps.content = '';
     }
 
@@ -173,6 +174,7 @@ var renderActionItems = function renderActionItems() {
 
     if (Action) {
       return [].concat((0, _toConsumableArray2.default)(acc), [/*#__PURE__*/_react.default.createElement(Action, (0, _extends2.default)({
+        asDropDownItem: asDropDownItems,
         size: size,
         key: idx,
         appearance: appearance,

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

@@ -43,11 +43,7 @@ var Frame = function Frame(props) {
       event.stopPropagation();
       onClick(event);
     }
-  }, [onClick]); // prevent default on mousedown to avoid inline card losing focus
-
-  var handleMouseDown = (0, _react.useCallback)(function (e) {
-    e.preventDefault();
-  }, []);
+  }, [onClick]);
   var isInteractive = Boolean(onClick); // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
   //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
 
@@ -61,7 +57,6 @@ var Frame = function Frame(props) {
     tabIndex: isInteractive ? 0 : undefined,
     role: isInteractive ? 'button' : undefined,
     onClick: handleClick,
-    onMouseDown: handleMouseDown,
     onKeyPress: handleKeyPress,
     "data-testid": testId,
     className: className

package/dist/es2019/index.js

@@ -13,4 +13,4 @@ export { contentFooterClassName, metadataListClassName, blockCardResolvingViewCl
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
 
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
-export { MetadataBlock, SnippetBlock, TitleBlock } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock, FooterBlock } from './view/FlexibleCard/components/blocks';

package/dist/es2019/version.json

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

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

@@ -4,6 +4,7 @@ import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/custom-theme-button';
 import { SmartLinkSize } from '../../../../../constants';
 import Tooltip from '@atlaskit/tooltip';
+import { DropdownItem } from '@atlaskit/dropdown-menu';
 import { getIconSizeStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 import { handleOnClick } from '../../../../../utils';
@@ -53,7 +54,7 @@ const ActionIcon = ({
   "data-testid": `${testId}-icon`
 }, icon);
 
-const sizeToSpacing = {
+export const sizeToSpacing = {
   [SmartLinkSize.Small]: 'none',
   [SmartLinkSize.Medium]: 'compact',
   [SmartLinkSize.Large]: 'compact',
@@ -68,7 +69,8 @@ const Action = ({
   testId = 'smart-action',
   icon,
   iconPosition = 'before',
-  tooltipMessage
+  tooltipMessage,
+  asDropDownItem
 }) => {
   if (!onClick) {
     return null;
@@ -85,18 +87,28 @@ const Action = ({
     icon: icon
   }) : undefined;
   const iconOnly = !content;
-  return jsx(Tooltip, {
-    content: tooltipMessage
-  }, jsx("div", {
-    css: getButtonStyle(size, iconOnly)
-  }, jsx(Button, {
-    spacing: sizeToSpacing[size],
-    appearance: appearance,
-    testId: testId,
-    onClick: handleOnClick(onClick),
-    iconBefore: iconBefore,
-    iconAfter: iconAfter
-  }, content)));
+
+  if (asDropDownItem) {
+    return jsx(DropdownItem, {
+      elemBefore: iconBefore,
+      elemAfter: iconAfter,
+      testId: testId,
+      onClick: handleOnClick(onClick)
+    }, content);
+  } else {
+    return jsx(Tooltip, {
+      content: tooltipMessage
+    }, jsx("div", {
+      css: getButtonStyle(size, iconOnly)
+    }, jsx(Button, {
+      spacing: sizeToSpacing[size],
+      appearance: appearance,
+      testId: testId,
+      onClick: handleOnClick(onClick),
+      iconBefore: iconBefore,
+      iconAfter: iconAfter
+    }, content)));
+  }
 };
 
 export default Action;

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

@@ -1,8 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { renderActionItems } from '../utils';
+import DropdownMenu from '@atlaskit/dropdown-menu';
 import { SmartLinkSize } from '../../../../../constants';
+import Button from '@atlaskit/button/standard-button';
+import MoreIcon from '@atlaskit/icon/glyph/more';
+import { sizeToSpacing } from '../../actions/action';
 const styles = css`
   display: inline-flex;
   line-height: 1rem;
@@ -13,11 +19,24 @@ const ActionGroup = ({
   size = SmartLinkSize.Medium,
   appearance
 }) => {
-  // Currently we only have delete action available, this prevents others from adding more delete actions
-  const actionsToRender = items.slice(0, 1);
+  const isMoreThenTwoItems = items.length > 2;
+  const firstActions = isMoreThenTwoItems ? items.slice(0, 1) : items;
+  const restActions = isMoreThenTwoItems ? items.slice(1) : [];
   return jsx("div", {
     css: styles
-  }, jsx(ButtonGroup, null, renderActionItems(actionsToRender, size, appearance)));
+  }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
+    trigger: ({
+      triggerRef,
+      ...props
+    }) => 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));
 };
 
 export default ActionGroup;

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

@@ -1,4 +1,5 @@
 export { default as FooterBlock } from './footer-block';
 export { default as MetadataBlock } from './metadata-block';
+export { default as PreviewBlock } from './preview-block';
 export { default as SnippetBlock } from './snippet-block';
 export { default as TitleBlock } from './title-block';

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

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { SmartLinkStatus } from '../../../../../constants';
+import Block from '../block';
+import { Preview } from '../../elements';
+
+const PreviewBlock = ({
+  status = SmartLinkStatus.Fallback,
+  testId = 'smart-block-preview',
+  ...blockProps
+}) => {
+  if (status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: `${testId}-resolved-view`
+  }), /*#__PURE__*/React.createElement(Preview, null));
+};
+
+export default PreviewBlock;

package/dist/es2019/view/FlexibleCard/components/blocks/preview-block/types.js

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

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

@@ -130,7 +130,7 @@ export const renderElementItems = (items = [], display = 'inline') => {
     return elements;
   }
 };
-export const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance) => {
+export const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance, asDropDownItems) => {
   const actions = items.reduce((acc, curr, idx) => {
     const {
       name,
@@ -143,7 +143,7 @@ export const renderActionItems = (items = [], size = SmartLinkSize.Medium, appea
     const actionProps = { ...props
     };
 
-    if (hideContent) {
+    if (hideContent && !asDropDownItems) {
       actionProps.content = '';
     }
 
@@ -153,6 +153,7 @@ export const renderActionItems = (items = [], size = SmartLinkSize.Medium, appea
 
     if (Action) {
       return [...acc, /*#__PURE__*/React.createElement(Action, _extends({
+        asDropDownItem: asDropDownItems,
         size: size,
         key: idx,
         appearance: appearance,

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

@@ -29,11 +29,7 @@ export const Frame = props => {
       event.stopPropagation();
       onClick(event);
     }
-  }, [onClick]); // prevent default on mousedown to avoid inline card losing focus
-
-  const handleMouseDown = useCallback(e => {
-    e.preventDefault();
-  }, []);
+  }, [onClick]);
   const isInteractive = Boolean(onClick); // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
   //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
 
@@ -47,7 +43,6 @@ export const Frame = props => {
     tabIndex: isInteractive ? 0 : undefined,
     role: isInteractive ? 'button' : undefined,
     onClick: handleClick,
-    onMouseDown: handleMouseDown,
     onKeyPress: handleKeyPress,
     "data-testid": testId,
     className: className

package/dist/esm/index.js

@@ -13,4 +13,4 @@ export { contentFooterClassName, metadataListClassName, blockCardResolvingViewCl
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
 
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
-export { MetadataBlock, SnippetBlock, TitleBlock } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock, FooterBlock } from './view/FlexibleCard/components/blocks';

package/dist/esm/version.json

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

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

@@ -9,6 +9,7 @@ import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/custom-theme-button';
 import { SmartLinkSize } from '../../../../../constants';
 import Tooltip from '@atlaskit/tooltip';
+import { DropdownItem } from '@atlaskit/dropdown-menu';
 import { getIconSizeStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 import { handleOnClick } from '../../../../../utils';
@@ -44,7 +45,7 @@ var ActionIcon = function ActionIcon(_ref) {
   }, icon);
 };
 
-var sizeToSpacing = (_sizeToSpacing = {}, _defineProperty(_sizeToSpacing, SmartLinkSize.Small, 'none'), _defineProperty(_sizeToSpacing, SmartLinkSize.Medium, 'compact'), _defineProperty(_sizeToSpacing, SmartLinkSize.Large, 'compact'), _defineProperty(_sizeToSpacing, SmartLinkSize.XLarge, 'default'), _sizeToSpacing);
+export var sizeToSpacing = (_sizeToSpacing = {}, _defineProperty(_sizeToSpacing, SmartLinkSize.Small, 'none'), _defineProperty(_sizeToSpacing, SmartLinkSize.Medium, 'compact'), _defineProperty(_sizeToSpacing, SmartLinkSize.Large, 'compact'), _defineProperty(_sizeToSpacing, SmartLinkSize.XLarge, 'default'), _sizeToSpacing);
 
 var Action = function Action(_ref2) {
   var _ref2$appearance = _ref2.appearance,
@@ -58,7 +59,8 @@ var Action = function Action(_ref2) {
       icon = _ref2.icon,
       _ref2$iconPosition = _ref2.iconPosition,
       iconPosition = _ref2$iconPosition === void 0 ? 'before' : _ref2$iconPosition,
-      tooltipMessage = _ref2.tooltipMessage;
+      tooltipMessage = _ref2.tooltipMessage,
+      asDropDownItem = _ref2.asDropDownItem;
 
   if (!onClick) {
     return null;
@@ -75,18 +77,28 @@ var Action = function Action(_ref2) {
     icon: icon
   }) : undefined;
   var iconOnly = !content;
-  return jsx(Tooltip, {
-    content: tooltipMessage
-  }, jsx("div", {
-    css: getButtonStyle(size, iconOnly)
-  }, jsx(Button, {
-    spacing: sizeToSpacing[size],
-    appearance: appearance,
-    testId: testId,
-    onClick: handleOnClick(onClick),
-    iconBefore: iconBefore,
-    iconAfter: iconAfter
-  }, content)));
+
+  if (asDropDownItem) {
+    return jsx(DropdownItem, {
+      elemBefore: iconBefore,
+      elemAfter: iconAfter,
+      testId: testId,
+      onClick: handleOnClick(onClick)
+    }, content);
+  } else {
+    return jsx(Tooltip, {
+      content: tooltipMessage
+    }, jsx("div", {
+      css: getButtonStyle(size, iconOnly)
+    }, jsx(Button, {
+      spacing: sizeToSpacing[size],
+      appearance: appearance,
+      testId: testId,
+      onClick: handleOnClick(onClick),
+      iconBefore: iconBefore,
+      iconAfter: iconAfter
+    }, content)));
+  }
 };
 
 export default Action;

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

@@ -1,4 +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 = ["triggerRef"];
 
 var _templateObject;
 
@@ -6,7 +9,11 @@ var _templateObject;
 import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { renderActionItems } from '../utils';
+import DropdownMenu from '@atlaskit/dropdown-menu';
 import { SmartLinkSize } from '../../../../../constants';
+import Button from '@atlaskit/button/standard-button';
+import MoreIcon from '@atlaskit/icon/glyph/more';
+import { sizeToSpacing } from '../../actions/action';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 1rem;\n"])));
 
 var ActionGroup = function ActionGroup(_ref) {
@@ -15,11 +22,26 @@ var ActionGroup = function ActionGroup(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
       appearance = _ref.appearance;
-  // Currently we only have delete action available, this prevents others from adding more delete actions
-  var actionsToRender = items.slice(0, 1);
+  var isMoreThenTwoItems = items.length > 2;
+  var firstActions = isMoreThenTwoItems ? items.slice(0, 1) : items;
+  var restActions = isMoreThenTwoItems ? items.slice(1) : [];
   return jsx("div", {
     css: styles
-  }, jsx(ButtonGroup, null, renderActionItems(actionsToRender, size, appearance)));
+  }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
+    trigger: function trigger(_ref2) {
+      var triggerRef = _ref2.triggerRef,
+          props = _objectWithoutProperties(_ref2, _excluded);
+
+      return 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));
 };
 
 export default ActionGroup;

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

@@ -1,4 +1,5 @@
 export { default as FooterBlock } from './footer-block';
 export { default as MetadataBlock } from './metadata-block';
+export { default as PreviewBlock } from './preview-block';
 export { default as SnippetBlock } from './snippet-block';
 export { default as TitleBlock } from './title-block';

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["status", "testId"];
+import React from 'react';
+import { SmartLinkStatus } from '../../../../../constants';
+import Block from '../block';
+import { Preview } from '../../elements';
+
+var PreviewBlock = function PreviewBlock(_ref) {
+  var _ref$status = _ref.status,
+      status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  if (status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/React.createElement(Preview, null));
+};
+
+export default PreviewBlock;

package/dist/esm/view/FlexibleCard/components/blocks/preview-block/types.js

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

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

@@ -114,6 +114,7 @@ export var renderActionItems = function renderActionItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SmartLinkSize.Medium;
   var appearance = arguments.length > 2 ? arguments[2] : undefined;
+  var asDropDownItems = arguments.length > 3 ? arguments[3] : undefined;
   var actions = items.reduce(function (acc, curr, idx) {
     var name = curr.name,
         hideContent = curr.hideContent,
@@ -125,7 +126,7 @@ export var renderActionItems = function renderActionItems() {
 
     var actionProps = _objectSpread({}, props);
 
-    if (hideContent) {
+    if (hideContent && !asDropDownItems) {
       actionProps.content = '';
     }
 
@@ -135,6 +136,7 @@ export var renderActionItems = function renderActionItems() {
 
     if (Action) {
       return [].concat(_toConsumableArray(acc), [/*#__PURE__*/React.createElement(Action, _extends({
+        asDropDownItem: asDropDownItems,
         size: size,
         key: idx,
         appearance: appearance,

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

@@ -27,11 +27,7 @@ export var Frame = function Frame(props) {
       event.stopPropagation();
       onClick(event);
     }
-  }, [onClick]); // prevent default on mousedown to avoid inline card losing focus
-
-  var handleMouseDown = useCallback(function (e) {
-    e.preventDefault();
-  }, []);
+  }, [onClick]);
   var isInteractive = Boolean(onClick); // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
   //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
 
@@ -45,7 +41,6 @@ export var Frame = function Frame(props) {
     tabIndex: isInteractive ? 0 : undefined,
     role: isInteractive ? 'button' : undefined,
     onClick: handleClick,
-    onMouseDown: handleMouseDown,
     onKeyPress: handleKeyPress,
     "data-testid": testId,
     className: className

package/dist/types/__tests_external__/page-objects/BaseCard.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="cypress" />
-/// <reference types="jquery" />
 import { InProductTestPageObject, CypressType } from '@atlaskit/in-product-testing';
 import { CardType } from '../../state/store/types';
 import { CardAppearance } from '../../view/Card';

package/dist/types/index.d.ts

@@ -17,5 +17,5 @@ export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents';
 export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName, } from './classNames';
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, } from './constants';
-export { MetadataBlock, SnippetBlock, TitleBlock, } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock, FooterBlock, } from './view/FlexibleCard/components/blocks';
 export type { ActionItem, ElementItem, } from './view/FlexibleCard/components/blocks/types';

package/dist/types/utils/index.d.ts

@@ -8,4 +8,4 @@ export declare const isSpecialClick: (event: React.MouseEvent) => boolean;
 export declare const getIconForFileType: (fileMimeType: string) => React.ReactNode | undefined;
 export declare const getLabelForFileType: (fileMimeType: string) => React.ReactNode | undefined;
 export declare const getIframeSandboxAttribute: (isTrusted: boolean) => "allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts" | undefined;
-export declare const handleOnClick: (handler: Function) => (e: React.MouseEvent<HTMLElement>) => void;
+export declare const handleOnClick: (handler: Function) => (e: React.BaseSyntheticEvent) => void;

package/dist/types/view/FlexibleCard/components/actions/action/index.d.ts

@@ -1,5 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
+import { Spacing } from '@atlaskit/button';
+import { SmartLinkSize } from '../../../../../constants';
 import { ActionProps } from './types';
+export declare const sizeToSpacing: Record<SmartLinkSize, Spacing>;
 declare const Action: React.FC<ActionProps>;
 export default Action;

package/dist/types/view/FlexibleCard/components/actions/action/types.d.ts

@@ -10,6 +10,7 @@ export declare type ActionProps = {
     icon?: ReactChild;
     iconPosition?: 'before' | 'after';
     tooltipMessage?: React.ReactNode;
+    asDropDownItem?: boolean;
 };
 export declare type ActionIconProps = {
     size?: SmartLinkSize;

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

@@ -1,4 +1,5 @@
 export { default as FooterBlock } from './footer-block';
 export { default as MetadataBlock } from './metadata-block';
+export { default as PreviewBlock } from './preview-block';
 export { default as SnippetBlock } from './snippet-block';
 export { default as TitleBlock } from './title-block';

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PreviewBlockProps } from './types';
+declare const PreviewBlock: React.FC<PreviewBlockProps>;
+export default PreviewBlock;

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

@@ -0,0 +1,2 @@
+import { BlockProps } from '../types';
+export declare type PreviewBlockProps = BlockProps;

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

@@ -8,4 +8,4 @@ export declare const getGapSize: (size: SmartLinkSize) => number;
 export declare const getBaseStyles: (direction: SmartLinkDirection, size: SmartLinkSize) => SerializedStyles;
 export declare const renderChildren: (children: React.ReactNode, size: SmartLinkSize) => React.ReactNode;
 export declare const renderElementItems: (items?: ElementItem[], display?: ElementDisplaySchemaType) => React.ReactNode | undefined;
-export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize, appearance?: "link" | "default" | "danger" | "primary" | "subtle" | "subtle-link" | "warning" | undefined) => React.ReactNode | undefined;
+export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize, appearance?: "link" | "default" | "danger" | "primary" | "subtle" | "subtle-link" | "warning" | undefined, asDropDownItems?: boolean | undefined) => React.ReactNode | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.5.1",
+  "version": "17.6.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,6 +27,7 @@
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/avatar-group": "^8.5.5",
     "@atlaskit/button": "^16.1.4",
+    "@atlaskit/dropdown-menu": "^11.1.0",
     "@atlaskit/droplist": "^11.0.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/icon-file-type": "^6.3.0",
@@ -80,6 +81,7 @@
     "@atlaskit/media-test-helpers": "^29.1.0",
     "@atlaskit/page": "^12.1.0",
     "@atlaskit/radio": "^5.3.0",
+    "@atlaskit/range": "^6.0.0",
     "@atlaskit/section-message": "^6.1.5",
     "@atlaskit/select": "^15.2.0",
     "@atlaskit/table-tree": "^9.1.0",