@atlaskit/smart-card 21.1.3 → 21.3.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @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
+
+- [`d2439a3c65d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2439a3c65d) - [ux] Embed Preview Modal: Add experiment modal with new UX and resize functionality (behind feature flag)
+
+### Patch Changes
+
+- [`6dd64ce82a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6dd64ce82a8) - [ux] This changes icon loading for Flexible Smart Links. Previously, all `@atlaskit/icon-file-type/glyph/` icons in Flexible Smart Links would be loaded asynchronously. This change makes it so that the `@atlaskit/icon-file-type/glyph/blog` and `@atlaskit/icon-file-type/glyph/document`icons load synchronously in order to better support SSR use cases.
+- Updated dependencies
+
+## 21.1.4
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+- Updated dependencies
+
 ## 21.1.3
 
 ### Patch Changes

package/dist/cjs/extractors/block/index.js

@@ -55,13 +55,14 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
 
 var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform) {
   if (opts) {
-    var handleInvoke = opts.handleInvoke,
+    var featureFlags = opts.featureFlags,
+        handleInvoke = opts.handleInvoke,
         handleAnalytics = opts.handleAnalytics,
         extensionKey = opts.extensionKey,
         source = opts.source,
         testId = opts.testId;
     var actions = (0, _extractActions.extractActions)(jsonLd, handleInvoke);
-    var previewAction = (0, _extractPreviewAction.extractPreviewAction)(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source); // The previewAction should always be the last action
+    var previewAction = (0, _extractPreviewAction.extractPreviewAction)(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source, featureFlags); // The previewAction should always be the last action
 
     if (previewAction) {
       actions.push(previewAction);

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

@@ -72,6 +72,7 @@ var extractPreviewAction = function extractPreviewAction() {
   var testId = arguments.length > 5 ? arguments[5] : undefined;
   var platform = arguments.length > 6 ? arguments[6] : undefined;
   var source = arguments.length > 7 ? arguments[7] : undefined;
+  var featureFlags = arguments.length > 8 ? arguments[8] : undefined;
   // Extract metadata from view props & raw JSON-LD.
   var metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   var metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -83,6 +84,7 @@ var extractPreviewAction = function extractPreviewAction() {
     // Build action using instrumentation hooks.
     var key = extensionKey;
     var previewAction = (0, _BlockCard.PreviewAction)(_objectSpread(_objectSpread({}, metadata), {}, {
+      featureFlags: featureFlags,
       testId: testId,
       onOpen: function onOpen() {
         handleAnalytics((0, _analytics.uiRenderSuccessEvent)('preview', 'resolved', key));

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

@@ -13,6 +13,8 @@ var _react = require("react");
 
 var _uuid = _interopRequireDefault(require("uuid"));
 
+var _linkProvider = require("@atlaskit/link-provider");
+
 var _block = require("../../extractors/block");
 
 var _actions = require("../actions");
@@ -40,13 +42,21 @@ function useSmartLinkActions(_ref) {
 
   var linkState = (0, _store.useSmartCardState)(url);
   var linkAnalytics = (0, _analytics.useSmartLinkAnalytics)(url, analyticsHandler, id);
-  var linkActions = (0, _actions.useSmartCardActions)(id, url, linkAnalytics);
+  var linkActions = (0, _actions.useSmartCardActions)(id, url, linkAnalytics); // Actions do not have access to the react tree, so we need to obtain
+  // feature flags here where we still can access SmartLinkContext context
+  // and pass the flags down to the extractor. See PreviewAction.tsx for details.
+
+  var embedModalSize = (0, _linkProvider.useFeatureFlag)('embedModalSize');
   (0, _react.useEffect)(function () {
     if (!linkState.details) {
       return;
     }
 
+    var featureFlags = {
+      embedModalSize: embedModalSize
+    };
     var cardProperties = (0, _block.extractBlockProps)(linkState.details.data, linkState.details.meta, {
+      featureFlags: featureFlags,
       handleInvoke: function handleInvoke(opts) {
         return linkActions.invoke(opts, appearance);
       },
@@ -67,6 +77,6 @@ function useSmartLinkActions(_ref) {
       };
     });
     setActions(cardActions);
-  }, [linkState, linkActions, analyticsHandler, appearance, platform]);
+  }, [linkState, linkActions, analyticsHandler, appearance, platform, embedModalSize]);
   return actions;
 }

package/dist/cjs/version.json

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

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

@@ -81,7 +81,7 @@ function _previewFunction() {
 
             _context.next = 5;
             return Promise.resolve().then(function () {
-              return _interopRequireWildcard(require('../../common/Modal'));
+              return _interopRequireWildcard(require('../../EmbedModal'));
             });
 
           case 5:

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

@@ -93,6 +93,8 @@ var _ForbiddenView = require("./views/ForbiddenView");
 
 var _ErroredView = require("./views/ErroredView");
 
+var _linkProvider = require("@atlaskit/link-provider");
+
 var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
 
@@ -113,9 +115,17 @@ var BlockCard = function BlockCard(_ref) {
       testId = _ref.testId,
       showActions = _ref.showActions,
       platform = _ref.platform;
+  // Actions do not have access to the react tree, so we need to obtain
+  // feature flags here where we still can access SmartLinkContext context
+  // and pass the flags down to the extractor. See PreviewAction.tsx for details.
+  var embedModalSize = (0, _linkProvider.useFeatureFlag)('embedModalSize');
+  var featureFlags = {
+    embedModalSize: embedModalSize
+  };
   var data = details && details.data || (0, _jsonld.getEmptyJsonLd)();
   var meta = details && details.meta;
   var extractorOpts = {
+    featureFlags: featureFlags,
     handleAnalytics: handleAnalytics,
     handleInvoke: handleInvoke,
     extensionKey: (0, _helpers.getExtensionKey)(details)

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

@@ -80,7 +80,7 @@ function CardWithUrlContent(_ref) {
   var showHoverPreviewFlag = (0, _linkProvider.useFeatureFlag)('showHoverPreview');
 
   if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
-    showHoverPreview = showHoverPreviewFlag;
+    showHoverPreview = Boolean(showHoverPreviewFlag);
   } // Setup UI handlers.
 
 

package/dist/cjs/view/EmbedModal/components/size-experiment/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Modal = _interopRequireDefault(require("../../../common/Modal"));
+
+var _constants = require("../../constants");
+
+var withSizeExperiment = function withSizeExperiment(Component) {
+  return function (props) {
+    var _props$featureFlags = props.featureFlags,
+        featureFlags = _props$featureFlags === void 0 ? {} : _props$featureFlags,
+        _props$closeLabel = props.closeLabel,
+        closeLabel = _props$closeLabel === void 0 ? 'Close Preview' : _props$closeLabel;
+    var embedModalSize = featureFlags.embedModalSize; // Experiment
+
+    if (embedModalSize === 'large' || embedModalSize === 'small') {
+      var size = embedModalSize === 'large' ? _constants.MAX_MODAL_SIZE : _constants.MIN_MODAL_SIZE;
+      return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
+        size: size
+      }));
+    } // Control
+
+
+    return /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, props, {
+      closeLabel: closeLabel
+    }));
+  };
+};
+
+var _default = withSizeExperiment;
+exports.default = _default;

package/dist/cjs/view/EmbedModal/components/size-experiment/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -23,6 +23,8 @@ var _embedContent = _interopRequireDefault(require("./components/embed-content")
 
 var _errorBoundary = _interopRequireDefault(require("./components/error-boundary"));
 
+var _sizeExperiment = _interopRequireDefault(require("./components/size-experiment"));
+
 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; }
@@ -39,9 +41,11 @@ var EmbedModal = function EmbedModal(_ref) {
       onViewActionClick = _ref.onViewActionClick,
       providerName = _ref.providerName,
       showModal = _ref.showModal,
+      _ref$size = _ref.size,
+      defaultSize = _ref$size === void 0 ? _constants.MIN_MODAL_SIZE : _ref$size,
       src = _ref.src,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-links-preview-modal' : _ref$testId,
+      testId = _ref$testId === void 0 ? 'smart-embed-preview-modal' : _ref$testId,
       title = _ref.title,
       url = _ref.url;
 
@@ -50,7 +54,7 @@ var EmbedModal = function EmbedModal(_ref) {
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(_constants.MIN_MODAL_SIZE),
+  var _useState3 = (0, _react.useState)(defaultSize),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       size = _useState4[0],
       setSize = _useState4[1];
@@ -88,6 +92,6 @@ var EmbedModal = function EmbedModal(_ref) {
   }))));
 };
 
-var _default = (0, _errorBoundary.default)(EmbedModal);
+var _default = (0, _sizeExperiment.default)((0, _errorBoundary.default)(EmbedModal));
 
 exports.default = _default;

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/atlaskit-icon/index.js

@@ -17,6 +17,10 @@ var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _ = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/document/16"));
+
+var _2 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/blog/16"));
+
 var _constants = require("../../../../../constants");
 
 var _tokens = require("@atlaskit/tokens");
@@ -36,18 +40,10 @@ var importIconMapper = (_importIconMapper = {}, (0, _defineProperty2.default)(_i
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/audio/16'));
   });
-}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Blog, function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/blog/16'));
-  });
 }), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Code, function () {
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/source-code/16'));
   });
-}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Document, function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/document/16'));
-  });
 }), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Executable, function () {
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/executable/16'));
@@ -301,6 +297,22 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
   var icon = _ref3.icon,
       label = _ref3.label,
       testId = _ref3.testId;
+
+  // Check for synchonously loaded icons first for SSR purposes
+  switch (icon) {
+    case _constants.IconType.Document:
+      return /*#__PURE__*/_react.default.createElement(_.default, {
+        label: label || 'document',
+        testId: testId
+      });
+
+    case _constants.IconType.Blog:
+      return /*#__PURE__*/_react.default.createElement(_2.default, {
+        label: label || 'blog',
+        testId: testId
+      });
+  }
+
   var importFn = getIconImportFn(icon);
 
   if (!importFn) {

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/extractors/block/index.js

@@ -28,6 +28,7 @@ const extractBlockDetails = jsonLd => [extractCommentCount(jsonLd), extractProgr
 export const extractBlockActions = (props, jsonLd, opts, platform) => {
   if (opts) {
     const {
+      featureFlags,
       handleInvoke,
       handleAnalytics,
       extensionKey,
@@ -35,7 +36,7 @@ export const extractBlockActions = (props, jsonLd, opts, platform) => {
       testId
     } = opts;
     const actions = extractActions(jsonLd, handleInvoke);
-    const previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source); // The previewAction should always be the last action
+    const previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source, featureFlags); // The previewAction should always be the last action
 
     if (previewAction) {
       actions.push(previewAction);

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

@@ -39,7 +39,7 @@ const getInvokeOpts = (key, action, source) => ({
   }
 });
 
-export const extractPreviewAction = (extensionKey = 'empty-object-provider', viewProps, jsonLd, handleInvoke, handleAnalytics, testId, platform, source) => {
+export const extractPreviewAction = (extensionKey = 'empty-object-provider', viewProps, jsonLd, handleInvoke, handleAnalytics, testId, platform, source, featureFlags) => {
   // Extract metadata from view props & raw JSON-LD.
   const metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   const metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -51,6 +51,7 @@ export const extractPreviewAction = (extensionKey = 'empty-object-provider', vie
     // Build action using instrumentation hooks.
     const key = extensionKey;
     const previewAction = PreviewAction({ ...metadata,
+      featureFlags,
       testId,
       onOpen: () => {
         handleAnalytics(uiRenderSuccessEvent('preview', 'resolved', key));