@atlaskit/smart-card 25.9.0 → 25.9.2

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/index.js

@@ -36,6 +36,7 @@ var isInvokeCustomError = function isInvokeCustomError(err) {
   return err.message !== undefined && err.errorCode !== undefined;
 };
 var LozengeAction = function LozengeAction(_ref) {
+  var _action$update;
   var action = _ref.action,
     appearance = _ref.appearance,
     _ref$testId = _ref.testId,
@@ -64,8 +65,12 @@ var LozengeAction = function LozengeAction(_ref) {
     setErrorMessage = _useState10[1];
   var invoke = (0, _useInvoke.default)();
   var reload = (0, _useResolve.default)();
+  var _ref2 = (action === null || action === void 0 ? void 0 : (_action$update = action.update) === null || _action$update === void 0 ? void 0 : _action$update.details) || {},
+    url = _ref2.url,
+    linkId = _ref2.id,
+    previewData = _ref2.previewData;
   var handleOpenChange = (0, _react2.useCallback)( /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(args) {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(args) {
       var responseItems, validItems;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
@@ -112,7 +117,7 @@ var LozengeAction = function LozengeAction(_ref) {
       }, _callee, null, [[2, 13, 17, 20]]);
     }));
     return function (_x) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }(), [action === null || action === void 0 ? void 0 : action.read, invoke, isLoaded, text]);
   var trigger = (0, _react2.useCallback)(function (props) {
@@ -123,8 +128,8 @@ var LozengeAction = function LozengeAction(_ref) {
     }));
   }, [appearance, testId, text]);
   var handleItemClick = (0, _react2.useCallback)( /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(id) {
-      var updateAction, request, _ref4, url, linkId;
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(id) {
+      var updateAction, request;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
@@ -132,7 +137,7 @@ var LozengeAction = function LozengeAction(_ref) {
               _context2.prev = 0;
               updateAction = action === null || action === void 0 ? void 0 : action.update;
               if (!(updateAction && id)) {
-                _context2.next = 15;
+                _context2.next = 14;
                 break;
               }
               setIsLoading(true);
@@ -144,18 +149,17 @@ var LozengeAction = function LozengeAction(_ref) {
               setIsLoaded(false);
               setIsOpen(false);
               setItems([]);
-              _ref4 = updateAction.details || {}, url = _ref4.url, linkId = _ref4.id;
               if (!url) {
-                _context2.next = 15;
+                _context2.next = 14;
                 break;
               }
-              _context2.next = 15;
+              _context2.next = 14;
               return reload(url, true, undefined, linkId);
-            case 15:
-              _context2.next = 21;
+            case 14:
+              _context2.next = 20;
               break;
-            case 17:
-              _context2.prev = 17;
+            case 16:
+              _context2.prev = 16;
               _context2.t0 = _context2["catch"](0);
               setIsLoading(false);
               if (isInvokeCustomError(_context2.t0)) {
@@ -163,22 +167,24 @@ var LozengeAction = function LozengeAction(_ref) {
               } else {
                 setErrorMessage(_types.LozengeActionErrorMessages.updateFailed);
               }
-            case 21:
+            case 20:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[0, 17]]);
+      }, _callee2, null, [[0, 16]]);
     }));
     return function (_x2) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
-  }(), [action === null || action === void 0 ? void 0 : action.update, invoke, reload]);
+  }(), [action === null || action === void 0 ? void 0 : action.update, invoke, linkId, reload, url]);
   var dropdownItemGroup = (0, _react2.useMemo)(function () {
     if (errorMessage) {
       return (0, _react.jsx)(_lozengeActionError.default, {
         errorMessage: errorMessage,
-        testId: testId
+        testId: testId,
+        url: url,
+        previewData: previewData
       });
     }
     if (items && items.length > 0) {
@@ -193,7 +199,7 @@ var LozengeAction = function LozengeAction(_ref) {
         }));
       })));
     }
-  }, [errorMessage, handleItemClick, items, testId]);
+  }, [errorMessage, handleItemClick, items, previewData, testId, url]);
   return (0, _react.jsx)(_dropdownMenu.default, {
     isLoading: isLoading,
     isOpen: isOpen,

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/index.js

@@ -5,21 +5,45 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _react2 = require("react");
+var _reactIntlNext = require("react-intl-next");
 var _dropdownMenu = require("@atlaskit/dropdown-menu");
 var _colors = require("@atlaskit/theme/colors");
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _styled = require("./styled");
 var _utils = require("../../../utils");
-/** @jsx jsx */
-
+var _messages = require("../../../../../../messages");
+var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
+var _utils2 = require("../../../../../EmbedModal/utils");
+var _useResolve = _interopRequireDefault(require("../../../../../../state/hooks/use-resolve"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
 var MAX_LINE_NUMBER = 8;
 var LozengeActionError = function LozengeActionError(_ref) {
   var errorMessage = _ref.errorMessage,
     testId = _ref.testId,
     _ref$maxLineNumber = _ref.maxLineNumber,
-    maxLineNumber = _ref$maxLineNumber === void 0 ? MAX_LINE_NUMBER : _ref$maxLineNumber;
+    maxLineNumber = _ref$maxLineNumber === void 0 ? MAX_LINE_NUMBER : _ref$maxLineNumber,
+    url = _ref.url,
+    previewData = _ref.previewData;
+  var reload = (0, _useResolve.default)();
+  var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)();
+  var isPreviewAvailable = previewData && previewData.src !== undefined;
+  var handlePreviewClose = (0, _react2.useCallback)(function () {
+    if (url) {
+      reload(url, true);
+    }
+  }, [reload, url]);
+  var handlePreviewOpen = (0, _react2.useCallback)(function () {
+    if (isPreviewAvailable) {
+      return (0, _utils2.openPreviewModal)(_objectSpread(_objectSpread({}, previewData), {}, {
+        analytics: analytics,
+        onClose: handlePreviewClose
+      }));
+    }
+  }, [analytics, handlePreviewClose, isPreviewAvailable, previewData]);
   var content = (0, _react2.useMemo)(function () {
     return (0, _react.jsx)(_react2.Fragment, null, (0, _react.jsx)("div", {
       css: _styled.contentStyles
@@ -32,8 +56,14 @@ var LozengeActionError = function LozengeActionError(_ref) {
     }), (0, _react.jsx)("span", {
       css: (0, _styled.textStyles)(maxLineNumber),
       "data-testid": "".concat(testId, "-error-message")
-    }, typeof errorMessage === 'string' ? errorMessage : (0, _utils.getFormattedMessage)(errorMessage))));
-  }, [errorMessage, maxLineNumber, testId]);
+    }, typeof errorMessage === 'string' ? errorMessage : (0, _utils.getFormattedMessage)(errorMessage))), isPreviewAvailable ? (0, _react.jsx)("div", {
+      css: _styled.linkStyles
+    }, (0, _react.jsx)("a", {
+      target: "_blank",
+      "data-testid": "".concat(testId, "-open-embed"),
+      onClick: handlePreviewOpen
+    }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.open_issue_in_jira))) : null);
+  }, [errorMessage, handlePreviewOpen, isPreviewAvailable, maxLineNumber, testId]);
   return (0, _react.jsx)("span", {
     css: _styled.dropdownItemGroupStyles,
     "data-testid": "".concat(testId, "-error-item-group")

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -4,18 +4,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textStyles = exports.dropdownItemGroupStyles = exports.contentStyles = void 0;
+exports.textStyles = exports.linkStyles = exports.dropdownItemGroupStyles = exports.contentStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _utils = require("../../../utils");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var dropdownItemGroupStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  button {\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n      cursor: default;\n    }\n  }\n"])));
 exports.dropdownItemGroupStyles = dropdownItemGroupStyles;
 var sharedBlockStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 0.5rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n"])));
-var contentStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  margin-top: 2px;\n  align-items: flex-start;\n\n  > span,\n  > div {\n    &[data-smart-element-text] {\n      font-size: 0.875rem;\n      color: ", ";\n    }\n  }\n"])), sharedBlockStyles, "var(--ds-text, ".concat(_colors.N800, ")"));
+var contentStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    &[data-smart-element-text] {\n      font-size: 0.875rem;\n      color: ", ";\n    }\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(_colors.N800, ")"));
 exports.contentStyles = contentStyles;
+var linkStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  font-size: 0.875rem;\n  margin-top: 10px;\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), sharedBlockStyles, "var(--ds-space-400, 32px)", "var(--ds-space-025, 2px)");
+exports.linkStyles = linkStyles;
 var textStyles = function textStyles(maxLines) {
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 1rem;\n  white-space: normal;\n  ", ";\n"])), (0, _utils.getTruncateStyles)(maxLines));
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 1rem;\n  white-space: normal;\n  ", ";\n"])), (0, _utils.getTruncateStyles)(maxLines));
 };
 exports.textStyles = textStyles;

package/dist/cjs/view/FlexibleCard/components/elements/link/index.js

@@ -25,7 +25,9 @@ var containerStyles = (0, _react2.css)(_templateObject || (_templateObject = (0,
 var getThemeStyles = function getThemeStyles(theme) {
   switch (theme) {
     case _constants.SmartLinkInternalTheme.Grey:
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n        font-size: 12px;\n      "])), "var(--ds-text-subtlest, #626F86)", "var(--ds-text-subtlest, #626F86)");
+      // We are being specifc with the CSS selectors to ensure that Confluence overrides
+      // do not affect our internal Smart Card styles
+      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        a& {\n          color: ", ";\n          &:active,\n          &:visited,\n          &:focus,\n          &:hover {\n            color: ", ";\n            text-decoration: underline;\n          }\n          font-size: 12px;\n        }\n      "])), "var(--ds-text-subtlest, #626F86)", "var(--ds-text-subtlest, #626F86)");
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case _constants.SmartLinkTheme.Black:
       return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blackLink, _token.tokens.blackLinkPressed, _token.tokens.blackLink);

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -17,7 +17,6 @@ var _store = require("../../../state/store");
 var _HoverCardContent = _interopRequireDefault(require("../components/HoverCardContent"));
 var _styled = require("../styled");
 var _constants = require("../../../constants");
-var _SmartLinkAnalyticsContext = require("../../../utils/analytics/SmartLinkAnalyticsContext");
 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; }
 /** @jsx jsx */
@@ -25,7 +24,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
     url = _ref.url,
-    id = _ref.id,
     analyticsHandler = _ref.analyticsHandler,
     analytics = _ref.analytics,
     _ref$canOpen = _ref.canOpen,
@@ -135,11 +133,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   }, [closeOnChildClick, hideCard]);
   var content = (0, _react2.useCallback)(function (_ref2) {
     var update = _ref2.update;
-    return (0, _react.jsx)(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
-      url: url,
-      appearance: _constants.CardDisplay.HoverCardPreview,
-      id: id
-    }, (0, _react.jsx)(_HoverCardContent.default, {
+    return (0, _react.jsx)(_HoverCardContent.default, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
       analytics: analytics,
@@ -149,10 +143,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       onResolve: update,
       renderers: renderers,
       showServerActions: showServerActions,
-      url: url,
-      id: id
-    }));
-  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
+      url: url
+    });
+  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url]);
   var trigger = (0, _react2.useCallback)(function (triggerProps) {
     return (0, _react.jsx)("span", {
       ref: parentSpan

package/dist/es2019/extractors/flexible/extract-state.js

@@ -2,6 +2,7 @@ import { extractLozenge } from '../common/lozenge';
 import { getExtensionKey } from '../../state/helpers';
 import extractServerAction from './extract-server-action';
 import { extractLink } from '@atlaskit/linking-common/extractors';
+import { extractPreviewAction } from './actions/extract-preview-action';
 const toInvokeRequest = (extensionKey, resourceIdentifiers, actionType, details) => {
   if (!actionType) {
     return;
@@ -29,9 +30,11 @@ const extractAction = (response, id) => {
   }
   const read = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataRetrieval = action.dataRetrievalAction) === null || _action$dataRetrieval === void 0 ? void 0 : _action$dataRetrieval.name);
   const url = extractLink(data);
+  const previewData = response ? extractPreviewAction(response) : null;
   const details = {
     id,
-    url
+    url,
+    previewData
   };
   const update = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataUpdateAct = action.dataUpdateAction) === null || _action$dataUpdateAct === void 0 ? void 0 : _action$dataUpdateAct.name, details);
   return read || update ? {

package/dist/es2019/state/actions/index.js

@@ -16,21 +16,14 @@ export const useSmartCardActions = (id, url, analytics) => {
     getState,
     dispatch
   } = store;
-  const getSmartLinkState = useCallback(() => {
-    var _getState$url;
-    const {
-      details,
-      status,
-      metadataStatus
-    } = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : {
-      status: SmartLinkStatus.Pending
-    };
-    return {
-      details,
-      status,
-      metadataStatus
-    };
-  }, [getState, url]);
+  const {
+    details,
+    status,
+    metadataStatus
+  } = getState()[url] || {
+    status: SmartLinkStatus.Pending,
+    details: undefined
+  };
   const setMetadataStatus = useCallback(metadataStatus => {
     dispatch(cardAction(ACTION_UPDATE_METADATA_STATUS, {
       url
@@ -38,9 +31,6 @@ export const useSmartCardActions = (id, url, analytics) => {
   }, [dispatch, url]);
   const resolve = useCallback(async (resourceUrl = url, isReloading = false, isMetadataRequest = false) => resolveUrl(resourceUrl, isReloading, isMetadataRequest, id), [id, resolveUrl, url]);
   const register = useCallback(() => {
-    const {
-      details
-    } = getSmartLinkState();
     if (!details) {
       dispatch(cardAction(ACTION_RESOLVING, {
         url
@@ -48,33 +38,23 @@ export const useSmartCardActions = (id, url, analytics) => {
       setMetadataStatus('pending');
     }
     return resolve();
-  }, [getSmartLinkState, resolve, dispatch, url, setMetadataStatus]);
+  }, [details, resolve, dispatch, url, setMetadataStatus]);
   const reload = useCallback(() => {
-    const {
-      details
-    } = getSmartLinkState();
     const definitionId = getDefinitionId(details);
     if (definitionId) {
       getByDefinitionId(definitionId, getState()).map(url => resolve(url, true));
     } else {
       resolve(url, true);
     }
-  }, [getSmartLinkState, url, getState, resolve]);
+  }, [details, url, getState, resolve]);
   const loadMetadata = useCallback(() => {
-    const {
-      metadataStatus
-    } = getSmartLinkState();
     //metadataStatus will be undefined for SSR links only
     if (metadataStatus === undefined) {
       setMetadataStatus('pending');
       return resolve(url, false, true);
     }
-  }, [getSmartLinkState, resolve, setMetadataStatus, url]);
+  }, [metadataStatus, resolve, setMetadataStatus, url]);
   const authorize = useCallback(appearance => {
-    const {
-      details,
-      status
-    } = getSmartLinkState();
     const definitionId = getDefinitionId(details);
     const extensionKey = getExtensionKey(details);
     const services = getServices(details);
@@ -126,7 +106,7 @@ export const useSmartCardActions = (id, url, analytics) => {
         reload();
       });
     }
-  }, [getSmartLinkState, analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload]);
+  }, [analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload, details, status]);
   const invoke = useCallback(async (opts, appearance) => {
     const {
       key,

package/dist/es2019/state/hooks/use-resolve/index.js

@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import { unstable_batchedUpdates } from 'react-dom';
 import { addMetadataToExperience } from '../../analytics';
 import { getStatus } from '../../helpers';
 import { ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, ACTION_RESOLVED, ACTION_UPDATE_METADATA_STATUS, APIError, cardAction } from '@atlaskit/linking-common';
@@ -99,26 +98,18 @@ const useResolve = () => {
       return;
     }
 
-    /**
-     * Using unstable_batchedUpdates because this store update happens async and trigers a rerender
-     * more info:
-     * https://github.com/facebook/react/blob/v18.2.0/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L113
-     * https://react-redux.js.org/api/batch
-     */
-    unstable_batchedUpdates(() => {
-      //if a link resolves normally, metadata will also always be resolved
-      setMetadataStatus(resourceUrl, 'resolved');
-      // Dispatch Analytics and resolved card action - including unauthorized states.
-      if (isReloading) {
-        dispatch(cardAction(ACTION_RELOADING, {
-          url: resourceUrl
-        }, response));
-      } else {
-        dispatch(cardAction(ACTION_RESOLVED, {
-          url: resourceUrl
-        }, response, undefined, undefined, isMetadataRequest));
-      }
-    });
+    //if a link resolves normally, metadata will also always be resolved
+    setMetadataStatus(resourceUrl, 'resolved');
+    // Dispatch Analytics and resolved card action - including unauthorized states.
+    if (isReloading) {
+      dispatch(cardAction(ACTION_RELOADING, {
+        url: resourceUrl
+      }, response));
+    } else {
+      dispatch(cardAction(ACTION_RESOLVED, {
+        url: resourceUrl
+      }, response, undefined, undefined, isMetadataRequest));
+    }
   }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported, setMetadataStatus]);
   return useCallback(async (url, isReloading = false, isMetadataRequest = false, id = '') => {
     const {

package/dist/es2019/version.json

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

package/dist/es2019/view/CardWithUrl/component.js

@@ -12,8 +12,7 @@ import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
 import { CardDisplay } from '../../constants';
 import { fireLinkClickedEvent } from '../../utils/analytics/click';
-import { SmartLinkAnalyticsContext } from '../../utils/analytics/SmartLinkAnalyticsContext';
-function Component({
+export function CardWithUrlContent({
   id,
   url,
   isSelected,
@@ -255,9 +254,4 @@ function Component({
         onIframeFocus: onIframeFocus
       });
   }
-}
-export const CardWithUrlContent = props => /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
-  url: props.url,
-  appearance: props.appearance,
-  id: props.id
-}, /*#__PURE__*/React.createElement(Component, props));
+}

package/dist/es2019/view/EmbedModal/components/analytics/index.js

@@ -13,23 +13,23 @@ const withAnalytics = Component => props => {
     origin
   } = props;
   const handleOnOpen = useCallback(context => {
-    analytics.screen.modalViewedEvent({
+    analytics === null || analytics === void 0 ? void 0 : analytics.screen.modalViewedEvent({
       name: 'embedPreviewModal',
       attributes: {
         origin,
         size: context.size
       }
     });
-    analytics.ui.renderSuccessEvent({
+    analytics === null || analytics === void 0 ? void 0 : analytics.ui.renderSuccessEvent({
       status: 'resolved',
       display: CardDisplay.EmbedPreview
     });
     if (onOpen) {
       onOpen(context);
     }
-  }, [analytics.screen, analytics.ui, onOpen, origin]);
+  }, [analytics === null || analytics === void 0 ? void 0 : analytics.screen, analytics === null || analytics === void 0 ? void 0 : analytics.ui, onOpen, origin]);
   const handleOnOpenFailed = useCallback((error, errorInfo) => {
-    analytics.ui.renderFailedEvent({
+    analytics === null || analytics === void 0 ? void 0 : analytics.ui.renderFailedEvent({
       display: CardDisplay.EmbedPreview,
       error,
       errorInfo
@@ -37,9 +37,9 @@ const withAnalytics = Component => props => {
     if (onOpenFailed) {
       onOpenFailed(error, errorInfo);
     }
-  }, [analytics.ui, onOpenFailed]);
+  }, [analytics === null || analytics === void 0 ? void 0 : analytics.ui, onOpenFailed]);
   const handleOnClose = useCallback(context => {
-    analytics.ui.modalClosedEvent({
+    analytics === null || analytics === void 0 ? void 0 : analytics.ui.modalClosedEvent({
       actionSubjectId: 'embedPreview',
       attributes: {
         origin,
@@ -50,9 +50,9 @@ const withAnalytics = Component => props => {
     if (onClose) {
       onClose(context);
     }
-  }, [analytics.ui, onClose, origin]);
+  }, [analytics === null || analytics === void 0 ? void 0 : analytics.ui, onClose, origin]);
   const handleOnResize = useCallback(context => {
-    analytics.ui.buttonClickedEvent({
+    analytics === null || analytics === void 0 ? void 0 : analytics.ui.buttonClickedEvent({
       actionSubjectId: 'embedPreviewResize',
       attributes: {
         newSize: context.size,
@@ -63,7 +63,7 @@ const withAnalytics = Component => props => {
     if (onResize) {
       onResize(context);
     }
-  }, [analytics.ui, onResize, origin]);
+  }, [analytics === null || analytics === void 0 ? void 0 : analytics.ui, onResize, origin]);
   return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
     onClose: handleOnClose,
     onOpen: handleOnOpen,

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

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { IntlProvider } from 'react-intl-next';
+import Icon from '../FlexibleCard/components/elements/icon';
+export const openPreviewModal = ({
+  analytics,
+  downloadUrl: download,
+  isSupportTheming,
+  linkIcon,
+  onClose = () => {},
+  providerName,
+  src,
+  title,
+  url
+}) => {
+  const EmbedIcon = {
+    icon: /*#__PURE__*/React.createElement(Icon, linkIcon),
+    isFlexibleUi: true
+  };
+  return previewFunction({
+    popupMountPointId: 'twp-editor-preview-iframe',
+    showModal: true,
+    iframeName: 'twp-editor-preview-iframe',
+    onClose,
+    download,
+    icon: EmbedIcon,
+    providerName: providerName || 'Preview',
+    src,
+    title,
+    url,
+    analytics,
+    origin: 'smartLinkCard',
+    isSupportTheming
+  });
+};
+
+/*
+  Explanatory note:
+  Actions don't have access to the react tree of whatever is rendered them
+  (and this concept is fraught inside editor anyway) so we want to ensure
+  it is mounting to a new unique place. This function manages that, including
+  creating an element if it doesn't exist, as well as tidying up the react tree
+  (but not the element) upon closing the modal.
+
+  This may strike you as really uncomfortable as you read it, so I wanted to note
+  that a) this was discussed and agreed upon, and b) it's definitely odd, and if
+  you find an elegant solution around this, you should definitely feel free to
+  refactor it.
+*/
+export async function previewFunction({
+  popupMountPointId,
+  onClose: onEmbedClose,
+  ...rest
+}) {
+  let popupMountPoint;
+  popupMountPoint = document.getElementById(popupMountPointId);
+  if (!popupMountPoint) {
+    popupMountPoint = document.createElement('div');
+    popupMountPoint.id = popupMountPointId;
+    popupMountPoint.setAttribute('data-testid', 'preview-modal');
+    document.body.appendChild(popupMountPoint);
+  }
+  let Modal = await import('./index');
+  ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+    onClose: _context => {
+      if (popupMountPoint) {
+        ReactDOM.unmountComponentAtNode(popupMountPoint);
+      }
+      if (onEmbedClose) {
+        onEmbedClose(_context);
+      }
+    }
+  }))), popupMountPoint);
+}