@atlaskit/renderer 126.11.1 → 126.12.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/renderer
 
+## 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/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 = "0.0.0-development";
 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/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 = "0.0.0-development";
 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/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 = "0.0.0-development";
 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.0",
 	"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.4.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",