@atlaskit/smart-card 17.7.5 → 17.7.8

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @atlaskit/smart-card
 
+## 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
+
+- [`0e5c8b501d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0e5c8b501d6) - add test for when hover preview prop is not provided to inline card
+
 ## 17.7.5
 
 ### 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.5",
+	"version": "17.7.8",
 	"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/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.5",
+	"version": "17.7.8",
 	"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)));
 

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

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

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

@@ -0,0 +1,54 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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(_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 = useMemo(function () {
+    return uuid();
+  }, []);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      actions = _useState2[0],
+      setActions = _useState2[1];
+
+  var linkState = useLinkState(url);
+  var linkAnalytics = useLinkAnalytics(analyticsHandler);
+  var linkActions = useLinkActions(id, url, linkAnalytics);
+  useEffect(function () {
+    if (!linkState.details) {
+      return;
+    }
+
+    var cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
+      handleInvoke: function handleInvoke(opts) {
+        return linkActions.invoke(opts, appearance);
+      },
+      handleAnalytics: analyticsHandler,
+      extensionKey: 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/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/utils/mocks.js

@@ -11,6 +11,11 @@ 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; } }
 
 import CardClient from '../client';
+export var mockContext = {
+  '@vocab': 'https://www.w3.org/ns/activitystreams#',
+  atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+  schema: 'http://schema.org/'
+};
 export var mocks = {
   success: {
     meta: {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.7.5",
+	"version": "17.7.8",
 	"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/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/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/hooks.d.ts

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

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { JsonLd } from 'json-ld-types';
+import type { AnalyticsHandler } from '../../utils/types';
+import type { CardAppearance } from '../../view/Card/types';
+export interface LinkAction {
+    /**
+     * Unique ID for the action.
+     * @example `delete-action`
+     */
+    id: string;
+    /**
+     * Text to render for the action.
+     * @description Use this in tooltips and UI.
+     * @example `Delete`.
+     */
+    text: React.ReactNode;
+    /**
+     * Promise to invoke on triggering this action.
+     * @example Clicking on `Delete` leading to deletion of content.
+     */
+    invoke: () => Promise<any>;
+}
+export interface UseSmartLinkActionsOpts {
+    /**
+     * Smart Link URL for which actions will be invoked.
+     * @example https://start.atlassian.com
+     */
+    url: string;
+    /**
+     * Appearance under which these actions will be invoked.
+     * @example `block` for card views.
+     */
+    appearance: CardAppearance;
+    /**
+     * Callback for sending analytics events.
+     * @description Accepts an analytics payload and fires it to a system.
+     */
+    analyticsHandler: AnalyticsHandler;
+    /**
+     * Platform on which actions are being invoked.
+     * @default 'web'
+     */
+    platform?: JsonLd.Primitives.Platforms;
+}
+export declare function useSmartLinkActions({ url, appearance, analyticsHandler, platform, }: UseSmartLinkActionsOpts): LinkAction[];

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

@@ -1,4 +1,9 @@
 import { JsonLd } from 'json-ld-types';
+export declare const mockContext: {
+    readonly '@vocab': "https://www.w3.org/ns/activitystreams#";
+    readonly atlassian: "https://schema.atlassian.com/ns/vocabulary#";
+    readonly schema: "http://schema.org/";
+};
 export declare const mocks: {
     success: JsonLd.Response<JsonLd.Data.BaseData>;
     notFound: JsonLd.Response<JsonLd.Data.BaseData>;

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/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/hooks/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/smart-card/hooks",
+  "main": "../dist/cjs/hooks.js",
+  "module": "../dist/esm/hooks.js",
+  "module:es2019": "../dist/es2019/hooks.js",
+  "types": "../dist/types/hooks.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.7.5",
+  "version": "17.7.8",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -111,6 +111,7 @@
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "react-test-renderer": "^16.8.0",
+    "ts-jest": "24.3.0",
     "typescript": "3.9.6",
     "xhr-mock": "^2.4.0"
   },
@@ -119,6 +120,7 @@
     "./in-product": "./src/in-product.ts",
     "./client": "./src/client/index.ts",
     "./types": "./src/types.ts",
+    "./hooks": "./src/hooks.ts",
     ".": "./src/index.ts"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"