@atlaskit/renderer 137.2.3 → 137.2.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 137.2.4
+
+### Patch Changes
+
+- [`38efae8b5d945`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38efae8b5d945) -
+  Scope MultiBodiedExtension active frame styles to the owning frames article to avoid showing
+  nested inactive tab bodies.
+- Updated dependencies
+
 ## 137.2.3
 
 ### Patch Changes

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

@@ -39,12 +39,30 @@ var containerStyles = (0, _react.css)({
     marginTop: 0
   }
 });
+var getFramesActiveFrameStyles = function getFramesActiveFrameStyles(activeChildIndex) {
+  if (!(0, _fg.fg)('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+
+  // Apply the active-frame rule on the frames article itself so nested MBEs
+  // only target their own direct frames.
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  return (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 getContainerActiveFrameStyles = function getContainerActiveFrameStyles(activeChildIndex) {
+  if ((0, _fg.fg)('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (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 MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
-  var children = _ref.children,
-    frameId = _ref.frameId;
+  var activeChildIndex = _ref.activeChildIndex,
+    children = _ref.children;
   return (0, _react.jsx)("article", {
-    "data-testid": "multiBodiedExtension--frames",
-    "data-multibodiedextension-frames-id": frameId
+    css: getFramesActiveFrameStyles(activeChildIndex),
+    "data-testid": "multiBodiedExtension--frames"
   }, children);
 };
 var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
@@ -53,11 +71,6 @@ 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,
@@ -144,15 +157,11 @@ 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, {
-      frameId: frameId
+      activeChildIndex: activeChildIndex
     }, children),
     allowBodiedOverride: extensionContext === null || extensionContext === void 0 || (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride,
     extensionKey: extensionKey,
@@ -188,13 +197,13 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
         node: node,
         actions: actions
       })), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, {
-        frameId: frameId
+        activeChildIndex: activeChildIndex
       }, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children, frameId]);
+  }, [activeChildIndex, loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
 
   // make the frame visible
-  var containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex, frameId);
+  var containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex);
   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.2.2";
+var packageVersion = "137.2.3";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -28,13 +28,39 @@ const containerStyles = css({
     marginTop: 0
   }
 });
+const getFramesActiveFrameStyles = activeChildIndex => {
+  if (!fg('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+
+  // Apply the active-frame rule on the frames article itself so nested MBEs
+  // only target their own direct frames.
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  return css`
+		& > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
+			display: block;
+		}
+	`;
+};
+const getContainerActiveFrameStyles = activeChildIndex => {
+  if (fg('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  return css`
+		& [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
+			display: block;
+		}
+	`;
+};
 const MultiBodiedExtensionChildrenContainer = ({
-  children,
-  frameId
+  activeChildIndex,
+  children
 }) => {
   return jsx("article", {
-    "data-testid": "multiBodiedExtension--frames",
-    "data-multibodiedextension-frames-id": frameId
+    css: getFramesActiveFrameStyles(activeChildIndex),
+    "data-testid": "multiBodiedExtension--frames"
   }, children);
 };
 const MultiBodiedExtensionNavigation = ({
@@ -44,23 +70,6 @@ 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,
@@ -148,15 +157,11 @@ 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, {
-      frameId: frameId
+      activeChildIndex: activeChildIndex
     }, children),
     allowBodiedOverride: extensionContext === null || extensionContext === void 0 ? void 0 : (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride,
     extensionKey,
@@ -192,13 +197,13 @@ const MultiBodiedExtension = props => {
         node: node,
         actions: actions
       })), jsx(MultiBodiedExtensionChildrenContainer, {
-        frameId: frameId
+        activeChildIndex: activeChildIndex
       }, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children, frameId]);
+  }, [activeChildIndex, loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
 
   // make the frame visible
-  const containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex, frameId);
+  const containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex);
   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.2.2";
+const packageVersion = "137.2.3";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -31,12 +31,30 @@ var containerStyles = css({
     marginTop: 0
   }
 });
+var getFramesActiveFrameStyles = function getFramesActiveFrameStyles(activeChildIndex) {
+  if (!fg('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+
+  // Apply the active-frame rule on the frames article itself so nested MBEs
+  // only target their own direct frames.
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  return 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 getContainerActiveFrameStyles = function getContainerActiveFrameStyles(activeChildIndex) {
+  if (fg('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
+};
 var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
-  var children = _ref.children,
-    frameId = _ref.frameId;
+  var activeChildIndex = _ref.activeChildIndex,
+    children = _ref.children;
   return jsx("article", {
-    "data-testid": "multiBodiedExtension--frames",
-    "data-multibodiedextension-frames-id": frameId
+    css: getFramesActiveFrameStyles(activeChildIndex),
+    "data-testid": "multiBodiedExtension--frames"
   }, children);
 };
 var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
@@ -45,11 +63,6 @@ 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,
@@ -136,15 +149,11 @@ 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, {
-      frameId: frameId
+      activeChildIndex: activeChildIndex
     }, children),
     allowBodiedOverride: extensionContext === null || extensionContext === void 0 || (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride,
     extensionKey: extensionKey,
@@ -180,13 +189,13 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
         node: node,
         actions: actions
       })), jsx(MultiBodiedExtensionChildrenContainer, {
-        frameId: frameId
+        activeChildIndex: activeChildIndex
       }, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children, frameId]);
+  }, [activeChildIndex, loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
 
   // make the frame visible
-  var containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex, frameId);
+  var containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex);
   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.2.2";
+var packageVersion = "137.2.3";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "137.2.3",
+	"version": "137.2.4",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"