@atlaskit/smart-card 17.7.7 → 17.7.10

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 17.7.10
+
+### Patch Changes
+
+- [`e04b58c623e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e04b58c623e) - Add EditAction
+
+## 17.7.9
+
+### Patch Changes
+
+- [`63d4f963f72`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63d4f963f72) - Flexible UI: Set PreviewBlock image aspect ratio to 16:9
+
+## 17.7.8
+
+### Patch Changes
+
+- [`d75ce5b847d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d75ce5b847d) - Add link click analytics to flexible ui title block component
+
 ## 17.7.7
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -156,6 +156,7 @@ exports.ActionName = ActionName;
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
+  ActionName["EditAction"] = "EditAction";
   ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (exports.ActionName = ActionName = {}));
 

package/dist/cjs/messages.js

@@ -43,6 +43,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Delete',
     description: 'Allow a user to delete a link'
   },
+  edit: {
+    id: 'fabric.linking.edit',
+    defaultMessage: 'Edit',
+    description: 'Allow a user to edit a link'
+  },
   modified_by: {
     id: 'fabric.linking.updated_by',
     defaultMessage: 'Modified by {context}',

package/dist/cjs/state/analytics/useSmartLinkAnalytics.js

@@ -20,8 +20,8 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
       authAlternateAccountEvent: function authAlternateAccountEvent(display, definitionId, extensionKey) {
         return dispatchAnalytics((0, _analytics.uiAuthAlternateAccountEvent)(display, definitionId, extensionKey));
       },
-      cardClickedEvent: function cardClickedEvent(display, definitionId, extensionKey) {
-        return dispatchAnalytics((0, _analytics.uiCardClickedEvent)(display, definitionId, extensionKey));
+      cardClickedEvent: function cardClickedEvent(display, definitionId, extensionKey, isModifierKeyPressed) {
+        return dispatchAnalytics((0, _analytics.uiCardClickedEvent)(display, definitionId, extensionKey, isModifierKeyPressed));
       },
       actionClickedEvent: function actionClickedEvent(id, extensionKey, actionType, display, invokeType) {
         (0, _ufoExperiences.startUfoExperience)('smart-link-action-invocation', id, {

package/dist/cjs/utils/analytics/analytics.js

@@ -230,7 +230,7 @@ var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(display,
 
 exports.uiAuthAlternateAccountEvent = uiAuthAlternateAccountEvent;
 
-var uiCardClickedEvent = function uiCardClickedEvent(display, definitionId, extensionKey) {
+var uiCardClickedEvent = function uiCardClickedEvent(display, definitionId, extensionKey, isModifierKeyPressed) {
   return {
     action: 'clicked',
     actionSubject: 'smartLink',
@@ -238,7 +238,8 @@ var uiCardClickedEvent = function uiCardClickedEvent(display, definitionId, exte
     attributes: _objectSpread(_objectSpread({}, context), {}, {
       definitionId: definitionId || '',
       extensionKey: extensionKey || '',
-      display: display
+      display: display,
+      isModifierKeyPressed: isModifierKeyPressed
     })
   };
 };

package/dist/cjs/version.json

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

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

@@ -104,7 +104,7 @@ var BlockCard = function BlockCard(_ref) {
       handleAuthorize = _ref.handleAuthorize,
       handleErrorRetry = _ref.handleErrorRetry,
       handleFrameClick = _ref.handleFrameClick,
-      handlePreviewAnalytics = _ref.handlePreviewAnalytics,
+      handleAnalytics = _ref.handleAnalytics,
       handleInvoke = _ref.handleInvoke,
       renderers = _ref.renderers,
       isSelected = _ref.isSelected,
@@ -115,7 +115,7 @@ var BlockCard = function BlockCard(_ref) {
   var data = details && details.data || (0, _jsonld.getEmptyJsonLd)();
   var meta = details && details.meta;
   var extractorOpts = {
-    handleAnalytics: handlePreviewAnalytics,
+    handleAnalytics: handleAnalytics,
     handleInvoke: handleInvoke,
     extensionKey: (0, _helpers.getExtensionKey)(details)
   };

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

@@ -63,7 +63,10 @@ function CardWithUrlContent(_ref) {
   var definitionId = (0, _helpers.getDefinitionId)(state.details);
   var extensionKey = (0, _helpers.getExtensionKey)(state.details);
   var resourceType = (0, _helpers.getResourceType)(state.details);
-  var services = (0, _helpers.getServices)(state.details); // Setup UI handlers.
+  var services = (0, _helpers.getServices)(state.details);
+  var isFlexibleUi = (0, _react.useMemo)(function () {
+    return (0, _flexible.isFlexibleUiCard)(children);
+  }, [children]); // Setup UI handlers.
 
   var handleClick = (0, _react.useCallback)(function (event) {
     var clickUrl = (0, _helpers.getClickUrl)(url, state.details);
@@ -71,11 +74,12 @@ function CardWithUrlContent(_ref) {
   }, [state.details, url]);
   var handleClickWrapper = (0, _react.useCallback)(function (event) {
     if (state.status === 'resolved') {
-      analytics.ui.cardClickedEvent(appearance, definitionId, extensionKey);
+      var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
+      analytics.ui.cardClickedEvent(isFlexibleUi ? 'flexible' : appearance, definitionId, extensionKey, isModifierKeyPressed);
     }
 
     onClick ? onClick(event) : handleClick(event);
-  }, [state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick]);
+  }, [state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
   var handleAuthorize = (0, _react.useCallback)(function () {
     return actions.authorize(appearance);
   }, [actions, appearance]);
@@ -109,13 +113,15 @@ function CardWithUrlContent(_ref) {
     throw error;
   }
 
-  if ((0, _flexible.isFlexibleUiCard)(children)) {
+  if (isFlexibleUi) {
     return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
       cardState: state,
       onAuthorize: services.length && handleAuthorize || undefined,
+      onClick: handleClickWrapper,
       renderers: renderers,
       ui: ui,
-      url: url
+      url: url,
+      testId: testId
     }, children);
   }
 
@@ -143,7 +149,7 @@ function CardWithUrlContent(_ref) {
         handleErrorRetry: handleRetry,
         handleInvoke: handleInvoke,
         handleFrameClick: handleClickWrapper,
-        handlePreviewAnalytics: dispatchAnalytics,
+        handleAnalytics: dispatchAnalytics,
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DeleteAction = exports.CustomAction = void 0;
+exports.EditAction = exports.DeleteAction = exports.CustomAction = void 0;
 
 var _constants = require("../../../../constants");
 
@@ -16,5 +16,7 @@ var _utils = require("./utils");
 // DataActions infer that the action depends on the data from the context.
 var DeleteAction = (0, _utils.createUIAction)(_constants.ActionName.DeleteAction);
 exports.DeleteAction = DeleteAction;
+var EditAction = (0, _utils.createUIAction)(_constants.ActionName.EditAction);
+exports.EditAction = EditAction;
 var CustomAction = (0, _utils.createUIAction)(_constants.ActionName.CustomAction);
 exports.CustomAction = CustomAction;

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

@@ -27,6 +27,8 @@ var _messages = require("../../../../messages");
 
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 
+var _edit = _interopRequireDefault(require("@atlaskit/icon/glyph/edit"));
+
 var _actionMappings;
 
 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); }
@@ -50,6 +52,16 @@ var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actio
     }),
     toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete)
   }
+}), (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.EditAction, {
+  component: _action.default,
+  props: {
+    testId: 'smart-action-edit-action',
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit),
+    icon: /*#__PURE__*/_react.default.createElement(_edit.default, {
+      label: "Edit"
+    }),
+    toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit)
+  }
 }), _actionMappings);
 
 var getContextKey = function getContextKey(name) {

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

@@ -33,7 +33,7 @@ var _utils = require("../../utils");
 
 var _actionGroup = _interopRequireDefault(require("../../action-group"));
 
-var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme", "text", "showActionOnHover"];
+var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme", "onClick", "text", "showActionOnHover"];
 
 var _templateObject;
 
@@ -54,6 +54,7 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
       actions = _ref$actions === void 0 ? [] : _ref$actions,
       testId = _ref.testId,
       theme = _ref.theme,
+      onClick = _ref.onClick,
       text = _ref.text,
       showActionOnHover = _ref.showActionOnHover,
       blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -79,7 +80,8 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
     width: _constants.SmartLinkWidth.Flexible
   }, (0, _core.jsx)(_elements.Title, (0, _extends2.default)({
     maxLines: maxLines,
-    theme: theme
+    theme: theme,
+    onClick: onClick
   }, overrideText)), subtitleElements && (0, _core.jsx)(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && (0, _core.jsx)(_elementGroup.default, {

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

@@ -63,11 +63,12 @@ var getContainerStyles = function getContainerStyles(size, hideBackground, hideE
 
 exports.getContainerStyles = getContainerStyles;
 
-var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry) {
+var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
   return _react.default.Children.map(children, function (child) {
     if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
       var blockSize = child.props.size;
       return /*#__PURE__*/_react.default.cloneElement(child, {
+        onClick: onClick,
         retry: (0, _flexible.isFlexibleUiTitleBlock)(child) ? retry : undefined,
         size: blockSize || containerSize,
         status: status,
@@ -92,12 +93,13 @@ var Container = function Container(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-links-container' : _ref$testId,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref$theme;
+      theme = _ref$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref$theme,
+      onClick = _ref.onClick;
   return (0, _core.jsx)("div", {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, renderChildren(children, size, theme, status, retry));
+  }, renderChildren(children, size, theme, status, retry, onClick));
 };
 
 var _default = Container;

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

@@ -66,7 +66,8 @@ var Link = function Link(_ref) {
       text = _ref.text,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref$theme,
-      url = _ref.url;
+      url = _ref.url,
+      onClick = _ref.onClick;
   return (0, _core.jsx)("span", {
     css: containerStyles
   }, (0, _core.jsx)(_tooltip.default, {
@@ -77,6 +78,7 @@ var Link = function Link(_ref) {
     css: getAnchorStyles(size, theme, getMaxLines(maxLines)),
     "data-smart-element-link": true,
     "data-testid": testId,
+    onClick: onClick,
     href: url
   }, text)));
 };

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

@@ -17,9 +17,17 @@ var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
 
 var _templateObject;
 
-var styles = function styles(url) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  > img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n"])));
-};
+/**
+ * Media: Image
+ * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
+ * [object-fit: cover] The replaced content is sized to maintain
+ * its aspect ratio while filling the element's entire content box.
+ * If the object's aspect ratio does not match the aspect ratio of its box,
+ * then the object will be clipped to fit.
+ * [object-position] Center alignment of the selected replaced element's
+ * contents within the element's box.
+ */
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
 
 var Media = function Media(_ref) {
   var _ref$testId = _ref.testId,
@@ -32,7 +40,7 @@ var Media = function Media(_ref) {
   }
 
   return (0, _core.jsx)("div", {
-    css: styles(url),
+    css: styles,
     "data-smart-element-media": true,
     "data-testid": testId
   }, (0, _core.jsx)(_imageIcon.default, {

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

@@ -23,7 +23,9 @@ var FlexibleCard = function FlexibleCard(_ref) {
       onAuthorize = _ref.onAuthorize,
       renderers = _ref.renderers,
       ui = _ref.ui,
-      url = _ref.url;
+      url = _ref.url,
+      onClick = _ref.onClick,
+      testId = _ref.testId;
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
@@ -31,9 +33,12 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var retry = (0, _utils.getRetryOptions)(url, status, details, onAuthorize);
   return /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiContext.Provider, {
     value: context
-  }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({}, ui, {
+  }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({
+    testId: testId
+  }, ui, {
     retry: retry,
-    status: status
+    status: status,
+    onClick: onClick
   }), children));
 };
 

package/dist/es2019/constants.js

@@ -131,6 +131,7 @@ export let ActionName;
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
+  ActionName["EditAction"] = "EditAction";
   ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (ActionName = {}));
 

package/dist/es2019/messages.js

@@ -35,6 +35,11 @@ export const messages = defineMessages({
     defaultMessage: 'Delete',
     description: 'Allow a user to delete a link'
   },
+  edit: {
+    id: 'fabric.linking.edit',
+    defaultMessage: 'Edit',
+    description: 'Allow a user to edit a link'
+  },
   modified_by: {
     id: 'fabric.linking.updated_by',
     defaultMessage: 'Modified by {context}',

package/dist/es2019/state/analytics/useSmartLinkAnalytics.js

@@ -5,7 +5,7 @@ export const useSmartLinkAnalytics = dispatchAnalytics => {
   const ui = useMemo(() => ({
     authEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiAuthEvent(display, definitionId, extensionKey)),
     authAlternateAccountEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiAuthAlternateAccountEvent(display, definitionId, extensionKey)),
-    cardClickedEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiCardClickedEvent(display, definitionId, extensionKey)),
+    cardClickedEvent: (display, definitionId, extensionKey, isModifierKeyPressed) => dispatchAnalytics(uiCardClickedEvent(display, definitionId, extensionKey, isModifierKeyPressed)),
     actionClickedEvent: (id, extensionKey, actionType, display, invokeType) => {
       startUfoExperience('smart-link-action-invocation', id, {
         actionType,

package/dist/es2019/utils/analytics/analytics.js

@@ -169,14 +169,15 @@ export const uiAuthAlternateAccountEvent = (display, definitionId, extensionKey)
     display
   }
 });
-export const uiCardClickedEvent = (display, definitionId, extensionKey) => ({
+export const uiCardClickedEvent = (display, definitionId, extensionKey, isModifierKeyPressed) => ({
   action: 'clicked',
   actionSubject: 'smartLink',
   eventType: 'ui',
   attributes: { ...context,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
-    display
+    display,
+    isModifierKeyPressed
   }
 });
 export const uiActionClickedEvent = (extensionKey, actionType, display) => ({

package/dist/es2019/version.json

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

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

@@ -25,7 +25,7 @@ export const BlockCard = ({
   handleAuthorize,
   handleErrorRetry,
   handleFrameClick,
-  handlePreviewAnalytics,
+  handleAnalytics,
   handleInvoke,
   renderers,
   isSelected,
@@ -39,7 +39,7 @@ export const BlockCard = ({
   const data = details && details.data || getEmptyJsonLd();
   const meta = details && details.meta;
   const extractorOpts = {
-    handleAnalytics: handlePreviewAnalytics,
+    handleAnalytics,
     handleInvoke,
     extensionKey: getExtensionKey(details)
   };

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useMemo } from 'react';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
 import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey } from '../../state/helpers';
@@ -38,7 +38,8 @@ export function CardWithUrlContent({
   const definitionId = getDefinitionId(state.details);
   const extensionKey = getExtensionKey(state.details);
   const resourceType = getResourceType(state.details);
-  const services = getServices(state.details); // Setup UI handlers.
+  const services = getServices(state.details);
+  let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]); // Setup UI handlers.
 
   const handleClick = useCallback(event => {
     const clickUrl = getClickUrl(url, state.details);
@@ -46,11 +47,12 @@ export function CardWithUrlContent({
   }, [state.details, url]);
   const handleClickWrapper = useCallback(event => {
     if (state.status === 'resolved') {
-      analytics.ui.cardClickedEvent(appearance, definitionId, extensionKey);
+      const isModifierKeyPressed = isSpecialEvent(event);
+      analytics.ui.cardClickedEvent(isFlexibleUi ? 'flexible' : appearance, definitionId, extensionKey, isModifierKeyPressed);
     }
 
     onClick ? onClick(event) : handleClick(event);
-  }, [state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick]);
+  }, [state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
   const handleAuthorize = useCallback(() => actions.authorize(appearance), [actions, appearance]);
   const handleRetry = useCallback(() => {
     actions.reload();
@@ -80,13 +82,15 @@ export function CardWithUrlContent({
     throw error;
   }
 
-  if (isFlexibleUiCard(children)) {
+  if (isFlexibleUi) {
     return /*#__PURE__*/React.createElement(FlexibleCard, {
       cardState: state,
       onAuthorize: services.length && handleAuthorize || undefined,
+      onClick: handleClickWrapper,
       renderers: renderers,
       ui: ui,
-      url: url
+      url: url,
+      testId: testId
     }, children);
   }
 
@@ -114,7 +118,7 @@ export function CardWithUrlContent({
         handleErrorRetry: handleRetry,
         handleInvoke: handleInvoke,
         handleFrameClick: handleClickWrapper,
-        handlePreviewAnalytics: dispatchAnalytics,
+        handleAnalytics: dispatchAnalytics,
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,

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

@@ -6,4 +6,5 @@ import { createUIAction } from './utils'; // Attention: Keep the export name and
 // DataActions infer that the action depends on the data from the context.
 
 export const DeleteAction = createUIAction(ActionName.DeleteAction);
+export const EditAction = createUIAction(ActionName.EditAction);
 export const CustomAction = createUIAction(ActionName.CustomAction);

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

@@ -6,6 +6,7 @@ import Action from './action';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../messages';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import EditIcon from '@atlaskit/icon/glyph/edit';
 const actionMappings = {
   [ActionName.CustomAction]: {
     component: Action,
@@ -21,6 +22,17 @@ const actionMappings = {
       }),
       toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
     }
+  },
+  [ActionName.EditAction]: {
+    component: Action,
+    props: {
+      testId: 'smart-action-edit-action',
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit),
+      icon: /*#__PURE__*/React.createElement(EditIcon, {
+        label: "Edit"
+      }),
+      toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
+    }
   }
 };
 

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

@@ -29,6 +29,7 @@ const TitleBlockResolvedView = ({
   actions = [],
   testId,
   theme,
+  onClick,
   text,
   showActionOnHover,
   ...blockProps
@@ -50,7 +51,8 @@ const TitleBlockResolvedView = ({
     width: SmartLinkWidth.Flexible
   }, jsx(Title, _extends({
     maxLines: maxLines,
-    theme: theme
+    theme: theme,
+    onClick: onClick
   }, overrideText)), subtitleElements && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && jsx(ElementGroup, {

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

@@ -56,12 +56,13 @@ export const getContainerStyles = (size, hideBackground, hideElevation, hidePadd
   ${hideElevation ? '' : elevationStyles}
 `;
 
-const renderChildren = (children, containerSize, containerTheme, status, retry) => React.Children.map(children, child => {
+const renderChildren = (children, containerSize, containerTheme, status, retry, onClick) => React.Children.map(children, child => {
   if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
     const {
       size: blockSize
     } = child.props;
     return /*#__PURE__*/React.cloneElement(child, {
+      onClick,
       retry: isFlexibleUiTitleBlock(child) ? retry : undefined,
       size: blockSize || containerSize,
       status,
@@ -79,11 +80,12 @@ const Container = ({
   size = SmartLinkSize.Medium,
   status,
   testId = 'smart-links-container',
-  theme = SmartLinkTheme.Link
+  theme = SmartLinkTheme.Link,
+  onClick
 }) => jsx("div", {
   css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
   "data-smart-link-container": true,
   "data-testid": testId
-}, renderChildren(children, size, theme, status, retry));
+}, renderChildren(children, size, theme, status, retry, onClick));
 
 export default Container;

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

@@ -70,7 +70,8 @@ const Link = ({
   testId = 'smart-element-link',
   text,
   theme = SmartLinkTheme.Link,
-  url
+  url,
+  onClick
 }) => jsx("span", {
   css: containerStyles
 }, jsx(Tooltip, {
@@ -81,6 +82,7 @@ const Link = ({
   css: getAnchorStyles(size, theme, getMaxLines(maxLines)),
   "data-smart-element-link": true,
   "data-testid": testId,
+  onClick: onClick,
   href: url
 }, text)));
 

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

@@ -3,13 +3,46 @@ import React from 'react';
 import { css, jsx } from '@emotion/core';
 import ImageIcon from '../../common/image-icon';
 
-const styles = url => css`
+/**
+ * Media: Image
+ * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
+ * [object-fit: cover] The replaced content is sized to maintain
+ * its aspect ratio while filling the element's entire content box.
+ * If the object's aspect ratio does not match the aspect ratio of its box,
+ * then the object will be clipped to fit.
+ * [object-position] Center alignment of the selected replaced element's
+ * contents within the element's box.
+ */
+const styles = css`
+  aspect-ratio: 16 / 9;
   display: flex;
-  justify-content: center;
   width: 100%;
+
+  // fallback
+  @supports not (aspect-ratio: auto) {
+    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)
+    height: 0;
+    position: relative;
+    overflow: hidden;
+  }
+
   > img {
-    max-width: 100%;
+    min-height: 100%;
+    min-width: 100%;
     max-height: 100%;
+    max-width: 100%;
+    object-fit: cover;
+    object-position: center center;
+
+    // fallback
+    @supports not (aspect-ratio: auto) {
+      position: absolute;
+      transform: translate(-50%, -50%);
+      left: 50%;
+      top: 50%;
+      width: auto;
+      height: auto;
+    }
   }
 `;
 
@@ -23,7 +56,7 @@ const Media = ({
   }
 
   return jsx("div", {
-    css: styles(url),
+    css: styles,
     "data-smart-element-media": true,
     "data-testid": testId
   }, jsx(ImageIcon, {

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

@@ -10,7 +10,9 @@ const FlexibleCard = ({
   onAuthorize,
   renderers,
   ui,
-  url
+  url,
+  onClick,
+  testId
 }) => {
   const {
     status: cardType,
@@ -21,9 +23,12 @@ const FlexibleCard = ({
   const retry = getRetryOptions(url, status, details, onAuthorize);
   return /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
     value: context
-  }, /*#__PURE__*/React.createElement(Container, _extends({}, ui, {
+  }, /*#__PURE__*/React.createElement(Container, _extends({
+    testId: testId
+  }, ui, {
     retry: retry,
-    status: status
+    status: status,
+    onClick: onClick
   }), children));
 };
 

package/dist/esm/constants.js

@@ -131,6 +131,7 @@ export var ActionName;
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
+  ActionName["EditAction"] = "EditAction";
   ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (ActionName = {}));
 

package/dist/esm/messages.js

@@ -35,6 +35,11 @@ export var messages = defineMessages({
     defaultMessage: 'Delete',
     description: 'Allow a user to delete a link'
   },
+  edit: {
+    id: 'fabric.linking.edit',
+    defaultMessage: 'Edit',
+    description: 'Allow a user to edit a link'
+  },
   modified_by: {
     id: 'fabric.linking.updated_by',
     defaultMessage: 'Modified by {context}',

package/dist/esm/state/analytics/useSmartLinkAnalytics.js

@@ -10,8 +10,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalyt
       authAlternateAccountEvent: function authAlternateAccountEvent(display, definitionId, extensionKey) {
         return dispatchAnalytics(uiAuthAlternateAccountEvent(display, definitionId, extensionKey));
       },
-      cardClickedEvent: function cardClickedEvent(display, definitionId, extensionKey) {
-        return dispatchAnalytics(uiCardClickedEvent(display, definitionId, extensionKey));
+      cardClickedEvent: function cardClickedEvent(display, definitionId, extensionKey, isModifierKeyPressed) {
+        return dispatchAnalytics(uiCardClickedEvent(display, definitionId, extensionKey, isModifierKeyPressed));
       },
       actionClickedEvent: function actionClickedEvent(id, extensionKey, actionType, display, invokeType) {
         startUfoExperience('smart-link-action-invocation', id, {

package/dist/esm/utils/analytics/analytics.js

@@ -182,7 +182,7 @@ export var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(di
     })
   };
 };
-export var uiCardClickedEvent = function uiCardClickedEvent(display, definitionId, extensionKey) {
+export var uiCardClickedEvent = function uiCardClickedEvent(display, definitionId, extensionKey, isModifierKeyPressed) {
   return {
     action: 'clicked',
     actionSubject: 'smartLink',
@@ -190,7 +190,8 @@ export var uiCardClickedEvent = function uiCardClickedEvent(display, definitionI
     attributes: _objectSpread(_objectSpread({}, context), {}, {
       definitionId: definitionId || '',
       extensionKey: extensionKey || '',
-      display: display
+      display: display,
+      isModifierKeyPressed: isModifierKeyPressed
     })
   };
 };

package/dist/esm/version.json

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

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

@@ -26,7 +26,7 @@ export var BlockCard = function BlockCard(_ref) {
       handleAuthorize = _ref.handleAuthorize,
       handleErrorRetry = _ref.handleErrorRetry,
       handleFrameClick = _ref.handleFrameClick,
-      handlePreviewAnalytics = _ref.handlePreviewAnalytics,
+      handleAnalytics = _ref.handleAnalytics,
       handleInvoke = _ref.handleInvoke,
       renderers = _ref.renderers,
       isSelected = _ref.isSelected,
@@ -37,7 +37,7 @@ export var BlockCard = function BlockCard(_ref) {
   var data = details && details.data || getEmptyJsonLd();
   var meta = details && details.meta;
   var extractorOpts = {
-    handleAnalytics: handlePreviewAnalytics,
+    handleAnalytics: handleAnalytics,
     handleInvoke: handleInvoke,
     extensionKey: getExtensionKey(details)
   };

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useMemo } from 'react';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
 import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey } from '../../state/helpers';
@@ -38,7 +38,10 @@ export function CardWithUrlContent(_ref) {
   var definitionId = getDefinitionId(state.details);
   var extensionKey = getExtensionKey(state.details);
   var resourceType = getResourceType(state.details);
-  var services = getServices(state.details); // Setup UI handlers.
+  var services = getServices(state.details);
+  var isFlexibleUi = useMemo(function () {
+    return isFlexibleUiCard(children);
+  }, [children]); // Setup UI handlers.
 
   var handleClick = useCallback(function (event) {
     var clickUrl = getClickUrl(url, state.details);
@@ -46,11 +49,12 @@ export function CardWithUrlContent(_ref) {
   }, [state.details, url]);
   var handleClickWrapper = useCallback(function (event) {
     if (state.status === 'resolved') {
-      analytics.ui.cardClickedEvent(appearance, definitionId, extensionKey);
+      var isModifierKeyPressed = isSpecialEvent(event);
+      analytics.ui.cardClickedEvent(isFlexibleUi ? 'flexible' : appearance, definitionId, extensionKey, isModifierKeyPressed);
     }
 
     onClick ? onClick(event) : handleClick(event);
-  }, [state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick]);
+  }, [state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
   var handleAuthorize = useCallback(function () {
     return actions.authorize(appearance);
   }, [actions, appearance]);
@@ -84,13 +88,15 @@ export function CardWithUrlContent(_ref) {
     throw error;
   }
 
-  if (isFlexibleUiCard(children)) {
+  if (isFlexibleUi) {
     return /*#__PURE__*/React.createElement(FlexibleCard, {
       cardState: state,
       onAuthorize: services.length && handleAuthorize || undefined,
+      onClick: handleClickWrapper,
       renderers: renderers,
       ui: ui,
-      url: url
+      url: url,
+      testId: testId
     }, children);
   }
 
@@ -118,7 +124,7 @@ export function CardWithUrlContent(_ref) {
         handleErrorRetry: handleRetry,
         handleInvoke: handleInvoke,
         handleFrameClick: handleClickWrapper,
-        handlePreviewAnalytics: dispatchAnalytics,
+        handleAnalytics: dispatchAnalytics,
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,

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

@@ -6,4 +6,5 @@ import { createUIAction } from './utils'; // Attention: Keep the export name and
 // DataActions infer that the action depends on the data from the context.
 
 export var DeleteAction = createUIAction(ActionName.DeleteAction);
+export var EditAction = createUIAction(ActionName.EditAction);
 export var CustomAction = createUIAction(ActionName.CustomAction);

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

@@ -14,6 +14,7 @@ import Action from './action';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../messages';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import EditIcon from '@atlaskit/icon/glyph/edit';
 var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, ActionName.CustomAction, {
   component: Action,
   props: {}
@@ -27,6 +28,16 @@ var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, Act
     }),
     toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
   }
+}), _defineProperty(_actionMappings, ActionName.EditAction, {
+  component: Action,
+  props: {
+    testId: 'smart-action-edit-action',
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit),
+    icon: /*#__PURE__*/React.createElement(EditIcon, {
+      label: "Edit"
+    }),
+    toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
+  }
 }), _actionMappings);
 
 var getContextKey = function getContextKey(name) {

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme", "text", "showActionOnHover"];
+var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme", "onClick", "text", "showActionOnHover"];
 
 var _templateObject;
 
@@ -28,6 +28,7 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
       actions = _ref$actions === void 0 ? [] : _ref$actions,
       testId = _ref.testId,
       theme = _ref.theme,
+      onClick = _ref.onClick,
       text = _ref.text,
       showActionOnHover = _ref.showActionOnHover,
       blockProps = _objectWithoutProperties(_ref, _excluded);
@@ -53,7 +54,8 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
     width: SmartLinkWidth.Flexible
   }, jsx(Title, _extends({
     maxLines: maxLines,
-    theme: theme
+    theme: theme,
+    onClick: onClick
   }, overrideText)), subtitleElements && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && jsx(ElementGroup, {

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

@@ -48,11 +48,12 @@ export var getContainerStyles = function getContainerStyles(size, hideBackground
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n  ", "\n  ", "\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles);
 };
 
-var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry) {
+var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
   return React.Children.map(children, function (child) {
     if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
       var blockSize = child.props.size;
       return /*#__PURE__*/React.cloneElement(child, {
+        onClick: onClick,
         retry: isFlexibleUiTitleBlock(child) ? retry : undefined,
         size: blockSize || containerSize,
         status: status,
@@ -77,12 +78,13 @@ var Container = function Container(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-links-container' : _ref$testId,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? SmartLinkTheme.Link : _ref$theme;
+      theme = _ref$theme === void 0 ? SmartLinkTheme.Link : _ref$theme,
+      onClick = _ref.onClick;
   return jsx("div", {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, renderChildren(children, size, theme, status, retry));
+  }, renderChildren(children, size, theme, status, retry, onClick));
 };
 
 export default Container;

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

@@ -52,7 +52,8 @@ var Link = function Link(_ref) {
       text = _ref.text,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? SmartLinkTheme.Link : _ref$theme,
-      url = _ref.url;
+      url = _ref.url,
+      onClick = _ref.onClick;
   return jsx("span", {
     css: containerStyles
   }, jsx(Tooltip, {
@@ -63,6 +64,7 @@ var Link = function Link(_ref) {
     css: getAnchorStyles(size, theme, getMaxLines(maxLines)),
     "data-smart-element-link": true,
     "data-testid": testId,
+    onClick: onClick,
     href: url
   }, text)));
 };

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

@@ -7,9 +7,17 @@ import React from 'react';
 import { css, jsx } from '@emotion/core';
 import ImageIcon from '../../common/image-icon';
 
-var styles = function styles(url) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  > img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n"])));
-};
+/**
+ * Media: Image
+ * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
+ * [object-fit: cover] The replaced content is sized to maintain
+ * its aspect ratio while filling the element's entire content box.
+ * If the object's aspect ratio does not match the aspect ratio of its box,
+ * then the object will be clipped to fit.
+ * [object-position] Center alignment of the selected replaced element's
+ * contents within the element's box.
+ */
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
 
 var Media = function Media(_ref) {
   var _ref$testId = _ref.testId,
@@ -22,7 +30,7 @@ var Media = function Media(_ref) {
   }
 
   return jsx("div", {
-    css: styles(url),
+    css: styles,
     "data-smart-element-media": true,
     "data-testid": testId
   }, jsx(ImageIcon, {

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

@@ -10,7 +10,9 @@ var FlexibleCard = function FlexibleCard(_ref) {
       onAuthorize = _ref.onAuthorize,
       renderers = _ref.renderers,
       ui = _ref.ui,
-      url = _ref.url;
+      url = _ref.url,
+      onClick = _ref.onClick,
+      testId = _ref.testId;
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
@@ -18,9 +20,12 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var retry = getRetryOptions(url, status, details, onAuthorize);
   return /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
     value: context
-  }, /*#__PURE__*/React.createElement(Container, _extends({}, ui, {
+  }, /*#__PURE__*/React.createElement(Container, _extends({
+    testId: testId
+  }, ui, {
     retry: retry,
-    status: status
+    status: status,
+    onClick: onClick
   }), children));
 };
 

package/dist/types/constants.d.ts

@@ -102,6 +102,7 @@ export declare enum ElementName {
  */
 export declare enum ActionName {
     DeleteAction = "DeleteAction",
+    EditAction = "EditAction",
     CustomAction = "CustomAction"
 }
 /**

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' | 'delete' | 'modified_by' | 'modified_on' | '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' | 'delete' | 'edit' | 'modified_by' | 'modified_on' | '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/dist/types/state/analytics/useSmartLinkAnalytics.d.ts

@@ -7,7 +7,7 @@ export declare const useSmartLinkAnalytics: (dispatchAnalytics: AnalyticsHandler
     ui: {
         authEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
         authAlternateAccountEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
-        cardClickedEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        cardClickedEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined) => void;
         actionClickedEvent: (id: string, extensionKey: string, actionType: string, display: CardInnerAppearance, invokeType: InvokeType) => void;
         closedAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
         renderSuccessEvent: (display: CardInnerAppearance, id: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;

package/dist/types/state/hooks/useSmartLink.d.ts

@@ -12,7 +12,7 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
         ui: {
             authEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
             authAlternateAccountEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
-            cardClickedEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+            cardClickedEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined) => void;
             actionClickedEvent: (id: string, extensionKey: string, actionType: string, display: import("../../view/Card/types").CardInnerAppearance, invokeType: import("../../model/invoke-opts").InvokeType) => void;
             closedAuthEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
             renderSuccessEvent: (display: import("../../view/Card/types").CardInnerAppearance, id: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;

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

@@ -22,8 +22,8 @@ export declare const connectFailedEvent: (definitionId?: string | undefined, ext
 export declare const trackAppAccountConnected: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const uiAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const uiAuthAlternateAccountEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const uiCardClickedEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const uiActionClickedEvent: (extensionKey: string, actionType: string, display?: "embed" | "block" | "inline" | "preview" | undefined) => AnalyticsPayload;
+export declare const uiCardClickedEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined) => AnalyticsPayload;
+export declare const uiActionClickedEvent: (extensionKey: string, actionType: string, display?: "embed" | "block" | "inline" | "preview" | "flexible" | undefined) => AnalyticsPayload;
 export declare const uiClosedAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const screenAuthPopupEvent: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const uiRenderSuccessEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;

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

@@ -10,7 +10,7 @@ export declare type BlockCardProps = {
     authFlow?: CardAuthFlowOpts['authFlow'];
     handleAuthorize: (() => void) | undefined;
     handleErrorRetry: () => void;
-    handlePreviewAnalytics: AnalyticsHandler;
+    handleAnalytics: AnalyticsHandler;
     handleInvoke: InvokeHandler;
     handleFrameClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     isSelected?: boolean;

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

@@ -4,7 +4,7 @@ import { JsonLd } from 'json-ld-types';
 import { FlexibleUiOptions } from '../FlexibleCard/types';
 import { InlinePreloaderStyle } from '../types';
 export declare type CardAppearance = 'inline' | 'block' | 'embed';
-export declare type CardInnerAppearance = CardAppearance | 'preview';
+export declare type CardInnerAppearance = CardAppearance | 'preview' | 'flexible';
 export declare type CardPlatform = JsonLd.Primitives.Platforms;
 export declare type OnResolveCallback = (data: {
     url?: string;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { ActionProps } from './action/types';
 export declare const DeleteAction: import("react").FC<ActionProps>;
+export declare const EditAction: import("react").FC<ActionProps>;
 export declare const CustomAction: import("react").FC<ActionProps>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BlockProps, ElementItem, ActionItem } from '../types';
 import { SmartLinkPosition, SmartLinkTheme } from '../../../../../constants';
 import { RetryOptions } from '../../../types';
@@ -11,4 +12,5 @@ export declare type TitleBlockProps = BlockProps & {
     theme?: SmartLinkTheme;
     text?: string;
     showActionOnHover?: boolean;
+    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
 };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SmartLinkSize, SmartLinkStatus, SmartLinkTheme } from '../../../../constants';
 import { RetryOptions } from '../../types';
 export declare type ContainerProps = {
@@ -9,4 +10,5 @@ export declare type ContainerProps = {
     status?: SmartLinkStatus;
     testId?: string;
     theme?: SmartLinkTheme;
+    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
 };

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

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 import { ElementProps } from '../types';
 import { SmartLinkTheme } from '../../../../../constants';
 export declare type LinkProps = ElementProps & {
+    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     maxLines?: number;
     text?: string;
     theme?: SmartLinkTheme;

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

@@ -12,6 +12,7 @@ export declare type FlexibleCardProps = {
     testId?: string;
     ui?: FlexibleUiOptions;
     url: string;
+    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
 };
 export declare type FlexibleUiOptions = {
     hideElevation?: boolean;

package/package.json

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