@atlaskit/smart-card 21.2.0 → 21.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/smart-card
 
+## 21.3.0
+
+### Minor Changes
+
+- [`1c76ddcd2f3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1c76ddcd2f3) - [ux] Flex-UI: - Add props to generic block: - onRender - onTransitionEnd - blockRef
+  HoverCard: - use the above properties in Hover Card to apply transition to preview block and fallback to snippet
+
 ## 21.2.0
 
 ### Minor Changes

package/dist/cjs/version.json

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

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
@@ -19,6 +21,10 @@ var _utils = require("../utils");
 
 var _templateObject;
 
+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; }
+
 var getBlockStyles = function getBlockStyles(direction, size) {
   return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), _utils.highlightRemoveStyles, (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
 };
@@ -39,11 +45,19 @@ var Block = function Block(_ref) {
       size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId,
-      overrideCss = _ref.overrideCss;
+      overrideCss = _ref.overrideCss,
+      blockRef = _ref.blockRef,
+      onRender = _ref.onRender,
+      onTransitionEnd = _ref.onTransitionEnd;
+  (0, _react.useEffect)(function () {
+    onRender && onRender();
+  }, [onRender]);
   return (0, _core.jsx)("div", {
     css: [getBlockStyles(direction, size), overrideCss],
     "data-smart-block": true,
-    "data-testid": testId
+    "data-testid": testId,
+    onTransitionEnd: onTransitionEnd,
+    ref: blockRef
   }, (0, _utils.renderChildren)(children, size));
 };
 

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

@@ -19,7 +19,7 @@ var _block = _interopRequireDefault(require("../block"));
 
 var _elements = require("../../elements");
 
-var _excluded = ["status", "testId"];
+var _excluded = ["status", "testId", "onError"];
 
 /**
  * Represents a PreviewBlock, which typically contains media or other large format content.
@@ -32,6 +32,7 @@ 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) {
@@ -40,7 +41,9 @@ var PreviewBlock = function PreviewBlock(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/_react.default.createElement(_elements.Preview, null));
+  }), /*#__PURE__*/_react.default.createElement(_elements.Preview, {
+    onError: onError
+  }));
 };
 
 var _default = PreviewBlock;

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

@@ -19,7 +19,8 @@ var _loadingSkeleton = _interopRequireDefault(require("../loading-skeleton"));
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
       testId = _ref.testId,
-      url = _ref.url;
+      url = _ref.url,
+      onError = _ref.onError;
   return (0, _core.jsx)(_reactRenderImage.default, {
     src: url,
     loading: (0, _core.jsx)(_loadingSkeleton.default, {
@@ -29,7 +30,8 @@ var ImageIcon = function ImageIcon(_ref) {
       src: url,
       "data-testid": "".concat(testId, "-image")
     }),
-    errored: defaultIcon
+    errored: defaultIcon,
+    onError: onError
   });
 };
 

package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -21,8 +21,7 @@ var LoadingSkeleton = function LoadingSkeleton(_ref) {
   var testId = _ref.testId,
       width = _ref.width,
       height = _ref.height;
-  var animationWidth = width ? "".concat(width, "rem") : '20px';
-  var animationNameStyles = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    0% { background-position: -", "  0; }\n    100% { background-position: ", " 0; }\n  "])), animationWidth, animationWidth);
+  var animationNameStyles = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    0% { background-position: 50%  0; }\n    100% { background-position: -50% 0; }\n  "])));
   var styles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n    background-image: linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 20%,\n      ", " 40%,\n      ", "100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
   return (0, _core.jsx)("span", {
     css: styles,

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

@@ -41,7 +41,8 @@ var Media = function Media(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
       type = _ref.type,
-      url = _ref.url;
+      url = _ref.url,
+      onError = _ref.onError;
 
   if (!type || !url) {
     return null;
@@ -54,7 +55,9 @@ var Media = function Media(_ref) {
     "data-testid": testId
   }, (0, _core.jsx)(_imageIcon.default, {
     testId: "".concat(testId, "-image"),
-    url: url
+    url: url,
+    onError: onError,
+    defaultIcon: null
   }));
 };
 

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

@@ -17,8 +17,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _constants = require("../../../constants");
 
-var _extractPreview = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
-
 var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
 
 var _actions = require("../../../state/actions");
@@ -37,6 +35,8 @@ var _utils2 = require("../utils");
 
 var _HoverCardLoadingView = _interopRequireDefault(require("./HoverCardLoadingView"));
 
+var _SnippetOrPreview = _interopRequireDefault(require("./SnippetOrPreview"));
+
 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; }
@@ -126,7 +126,19 @@ var HoverCardContent = function HoverCardContent(_ref) {
       subtitle = _extractMetadata.subtitle;
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
-  var body = data && (0, _extractPreview.default)(data) ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, null) : /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null);
+
+  var snippetHeight = _react.default.useRef(0);
+
+  var snippetBlockRef = (0, _react.useRef)(null);
+  var onSnippetRender = (0, _react.useCallback)(function () {
+    var _snippetBlockRef$curr, _snippetBlockRef$curr2;
+
+    snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
+  }, []);
+  var body = (0, _SnippetOrPreview.default)({
+    data: data,
+    snippetHeight: snippetHeight.current
+  });
   var titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
@@ -159,7 +171,12 @@ var HoverCardContent = function HoverCardContent(_ref) {
     size: _constants.SmartLinkSize.Large,
     overrideCss: _styled.metadataBlockCss,
     maxLines: 1
-  }), body, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
+  }), body, /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
+    testId: 'hidden-snippet',
+    onRender: onSnippetRender,
+    blockRef: snippetBlockRef,
+    overrideCss: _styled.hiddenSnippetStyles
+  }), /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
     actions: footerActions,
     size: _constants.SmartLinkSize.Large,
     overrideCss: _styled.footerBlockCss

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

@@ -0,0 +1,74 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
+
+var _extractPreview = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
+
+var _blocks = require("../../FlexibleCard/components/blocks");
+
+var _styled = require("../styled");
+
+var _templateObject;
+
+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; }
+
+var SnippetOrPreview = function SnippetOrPreview(_ref) {
+  var data = _ref.data,
+      snippetHeight = _ref.snippetHeight;
+  var transitionStarted = (0, _react.useRef)(false);
+  var previewBlockRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showSnippet = _useState2[0],
+      setShowSnippet = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      previewCss = _useState4[0],
+      setPreviewCss = _useState4[1]; // Set Preview to a fixed height to enable transitions
+
+
+  var onPreviewRender = (0, _react.useCallback)(function () {
+    var _previewBlockRef$curr;
+
+    previewBlockRef.current && setPreviewCss((0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        height: ", "px;\n      "])), (_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
+  }, []); // On error set Preview to Snippet height with transition
+
+  var onPreviewError = (0, _react.useCallback)(function () {
+    if (transitionStarted.current === false) {
+      setPreviewCss((0, _styled.getTransitionStyles)(snippetHeight));
+      transitionStarted.current = true;
+    }
+  }, [snippetHeight]);
+  var onPreviewTransitionEnd = (0, _react.useCallback)(function () {
+    setShowSnippet(true);
+  }, []);
+  return !showSnippet && data && (0, _extractPreview.default)(data) ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
+    onError: onPreviewError,
+    overrideCss: previewCss,
+    onTransitionEnd: onPreviewTransitionEnd,
+    blockRef: previewBlockRef,
+    onRender: onPreviewRender
+  }) : /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null);
+};
+
+var _default = SnippetOrPreview;
+exports.default = _default;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.skeletonContainer = exports.metadataBlockCss = exports.loadingViewContainer = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
+exports.titleBlockCss = exports.skeletonContainer = exports.metadataBlockCss = exports.loadingViewContainer = exports.hiddenSnippetStyles = exports.getTransitionStyles = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,7 +15,7 @@ var _index = require("../../index");
 
 var _constants = require("../../constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 var flexibleUiOptions = {
   hideElevation: true,
@@ -44,4 +44,12 @@ exports.footerBlockCss = footerBlockCss;
 var loadingViewContainer = (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
 exports.loadingViewContainer = loadingViewContainer;
 var skeletonContainer = (0, _core.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
-exports.skeletonContainer = skeletonContainer;
+exports.skeletonContainer = skeletonContainer;
+var hiddenSnippetStyles = (0, _core.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  visibility: hidden;\n  position: absolute;\n"])));
+exports.hiddenSnippetStyles = hiddenSnippetStyles;
+
+var getTransitionStyles = function getTransitionStyles(snippetHeight) {
+  return (0, _core.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
+};
+
+exports.getTransitionStyles = getTransitionStyles;

package/dist/es2019/version.json

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

package/dist/es2019/view/FlexibleCard/components/blocks/block/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { css, jsx } from '@emotion/core';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
@@ -37,11 +37,21 @@ const Block = ({
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
   testId = 'smart-block',
-  overrideCss
-}) => jsx("div", {
-  css: [getBlockStyles(direction, size), overrideCss],
-  "data-smart-block": true,
-  "data-testid": testId
-}, renderChildren(children, size));
+  overrideCss,
+  blockRef,
+  onRender,
+  onTransitionEnd
+}) => {
+  useEffect(() => {
+    onRender && onRender();
+  }, [onRender]);
+  return jsx("div", {
+    css: [getBlockStyles(direction, size), overrideCss],
+    "data-smart-block": true,
+    "data-testid": testId,
+    onTransitionEnd: onTransitionEnd,
+    ref: blockRef
+  }, renderChildren(children, size));
+};
 
 export default Block;

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

@@ -13,6 +13,7 @@ import { Preview } from '../../elements';
 const PreviewBlock = ({
   status = SmartLinkStatus.Fallback,
   testId = 'smart-block-preview',
+  onError,
   ...blockProps
 }) => {
   if (status !== SmartLinkStatus.Resolved) {
@@ -21,7 +22,9 @@ const PreviewBlock = ({
 
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: `${testId}-resolved-view`
-  }), /*#__PURE__*/React.createElement(Preview, null));
+  }), /*#__PURE__*/React.createElement(Preview, {
+    onError: onError
+  }));
 };
 
 export default PreviewBlock;

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

@@ -7,7 +7,8 @@ import LoadingSkeleton from '../loading-skeleton';
 const ImageIcon = ({
   defaultIcon,
   testId,
-  url
+  url,
+  onError
 }) => jsx(ImageLoader, {
   src: url,
   loading: jsx(LoadingSkeleton, {
@@ -17,7 +18,8 @@ const ImageIcon = ({
     src: url,
     "data-testid": `${testId}-image`
   }),
-  errored: defaultIcon
+  errored: defaultIcon,
+  onError: onError
 });
 
 export default ImageIcon;

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -8,10 +8,9 @@ const LoadingSkeleton = ({
   width,
   height
 }) => {
-  const animationWidth = width ? `${width}rem` : '20px';
   const animationNameStyles = keyframes`
-    0% { background-position: -${animationWidth}  0; }
-    100% { background-position: ${animationWidth} 0; }
+    0% { background-position: 50%  0; }
+    100% { background-position: -50% 0; }
   `;
   const styles = css`
     width: ${width}rem;

package/dist/es2019/view/FlexibleCard/components/elements/media/index.js

@@ -59,7 +59,8 @@ const Media = ({
   overrideCss,
   testId = 'smart-element-media',
   type,
-  url
+  url,
+  onError
 }) => {
   if (!type || !url) {
     return null;
@@ -72,7 +73,9 @@ const Media = ({
     "data-testid": testId
   }, jsx(ImageIcon, {
     testId: `${testId}-image`,
-    url: url
+    url: url,
+    onError: onError,
+    defaultIcon: null
   }));
 };
 

package/dist/es2019/view/HoverCard/components/HoverCardContent.js

@@ -1,17 +1,17 @@
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { extractType } from '@atlaskit/linking-common/extractors';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ActionName, SmartLinkPosition, SmartLinkSize } from '../../../constants';
-import extractPreview from '../../../extractors/flexible/extract-preview';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
 import { useSmartCardActions } from '../../../state/actions';
 import { getExtensionKey } from '../../../state/helpers';
 import { isSpecialEvent } from '../../../utils';
 import FlexibleCard from '../../FlexibleCard';
-import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
-import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss } from '../styled';
+import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
+import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss, hiddenSnippetStyles } from '../styled';
 import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
 import HoverCardLoadingView from './HoverCardLoadingView';
+import SnippetOrPreview from './SnippetOrPreview';
 export const getOpenAction = (url, analytics, onActionClick) => ({
   name: ActionName.CustomAction,
   icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
@@ -79,7 +79,17 @@ const HoverCardContent = ({
     subtitle
   } = extractMetadata(getSimulatedMetadata(extensionKey, types));
   const titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
-  const body = data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, null) : /*#__PURE__*/React.createElement(SnippetBlock, null);
+  const snippetHeight = React.useRef(0);
+  const snippetBlockRef = useRef(null);
+  const onSnippetRender = useCallback(() => {
+    var _snippetBlockRef$curr, _snippetBlockRef$curr2;
+
+    snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
+  }, []);
+  const body = SnippetOrPreview({
+    data: data,
+    snippetHeight: snippetHeight.current
+  });
   const titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
@@ -112,7 +122,12 @@ const HoverCardContent = ({
     size: SmartLinkSize.Large,
     overrideCss: metadataBlockCss,
     maxLines: 1
-  }), body, /*#__PURE__*/React.createElement(FooterBlock, {
+  }), body, /*#__PURE__*/React.createElement(SnippetBlock, {
+    testId: 'hidden-snippet',
+    onRender: onSnippetRender,
+    blockRef: snippetBlockRef,
+    overrideCss: hiddenSnippetStyles
+  }), /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     size: SmartLinkSize.Large,
     overrideCss: footerBlockCss

package/dist/es2019/view/HoverCard/components/SnippetOrPreview.js

@@ -0,0 +1,42 @@
+import React, { useCallback, useState, useRef } from 'react';
+import { css } from '@emotion/core';
+import extractPreview from '../../../extractors/flexible/extract-preview';
+import { PreviewBlock, SnippetBlock } from '../../FlexibleCard/components/blocks';
+import { getTransitionStyles } from '../styled';
+
+const SnippetOrPreview = ({
+  data,
+  snippetHeight
+}) => {
+  const transitionStarted = useRef(false);
+  const previewBlockRef = useRef(null);
+  const [showSnippet, setShowSnippet] = useState(false);
+  const [previewCss, setPreviewCss] = useState(); // Set Preview to a fixed height to enable transitions
+
+  const onPreviewRender = useCallback(() => {
+    var _previewBlockRef$curr;
+
+    previewBlockRef.current && setPreviewCss(css`
+        height: ${(_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height}px;
+      `);
+  }, []); // On error set Preview to Snippet height with transition
+
+  const onPreviewError = useCallback(() => {
+    if (transitionStarted.current === false) {
+      setPreviewCss(getTransitionStyles(snippetHeight));
+      transitionStarted.current = true;
+    }
+  }, [snippetHeight]);
+  const onPreviewTransitionEnd = useCallback(() => {
+    setShowSnippet(true);
+  }, []);
+  return !showSnippet && data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, {
+    onError: onPreviewError,
+    overrideCss: previewCss,
+    onTransitionEnd: onPreviewTransitionEnd,
+    blockRef: previewBlockRef,
+    onRender: onPreviewRender
+  }) : /*#__PURE__*/React.createElement(SnippetBlock, null);
+};
+
+export default SnippetOrPreview;

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

@@ -83,4 +83,12 @@ export const skeletonContainer = css`
   flex-direction: column;
   gap: 0.625rem;
   align-items: center;
+`;
+export const hiddenSnippetStyles = css`
+  visibility: hidden;
+  position: absolute;
+`;
+export const getTransitionStyles = snippetHeight => css`
+  transition: height 300ms ease-in-out;
+  height: ${snippetHeight}px;
 `;

package/dist/esm/version.json

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

package/dist/esm/view/FlexibleCard/components/blocks/block/index.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 /** @jsx jsx */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { css, jsx } from '@emotion/core';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
@@ -28,11 +28,19 @@ var Block = function Block(_ref) {
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId,
-      overrideCss = _ref.overrideCss;
+      overrideCss = _ref.overrideCss,
+      blockRef = _ref.blockRef,
+      onRender = _ref.onRender,
+      onTransitionEnd = _ref.onTransitionEnd;
+  useEffect(function () {
+    onRender && onRender();
+  }, [onRender]);
   return jsx("div", {
     css: [getBlockStyles(direction, size), overrideCss],
     "data-smart-block": true,
-    "data-testid": testId
+    "data-testid": testId,
+    onTransitionEnd: onTransitionEnd,
+    ref: blockRef
   }, renderChildren(children, size));
 };
 

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["status", "testId"];
+var _excluded = ["status", "testId", "onError"];
 import React from 'react';
 import { SmartLinkStatus } from '../../../../../constants';
 import Block from '../block';
@@ -17,6 +17,7 @@ var PreviewBlock = function PreviewBlock(_ref) {
       status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
+      onError = _ref.onError,
       blockProps = _objectWithoutProperties(_ref, _excluded);
 
   if (status !== SmartLinkStatus.Resolved) {
@@ -25,7 +26,9 @@ var PreviewBlock = function PreviewBlock(_ref) {
 
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/React.createElement(Preview, null));
+  }), /*#__PURE__*/React.createElement(Preview, {
+    onError: onError
+  }));
 };
 
 export default PreviewBlock;

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

@@ -7,7 +7,8 @@ import LoadingSkeleton from '../loading-skeleton';
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
       testId = _ref.testId,
-      url = _ref.url;
+      url = _ref.url,
+      onError = _ref.onError;
   return jsx(ImageLoader, {
     src: url,
     loading: jsx(LoadingSkeleton, {
@@ -17,7 +18,8 @@ var ImageIcon = function ImageIcon(_ref) {
       src: url,
       "data-testid": "".concat(testId, "-image")
     }),
-    errored: defaultIcon
+    errored: defaultIcon,
+    onError: onError
   });
 };
 

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -11,8 +11,7 @@ var LoadingSkeleton = function LoadingSkeleton(_ref) {
   var testId = _ref.testId,
       width = _ref.width,
       height = _ref.height;
-  var animationWidth = width ? "".concat(width, "rem") : '20px';
-  var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% { background-position: -", "  0; }\n    100% { background-position: ", " 0; }\n  "])), animationWidth, animationWidth);
+  var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% { background-position: 50%  0; }\n    100% { background-position: -50% 0; }\n  "])));
   var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n    background-image: linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 20%,\n      ", " 40%,\n      ", "100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
   return jsx("span", {
     css: styles,

package/dist/esm/view/FlexibleCard/components/elements/media/index.js

@@ -31,7 +31,8 @@ var Media = function Media(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
       type = _ref.type,
-      url = _ref.url;
+      url = _ref.url,
+      onError = _ref.onError;
 
   if (!type || !url) {
     return null;
@@ -44,7 +45,9 @@ var Media = function Media(_ref) {
     "data-testid": testId
   }, jsx(ImageIcon, {
     testId: "".concat(testId, "-image"),
-    url: url
+    url: url,
+    onError: onError,
+    defaultIcon: null
   }));
 };
 

package/dist/esm/view/HoverCard/components/HoverCardContent.js

@@ -1,17 +1,17 @@
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { extractType } from '@atlaskit/linking-common/extractors';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ActionName, SmartLinkPosition, SmartLinkSize } from '../../../constants';
-import extractPreview from '../../../extractors/flexible/extract-preview';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
 import { useSmartCardActions } from '../../../state/actions';
 import { getExtensionKey } from '../../../state/helpers';
 import { isSpecialEvent } from '../../../utils';
 import FlexibleCard from '../../FlexibleCard';
-import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
-import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss } from '../styled';
+import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
+import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss, hiddenSnippetStyles } from '../styled';
 import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
 import HoverCardLoadingView from './HoverCardLoadingView';
+import SnippetOrPreview from './SnippetOrPreview';
 export var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: ActionName.CustomAction,
@@ -92,7 +92,17 @@ var HoverCardContent = function HoverCardContent(_ref) {
       subtitle = _extractMetadata.subtitle;
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
-  var body = data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, null) : /*#__PURE__*/React.createElement(SnippetBlock, null);
+  var snippetHeight = React.useRef(0);
+  var snippetBlockRef = useRef(null);
+  var onSnippetRender = useCallback(function () {
+    var _snippetBlockRef$curr, _snippetBlockRef$curr2;
+
+    snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
+  }, []);
+  var body = SnippetOrPreview({
+    data: data,
+    snippetHeight: snippetHeight.current
+  });
   var titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
@@ -125,7 +135,12 @@ var HoverCardContent = function HoverCardContent(_ref) {
     size: SmartLinkSize.Large,
     overrideCss: metadataBlockCss,
     maxLines: 1
-  }), body, /*#__PURE__*/React.createElement(FooterBlock, {
+  }), body, /*#__PURE__*/React.createElement(SnippetBlock, {
+    testId: 'hidden-snippet',
+    onRender: onSnippetRender,
+    blockRef: snippetBlockRef,
+    overrideCss: hiddenSnippetStyles
+  }), /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     size: SmartLinkSize.Large,
     overrideCss: footerBlockCss

package/dist/esm/view/HoverCard/components/SnippetOrPreview.js

@@ -0,0 +1,53 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject;
+
+import React, { useCallback, useState, useRef } from 'react';
+import { css } from '@emotion/core';
+import extractPreview from '../../../extractors/flexible/extract-preview';
+import { PreviewBlock, SnippetBlock } from '../../FlexibleCard/components/blocks';
+import { getTransitionStyles } from '../styled';
+
+var SnippetOrPreview = function SnippetOrPreview(_ref) {
+  var data = _ref.data,
+      snippetHeight = _ref.snippetHeight;
+  var transitionStarted = useRef(false);
+  var previewBlockRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showSnippet = _useState2[0],
+      setShowSnippet = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      previewCss = _useState4[0],
+      setPreviewCss = _useState4[1]; // Set Preview to a fixed height to enable transitions
+
+
+  var onPreviewRender = useCallback(function () {
+    var _previewBlockRef$curr;
+
+    previewBlockRef.current && setPreviewCss(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        height: ", "px;\n      "])), (_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
+  }, []); // On error set Preview to Snippet height with transition
+
+  var onPreviewError = useCallback(function () {
+    if (transitionStarted.current === false) {
+      setPreviewCss(getTransitionStyles(snippetHeight));
+      transitionStarted.current = true;
+    }
+  }, [snippetHeight]);
+  var onPreviewTransitionEnd = useCallback(function () {
+    setShowSnippet(true);
+  }, []);
+  return !showSnippet && data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, {
+    onError: onPreviewError,
+    overrideCss: previewCss,
+    onTransitionEnd: onPreviewTransitionEnd,
+    blockRef: previewBlockRef,
+    onRender: onPreviewRender
+  }) : /*#__PURE__*/React.createElement(SnippetBlock, null);
+};
+
+export default SnippetOrPreview;

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 import { css } from '@emotion/core';
 import { loadingPlaceholderClassName } from '../../index';
@@ -23,4 +23,8 @@ export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTe
 export var metadataBlockCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n"])), separatorCss, elementGap, elementGap);
 export var footerBlockCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-top: 0.25rem;\n"])));
 export var loadingViewContainer = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-export var skeletonContainer = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
+export var skeletonContainer = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
+export var hiddenSnippetStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  visibility: hidden;\n  position: absolute;\n"])));
+export var getTransitionStyles = function getTransitionStyles(snippetHeight) {
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
+};

package/dist/types/view/FlexibleCard/components/blocks/preview-block/types.d.ts

@@ -1,2 +1,8 @@
 import { BlockProps } from '../types';
-export declare type PreviewBlockProps = BlockProps;
+export declare type PreviewBlockProps = {
+    /**
+     * Function to be called on error loading media.
+     * @internal
+     */
+    onError?: () => void;
+} & BlockProps;

package/dist/types/view/FlexibleCard/components/blocks/types.d.ts

@@ -1,6 +1,7 @@
 import { ActionName, ElementName, SmartLinkDirection, SmartLinkSize, SmartLinkStatus } from '../../../../constants';
 import { SerializedStyles } from '@emotion/core';
 import { ActionProps } from '../actions/action/types';
+import { Ref } from 'react';
 export declare type BlockProps = {
     /**
      * The direction that the block should arrange it's elements. Can be vertical
@@ -29,6 +30,20 @@ export declare type BlockProps = {
      * serving as a hook for automated tests
      */
     testId?: string;
+    /**
+     * Ref to block wrapper div.
+     */
+    blockRef?: Ref<HTMLDivElement>;
+    /**
+     * Function to be called on render of block.
+     * @internal
+     */
+    onRender?: () => void;
+    /**
+     * Function to be called on transition end of block.
+     * @internal
+     */
+    onTransitionEnd?: () => void;
 };
 /**
  * Used to represent a metadata element to be rendered.

package/dist/types/view/FlexibleCard/components/common/image-icon/types.d.ts

@@ -3,4 +3,5 @@ export declare type ImageIconProps = {
     defaultIcon?: React.ReactNode;
     testId?: string;
     url: string;
+    onError?: () => void;
 };

package/dist/types/view/FlexibleCard/components/elements/media/types.d.ts

@@ -9,4 +9,9 @@ export declare type MediaProps = ElementProps & {
      * The URL of the associated media to display.
      */
     url?: string;
+    /**
+     * Function to be called on error loading media.
+     * @internal
+     */
+    onError?: () => void;
 };

package/dist/types/view/HoverCard/components/SnippetOrPreview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SnippetOrPreviewProps } from '../types';
+declare const SnippetOrPreview: React.FC<SnippetOrPreviewProps>;
+export default SnippetOrPreview;

package/dist/types/view/HoverCard/styled.d.ts

@@ -8,3 +8,5 @@ export declare const metadataBlockCss: import("@emotion/utils").SerializedStyles
 export declare const footerBlockCss: import("@emotion/utils").SerializedStyles;
 export declare const loadingViewContainer: import("@emotion/utils").SerializedStyles;
 export declare const skeletonContainer: import("@emotion/utils").SerializedStyles;
+export declare const hiddenSnippetStyles: import("@emotion/utils").SerializedStyles;
+export declare const getTransitionStyles: (snippetHeight: number) => import("@emotion/utils").SerializedStyles;

package/dist/types/view/HoverCard/types.d.ts

@@ -8,6 +8,7 @@ import { AnalyticsHandler } from '../../utils/types';
 import { ReactElement } from 'react';
 import { TitleBlockProps } from '../FlexibleCard/components/blocks/title-block/types';
 import { FlexibleCardProps } from '../FlexibleCard/types';
+import { JsonLd } from 'json-ld-types';
 export interface HoverCardProps extends WithAnalyticsEventsProps {
     id?: string;
     url: string;
@@ -38,3 +39,7 @@ export declare type HoverCardLoadingViewProps = {
     flexibleCardProps: FlexibleCardProps;
     titleBlockProps: TitleBlockProps;
 };
+export declare type SnippetOrPreviewProps = {
+    data: JsonLd.Data.BaseData;
+    snippetHeight: number;
+};

package/package.json

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

package/report.api.md

@@ -29,6 +29,7 @@ import { SmartCardProvider as Provider } from '@atlaskit/link-provider';
 import { ProviderProps } from '@atlaskit/link-provider';
 import { default as React_2 } from 'react';
 import { ReactChild } from 'react';
+import { Ref } from 'react';
 import { SerializedStyles } from '@emotion/core';
 import { SmartCardContext } from '@atlaskit/link-provider';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
@@ -237,6 +238,20 @@ declare type BlockProps = {
    * serving as a hook for automated tests
    */
   testId?: string;
+  /**
+   * Ref to block wrapper div.
+   */
+  blockRef?: Ref<HTMLDivElement>;
+  /**
+   * Function to be called on render of block.
+   * @internal
+   */
+  onRender?: () => void;
+  /**
+   * Function to be called on transition end of block.
+   * @internal
+   */
+  onTransitionEnd?: () => void;
 };
 
 export declare const Card: React_2.ForwardRefExoticComponent<
@@ -672,7 +687,13 @@ declare type Preview = {
  */
 export declare const PreviewBlock: React_2.FC<PreviewBlockProps>;
 
-declare type PreviewBlockProps = BlockProps;
+declare type PreviewBlockProps = {
+  /**
+   * Function to be called on error loading media.
+   * @internal
+   */
+  onError?: () => void;
+} & BlockProps;
 
 declare type PreviewDisplay = 'card' | 'embed';