@atlaskit/smart-card 23.6.2 → 23.6.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 23.6.4
+
+### Patch Changes
+
+- [`e402b41fc94`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e402b41fc94) - [ux] This change removes the icons on flexible block card actions, and also adds analytics for each of the flexible block card actions to maintain parity with the older block card.
+
+## 23.6.3
+
+### Patch Changes
+
+- [`b3c2a297df4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3c2a297df4) - Hover Preview: Actionable element experiment: Reload link after embed view modal is closed
+
 ## 23.6.2
 
 ### Patch Changes

package/dist/cjs/extractors/common/actions/extractPreviewAction.js

@@ -100,8 +100,8 @@ var extractPreviewAction = function extractPreviewAction(_ref) {
 
     previewActionProps.action.promise = previewAction.promise; // - Promise invoked on click of `Preview` on block card; trigger above promise.
 
-    previewAction.promise = function () {
-      return handleInvoke(previewActionProps);
+    previewAction.promise = function (opts) {
+      return handleInvoke(_objectSpread(_objectSpread({}, previewActionProps), opts));
     };
 
     return previewAction;

package/dist/cjs/state/hooks-external/useSmartLinkActions.js

@@ -23,6 +23,8 @@ var _store = require("../store");
 
 var _helpers = require("../helpers");
 
+var _linkProvider = require("@atlaskit/link-provider");
+
 function useSmartLinkActions(_ref) {
   var url = _ref.url,
       appearance = _ref.appearance,
@@ -41,16 +43,36 @@ function useSmartLinkActions(_ref) {
 
   var linkState = (0, _store.useSmartCardState)(url);
   var linkAnalytics = (0, _analytics.useSmartLinkAnalytics)(url, analyticsHandler, id);
-  var linkActions = (0, _actions.useSmartCardActions)(id, url, linkAnalytics);
+  var linkActions = (0, _actions.useSmartCardActions)(id, url, linkAnalytics); // Start: Smart ink Actions experiment
+
+  var enableActionableElement = (0, _linkProvider.useFeatureFlag)('enableActionableElement');
+  var reload = (0, _react.useCallback)(function () {
+    return linkActions.reload();
+  }, [linkActions]);
+  var handleInvoke = (0, _react.useCallback)(function (opts) {
+    var _opts$action;
+
+    if (enableActionableElement && opts.type === 'client' && opts.isReloadRequired && ((_opts$action = opts.action) === null || _opts$action === void 0 ? void 0 : _opts$action.type) === 'PreviewAction') {
+      // Reload when embed preview modal close
+      var promise = opts.action.promise;
+
+      opts.action.promise = function () {
+        return promise({
+          onClose: reload
+        });
+      };
+    }
+
+    return linkActions.invoke(opts, appearance);
+  }, [appearance, enableActionableElement, linkActions, reload]); // End: Smart ink Actions experiment
+
   (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);
-      },
+      handleInvoke: handleInvoke,
       analytics: linkAnalytics,
       origin: origin,
       extensionKey: (0, _helpers.getExtensionKey)(linkState.details),
@@ -69,6 +91,6 @@ function useSmartLinkActions(_ref) {
       };
     });
     setActions(cardActions);
-  }, [linkState, linkActions, linkAnalytics, appearance, platform, origin]);
+  }, [linkState, linkActions, linkAnalytics, appearance, platform, origin, handleInvoke]);
   return actions;
 }

package/dist/cjs/version.json

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

package/dist/cjs/view/BlockCard/actions/PreviewAction.js

@@ -115,14 +115,14 @@ var _default = function _default(_ref2) {
   return {
     id: 'preview-content',
     text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview),
-    promise: function promise() {
-      return previewFunction(_objectSpread({
+    promise: function promise(props) {
+      return previewFunction(_objectSpread(_objectSpread({
         popupMountPointId: 'twp-editor-preview-iframe',
         providerName: 'Preview',
         showModal: true,
         iframeName: 'twp-editor-preview-iframe',
         onClose: function onClose() {}
-      }, rest));
+      }, props), rest));
     }
   };
 };

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

@@ -114,7 +114,8 @@ var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject || (_templ
 var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
 
-  var url = _ref.url,
+  var id = _ref.id,
+      url = _ref.url,
       cardState = _ref.cardState,
       authFlow = _ref.authFlow,
       handleAuthorize = _ref.handleAuthorize,
@@ -146,12 +147,14 @@ var BlockCard = function BlockCard(_ref) {
       hideElevation: true
     };
     var flexibleProps = {
+      id: id,
       cardState: cardState,
       url: url,
       testId: testId,
       onError: onError,
       renderers: renderers,
-      ui: ui
+      ui: ui,
+      analytics: analytics
     };
 
     switch (status) {

package/dist/cjs/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -21,6 +21,8 @@ var _blocks = require("../../../FlexibleCard/components/blocks");
 
 var _constants = require("../../../../constants");
 
+var _uuid = _interopRequireDefault(require("uuid"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -31,13 +33,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @see FlexibleCardProps
  */
 var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
-  var cardState = _ref.cardState,
+  var id = _ref.id,
+      cardState = _ref.cardState,
       onClick = _ref.onClick,
       onError = _ref.onError,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
       ui = _ref.ui,
-      url = _ref.url;
+      url = _ref.url,
+      analytics = _ref.analytics;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -47,6 +51,13 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   (0, _react.useEffect)(function () {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
+
+  var _useState3 = (0, _react.useState)(function () {
+    return id ? id : (0, _uuid.default)();
+  }),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+      analyticsId = _useState4[0];
+
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
@@ -95,11 +106,35 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }
   }) : null, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
     actions: [{
-      name: _constants.ActionName.PreviewAction
+      name: _constants.ActionName.PreviewAction,
+      hideIcon: true,
+      onClick: function onClick() {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'preview',
+          display: 'block'
+        });
+      }
     }, {
-      name: _constants.ActionName.ViewAction
+      name: _constants.ActionName.ViewAction,
+      hideIcon: true,
+      onClick: function onClick() {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'view',
+          display: 'block'
+        });
+      }
     }, {
-      name: _constants.ActionName.DownloadAction
+      name: _constants.ActionName.DownloadAction,
+      hideIcon: true,
+      onClick: function onClick() {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'download',
+          display: 'block'
+        });
+      }
     }]
   }));
 };

package/dist/cjs/view/HoverCard/utils.js

@@ -121,7 +121,9 @@ var toActionableMetadata = function toActionableMetadata(onActionClick, extensio
               onActionClick(previewAction.id);
             }
 
-            return previewAction.invoke();
+            return previewAction.invoke({
+              isReloadRequired: true
+            });
           }
         }) : elementItem;
       });

package/dist/es2019/extractors/common/actions/extractPreviewAction.js

@@ -76,7 +76,9 @@ export const extractPreviewAction = ({
 
     previewActionProps.action.promise = previewAction.promise; // - Promise invoked on click of `Preview` on block card; trigger above promise.
 
-    previewAction.promise = () => handleInvoke(previewActionProps);
+    previewAction.promise = opts => handleInvoke({ ...previewActionProps,
+      ...opts
+    });
 
     return previewAction;
   }

package/dist/es2019/state/hooks-external/useSmartLinkActions.js

@@ -1,10 +1,11 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, 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';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 export function useSmartLinkActions({
   url,
   appearance,
@@ -16,14 +17,34 @@ export function useSmartLinkActions({
   const [actions, setActions] = useState([]);
   const linkState = useLinkState(url);
   const linkAnalytics = useLinkAnalytics(url, analyticsHandler, id);
-  const linkActions = useLinkActions(id, url, linkAnalytics);
+  const linkActions = useLinkActions(id, url, linkAnalytics); // Start: Smart ink Actions experiment
+
+  const enableActionableElement = useFeatureFlag('enableActionableElement');
+  const reload = useCallback(() => linkActions.reload(), [linkActions]);
+  const handleInvoke = useCallback(opts => {
+    var _opts$action;
+
+    if (enableActionableElement && opts.type === 'client' && opts.isReloadRequired && ((_opts$action = opts.action) === null || _opts$action === void 0 ? void 0 : _opts$action.type) === 'PreviewAction') {
+      // Reload when embed preview modal close
+      const {
+        promise
+      } = opts.action;
+
+      opts.action.promise = () => promise({
+        onClose: reload
+      });
+    }
+
+    return linkActions.invoke(opts, appearance);
+  }, [appearance, enableActionableElement, linkActions, reload]); // End: Smart ink Actions experiment
+
   useEffect(() => {
     if (!linkState.details) {
       return;
     }
 
     const cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
-      handleInvoke: opts => linkActions.invoke(opts, appearance),
+      handleInvoke,
       analytics: linkAnalytics,
       origin,
       extensionKey: getExtensionKey(linkState.details),
@@ -40,6 +61,6 @@ export function useSmartLinkActions({
       invoke: action.promise
     }));
     setActions(cardActions);
-  }, [linkState, linkActions, linkAnalytics, appearance, platform, origin]);
+  }, [linkState, linkActions, linkAnalytics, appearance, platform, origin, handleInvoke]);
   return actions;
 }

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/actions/PreviewAction.js

@@ -55,12 +55,13 @@ export default (({
 }) => ({
   id: 'preview-content',
   text: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
-  promise: () => previewFunction({
+  promise: props => previewFunction({
     popupMountPointId: 'twp-editor-preview-iframe',
     providerName: 'Preview',
     showModal: true,
     iframeName: 'twp-editor-preview-iframe',
     onClose: () => {},
+    ...props,
     ...rest
   })
 }));

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

@@ -29,6 +29,7 @@ const flexibleBlockCardElevationStyle = css`
   margin: 2px;
 `;
 export const BlockCard = ({
+  id,
   url,
   cardState,
   authFlow,
@@ -66,12 +67,14 @@ export const BlockCard = ({
       hideElevation: true
     };
     const flexibleProps = {
+      id,
       cardState,
       url,
       testId,
       onError,
       renderers,
-      ui
+      ui,
+      analytics
     };
 
     switch (status) {

package/dist/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -3,24 +3,28 @@ import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
 import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
-
+import uuid from 'uuid';
 /**
  * This view represents a Block card that has an 'Resolved' status.
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
+
 const FlexibleResolvedView = ({
+  id,
   cardState,
   onClick,
   onError,
   testId = 'smart-block-resolved-view',
   ui,
-  url
+  url,
+  analytics
 }) => {
   const [isPreviewBlockErrored, setIsPreviewBlockErrored] = useState(false);
   useEffect(() => {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
+  const [analyticsId] = useState(() => id ? id : uuid());
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -69,11 +73,35 @@ const FlexibleResolvedView = ({
     }
   }) : null, /*#__PURE__*/React.createElement(FooterBlock, {
     actions: [{
-      name: ActionName.PreviewAction
+      name: ActionName.PreviewAction,
+      hideIcon: true,
+      onClick: () => {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'preview',
+          display: 'block'
+        });
+      }
     }, {
-      name: ActionName.ViewAction
+      name: ActionName.ViewAction,
+      hideIcon: true,
+      onClick: () => {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'view',
+          display: 'block'
+        });
+      }
     }, {
-      name: ActionName.DownloadAction
+      name: ActionName.DownloadAction,
+      hideIcon: true,
+      onClick: () => {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'download',
+          display: 'block'
+        });
+      }
     }]
   }));
 };

package/dist/es2019/view/HoverCard/utils.js

@@ -90,7 +90,9 @@ export const toActionableMetadata = (onActionClick, extensionKey, types = [], ca
             onActionClick(previewAction.id);
           }
 
-          return previewAction.invoke();
+          return previewAction.invoke({
+            isReloadRequired: true
+          });
         }
       } : elementItem);
     }

package/dist/esm/extractors/common/actions/extractPreviewAction.js

@@ -89,8 +89,8 @@ export var extractPreviewAction = function extractPreviewAction(_ref) {
 
     previewActionProps.action.promise = previewAction.promise; // - Promise invoked on click of `Preview` on block card; trigger above promise.
 
-    previewAction.promise = function () {
-      return handleInvoke(previewActionProps);
+    previewAction.promise = function (opts) {
+      return handleInvoke(_objectSpread(_objectSpread({}, previewActionProps), opts));
     };
 
     return previewAction;

package/dist/esm/state/hooks-external/useSmartLinkActions.js

@@ -1,11 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, 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';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 export function useSmartLinkActions(_ref) {
   var url = _ref.url,
       appearance = _ref.appearance,
@@ -24,16 +25,36 @@ export function useSmartLinkActions(_ref) {
 
   var linkState = useLinkState(url);
   var linkAnalytics = useLinkAnalytics(url, analyticsHandler, id);
-  var linkActions = useLinkActions(id, url, linkAnalytics);
+  var linkActions = useLinkActions(id, url, linkAnalytics); // Start: Smart ink Actions experiment
+
+  var enableActionableElement = useFeatureFlag('enableActionableElement');
+  var reload = useCallback(function () {
+    return linkActions.reload();
+  }, [linkActions]);
+  var handleInvoke = useCallback(function (opts) {
+    var _opts$action;
+
+    if (enableActionableElement && opts.type === 'client' && opts.isReloadRequired && ((_opts$action = opts.action) === null || _opts$action === void 0 ? void 0 : _opts$action.type) === 'PreviewAction') {
+      // Reload when embed preview modal close
+      var promise = opts.action.promise;
+
+      opts.action.promise = function () {
+        return promise({
+          onClose: reload
+        });
+      };
+    }
+
+    return linkActions.invoke(opts, appearance);
+  }, [appearance, enableActionableElement, linkActions, reload]); // End: Smart ink Actions experiment
+
   useEffect(function () {
     if (!linkState.details) {
       return;
     }
 
     var cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
-      handleInvoke: function handleInvoke(opts) {
-        return linkActions.invoke(opts, appearance);
-      },
+      handleInvoke: handleInvoke,
       analytics: linkAnalytics,
       origin: origin,
       extensionKey: getExtensionKey(linkState.details),
@@ -52,6 +73,6 @@ export function useSmartLinkActions(_ref) {
       };
     });
     setActions(cardActions);
-  }, [linkState, linkActions, linkAnalytics, appearance, platform, origin]);
+  }, [linkState, linkActions, linkAnalytics, appearance, platform, origin, handleInvoke]);
   return actions;
 }

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/actions/PreviewAction.js

@@ -88,14 +88,14 @@ export default (function (_ref2) {
   return {
     id: 'preview-content',
     text: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
-    promise: function promise() {
-      return previewFunction(_objectSpread({
+    promise: function promise(props) {
+      return previewFunction(_objectSpread(_objectSpread({
         popupMountPointId: 'twp-editor-preview-iframe',
         providerName: 'Preview',
         showModal: true,
         iframeName: 'twp-editor-preview-iframe',
         onClose: function onClose() {}
-      }, rest));
+      }, props), rest));
     }
   };
 });

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

@@ -30,7 +30,8 @@ var flexibleBlockCardElevationStyle = css(_templateObject || (_templateObject =
 export var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
 
-  var url = _ref.url,
+  var id = _ref.id,
+      url = _ref.url,
       cardState = _ref.cardState,
       authFlow = _ref.authFlow,
       handleAuthorize = _ref.handleAuthorize,
@@ -62,12 +63,14 @@ export var BlockCard = function BlockCard(_ref) {
       hideElevation: true
     };
     var flexibleProps = {
+      id: id,
       cardState: cardState,
       url: url,
       testId: testId,
       onError: onError,
       renderers: renderers,
-      ui: ui
+      ui: ui,
+      analytics: analytics
     };
 
     switch (status) {

package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -4,20 +4,23 @@ import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
 import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
-
+import uuid from 'uuid';
 /**
  * This view represents a Block card that has an 'Resolved' status.
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
+
 var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
-  var cardState = _ref.cardState,
+  var id = _ref.id,
+      cardState = _ref.cardState,
       onClick = _ref.onClick,
       onError = _ref.onError,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
       ui = _ref.ui,
-      url = _ref.url;
+      url = _ref.url,
+      analytics = _ref.analytics;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -27,6 +30,13 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   useEffect(function () {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
+
+  var _useState3 = useState(function () {
+    return id ? id : uuid();
+  }),
+      _useState4 = _slicedToArray(_useState3, 1),
+      analyticsId = _useState4[0];
+
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -75,11 +85,35 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }
   }) : null, /*#__PURE__*/React.createElement(FooterBlock, {
     actions: [{
-      name: ActionName.PreviewAction
+      name: ActionName.PreviewAction,
+      hideIcon: true,
+      onClick: function onClick() {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'preview',
+          display: 'block'
+        });
+      }
     }, {
-      name: ActionName.ViewAction
+      name: ActionName.ViewAction,
+      hideIcon: true,
+      onClick: function onClick() {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'view',
+          display: 'block'
+        });
+      }
     }, {
-      name: ActionName.DownloadAction
+      name: ActionName.DownloadAction,
+      hideIcon: true,
+      onClick: function onClick() {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'download',
+          display: 'block'
+        });
+      }
     }]
   }));
 };

package/dist/esm/view/HoverCard/utils.js

@@ -106,7 +106,9 @@ export var toActionableMetadata = function toActionableMetadata(onActionClick, e
               onActionClick(previewAction.id);
             }
 
-            return previewAction.invoke();
+            return previewAction.invoke({
+              isReloadRequired: true
+            });
           }
         }) : elementItem;
       });

package/dist/types/model/invoke-opts.d.ts

@@ -13,5 +13,5 @@ export declare type InvokeServerOpts = InvokeOpts<ServerActionOpts> & {
 };
 export interface ClientActionOpts {
     type: string;
-    promise: () => Promise<void>;
+    promise: <T>(opts?: T) => Promise<void>;
 }

package/dist/types/state/hooks-external/useSmartLinkActions.d.ts

@@ -2,6 +2,9 @@
 import { JsonLd } from 'json-ld-types';
 import type { AnalyticsHandler, AnalyticsOrigin } from '../../utils/types';
 import type { CardInnerAppearance } from '../../view/Card/types';
+declare type ExperimentInvokeOpts = {
+    isReloadRequired?: boolean;
+};
 export interface LinkAction {
     /**
      * Unique ID for the action.
@@ -18,7 +21,7 @@ export interface LinkAction {
      * Promise to invoke on triggering this action.
      * @example Clicking on `Delete` leading to deletion of content.
      */
-    invoke: () => Promise<any>;
+    invoke: (opts?: ExperimentInvokeOpts) => Promise<any>;
 }
 export interface UseSmartLinkActionsOpts {
     /**
@@ -47,3 +50,4 @@ export interface UseSmartLinkActionsOpts {
     origin?: AnalyticsOrigin;
 }
 export declare function useSmartLinkActions({ url, appearance, analyticsHandler, platform, origin, }: UseSmartLinkActionsOpts): LinkAction[];
+export {};

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

@@ -5,7 +5,7 @@ import { Appearance } from '@atlaskit/button/types';
 export interface ActionProps {
     id: string;
     text: React.ReactNode;
-    promise: () => Promise<any>;
+    promise: <T>(opts?: T) => Promise<any>;
     buttonAppearance?: Appearance;
 }
 export declare type ActionState = 'init' | 'loading' | 'success' | 'failure';

package/dist/types/view/BlockCard/views/flexible/FlexibleResolvedView.d.ts

@@ -5,5 +5,5 @@ import { FlexibleBlockCardProps } from './types';
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-declare const FlexibleResolvedView: ({ cardState, onClick, onError, testId, ui, url, }: FlexibleBlockCardProps) => JSX.Element;
+declare const FlexibleResolvedView: ({ id, cardState, onClick, onError, testId, ui, url, analytics, }: FlexibleBlockCardProps) => JSX.Element;
 export default FlexibleResolvedView;

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

@@ -4,6 +4,7 @@ import { OnErrorCallback } from '../../../types';
 import { FlexibleUiOptions } from '../../../FlexibleCard/types';
 import { OnResolveCallback } from '../../../Card/types';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
+import { AnalyticsFacade } from '../../../../state/analytics';
 export declare type FlexibleBlockCardProps = {
     /**
      * Determines the status and data of the Smart Link.
@@ -49,6 +50,14 @@ export declare type FlexibleBlockCardProps = {
      * @see FlexibleUiOptions
      */
     ui?: FlexibleUiOptions;
+    /**
+     * A unique id for this Smart Link instance, used for analytics.
+     */
+    id?: string;
+    /**
+     * An AnalyticsFacade object used for calling analytics.
+     */
+    analytics: AnalyticsFacade;
     /**
      * Determines the URL of the Smart Link.
      */

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "onResolve" | "platform" | "isFrameVisible" | "embedIframeRef" | "showHoverPreview" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "onResolve" | "platform" | "showHoverPreview" | "isFrameVisible" | "embedIframeRef" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/package.json

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