@atlaskit/renderer 120.4.0 → 120.4.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/renderer
 
+## 120.4.2
+
+### Patch Changes
+
+- [`598cea2432fa9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/598cea2432fa9) -
+  [ux] UI and behaviour updates of the HoverLinkOverlay for the Preview Panels.
+- Updated dependencies
+
+## 120.4.1
+
+### Patch Changes
+
+- [#199353](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199353)
+  [`f2d4ca35574b8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2d4ca35574b8) -
+  Internal changes to how border radius values are applied. No visual change.
+- Updated dependencies
+
 ## 120.4.0
 
 ### Minor Changes

package/afm-passionfruit/tsconfig.json

@@ -0,0 +1,135 @@
+{
+	"extends": "../../../../tsconfig.entry-points.passionfruit.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../passionfruit/tsDist/@atlaskit__renderer/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	],
+	"references": [
+		{
+			"path": "../../adf-utils/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../analytics/analytics-listeners/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../analytics/analytics-namespaced-context/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../analytics/analytics-next/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/button/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/code/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-json-transformer/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-palette/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-shared-styles/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-tables/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../elements/emoji/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../measurement/feature-gate-js-client/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/link/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../linking-platform/link-datasource/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-card/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-client/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-client-react/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-common/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-filmstrip/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-ui/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-viewer/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../react-ufo/atlaskit/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../linking-platform/smart-card/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../elements/status/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../elements/task-decision/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/theme/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../tmp-editor-statsig/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/visually-hidden/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../linking-platform/link-provider/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-core/afm-passionfruit/tsconfig.json"
+		}
+	]
+}

package/afm-volt/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{
@@ -35,9 +41,6 @@
 		{
 			"path": "../../../design-system/code/afm-volt/tsconfig.json"
 		},
-		{
-			"path": "../../editor-common/afm-volt/tsconfig.json"
-		},
 		{
 			"path": "../../editor-json-transformer/afm-volt/tsconfig.json"
 		},
@@ -119,6 +122,9 @@
 		{
 			"path": "../../../design-system/visually-hidden/afm-volt/tsconfig.json"
 		},
+		{
+			"path": "../../editor-common/afm-volt/tsconfig.json"
+		},
 		{
 			"path": "../../../linking-platform/link-provider/afm-volt/tsconfig.json"
 		},

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

@@ -11,6 +11,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _linkProvider = require("@atlaskit/link-provider");
 var _smartCard = require("@atlaskit/smart-card");
+var _hooks = require("@atlaskit/smart-card/hooks");
 var _ssr = require("@atlaskit/smart-card/ssr");
 var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -34,8 +35,64 @@ var HoverLinkOverlayNoop = function HoverLinkOverlayNoop(props) {
 var HoverLinkOverlayWithCondition = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
   return (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking');
 }, _ui.HoverLinkOverlay, HoverLinkOverlayNoop);
-var InlineCard = function InlineCard(props) {
+var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
   var _cardContext$value, _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
+  var rendererAppearance = _ref.rendererAppearance,
+    isResolvedViewRendered = _ref.isResolvedViewRendered,
+    url = _ref.url,
+    children = _ref.children;
+  var cardContext = (0, _linkProvider.useSmartCardContext)();
+  // Note: useSmartLinkActions throws without smart card context. Using it here is safe
+  // because we checked cardContext availability in the parent component
+  var actions = (0, _hooks.useSmartLinkActions)({
+    url: url,
+    appearance: 'inline'
+  });
+  var preview = (0, _react.useMemo)(function () {
+    return actions.find(function (action) {
+      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 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);
+  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, {
+    ari: ari
+  }));
+  var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
+  var isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
+  var isPreviewModalAvailable = Boolean(preview);
+  var isPreviewAvailable = isPreviewModalAvailable || isPreviewPanelAvailable;
+  var showPanelButtonIcon = isPreviewPanelAvailable ? 'panel' : isPreviewModalAvailable ? 'modal' : undefined;
+  var Overlay = isPreviewAvailable ? HoverLinkOverlayWithCondition : HoverLinkOverlayNoop;
+  return (0, _react2.jsx)(Overlay, {
+    isVisible: isResolvedViewRendered,
+    url: url,
+    compactPadding: rendererAppearance === 'comment',
+    showPanelButton: isPreviewAvailable,
+    showPanelButtonIcon: showPanelButtonIcon,
+    onClick: function onClick(event) {
+      if (isPreviewPanelAvailable) {
+        // Prevent anchor default behaviour(click to open the anchor link)
+        // When glance panel is available, let openPreviewPanel handle it
+        event.preventDefault();
+        openPreviewPanel === null || openPreviewPanel === void 0 || openPreviewPanel({
+          url: url || '',
+          ari: ari || '',
+          name: name || '',
+          iconUrl: iconUrl
+        });
+      } else if (isPreviewModalAvailable) {
+        event.preventDefault();
+        if (preview) {
+          preview.invoke();
+        }
+      }
+    }
+  }, children);
+};
+var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
@@ -54,10 +111,10 @@ var InlineCard = function InlineCard(props) {
     onClick: onClick,
     container: portal
   };
-  var _ref = smartLinks || {},
-    hideHoverPreview = _ref.hideHoverPreview,
-    actionOptions = _ref.actionOptions,
-    ssr = _ref.ssr;
+  var _ref2 = smartLinks || {},
+    hideHoverPreview = _ref2.hideHoverPreview,
+    actionOptions = _ref2.actionOptions,
+    ssr = _ref2.ssr;
   var analyticsData = {
     attributes: {
       location: 'renderer'
@@ -101,33 +158,13 @@ var InlineCard = function InlineCard(props) {
       onClick: onClick
     }));
   }
-  var onError = function onError(_ref2) {
-    var err = _ref2.err;
+  var onError = function onError(_ref3) {
+    var err = _ref3.err;
     if (err) {
       throw err;
     }
   };
-  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 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);
-  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, {
-    ari: ari
-  }));
-  var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
-  var handleOpenGlancePanelClick = function handleOpenGlancePanelClick(event) {
-    if (openPreviewPanel && isPanelAvailable) {
-      // Prevent anchor default behaviour(click to open the anchor link)
-      // When glance panel is available, let openPreviewPanel handle it
-      event.preventDefault();
-      openPreviewPanel({
-        url: url || '',
-        ari: ari,
-        name: name || '',
-        iconUrl: iconUrl
-      });
-    }
-  };
+  var MaybeOverlay = cardContext !== null && cardContext !== void 0 && cardContext.value ? OverlayWithCardContext : HoverLinkOverlayNoop;
   return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
     data: analyticsData
   }, (0, _react2.jsx)("span", (0, _extends2.default)({
@@ -140,12 +177,10 @@ var InlineCard = function InlineCard(props) {
     unsupportedComponent: _ui.UnsupportedInline
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, cardProps), (0, _react2.jsx)(HoverLinkOverlayWithCondition, {
-    isVisible: isResolvedViewRendered,
+  }, cardProps), (0, _react2.jsx)(MaybeOverlay, {
     url: url || '',
-    compactPadding: rendererAppearance === 'comment',
-    showPanelButton: !!isPanelAvailable,
-    onClick: handleOpenGlancePanelClick
+    rendererAppearance: rendererAppearance,
+    isResolvedViewRendered: isResolvedViewRendered
   }, (0, _react2.jsx)(_smartCard.Card, (0, _extends2.default)({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,

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

@@ -781,6 +781,16 @@ var smartCardStylesAvatarMarginFix2 = (0, _react.css)((0, _defineProperty2.defau
     marginTop: 0
   }
 }));
+
+// In Renderer in Jira there is no SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, so using data-inline-cart="true"
+var headerSmartCardStyles = (0, _react.css)({
+  '[data-inline-card="true"]': {
+    '[data-inlinecard-button-overlay="icon-wrapper-line-height"] span': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 0
+    }
+  }
+});
 var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -1453,7 +1463,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
         '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
       },
-      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _platformFeatureFlags.fg)('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, (0, _platformFeatureFlags.fg)('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking') && headerSmartCardStyles, (0, _platformFeatureFlags.fg)('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, (0, _platformFeatureFlags.fg)('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -63,7 +63,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "120.3.7";
+var packageVersion = "120.4.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -3,11 +3,12 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useSmartCardContext } from '@atlaskit/link-provider';
 import { Card, getObjectAri, getObjectIconUrl, getObjectName } from '@atlaskit/smart-card';
+import { useSmartLinkActions } from '@atlaskit/smart-card/hooks';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { HoverLinkOverlay, UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -20,8 +21,61 @@ import { useInlineAnnotationProps } from '../../ui/annotations/element/useInline
 import { usePortal } from '../../ui/Renderer/PortalContext';
 const HoverLinkOverlayNoop = props => jsx(Fragment, null, props.children);
 const HoverLinkOverlayWithCondition = componentWithCondition(() => fg('platform_editor_preview_panel_linking'), HoverLinkOverlay, HoverLinkOverlayNoop);
-const InlineCard = props => {
+const OverlayWithCardContext = ({
+  rendererAppearance,
+  isResolvedViewRendered,
+  url,
+  children
+}) => {
   var _cardContext$value, _cardContext$value$st, _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
+  const cardContext = useSmartCardContext();
+  // Note: useSmartLinkActions throws without smart card context. Using it here is safe
+  // because we checked cardContext availability in the parent component
+  const actions = useSmartLinkActions({
+    url,
+    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 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);
+  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, {
+    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 isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
+  const isPreviewModalAvailable = Boolean(preview);
+  const isPreviewAvailable = isPreviewModalAvailable || isPreviewPanelAvailable;
+  const showPanelButtonIcon = isPreviewPanelAvailable ? 'panel' : isPreviewModalAvailable ? 'modal' : undefined;
+  const Overlay = isPreviewAvailable ? HoverLinkOverlayWithCondition : HoverLinkOverlayNoop;
+  return jsx(Overlay, {
+    isVisible: isResolvedViewRendered,
+    url: url,
+    compactPadding: rendererAppearance === 'comment',
+    showPanelButton: isPreviewAvailable,
+    showPanelButtonIcon: showPanelButtonIcon,
+    onClick: event => {
+      if (isPreviewPanelAvailable) {
+        // Prevent anchor default behaviour(click to open the anchor link)
+        // When glance panel is available, let openPreviewPanel handle it
+        event.preventDefault();
+        openPreviewPanel === null || openPreviewPanel === void 0 ? void 0 : openPreviewPanel({
+          url: url || '',
+          ari: ari || '',
+          name: name || '',
+          iconUrl
+        });
+      } else if (isPreviewModalAvailable) {
+        event.preventDefault();
+        if (preview) {
+          preview.invoke();
+        }
+      }
+    }
+  }, children);
+};
+const InlineCard = props => {
   const {
     url,
     data,
@@ -94,27 +148,7 @@ const InlineCard = props => {
       throw err;
     }
   };
-  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 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);
-  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, {
-    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 handleOpenGlancePanelClick = event => {
-    if (openPreviewPanel && isPanelAvailable) {
-      // Prevent anchor default behaviour(click to open the anchor link)
-      // When glance panel is available, let openPreviewPanel handle it
-      event.preventDefault();
-      openPreviewPanel({
-        url: url || '',
-        ari,
-        name: name || '',
-        iconUrl
-      });
-    }
-  };
+  const MaybeOverlay = cardContext !== null && cardContext !== void 0 && cardContext.value ? OverlayWithCardContext : HoverLinkOverlayNoop;
   return jsx(AnalyticsContext, {
     data: analyticsData
   }, jsx("span", _extends({
@@ -127,12 +161,10 @@ const InlineCard = props => {
     unsupportedComponent: UnsupportedInline
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, cardProps), jsx(HoverLinkOverlayWithCondition, {
-    isVisible: isResolvedViewRendered,
+  }, cardProps), jsx(MaybeOverlay, {
     url: url || '',
-    compactPadding: rendererAppearance === 'comment',
-    showPanelButton: !!isPanelAvailable,
-    onClick: handleOpenGlancePanelClick
+    rendererAppearance: rendererAppearance,
+    isResolvedViewRendered: isResolvedViewRendered
   }, jsx(Card, _extends({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,

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

@@ -916,6 +916,16 @@ const smartCardStylesAvatarMarginFix2 = css({
     }
   }
 });
+
+// In Renderer in Jira there is no SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, so using data-inline-cart="true"
+const headerSmartCardStyles = css({
+  '[data-inline-card="true"]': {
+    '[data-inlinecard-button-overlay="icon-wrapper-line-height"] span': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 0
+    }
+  }
+});
 const baseOtherStyles = css({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -1852,7 +1862,7 @@ export const RendererStyleContainer = props => {
         '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
         '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
       },
-      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, fg('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, fg('platform_editor_preview_panel_linking') && headerSmartCardStyles, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, fg('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -49,7 +49,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "120.3.7";
+const packageVersion = "120.4.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'