@atlaskit/renderer 126.11.1 → 126.12.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/renderer
 
+## 126.12.1
+
+### Patch Changes
+
+- [`85444e8a5672a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/85444e8a5672a) -
+  EDITOR-5526 clean up platform_synced_block_patch_2
+- Updated dependencies
+
+## 126.12.0
+
+### Minor Changes
+
+- [`e1489e8d410d5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e1489e8d410d5) -
+  Exposing optional URL-based Suspense boundaries through SmartCardProvider for renderer inline card
+  nodes
+
+### Patch Changes
+
+- [`63173c2b1171a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63173c2b1171a) -
+  [ux] Enable sticky header for reference synced blocks in Editor
+- Updated dependencies
+
 ## 126.11.1
 
 ### Patch Changes

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

@@ -31,6 +31,7 @@ var _linkExtractors = require("@atlaskit/link-extractors");
  * @jsxRuntime classic
  * @jsx jsx
  */
+/* eslint-disable jsdoc/check-tag-names */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -150,6 +151,17 @@ var InlineCard = function InlineCard(props) {
     onSetLinkTarget = props.onSetLinkTarget;
   var portal = (0, _PortalContext.usePortal)(props);
   var cardContext = (0, _linkProvider.useSmartCardContext)();
+  var SuspenseWrapperForUrl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.SuspenseWrapperForUrl;
+
+  // Helper fn to conditionally wrap cards when suspense boundary is passed in via product
+  var wrapWithSuspense = function wrapWithSuspense(card) {
+    if (SuspenseWrapperForUrl && url) {
+      return (0, _react2.jsx)(SuspenseWrapperForUrl, {
+        url: url
+      }, card);
+    }
+    return card;
+  };
   var reload = (0, _hooks.useSmartLinkReload)({
     url: url || ''
   });
@@ -209,23 +221,23 @@ var InlineCard = function InlineCard(props) {
         // eslint-disable-next-line react/jsx-props-no-spreading
       }, inlineAnnotationProps), (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
         data: analyticsData
-      }, (0, _react2.jsx)(_ssr.CardSSR, {
+      }, wrapWithSuspense((0, _react2.jsx)(_ssr.CardSSR, {
         appearance: "inline",
         url: url,
         showHoverPreview: !hideHoverPreview,
         actionOptions: actionOptions,
         onClick: onClick
-      })));
+      }))));
     }
     return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
       data: analyticsData
-    }, (0, _react2.jsx)(_ssr.CardSSR, {
+    }, wrapWithSuspense((0, _react2.jsx)(_ssr.CardSSR, {
       appearance: "inline",
       url: url,
       showHoverPreview: !hideHoverPreview,
       actionOptions: actionOptions,
       onClick: onClick
-    }), CompetitorPromptComponent);
+    })), CompetitorPromptComponent);
   } else if ((ssr || cardState && (0, _expValEquals.expValEquals)('platform_editor_smartlink_local_cache', 'isEnabled', true)) && url && (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true, {
     exposure: true
   })) {
@@ -248,7 +260,7 @@ var InlineCard = function InlineCard(props) {
         rendererAppearance: rendererAppearance,
         isResolvedViewRendered: isResolvedViewRendered,
         fireAnalyticsEvent: fireAnalyticsEvent
-      }, (0, _react2.jsx)(_ssr.CardSSR, {
+      }, wrapWithSuspense((0, _react2.jsx)(_ssr.CardSSR, {
         appearance: "inline",
         url: url,
         showHoverPreview: !hideHoverPreview,
@@ -265,7 +277,7 @@ var InlineCard = function InlineCard(props) {
         },
         onError: onError,
         disablePreviewPanel: true
-      }))));
+      })))));
     }
     return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
       data: analyticsData
@@ -274,7 +286,7 @@ var InlineCard = function InlineCard(props) {
       rendererAppearance: rendererAppearance,
       isResolvedViewRendered: isResolvedViewRendered,
       fireAnalyticsEvent: fireAnalyticsEvent
-    }, (0, _react2.jsx)(_ssr.CardSSR, {
+    }, wrapWithSuspense((0, _react2.jsx)(_ssr.CardSSR, {
       appearance: "inline",
       url: url,
       showHoverPreview: !hideHoverPreview,
@@ -291,7 +303,7 @@ var InlineCard = function InlineCard(props) {
       },
       onError: onError,
       disablePreviewPanel: true
-    })), CompetitorPromptComponent);
+    }))), CompetitorPromptComponent);
   }
   return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
     data: analyticsData
@@ -312,7 +324,7 @@ var InlineCard = function InlineCard(props) {
     rendererAppearance: rendererAppearance,
     isResolvedViewRendered: isResolvedViewRendered,
     fireAnalyticsEvent: fireAnalyticsEvent
-  }, (0, _react2.jsx)(_smartCard.Card, (0, _extends2.default)({
+  }, wrapWithSuspense((0, _react2.jsx)(_smartCard.Card, (0, _extends2.default)({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,
     actionOptions: actionOptions
@@ -332,7 +344,7 @@ var InlineCard = function InlineCard(props) {
     disablePreviewPanel: (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true, {
       exposure: true
     })
-  }))), CompetitorPromptComponent)));
+  })))), CompetitorPromptComponent)));
 };
 var _default_1 = (0, _SmartCardStorage.withSmartCardStorage)(InlineCard);
 var _default = exports.default = _default_1;

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

@@ -1946,7 +1946,8 @@ var denseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _definePrope
 var syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.error, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
   borderRadius: "var(--ds-radius-small, 3px)",
   marginTop: "var(--ds-space-075, 6px)",
-  paddingBlock: "var(--ds-space-150, 12px)"
+  paddingBlock: "var(--ds-space-150, 12px)",
+  overflow: 'visible'
 }), ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer), {
   // First child node in syncBlock in editor is overridden with marginTop: 0, hence apply the same style in renderer for consistency
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
@@ -1964,13 +1965,6 @@ var syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
 }), ".".concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
   boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
 }));
-var syncBlockOverflowStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.error, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
-  // Contain floated elements (wrap-left/wrap-right) within synced block borders
-  overflow: 'hidden'
-}));
-var syncBlockPatch2Styles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.error, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
-  overflow: 'visible'
-}));
 var RendererStyleContainer = exports.RendererStyleContainer = function RendererStyleContainer(props) {
   var onClick = props.onClick,
     onMouseDown = props.onMouseDown,
@@ -2016,7 +2010,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     // this should be placed after baseOtherStyles
     (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), (0, _expValEquals.expValEquals)('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockOverflowStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_2') && syncBlockPatch2Styles, centerWrapperStyles],
+    (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -71,7 +71,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "126.11.0";
+var packageVersion = "126.12.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
+/* eslint-disable jsdoc/check-tag-names */
 import { Fragment, useState, useMemo, useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -135,6 +136,17 @@ const InlineCard = props => {
   } = props;
   const portal = usePortal(props);
   const cardContext = useSmartCardContext();
+  const SuspenseWrapperForUrl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.SuspenseWrapperForUrl;
+
+  // Helper fn to conditionally wrap cards when suspense boundary is passed in via product
+  const wrapWithSuspense = card => {
+    if (SuspenseWrapperForUrl && url) {
+      return jsx(SuspenseWrapperForUrl, {
+        url: url
+      }, card);
+    }
+    return card;
+  };
   const reload = useSmartLinkReload({
     url: url || ''
   });
@@ -193,23 +205,23 @@ const InlineCard = props => {
         // eslint-disable-next-line react/jsx-props-no-spreading
       }, inlineAnnotationProps), jsx(AnalyticsContext, {
         data: analyticsData
-      }, jsx(CardSSR, {
+      }, wrapWithSuspense(jsx(CardSSR, {
         appearance: "inline",
         url: url,
         showHoverPreview: !hideHoverPreview,
         actionOptions: actionOptions,
         onClick: onClick
-      })));
+      }))));
     }
     return jsx(AnalyticsContext, {
       data: analyticsData
-    }, jsx(CardSSR, {
+    }, wrapWithSuspense(jsx(CardSSR, {
       appearance: "inline",
       url: url,
       showHoverPreview: !hideHoverPreview,
       actionOptions: actionOptions,
       onClick: onClick
-    }), CompetitorPromptComponent);
+    })), CompetitorPromptComponent);
   } else if ((ssr || cardState && expValEquals('platform_editor_smartlink_local_cache', 'isEnabled', true)) && url && editorExperiment('platform_editor_preview_panel_linking_exp', true, {
     exposure: true
   })) {
@@ -232,7 +244,7 @@ const InlineCard = props => {
         rendererAppearance: rendererAppearance,
         isResolvedViewRendered: isResolvedViewRendered,
         fireAnalyticsEvent: fireAnalyticsEvent
-      }, jsx(CardSSR, {
+      }, wrapWithSuspense(jsx(CardSSR, {
         appearance: "inline",
         url: url,
         showHoverPreview: !hideHoverPreview,
@@ -249,7 +261,7 @@ const InlineCard = props => {
         },
         onError: onError,
         disablePreviewPanel: true
-      }))));
+      })))));
     }
     return jsx(AnalyticsContext, {
       data: analyticsData
@@ -258,7 +270,7 @@ const InlineCard = props => {
       rendererAppearance: rendererAppearance,
       isResolvedViewRendered: isResolvedViewRendered,
       fireAnalyticsEvent: fireAnalyticsEvent
-    }, jsx(CardSSR, {
+    }, wrapWithSuspense(jsx(CardSSR, {
       appearance: "inline",
       url: url,
       showHoverPreview: !hideHoverPreview,
@@ -275,7 +287,7 @@ const InlineCard = props => {
       },
       onError: onError,
       disablePreviewPanel: true
-    })), CompetitorPromptComponent);
+    }))), CompetitorPromptComponent);
   }
   return jsx(AnalyticsContext, {
     data: analyticsData
@@ -296,7 +308,7 @@ const InlineCard = props => {
     rendererAppearance: rendererAppearance,
     isResolvedViewRendered: isResolvedViewRendered,
     fireAnalyticsEvent: fireAnalyticsEvent
-  }, jsx(Card, _extends({
+  }, wrapWithSuspense(jsx(Card, _extends({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,
     actionOptions: actionOptions
@@ -316,7 +328,7 @@ const InlineCard = props => {
     disablePreviewPanel: editorExperiment('platform_editor_preview_panel_linking_exp', true, {
       exposure: true
     })
-  }))), CompetitorPromptComponent)));
+  })))), CompetitorPromptComponent)));
 };
 const _default_1 = withSmartCardStorage(InlineCard);
 export default _default_1;

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

@@ -2502,7 +2502,8 @@ const syncBlockStyles = css({
   [`.${SyncBlockSharedCssClassName.renderer}, .${BodiedSyncBlockSharedCssClassName.renderer}, .${SyncBlockSharedCssClassName.error}, .${SyncBlockSharedCssClassName.loading}`]: {
     borderRadius: "var(--ds-radius-small, 3px)",
     marginTop: "var(--ds-space-075, 6px)",
-    paddingBlock: "var(--ds-space-150, 12px)"
+    paddingBlock: "var(--ds-space-150, 12px)",
+    overflow: 'visible'
   },
   [`.${SyncBlockSharedCssClassName.renderer}`]: {
     // First child node in syncBlock in editor is overridden with marginTop: 0, hence apply the same style in renderer for consistency
@@ -2525,17 +2526,6 @@ const syncBlockStyles = css({
     boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`
   }
 });
-const syncBlockOverflowStyles = css({
-  [`.${SyncBlockSharedCssClassName.renderer}, .${BodiedSyncBlockSharedCssClassName.renderer}, .${SyncBlockSharedCssClassName.error}, .${SyncBlockSharedCssClassName.loading}`]: {
-    // Contain floated elements (wrap-left/wrap-right) within synced block borders
-    overflow: 'hidden'
-  }
-});
-const syncBlockPatch2Styles = css({
-  [`.${SyncBlockSharedCssClassName.renderer}, .${BodiedSyncBlockSharedCssClassName.renderer}, .${SyncBlockSharedCssClassName.error}, .${SyncBlockSharedCssClassName.loading}`]: {
-    overflow: 'visible'
-  }
-});
 export const RendererStyleContainer = props => {
   const {
     onClick,
@@ -2583,7 +2573,7 @@ export const RendererStyleContainer = props => {
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, editorExperiment('platform_synced_block', true) && syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2') && syncBlockPatch2Styles, centerWrapperStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -57,7 +57,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.2;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "126.11.0";
+const packageVersion = "126.12.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -4,6 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsxRuntime classic
  * @jsx jsx
  */
+/* eslint-disable jsdoc/check-tag-names */
 import { Fragment, useState, useMemo, useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -141,6 +142,17 @@ var InlineCard = function InlineCard(props) {
     onSetLinkTarget = props.onSetLinkTarget;
   var portal = usePortal(props);
   var cardContext = useSmartCardContext();
+  var SuspenseWrapperForUrl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.SuspenseWrapperForUrl;
+
+  // Helper fn to conditionally wrap cards when suspense boundary is passed in via product
+  var wrapWithSuspense = function wrapWithSuspense(card) {
+    if (SuspenseWrapperForUrl && url) {
+      return jsx(SuspenseWrapperForUrl, {
+        url: url
+      }, card);
+    }
+    return card;
+  };
   var reload = useSmartLinkReload({
     url: url || ''
   });
@@ -200,23 +212,23 @@ var InlineCard = function InlineCard(props) {
         // eslint-disable-next-line react/jsx-props-no-spreading
       }, inlineAnnotationProps), jsx(AnalyticsContext, {
         data: analyticsData
-      }, jsx(CardSSR, {
+      }, wrapWithSuspense(jsx(CardSSR, {
         appearance: "inline",
         url: url,
         showHoverPreview: !hideHoverPreview,
         actionOptions: actionOptions,
         onClick: onClick
-      })));
+      }))));
     }
     return jsx(AnalyticsContext, {
       data: analyticsData
-    }, jsx(CardSSR, {
+    }, wrapWithSuspense(jsx(CardSSR, {
       appearance: "inline",
       url: url,
       showHoverPreview: !hideHoverPreview,
       actionOptions: actionOptions,
       onClick: onClick
-    }), CompetitorPromptComponent);
+    })), CompetitorPromptComponent);
   } else if ((ssr || cardState && expValEquals('platform_editor_smartlink_local_cache', 'isEnabled', true)) && url && editorExperiment('platform_editor_preview_panel_linking_exp', true, {
     exposure: true
   })) {
@@ -239,7 +251,7 @@ var InlineCard = function InlineCard(props) {
         rendererAppearance: rendererAppearance,
         isResolvedViewRendered: isResolvedViewRendered,
         fireAnalyticsEvent: fireAnalyticsEvent
-      }, jsx(CardSSR, {
+      }, wrapWithSuspense(jsx(CardSSR, {
         appearance: "inline",
         url: url,
         showHoverPreview: !hideHoverPreview,
@@ -256,7 +268,7 @@ var InlineCard = function InlineCard(props) {
         },
         onError: onError,
         disablePreviewPanel: true
-      }))));
+      })))));
     }
     return jsx(AnalyticsContext, {
       data: analyticsData
@@ -265,7 +277,7 @@ var InlineCard = function InlineCard(props) {
       rendererAppearance: rendererAppearance,
       isResolvedViewRendered: isResolvedViewRendered,
       fireAnalyticsEvent: fireAnalyticsEvent
-    }, jsx(CardSSR, {
+    }, wrapWithSuspense(jsx(CardSSR, {
       appearance: "inline",
       url: url,
       showHoverPreview: !hideHoverPreview,
@@ -282,7 +294,7 @@ var InlineCard = function InlineCard(props) {
       },
       onError: onError,
       disablePreviewPanel: true
-    })), CompetitorPromptComponent);
+    }))), CompetitorPromptComponent);
   }
   return jsx(AnalyticsContext, {
     data: analyticsData
@@ -303,7 +315,7 @@ var InlineCard = function InlineCard(props) {
     rendererAppearance: rendererAppearance,
     isResolvedViewRendered: isResolvedViewRendered,
     fireAnalyticsEvent: fireAnalyticsEvent
-  }, jsx(Card, _extends({
+  }, wrapWithSuspense(jsx(Card, _extends({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,
     actionOptions: actionOptions
@@ -323,7 +335,7 @@ var InlineCard = function InlineCard(props) {
     disablePreviewPanel: editorExperiment('platform_editor_preview_panel_linking_exp', true, {
       exposure: true
     })
-  }))), CompetitorPromptComponent)));
+  })))), CompetitorPromptComponent)));
 };
 var _default_1 = withSmartCardStorage(InlineCard);
 export default _default_1;

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

@@ -1939,7 +1939,8 @@ var denseStyles = css(_defineProperty(_defineProperty(_defineProperty({}, ".".co
 var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(SyncBlockSharedCssClassName.renderer, ", .").concat(BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(SyncBlockSharedCssClassName.error, ", .").concat(SyncBlockSharedCssClassName.loading), {
   borderRadius: "var(--ds-radius-small, 3px)",
   marginTop: "var(--ds-space-075, 6px)",
-  paddingBlock: "var(--ds-space-150, 12px)"
+  paddingBlock: "var(--ds-space-150, 12px)",
+  overflow: 'visible'
 }), ".".concat(SyncBlockSharedCssClassName.renderer), {
   // First child node in syncBlock in editor is overridden with marginTop: 0, hence apply the same style in renderer for consistency
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
@@ -1957,13 +1958,6 @@ var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
 }), ".".concat(SyncBlockSharedCssClassName.loading), {
   boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
 }));
-var syncBlockOverflowStyles = css(_defineProperty({}, ".".concat(SyncBlockSharedCssClassName.renderer, ", .").concat(BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(SyncBlockSharedCssClassName.error, ", .").concat(SyncBlockSharedCssClassName.loading), {
-  // Contain floated elements (wrap-left/wrap-right) within synced block borders
-  overflow: 'hidden'
-}));
-var syncBlockPatch2Styles = css(_defineProperty({}, ".".concat(SyncBlockSharedCssClassName.renderer, ", .").concat(BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(SyncBlockSharedCssClassName.error, ", .").concat(SyncBlockSharedCssClassName.loading), {
-  overflow: 'visible'
-}));
 export var RendererStyleContainer = function RendererStyleContainer(props) {
   var onClick = props.onClick,
     onMouseDown = props.onMouseDown,
@@ -2009,7 +2003,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, editorExperiment('platform_synced_block', true) && syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2') && syncBlockPatch2Styles, centerWrapperStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -62,7 +62,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "126.11.0";
+var packageVersion = "126.12.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/types/smartLinksOptions.d.ts

@@ -39,4 +39,14 @@ export interface SmartLinksOptions {
      * Component: inline
      */
     ssr?: boolean;
+    /**
+     * A Suspense boundary wrapper to enable inline SmartLinks to wait until data fetchers have completed before rendering
+     * Default is undefined.
+     *
+     * Component: inline
+     */
+    SuspenseWrapperForUrl?: React.ComponentType<{
+        children: React.ReactNode;
+        url?: string;
+    }>;
 }

package/dist/types-ts4.5/types/smartLinksOptions.d.ts

@@ -39,4 +39,14 @@ export interface SmartLinksOptions {
      * Component: inline
      */
     ssr?: boolean;
+    /**
+     * A Suspense boundary wrapper to enable inline SmartLinks to wait until data fetchers have completed before rendering
+     * Default is undefined.
+     *
+     * Component: inline
+     */
+    SuspenseWrapperForUrl?: React.ComponentType<{
+        children: React.ReactNode;
+        url?: string;
+    }>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "126.11.1",
+	"version": "126.12.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,7 +57,7 @@
 		"@atlaskit/status": "^3.1.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^29.3.0",
+		"@atlaskit/tmp-editor-statsig": "^29.5.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -71,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.18.0",
+		"@atlaskit/editor-common": "^111.19.0",
 		"@atlaskit/link-provider": "^4.2.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -249,9 +249,6 @@
 		},
 		"confluence_ttvc_inline_extensions": {
 			"type": "boolean"
-		},
-		"platform_synced_block_patch_2": {
-			"type": "boolean"
 		}
 	}
 }