@atlaskit/smart-card 17.7.6 → 17.7.9

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/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.6",
+	"version": "17.7.9",
 	"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/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/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.6",
+  "version": "17.7.9",
   "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"