@atlaskit/smart-card 23.4.7 → 23.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/smart-card
 
+## 23.5.0
+
+### Minor Changes
+
+- [`9dd3377f9bb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9dd3377f9bb) - [ux] This adds support for the new Flexible UI Block Card, added behind a feature flag "useFlexibleBlockCard"
+
+### Patch Changes
+
+- Updated dependencies
+
+## 23.4.8
+
+### Patch Changes
+
+- [`ca2b5b1a999`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ca2b5b1a999) - [ux] fix Safari opening downloads in the same tab
+
 ## 23.4.7
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SmartLinkWidth = exports.SmartLinkTheme = exports.SmartLinkStatus = exports.SmartLinkSize = exports.SmartLinkPosition = exports.SmartLinkDirection = exports.SmartLinkAlignment = exports.MediaType = exports.IconType = exports.ElementName = exports.CONTENT_URL_SECURITY_AND_PERMISSIONS = exports.ActionName = void 0;
+exports.SmartLinkWidth = exports.SmartLinkTheme = exports.SmartLinkStatus = exports.SmartLinkSize = exports.SmartLinkPosition = exports.SmartLinkDirection = exports.SmartLinkAlignment = exports.MediaType = exports.MediaPlacement = exports.IconType = exports.ElementName = exports.CONTENT_URL_SECURITY_AND_PERMISSIONS = exports.ActionName = void 0;
 var CONTENT_URL_SECURITY_AND_PERMISSIONS = 'https://support.atlassian.com/confluence-cloud/docs/insert-links-and-anchors/#Smart-links';
 /**
  * The alignment of Flexible UI component.
@@ -249,4 +249,12 @@ exports.MediaType = MediaType;
 
 (function (MediaType) {
   MediaType["Image"] = "image";
-})(MediaType || (exports.MediaType = MediaType = {}));
+})(MediaType || (exports.MediaType = MediaType = {}));
+
+var MediaPlacement;
+exports.MediaPlacement = MediaPlacement;
+
+(function (MediaPlacement) {
+  MediaPlacement["Left"] = "left";
+  MediaPlacement["Right"] = "right";
+})(MediaPlacement || (exports.MediaPlacement = MediaPlacement = {}));

package/dist/cjs/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "FooterBlock", {
     return _blocks.FooterBlock;
   }
 });
+Object.defineProperty(exports, "MediaPlacement", {
+  enumerable: true,
+  get: function get() {
+    return _constants.MediaPlacement;
+  }
+});
 Object.defineProperty(exports, "MetadataBlock", {
   enumerable: true,
   get: function get() {

package/dist/cjs/state/flexible-ui-context/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFlexUiPreviewPresent = void 0;
+
+/**
+ * Returns true if preview data is available in the FlexibleUiDataContext
+ * @param context is the FlexibleUiDataContext
+ */
+var isFlexUiPreviewPresent = function isFlexUiPreviewPresent(context) {
+  return Boolean(context && context.preview);
+};
+
+exports.isFlexUiPreviewPresent = isFlexUiPreviewPresent;

package/dist/cjs/utils/flexible.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isFlexibleUiTitleBlock = exports.isFlexibleUiElement = exports.isFlexibleUiCard = exports.isFlexibleUiBlock = void 0;
+exports.isFlexibleUiTitleBlock = exports.isFlexibleUiPreviewBlock = exports.isFlexibleUiElement = exports.isFlexibleUiCard = exports.isFlexibleUiBlock = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -51,4 +51,10 @@ var isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && node.type === Blocks.TitleBlock;
 };
 
-exports.isFlexibleUiTitleBlock = isFlexibleUiTitleBlock;
+exports.isFlexibleUiTitleBlock = isFlexibleUiTitleBlock;
+
+var isFlexibleUiPreviewBlock = function isFlexibleUiPreviewBlock(node) {
+  return /*#__PURE__*/_react.default.isValidElement(node) && node.type === Blocks.PreviewBlock;
+};
+
+exports.isFlexibleUiPreviewBlock = isFlexibleUiPreviewBlock;

package/dist/cjs/version.json

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

package/dist/cjs/view/BlockCard/components/flexible/footer/index.js

@@ -42,7 +42,7 @@ var providerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0
  * @param props are the data required for the block, such as actions to be displayed.
  */
 
-var Footer = function Footer(props) {
+var BlockCardFooter = function BlockCardFooter(props) {
   var actions = props.actions,
       _props$size = props.size,
       size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
@@ -63,5 +63,5 @@ var Footer = function Footer(props) {
   })) : null);
 };
 
-var _default = Footer;
+var _default = BlockCardFooter;
 exports.default = _default;

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

@@ -63,7 +63,7 @@ Object.defineProperty(exports, "PreviewAction", {
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _helpers = require("../../state/helpers");
 
@@ -91,15 +91,31 @@ var _ForbiddenView = require("./views/ForbiddenView");
 
 var _ErroredView = require("./views/ErroredView");
 
+var _FlexibleResolvedView = _interopRequireDefault(require("./views/flexible/FlexibleResolvedView"));
+
+var _FlexibleUnauthorisedView = _interopRequireDefault(require("./views/flexible/FlexibleUnauthorisedView"));
+
+var _FlexibleNotFoundView = _interopRequireDefault(require("./views/flexible/FlexibleNotFoundView"));
+
+var _FlexibleErroredView = _interopRequireDefault(require("./views/flexible/FlexibleErroredView"));
+
+var _FlexibleForbiddenView = _interopRequireDefault(require("./views/flexible/FlexibleForbiddenView"));
+
+var _token = require("../../utils/token");
+
+var _react = require("@emotion/react");
+
 var _PreviewAction = _interopRequireDefault(require("./actions/PreviewAction"));
 
+var _templateObject;
+
+var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), _token.tokens.elevation);
+
 var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
 
   var url = _ref.url,
-      _ref$cardState = _ref.cardState,
-      status = _ref$cardState.status,
-      details = _ref$cardState.details,
+      cardState = _ref.cardState,
       authFlow = _ref.authFlow,
       handleAuthorize = _ref.handleAuthorize,
       handleErrorRetry = _ref.handleErrorRetry,
@@ -112,7 +128,10 @@ var BlockCard = function BlockCard(_ref) {
       testId = _ref.testId,
       showActions = _ref.showActions,
       platform = _ref.platform,
-      analytics = _ref.analytics;
+      analytics = _ref.analytics,
+      enableFlexibleBlockCard = _ref.enableFlexibleBlockCard;
+  var status = cardState.status,
+      details = cardState.details;
   var data = details && details.data || (0, _jsonld.getEmptyJsonLd)();
   var meta = details && details.meta;
   var extractorOpts = {
@@ -122,10 +141,62 @@ var BlockCard = function BlockCard(_ref) {
     extensionKey: (0, _helpers.getExtensionKey)(details)
   };
 
+  if (enableFlexibleBlockCard) {
+    var ui = {
+      hideElevation: true
+    };
+    var flexibleProps = {
+      cardState: cardState,
+      url: url,
+      testId: testId,
+      onError: onError,
+      renderers: renderers,
+      ui: ui
+    };
+
+    switch (status) {
+      case 'pending':
+      case 'resolving':
+      case 'resolved':
+        return (0, _react.jsx)("div", {
+          css: flexibleBlockCardElevationStyle
+        }, (0, _react.jsx)(_FlexibleResolvedView.default, flexibleProps));
+
+      case 'unauthorized':
+        return (0, _react.jsx)("div", {
+          css: flexibleBlockCardElevationStyle
+        }, (0, _react.jsx)(_FlexibleUnauthorisedView.default, (0, _extends2.default)({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+
+      case 'forbidden':
+        return (0, _react.jsx)("div", {
+          css: flexibleBlockCardElevationStyle
+        }, (0, _react.jsx)(_FlexibleForbiddenView.default, (0, _extends2.default)({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+
+      case 'not_found':
+        return (0, _react.jsx)("div", {
+          css: flexibleBlockCardElevationStyle
+        }, (0, _react.jsx)(_FlexibleNotFoundView.default, (0, _extends2.default)({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+
+      case 'fallback':
+      case 'errored':
+        return (0, _react.jsx)("div", {
+          css: flexibleBlockCardElevationStyle
+        }, (0, _react.jsx)(_FlexibleErroredView.default, (0, _extends2.default)({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+    }
+  }
+
   switch (status) {
     case 'pending':
     case 'resolving':
-      return /*#__PURE__*/_react.default.createElement(_ResolvingView.ResolvingView, {
+      return (0, _react.jsx)(_ResolvingView.ResolvingView, {
         testId: testId,
         isSelected: isSelected
       });
@@ -140,7 +211,7 @@ var BlockCard = function BlockCard(_ref) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(_ResolvedView.ResolvedView, (0, _extends2.default)({}, resolvedViewProps, {
+      return (0, _react.jsx)(_ResolvedView.ResolvedView, (0, _extends2.default)({}, resolvedViewProps, {
         isSelected: isSelected,
         testId: testId,
         showActions: showActions,
@@ -156,7 +227,7 @@ var BlockCard = function BlockCard(_ref) {
       }
 
       var unauthorizedViewProps = (0, _block.extractBlockProps)(data, meta, extractorOpts);
-      return /*#__PURE__*/_react.default.createElement(_UnauthorizedView.UnauthorizedView, (0, _extends2.default)({}, unauthorizedViewProps, {
+      return (0, _react.jsx)(_UnauthorizedView.UnauthorizedView, (0, _extends2.default)({}, unauthorizedViewProps, {
         isSelected: isSelected,
         testId: testId,
         showActions: showActions,
@@ -179,7 +250,7 @@ var BlockCard = function BlockCard(_ref) {
         url: url,
         context: (_forbiddenViewProps$c = forbiddenViewProps.context) === null || _forbiddenViewProps$c === void 0 ? void 0 : _forbiddenViewProps$c.text
       });
-      return /*#__PURE__*/_react.default.createElement(_ForbiddenView.ForbiddenView, (0, _extends2.default)({}, forbiddenViewProps, {
+      return (0, _react.jsx)(_ForbiddenView.ForbiddenView, (0, _extends2.default)({}, forbiddenViewProps, {
         isSelected: isSelected,
         showActions: showActions,
         actions: handleAuthorize ? [(0, _ForbiddenAction.ForbiddenAction)(handleAuthorize)] : [],
@@ -196,7 +267,7 @@ var BlockCard = function BlockCard(_ref) {
       }
 
       var notFoundViewProps = (0, _block.extractBlockProps)(data, meta, extractorOpts);
-      return /*#__PURE__*/_react.default.createElement(_NotFoundView.NotFoundView, (0, _extends2.default)({}, notFoundViewProps, {
+      return (0, _react.jsx)(_NotFoundView.NotFoundView, (0, _extends2.default)({}, notFoundViewProps, {
         isSelected: isSelected,
         testId: testId,
         onClick: handleFrameClick
@@ -213,7 +284,7 @@ var BlockCard = function BlockCard(_ref) {
       }
 
       if (authFlow && authFlow === 'disabled') {
-        return /*#__PURE__*/_react.default.createElement(_LinkView.CardLinkView, {
+        return (0, _react.jsx)(_LinkView.CardLinkView, {
           link: url,
           isSelected: isSelected,
           onClick: handleFrameClick,
@@ -221,7 +292,7 @@ var BlockCard = function BlockCard(_ref) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(_ErroredView.ErroredView, {
+      return (0, _react.jsx)(_ErroredView.ErroredView, {
         link: url,
         isSelected: isSelected,
         onRetry: handleErrorRetry,

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

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
+
+var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
+
+var _blocks = require("../../../FlexibleCard/components/blocks");
+
+var _constants = require("../../../../constants");
+
+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; }
+
+/**
+ * This view represents a Block card that has an 'Resolved' status.
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
+  var 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;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isPreviewBlockErrored = _useState2[0],
+      setIsPreviewBlockErrored = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setIsPreviewBlockErrored(false);
+  }, [url, cardState]);
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
+    cardState: cardState,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+    position: _constants.SmartLinkPosition.Center,
+    metadata: [{
+      name: _constants.ElementName.AuthorGroup
+    }, {
+      name: _constants.ElementName.Priority
+    }, {
+      name: _constants.ElementName.State
+    }],
+    hideRetry: true
+  }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+    primary: [{
+      name: _constants.ElementName.ModifiedBy
+    }, {
+      name: _constants.ElementName.ModifiedOn
+    }],
+    secondary: [{
+      name: _constants.ElementName.AttachmentCount
+    }, {
+      name: _constants.ElementName.CommentCount
+    }, {
+      name: _constants.ElementName.ReactCount
+    }, {
+      name: _constants.ElementName.SubscriberCount
+    }, {
+      name: _constants.ElementName.ViewCount
+    }, {
+      name: _constants.ElementName.VoteCount
+    }, {
+      name: _constants.ElementName.DueOn
+    }],
+    maxLines: 1
+  }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), !isPreviewBlockErrored ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
+    placement: _constants.MediaPlacement.Right,
+    ignoreContainerPadding: true,
+    onError: function onError() {
+      setIsPreviewBlockErrored(true);
+    }
+  }) : null, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
+    actions: [{
+      name: _constants.ActionName.PreviewAction
+    }, {
+      name: _constants.ActionName.ViewAction
+    }, {
+      name: _constants.ActionName.DownloadAction
+    }]
+  }));
+};
+
+var _default = FlexibleResolvedView;
+exports.default = _default;

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

@@ -34,7 +34,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * It should have a "Connect" button that will allow a user to connect their account and view the block card.
  *
  * @see SmartLinkStatus
- * @see UnauthorisedViewProps
+ * @see FlexibleCardProps
  */
 var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
   var cardState = _ref.cardState,

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

@@ -81,8 +81,9 @@ function CardWithUrlContent(_ref) {
 
   if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
     showHoverPreview = Boolean(showHoverPreviewFlag);
-  } // Setup UI handlers.
+  }
 
+  var enableFlexibleBlockCardFlag = Boolean((0, _linkProvider.useFeatureFlag)('enableFlexibleBlockCard')); // Setup UI handlers.
 
   var handleClick = (0, _react.useCallback)(function (event) {
     var clickUrl = (0, _helpers.getClickUrl)(url, state.details);
@@ -215,7 +216,8 @@ function CardWithUrlContent(_ref) {
         onError: onError,
         testId: testId,
         showActions: showActions,
-        platform: platform
+        platform: platform,
+        enableFlexibleBlockCard: enableFlexibleBlockCardFlag
       });
 
     case 'embed':

package/dist/cjs/view/EmbedModal/components/link-info/index.js

@@ -66,7 +66,8 @@ var LinkInfo = function LinkInfo(_ref) {
           label: _messages.messages.download.defaultMessage
         }),
         onClick: onDownloadButtonClick,
-        testId: "".concat(testId, "-download")
+        testId: "".concat(testId, "-download"),
+        target: "_blank"
       });
     }
   }, [downloadUrl, onDownloadButtonClick, testId]);

package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/index.js

@@ -13,13 +13,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _constants = require("../../../../../constants");
+var _react2 = require("@emotion/react");
 
-var _block = _interopRequireDefault(require("../block"));
+var _constants = require("../../../../../constants");
 
-var _elements = require("../../elements");
+var _resolved = _interopRequireDefault(require("./resolved"));
 
-var _excluded = ["status", "testId", "onError"];
+var _excluded = ["status", "testId"];
 
 /**
  * Represents a PreviewBlock, which typically contains media or other large format content.
@@ -32,17 +32,14 @@ var PreviewBlock = function PreviewBlock(_ref) {
       status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
-      onError = _ref.onError,
       blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   if (status !== _constants.SmartLinkStatus.Resolved) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
-    testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/_react.default.createElement(_elements.Preview, {
-    onError: onError
+  return (0, _react2.jsx)(_resolved.default, (0, _extends2.default)({}, blockProps, {
+    testId: testId
   }));
 };
 

package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/resolved/index.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _constants = require("../../../../../../constants");
+
+var _block = _interopRequireDefault(require("../../block"));
+
+var _elements = require("../../../elements");
+
+var _excluded = ["ignoreContainerPadding", "onError", "overrideCss", "placement", "testId"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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; }
+
+/**
+ * Due to its placement on the left/right and ignoreContainerPadding prop
+ * rely on its parent container styling, css variables are declared in
+ * <Container /> to preset the base values for the preview block styling.
+ *
+ * `--container-padding` is the padding of the Container. This value is based
+ *   on size and hidePadding.
+ * `--container-gap-left` and `--container-gap-right` are the gap or padding of
+ *   the Container depending on whether the container has other preview blocks
+ *   with left/right positioning.
+ * `--preview-block-width` is the size of the preview image in relation to
+ *   the Container width when the placement is left/right.
+ * @param placement
+ * @param ignoreContainerPadding
+ */
+var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreContainerPadding) {
+  if (placement === _constants.MediaPlacement.Left || placement === _constants.MediaPlacement.Right) {
+    var containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      position: absolute;\n      top: ", ";\n      bottom: ", ";\n      width: calc(var(--preview-block-width) - ", ");\n\n      ", "\n      ", "\n\n      [data-smart-element-media='image'] {\n        aspect-ratio: unset;\n        padding-top: unset;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n    "])), containerPadding, containerPadding, containerPadding, placement === _constants.MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === _constants.MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
+  }
+
+  if (ignoreContainerPadding) {
+    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      margin-left: calc(var(--container-gap-left) * -1);\n      margin-right: calc(var(--container-gap-right) * -1);\n      &:first-of-type {\n        margin-top: calc(var(--container-padding) * -1);\n      }\n      &:last-of-type {\n        margin-bottom: calc(var(--container-padding) * -1);\n      }\n    "])));
+  }
+};
+/**
+ * Represents a resolved PreviewBlock, which typically contains media or other large format content.
+ * @public
+ * @param {PreviewBlock} PreviewBlock
+ * @see Block
+ */
+
+
+var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
+  var _ref$ignoreContainerP = _ref.ignoreContainerPadding,
+      ignoreContainerPadding = _ref$ignoreContainerP === void 0 ? false : _ref$ignoreContainerP,
+      onError = _ref.onError,
+      overrideCss = _ref.overrideCss,
+      placement = _ref.placement,
+      testId = _ref.testId,
+      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(overrideCss),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      styles = _useState2[0],
+      setStyles = _useState2[1];
+
+  var updateStyles = (0, _react.useCallback)(function () {
+    setStyles((0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      ", "\n      ", "\n    "])), getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
+  }, [ignoreContainerPadding, overrideCss, placement]);
+  (0, _react.useEffect)(function () {
+    updateStyles();
+  }, [ignoreContainerPadding, overrideCss, placement, updateStyles]);
+  var handleOnLoad = (0, _react.useCallback)(function () {
+    updateStyles();
+  }, [updateStyles]);
+  var handleOnError = (0, _react.useCallback)(function () {
+    if (onError) {
+      onError();
+    }
+  }, [onError]);
+  return (0, _react2.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
+    overrideCss: styles,
+    testId: "".concat(testId, "-resolved-view")
+  }), (0, _react2.jsx)(_elements.Preview, {
+    onError: handleOnError,
+    onLoad: handleOnLoad
+  }));
+};
+
+var _default = PreviewBlockResolvedView;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js

@@ -20,7 +20,8 @@ var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
       testId = _ref.testId,
       url = _ref.url,
-      onError = _ref.onError;
+      onError = _ref.onError,
+      onLoad = _ref.onLoad;
   return (0, _react2.jsx)(_reactRenderImage.default, {
     src: url,
     loading: (0, _react2.jsx)(_loadingSkeleton.default, {
@@ -31,7 +32,8 @@ var ImageIcon = function ImageIcon(_ref) {
       "data-testid": "".concat(testId, "-image")
     }),
     errored: defaultIcon,
-    onError: onError
+    onError: onError,
+    onLoad: onLoad
   });
 };