@atlaskit/smart-card 17.7.6 → 17.7.9

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @atlaskit/smart-card
 
+## 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
+
+- [`c01f6404d0c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c01f6404d0c) - Add ability to trigger actions for a Smart Link from outside of the Smart Link card.
+
+  Example usage:
+
+  ```tsx
+  import { useSmartLinkActions } from '@atlaskit/smart-card/hooks';
+
+  const ExampleToolbar = () => {
+    const actions = useSmartLinkActions({
+      url,
+      appearance: 'block',
+      analyticsHandler: analytics,
+    });
+
+    return (
+      <ExampleToolbarWrapper>
+        {actions.map((action) => (
+          <Tooltip content={action.text}>
+            <ExampleToolbarItem key={action.id} onClick={action.invoke}>
+              {idToIcon[action.id] ?? action.id}
+            </ExampleToolbarItem>
+          </Tooltip>
+        ))}
+      </ExampleToolbarWrapper>
+    );
+  };
+  ```
+
 ## 17.7.6
 
 ### Patch Changes

package/dist/cjs/hooks.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useSmartLinkActions", {
+  enumerable: true,
+  get: function get() {
+    return _useSmartLinkActions.useSmartLinkActions;
+  }
+});
+
+var _useSmartLinkActions = require("./state/hooks-external/useSmartLinkActions");

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/state/hooks-external/useSmartLinkActions.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSmartLinkActions = useSmartLinkActions;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _uuid = _interopRequireDefault(require("uuid"));
+
+var _block = require("../../extractors/block");
+
+var _actions = require("../actions");
+
+var _analytics = require("../analytics");
+
+var _store = require("../store");
+
+var _helpers = require("../helpers");
+
+function useSmartLinkActions(_ref) {
+  var url = _ref.url,
+      appearance = _ref.appearance,
+      analyticsHandler = _ref.analyticsHandler,
+      _ref$platform = _ref.platform,
+      platform = _ref$platform === void 0 ? 'web' : _ref$platform;
+  var id = (0, _react.useMemo)(function () {
+    return (0, _uuid.default)();
+  }, []);
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      actions = _useState2[0],
+      setActions = _useState2[1];
+
+  var linkState = (0, _store.useSmartCardState)(url);
+  var linkAnalytics = (0, _analytics.useSmartLinkAnalytics)(analyticsHandler);
+  var linkActions = (0, _actions.useSmartCardActions)(id, url, linkAnalytics);
+  (0, _react.useEffect)(function () {
+    if (!linkState.details) {
+      return;
+    }
+
+    var cardProperties = (0, _block.extractBlockProps)(linkState.details.data, linkState.details.meta, {
+      handleInvoke: function handleInvoke(opts) {
+        return linkActions.invoke(opts, appearance);
+      },
+      handleAnalytics: analyticsHandler,
+      extensionKey: (0, _helpers.getExtensionKey)(linkState.details)
+    }, undefined, platform);
+
+    if (!cardProperties.actions || cardProperties.actions.length === 0) {
+      return;
+    }
+
+    var cardActions = cardProperties.actions.map(function (action) {
+      return {
+        id: action.id,
+        text: action.text,
+        invoke: action.promise
+      };
+    });
+    setActions(cardActions);
+  }, [linkState, linkActions, analyticsHandler, appearance, platform]);
+  return actions;
+}

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/utils/mocks.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.waitFor = exports.mocks = exports.fakeResponse = exports.fakeFactory = void 0;
+exports.waitFor = exports.mocks = exports.mockContext = exports.fakeResponse = exports.fakeFactory = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -27,6 +27,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+var mockContext = {
+  '@vocab': 'https://www.w3.org/ns/activitystreams#',
+  atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+  schema: 'http://schema.org/'
+};
+exports.mockContext = mockContext;
 var mocks = {
   success: {
     meta: {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.7.6",
+	"version": "17.7.9",
 	"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/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/hooks.js

@@ -0,0 +1 @@
+export { useSmartLinkActions } from './state/hooks-external/useSmartLinkActions';

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/state/hooks-external/useSmartLinkActions.js

@@ -0,0 +1,42 @@
+import { useEffect, useMemo, useState } from 'react';
+import uuid from 'uuid';
+import { extractBlockProps as extractCardProps } from '../../extractors/block';
+import { useSmartCardActions as useLinkActions } from '../actions';
+import { useSmartLinkAnalytics as useLinkAnalytics } from '../analytics';
+import { useSmartCardState as useLinkState } from '../store';
+import { getExtensionKey } from '../helpers';
+export function useSmartLinkActions({
+  url,
+  appearance,
+  analyticsHandler,
+  platform = 'web'
+}) {
+  const id = useMemo(() => uuid(), []);
+  const [actions, setActions] = useState([]);
+  const linkState = useLinkState(url);
+  const linkAnalytics = useLinkAnalytics(analyticsHandler);
+  const linkActions = useLinkActions(id, url, linkAnalytics);
+  useEffect(() => {
+    if (!linkState.details) {
+      return;
+    }
+
+    const cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
+      handleInvoke: opts => linkActions.invoke(opts, appearance),
+      handleAnalytics: analyticsHandler,
+      extensionKey: getExtensionKey(linkState.details)
+    }, undefined, platform);
+
+    if (!cardProperties.actions || cardProperties.actions.length === 0) {
+      return;
+    }
+
+    const cardActions = cardProperties.actions.map(action => ({
+      id: action.id,
+      text: action.text,
+      invoke: action.promise
+    }));
+    setActions(cardActions);
+  }, [linkState, linkActions, analyticsHandler, appearance, platform]);
+  return actions;
+}

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/utils/mocks.js

@@ -1,4 +1,9 @@
 import CardClient from '../client';
+export const mockContext = {
+  '@vocab': 'https://www.w3.org/ns/activitystreams#',
+  atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+  schema: 'http://schema.org/'
+};
 export const mocks = {
   success: {
     meta: {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.7.6",
+	"version": "17.7.9",
 	"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/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)));