@atlaskit/smart-card 26.9.3 → 26.9.6

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/smart-card
 
+## 26.9.6
+
+### Patch Changes
+
+- [`e0a2c926e63`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0a2c926e63) - [ux] Flexible Smart Links: Fix hover preview shows on mouse leave
+
+## 26.9.5
+
+### Patch Changes
+
+- [`7b08013b112`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7b08013b112) - Clean up use of showAuthTooltip FF. Switch to being fully reliant on the showAuthTooltip prop.
+- Updated dependencies
+
+## 26.9.4
+
+### Patch Changes
+
+- [`2a4926aa20a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2a4926aa20a) - [ux] Flexible Smart Links: Add hover preview show/hide delay when mouse moves inside the card
+
 ## 26.9.3
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -45,7 +45,7 @@ function Component(_ref) {
     ui = _ref.ui,
     children = _ref.children,
     showHoverPreview = _ref.showHoverPreview,
-    showAuthTooltipProp = _ref.showAuthTooltip,
+    showAuthTooltip = _ref.showAuthTooltip,
     analyticsEvents = _ref.analyticsEvents;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -68,8 +68,6 @@ function Component(_ref) {
   var isFlexibleUi = (0, _react.useMemo)(function () {
     return (0, _flexible.isFlexibleUiCard)(children);
   }, [children]);
-  var showAuthTooltipFeatureFlagValue = (0, _linkProvider.useFeatureFlag)('showAuthTooltip');
-  var showAuthTooltip = showAuthTooltipFeatureFlagValue !== undefined ? showAuthTooltipFeatureFlagValue === 'experiment' : showAuthTooltipProp;
   var enableFlexibleBlockCardFlag = Boolean((0, _linkProvider.useFeatureFlag)('enableFlexibleBlockCard'));
   var showServerActions = showServerActionsProp && platform !== 'mobile';
 
@@ -191,7 +189,7 @@ function Component(_ref) {
       renderers: renderers,
       ui: ui,
       showHoverPreview: showHoverPreview,
-      showAuthTooltip: showAuthTooltipProp,
+      showAuthTooltip: showAuthTooltip,
       showServerActions: showServerActions,
       url: url,
       testId: testId,

package/dist/cjs/view/FlexibleCard/components/container/hover-card-control/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _HoverCard = require("../../../../HoverCard");
+var _constants = require("../../../../../constants");
+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 FLEXIBLE_HOVER_CARD_CAN_OPEN_DELAY = 100;
+var HoverCardControl = function HoverCardControl(_ref) {
+  var children = _ref.children,
+    hideHoverCardPreviewButton = _ref.hideHoverCardPreviewButton,
+    isHoverPreview = _ref.isHoverPreview,
+    isAuthTooltip = _ref.isAuthTooltip,
+    showServerActions = _ref.showServerActions,
+    testId = _ref.testId,
+    url = _ref.url;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    canOpen = _useState2[0],
+    setCanOpen = _useState2[1];
+  var mouseStopTimer = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (mouseStopTimer.current) {
+        clearTimeout(mouseStopTimer.current);
+      }
+    };
+  }, []);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    if (mouseStopTimer.current) {
+      clearTimeout(mouseStopTimer.current);
+    }
+  }, []);
+  var onMouseMove = (0, _react.useCallback)(function (e) {
+    var _e$target$closest;
+    if (mouseStopTimer.current) {
+      clearTimeout(mouseStopTimer.current);
+    }
+
+    // Never show hover card on action or when action dropdown opens.
+    // The code below can be simplified by using :is() and :has()
+    // but the pseudo-class isn't support by Firefox yet.
+    var action =
+    // Any action button group (title/footer block)
+    e.target.closest('.actions-button-group') || ( // When action dropdown list is opened on action button group or lozenge action
+    (_e$target$closest = e.target.closest('[data-smart-link-container]')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.querySelector('[data-action-open="true"]'));
+    var canOpenOnElement = isAuthTooltip && !action ||
+    // EDM-7060: For hover preview, also hide hover card on all elements
+    // except title element (link title)
+    isHoverPreview && !action && !e.target.closest("[data-smart-element]:not([data-smart-element=\"".concat(_constants.ElementName.Title, "\"])"));
+    mouseStopTimer.current = setTimeout(function () {
+      if (canOpen !== canOpenOnElement) {
+        setCanOpen(Boolean(canOpenOnElement));
+      }
+    }, FLEXIBLE_HOVER_CARD_CAN_OPEN_DELAY);
+  }, [isAuthTooltip, isHoverPreview, canOpen]);
+  return /*#__PURE__*/_react.default.createElement(_HoverCard.HoverCard, {
+    allowEventPropagation: true,
+    canOpen: canOpen,
+    closeOnChildClick: true,
+    hidePreviewButton: hideHoverCardPreviewButton
+    // EDM-6709 extends the internal prop for showServerActions type to be
+    // an object. If we decide to use expose the type for hover preview
+    // remove the Boolean() conversion here.
+    ,
+    showServerActions: Boolean(showServerActions),
+    url: url
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    onMouseLeave: onMouseLeave,
+    onMouseMove: onMouseMove,
+    "data-testid": "".concat(testId, "-hover-card-wrapper")
+  }, children));
+};
+var _default = HoverCardControl;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/container/hover-card-control/types.js

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

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

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getContainerStyles = exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
@@ -16,7 +14,7 @@ var _flexible = require("../../../../utils/flexible");
 var _token = require("../../../../utils/token");
 var _flexibleUiContext = require("../../../../state/flexible-ui-context");
 var _layeredLink = _interopRequireDefault(require("./layered-link"));
-var _HoverCard = require("../../../HoverCard");
+var _hoverCardControl = _interopRequireDefault(require("./hover-card-control"));
 var _utils = require("../../../../state/flexible-ui-context/utils");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
@@ -167,51 +165,24 @@ 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);
-  var _useState = (0, _react.useState)(true),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    hoverCardCanOpen = _useState2[0],
-    setHoverCardCanOpen = _useState2[1];
   var canShowHoverPreview = showHoverPreview && status === 'resolved';
   var canShowAuthTooltip = showAuthTooltip && status === 'unauthorized';
-  var onMouseOver = (0, _react.useCallback)(function (e) {
-    var _e$target$closest;
-    // Never show hover card on action or when action dropdown opens.
-    // The code below can be simplified by using :is() and :has()
-    // but the pseudo-class isn't support by Firefox yet.
-    var action =
-    // Any action button group (title/footer block)
-    e.target.closest('.actions-button-group') || ( // When action dropdown list is opened on action button group or lozenge action
-    (_e$target$closest = e.target.closest('[data-smart-link-container]')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.querySelector('[data-action-open="true"]'));
-    var canOpen = canShowAuthTooltip && !action ||
-    // EDM-7060: For hover preview, also hide hover card on all elements
-    // except title element (link title)
-    canShowHoverPreview && !action && !e.target.closest("[data-smart-element]:not([data-smart-element=\"".concat(_constants.ElementName.Title, "\"])"));
-    if (hoverCardCanOpen !== canOpen) {
-      setHoverCardCanOpen(canOpen);
-    }
-  }, [canShowAuthTooltip, canShowHoverPreview, hoverCardCanOpen]);
-  var containerContent = (0, _react2.jsx)("div", (0, _extends2.default)({
+  var container = (0, _react2.jsx)("div", {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, canShowHoverPreview || canShowAuthTooltip ? {
-    onMouseOver: onMouseOver
-  } : undefined), 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));
   if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
-    return (0, _react2.jsx)(_HoverCard.HoverCard, {
-      url: context === null || context === void 0 ? void 0 : context.url,
-      allowEventPropagation: true,
-      canOpen: hoverCardCanOpen,
-      closeOnChildClick: true,
-      hidePreviewButton: hideHoverCardPreviewButton
-      // EDM-6709 extends the internal prop for showServerActions type to be
-      // an object. If we decide to use expose the type for hover preview
-      // remove the Boolean() conversion here.
-      ,
-      showServerActions: Boolean(showServerActions)
-    }, containerContent);
+    return (0, _react2.jsx)(_hoverCardControl.default, {
+      hideHoverCardPreviewButton: hideHoverCardPreviewButton,
+      isHoverPreview: canShowHoverPreview,
+      isAuthTooltip: canShowAuthTooltip,
+      showServerActions: showServerActions,
+      testId: testId,
+      url: context.url
+    }, container);
   }
-  return containerContent;
+  return container;
 };
 var _default = Container;
 exports.default = _default;

package/dist/es2019/version.json

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

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

@@ -35,7 +35,7 @@ function Component({
   ui,
   children,
   showHoverPreview,
-  showAuthTooltip: showAuthTooltipProp,
+  showAuthTooltip,
   analyticsEvents
 }) {
   const {
@@ -59,8 +59,6 @@ function Component({
   const subproduct = getSubproduct(state.details);
   const services = getServices(state.details);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
-  const showAuthTooltipFeatureFlagValue = useFeatureFlag('showAuthTooltip');
-  const showAuthTooltip = showAuthTooltipFeatureFlagValue !== undefined ? showAuthTooltipFeatureFlagValue === 'experiment' : showAuthTooltipProp;
   const enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard'));
   const showServerActions = showServerActionsProp && platform !== 'mobile';
 
@@ -178,7 +176,7 @@ function Component({
       renderers: renderers,
       ui: ui,
       showHoverPreview: showHoverPreview,
-      showAuthTooltip: showAuthTooltipProp,
+      showAuthTooltip: showAuthTooltip,
       showServerActions: showServerActions,
       url: url,
       testId: testId,

package/dist/es2019/view/FlexibleCard/components/container/hover-card-control/index.js

@@ -0,0 +1,68 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { HoverCard } from '../../../../HoverCard';
+import { ElementName } from '../../../../../constants';
+const FLEXIBLE_HOVER_CARD_CAN_OPEN_DELAY = 100;
+const HoverCardControl = ({
+  children,
+  hideHoverCardPreviewButton,
+  isHoverPreview,
+  isAuthTooltip,
+  showServerActions,
+  testId,
+  url
+}) => {
+  const [canOpen, setCanOpen] = useState(true);
+  const mouseStopTimer = useRef();
+  useEffect(() => {
+    return () => {
+      if (mouseStopTimer.current) {
+        clearTimeout(mouseStopTimer.current);
+      }
+    };
+  }, []);
+  const onMouseLeave = useCallback(() => {
+    if (mouseStopTimer.current) {
+      clearTimeout(mouseStopTimer.current);
+    }
+  }, []);
+  const onMouseMove = useCallback(e => {
+    var _e$target$closest;
+    if (mouseStopTimer.current) {
+      clearTimeout(mouseStopTimer.current);
+    }
+
+    // Never show hover card on action or when action dropdown opens.
+    // The code below can be simplified by using :is() and :has()
+    // but the pseudo-class isn't support by Firefox yet.
+    const action =
+    // Any action button group (title/footer block)
+    e.target.closest('.actions-button-group') || ( // When action dropdown list is opened on action button group or lozenge action
+    (_e$target$closest = e.target.closest('[data-smart-link-container]')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.querySelector('[data-action-open="true"]'));
+    const canOpenOnElement = isAuthTooltip && !action ||
+    // EDM-7060: For hover preview, also hide hover card on all elements
+    // except title element (link title)
+    isHoverPreview && !action && !e.target.closest(`[data-smart-element]:not([data-smart-element="${ElementName.Title}"])`);
+    mouseStopTimer.current = setTimeout(() => {
+      if (canOpen !== canOpenOnElement) {
+        setCanOpen(Boolean(canOpenOnElement));
+      }
+    }, FLEXIBLE_HOVER_CARD_CAN_OPEN_DELAY);
+  }, [isAuthTooltip, isHoverPreview, canOpen]);
+  return /*#__PURE__*/React.createElement(HoverCard, {
+    allowEventPropagation: true,
+    canOpen: canOpen,
+    closeOnChildClick: true,
+    hidePreviewButton: hideHoverCardPreviewButton
+    // EDM-6709 extends the internal prop for showServerActions type to be
+    // an object. If we decide to use expose the type for hover preview
+    // remove the Boolean() conversion here.
+    ,
+    showServerActions: Boolean(showServerActions),
+    url: url
+  }, /*#__PURE__*/React.createElement("span", {
+    onMouseLeave: onMouseLeave,
+    onMouseMove: onMouseMove,
+    "data-testid": `${testId}-hover-card-wrapper`
+  }, children));
+};
+export default HoverCardControl;

package/dist/es2019/view/FlexibleCard/components/container/hover-card-control/types.js

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

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

@@ -1,13 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import React, { useContext, useState, useCallback } from 'react';
+import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
-import { ElementName, MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
+import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } 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 HoverCardControl from './hover-card-control';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
 const elevationStyles = css`
   border: 1px solid transparent;
@@ -187,47 +186,23 @@ const Container = ({
 }) => {
   const context = useContext(FlexibleUiContext);
   const childrenOptions = getChildrenOptions(children, context);
-  const [hoverCardCanOpen, setHoverCardCanOpen] = useState(true);
   const canShowHoverPreview = showHoverPreview && status === 'resolved';
   const canShowAuthTooltip = showAuthTooltip && status === 'unauthorized';
-  const onMouseOver = useCallback(e => {
-    var _e$target$closest;
-    // Never show hover card on action or when action dropdown opens.
-    // The code below can be simplified by using :is() and :has()
-    // but the pseudo-class isn't support by Firefox yet.
-    const action =
-    // Any action button group (title/footer block)
-    e.target.closest('.actions-button-group') || ( // When action dropdown list is opened on action button group or lozenge action
-    (_e$target$closest = e.target.closest('[data-smart-link-container]')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.querySelector('[data-action-open="true"]'));
-    const canOpen = canShowAuthTooltip && !action ||
-    // EDM-7060: For hover preview, also hide hover card on all elements
-    // except title element (link title)
-    canShowHoverPreview && !action && !e.target.closest(`[data-smart-element]:not([data-smart-element="${ElementName.Title}"])`);
-    if (hoverCardCanOpen !== canOpen) {
-      setHoverCardCanOpen(canOpen);
-    }
-  }, [canShowAuthTooltip, canShowHoverPreview, hoverCardCanOpen]);
-  const containerContent = jsx("div", _extends({
+  const container = jsx("div", {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, canShowHoverPreview || canShowAuthTooltip ? {
-    onMouseOver
-  } : undefined), 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));
   if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
-    return jsx(HoverCard, {
-      url: context === null || context === void 0 ? void 0 : context.url,
-      allowEventPropagation: true,
-      canOpen: hoverCardCanOpen,
-      closeOnChildClick: true,
-      hidePreviewButton: hideHoverCardPreviewButton
-      // EDM-6709 extends the internal prop for showServerActions type to be
-      // an object. If we decide to use expose the type for hover preview
-      // remove the Boolean() conversion here.
-      ,
-      showServerActions: Boolean(showServerActions)
-    }, containerContent);
+    return jsx(HoverCardControl, {
+      hideHoverCardPreviewButton: hideHoverCardPreviewButton,
+      isHoverPreview: canShowHoverPreview,
+      isAuthTooltip: canShowAuthTooltip,
+      showServerActions: showServerActions,
+      testId: testId,
+      url: context.url
+    }, container);
   }
-  return containerContent;
+  return container;
 };
 export default Container;

package/dist/esm/version.json

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

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

@@ -35,7 +35,7 @@ function Component(_ref) {
     ui = _ref.ui,
     children = _ref.children,
     showHoverPreview = _ref.showHoverPreview,
-    showAuthTooltipProp = _ref.showAuthTooltip,
+    showAuthTooltip = _ref.showAuthTooltip,
     analyticsEvents = _ref.analyticsEvents;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -58,8 +58,6 @@ function Component(_ref) {
   var isFlexibleUi = useMemo(function () {
     return isFlexibleUiCard(children);
   }, [children]);
-  var showAuthTooltipFeatureFlagValue = useFeatureFlag('showAuthTooltip');
-  var showAuthTooltip = showAuthTooltipFeatureFlagValue !== undefined ? showAuthTooltipFeatureFlagValue === 'experiment' : showAuthTooltipProp;
   var enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard'));
   var showServerActions = showServerActionsProp && platform !== 'mobile';
 
@@ -181,7 +179,7 @@ function Component(_ref) {
       renderers: renderers,
       ui: ui,
       showHoverPreview: showHoverPreview,
-      showAuthTooltip: showAuthTooltipProp,
+      showAuthTooltip: showAuthTooltip,
       showServerActions: showServerActions,
       url: url,
       testId: testId,

package/dist/esm/view/FlexibleCard/components/container/hover-card-control/index.js

@@ -0,0 +1,71 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { HoverCard } from '../../../../HoverCard';
+import { ElementName } from '../../../../../constants';
+var FLEXIBLE_HOVER_CARD_CAN_OPEN_DELAY = 100;
+var HoverCardControl = function HoverCardControl(_ref) {
+  var children = _ref.children,
+    hideHoverCardPreviewButton = _ref.hideHoverCardPreviewButton,
+    isHoverPreview = _ref.isHoverPreview,
+    isAuthTooltip = _ref.isAuthTooltip,
+    showServerActions = _ref.showServerActions,
+    testId = _ref.testId,
+    url = _ref.url;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    canOpen = _useState2[0],
+    setCanOpen = _useState2[1];
+  var mouseStopTimer = useRef();
+  useEffect(function () {
+    return function () {
+      if (mouseStopTimer.current) {
+        clearTimeout(mouseStopTimer.current);
+      }
+    };
+  }, []);
+  var onMouseLeave = useCallback(function () {
+    if (mouseStopTimer.current) {
+      clearTimeout(mouseStopTimer.current);
+    }
+  }, []);
+  var onMouseMove = useCallback(function (e) {
+    var _e$target$closest;
+    if (mouseStopTimer.current) {
+      clearTimeout(mouseStopTimer.current);
+    }
+
+    // Never show hover card on action or when action dropdown opens.
+    // The code below can be simplified by using :is() and :has()
+    // but the pseudo-class isn't support by Firefox yet.
+    var action =
+    // Any action button group (title/footer block)
+    e.target.closest('.actions-button-group') || ( // When action dropdown list is opened on action button group or lozenge action
+    (_e$target$closest = e.target.closest('[data-smart-link-container]')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.querySelector('[data-action-open="true"]'));
+    var canOpenOnElement = isAuthTooltip && !action ||
+    // EDM-7060: For hover preview, also hide hover card on all elements
+    // except title element (link title)
+    isHoverPreview && !action && !e.target.closest("[data-smart-element]:not([data-smart-element=\"".concat(ElementName.Title, "\"])"));
+    mouseStopTimer.current = setTimeout(function () {
+      if (canOpen !== canOpenOnElement) {
+        setCanOpen(Boolean(canOpenOnElement));
+      }
+    }, FLEXIBLE_HOVER_CARD_CAN_OPEN_DELAY);
+  }, [isAuthTooltip, isHoverPreview, canOpen]);
+  return /*#__PURE__*/React.createElement(HoverCard, {
+    allowEventPropagation: true,
+    canOpen: canOpen,
+    closeOnChildClick: true,
+    hidePreviewButton: hideHoverCardPreviewButton
+    // EDM-6709 extends the internal prop for showServerActions type to be
+    // an object. If we decide to use expose the type for hover preview
+    // remove the Boolean() conversion here.
+    ,
+    showServerActions: Boolean(showServerActions),
+    url: url
+  }, /*#__PURE__*/React.createElement("span", {
+    onMouseLeave: onMouseLeave,
+    onMouseMove: onMouseMove,
+    "data-testid": "".concat(testId, "-hover-card-wrapper")
+  }, children));
+};
+export default HoverCardControl;

package/dist/esm/view/FlexibleCard/components/container/hover-card-control/types.js

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

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

@@ -1,16 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
-import React, { useContext, useState, useCallback } from 'react';
+import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
-import { ElementName, MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
+import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } 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 HoverCardControl from './hover-card-control';
 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: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
 var getGap = function getGap(size) {
@@ -156,50 +154,23 @@ var Container = function Container(_ref3) {
     theme = _ref3$theme === void 0 ? SmartLinkTheme.Link : _ref3$theme;
   var context = useContext(FlexibleUiContext);
   var childrenOptions = getChildrenOptions(children, context);
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    hoverCardCanOpen = _useState2[0],
-    setHoverCardCanOpen = _useState2[1];
   var canShowHoverPreview = showHoverPreview && status === 'resolved';
   var canShowAuthTooltip = showAuthTooltip && status === 'unauthorized';
-  var onMouseOver = useCallback(function (e) {
-    var _e$target$closest;
-    // Never show hover card on action or when action dropdown opens.
-    // The code below can be simplified by using :is() and :has()
-    // but the pseudo-class isn't support by Firefox yet.
-    var action =
-    // Any action button group (title/footer block)
-    e.target.closest('.actions-button-group') || ( // When action dropdown list is opened on action button group or lozenge action
-    (_e$target$closest = e.target.closest('[data-smart-link-container]')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.querySelector('[data-action-open="true"]'));
-    var canOpen = canShowAuthTooltip && !action ||
-    // EDM-7060: For hover preview, also hide hover card on all elements
-    // except title element (link title)
-    canShowHoverPreview && !action && !e.target.closest("[data-smart-element]:not([data-smart-element=\"".concat(ElementName.Title, "\"])"));
-    if (hoverCardCanOpen !== canOpen) {
-      setHoverCardCanOpen(canOpen);
-    }
-  }, [canShowAuthTooltip, canShowHoverPreview, hoverCardCanOpen]);
-  var containerContent = jsx("div", _extends({
+  var container = jsx("div", {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, canShowHoverPreview || canShowAuthTooltip ? {
-    onMouseOver: onMouseOver
-  } : undefined), 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));
   if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
-    return jsx(HoverCard, {
-      url: context === null || context === void 0 ? void 0 : context.url,
-      allowEventPropagation: true,
-      canOpen: hoverCardCanOpen,
-      closeOnChildClick: true,
-      hidePreviewButton: hideHoverCardPreviewButton
-      // EDM-6709 extends the internal prop for showServerActions type to be
-      // an object. If we decide to use expose the type for hover preview
-      // remove the Boolean() conversion here.
-      ,
-      showServerActions: Boolean(showServerActions)
-    }, containerContent);
+    return jsx(HoverCardControl, {
+      hideHoverCardPreviewButton: hideHoverCardPreviewButton,
+      isHoverPreview: canShowHoverPreview,
+      isAuthTooltip: canShowAuthTooltip,
+      showServerActions: showServerActions,
+      testId: testId,
+      url: context.url
+    }, container);
   }
-  return containerContent;
+  return container;
 };
 export default Container;

package/dist/types/view/FlexibleCard/components/container/hover-card-control/index.d.ts

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

package/dist/types/view/FlexibleCard/components/container/hover-card-control/types.d.ts

@@ -0,0 +1,7 @@
+import { ContainerProps } from '../types';
+export type HoverCardDelayProps = Pick<ContainerProps, 'hideHoverCardPreviewButton' | 'showServerActions'> & {
+    isHoverPreview?: boolean;
+    isAuthTooltip?: boolean;
+    testId?: string;
+    url: string;
+};

package/dist/types-ts4.5/view/FlexibleCard/components/container/hover-card-control/index.d.ts

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

package/dist/types-ts4.5/view/FlexibleCard/components/container/hover-card-control/types.d.ts

@@ -0,0 +1,7 @@
+import { ContainerProps } from '../types';
+export type HoverCardDelayProps = Pick<ContainerProps, 'hideHoverCardPreviewButton' | 'showServerActions'> & {
+    isHoverPreview?: boolean;
+    isAuthTooltip?: boolean;
+    testId?: string;
+    url: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.9.3",
+  "version": "26.9.6",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "atlassian": {
@@ -45,7 +37,7 @@
     "@atlaskit/link-analytics": "^8.2.0",
     "@atlaskit/link-client-extension": "^1.5.0",
     "@atlaskit/link-extractors": "^1.1.0",
-    "@atlaskit/linking-common": "^3.2.0",
+    "@atlaskit/linking-common": "^3.4.0",
     "@atlaskit/linking-types": "^8.1.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/lozenge": "^11.4.0",
@@ -79,6 +71,7 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
+    "@af/visual-regression": "*",
     "@atlaskit/avatar": "^21.3.0",
     "@atlaskit/css-reset": "^6.5.0",
     "@atlaskit/link-test-helpers": "^4.1.0",
@@ -114,6 +107,22 @@
     "typescript": "~4.9.5",
     "xhr-mock": "^2.4.0"
   },
+  "techstack": {
+    "@repo/internal": {
+      "design-tokens": [
+        "color",
+        "spacing"
+      ]
+    }
+  },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
   "af:exports": {
     "./ssr": "./src/ssr.tsx",
     "./in-product": "./src/in-product.ts",
@@ -135,13 +144,5 @@
       "type": "boolean"
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
-  "techstack": {
-    "@repo/internal": {
-      "design-tokens": [
-        "color",
-        "spacing"
-      ]
-    }
-  }
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }