@atlaskit/renderer 114.4.5 → 114.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/react/nodes/extensionFrame.js +8 -5
  3. package/dist/cjs/react/nodes/multiBodiedExtension.js +24 -121
  4. package/dist/cjs/ui/Renderer/index.js +1 -1
  5. package/dist/es2019/react/nodes/extensionFrame.js +8 -5
  6. package/dist/es2019/react/nodes/multiBodiedExtension.js +23 -143
  7. package/dist/es2019/ui/Renderer/index.js +1 -1
  8. package/dist/esm/react/nodes/extensionFrame.js +8 -5
  9. package/dist/esm/react/nodes/multiBodiedExtension.js +25 -122
  10. package/dist/esm/ui/Renderer/index.js +1 -1
  11. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 114.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#130460](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130460)
8
+ [`661496fcc810e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/661496fcc810e) -
9
+ Revised styles for MBE in Renderer
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 114.4.5
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/react/nodes/extensionFrame.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _react = require("@emotion/react");
8
- var _ui = require("@atlaskit/editor-common/ui");
9
8
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
9
  /**
11
10
  * @jsxRuntime classic
@@ -14,15 +13,19 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
13
 
15
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
16
15
 
17
- var containerCSS = (0, _react.css)({
16
+ var containerCSSOld = (0, _react.css)({
18
17
  minHeight: '100px',
19
18
  flexBasis: '100%'
20
19
  });
20
+ var containerCSSNew = (0, _react.css)({
21
+ padding: "var(--ds-space-100, 8px)",
22
+ minHeight: '100px',
23
+ // by default all frames are hidden, this style is overridden in multiBodiedExtensions for active frame
24
+ display: 'none'
25
+ });
21
26
  var ExtensionFrame = function ExtensionFrame(props) {
22
27
  return (0, _react.jsx)("div", {
23
- css: [containerCSS, (0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility') &&
24
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
25
- _ui.sharedMultiBodiedExtensionStyles.extensionFrameContent],
28
+ css: [(0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility') ? containerCSSNew : containerCSSOld],
26
29
  "data-extension-frame": "true"
27
30
  }, props.children);
28
31
  };
package/dist/cjs/react/nodes/multiBodiedExtension.js CHANGED
@@ -6,19 +6,16 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.default = void 0;
9
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
11
  var _react = require("@emotion/react");
12
- var _colors = require("@atlaskit/theme/colors");
13
12
  var _react2 = _interopRequireWildcard(require("react"));
14
- var _extension = require("./extension");
15
13
  var _ui = require("@atlaskit/editor-common/ui");
16
14
  var _consts = require("../../consts");
17
15
  var _utils = require("@atlaskit/editor-common/utils");
18
16
  var _actions = require("./multiBodiedExtension/actions");
19
17
  var _context = require("./multiBodiedExtension/context");
20
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
21
- var _templateObject, _templateObject2, _templateObject3;
18
+ var _templateObject;
22
19
  /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
23
20
  /**
24
21
  * @jsxRuntime classic
@@ -28,104 +25,22 @@ var _templateObject, _templateObject2, _templateObject3;
28
25
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
29
26
  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); }
30
27
  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; }
31
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
32
- var navigationStylesOld = (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);
33
-
34
- // localized sharedMultiBodiedExtensionStyles.mbeNavigation in navigationCssExtendedNew
35
- var navigationStylesNew = (0, _react.css)({
36
- borderTopLeftRadius: "var(--ds-border-radius, 3px)",
37
- borderTopRightRadius: "var(--ds-border-radius, 3px)",
38
- userSelect: 'none',
39
- WebkitUserModify: 'read-only',
40
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
41
- borderBottom: 'none !important',
42
- background: "var(--ds-surface, white)",
43
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
44
- '&.remove-margins': {
45
- margin: "var(--ds-space-negative-100, -8px)"
46
- },
47
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
48
- '&.remove-border': {
49
- border: 'none'
50
- },
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
52
- marginLeft: '0 !important',
53
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
54
- marginRight: '0 !important',
55
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
56
- '.mbe-add-tab-button, .mbe-remove-tab': {
57
- display: 'none'
58
- }
59
- });
60
-
61
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
62
- var containerStylesOld = (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, ")"));
63
-
64
- // localized sharedMultiBodiedExtensionStyles.mbeExtensionContainer in containerStylesNew
65
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
66
- var containerStylesNew = (0, _react.css)({
67
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
68
- background: 'transparent !important',
69
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
70
- 'padding:': {
71
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
72
- left: "var(--ds-space-100, 8px)".concat(" !important"),
73
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
74
- right: "var(--ds-space-100, 8px)".concat(" !important")
75
- },
76
- paddingBottom: "var(--ds-space-100, 8px)",
77
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
78
- '&.remove-padding': {
79
- paddingBottom: 0
80
- },
81
- position: 'relative',
82
- verticalAlign: 'middle',
83
- cursor: 'pointer',
84
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
85
- '.multiBodiedExtension-handler-result': {
86
- marginLeft: "var(--ds-space-100, 8px)"
87
- },
88
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
89
- ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
90
- display: 'none',
91
- background: 'transparent'
92
- },
93
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
94
- '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
95
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
96
- "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
97
- marginTop: 0
98
- }
99
- },
100
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
101
- '.ak-renderer-extension': {
102
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
103
- marginTop: '0 !important'
104
- },
105
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
106
- '[data-layout="full-width"], [data-layout="wide"]': {
107
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
108
- '.multiBodiedExtension-navigation': {
109
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
110
- borderRight: "3px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"), " !important")
111
- }
28
+ var containerStyles = (0, _react.css)({
29
+ // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
30
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
31
+ '&:first-of-type > .ak-renderer-extension': {
32
+ marginTop: 0
112
33
  }
113
34
  });
114
35
  var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
115
36
  var children = _ref.children;
116
37
  return (0, _react.jsx)("article", {
117
38
  "data-testid": "multiBodiedExtension--frames"
118
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
119
- ,
120
- className: "multiBodiedExtension--frames"
121
39
  }, children);
122
40
  };
123
41
  var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
124
42
  var children = _ref2.children;
125
43
  return (0, _react.jsx)("nav", {
126
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
127
- className: "multiBodiedExtension-navigation",
128
- css: (0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer') ? navigationStylesNew : navigationStylesOld,
129
44
  "data-testid": "multiBodiedExtension-navigation"
130
45
  }, children);
131
46
  };
@@ -136,16 +51,21 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
136
51
  children = _ref3.children;
137
52
  var isTopLevel = path.length < 1;
138
53
  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
54
+
55
+ // This hierarchy is copied from regular extension (see extension.tsx)
139
56
  return (0, _react.jsx)("div", {
140
57
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
141
- className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass, " ").concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER),
58
+ className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
142
59
  style: {
143
60
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
144
61
  width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
145
62
  },
146
63
  "data-layout": layout,
147
64
  "data-testid": "multiBodiedExtension--wrapper"
148
- }, children);
65
+ }, (0, _react.jsx)("div", {
66
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
67
+ className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
68
+ }, children));
149
69
  };
150
70
  var MultiBodiedExtension = function MultiBodiedExtension(props) {
151
71
  var _extensionContext$pri;
@@ -195,41 +115,24 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
195
115
  localId: localId,
196
116
  fragmentLocalId: fragmentLocalId
197
117
  };
198
- var renderMultiBodiedExtension = function renderMultiBodiedExtension() {
199
- var MultiBodiedExtensionNodeRenderer = (0, _react.jsx)(NodeRenderer, {
118
+ if (privateProps.__allowBodiedOverride) {
119
+ return (0, _react.jsx)(NodeRenderer, {
200
120
  node: node,
201
121
  actions: actions
202
122
  });
203
- try {
204
- if ( /*#__PURE__*/_react2.default.isValidElement(MultiBodiedExtensionNodeRenderer)) {
205
- // Return the content directly if it's a valid JSX.Element
206
- return (0, _extension.renderExtension)(MultiBodiedExtensionNodeRenderer, layout, {
207
- isTopLevel: path.length < 1
208
- });
209
- }
210
- } catch (e) {
211
- /** We don't want this error to block renderer */
212
- /** We keep rendering the default content */
213
- }
214
-
215
- // Always return default content if anything goes wrong
216
- return (0, _extension.renderExtension)(children, layout, {
217
- isTopLevel: path.length < 1
218
- });
219
- };
220
- if (privateProps.__allowBodiedOverride) {
221
- return renderMultiBodiedExtension();
222
123
  } else {
223
- return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(MultiBodiedExtensionNavigation, null, renderMultiBodiedExtension()), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children));
124
+ return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(MultiBodiedExtensionNavigation, null, (0, _react.jsx)(NodeRenderer, {
125
+ node: node,
126
+ actions: actions
127
+ })), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children));
224
128
  }
225
- }, [loading, extensionContext, layout, path, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
129
+ }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
226
130
 
131
+ // make the frame visible
227
132
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
228
- 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\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\t"])), activeChildIndex + 1);
133
+ 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);
229
134
  return (0, _react.jsx)("section", {
230
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
231
- className: "multiBodiedExtension--container",
232
- css: [(0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer') ? containerStylesNew : containerStylesOld, containerActiveFrameStyles],
135
+ css: [containerStyles, containerActiveFrameStyles],
233
136
  "data-testid": "multiBodiedExtension--container",
234
137
  "data-active-child-index": activeChildIndex,
235
138
  "data-layout": layout
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -67,7 +67,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
67
67
  var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
68
68
  var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
69
69
  var packageName = "@atlaskit/renderer";
70
- var packageVersion = "114.4.5";
70
+ var packageVersion = "114.5.0";
71
71
  var setAsQueryContainerStyles = (0, _react2.css)({
72
72
  containerName: 'ak-renderer-wrapper',
73
73
  containerType: 'inline-size',
package/dist/es2019/react/nodes/extensionFrame.js CHANGED
@@ -5,17 +5,20 @@
5
5
 
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { jsx, css } from '@emotion/react';
8
- import { sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
9
8
  import { fg } from '@atlaskit/platform-feature-flags';
10
- const containerCSS = css({
9
+ const containerCSSOld = css({
11
10
  minHeight: '100px',
12
11
  flexBasis: '100%'
13
12
  });
13
+ const containerCSSNew = css({
14
+ padding: `${"var(--ds-space-100, 8px)"}`,
15
+ minHeight: '100px',
16
+ // by default all frames are hidden, this style is overridden in multiBodiedExtensions for active frame
17
+ display: 'none'
18
+ });
14
19
  const ExtensionFrame = props => {
15
20
  return jsx("div", {
16
- css: [containerCSS, fg('platform_editor_multi_body_extension_extensibility') &&
17
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
18
- sharedMultiBodiedExtensionStyles.extensionFrameContent],
21
+ css: [fg('platform_editor_multi_body_extension_extensibility') ? containerCSSNew : containerCSSOld],
19
22
  "data-extension-frame": "true"
20
23
  }, props.children);
21
24
  };
package/dist/es2019/react/nodes/multiBodiedExtension.js CHANGED
@@ -7,116 +7,17 @@
7
7
 
8
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
9
  import { jsx, css } from '@emotion/react';
10
- import { N40 } from '@atlaskit/theme/colors';
11
10
  import React, { useState } from 'react';
12
- import { renderExtension } from './extension';
13
- import { WidthConsumer, sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
11
+ import { WidthConsumer } from '@atlaskit/editor-common/ui';
14
12
  import { RendererCssClassName } from '../../consts';
15
13
  import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
16
14
  import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
17
15
  import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
18
- import { fg } from '@atlaskit/platform-feature-flags';
19
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
20
- const navigationStylesOld = css`
21
- ${sharedMultiBodiedExtensionStyles.mbeNavigation};
22
- margin-left: 0 !important;
23
- margin-right: 0 !important;
24
- .mbe-add-tab-button,
25
- .mbe-remove-tab {
26
- display: none;
27
- }
28
- `;
29
-
30
- // localized sharedMultiBodiedExtensionStyles.mbeNavigation in navigationCssExtendedNew
31
- const navigationStylesNew = css({
32
- borderTopLeftRadius: "var(--ds-border-radius, 3px)",
33
- borderTopRightRadius: "var(--ds-border-radius, 3px)",
34
- userSelect: 'none',
35
- WebkitUserModify: 'read-only',
36
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
37
- borderBottom: 'none !important',
38
- background: "var(--ds-surface, white)",
39
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
40
- '&.remove-margins': {
41
- margin: "var(--ds-space-negative-100, -8px)"
42
- },
43
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
44
- '&.remove-border': {
45
- border: 'none'
46
- },
47
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
48
- marginLeft: '0 !important',
49
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
50
- marginRight: '0 !important',
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
52
- '.mbe-add-tab-button, .mbe-remove-tab': {
53
- display: 'none'
54
- }
55
- });
56
-
57
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
58
- const containerStylesOld = css`
59
- ${sharedMultiBodiedExtensionStyles.mbeExtensionContainer};
60
- .ak-renderer-extension {
61
- margin-top: 0 !important;
62
- }
63
-
64
- [data-layout='full-width'],
65
- [data-layout='wide'] {
66
- .multiBodiedExtension-navigation {
67
- border-right: 3px solid ${`var(--ds-border, ${N40})`} !important;
68
- }
69
- }
70
- `;
71
-
72
- // localized sharedMultiBodiedExtensionStyles.mbeExtensionContainer in containerStylesNew
73
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
74
- const containerStylesNew = css({
75
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
76
- background: 'transparent !important',
77
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
78
- 'padding:': {
79
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
80
- left: `${"var(--ds-space-100, 8px)"} !important`,
81
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
82
- right: `${"var(--ds-space-100, 8px)"} !important`
83
- },
84
- paddingBottom: "var(--ds-space-100, 8px)",
85
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
86
- '&.remove-padding': {
87
- paddingBottom: 0
88
- },
89
- position: 'relative',
90
- verticalAlign: 'middle',
91
- cursor: 'pointer',
92
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
93
- '.multiBodiedExtension-handler-result': {
94
- marginLeft: "var(--ds-space-100, 8px)"
95
- },
96
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
97
- ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
98
- display: 'none',
99
- background: 'transparent'
100
- },
101
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
102
- '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
103
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
104
- "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
105
- marginTop: 0
106
- }
107
- },
108
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
109
- '.ak-renderer-extension': {
110
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
111
- marginTop: '0 !important'
112
- },
113
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
114
- '[data-layout="full-width"], [data-layout="wide"]': {
115
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
116
- '.multiBodiedExtension-navigation': {
117
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
118
- borderRight: `3px solid ${`var(--ds-border, ${N40})`} !important`
119
- }
16
+ const containerStyles = css({
17
+ // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
18
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
19
+ '&:first-of-type > .ak-renderer-extension': {
20
+ marginTop: 0
120
21
  }
121
22
  });
122
23
  const MultiBodiedExtensionChildrenContainer = ({
@@ -124,18 +25,12 @@ const MultiBodiedExtensionChildrenContainer = ({
124
25
  }) => {
125
26
  return jsx("article", {
126
27
  "data-testid": "multiBodiedExtension--frames"
127
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
128
- ,
129
- className: `multiBodiedExtension--frames`
130
28
  }, children);
131
29
  };
132
30
  const MultiBodiedExtensionNavigation = ({
133
31
  children
134
32
  }) => {
135
33
  return jsx("nav", {
136
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
137
- className: "multiBodiedExtension-navigation",
138
- css: fg('platform_editor_emotion_refactor_renderer') ? navigationStylesNew : navigationStylesOld,
139
34
  "data-testid": "multiBodiedExtension-navigation"
140
35
  }, children);
141
36
  };
@@ -147,16 +42,21 @@ const MultiBodiedExtensionWrapper = ({
147
42
  }) => {
148
43
  const isTopLevel = path.length < 1;
149
44
  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
45
+
46
+ // This hierarchy is copied from regular extension (see extension.tsx)
150
47
  return jsx("div", {
151
48
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
152
- className: `${RendererCssClassName.EXTENSION} ${centerAlignClass} ${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`,
49
+ className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
153
50
  style: {
154
51
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
155
52
  width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
156
53
  },
157
54
  "data-layout": layout,
158
55
  "data-testid": "multiBodiedExtension--wrapper"
159
- }, children);
56
+ }, jsx("div", {
57
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
58
+ className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
59
+ }, children));
160
60
  };
161
61
  const MultiBodiedExtension = props => {
162
62
  var _extensionContext$pri;
@@ -204,48 +104,28 @@ const MultiBodiedExtension = props => {
204
104
  localId,
205
105
  fragmentLocalId
206
106
  };
207
- const renderMultiBodiedExtension = () => {
208
- const MultiBodiedExtensionNodeRenderer = jsx(NodeRenderer, {
107
+ if (privateProps.__allowBodiedOverride) {
108
+ return jsx(NodeRenderer, {
209
109
  node: node,
210
110
  actions: actions
211
111
  });
212
- try {
213
- if ( /*#__PURE__*/React.isValidElement(MultiBodiedExtensionNodeRenderer)) {
214
- // Return the content directly if it's a valid JSX.Element
215
- return renderExtension(MultiBodiedExtensionNodeRenderer, layout, {
216
- isTopLevel: path.length < 1
217
- });
218
- }
219
- } catch (e) {
220
- /** We don't want this error to block renderer */
221
- /** We keep rendering the default content */
222
- }
223
-
224
- // Always return default content if anything goes wrong
225
- return renderExtension(children, layout, {
226
- isTopLevel: path.length < 1
227
- });
228
- };
229
- if (privateProps.__allowBodiedOverride) {
230
- return renderMultiBodiedExtension();
231
112
  } else {
232
- return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, renderMultiBodiedExtension()), jsx(MultiBodiedExtensionChildrenContainer, null, children));
113
+ return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, jsx(NodeRenderer, {
114
+ node: node,
115
+ actions: actions
116
+ })), jsx(MultiBodiedExtensionChildrenContainer, null, children));
233
117
  }
234
- }, [loading, extensionContext, layout, path, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
118
+ }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
235
119
 
120
+ // make the frame visible
236
121
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
237
122
  const containerActiveFrameStyles = css`
238
- .multiBodiedExtension--frames
239
- > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
123
+ & [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
240
124
  display: block;
241
- margin-left: 0;
242
- margin-right: 0;
243
125
  }
244
126
  `;
245
127
  return jsx("section", {
246
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
247
- className: "multiBodiedExtension--container",
248
- css: [fg('platform_editor_emotion_refactor_renderer') ? containerStylesNew : containerStylesOld, containerActiveFrameStyles],
128
+ css: [containerStyles, containerActiveFrameStyles],
249
129
  "data-testid": "multiBodiedExtension--container",
250
130
  "data-active-child-index": activeChildIndex,
251
131
  "data-layout": layout
package/dist/es2019/ui/Renderer/index.js CHANGED
@@ -48,7 +48,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
48
48
  export const NORMAL_SEVERITY_THRESHOLD = 2000;
49
49
  export const DEGRADED_SEVERITY_THRESHOLD = 3000;
50
50
  const packageName = "@atlaskit/renderer";
51
- const packageVersion = "114.4.5";
51
+ const packageVersion = "114.5.0";
52
52
  const setAsQueryContainerStyles = css({
53
53
  containerName: 'ak-renderer-wrapper',
54
54
  containerType: 'inline-size',
package/dist/esm/react/nodes/extensionFrame.js CHANGED
@@ -5,17 +5,20 @@
5
5
 
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { jsx, css } from '@emotion/react';
8
- import { sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
9
8
  import { fg } from '@atlaskit/platform-feature-flags';
10
- var containerCSS = css({
9
+ var containerCSSOld = css({
11
10
  minHeight: '100px',
12
11
  flexBasis: '100%'
13
12
  });
13
+ var containerCSSNew = css({
14
+ padding: "var(--ds-space-100, 8px)",
15
+ minHeight: '100px',
16
+ // by default all frames are hidden, this style is overridden in multiBodiedExtensions for active frame
17
+ display: 'none'
18
+ });
14
19
  var ExtensionFrame = function ExtensionFrame(props) {
15
20
  return jsx("div", {
16
- css: [containerCSS, fg('platform_editor_multi_body_extension_extensibility') &&
17
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
18
- sharedMultiBodiedExtensionStyles.extensionFrameContent],
21
+ css: [fg('platform_editor_multi_body_extension_extensibility') ? containerCSSNew : containerCSSOld],
19
22
  "data-extension-frame": "true"
20
23
  }, props.children);
21
24
  };
package/dist/esm/react/nodes/multiBodiedExtension.js CHANGED
@@ -1,6 +1,6 @@
1
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
- var _templateObject, _templateObject2, _templateObject3;
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ var _templateObject;
4
4
  /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
5
5
  /**
6
6
  * @jsxRuntime classic
@@ -10,113 +10,28 @@ var _templateObject, _templateObject2, _templateObject3;
10
10
 
11
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
12
  import { jsx, css } from '@emotion/react';
13
- import { N40 } from '@atlaskit/theme/colors';
14
13
  import React, { useState } from 'react';
15
- import { renderExtension } from './extension';
16
- import { WidthConsumer, sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
14
+ import { WidthConsumer } from '@atlaskit/editor-common/ui';
17
15
  import { RendererCssClassName } from '../../consts';
18
16
  import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
19
17
  import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
20
18
  import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
21
- import { fg } from '@atlaskit/platform-feature-flags';
22
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
23
- var navigationStylesOld = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), sharedMultiBodiedExtensionStyles.mbeNavigation);
24
-
25
- // localized sharedMultiBodiedExtensionStyles.mbeNavigation in navigationCssExtendedNew
26
- var navigationStylesNew = css({
27
- borderTopLeftRadius: "var(--ds-border-radius, 3px)",
28
- borderTopRightRadius: "var(--ds-border-radius, 3px)",
29
- userSelect: 'none',
30
- WebkitUserModify: 'read-only',
31
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
32
- borderBottom: 'none !important',
33
- background: "var(--ds-surface, white)",
34
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
35
- '&.remove-margins': {
36
- margin: "var(--ds-space-negative-100, -8px)"
37
- },
38
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
39
- '&.remove-border': {
40
- border: 'none'
41
- },
42
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
43
- marginLeft: '0 !important',
44
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
45
- marginRight: '0 !important',
46
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
47
- '.mbe-add-tab-button, .mbe-remove-tab': {
48
- display: 'none'
49
- }
50
- });
51
-
52
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
53
- var containerStylesOld = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(N40, ")"));
54
-
55
- // localized sharedMultiBodiedExtensionStyles.mbeExtensionContainer in containerStylesNew
56
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
57
- var containerStylesNew = css({
58
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
59
- background: 'transparent !important',
60
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
61
- 'padding:': {
62
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
63
- left: "var(--ds-space-100, 8px)".concat(" !important"),
64
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
65
- right: "var(--ds-space-100, 8px)".concat(" !important")
66
- },
67
- paddingBottom: "var(--ds-space-100, 8px)",
68
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
69
- '&.remove-padding': {
70
- paddingBottom: 0
71
- },
72
- position: 'relative',
73
- verticalAlign: 'middle',
74
- cursor: 'pointer',
75
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
76
- '.multiBodiedExtension-handler-result': {
77
- marginLeft: "var(--ds-space-100, 8px)"
78
- },
79
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
80
- ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
81
- display: 'none',
82
- background: 'transparent'
83
- },
84
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
85
- '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
86
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
87
- "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
88
- marginTop: 0
89
- }
90
- },
91
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
92
- '.ak-renderer-extension': {
93
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
94
- marginTop: '0 !important'
95
- },
96
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
97
- '[data-layout="full-width"], [data-layout="wide"]': {
98
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
99
- '.multiBodiedExtension-navigation': {
100
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
101
- borderRight: "3px solid ".concat("var(--ds-border, ".concat(N40, ")"), " !important")
102
- }
19
+ var containerStyles = css({
20
+ // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
21
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
22
+ '&:first-of-type > .ak-renderer-extension': {
23
+ marginTop: 0
103
24
  }
104
25
  });
105
26
  var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
106
27
  var children = _ref.children;
107
28
  return jsx("article", {
108
29
  "data-testid": "multiBodiedExtension--frames"
109
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
110
- ,
111
- className: "multiBodiedExtension--frames"
112
30
  }, children);
113
31
  };
114
32
  var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
115
33
  var children = _ref2.children;
116
34
  return jsx("nav", {
117
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
118
- className: "multiBodiedExtension-navigation",
119
- css: fg('platform_editor_emotion_refactor_renderer') ? navigationStylesNew : navigationStylesOld,
120
35
  "data-testid": "multiBodiedExtension-navigation"
121
36
  }, children);
122
37
  };
@@ -127,16 +42,21 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
127
42
  children = _ref3.children;
128
43
  var isTopLevel = path.length < 1;
129
44
  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
45
+
46
+ // This hierarchy is copied from regular extension (see extension.tsx)
130
47
  return jsx("div", {
131
48
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
132
- className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass, " ").concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER),
49
+ className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
133
50
  style: {
134
51
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
135
52
  width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
136
53
  },
137
54
  "data-layout": layout,
138
55
  "data-testid": "multiBodiedExtension--wrapper"
139
- }, children);
56
+ }, jsx("div", {
57
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
58
+ className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
59
+ }, children));
140
60
  };
141
61
  var MultiBodiedExtension = function MultiBodiedExtension(props) {
142
62
  var _extensionContext$pri;
@@ -186,41 +106,24 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
186
106
  localId: localId,
187
107
  fragmentLocalId: fragmentLocalId
188
108
  };
189
- var renderMultiBodiedExtension = function renderMultiBodiedExtension() {
190
- var MultiBodiedExtensionNodeRenderer = jsx(NodeRenderer, {
109
+ if (privateProps.__allowBodiedOverride) {
110
+ return jsx(NodeRenderer, {
191
111
  node: node,
192
112
  actions: actions
193
113
  });
194
- try {
195
- if ( /*#__PURE__*/React.isValidElement(MultiBodiedExtensionNodeRenderer)) {
196
- // Return the content directly if it's a valid JSX.Element
197
- return renderExtension(MultiBodiedExtensionNodeRenderer, layout, {
198
- isTopLevel: path.length < 1
199
- });
200
- }
201
- } catch (e) {
202
- /** We don't want this error to block renderer */
203
- /** We keep rendering the default content */
204
- }
205
-
206
- // Always return default content if anything goes wrong
207
- return renderExtension(children, layout, {
208
- isTopLevel: path.length < 1
209
- });
210
- };
211
- if (privateProps.__allowBodiedOverride) {
212
- return renderMultiBodiedExtension();
213
114
  } else {
214
- return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, renderMultiBodiedExtension()), jsx(MultiBodiedExtensionChildrenContainer, null, children));
115
+ return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, jsx(NodeRenderer, {
116
+ node: node,
117
+ actions: actions
118
+ })), jsx(MultiBodiedExtensionChildrenContainer, null, children));
215
119
  }
216
- }, [loading, extensionContext, layout, path, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
120
+ }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
217
121
 
122
+ // make the frame visible
218
123
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
219
- var containerActiveFrameStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t.multiBodiedExtension--frames\n\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\t"])), activeChildIndex + 1);
124
+ 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);
220
125
  return jsx("section", {
221
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
222
- className: "multiBodiedExtension--container",
223
- css: [fg('platform_editor_emotion_refactor_renderer') ? containerStylesNew : containerStylesOld, containerActiveFrameStyles],
126
+ css: [containerStyles, containerActiveFrameStyles],
224
127
  "data-testid": "multiBodiedExtension--container",
225
128
  "data-active-child-index": activeChildIndex,
226
129
  "data-layout": layout
package/dist/esm/ui/Renderer/index.js CHANGED
@@ -57,7 +57,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
57
57
  export var NORMAL_SEVERITY_THRESHOLD = 2000;
58
58
  export var DEGRADED_SEVERITY_THRESHOLD = 3000;
59
59
  var packageName = "@atlaskit/renderer";
60
- var packageVersion = "114.4.5";
60
+ var packageVersion = "114.5.0";
61
61
  var setAsQueryContainerStyles = css({
62
62
  containerName: 'ak-renderer-wrapper',
63
63
  containerType: 'inline-size',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "114.4.5",
3
+ "version": "114.5.0",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -54,7 +54,7 @@
54
54
  "@atlaskit/status": "^3.0.0",
55
55
  "@atlaskit/task-decision": "^19.1.0",
56
56
  "@atlaskit/theme": "^18.0.0",
57
- "@atlaskit/tmp-editor-statsig": "^4.3.0",
57
+ "@atlaskit/tmp-editor-statsig": "^4.4.0",
58
58
  "@atlaskit/tokens": "^4.5.0",
59
59
  "@atlaskit/tooltip": "^20.0.0",
60
60
  "@atlaskit/visually-hidden": "^3.0.0",