@atlaskit/renderer 137.1.4 → 137.1.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 137.1.5
+
+### Patch Changes
+
+- [`6f34a5002d9ed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f34a5002d9ed) -
+  [ux] Fix nested multi-bodied extensions so a parent active tab does not force a nested extension's
+  first frame to render behind the `platform_editor_nested_mbe_frames` feature gate.
+- Updated dependencies
+
 ## 137.1.4
 
 ### Patch Changes

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

@@ -6,19 +6,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _consts = require("../../consts");
 var _utils = require("@atlaskit/editor-common/utils");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _actions = require("./multiBodiedExtension/actions");
 var _context = require("./multiBodiedExtension/context");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _breakout = require("../utils/breakout");
 var _analyticsContext = _interopRequireDefault(require("../../analytics/analyticsContext"));
-var _templateObject;
+var _templateObject, _templateObject2;
 /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
 /**
  * @jsxRuntime classic
@@ -39,9 +40,11 @@ var containerStyles = (0, _react.css)({
   }
 });
 var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    frameId = _ref.frameId;
   return (0, _react.jsx)("article", {
-    "data-testid": "multiBodiedExtension--frames"
+    "data-testid": "multiBodiedExtension--frames",
+    "data-multibodiedextension-frames-id": frameId
   }, children);
 };
 var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
@@ -50,6 +53,11 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
+var getContainerActiveFrameStyles = function getContainerActiveFrameStyles(activeChildIndex, frameId) {
+  return (0, _fg.fg)('platform_editor_nested_mbe_frames') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t&\n\t\t\t\t\t[data-multibodiedextension-frames-id='", "']\n\t\t\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t"])), frameId, activeChildIndex + 1) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t"])), activeChildIndex + 1);
+};
 var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
   var width = _ref3.width,
     path = _ref3.path,
@@ -136,10 +144,16 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     }),
     loading = _useMultiBodiedExtens.loading,
     extensionContext = _useMultiBodiedExtens.extensionContext;
+  // Used by the gated active-frame styles to scope selection to this MBE instance.
+  // Renderer frames are direct children of this article, so the id prevents a parent
+  // MBE selector from reaching into nested MBEs.
+  var frameId = _react2.default.useId();
   var actions = (0, _actions.useMultiBodiedExtensionActions)({
     updateActiveChild: setActiveChildIndex,
     children: children,
-    childrenContainer: (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children),
+    childrenContainer: (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, {
+      frameId: frameId
+    }, children),
     allowBodiedOverride: extensionContext === null || extensionContext === void 0 || (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride,
     extensionKey: extensionKey,
     extensionType: extensionType,
@@ -173,13 +187,14 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(MultiBodiedExtensionNavigation, null, (0, _react.jsx)(NodeRenderer, {
         node: node,
         actions: actions
-      })), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children));
+      })), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, {
+        frameId: frameId
+      }, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
+  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children, frameId]);
 
   // make the frame visible
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  var containerActiveFrameStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
+  var containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex, frameId);
   if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     var _isTopLevel = path.length < 1;
     var _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout);

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

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

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

@@ -10,6 +10,7 @@ import React, { useContext, useState } from 'react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
 import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -28,10 +29,12 @@ const containerStyles = css({
   }
 });
 const MultiBodiedExtensionChildrenContainer = ({
-  children
+  children,
+  frameId
 }) => {
   return jsx("article", {
-    "data-testid": "multiBodiedExtension--frames"
+    "data-testid": "multiBodiedExtension--frames",
+    "data-multibodiedextension-frames-id": frameId
   }, children);
 };
 const MultiBodiedExtensionNavigation = ({
@@ -41,6 +44,23 @@ const MultiBodiedExtensionNavigation = ({
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
+const getContainerActiveFrameStyles = (activeChildIndex, frameId) => {
+  return fg('platform_editor_nested_mbe_frames') ?
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css`
+				&
+					[data-multibodiedextension-frames-id='${frameId}']
+					> [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
+					display: block;
+				}
+			` :
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css`
+				& [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
+					display: block;
+				}
+			`;
+};
 const MultiBodiedExtensionWrapperLegacy = ({
   width,
   path,
@@ -128,10 +148,16 @@ const MultiBodiedExtension = props => {
     extensionType,
     extensionKey
   });
+  // Used by the gated active-frame styles to scope selection to this MBE instance.
+  // Renderer frames are direct children of this article, so the id prevents a parent
+  // MBE selector from reaching into nested MBEs.
+  const frameId = React.useId();
   const actions = useMultiBodiedExtensionActions({
     updateActiveChild: setActiveChildIndex,
     children,
-    childrenContainer: jsx(MultiBodiedExtensionChildrenContainer, null, children),
+    childrenContainer: jsx(MultiBodiedExtensionChildrenContainer, {
+      frameId: frameId
+    }, children),
     allowBodiedOverride: extensionContext === null || extensionContext === void 0 ? void 0 : (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride,
     extensionKey,
     extensionType,
@@ -165,17 +191,14 @@ const MultiBodiedExtension = props => {
       return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, jsx(NodeRenderer, {
         node: node,
         actions: actions
-      })), jsx(MultiBodiedExtensionChildrenContainer, null, children));
+      })), jsx(MultiBodiedExtensionChildrenContainer, {
+        frameId: frameId
+      }, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
+  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children, frameId]);
 
   // make the frame visible
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  const containerActiveFrameStyles = css`
-		& [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
-			display: block;
-		}
-	`;
+  const containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex, frameId);
   if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     const isTopLevel = path.length < 1;
     const useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout);

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

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

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

@@ -1,6 +1,6 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
 /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
 /**
  * @jsxRuntime classic
@@ -13,6 +13,7 @@ import React, { useContext, useState } from 'react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
 import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -31,9 +32,11 @@ var containerStyles = css({
   }
 });
 var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    frameId = _ref.frameId;
   return jsx("article", {
-    "data-testid": "multiBodiedExtension--frames"
+    "data-testid": "multiBodiedExtension--frames",
+    "data-multibodiedextension-frames-id": frameId
   }, children);
 };
 var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
@@ -42,6 +45,11 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
+var getContainerActiveFrameStyles = function getContainerActiveFrameStyles(activeChildIndex, frameId) {
+  return fg('platform_editor_nested_mbe_frames') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t&\n\t\t\t\t\t[data-multibodiedextension-frames-id='", "']\n\t\t\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t"])), frameId, activeChildIndex + 1) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t"])), activeChildIndex + 1);
+};
 var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
   var width = _ref3.width,
     path = _ref3.path,
@@ -128,10 +136,16 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     }),
     loading = _useMultiBodiedExtens.loading,
     extensionContext = _useMultiBodiedExtens.extensionContext;
+  // Used by the gated active-frame styles to scope selection to this MBE instance.
+  // Renderer frames are direct children of this article, so the id prevents a parent
+  // MBE selector from reaching into nested MBEs.
+  var frameId = React.useId();
   var actions = useMultiBodiedExtensionActions({
     updateActiveChild: setActiveChildIndex,
     children: children,
-    childrenContainer: jsx(MultiBodiedExtensionChildrenContainer, null, children),
+    childrenContainer: jsx(MultiBodiedExtensionChildrenContainer, {
+      frameId: frameId
+    }, children),
     allowBodiedOverride: extensionContext === null || extensionContext === void 0 || (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride,
     extensionKey: extensionKey,
     extensionType: extensionType,
@@ -165,13 +179,14 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, jsx(NodeRenderer, {
         node: node,
         actions: actions
-      })), jsx(MultiBodiedExtensionChildrenContainer, null, children));
+      })), jsx(MultiBodiedExtensionChildrenContainer, {
+        frameId: frameId
+      }, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
+  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children, frameId]);
 
   // make the frame visible
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  var containerActiveFrameStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
+  var containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex, frameId);
   if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     var _isTopLevel = path.length < 1;
     var _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout);

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "137.1.4",
+	"version": "137.1.5",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -177,6 +177,9 @@
 		"platform_editor_querySelector_fix_table_renderer": {
 			"type": "boolean"
 		},
+		"platform_editor_nested_mbe_frames": {
+			"type": "boolean"
+		},
 		"platform_editor_fix_media_in_renderer": {
 			"type": "boolean"
 		},