@atlaskit/smart-card 23.8.2 → 23.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 23.9.0
+
+### Minor Changes
+
+- [`5c7c532de88`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c7c532de88) - [ux] Add showHoverPreview as a ui parameter to allow hover cards on flex ui links.
+
 ## 23.8.2
 
 ### Patch Changes

package/dist/cjs/utils/flexible.js

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

package/dist/cjs/version.json

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

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

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

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

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

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

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

package/dist/cjs/view/FlexibleCard/components/blocks/footer-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
 });
@@ -11,7 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
@@ -27,6 +29,10 @@ var _actionGroup = _interopRequireDefault(require("../action-group"));
 
 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 getActionGroupStyles = function getActionGroupStyles(size) {
   if (size === _constants.SmartLinkSize.XLarge) {
     // The biggest height of the action button exceeds the max line-height
@@ -50,7 +56,15 @@ var FooterBlock = function FooterBlock(props) {
       _props$size = props.size,
       size = _props$size === void 0 ? _constants.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 = (0, _react.useCallback)(function (isOpen) {
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen: isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
 
   if (status !== _constants.SmartLinkStatus.Resolved) {
     return null;
@@ -67,6 +81,7 @@ var FooterBlock = function FooterBlock(props) {
     overrideCss: getActionGroupStyles(size),
     width: _constants.SmartLinkWidth.Flexible
   }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+    onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default"
   })) : null);

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getContainerStyles = exports.default = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -25,6 +27,8 @@ var _flexibleUiContext = require("../../../../state/flexible-ui-context");
 
 var _layeredLink = _interopRequireDefault(require("./layered-link"));
 
+var _HoverCard = require("../../../HoverCard");
+
 var _utils = require("../../../../state/flexible-ui-context/utils");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -110,7 +114,7 @@ var getContainerStyles = function getContainerStyles(size, hideBackground, hideE
 
 exports.getContainerStyles = getContainerStyles;
 
-var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
+var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) {
   return _react.default.Children.map(children, function (child) {
     if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
       var blockSize = child.props.size;
@@ -124,6 +128,12 @@ var renderChildren = function renderChildren(children, containerSize, containerT
           status: status,
           theme: containerTheme
         });
+      } else if (onActionMenuOpenChange && (0, _flexible.isFlexibleUiFooterBlock)(child)) {
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          size: size,
+          status: status,
+          onActionMenuOpenChange: onActionMenuOpenChange
+        });
       }
 
       return /*#__PURE__*/_react.default.cloneElement(child, {
@@ -182,6 +192,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,
@@ -193,11 +205,30 @@ var Container = function Container(_ref3) {
       theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
   var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
   var childrenOptions = getChildrenOptions(children, context);
-  return (0, _react2.jsx)("div", {
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      hoverCardCanOpen = _useState2[0],
+      setHoverCardCanOpen = _useState2[1];
+
+  var onActionMenuOpenChange = (0, _react.useCallback)(function (options) {
+    return setHoverCardCanOpen(!options.isOpen);
+  }, []);
+  var containerContent = (0, _react2.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 (0, _react2.jsx)(_HoverCard.HoverCard, {
+      url: context === null || context === void 0 ? void 0 : context.url,
+      canOpen: hoverCardCanOpen,
+      closeOnChildClick: true
+    }, containerContent);
+  }
+
+  return containerContent;
 };
 
 var _default = Container;

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

@@ -42,7 +42,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;
@@ -86,6 +87,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({
     testId: testId
   }, ui, {
+    showHoverPreview: showHoverPreview,
     onClick: onClick,
     retry: retry,
     status: status

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

@@ -40,7 +40,11 @@ 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 = _react2.default.useState(false),
@@ -134,9 +138,16 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     }
   }, [hideCard]); // Stop hover preview content to propagate event to parent.
 
+  var onChildClick = (0, _react2.useCallback)(function (e) {
+    e.stopPropagation();
+
+    if (closeOnChildClick) {
+      hideCard();
+    }
+  }, [closeOnChildClick, hideCard]);
   return (0, _react.jsx)(_popup.default, {
     testId: "hover-card",
-    isOpen: isOpen,
+    isOpen: isOpen && canOpen,
     onClose: hideCard,
     placement: "bottom-start",
     offset: popupOffset.current,
@@ -161,7 +172,8 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       }, (0, _react.jsx)("span", (0, _extends2.default)({}, 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/cjs/view/InlineCard/index.js

@@ -61,6 +61,8 @@ var _UnauthorisedView = require("./UnauthorisedView");
 
 var _extractors = require("@atlaskit/linking-common/extractors");
 
+var _linkProvider = require("@atlaskit/link-provider");
+
 var InlineCard = function InlineCard(_ref) {
   var _details$meta;
 
@@ -81,6 +83,11 @@ var InlineCard = function InlineCard(_ref) {
       details = cardState.details;
   var cardDetails = details && details.data || (0, _jsonld.getEmptyJsonLd)();
   var testIdWithStatus = testId ? "".concat(testId, "-").concat(status, "-view") : undefined;
+  var showHoverPreviewFlag = (0, _linkProvider.useFeatureFlag)('showHoverPreview');
+
+  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
+    showHoverPreview = Boolean(showHoverPreviewFlag);
+  }
 
   switch (status) {
     case 'pending':

package/dist/es2019/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 const isFlexibleUiCard = children => {
   if (children && React.Children.toArray(children).some(child => isFlexibleUiTitleBlock(child))) {
@@ -12,4 +12,5 @@ export const isFlexibleUiCard = children => {
 export const isFlexibleUiBlock = node => /*#__PURE__*/React.isValidElement(node) && Object.values(Blocks).some(type => type === node.type);
 export const isFlexibleUiElement = node => /*#__PURE__*/React.isValidElement(node) && Object.values(Elements).some(type => type === node.type);
 export const isFlexibleUiTitleBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
-export const isFlexibleUiPreviewBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === PreviewBlock;
+export const isFlexibleUiPreviewBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === PreviewBlock;
+export const isFlexibleUiFooterBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === FooterBlock;

package/dist/es2019/version.json

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

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/version.json

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

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

package/dist/esm/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 var InlineCard = function InlineCard(_ref) {
   var _details$meta;
@@ -31,6 +32,11 @@ export var InlineCard = function InlineCard(_ref) {
       details = cardState.details;
   var cardDetails = details && details.data || getEmptyJsonLd();
   var testIdWithStatus = testId ? "".concat(testId, "-").concat(status, "-view") : undefined;
+  var showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
+
+  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
+    showHoverPreview = Boolean(showHoverPreviewFlag);
+  }
 
   switch (status) {
     case 'pending':

package/dist/types/utils/flexible.d.ts

@@ -4,3 +4,4 @@ export declare const isFlexibleUiBlock: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiElement: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiTitleBlock: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiPreviewBlock: (node: React.ReactNode) => boolean;
+export declare const isFlexibleUiFooterBlock: (node: React.ReactNode) => boolean;

package/dist/types/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "onResolve" | "platform" | "showHoverPreview" | "isFrameVisible" | "embedIframeRef" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "onResolve" | "platform" | "isFrameVisible" | "embedIframeRef" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types/view/FlexibleCard/components/blocks/action-group/types.d.ts

@@ -25,7 +25,7 @@ export declare type ActionGroupProps = {
      */
     visibleButtonsNum?: number;
     /**
-     * Callback used by the dropdown. Is called when the dropdown is opened.
+     * Called when the action dropdown menu (if present) is open/closed.
      */
     onDropdownOpenChange?: (isOpen: boolean) => void;
     /**

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

@@ -1,4 +1,5 @@
 import { ActionItem, BlockProps } from '../types';
+import { OnActionMenuOpenChangeOptions } from '../types';
 export declare type FooterBlockProps = {
     /**
      * An array of actions to be displayed on the right.
@@ -7,4 +8,8 @@ export declare type FooterBlockProps = {
      * @see ActionItem
      */
     actions?: ActionItem[];
+    /**
+     * Function to be called when footer action dropdown open state is changed.
+     */
+    onActionMenuOpenChange?: (options: OnActionMenuOpenChangeOptions) => void;
 } & BlockProps;

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

@@ -22,6 +22,11 @@ export declare type ContainerProps = FlexibleUiOptions & {
      * serving as a hook for automated tests
      */
     testId?: string;
+    /**
+     * Determine whether or not a preview card should show up when a user hovers
+     * over the smartlink.
+     */
+    showHoverPreview?: Boolean;
 };
 export declare type ChildrenOptions = {
     previewOnLeft?: boolean;

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

@@ -71,6 +71,11 @@ export declare type FlexibleCardProps = {
      * Determines the URL of the Smart Link.
      */
     url: string;
+    /**
+     * Determine whether or not a preview card should show up when a user hovers
+     * over the smartlink. Default value is false.
+     */
+    showHoverPreview?: Boolean;
 };
 export declare type FlexibleUiOptions = {
     /**

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { HoverCardProps } from './types';
-export declare const HoverCard: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").PropsWithChildren<HoverCardProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "key" | "id" | "analyticsContext" | "onAuthorize"> & import("react").RefAttributes<any>>;
+export declare const HoverCard: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").PropsWithChildren<HoverCardProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "key" | "id" | "analyticsContext" | "onAuthorize" | "canOpen" | "closeOnChildClick"> & import("react").RefAttributes<any>>;

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

@@ -8,14 +8,38 @@ import { AnalyticsHandler } from '../../utils/types';
 import { ReactElement, MouseEventHandler } from 'react';
 import { JsonLd } from 'json-ld-types';
 export interface HoverCardProps extends WithAnalyticsEventsProps {
+    /**
+     * Unique ID for a hover card. Used for analytics.
+     */
     id?: string;
+    /**
+     * Hover card will display data from this url.
+     */
     url: string;
+    /**
+     * React children component over which the hover card can be triggered.
+     */
     children: ReactElement;
+    /**
+     * Function to be called when user is authorized to view a link.
+     */
     onAuthorize?: () => void;
+    /**
+     * Determines if the hover card is allowed to open. If changed from true to false while the
+     * hover card is open, the hover card will be closed.
+     */
+    canOpen?: boolean;
+    /**
+     * Determines if the hover card should close when the children passed in are
+     * clicked.
+     */
+    closeOnChildClick?: boolean;
 }
 export interface HoverCardComponentProps extends HoverCardProps {
     analyticsHandler: AnalyticsHandler;
     analytics: AnalyticsFacade;
+    canOpen?: boolean;
+    closeOnChildClick?: boolean;
 }
 export declare type PreviewDisplay = 'card' | 'embed';
 export declare type PreviewInvokeMethod = 'keyboard' | 'mouse_hover' | 'mouse_click';

package/package.json

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

package/report.api.md

@@ -538,6 +538,7 @@ export const FooterBlock: React_2.FC<FooterBlockProps>;
 // @public (undocumented)
 type FooterBlockProps = {
   actions?: ActionItem[];
+  onActionMenuOpenChange?: (options: OnActionMenuOpenChangeOptions) => void;
 } & BlockProps;
 
 export { InlineCardAdf };

package/tmp/api-report-tmp.d.ts

@@ -419,6 +419,7 @@ export const FooterBlock: React_2.FC<FooterBlockProps>;
 // @public (undocumented)
 type FooterBlockProps = {
     actions?: ActionItem[];
+    onActionMenuOpenChange?: (options: OnActionMenuOpenChangeOptions) => void;
 } & BlockProps;
 
 export { InlineCardAdf }