@atlaskit/smart-card 23.6.2 → 23.6.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-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.3",
 	"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/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.3",
 	"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/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.3",
 	"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/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/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.3",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"