@atlaskit/renderer 137.2.3 → 137.2.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/renderer
 
+## 137.2.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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.4";
 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.4";
 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.4";
 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.5",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -50,7 +50,7 @@
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/icon": "^37.6.0",
 		"@atlaskit/link": "^5.1.0",
-		"@atlaskit/link-datasource": "^6.8.0",
+		"@atlaskit/link-datasource": "^6.9.0",
 		"@atlaskit/link-extractors": "^4.2.0",
 		"@atlaskit/linking-common": "^12.1.0",
 		"@atlaskit/media-card": "^81.9.0",
@@ -70,7 +70,7 @@
 		"@atlaskit/status": "^5.9.0",
 		"@atlaskit/task-decision": "^21.9.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^171.0.0",
+		"@atlaskit/tmp-editor-statsig": "^172.0.0",
 		"@atlaskit/tokens": "^16.11.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
@@ -85,7 +85,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.10.0",
+		"@atlaskit/editor-common": "^120.11.0",
 		"@atlaskit/link-provider": "^5.5.0",
 		"@atlaskit/media-core": "^38.2.0",
 		"react": "^18.2.0",
@@ -143,18 +143,6 @@
 		"sinon": "^2.2.0",
 		"worker-plugin": "^4.0.2"
 	},
-	"techstack": {
-		"@repo/internal": {
-			"design-tokens": [
-				"color"
-			],
-			"deprecation": "no-deprecated-imports",
-			"styling": [
-				"compiled",
-				"emotion"
-			]
-		}
-	},
 	"platform-feature-flags": {
 		"platform_native_embeds_rollout_non_maui_experience": {
 			"type": "boolean"