@atlaskit/smart-card 43.6.5 → 43.7.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/smart-card
 
+## 43.7.0
+
+### Minor Changes
+
+- [`b1b3d2990d636`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b1b3d2990d636) -
+  add a new optional render props in HoverPreviewOptions to render a custom component
+
 ## 43.6.5
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.6.4"
+  packageVersion: "0.0.0-development"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -12,6 +12,7 @@ require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _reactMagneticDi = require("react-magnetic-di");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../constants");
 var _flexibleUiContext = require("../../../../state/flexible-ui-context");
 var _utils = require("../../../../state/flexible-ui-context/utils");
@@ -191,7 +192,7 @@ var Container = function Container(_ref3) {
   var _getChildrenOptions = getChildrenOptions(children, context),
     previewOnLeft = _getChildrenOptions.previewOnLeft,
     previewOnRight = _getChildrenOptions.previewOnRight;
-  var canShowHoverPreview = showHoverPreview && status === 'resolved';
+  var canShowHoverPreview = showHoverPreview && (status === 'resolved' || (hoverPreviewOptions === null || hoverPreviewOptions === void 0 ? void 0 : hoverPreviewOptions.render) !== undefined && (0, _platformFeatureFlags.fg)('smart-link-custom-hover-card-content'));
   // `retry` object contains action that can be performed on
   // unresolved link (unauthorized, forbidden, not found, etc.)
   var canShowAuthTooltip = showHoverPreview && status === 'unauthorized' && retry !== undefined;

package/dist/cjs/view/FlexibleCard/components/elements/common/base-lozenge-element/index.js

@@ -33,7 +33,8 @@ var BaseLozengeElement = function BaseLozengeElement(_ref) {
     style = _ref.style,
     text = _ref.text,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
+    testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId,
+    onAfterChanged = _ref.onAfterChanged;
   var ui = (0, _flexibleUiContext.useFlexibleUiOptionContext)();
   if (!text) {
     return null;
@@ -43,7 +44,8 @@ var BaseLozengeElement = function BaseLozengeElement(_ref) {
     appearance: appearance,
     testId: testId,
     text: text,
-    zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
+    zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex,
+    onAfterChanged: onAfterChanged
   }) : /*#__PURE__*/React.createElement(_lozenge.default, (0, _extends2.default)({
     appearance: appearance
   }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? {

package/dist/cjs/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/index.js

@@ -41,7 +41,8 @@ var LozengeAction = function LozengeAction(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-lozenge-action' : _ref$testId,
     text = _ref.text,
-    zIndex = _ref.zIndex;
+    zIndex = _ref.zIndex,
+    onAfterChanged = _ref.onAfterChanged;
   var _useState = (0, _react.useState)({
       appearance: appearance,
       text: text
@@ -160,7 +161,7 @@ var LozengeAction = function LozengeAction(_ref) {
             fireEvent('ui.button.clicked.smartLinkStatusListItem', {});
             updateAction = action === null || action === void 0 ? void 0 : action.update;
             if (!(updateAction && id)) {
-              _context2.next = 17;
+              _context2.next = 18;
               break;
             }
             setIsLoading(true);
@@ -168,6 +169,7 @@ var LozengeAction = function LozengeAction(_ref) {
             _context2.next = 8;
             return invoke(request);
           case 8:
+            onAfterChanged === null || onAfterChanged === void 0 || onAfterChanged();
             setSelected({
               appearance: appearance,
               text: text
@@ -180,16 +182,16 @@ var LozengeAction = function LozengeAction(_ref) {
               smartLinkActionType: _analytics.TrackQuickActionType.StatusUpdate
             });
             if (!url) {
-              _context2.next = 17;
+              _context2.next = 18;
               break;
             }
-            _context2.next = 17;
+            _context2.next = 18;
             return reload(url, true, undefined, linkId);
-          case 17:
-            _context2.next = 23;
+          case 18:
+            _context2.next = 24;
             break;
-          case 19:
-            _context2.prev = 19;
+          case 20:
+            _context2.prev = 20;
             _context2.t0 = _context2["catch"](0);
             setIsLoading(false);
             if ((0, _utils.isInvokeCustomError)(_context2.t0)) {
@@ -199,16 +201,16 @@ var LozengeAction = function LozengeAction(_ref) {
               setErrorMessage(_types.LozengeActionErrorMessages.updateFailed);
               fireEvent('track.smartLinkQuickAction.failed', _lozengeActionAnalytics.unknownUpdateErrorAnalyticsPayload);
             }
-          case 23:
+          case 24:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[0, 19]]);
+      }, _callee2, null, [[0, 20]]);
     }));
     return function (_x2, _x3, _x4) {
       return _ref4.apply(this, arguments);
     };
-  }(), [action === null || action === void 0 ? void 0 : action.update, invoke, linkId, reload, url, fireEvent]);
+  }(), [action === null || action === void 0 ? void 0 : action.update, invoke, linkId, reload, url, fireEvent, onAfterChanged]);
   var dropdownItemGroup = (0, _react.useMemo)(function () {
     if (errorMessage) {
       return /*#__PURE__*/_react.default.createElement(_lozengeActionError.default, {

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

@@ -214,7 +214,8 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       renderers: renderers,
       actionOptions: actionOptions,
       url: url,
-      id: id
+      id: id,
+      hoverPreviewOptions: hoverPreviewOptions
     };
     return /*#__PURE__*/_react.default.createElement(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
       url: url,
@@ -222,7 +223,7 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       id: id,
       source: HOVER_CARD_SOURCE
     }, /*#__PURE__*/_react.default.createElement(_HoverCardContent.default, hoverCardContentProps));
-  }, [initShowCard, initHideCard, linkState, onActionClick, renderers, actionOptions, url, id]);
+  }, [initShowCard, initHideCard, linkState, onActionClick, renderers, actionOptions, url, id, hoverPreviewOptions]);
   var trigger = (0, _react.useCallback)(function (_ref3) {
     var ariaHasPopup = _ref3['aria-haspopup'],
       ariaExpanded = _ref3['aria-expanded'],

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

@@ -9,6 +9,7 @@ exports.hoverCardClassName = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkProvider = require("@atlaskit/link-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../../constants");
 var _helpers = require("../../../state/helpers");
@@ -36,7 +37,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
     url = _ref.url,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
-    actionOptions = _ref.actionOptions;
+    actionOptions = _ref.actionOptions,
+    hoverPreviewOptions = _ref.hoverPreviewOptions;
   var _useAnalyticsEventsNe = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
@@ -131,6 +133,11 @@ var HoverCardContent = function HoverCardContent(_ref) {
     return e.stopPropagation();
   }, []);
   var getCardView = function getCardView(cardState) {
+    var _hoverPreviewOptions$;
+    var overrideView = (0, _platformFeatureFlags.fg)('smart-link-custom-hover-card-content') ? hoverPreviewOptions === null || hoverPreviewOptions === void 0 || (_hoverPreviewOptions$ = hoverPreviewOptions.render) === null || _hoverPreviewOptions$ === void 0 ? void 0 : _hoverPreviewOptions$.call(hoverPreviewOptions) : undefined;
+    if (overrideView) {
+      return overrideView;
+    }
     if (cardState.metadataStatus === 'pending') {
       return /*#__PURE__*/_react.default.createElement(_resolving.default, {
         flexibleCardProps: flexibleCardProps,

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

@@ -22,7 +22,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.6.4",
+  packageVersion: "0.0.0-development",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.6.4"
+  packageVersion: "0.0.0-development"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -5,6 +5,7 @@ import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MediaPlacement, SmartLinkSize } from '../../../../constants';
 import { useFlexibleUiContext } from '../../../../state/flexible-ui-context';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
@@ -175,7 +176,7 @@ const Container = ({
     previewOnLeft,
     previewOnRight
   } = getChildrenOptions(children, context);
-  const canShowHoverPreview = showHoverPreview && status === 'resolved';
+  const canShowHoverPreview = showHoverPreview && (status === 'resolved' || (hoverPreviewOptions === null || hoverPreviewOptions === void 0 ? void 0 : hoverPreviewOptions.render) !== undefined && fg('smart-link-custom-hover-card-content'));
   // `retry` object contains action that can be performed on
   // unresolved link (unauthorized, forbidden, not found, etc.)
   const canShowAuthTooltip = showHoverPreview && status === 'unauthorized' && retry !== undefined;

package/dist/es2019/view/FlexibleCard/components/elements/common/base-lozenge-element/index.js

@@ -22,7 +22,8 @@ const BaseLozengeElement = ({
   className,
   style,
   text,
-  testId = 'smart-element-lozenge'
+  testId = 'smart-element-lozenge',
+  onAfterChanged
 }) => {
   const ui = useFlexibleUiOptionContext();
   if (!text) {
@@ -33,7 +34,8 @@ const BaseLozengeElement = ({
     appearance: appearance,
     testId: testId,
     text: text,
-    zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
+    zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex,
+    onAfterChanged: onAfterChanged
   }) : /*#__PURE__*/React.createElement(AtlaskitLozenge, _extends({
     appearance: appearance
   }, fg('platform-component-visual-refresh') ? {

package/dist/es2019/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/index.js

@@ -23,7 +23,8 @@ const LozengeAction = ({
   appearance,
   testId = 'smart-element-lozenge-action',
   text,
-  zIndex
+  zIndex,
+  onAfterChanged
 }) => {
   var _action$update;
   const [selected, setSelected] = useState({
@@ -97,6 +98,7 @@ const LozengeAction = ({
         setIsLoading(true);
         const request = createStatusUpdateRequest(updateAction, id);
         await invoke(request);
+        onAfterChanged === null || onAfterChanged === void 0 ? void 0 : onAfterChanged();
         setSelected({
           appearance,
           text
@@ -122,7 +124,7 @@ const LozengeAction = ({
         fireEvent('track.smartLinkQuickAction.failed', unknownUpdateErrorAnalyticsPayload);
       }
     }
-  }, [action === null || action === void 0 ? void 0 : action.update, invoke, linkId, reload, url, fireEvent]);
+  }, [action === null || action === void 0 ? void 0 : action.update, invoke, linkId, reload, url, fireEvent, onAfterChanged]);
   const dropdownItemGroup = useMemo(() => {
     if (errorMessage) {
       return /*#__PURE__*/React.createElement(LozengeActionError, {

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

@@ -191,7 +191,8 @@ export const HoverCardComponent = ({
       renderers,
       actionOptions,
       url,
-      id
+      id,
+      hoverPreviewOptions
     };
     return /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
       url: url,
@@ -199,7 +200,7 @@ export const HoverCardComponent = ({
       id: id,
       source: HOVER_CARD_SOURCE
     }, /*#__PURE__*/React.createElement(HoverCardContent, hoverCardContentProps));
-  }, [initShowCard, initHideCard, linkState, onActionClick, renderers, actionOptions, url, id]);
+  }, [initShowCard, initHideCard, linkState, onActionClick, renderers, actionOptions, url, id, hoverPreviewOptions]);
   const trigger = useCallback(({
     'aria-haspopup': ariaHasPopup,
     'aria-expanded': ariaExpanded,

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { getDefinitionId, getExtensionKey, getServices } from '../../../state/helpers';
@@ -25,7 +26,8 @@ const HoverCardContent = ({
   url,
   onMouseEnter,
   onMouseLeave,
-  actionOptions
+  actionOptions,
+  hoverPreviewOptions
 }) => {
   var _linkState$status, _cardState$details;
   const {
@@ -120,6 +122,11 @@ const HoverCardContent = ({
   };
   const onClickStopPropagation = useCallback(e => e.stopPropagation(), []);
   const getCardView = cardState => {
+    var _hoverPreviewOptions$;
+    const overrideView = fg('smart-link-custom-hover-card-content') ? hoverPreviewOptions === null || hoverPreviewOptions === void 0 ? void 0 : (_hoverPreviewOptions$ = hoverPreviewOptions.render) === null || _hoverPreviewOptions$ === void 0 ? void 0 : _hoverPreviewOptions$.call(hoverPreviewOptions) : undefined;
+    if (overrideView) {
+      return overrideView;
+    }
     if (cardState.metadataStatus === 'pending') {
       return /*#__PURE__*/React.createElement(HoverCardLoadingView, {
         flexibleCardProps: flexibleCardProps,

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

@@ -12,7 +12,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.6.4",
+  packageVersion: "0.0.0-development",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.6.4"
+  packageVersion: "0.0.0-development"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -5,6 +5,7 @@ import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MediaPlacement, SmartLinkSize } from '../../../../constants';
 import { useFlexibleUiContext } from '../../../../state/flexible-ui-context';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
@@ -185,7 +186,7 @@ var Container = function Container(_ref3) {
   var _getChildrenOptions = getChildrenOptions(children, context),
     previewOnLeft = _getChildrenOptions.previewOnLeft,
     previewOnRight = _getChildrenOptions.previewOnRight;
-  var canShowHoverPreview = showHoverPreview && status === 'resolved';
+  var canShowHoverPreview = showHoverPreview && (status === 'resolved' || (hoverPreviewOptions === null || hoverPreviewOptions === void 0 ? void 0 : hoverPreviewOptions.render) !== undefined && fg('smart-link-custom-hover-card-content'));
   // `retry` object contains action that can be performed on
   // unresolved link (unauthorized, forbidden, not found, etc.)
   var canShowAuthTooltip = showHoverPreview && status === 'unauthorized' && retry !== undefined;

package/dist/esm/view/FlexibleCard/components/elements/common/base-lozenge-element/index.js

@@ -24,7 +24,8 @@ var BaseLozengeElement = function BaseLozengeElement(_ref) {
     style = _ref.style,
     text = _ref.text,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
+    testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId,
+    onAfterChanged = _ref.onAfterChanged;
   var ui = useFlexibleUiOptionContext();
   if (!text) {
     return null;
@@ -34,7 +35,8 @@ var BaseLozengeElement = function BaseLozengeElement(_ref) {
     appearance: appearance,
     testId: testId,
     text: text,
-    zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
+    zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex,
+    onAfterChanged: onAfterChanged
   }) : /*#__PURE__*/React.createElement(AtlaskitLozenge, _extends({
     appearance: appearance
   }, fg('platform-component-visual-refresh') ? {

package/dist/esm/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/index.js

@@ -32,7 +32,8 @@ var LozengeAction = function LozengeAction(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-lozenge-action' : _ref$testId,
     text = _ref.text,
-    zIndex = _ref.zIndex;
+    zIndex = _ref.zIndex,
+    onAfterChanged = _ref.onAfterChanged;
   var _useState = useState({
       appearance: appearance,
       text: text
@@ -151,7 +152,7 @@ var LozengeAction = function LozengeAction(_ref) {
             fireEvent('ui.button.clicked.smartLinkStatusListItem', {});
             updateAction = action === null || action === void 0 ? void 0 : action.update;
             if (!(updateAction && id)) {
-              _context2.next = 17;
+              _context2.next = 18;
               break;
             }
             setIsLoading(true);
@@ -159,6 +160,7 @@ var LozengeAction = function LozengeAction(_ref) {
             _context2.next = 8;
             return invoke(request);
           case 8:
+            onAfterChanged === null || onAfterChanged === void 0 || onAfterChanged();
             setSelected({
               appearance: appearance,
               text: text
@@ -171,16 +173,16 @@ var LozengeAction = function LozengeAction(_ref) {
               smartLinkActionType: TrackQuickActionType.StatusUpdate
             });
             if (!url) {
-              _context2.next = 17;
+              _context2.next = 18;
               break;
             }
-            _context2.next = 17;
+            _context2.next = 18;
             return reload(url, true, undefined, linkId);
-          case 17:
-            _context2.next = 23;
+          case 18:
+            _context2.next = 24;
             break;
-          case 19:
-            _context2.prev = 19;
+          case 20:
+            _context2.prev = 20;
             _context2.t0 = _context2["catch"](0);
             setIsLoading(false);
             if (isInvokeCustomError(_context2.t0)) {
@@ -190,16 +192,16 @@ var LozengeAction = function LozengeAction(_ref) {
               setErrorMessage(LozengeActionErrorMessages.updateFailed);
               fireEvent('track.smartLinkQuickAction.failed', unknownUpdateErrorAnalyticsPayload);
             }
-          case 23:
+          case 24:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[0, 19]]);
+      }, _callee2, null, [[0, 20]]);
     }));
     return function (_x2, _x3, _x4) {
       return _ref4.apply(this, arguments);
     };
-  }(), [action === null || action === void 0 ? void 0 : action.update, invoke, linkId, reload, url, fireEvent]);
+  }(), [action === null || action === void 0 ? void 0 : action.update, invoke, linkId, reload, url, fireEvent, onAfterChanged]);
   var dropdownItemGroup = useMemo(function () {
     if (errorMessage) {
       return /*#__PURE__*/React.createElement(LozengeActionError, {

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

@@ -205,7 +205,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       renderers: renderers,
       actionOptions: actionOptions,
       url: url,
-      id: id
+      id: id,
+      hoverPreviewOptions: hoverPreviewOptions
     };
     return /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
       url: url,
@@ -213,7 +214,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       id: id,
       source: HOVER_CARD_SOURCE
     }, /*#__PURE__*/React.createElement(HoverCardContent, hoverCardContentProps));
-  }, [initShowCard, initHideCard, linkState, onActionClick, renderers, actionOptions, url, id]);
+  }, [initShowCard, initHideCard, linkState, onActionClick, renderers, actionOptions, url, id, hoverPreviewOptions]);
   var trigger = useCallback(function (_ref3) {
     var ariaHasPopup = _ref3['aria-haspopup'],
       ariaExpanded = _ref3['aria-expanded'],

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { getDefinitionId, getExtensionKey, getServices } from '../../../state/helpers';
@@ -27,7 +28,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
     url = _ref.url,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
-    actionOptions = _ref.actionOptions;
+    actionOptions = _ref.actionOptions,
+    hoverPreviewOptions = _ref.hoverPreviewOptions;
   var _useAnalyticsEventsNe = useAnalyticsEventsNext(),
     createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
   var _useAnalyticsEvents = useAnalyticsEvents(),
@@ -122,6 +124,11 @@ var HoverCardContent = function HoverCardContent(_ref) {
     return e.stopPropagation();
   }, []);
   var getCardView = function getCardView(cardState) {
+    var _hoverPreviewOptions$;
+    var overrideView = fg('smart-link-custom-hover-card-content') ? hoverPreviewOptions === null || hoverPreviewOptions === void 0 || (_hoverPreviewOptions$ = hoverPreviewOptions.render) === null || _hoverPreviewOptions$ === void 0 ? void 0 : _hoverPreviewOptions$.call(hoverPreviewOptions) : undefined;
+    if (overrideView) {
+      return overrideView;
+    }
     if (cardState.metadataStatus === 'pending') {
       return /*#__PURE__*/React.createElement(HoverCardLoadingView, {
         flexibleCardProps: flexibleCardProps,

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

@@ -15,7 +15,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.6.4",
+  packageVersion: "0.0.0-development",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

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

@@ -388,6 +388,7 @@ export type SourceBranch = {
  */
 export type State = {
     name: ElementName.State;
+    onAfterChanged?: () => void;
 };
 /**
  * Represents the props available for a SubscriberCount element.

package/dist/types/view/FlexibleCard/components/elements/common/base-lozenge-element/index.d.ts

@@ -11,6 +11,10 @@ export type BaseLozengeElementProps = ElementProps & {
      * Determines the appearance of the Atlaskit lozenge.
      */
     appearance?: LozengeAppearance;
+    /**
+     * Callback fired after lozenge value has changed
+     */
+    onAfterChanged?: () => void;
     /**
      * Determines the custom styles of the Atlaskit lozenge.
      */
@@ -26,6 +30,6 @@ export type BaseLozengeElementProps = ElementProps & {
  * @param {BaseLozengeElementProps} BaseLozengeElementProps - The props necessary for the Lozenge element.
  * @see State
  */
-declare const BaseLozengeElement: ({ action, appearance, name, className, style, text, testId, }: BaseLozengeElementProps) => JSX.Element | null;
+declare const BaseLozengeElement: ({ action, appearance, name, className, style, text, testId, onAfterChanged, }: BaseLozengeElementProps) => JSX.Element | null;
 export default BaseLozengeElement;
 export declare const toDateLozengeProps: (dateString?: string) => Partial<BaseLozengeElementProps> | undefined;

package/dist/types/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/types.d.ts

@@ -8,6 +8,7 @@ export type LozengeItem = {
 export type LozengeActionProps = {
     action: LinkLozengeInvokeActions;
     appearance?: ThemeAppearance;
+    onAfterChanged?: () => void;
     testId?: string;
     text: string | React.ReactNode;
     zIndex?: number;

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { type HoverCardContentProps } from '../types';
 export declare const hoverCardClassName = "smart-links-hover-preview";
-declare const HoverCardContent: ({ id, cardState, onActionClick, onResolve, renderers, url, onMouseEnter, onMouseLeave, actionOptions, }: HoverCardContentProps) => React.JSX.Element | null;
+declare const HoverCardContent: ({ id, cardState, onActionClick, onResolve, renderers, url, onMouseEnter, onMouseLeave, actionOptions, hoverPreviewOptions, }: HoverCardContentProps) => React.JSX.Element | null;
 export default HoverCardContent;

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

@@ -93,6 +93,7 @@ export type HoverCardContentProps = {
     onResolve: () => void;
     renderers?: CardProviderRenderers;
     url: string;
+    hoverPreviewOptions?: HoverPreviewOptions;
 };
 export type ContentContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     isAIEnabled?: boolean;
@@ -108,4 +109,8 @@ export interface HoverPreviewOptions {
      * Delay (in milliseconds) between hovering over the trigger element and the hover card opening. Defaults to 500ms.
      */
     fadeInDelay?: number;
+    /**
+     * Render a custom component instead of the default hover card.
+     */
+    render?: () => React.ReactNode;
 }

package/dist/types-ts4.5/view/FlexibleCard/components/blocks/types.d.ts

@@ -388,6 +388,7 @@ export type SourceBranch = {
  */
 export type State = {
     name: ElementName.State;
+    onAfterChanged?: () => void;
 };
 /**
  * Represents the props available for a SubscriberCount element.

package/dist/types-ts4.5/view/FlexibleCard/components/elements/common/base-lozenge-element/index.d.ts

@@ -11,6 +11,10 @@ export type BaseLozengeElementProps = ElementProps & {
      * Determines the appearance of the Atlaskit lozenge.
      */
     appearance?: LozengeAppearance;
+    /**
+     * Callback fired after lozenge value has changed
+     */
+    onAfterChanged?: () => void;
     /**
      * Determines the custom styles of the Atlaskit lozenge.
      */
@@ -26,6 +30,6 @@ export type BaseLozengeElementProps = ElementProps & {
  * @param {BaseLozengeElementProps} BaseLozengeElementProps - The props necessary for the Lozenge element.
  * @see State
  */
-declare const BaseLozengeElement: ({ action, appearance, name, className, style, text, testId, }: BaseLozengeElementProps) => JSX.Element | null;
+declare const BaseLozengeElement: ({ action, appearance, name, className, style, text, testId, onAfterChanged, }: BaseLozengeElementProps) => JSX.Element | null;
 export default BaseLozengeElement;
 export declare const toDateLozengeProps: (dateString?: string) => Partial<BaseLozengeElementProps> | undefined;

package/dist/types-ts4.5/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/types.d.ts

@@ -8,6 +8,7 @@ export type LozengeItem = {
 export type LozengeActionProps = {
     action: LinkLozengeInvokeActions;
     appearance?: ThemeAppearance;
+    onAfterChanged?: () => void;
     testId?: string;
     text: string | React.ReactNode;
     zIndex?: number;

package/dist/types-ts4.5/view/HoverCard/components/HoverCardContent.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { type HoverCardContentProps } from '../types';
 export declare const hoverCardClassName = "smart-links-hover-preview";
-declare const HoverCardContent: ({ id, cardState, onActionClick, onResolve, renderers, url, onMouseEnter, onMouseLeave, actionOptions, }: HoverCardContentProps) => React.JSX.Element | null;
+declare const HoverCardContent: ({ id, cardState, onActionClick, onResolve, renderers, url, onMouseEnter, onMouseLeave, actionOptions, hoverPreviewOptions, }: HoverCardContentProps) => React.JSX.Element | null;
 export default HoverCardContent;

package/dist/types-ts4.5/view/HoverCard/types.d.ts

@@ -93,6 +93,7 @@ export type HoverCardContentProps = {
     onResolve: () => void;
     renderers?: CardProviderRenderers;
     url: string;
+    hoverPreviewOptions?: HoverPreviewOptions;
 };
 export type ContentContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     isAIEnabled?: boolean;
@@ -108,4 +109,8 @@ export interface HoverPreviewOptions {
      * Delay (in milliseconds) between hovering over the trigger element and the hover card opening. Defaults to 500ms.
      */
     fadeInDelay?: number;
+    /**
+     * Render a custom component instead of the default hover card.
+     */
+    render?: () => React.ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "43.6.5",
+	"version": "43.7.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -53,24 +53,24 @@
 		"@atlaskit/link-analytics": "^11.0.0",
 		"@atlaskit/link-client-extension": "^6.0.0",
 		"@atlaskit/link-extractors": "^2.4.0",
-		"@atlaskit/link-test-helpers": "^8.4.0",
+		"@atlaskit/link-test-helpers": "^8.5.0",
 		"@atlaskit/linking-common": "^9.8.0",
-		"@atlaskit/linking-types": "^14.1.0",
+		"@atlaskit/linking-types": "^14.2.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/lozenge": "^13.1.0",
 		"@atlaskit/menu": "^8.4.0",
-		"@atlaskit/modal-dialog": "^14.6.0",
+		"@atlaskit/modal-dialog": "^14.7.0",
 		"@atlaskit/outbound-auth-flow-client": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.6.0",
 		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/section-message": "^8.9.0",
-		"@atlaskit/select": "^21.3.0",
+		"@atlaskit/select": "^21.4.0",
 		"@atlaskit/spinner": "^19.0.0",
-		"@atlaskit/textarea": "^8.0.0",
-		"@atlaskit/textfield": "^8.0.0",
+		"@atlaskit/textarea": "^8.1.0",
+		"@atlaskit/textfield": "^8.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.37.0",
+		"@atlaskit/tmp-editor-statsig": "^13.38.0",
 		"@atlaskit/tokens": "^8.0.0",
 		"@atlaskit/tooltip": "^20.8.0",
 		"@atlaskit/ufo": "^0.4.0",
@@ -237,6 +237,9 @@
 		},
 		"platform-linking-smart-card-layered-link-a11y": {
 			"type": "boolean"
+		},
+		"smart-link-custom-hover-card-content": {
+			"type": "boolean"
 		}
 	},
 	"compassUnitTestMetricSourceId": "ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:metric-source/c5751cc6-3513-4070-9deb-af31e86aed34/f74ef1bc-7240-4aac-9dc8-9dc43b502089"