@atlaskit/renderer 114.10.2 → 114.11.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 114.11.0
+
+### Minor Changes
+
+- [#143555](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/143555)
+  [`2827fa6f5b8d9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2827fa6f5b8d9) -
+  Updated embed card to support SSR
+
 ## 114.10.2
 
 ### Patch Changes

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

@@ -10,9 +10,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("@emotion/react");
 var _react2 = require("react");
 var _smartCard = require("@atlaskit/smart-card");
+var _ssr = require("@atlaskit/smart-card/ssr");
 var _linkProvider = require("@atlaskit/link-provider");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _fallback = require("./fallback");
 var _style = require("../../ui/Renderer/style");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
@@ -146,6 +148,39 @@ function EmbedCard(props) {
         throw err;
       }
     };
+    var cardComponent;
+    if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url && (0, _platformFeatureFlags.fg)('platform_ssr_smartlink_embeds')) {
+      var _smartLinks$frameStyl2;
+      var ssrCardProps = {
+        url: url,
+        onClick: onClick,
+        container: portal,
+        platform: platform,
+        frameStyle: (_smartLinks$frameStyl2 = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl2 !== void 0 ? _smartLinks$frameStyl2 : 'show',
+        actionOptions: actionOptions
+      };
+      cardComponent = (0, _react.jsx)(_ssr.CardSSR, (0, _extends2.default)({
+        appearance: "embed"
+        // Ignored via go/ees005
+        // eslint-disable-next-line react/jsx-props-no-spreading
+      }, ssrCardProps, {
+        onResolve: onResolve,
+        inheritDimensions: true,
+        embedIframeRef: embedIframeRef,
+        onError: onError
+      }));
+    } else {
+      cardComponent = (0, _react.jsx)(_smartCard.Card, (0, _extends2.default)({
+        appearance: "embed"
+        // Ignored via go/ees005
+        // eslint-disable-next-line react/jsx-props-no-spreading
+      }, cardProps, {
+        onResolve: onResolve,
+        inheritDimensions: true,
+        embedIframeRef: embedIframeRef,
+        onError: onError
+      }));
+    }
     return (
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -177,16 +212,7 @@ function EmbedCard(props) {
         "data-card-data": data ? JSON.stringify(data) : undefined,
         "data-card-url": url,
         "data-card-original-height": originalHeight
-      }, (0, _react.jsx)(_smartCard.Card, (0, _extends2.default)({
-        appearance: "embed"
-        // Ignored via go/ees005
-        // eslint-disable-next-line react/jsx-props-no-spreading
-      }, cardProps, {
-        onResolve: onResolve,
-        inheritDimensions: true,
-        embedIframeRef: embedIframeRef,
-        onError: onError
-      })))))))
+      }, cardComponent)))))
     );
   }));
 }

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

@@ -57,7 +57,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)(_this, "addColGroupWidth", function (childrenArray) {
       var _this$state$colGroupW;
-      if ((0, _platformFeatureFlags.fg)('platform_editor_table_column_group_width_check') ? (_this$state$colGroupW = _this.state.colGroupWidths) === null || _this$state$colGroupW === void 0 ? void 0 : _this$state$colGroupW.length : _this.state.colGroupWidths) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_table_column_group_width_check_3') ? (_this$state$colGroupW = _this.state.colGroupWidths) === null || _this$state$colGroupW === void 0 ? void 0 : _this$state$colGroupW.length : _this.state.colGroupWidths) {
         childrenArray = childrenArray.map(function (child, index) {
           if ( /*#__PURE__*/_react.default.isValidElement(child)) {
             return /*#__PURE__*/_react.default.cloneElement(child, {

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

@@ -472,17 +472,17 @@ var listsSharedStyles = (0, _react.css)((_css3 = {
   }
 }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css3, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
   /*
-      Ensures list item content adheres to the list's margin instead
-      of filling the entire block row. This is important to allow
-      clicking interactive elements which are floated next to a list.
-       For some history and context on this block, see PRs related to tickets.:
-      @see ED-6551 - original issue.
-      @see ED-7015 - follow up issue.
-      @see ED-7447 - flow-root change.
+   Ensures list item content adheres to the list's margin instead
+   of filling the entire block row. This is important to allow
+   clicking interactive elements which are floated next to a list.
+    For some history and context on this block, see PRs related to tickets.:
+   @see ED-6551 - original issue.
+   @see ED-7015 - follow up issue.
+   @see ED-7447 - flow-root change.
     used to have display: 'table' in tag template style but not supported in object styles
    removed display: 'table' as 'flow-root' is supported in latest browsers
-       @see https://css-tricks.com/display-flow-root/
-    */
+    @see https://css-tricks.com/display-flow-root/
+  */
   display: 'flow-root'
 }), 'ul, ul ul ul ul', {
   listStyleType: 'disc'
@@ -1365,7 +1365,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
   var isAdvancedLayoutsOn = (0, _experiments.editorExperiment)('advanced_layouts', true);
   if ((0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer')) {
     return (
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
       (0, _react.jsx)("div", {
         ref: innerRef,
         onClick: onClick,
@@ -1392,7 +1392,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     );
   }
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
     (0, _react.jsx)("div", {
       ref: innerRef,
       onClick: onClick,