@atlaskit/renderer 124.0.0 → 124.0.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 124.0.2
+
+### Patch Changes
+
+- [`5a35ce1c7b07a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5a35ce1c7b07a) -
+  Clean up nested border style fg
+- Updated dependencies
+
+## 124.0.1
+
+### Patch Changes
+
+- [`49444f7239178`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/49444f7239178) -
+  Added analytics events to preview panel hover overlays and toolbar button
+- Updated dependencies
+
 ## 124.0.0
 
 ### Patch Changes

package/dist/cjs/analytics/enums.js

@@ -48,11 +48,13 @@ var ACTION_SUBJECT = exports.ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJ
   ACTION_SUBJECT["LINK"] = "link";
   ACTION_SUBJECT["ANNOTATION"] = "annotation";
   ACTION_SUBJECT["MEDIA"] = "media";
+  ACTION_SUBJECT["SMART_LINK"] = "smartLink";
   return ACTION_SUBJECT;
 }({});
 var ACTION_SUBJECT_ID = exports.ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
   ACTION_SUBJECT_ID["HEADING_ANCHOR_LINK"] = "headingAnchorLink";
   ACTION_SUBJECT_ID["LINK"] = "link";
+  ACTION_SUBJECT_ID["HOVER_LABEL"] = "hoverLabel";
   ACTION_SUBJECT_ID["INLINE_COMMENT"] = "inlineComment";
   ACTION_SUBJECT_ID["CODEBLOCK_COPY"] = "codeBlockCopy";
   ACTION_SUBJECT_ID["CODEBLOCK_WRAP"] = "codeBlockWrap";

package/dist/cjs/react/nodes/inlineCard.js

@@ -19,6 +19,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _fallback = require("./fallback");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
@@ -40,10 +41,11 @@ var HoverLinkOverlayWithCondition = (0, _platformFeatureFlagsReact.componentWith
   });
 }, _ui.HoverLinkOverlay, HoverLinkOverlayNoop);
 var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
-  var _cardContext$value, _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
+  var _cardContext$value2, _cardContext$value3, _cardContext$value3$i, _cardContext$value4;
   var rendererAppearance = _ref.rendererAppearance,
     isResolvedViewRendered = _ref.isResolvedViewRendered,
     url = _ref.url,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
     children = _ref.children;
   var cardContext = (0, _linkProvider.useSmartCardContext)();
   // Note: useSmartLinkActions throws without smart card context. Using it here is safe
@@ -57,7 +59,25 @@ var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
       return action.id === 'preview-content';
     });
   }, [actions]);
-  var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[url || ''];
+  var fireHoverLabelAEP = function fireHoverLabelAEP(previewType) {
+    if (fireAnalyticsEvent) {
+      var _cardContext$value, _urlState$details$met, _urlState$details, _urlState$details$met2, _urlState$details2;
+      var store = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store;
+      var urlState = store === null || store === void 0 ? void 0 : store.getState()[url || ''];
+      fireAnalyticsEvent({
+        action: _analytics.ACTION.CLICKED,
+        actionSubject: _analytics.ACTION_SUBJECT.SMART_LINK,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.HOVER_LABEL,
+        eventType: _analytics.EVENT_TYPE.UI,
+        attributes: {
+          previewType: previewType,
+          destinationProduct: (_urlState$details$met = urlState === null || urlState === void 0 || (_urlState$details = urlState.details) === null || _urlState$details === void 0 || (_urlState$details = _urlState$details.meta) === null || _urlState$details === void 0 ? void 0 : _urlState$details.product) !== null && _urlState$details$met !== void 0 ? _urlState$details$met : null,
+          destinationSubproduct: (_urlState$details$met2 = urlState === null || urlState === void 0 || (_urlState$details2 = urlState.details) === null || _urlState$details2 === void 0 || (_urlState$details2 = _urlState$details2.meta) === null || _urlState$details2 === void 0 ? void 0 : _urlState$details2.subproduct) !== null && _urlState$details$met2 !== void 0 ? _urlState$details$met2 : null
+        }
+      });
+    }
+  };
+  var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2 = _cardContext$value2.store) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.getState()[url || ''];
   var ari = (0, _smartCard.getObjectAri)(cardState === null || cardState === void 0 ? void 0 : cardState.details);
   var name = (0, _smartCard.getObjectName)(cardState === null || cardState === void 0 ? void 0 : cardState.details);
   var iconUrl = (0, _smartCard.getObjectIconUrl)(cardState === null || cardState === void 0 ? void 0 : cardState.details);
@@ -68,10 +88,10 @@ var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
     var cardStateUrl = cardState !== null && cardState !== void 0 && (_cardState$details = cardState.details) !== null && _cardState$details !== void 0 && _cardState$details.data && 'url' in cardState.details.data ? cardState.details.data.url : undefined;
     resolvedUrl = cardStateUrl || url;
   }
-  var isPanelAvailable = ari && (cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2$i = _cardContext$value2.isPreviewPanelAvailable) === null || _cardContext$value2$i === void 0 ? void 0 : _cardContext$value2$i.call(_cardContext$value2, {
+  var isPanelAvailable = ari && (cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 || (_cardContext$value3$i = _cardContext$value3.isPreviewPanelAvailable) === null || _cardContext$value3$i === void 0 ? void 0 : _cardContext$value3$i.call(_cardContext$value3, {
     ari: ari
   }));
-  var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
+  var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value4 = cardContext.value) === null || _cardContext$value4 === void 0 ? void 0 : _cardContext$value4.openPreviewPanel;
   var isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
   var isPreviewModalAvailable = Boolean(preview);
   var isPreviewAvailable = isPreviewModalAvailable || isPreviewPanelAvailable;
@@ -94,11 +114,17 @@ var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
           name: name || '',
           iconUrl: iconUrl
         });
+        (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true, {
+          exposure: true
+        }) && fireHoverLabelAEP('panel');
       } else if (isPreviewModalAvailable) {
         event.preventDefault();
         if (preview) {
           preview.invoke();
         }
+        (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true, {
+          exposure: true
+        }) && fireHoverLabelAEP('modal');
       }
     }
   }, children);
@@ -107,6 +133,7 @@ var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
+    fireAnalyticsEvent = props.fireAnalyticsEvent,
     smartLinks = props.smartLinks,
     rendererAppearance = props.rendererAppearance;
   var portal = (0, _PortalContext.usePortal)(props);
@@ -197,7 +224,8 @@ var InlineCard = function InlineCard(props) {
       }, (0, _react2.jsx)(MaybeOverlay, {
         url: url || '',
         rendererAppearance: rendererAppearance,
-        isResolvedViewRendered: isResolvedViewRendered
+        isResolvedViewRendered: isResolvedViewRendered,
+        fireAnalyticsEvent: fireAnalyticsEvent
       }, (0, _react2.jsx)(_ssr.CardSSR, {
         appearance: "inline",
         url: url,
@@ -222,7 +250,8 @@ var InlineCard = function InlineCard(props) {
     }, (0, _react2.jsx)(MaybeOverlay, {
       url: url || '',
       rendererAppearance: rendererAppearance,
-      isResolvedViewRendered: isResolvedViewRendered
+      isResolvedViewRendered: isResolvedViewRendered,
+      fireAnalyticsEvent: fireAnalyticsEvent
     }, (0, _react2.jsx)(_ssr.CardSSR, {
       appearance: "inline",
       url: url,
@@ -257,7 +286,8 @@ var InlineCard = function InlineCard(props) {
   }, cardProps), (0, _react2.jsx)(MaybeOverlay, {
     url: url || '',
     rendererAppearance: rendererAppearance,
-    isResolvedViewRendered: isResolvedViewRendered
+    isResolvedViewRendered: isResolvedViewRendered,
+    fireAnalyticsEvent: fireAnalyticsEvent
   }, (0, _react2.jsx)(_smartCard.Card, (0, _extends2.default)({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,

package/dist/cjs/react/nodes/panel.js

@@ -180,7 +180,7 @@ var PanelStyled = function PanelStyled(_ref) {
     {
       '--ak-renderer-panel-custom-bg-color': customBackgroundColor
     },
-    css: [panelBaseStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor && panelCustomBackground, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && panelNestedIconStyles, (0, _platformFeatureFlags.fg)('platform_editor_add_border_for_nested_panel') && nestedPanelStyles]
+    css: [panelBaseStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor && panelCustomBackground, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && panelNestedIconStyles, nestedPanelStyles]
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);

package/dist/cjs/ui/Renderer/index.js

@@ -68,7 +68,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "123.5.1";
+var packageVersion = "124.0.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/analytics/enums.js

@@ -42,11 +42,13 @@ export let ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJECT) {
   ACTION_SUBJECT["LINK"] = "link";
   ACTION_SUBJECT["ANNOTATION"] = "annotation";
   ACTION_SUBJECT["MEDIA"] = "media";
+  ACTION_SUBJECT["SMART_LINK"] = "smartLink";
   return ACTION_SUBJECT;
 }({});
 export let ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
   ACTION_SUBJECT_ID["HEADING_ANCHOR_LINK"] = "headingAnchorLink";
   ACTION_SUBJECT_ID["LINK"] = "link";
+  ACTION_SUBJECT_ID["HOVER_LABEL"] = "hoverLabel";
   ACTION_SUBJECT_ID["INLINE_COMMENT"] = "inlineComment";
   ACTION_SUBJECT_ID["CODEBLOCK_COPY"] = "codeBlockCopy";
   ACTION_SUBJECT_ID["CODEBLOCK_WRAP"] = "codeBlockWrap";

package/dist/es2019/react/nodes/inlineCard.js

@@ -16,6 +16,7 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
@@ -29,9 +30,10 @@ const OverlayWithCardContext = ({
   rendererAppearance,
   isResolvedViewRendered,
   url,
+  fireAnalyticsEvent,
   children
 }) => {
-  var _cardContext$value, _cardContext$value$st, _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
+  var _cardContext$value2, _cardContext$value2$s, _cardContext$value3, _cardContext$value3$i, _cardContext$value4;
   const cardContext = useSmartCardContext();
   // Note: useSmartLinkActions throws without smart card context. Using it here is safe
   // because we checked cardContext availability in the parent component
@@ -40,7 +42,25 @@ const OverlayWithCardContext = ({
     appearance: 'inline'
   });
   const preview = useMemo(() => actions.find(action => action.id === 'preview-content'), [actions]);
-  const cardState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : (_cardContext$value$st = _cardContext$value.store) === null || _cardContext$value$st === void 0 ? void 0 : _cardContext$value$st.getState()[url || ''];
+  const fireHoverLabelAEP = previewType => {
+    if (fireAnalyticsEvent) {
+      var _cardContext$value, _urlState$details$met, _urlState$details, _urlState$details$met2, _urlState$details$met3, _urlState$details2, _urlState$details2$me;
+      const store = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store;
+      const urlState = store === null || store === void 0 ? void 0 : store.getState()[url || ''];
+      fireAnalyticsEvent({
+        action: ACTION.CLICKED,
+        actionSubject: ACTION_SUBJECT.SMART_LINK,
+        actionSubjectId: ACTION_SUBJECT_ID.HOVER_LABEL,
+        eventType: EVENT_TYPE.UI,
+        attributes: {
+          previewType,
+          destinationProduct: (_urlState$details$met = urlState === null || urlState === void 0 ? void 0 : (_urlState$details = urlState.details) === null || _urlState$details === void 0 ? void 0 : (_urlState$details$met2 = _urlState$details.meta) === null || _urlState$details$met2 === void 0 ? void 0 : _urlState$details$met2.product) !== null && _urlState$details$met !== void 0 ? _urlState$details$met : null,
+          destinationSubproduct: (_urlState$details$met3 = urlState === null || urlState === void 0 ? void 0 : (_urlState$details2 = urlState.details) === null || _urlState$details2 === void 0 ? void 0 : (_urlState$details2$me = _urlState$details2.meta) === null || _urlState$details2$me === void 0 ? void 0 : _urlState$details2$me.subproduct) !== null && _urlState$details$met3 !== void 0 ? _urlState$details$met3 : null
+        }
+      });
+    }
+  };
+  const cardState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : (_cardContext$value2$s = _cardContext$value2.store) === null || _cardContext$value2$s === void 0 ? void 0 : _cardContext$value2$s.getState()[url || ''];
   const ari = getObjectAri(cardState === null || cardState === void 0 ? void 0 : cardState.details);
   const name = getObjectName(cardState === null || cardState === void 0 ? void 0 : cardState.details);
   const iconUrl = getObjectIconUrl(cardState === null || cardState === void 0 ? void 0 : cardState.details);
@@ -51,10 +71,10 @@ const OverlayWithCardContext = ({
     const cardStateUrl = cardState !== null && cardState !== void 0 && (_cardState$details = cardState.details) !== null && _cardState$details !== void 0 && _cardState$details.data && 'url' in cardState.details.data ? cardState.details.data.url : undefined;
     resolvedUrl = cardStateUrl || url;
   }
-  const isPanelAvailable = ari && (cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : (_cardContext$value2$i = _cardContext$value2.isPreviewPanelAvailable) === null || _cardContext$value2$i === void 0 ? void 0 : _cardContext$value2$i.call(_cardContext$value2, {
+  const isPanelAvailable = ari && (cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : (_cardContext$value3$i = _cardContext$value3.isPreviewPanelAvailable) === null || _cardContext$value3$i === void 0 ? void 0 : _cardContext$value3$i.call(_cardContext$value3, {
     ari
   }));
-  const openPreviewPanel = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
+  const openPreviewPanel = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value4 = cardContext.value) === null || _cardContext$value4 === void 0 ? void 0 : _cardContext$value4.openPreviewPanel;
   const isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
   const isPreviewModalAvailable = Boolean(preview);
   const isPreviewAvailable = isPreviewModalAvailable || isPreviewPanelAvailable;
@@ -77,11 +97,17 @@ const OverlayWithCardContext = ({
           name: name || '',
           iconUrl
         });
+        editorExperiment('platform_editor_preview_panel_linking_exp', true, {
+          exposure: true
+        }) && fireHoverLabelAEP('panel');
       } else if (isPreviewModalAvailable) {
         event.preventDefault();
         if (preview) {
           preview.invoke();
         }
+        editorExperiment('platform_editor_preview_panel_linking_exp', true, {
+          exposure: true
+        }) && fireHoverLabelAEP('modal');
       }
     }
   }, children);
@@ -91,6 +117,7 @@ const InlineCard = props => {
     url,
     data,
     eventHandlers,
+    fireAnalyticsEvent,
     smartLinks,
     rendererAppearance
   } = props;
@@ -181,7 +208,8 @@ const InlineCard = props => {
       }, jsx(MaybeOverlay, {
         url: url || '',
         rendererAppearance: rendererAppearance,
-        isResolvedViewRendered: isResolvedViewRendered
+        isResolvedViewRendered: isResolvedViewRendered,
+        fireAnalyticsEvent: fireAnalyticsEvent
       }, jsx(CardSSR, {
         appearance: "inline",
         url: url,
@@ -206,7 +234,8 @@ const InlineCard = props => {
     }, jsx(MaybeOverlay, {
       url: url || '',
       rendererAppearance: rendererAppearance,
-      isResolvedViewRendered: isResolvedViewRendered
+      isResolvedViewRendered: isResolvedViewRendered,
+      fireAnalyticsEvent: fireAnalyticsEvent
     }, jsx(CardSSR, {
       appearance: "inline",
       url: url,
@@ -241,7 +270,8 @@ const InlineCard = props => {
   }, cardProps), jsx(MaybeOverlay, {
     url: url || '',
     rendererAppearance: rendererAppearance,
-    isResolvedViewRendered: isResolvedViewRendered
+    isResolvedViewRendered: isResolvedViewRendered,
+    fireAnalyticsEvent: fireAnalyticsEvent
   }, jsx(Card, _extends({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,

package/dist/es2019/react/nodes/panel.js

@@ -172,7 +172,7 @@ const PanelStyled = ({
     {
       '--ak-renderer-panel-custom-bg-color': customBackgroundColor
     },
-    css: [panelBaseStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && panelCustomBackground, fg('platform_editor_nested_dnd_styles_changes') && panelNestedIconStyles, fg('platform_editor_add_border_for_nested_panel') && nestedPanelStyles]
+    css: [panelBaseStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && panelCustomBackground, fg('platform_editor_nested_dnd_styles_changes') && panelNestedIconStyles, nestedPanelStyles]
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);

package/dist/es2019/ui/Renderer/index.js

@@ -54,7 +54,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 const TABLE_WIDTH_INFO_TIMEOUT = 10000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "123.5.1";
+const packageVersion = "124.0.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/analytics/enums.js

@@ -42,11 +42,13 @@ export var ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJECT) {
   ACTION_SUBJECT["LINK"] = "link";
   ACTION_SUBJECT["ANNOTATION"] = "annotation";
   ACTION_SUBJECT["MEDIA"] = "media";
+  ACTION_SUBJECT["SMART_LINK"] = "smartLink";
   return ACTION_SUBJECT;
 }({});
 export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
   ACTION_SUBJECT_ID["HEADING_ANCHOR_LINK"] = "headingAnchorLink";
   ACTION_SUBJECT_ID["LINK"] = "link";
+  ACTION_SUBJECT_ID["HOVER_LABEL"] = "hoverLabel";
   ACTION_SUBJECT_ID["INLINE_COMMENT"] = "inlineComment";
   ACTION_SUBJECT_ID["CODEBLOCK_COPY"] = "codeBlockCopy";
   ACTION_SUBJECT_ID["CODEBLOCK_WRAP"] = "codeBlockWrap";

package/dist/esm/react/nodes/inlineCard.js

@@ -17,6 +17,7 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
@@ -31,10 +32,11 @@ var HoverLinkOverlayWithCondition = componentWithCondition(function () {
   });
 }, HoverLinkOverlay, HoverLinkOverlayNoop);
 var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
-  var _cardContext$value, _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
+  var _cardContext$value2, _cardContext$value3, _cardContext$value3$i, _cardContext$value4;
   var rendererAppearance = _ref.rendererAppearance,
     isResolvedViewRendered = _ref.isResolvedViewRendered,
     url = _ref.url,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
     children = _ref.children;
   var cardContext = useSmartCardContext();
   // Note: useSmartLinkActions throws without smart card context. Using it here is safe
@@ -48,7 +50,25 @@ var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
       return action.id === 'preview-content';
     });
   }, [actions]);
-  var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[url || ''];
+  var fireHoverLabelAEP = function fireHoverLabelAEP(previewType) {
+    if (fireAnalyticsEvent) {
+      var _cardContext$value, _urlState$details$met, _urlState$details, _urlState$details$met2, _urlState$details2;
+      var store = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store;
+      var urlState = store === null || store === void 0 ? void 0 : store.getState()[url || ''];
+      fireAnalyticsEvent({
+        action: ACTION.CLICKED,
+        actionSubject: ACTION_SUBJECT.SMART_LINK,
+        actionSubjectId: ACTION_SUBJECT_ID.HOVER_LABEL,
+        eventType: EVENT_TYPE.UI,
+        attributes: {
+          previewType: previewType,
+          destinationProduct: (_urlState$details$met = urlState === null || urlState === void 0 || (_urlState$details = urlState.details) === null || _urlState$details === void 0 || (_urlState$details = _urlState$details.meta) === null || _urlState$details === void 0 ? void 0 : _urlState$details.product) !== null && _urlState$details$met !== void 0 ? _urlState$details$met : null,
+          destinationSubproduct: (_urlState$details$met2 = urlState === null || urlState === void 0 || (_urlState$details2 = urlState.details) === null || _urlState$details2 === void 0 || (_urlState$details2 = _urlState$details2.meta) === null || _urlState$details2 === void 0 ? void 0 : _urlState$details2.subproduct) !== null && _urlState$details$met2 !== void 0 ? _urlState$details$met2 : null
+        }
+      });
+    }
+  };
+  var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2 = _cardContext$value2.store) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.getState()[url || ''];
   var ari = getObjectAri(cardState === null || cardState === void 0 ? void 0 : cardState.details);
   var name = getObjectName(cardState === null || cardState === void 0 ? void 0 : cardState.details);
   var iconUrl = getObjectIconUrl(cardState === null || cardState === void 0 ? void 0 : cardState.details);
@@ -59,10 +79,10 @@ var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
     var cardStateUrl = cardState !== null && cardState !== void 0 && (_cardState$details = cardState.details) !== null && _cardState$details !== void 0 && _cardState$details.data && 'url' in cardState.details.data ? cardState.details.data.url : undefined;
     resolvedUrl = cardStateUrl || url;
   }
-  var isPanelAvailable = ari && (cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2$i = _cardContext$value2.isPreviewPanelAvailable) === null || _cardContext$value2$i === void 0 ? void 0 : _cardContext$value2$i.call(_cardContext$value2, {
+  var isPanelAvailable = ari && (cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 || (_cardContext$value3$i = _cardContext$value3.isPreviewPanelAvailable) === null || _cardContext$value3$i === void 0 ? void 0 : _cardContext$value3$i.call(_cardContext$value3, {
     ari: ari
   }));
-  var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
+  var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value4 = cardContext.value) === null || _cardContext$value4 === void 0 ? void 0 : _cardContext$value4.openPreviewPanel;
   var isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
   var isPreviewModalAvailable = Boolean(preview);
   var isPreviewAvailable = isPreviewModalAvailable || isPreviewPanelAvailable;
@@ -85,11 +105,17 @@ var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
           name: name || '',
           iconUrl: iconUrl
         });
+        editorExperiment('platform_editor_preview_panel_linking_exp', true, {
+          exposure: true
+        }) && fireHoverLabelAEP('panel');
       } else if (isPreviewModalAvailable) {
         event.preventDefault();
         if (preview) {
           preview.invoke();
         }
+        editorExperiment('platform_editor_preview_panel_linking_exp', true, {
+          exposure: true
+        }) && fireHoverLabelAEP('modal');
       }
     }
   }, children);
@@ -98,6 +124,7 @@ var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
+    fireAnalyticsEvent = props.fireAnalyticsEvent,
     smartLinks = props.smartLinks,
     rendererAppearance = props.rendererAppearance;
   var portal = usePortal(props);
@@ -188,7 +215,8 @@ var InlineCard = function InlineCard(props) {
       }, jsx(MaybeOverlay, {
         url: url || '',
         rendererAppearance: rendererAppearance,
-        isResolvedViewRendered: isResolvedViewRendered
+        isResolvedViewRendered: isResolvedViewRendered,
+        fireAnalyticsEvent: fireAnalyticsEvent
       }, jsx(CardSSR, {
         appearance: "inline",
         url: url,
@@ -213,7 +241,8 @@ var InlineCard = function InlineCard(props) {
     }, jsx(MaybeOverlay, {
       url: url || '',
       rendererAppearance: rendererAppearance,
-      isResolvedViewRendered: isResolvedViewRendered
+      isResolvedViewRendered: isResolvedViewRendered,
+      fireAnalyticsEvent: fireAnalyticsEvent
     }, jsx(CardSSR, {
       appearance: "inline",
       url: url,
@@ -248,7 +277,8 @@ var InlineCard = function InlineCard(props) {
   }, cardProps), jsx(MaybeOverlay, {
     url: url || '',
     rendererAppearance: rendererAppearance,
-    isResolvedViewRendered: isResolvedViewRendered
+    isResolvedViewRendered: isResolvedViewRendered,
+    fireAnalyticsEvent: fireAnalyticsEvent
   }, jsx(Card, _extends({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,

package/dist/esm/react/nodes/panel.js

@@ -173,7 +173,7 @@ var PanelStyled = function PanelStyled(_ref) {
     {
       '--ak-renderer-panel-custom-bg-color': customBackgroundColor
     },
-    css: [panelBaseStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && panelCustomBackground, fg('platform_editor_nested_dnd_styles_changes') && panelNestedIconStyles, fg('platform_editor_add_border_for_nested_panel') && nestedPanelStyles]
+    css: [panelBaseStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && panelCustomBackground, fg('platform_editor_nested_dnd_styles_changes') && panelNestedIconStyles, nestedPanelStyles]
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);

package/dist/esm/ui/Renderer/index.js

@@ -59,7 +59,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "123.5.1";
+var packageVersion = "124.0.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -39,11 +39,13 @@ export declare enum ACTION_SUBJECT {
     MEDIA_SINGLE = "mediaSingle",
     LINK = "link",
     ANNOTATION = "annotation",
-    MEDIA = "media"
+    MEDIA = "media",
+    SMART_LINK = "smartLink"
 }
 export declare enum ACTION_SUBJECT_ID {
     HEADING_ANCHOR_LINK = "headingAnchorLink",
     LINK = "link",
+    HOVER_LABEL = "hoverLabel",
     INLINE_COMMENT = "inlineComment",
     CODEBLOCK_COPY = "codeBlockCopy",
     CODEBLOCK_WRAP = "codeBlockWrap"

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

@@ -67,6 +67,11 @@ type CodeBlockWrapAEP = ButtonAEP<ACTION_SUBJECT_ID.CODEBLOCK_WRAP, {
     wrapped: boolean;
 }>;
 type HeadingAnchorLinkButtonAEP = ButtonAEP<ACTION_SUBJECT_ID.HEADING_ANCHOR_LINK, undefined>;
+type HoverLabelAEP = UIAEP<ACTION.CLICKED, ACTION_SUBJECT.SMART_LINK, ACTION_SUBJECT_ID.HOVER_LABEL, {
+    destinationProduct: string | null;
+    destinationSubproduct: string | null;
+    previewType: 'panel' | 'modal';
+}>;
 type TableSortColumnNotAllowedAEP = AEP<ACTION.SORT_COLUMN_NOT_ALLOWED, ACTION_SUBJECT.TABLE, undefined, {
     mode: MODE.RENDERER;
     platform: PLATFORM.WEB;
@@ -118,6 +123,6 @@ declare enum RESOLVE_METHOD {
 type AnnotationAEP = AEP<AnnotationActionType, ACTION_SUBJECT.ANNOTATION, ACTION_SUBJECT_ID.INLINE_COMMENT, AnnotationAEPAttributes, undefined>;
 type MediaLnkTransformedAEP = AEP<ACTION.MEDIA_LINK_TRANSFORMED, ACTION_SUBJECT.RENDERER, undefined, undefined, EVENT_TYPE.OPERATIONAL>;
 type NestedTableTransformedAEP = OperationalAEP<ACTION.NESTED_TABLE_TRANSFORMED, ACTION_SUBJECT.RENDERER, undefined, undefined>;
-export type AnalyticsEventPayload<T = void> = RendererStartAEP | RendererRenderedAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP;
+export type AnalyticsEventPayload<T = void> = RendererStartAEP | RendererRenderedAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | HoverLabelAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP;
 export type FireAnalyticsCallback = <T = void>(payload: AnalyticsEventPayload<T>) => void | undefined;
 export {};

package/dist/types/react/nodes/inlineCard.d.ts

@@ -4,9 +4,11 @@ import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
 import type { SmartLinksOptions } from '../../types/smartLinksOptions';
 import { type MarkDataAttributes } from '../../ui/annotations/element/useInlineAnnotationProps';
 import type { RendererAppearance } from '../../ui/Renderer/types';
+import type { AnalyticsEventPayload } from '../../analytics/events';
 export interface InlineCardProps extends MarkDataAttributes {
     data?: object;
     eventHandlers?: EventHandlers;
+    fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     marks?: Mark[];
     portal?: HTMLElement;
     rendererAppearance?: RendererAppearance;

package/dist/types-ts4.5/analytics/enums.d.ts

@@ -39,11 +39,13 @@ export declare enum ACTION_SUBJECT {
     MEDIA_SINGLE = "mediaSingle",
     LINK = "link",
     ANNOTATION = "annotation",
-    MEDIA = "media"
+    MEDIA = "media",
+    SMART_LINK = "smartLink"
 }
 export declare enum ACTION_SUBJECT_ID {
     HEADING_ANCHOR_LINK = "headingAnchorLink",
     LINK = "link",
+    HOVER_LABEL = "hoverLabel",
     INLINE_COMMENT = "inlineComment",
     CODEBLOCK_COPY = "codeBlockCopy",
     CODEBLOCK_WRAP = "codeBlockWrap"

package/dist/types-ts4.5/analytics/events.d.ts

@@ -67,6 +67,11 @@ type CodeBlockWrapAEP = ButtonAEP<ACTION_SUBJECT_ID.CODEBLOCK_WRAP, {
     wrapped: boolean;
 }>;
 type HeadingAnchorLinkButtonAEP = ButtonAEP<ACTION_SUBJECT_ID.HEADING_ANCHOR_LINK, undefined>;
+type HoverLabelAEP = UIAEP<ACTION.CLICKED, ACTION_SUBJECT.SMART_LINK, ACTION_SUBJECT_ID.HOVER_LABEL, {
+    destinationProduct: string | null;
+    destinationSubproduct: string | null;
+    previewType: 'panel' | 'modal';
+}>;
 type TableSortColumnNotAllowedAEP = AEP<ACTION.SORT_COLUMN_NOT_ALLOWED, ACTION_SUBJECT.TABLE, undefined, {
     mode: MODE.RENDERER;
     platform: PLATFORM.WEB;
@@ -118,6 +123,6 @@ declare enum RESOLVE_METHOD {
 type AnnotationAEP = AEP<AnnotationActionType, ACTION_SUBJECT.ANNOTATION, ACTION_SUBJECT_ID.INLINE_COMMENT, AnnotationAEPAttributes, undefined>;
 type MediaLnkTransformedAEP = AEP<ACTION.MEDIA_LINK_TRANSFORMED, ACTION_SUBJECT.RENDERER, undefined, undefined, EVENT_TYPE.OPERATIONAL>;
 type NestedTableTransformedAEP = OperationalAEP<ACTION.NESTED_TABLE_TRANSFORMED, ACTION_SUBJECT.RENDERER, undefined, undefined>;
-export type AnalyticsEventPayload<T = void> = RendererStartAEP | RendererRenderedAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP;
+export type AnalyticsEventPayload<T = void> = RendererStartAEP | RendererRenderedAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | HoverLabelAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP;
 export type FireAnalyticsCallback = <T = void>(payload: AnalyticsEventPayload<T>) => void | undefined;
 export {};

package/dist/types-ts4.5/react/nodes/inlineCard.d.ts

@@ -4,9 +4,11 @@ import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
 import type { SmartLinksOptions } from '../../types/smartLinksOptions';
 import { type MarkDataAttributes } from '../../ui/annotations/element/useInlineAnnotationProps';
 import type { RendererAppearance } from '../../ui/Renderer/types';
+import type { AnalyticsEventPayload } from '../../analytics/events';
 export interface InlineCardProps extends MarkDataAttributes {
     data?: object;
     eventHandlers?: EventHandlers;
+    fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     marks?: Mark[];
     portal?: HTMLElement;
     rendererAppearance?: RendererAppearance;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "124.0.0",
+	"version": "124.0.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -51,14 +51,14 @@
 		"@atlaskit/media-viewer": "^52.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
-		"@atlaskit/react-ufo": "^4.10.0",
-		"@atlaskit/smart-card": "^42.2.0",
+		"@atlaskit/react-ufo": "^4.11.0",
+		"@atlaskit/smart-card": "^42.3.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^12.31.0",
-		"@atlaskit/tokens": "^6.3.0",
-		"@atlaskit/tooltip": "^20.4.0",
+		"@atlaskit/tmp-editor-statsig": "^12.32.0",
+		"@atlaskit/tokens": "^6.4.0",
+		"@atlaskit/tooltip": "^20.5.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -70,7 +70,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.0.0",
+		"@atlaskit/editor-common": "^110.2.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",