@atlaskit/renderer 114.2.0 → 114.3.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/renderer
 
+## 114.3.0
+
+### Minor Changes
+
+- [#124569](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124569)
+  [`d88099abc9365`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d88099abc9365) -
+  Support Renderer to override bodies for multiBodiedExtensions
+
+### Patch Changes
+
+- Updated dependencies
+
+## 114.2.1
+
+### Patch Changes
+
+- [#125487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/125487)
+  [`e435eea47c743`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e435eea47c743) -
+  [ux] EDM-11991: Fix smart links avatar group padding inside editor and renderer
+- Updated dependencies
+
 ## 114.2.0
 
 ### Minor Changes

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
+var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -13,15 +15,15 @@ var _react = require("@emotion/react");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var containerCSS = (0, _react.css)({
-  minHeight: '100px'
+  minHeight: '100px',
+  flexBasis: '100%'
 });
 var ExtensionFrame = function ExtensionFrame(props) {
   return (0, _react.jsx)("div", {
-    css: containerCSS,
-    "data-extension-frame": "true",
-    style: {
-      flexBasis: "100%"
-    }
+    css: [containerCSS, (0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    _ui.sharedMultiBodiedExtensionStyles.extensionFrameContent],
+    "data-extension-frame": "true"
   }, props.children);
 };
 var _default = exports.default = ExtensionFrame;

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

@@ -156,8 +156,11 @@ exports.toReact = exports.nodeToReact = exports.mergeTextNodes = exports.isTextW
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _blockquote = _interopRequireDefault(require("./blockquote"));
 var _bodiedExtension = _interopRequireDefault(require("./bodiedExtension"));
+var _multiBodiedExtensionOld = _interopRequireDefault(require("./multiBodiedExtensionOld"));
 var _multiBodiedExtension = _interopRequireDefault(require("./multiBodiedExtension"));
 var _extensionFrame = _interopRequireDefault(require("./extensionFrame"));
 var _bulletList = _interopRequireDefault(require("./bulletList"));
@@ -178,7 +181,6 @@ var _table = _interopRequireDefault(require("./table"));
 var _tableCell = require("./tableCell");
 var _tableRow = _interopRequireDefault(require("./tableRow"));
 var _unknownBlock = _interopRequireDefault(require("./unknownBlock"));
-var _ui = require("@atlaskit/editor-common/ui");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -494,6 +496,7 @@ var toReact = exports.toReact = function toReact(node, flags, nodeComponents
 
   // Allowing custom components to override those provided in nodeToReact
   var nodes = _objectSpread(_objectSpread({}, nodeToReact), nodeComponents);
+  nodes['multiBodiedExtension'] = (0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility') ? _multiBodiedExtension.default : _multiBodiedExtensionOld.default;
   return nodes[node.type.name];
 };
 /*

package/dist/cjs/react/nodes/multiBodiedExtension/actions.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMultiBodiedExtensionActions = void 0;
+var _react = _interopRequireDefault(require("react"));
+var useMultiBodiedExtensionActions = exports.useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
+  var updateActiveChild = _ref.updateActiveChild,
+    children = _ref.children,
+    allowBodiedOverride = _ref.allowBodiedOverride,
+    childrenContainer = _ref.childrenContainer;
+  return _react.default.useMemo(function () {
+    return {
+      changeActive: function changeActive(index) {
+        if (!Number.isInteger(index)) {
+          return false;
+        }
+        updateActiveChild(index);
+        return true;
+      },
+      addChild: function addChild() {
+        return false;
+      },
+      getChildrenCount: function getChildrenCount() {
+        return children && Array.isArray(children) ? children.length : 0;
+      },
+      removeChild: function removeChild(_index) {
+        return false;
+      },
+      updateParameters: function updateParameters(_parameters) {
+        return false;
+      },
+      getChildren: function getChildren() {
+        return [];
+      },
+      getChildrenContainer: function getChildrenContainer() {
+        return allowBodiedOverride ? childrenContainer : null;
+      }
+    };
+  }, [updateActiveChild, children, allowBodiedOverride, childrenContainer]);
+};

package/dist/cjs/react/nodes/multiBodiedExtension/context.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMultiBodiedExtensionContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _extensions = require("@atlaskit/editor-common/extensions");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+var useMultiBodiedExtensionContext = exports.useMultiBodiedExtensionContext = function useMultiBodiedExtensionContext(_ref) {
+  var extensionType = _ref.extensionType,
+    extensionKey = _ref.extensionKey;
+  var isMounted = _react.default.useRef(true);
+  var localGetNodeRenderer = _react.default.useMemo(function () {
+    return (0, _memoizeOne.default)(_extensions.getNodeRenderer);
+  }, []);
+  var _React$useState = _react.default.useState(),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    provider = _React$useState2[0],
+    setProvider = _React$useState2[1];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var _React$useState3 = _react.default.useState(),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    privateProps = _React$useState4[0],
+    setPrivateProps = _React$useState4[1];
+  var providerPromise = (0, _providerFactory.useProvider)('extensionProvider');
+  _react.default.useEffect(function () {
+    if (providerPromise) {
+      providerPromise.then(function (p) {
+        if (isMounted.current) {
+          setProvider(p);
+        }
+        return (0, _extensions.getExtensionModuleNodePrivateProps)(p, extensionType, extensionKey);
+      }).then(function (pr) {
+        if (isMounted.current) {
+          setPrivateProps(pr);
+        }
+      });
+    }
+  }, [providerPromise, extensionType, extensionKey]);
+  var NodeRenderer = _react.default.useMemo(function () {
+    if (!provider) {
+      return null;
+    }
+    return localGetNodeRenderer(provider, extensionType, extensionKey);
+  }, [provider, extensionType, extensionKey, localGetNodeRenderer]);
+  _react.default.useEffect(function () {
+    isMounted.current = true;
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
+  return _react.default.useMemo(function () {
+    if (!provider || !NodeRenderer || !privateProps) {
+      return {
+        extensionContext: null,
+        loading: true
+      };
+    }
+    return {
+      extensionContext: {
+        NodeRenderer: NodeRenderer,
+        privateProps: privateProps
+      },
+      loading: false
+    };
+  }, [provider, NodeRenderer, privateProps]);
+};

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

@@ -6,123 +6,125 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _react2 = _interopRequireWildcard(require("react"));
 var _extension = require("./extension");
-var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRenderer"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _consts = require("../../consts");
 var _utils = require("@atlaskit/editor-common/utils");
-var _templateObject, _templateObject2;
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
+var _actions = require("./multiBodiedExtension/actions");
+var _context = require("./multiBodiedExtension/context");
+var _templateObject, _templateObject2, _templateObject3;
+/* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
-  var updateActiveChild = _ref.updateActiveChild,
-    children = _ref.children;
-  var actions = _react2.default.useMemo(function () {
-    return {
-      changeActive: function changeActive(index) {
-        return updateActiveChild(index);
-      },
-      addChild: function addChild() {
-        return false;
-      },
-      getChildrenCount: function getChildrenCount() {
-        return children ? children === null || children === void 0 ? void 0 : children.length : 0;
-      },
-      removeChild: function removeChild(index) {
-        return false;
-      },
-      updateParameters: function updateParameters(parameters) {
-        return false;
-      },
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      getChildren: function getChildren() {
-        return [];
-      },
-      getChildrenContainer: function getChildrenContainer() {
-        return null;
-      }
-    };
-  }, [updateActiveChild, children]);
-  return actions;
-};
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
+var navigationStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeNavigation);
 
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-var navigationCssExtended = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeNavigation);
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+var containerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\t.ak-renderer-extension {\n\t\tmargin-top: 0 !important;\n\t}\n\n\t[data-layout='full-width'],\n\t[data-layout='wide'] {\n\t\t.multiBodiedExtension-navigation {\n\t\t\tborder-right: 3px solid ", " !important;\n\t\t}\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(_colors.N40, ")"));
+var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
+  var children = _ref.children;
+  return (0, _react.jsx)("article", {
+    "data-testid": "multiBodiedExtension--frames"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "multiBodiedExtension--frames"
+  }, children);
+};
+var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
+  var children = _ref2.children;
+  return (0, _react.jsx)("nav", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "multiBodiedExtension-navigation",
+    css: navigationStyles,
+    "data-testid": "multiBodiedExtension-navigation"
+  }, children);
+};
+var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
+  var width = _ref3.width,
+    path = _ref3.path,
+    layout = _ref3.layout,
+    children = _ref3.children;
+  var isTopLevel = path.length < 1;
+  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  return (0, _react.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass, " ").concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER),
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
+    },
+    "data-layout": layout,
+    "data-testid": "multiBodiedExtension--wrapper"
+  }, children);
+};
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
+  var _extensionContext$pri;
   var children = props.children,
     _props$layout = props.layout,
     layout = _props$layout === void 0 ? 'default' : _props$layout,
     _props$path = props.path,
-    path = _props$path === void 0 ? [] : _props$path;
+    path = _props$path === void 0 ? [] : _props$path,
+    parameters = props.parameters,
+    extensionType = props.extensionType,
+    extensionKey = props.extensionKey,
+    content = props.content,
+    marks = props.marks,
+    localId = props.localId;
   var _useState = (0, _react2.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     activeChildIndex = _useState2[0],
     setActiveChildIndex = _useState2[1];
-  var removeOverflow = _react2.default.Children.toArray(children)
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  .map(function (child) {
-    return /*#__PURE__*/_react2.default.isValidElement(child) ? child.props.nodeType === 'table' : false;
-  }).every(Boolean);
-  var overflowContainerClass = !removeOverflow ? _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
-  var updateActiveChild = _react2.default.useCallback(function (index) {
-    if (typeof index !== 'number') {
-      // Ignored via go/ees007
-      // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-      // TODO: Make sure we log this somewhere if this happens
-      setActiveChildIndex(0);
-      return false;
-    }
-    setActiveChildIndex(index);
-    return true;
-  }, [setActiveChildIndex]);
-  var actions = useMultiBodiedExtensionActions({
-    updateActiveChild: updateActiveChild,
-    children: children
+  var _useMultiBodiedExtens = (0, _context.useMultiBodiedExtensionContext)({
+      extensionType: extensionType,
+      extensionKey: extensionKey
+    }),
+    loading = _useMultiBodiedExtens.loading,
+    extensionContext = _useMultiBodiedExtens.extensionContext;
+  var actions = (0, _actions.useMultiBodiedExtensionActions)({
+    updateActiveChild: setActiveChildIndex,
+    children: children,
+    childrenContainer: (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children),
+    allowBodiedOverride: extensionContext === null || extensionContext === void 0 || (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride
   });
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  var containerCssExtended = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t", ";\n\t\t.ak-renderer-extension {\n\t\t\tmargin-top: 0 !important;\n\t\t}\n\n\t\t[data-layout='full-width'],\n\t\t[data-layout='wide'] {\n\t\t\t.multiBodiedExtension-navigation {\n\t\t\t\tborder-right: 3px solid ", " !important;\n\t\t\t}\n\t\t}\n\n\t\t.multiBodiedExtension--frames\n\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t", "\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\t"])), _ui.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(_colors.N40, ")"), activeChildIndex + 1, _ui.sharedMultiBodiedExtensionStyles.extensionFrameContent);
-  var isTopLevel = path.length < 1;
-  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
-  function renderMbeContent(width) {
-    return (0, _react.jsx)("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass, " ").concat(overflowContainerClass),
-      style: {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
-      },
-      "data-layout": layout
-    }, (0, _react.jsx)("nav", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: "multiBodiedExtension-navigation",
-      css: navigationCssExtended,
-      "data-testid": "multiBodiedExtension-navigation"
-    }, (0, _react.jsx)(_ExtensionRenderer.default
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    , (0, _extends2.default)({}, props, {
-      actions: actions,
-      type: "multiBodiedExtension"
-    }), function (_ref2) {
-      var result = _ref2.result;
+  var renderContent = _react2.default.useCallback(function () {
+    var _marks$find;
+    if (loading || !extensionContext) {
+      return null;
+    }
+    var NodeRenderer = extensionContext.NodeRenderer,
+      privateProps = extensionContext.privateProps;
+    var fragmentLocalId = marks === null || marks === void 0 || (_marks$find = marks.find(function (m) {
+      return m.type.name === 'fragment';
+    })) === null || _marks$find === void 0 || (_marks$find = _marks$find.attrs) === null || _marks$find === void 0 ? void 0 : _marks$find.localId;
+    var node = {
+      type: 'multiBodiedExtension',
+      extensionKey: extensionKey,
+      extensionType: extensionType,
+      parameters: parameters,
+      content: content,
+      localId: localId,
+      fragmentLocalId: fragmentLocalId
+    };
+    var renderMultiBodiedExtension = function renderMultiBodiedExtension() {
+      var MultiBodiedExtensionNodeRenderer = (0, _react.jsx)(NodeRenderer, {
+        node: node,
+        actions: actions
+      });
       try {
-        if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {
+        if ( /*#__PURE__*/_react2.default.isValidElement(MultiBodiedExtensionNodeRenderer)) {
           // Return the content directly if it's a valid JSX.Element
-          return (0, _extension.renderExtension)(result, layout, {
+          return (0, _extension.renderExtension)(MultiBodiedExtensionNodeRenderer, layout, {
             isTopLevel: path.length < 1
           });
         }
@@ -135,25 +137,30 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       return (0, _extension.renderExtension)(children, layout, {
         isTopLevel: path.length < 1
       });
-    })), (0, _react.jsx)("article", {
-      "data-testid": "multiBodiedExtension--frames"
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: "multiBodiedExtension--frames"
-    }, children));
-  }
+    };
+    if (privateProps.__allowBodiedOverride) {
+      return renderMultiBodiedExtension();
+    } else {
+      return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(MultiBodiedExtensionNavigation, null, renderMultiBodiedExtension()), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children));
+    }
+  }, [loading, extensionContext, layout, path, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  var containerActiveFrameStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.multiBodiedExtension--frames\n\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
   return (0, _react.jsx)("section", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "multiBodiedExtension--container"
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: containerCssExtended,
+    className: "multiBodiedExtension--container",
+    css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex,
     "data-layout": layout
-  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref3) {
-    var width = _ref3.width;
-    return renderMbeContent(width);
+  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref4) {
+    var width = _ref4.width;
+    return (0, _react.jsx)(MultiBodiedExtensionWrapper, {
+      layout: layout,
+      width: width,
+      path: path
+    }, renderContent());
   }));
 };
 var _default = exports.default = MultiBodiedExtension;

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

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _react2 = _interopRequireWildcard(require("react"));
+var _extension = require("./extension");
+var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRenderer"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _consts = require("../../consts");
+var _utils = require("@atlaskit/editor-common/utils");
+var _templateObject, _templateObject2;
+/* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
+  var updateActiveChild = _ref.updateActiveChild,
+    children = _ref.children;
+  var actions = _react2.default.useMemo(function () {
+    return {
+      changeActive: function changeActive(index) {
+        return updateActiveChild(index);
+      },
+      addChild: function addChild() {
+        return false;
+      },
+      getChildrenCount: function getChildrenCount() {
+        return children ? children === null || children === void 0 ? void 0 : children.length : 0;
+      },
+      removeChild: function removeChild(index) {
+        return false;
+      },
+      updateParameters: function updateParameters(parameters) {
+        return false;
+      },
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      getChildren: function getChildren() {
+        return [];
+      },
+      getChildrenContainer: function getChildrenContainer() {
+        return null;
+      }
+    };
+  }, [updateActiveChild, children]);
+  return actions;
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
+var navigationCssExtended = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeNavigation);
+var MultiBodiedExtension = function MultiBodiedExtension(props) {
+  var children = props.children,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? 'default' : _props$layout,
+    _props$path = props.path,
+    path = _props$path === void 0 ? [] : _props$path;
+  var _useState = (0, _react2.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeChildIndex = _useState2[0],
+    setActiveChildIndex = _useState2[1];
+  var removeOverflow = _react2.default.Children.toArray(children)
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  .map(function (child) {
+    return /*#__PURE__*/_react2.default.isValidElement(child) ? child.props.nodeType === 'table' : false;
+  }).every(Boolean);
+  var overflowContainerClass = !removeOverflow ? _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
+  var updateActiveChild = _react2.default.useCallback(function (index) {
+    if (typeof index !== 'number') {
+      // Ignored via go/ees007
+      // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
+      // TODO: Make sure we log this somewhere if this happens
+      setActiveChildIndex(0);
+      return false;
+    }
+    setActiveChildIndex(index);
+    return true;
+  }, [setActiveChildIndex]);
+  var actions = useMultiBodiedExtensionActions({
+    updateActiveChild: updateActiveChild,
+    children: children
+  });
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+  var containerCssExtended = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t", ";\n\t\t.ak-renderer-extension {\n\t\t\tmargin-top: 0 !important;\n\t\t}\n\n\t\t[data-layout='full-width'],\n\t\t[data-layout='wide'] {\n\t\t\t.multiBodiedExtension-navigation {\n\t\t\t\tborder-right: 3px solid ", " !important;\n\t\t\t}\n\t\t}\n\n\t\t.multiBodiedExtension--frames\n\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t", "\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\t"])), _ui.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(_colors.N40, ")"), activeChildIndex + 1, _ui.sharedMultiBodiedExtensionStyles.extensionFrameContent);
+  var isTopLevel = path.length < 1;
+  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  function renderMbeContent(width) {
+    return (0, _react.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass, " ").concat(overflowContainerClass),
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
+      },
+      "data-layout": layout
+    }, (0, _react.jsx)("nav", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: "multiBodiedExtension-navigation",
+      css: navigationCssExtended,
+      "data-testid": "multiBodiedExtension-navigation"
+    }, (0, _react.jsx)(_ExtensionRenderer.default
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , (0, _extends2.default)({}, props, {
+      actions: actions,
+      type: "multiBodiedExtension"
+    }), function (_ref2) {
+      var result = _ref2.result;
+      try {
+        if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {
+          // Return the content directly if it's a valid JSX.Element
+          return (0, _extension.renderExtension)(result, layout, {
+            isTopLevel: path.length < 1
+          });
+        }
+      } catch (e) {
+        /** We don't want this error to block renderer */
+        /** We keep rendering the default content */
+      }
+
+      // Always return default content if anything goes wrong
+      return (0, _extension.renderExtension)(children, layout, {
+        isTopLevel: path.length < 1
+      });
+    })), (0, _react.jsx)("article", {
+      "data-testid": "multiBodiedExtension--frames"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "multiBodiedExtension--frames"
+    }, children));
+  }
+  return (0, _react.jsx)("section", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "multiBodiedExtension--container",
+    css: containerCssExtended,
+    "data-testid": "multiBodiedExtension--container",
+    "data-active-child-index": activeChildIndex,
+    "data-layout": layout
+  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref3) {
+    var width = _ref3.width;
+    return renderMbeContent(width);
+  }));
+};
+var _default = exports.default = MultiBodiedExtension;