@atlaskit/smart-card 23.8.2 → 23.9.1

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

@@ -49,12 +49,6 @@ export function CardWithUrlContent({
   const subproduct = getSubproduct(state.details);
   const services = getServices(state.details);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
-  const showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
-
-  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
-    showHoverPreview = Boolean(showHoverPreviewFlag);
-  }
-
   const showAuthTooltipValue = useFeatureFlag('showAuthTooltip');
   const showAuthTooltip = !!showAuthTooltipValue && showAuthTooltipValue === 'experiment';
   const enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard')); // Setup UI handlers.
@@ -140,6 +134,7 @@ export function CardWithUrlContent({
       onClick: handleClickWrapper,
       renderers: renderers,
       ui: ui,
+      showHoverPreview: showHoverPreview,
       url: url,
       testId: testId,
       onResolve: onResolve,

package/dist/es2019/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -63,14 +63,9 @@ const ActionButton = ({
     e.preventDefault();
     handler();
   }, []);
-  const onContainerClick = useCallback(e => {
-    // Stop button on click event from propagate into parent container.
-    e.stopPropagation();
-  }, []);
   return jsx("div", {
     css: [getButtonStyle(size, iconOnly), overrideCss],
-    "data-testid": `${testId}-button-wrapper`,
-    onClick: onContainerClick
+    "data-testid": `${testId}-button-wrapper`
   }, jsx(Tooltip, {
     content: tooltipMessage,
     hideTooltipOnClick: true,

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -46,9 +46,7 @@ const ActionGroup = ({
   onDropdownOpenChange,
   testId
 }) => {
-  const [isOpen, setIsOpen] = useState(false); // Stop AK dropdown menu to propagate event on click.
-
-  const onClick = useCallback(e => e.stopPropagation(), []);
+  const [isOpen, setIsOpen] = useState(false);
   const onOpenChange = useCallback(attrs => {
     setIsOpen(attrs.isOpen);
 
@@ -74,8 +72,7 @@ const ActionGroup = ({
   const buttonGroupElement = renderActionItems(buttonActions, size, appearance, false, onActionClick);
   return jsx("div", {
     css: styles,
-    className: "actions-button-group",
-    onClick: onClick
+    className: "actions-button-group"
   }, jsx(ButtonGroup, null, buttonGroupElement, dropdownItemActions.length > 0 && dropdownMenuElement && dropdownMenuElement.length > 0 ? jsx(DropdownMenu, {
     isOpen: isOpen,
     onOpenChange: onOpenChange,

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useCallback } from 'react';
 import { css } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
 import Block from '../block';
@@ -31,8 +31,16 @@ const FooterBlock = props => {
     status,
     actions,
     size = SmartLinkSize.Medium,
-    testId = 'smart-footer-block'
+    testId = 'smart-footer-block',
+    onActionMenuOpenChange
   } = props;
+  const onDropdownOpenChange = useCallback(isOpen => {
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
 
   if (status !== SmartLinkStatus.Resolved) {
     return null;
@@ -49,6 +57,7 @@ const FooterBlock = props => {
     overrideCss: getActionGroupStyles(size),
     width: SmartLinkWidth.Flexible
   }, /*#__PURE__*/React.createElement(ActionGroup, {
+    onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default"
   })) : null);

package/dist/es2019/view/FlexibleCard/components/container/index.js

@@ -1,11 +1,12 @@
 /** @jsx jsx */
-import React, { useContext } from 'react';
+import React, { useContext, useState, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
-import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
+import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock, isFlexibleUiFooterBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
+import { HoverCard } from '../../../HoverCard';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
 const elevationStyles = css`
   border: 1px solid transparent;
@@ -127,7 +128,7 @@ export const getContainerStyles = (size, hideBackground, hideElevation, hidePadd
   `;
 };
 
-const renderChildren = (children, containerSize, containerTheme, status, retry, onClick) => React.Children.map(children, child => {
+const renderChildren = (children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) => React.Children.map(children, child => {
   if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
     const {
       size: blockSize
@@ -142,6 +143,12 @@ const renderChildren = (children, containerSize, containerTheme, status, retry,
         status,
         theme: containerTheme
       });
+    } else if (onActionMenuOpenChange && isFlexibleUiFooterBlock(child)) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        size,
+        status,
+        onActionMenuOpenChange
+      });
     }
 
     return /*#__PURE__*/React.cloneElement(child, {
@@ -192,6 +199,7 @@ const Container = ({
   hideBackground = false,
   hideElevation = false,
   hidePadding = false,
+  showHoverPreview = false,
   onClick,
   retry,
   size = SmartLinkSize.Medium,
@@ -201,11 +209,23 @@ const Container = ({
 }) => {
   const context = useContext(FlexibleUiContext);
   const childrenOptions = getChildrenOptions(children, context);
-  return jsx("div", {
+  const [hoverCardCanOpen, setHoverCardCanOpen] = useState(true);
+  const onActionMenuOpenChange = useCallback(options => setHoverCardCanOpen(!options.isOpen), []);
+  const containerContent = jsx("div", {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, showHoverPreview ? onActionMenuOpenChange : undefined));
+
+  if (showHoverPreview && context !== null && context !== void 0 && context.url) {
+    return jsx(HoverCard, {
+      url: context === null || context === void 0 ? void 0 : context.url,
+      canOpen: hoverCardCanOpen,
+      closeOnChildClick: true
+    }, containerContent);
+  }
+
+  return containerContent;
 };
 
 export default Container;

package/dist/es2019/view/FlexibleCard/index.js

@@ -22,7 +22,8 @@ const FlexibleCard = ({
   url,
   onClick,
   testId,
-  analytics
+  analytics,
+  showHoverPreview
 }) => {
   const {
     status: cardType,
@@ -68,6 +69,7 @@ const FlexibleCard = ({
   }, /*#__PURE__*/React.createElement(Container, _extends({
     testId: testId
   }, ui, {
+    showHoverPreview: showHoverPreview,
     onClick: onClick,
     retry: retry,
     status: status

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

@@ -14,7 +14,9 @@ export const HoverCardComponent = ({
   children,
   url,
   analyticsHandler,
-  analytics
+  analytics,
+  canOpen = true,
+  closeOnChildClick = false
 }) => {
   const delay = 300;
   const [isOpen, setIsOpen] = React.useState(false);
@@ -102,9 +104,16 @@ export const HoverCardComponent = ({
     }
   }, [hideCard]); // Stop hover preview content to propagate event to parent.
 
+  const onChildClick = useCallback(e => {
+    e.stopPropagation();
+
+    if (closeOnChildClick) {
+      hideCard();
+    }
+  }, [closeOnChildClick, hideCard]);
   return jsx(Popup, {
     testId: "hover-card",
-    isOpen: isOpen,
+    isOpen: isOpen && canOpen,
     onClose: hideCard,
     placement: "bottom-start",
     offset: popupOffset.current,
@@ -127,7 +136,8 @@ export const HoverCardComponent = ({
     }, jsx("span", _extends({}, triggerProps, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
-      onMouseMove: setMousePosition
+      onMouseMove: setMousePosition,
+      onClick: onChildClick
     }), children)),
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 

package/dist/es2019/view/InlineCard/index.js

@@ -10,6 +10,7 @@ import { InlineCardResolvedView } from './ResolvedView';
 import { InlineCardResolvingView } from './ResolvingView';
 import { InlineCardUnauthorizedView } from './UnauthorisedView';
 import { extractProvider } from '@atlaskit/linking-common/extractors';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 export { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, InlineCardForbiddenView, InlineCardUnauthorizedView };
 export const InlineCard = ({
   id,
@@ -34,6 +35,11 @@ export const InlineCard = ({
   } = cardState;
   const cardDetails = details && details.data || getEmptyJsonLd();
   const testIdWithStatus = testId ? `${testId}-${status}-view` : undefined;
+  const showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
+
+  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
+    showHoverPreview = Boolean(showHoverPreviewFlag);
+  }
 
   switch (status) {
     case 'pending':

package/dist/esm/utils/flexible.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as Blocks from '../view/FlexibleCard/components/blocks';
-import { PreviewBlock, TitleBlock } from '../view/FlexibleCard/components/blocks';
+import { PreviewBlock, TitleBlock, FooterBlock } from '../view/FlexibleCard/components/blocks';
 import * as Elements from '../view/FlexibleCard/components/elements';
 export var isFlexibleUiCard = function isFlexibleUiCard(children) {
   if (children && React.Children.toArray(children).some(function (child) {
@@ -26,4 +26,7 @@ export var isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
 };
 export var isFlexibleUiPreviewBlock = function isFlexibleUiPreviewBlock(node) {
   return /*#__PURE__*/React.isValidElement(node) && node.type === PreviewBlock;
+};
+export var isFlexibleUiFooterBlock = function isFlexibleUiFooterBlock(node) {
+  return /*#__PURE__*/React.isValidElement(node) && node.type === FooterBlock;
 };

package/dist/esm/utils/mocks.js

@@ -119,6 +119,25 @@ export var mocks = {
       url: 'https://some.url'
     }
   },
+  forbiddenWithNoAuth: {
+    meta: {
+      visibility: 'restricted',
+      access: 'forbidden',
+      auth: [],
+      definitionId: 'd1',
+      key: 'object-provider'
+    },
+    data: {
+      '@context': {
+        '@vocab': 'https://www.w3.org/ns/activitystreams#',
+        atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+        schema: 'http://schema.org/'
+      },
+      '@type': 'Object',
+      name: 'I love cheese',
+      url: 'https://some.url'
+    }
+  },
   unauthorized: {
     meta: {
       visibility: 'restricted',
@@ -142,6 +161,25 @@ export var mocks = {
       url: 'https://some.url'
     }
   },
+  unauthorizedWithNoAuth: {
+    meta: {
+      visibility: 'restricted',
+      access: 'unauthorized',
+      auth: [],
+      definitionId: 'd1',
+      key: 'object-provider'
+    },
+    data: {
+      '@context': {
+        '@vocab': 'https://www.w3.org/ns/activitystreams#',
+        atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+        schema: 'http://schema.org/'
+      },
+      '@type': 'Object',
+      name: 'I love cheese',
+      url: 'https://some.url'
+    }
+  },
   actionSuccess: {
     meta: {
       visibility: 'public',

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/actions/flexible/AuthorizeAction.js

@@ -19,6 +19,7 @@ export var AuthorizeAction = function AuthorizeAction(onAuthorize, providerName)
         context: providerName
       }
     })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
-    onClick: onAuthorize
+    onClick: onAuthorize,
+    testId: 'smart-action-connect-account'
   };
 };

package/dist/esm/view/BlockCard/actions/flexible/ForbiddenAction.js

@@ -20,6 +20,7 @@ export var ForbiddenAction = function ForbiddenAction(onClick, content, context)
         context: context
       }
     })),
-    onClick: onClick
+    onClick: onClick,
+    testId: 'smart-action-connect-other-account'
   };
 };

package/dist/esm/view/BlockCard/actions/flexible/RetryAction.js

@@ -13,6 +13,7 @@ export var RetryAction = function RetryAction(onRetry) {
   return {
     name: ActionName.CustomAction,
     onClick: onRetry,
-    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again),
+    testId: 'smart-action-try-again'
   };
 };

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

@@ -69,6 +69,7 @@ export var BlockCard = function BlockCard(_ref) {
       url: url,
       testId: testId,
       onError: onError,
+      onResolve: onResolve,
       renderers: renderers,
       ui: ui,
       analytics: analytics,
@@ -78,6 +79,12 @@ export var BlockCard = function BlockCard(_ref) {
     switch (status) {
       case 'pending':
       case 'resolving':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleResolvedView, _extends({}, flexibleProps, {
+          testId: 'smart-block-resolving-view'
+        })));
+
       case 'resolved':
         return jsx("div", {
           css: flexibleBlockCardElevationStyle
@@ -106,6 +113,23 @@ export var BlockCard = function BlockCard(_ref) {
 
       case 'fallback':
       case 'errored':
+      default:
+        if (onError) {
+          onError({
+            url: url,
+            status: status
+          });
+        }
+
+        if (authFlow && authFlow === 'disabled') {
+          return jsx(CardLinkView, {
+            link: url,
+            isSelected: isSelected,
+            onClick: handleFrameClick,
+            testId: "".concat(testId, "-").concat(status)
+          });
+        }
+
         return jsx("div", {
           css: flexibleBlockCardElevationStyle
         }, jsx(FlexibleErroredView, _extends({}, flexibleProps, {

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

@@ -16,6 +16,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
       cardState = _ref.cardState,
       onClick = _ref.onClick,
       onError = _ref.onError,
+      onResolve = _ref.onResolve,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
       ui = _ref.ui,
@@ -42,6 +43,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     cardState: cardState,
     onClick: onClick,
     onError: onError,
+    onResolve: onResolve,
     testId: testId,
     ui: ui,
     url: url
@@ -77,7 +79,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
       name: ElementName.DueOn
     }],
     maxLines: 1
-  }), /*#__PURE__*/React.createElement(MetadataBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
+  }), /*#__PURE__*/React.createElement(SnippetBlock, null), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
     placement: MediaPlacement.Right,
     ignoreContainerPadding: true,
     onError: function onError() {

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

@@ -51,12 +51,6 @@ export function CardWithUrlContent(_ref) {
   var isFlexibleUi = useMemo(function () {
     return isFlexibleUiCard(children);
   }, [children]);
-  var showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
-
-  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
-    showHoverPreview = Boolean(showHoverPreviewFlag);
-  }
-
   var showAuthTooltipValue = useFeatureFlag('showAuthTooltip');
   var showAuthTooltip = !!showAuthTooltipValue && showAuthTooltipValue === 'experiment';
   var enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard')); // Setup UI handlers.
@@ -146,6 +140,7 @@ export function CardWithUrlContent(_ref) {
       onClick: handleClickWrapper,
       renderers: renderers,
       ui: ui,
+      showHoverPreview: showHoverPreview,
       url: url,
       testId: testId,
       onResolve: onResolve,

package/dist/esm/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -42,14 +42,9 @@ var ActionButton = function ActionButton(_ref) {
       handler();
     };
   }, []);
-  var onContainerClick = useCallback(function (e) {
-    // Stop button on click event from propagate into parent container.
-    e.stopPropagation();
-  }, []);
   return jsx("div", {
     css: [getButtonStyle(size, iconOnly), overrideCss],
-    "data-testid": "".concat(testId, "-button-wrapper"),
-    onClick: onContainerClick
+    "data-testid": "".concat(testId, "-button-wrapper")
   }, jsx(Tooltip, {
     content: tooltipMessage,
     hideTooltipOnClick: true,

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -43,12 +43,8 @@ var ActionGroup = function ActionGroup(_ref) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isOpen = _useState2[0],
-      setIsOpen = _useState2[1]; // Stop AK dropdown menu to propagate event on click.
+      setIsOpen = _useState2[1];
 
-
-  var onClick = useCallback(function (e) {
-    return e.stopPropagation();
-  }, []);
   var onOpenChange = useCallback(function (attrs) {
     setIsOpen(attrs.isOpen);
 
@@ -81,8 +77,7 @@ var ActionGroup = function ActionGroup(_ref) {
   var buttonGroupElement = renderActionItems(buttonActions, size, appearance, false, onActionClick);
   return jsx("div", {
     css: styles,
-    className: "actions-button-group",
-    onClick: onClick
+    className: "actions-button-group"
   }, jsx(ButtonGroup, null, buttonGroupElement, dropdownItemActions.length > 0 && dropdownMenuElement && dropdownMenuElement.length > 0 ? jsx(DropdownMenu, {
     isOpen: isOpen,
     onOpenChange: onOpenChange,

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

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { css } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
 import Block from '../block';
@@ -34,7 +34,15 @@ var FooterBlock = function FooterBlock(props) {
       _props$size = props.size,
       size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
       _props$testId = props.testId,
-      testId = _props$testId === void 0 ? 'smart-footer-block' : _props$testId;
+      testId = _props$testId === void 0 ? 'smart-footer-block' : _props$testId,
+      onActionMenuOpenChange = props.onActionMenuOpenChange;
+  var onDropdownOpenChange = useCallback(function (isOpen) {
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen: isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
 
   if (status !== SmartLinkStatus.Resolved) {
     return null;
@@ -51,6 +59,7 @@ var FooterBlock = function FooterBlock(props) {
     overrideCss: getActionGroupStyles(size),
     width: SmartLinkWidth.Flexible
   }, /*#__PURE__*/React.createElement(ActionGroup, {
+    onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default"
   })) : null);

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -1,15 +1,17 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
-import React, { useContext } from 'react';
+import React, { useContext, useState, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
-import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
+import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock, isFlexibleUiFooterBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
+import { HoverCard } from '../../../HoverCard';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
 var elevationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
 
@@ -86,7 +88,7 @@ export var getContainerStyles = function getContainerStyles(size, hideBackground
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 
-var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
+var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) {
   return React.Children.map(children, function (child) {
     if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
       var blockSize = child.props.size;
@@ -100,6 +102,12 @@ var renderChildren = function renderChildren(children, containerSize, containerT
           status: status,
           theme: containerTheme
         });
+      } else if (onActionMenuOpenChange && isFlexibleUiFooterBlock(child)) {
+        return /*#__PURE__*/React.cloneElement(child, {
+          size: size,
+          status: status,
+          onActionMenuOpenChange: onActionMenuOpenChange
+        });
       }
 
       return /*#__PURE__*/React.cloneElement(child, {
@@ -158,6 +166,8 @@ var Container = function Container(_ref3) {
       hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
       _ref3$hidePadding = _ref3.hidePadding,
       hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
+      _ref3$showHoverPrevie = _ref3.showHoverPreview,
+      showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
       onClick = _ref3.onClick,
       retry = _ref3.retry,
       _ref3$size = _ref3.size,
@@ -169,11 +179,30 @@ var Container = function Container(_ref3) {
       theme = _ref3$theme === void 0 ? SmartLinkTheme.Link : _ref3$theme;
   var context = useContext(FlexibleUiContext);
   var childrenOptions = getChildrenOptions(children, context);
-  return jsx("div", {
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      hoverCardCanOpen = _useState2[0],
+      setHoverCardCanOpen = _useState2[1];
+
+  var onActionMenuOpenChange = useCallback(function (options) {
+    return setHoverCardCanOpen(!options.isOpen);
+  }, []);
+  var containerContent = jsx("div", {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, showHoverPreview ? onActionMenuOpenChange : undefined));
+
+  if (showHoverPreview && context !== null && context !== void 0 && context.url) {
+    return jsx(HoverCard, {
+      url: context === null || context === void 0 ? void 0 : context.url,
+      canOpen: hoverCardCanOpen,
+      closeOnChildClick: true
+    }, containerContent);
+  }
+
+  return containerContent;
 };
 
 export default Container;

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

@@ -22,7 +22,8 @@ var FlexibleCard = function FlexibleCard(_ref) {
       url = _ref.url,
       onClick = _ref.onClick,
       testId = _ref.testId,
-      analytics = _ref.analytics;
+      analytics = _ref.analytics,
+      showHoverPreview = _ref.showHoverPreview;
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
@@ -66,6 +67,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
   }, /*#__PURE__*/React.createElement(Container, _extends({
     testId: testId
   }, ui, {
+    showHoverPreview: showHoverPreview,
     onClick: onClick,
     retry: retry,
     status: status

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

@@ -15,7 +15,11 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
       url = _ref.url,
       analyticsHandler = _ref.analyticsHandler,
-      analytics = _ref.analytics;
+      analytics = _ref.analytics,
+      _ref$canOpen = _ref.canOpen,
+      canOpen = _ref$canOpen === void 0 ? true : _ref$canOpen,
+      _ref$closeOnChildClic = _ref.closeOnChildClick,
+      closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic;
   var delay = 300;
 
   var _React$useState = React.useState(false),
@@ -109,9 +113,16 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     }
   }, [hideCard]); // Stop hover preview content to propagate event to parent.
 
+  var onChildClick = useCallback(function (e) {
+    e.stopPropagation();
+
+    if (closeOnChildClick) {
+      hideCard();
+    }
+  }, [closeOnChildClick, hideCard]);
   return jsx(Popup, {
     testId: "hover-card",
-    isOpen: isOpen,
+    isOpen: isOpen && canOpen,
     onClose: hideCard,
     placement: "bottom-start",
     offset: popupOffset.current,
@@ -136,7 +147,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       }, jsx("span", _extends({}, triggerProps, {
         onMouseEnter: initShowCard,
         onMouseLeave: initHideCard,
-        onMouseMove: setMousePosition
+        onMouseMove: setMousePosition,
+        onClick: onChildClick
       }), children));
     },
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510