@atlaskit/smart-card 21.1.4 → 22.0.0

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

@@ -53,7 +53,7 @@ export function CardWithUrlContent(_ref) {
   var showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
 
   if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
-    showHoverPreview = showHoverPreviewFlag;
+    showHoverPreview = Boolean(showHoverPreviewFlag);
   } // Setup UI handlers.
 
 
@@ -63,7 +63,16 @@ export function CardWithUrlContent(_ref) {
   }, [state.details, url]);
   var handleClickWrapper = useCallback(function (event) {
     var isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed, undefined, product, subproduct);
+    analytics.ui.cardClickedEvent({
+      id: id,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      status: state.status,
+      definitionId: definitionId,
+      extensionKey: extensionKey,
+      isModifierKeyPressed: isModifierKeyPressed,
+      destinationProduct: product,
+      destinationSubproduct: subproduct
+    });
 
     if (onClick) {
       onClick(event);
@@ -87,7 +96,14 @@ export function CardWithUrlContent(_ref) {
 
     if (state.status !== 'pending') {
       measure.create(id, state.status);
-      analytics.operational.instrument(id, state.status, definitionId, extensionKey, resourceType, state.error);
+      analytics.operational.instrument({
+        id: id,
+        status: state.status,
+        definitionId: definitionId,
+        extensionKey: extensionKey,
+        resourceType: resourceType,
+        error: state.error
+      });
     }
   }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, analytics.operational]); // NB: once the smart-card has rendered into an end state, we capture
   // this as a successful render. These can be one of:
@@ -96,7 +112,13 @@ export function CardWithUrlContent(_ref) {
 
   useEffect(function () {
     if (isFinalState(state.status)) {
-      analytics.ui.renderSuccessEvent(appearance, state.status, id, definitionId, extensionKey);
+      analytics.ui.renderSuccessEvent({
+        display: appearance,
+        status: state.status,
+        id: id,
+        definitionId: definitionId,
+        extensionKey: extensionKey
+      });
     }
   }, [appearance, state.status, url, definitionId, extensionKey, analytics.ui, id]);
 

package/dist/esm/view/CardWithUrl/loader.js

@@ -72,7 +72,12 @@ export function CardWithURLRenderer(props) {
       var errorInfo = {
         componentStack: componentStack
       };
-      analytics.ui.renderFailedEvent(appearance, id, error, errorInfo);
+      analytics.ui.renderFailedEvent({
+        display: appearance,
+        id: id,
+        error: error,
+        errorInfo: errorInfo
+      });
     }
   }, [analytics.ui, appearance, id]);
 

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

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Modal from '../../../common/Modal';
+import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from '../../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' ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
+      return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+        size: size
+      }));
+    } // Control
+
+
+    return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
+      closeLabel: closeLabel
+    }));
+  };
+};
+
+export default withSizeExperiment;

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

@@ -0,0 +1 @@
+export {};

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

@@ -5,6 +5,7 @@ import LinkInfo from './components/link-info';
 import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
 import EmbedContent from './components/embed-content';
 import withErrorBoundary from './components/error-boundary';
+import withSizeExperiment from './components/size-experiment';
 
 var EmbedModal = function EmbedModal(_ref) {
   var downloadUrl = _ref.download,
@@ -18,9 +19,11 @@ var EmbedModal = function EmbedModal(_ref) {
       onViewActionClick = _ref.onViewActionClick,
       providerName = _ref.providerName,
       showModal = _ref.showModal,
+      _ref$size = _ref.size,
+      defaultSize = _ref$size === void 0 ? 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;
 
@@ -29,7 +32,7 @@ var EmbedModal = function EmbedModal(_ref) {
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
-  var _useState3 = useState(MIN_MODAL_SIZE),
+  var _useState3 = useState(defaultSize),
       _useState4 = _slicedToArray(_useState3, 2),
       size = _useState4[0],
       setSize = _useState4[1];
@@ -67,4 +70,4 @@ var EmbedModal = function EmbedModal(_ref) {
   }))));
 };
 
-export default withErrorBoundary(EmbedModal);
+export default withSizeExperiment(withErrorBoundary(EmbedModal));

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

@@ -5,6 +5,8 @@ var _importIconMapper;
 import React from 'react';
 import Loadable from 'react-loadable';
 import { B200, B400, N700, R400 } from '@atlaskit/theme/colors';
+import DocumentIcon from '@atlaskit/icon-file-type/glyph/document/16';
+import BlogIcon from '@atlaskit/icon-object/glyph/blog/16';
 import { IconType } from '../../../../../constants';
 import { token } from '@atlaskit/tokens'; // prettier-ignore
 
@@ -16,18 +18,10 @@ var importIconMapper = (_importIconMapper = {}, _defineProperty(_importIconMappe
   return import(
   /* webpackChunkName: "glyphAudio" */
   '@atlaskit/icon-file-type/glyph/audio/16');
-}), _defineProperty(_importIconMapper, IconType.Blog, function () {
-  return import(
-  /* webpackChunkName: "glyphBlog" */
-  '@atlaskit/icon-object/glyph/blog/16');
 }), _defineProperty(_importIconMapper, IconType.Code, function () {
   return import(
   /* webpackChunkName: "glyphCode" */
   '@atlaskit/icon-file-type/glyph/source-code/16');
-}), _defineProperty(_importIconMapper, IconType.Document, function () {
-  return import(
-  /* webpackChunkName: "glyphDocument" */
-  '@atlaskit/icon-file-type/glyph/document/16');
 }), _defineProperty(_importIconMapper, IconType.Executable, function () {
   return import(
   /* webpackChunkName: "glyphExecutable" */
@@ -281,6 +275,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 IconType.Document:
+      return /*#__PURE__*/React.createElement(DocumentIcon, {
+        label: label || 'document',
+        testId: testId
+      });
+
+    case IconType.Blog:
+      return /*#__PURE__*/React.createElement(BlogIcon, {
+        label: label || 'blog',
+        testId: testId
+      });
+  }
+
   var importFn = getIconImportFn(icon);
 
   if (!importFn) {

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/HoverCardComponent.js

@@ -48,7 +48,11 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     //Check its previously open to avoid firing events when moving between the child and hover card components
     if (isOpen === true && cardOpenTime.current) {
       var hoverTime = Date.now() - cardOpenTime.current;
-      analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
+      analytics.ui.hoverCardDismissedEvent({
+        previewDisplay: 'card',
+        hoverTime: hoverTime,
+        previewInvokeMethod: 'mouse_hover'
+      });
     }
 
     setIsOpen(false);
@@ -73,7 +77,10 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       //Check if its previously closed to avoid firing events when moving between the child and hover card components
       if (isOpen === false) {
         cardOpenTime.current = Date.now();
-        analytics.ui.hoverCardViewedEvent(hoverDisplay, invokeMethod);
+        analytics.ui.hoverCardViewedEvent({
+          previewDisplay: hoverDisplay,
+          previewInvokeMethod: invokeMethod
+        });
       } //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
 
 

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,
@@ -26,7 +26,9 @@ export var getOpenAction = function getOpenAction(url, analytics, onActionClick)
       }
 
       window.open(url, '_blank');
-      analytics.ui.hoverCardOpenLinkClickedEvent('card');
+      analytics.ui.hoverCardOpenLinkClickedEvent({
+        previewDisplay: 'card'
+      });
     },
     testId: 'hover-card-open-button'
   };
@@ -68,15 +70,24 @@ var HoverCardContent = function HoverCardContent(_ref) {
   useEffect(function () {
     // Since hover preview only render on resolved status,
     // there is no need to check for statuses.
-    analytics.ui.renderSuccessEvent(SMART_CARD_ANALYTICS_DISPLAY, cardState.status);
+    analytics.ui.renderSuccessEvent({
+      display: SMART_CARD_ANALYTICS_DISPLAY,
+      status: cardState.status
+    });
   }, [analytics.ui, cardState.status]);
   var extensionKey = useMemo(function () {
     return getExtensionKey(cardState.details);
   }, [cardState.details]);
   var onClick = useCallback(function (event) {
     var isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent(undefined, SMART_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
-  }, [cardState.status, analytics.ui]);
+    analytics.ui.cardClickedEvent({
+      id: id,
+      display: SMART_CARD_ANALYTICS_DISPLAY,
+      status: cardState.status,
+      isModifierKeyPressed: isModifierKeyPressed,
+      actionSubjectId: 'titleGoToLink'
+    });
+  }, [cardState.status, analytics.ui, id]);
   var titleActions = useMemo(function () {
     return [getOpenAction(url, analytics, onActionClick)];
   }, [url, analytics, onActionClick]);
@@ -92,7 +103,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 +146,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/index.js

@@ -20,7 +20,12 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   }, [createAnalyticsEvent]);
   var analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
   var onError = useCallback(function (error, info) {
-    analytics.ui.renderFailedEvent(SMART_CARD_ANALYTICS_DISPLAY, id, error, info);
+    analytics.ui.renderFailedEvent({
+      display: SMART_CARD_ANALYTICS_DISPLAY,
+      id: id,
+      error: error,
+      errorInfo: info
+    });
   }, [analytics.ui, id]);
   return jsx(ErrorBoundary, {
     fallback: children,

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/extractors/block/types.d.ts

@@ -1,3 +1,4 @@
+import { LinkingPlatformFeatureFlags } from '@atlaskit/linking-common';
 import { InvokeHandler } from '../../model/invoke-handler';
 import { AnalyticsHandler } from '../../utils/types';
 import { CardInnerAppearance } from '../../view/Card/types';
@@ -5,6 +6,7 @@ export interface ExtractBlockOpts {
     handleInvoke: InvokeHandler;
     handleAnalytics: AnalyticsHandler;
     extensionKey?: string;
+    featureFlags?: Partial<LinkingPlatformFeatureFlags>;
     source?: CardInnerAppearance;
     testId?: string;
 }

package/dist/types/extractors/common/actions/extractPreviewAction.d.ts

@@ -1,6 +1,7 @@
 import { JsonLd } from 'json-ld-types';
+import { LinkingPlatformFeatureFlags } from '@atlaskit/linking-common';
 import { InvokeHandler } from '../../../model/invoke-handler';
 import { CardInnerAppearance } from '../../../view/Card/types';
 import { AnalyticsHandler } from '../../../utils/types';
 import { BlockCardResolvedViewProps } from '../../../view/BlockCard';
-export declare const extractPreviewAction: (extensionKey: string | undefined, viewProps: BlockCardResolvedViewProps, jsonLd: JsonLd.Data.BaseData, handleInvoke: InvokeHandler, handleAnalytics: AnalyticsHandler, testId?: string | undefined, platform?: JsonLd.Primitives.Platforms | undefined, source?: CardInnerAppearance | undefined) => import("../../../view/BlockCard/components/Action").ActionProps | undefined;
+export declare const extractPreviewAction: (extensionKey: string | undefined, viewProps: BlockCardResolvedViewProps, jsonLd: JsonLd.Data.BaseData, handleInvoke: InvokeHandler, handleAnalytics: AnalyticsHandler, testId?: string | undefined, platform?: JsonLd.Primitives.Platforms | undefined, source?: CardInnerAppearance | undefined, featureFlags?: Partial<LinkingPlatformFeatureFlags> | undefined) => import("../../../view/BlockCard/components/Action").ActionProps | undefined;

package/dist/types/state/analytics/types.d.ts

@@ -0,0 +1,9 @@
+import { DestinationSubproduct, DestinationProduct } from '../../utils/analytics/types';
+export interface CommonEventProps {
+    definitionId?: string;
+    extensionKey?: string;
+    resourceType?: string;
+    destinationSubproduct?: DestinationSubproduct | string;
+    destinationProduct?: DestinationProduct | string;
+    location?: string;
+}