@atlaskit/renderer 144.0.1 → 144.0.3

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 (15) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/react/nodes/extension.js +33 -68
  3. package/dist/cjs/react/nodes/multiBodiedExtension.js +13 -68
  4. package/dist/cjs/ui/Renderer/breakout-ssr.js +5 -9
  5. package/dist/cjs/ui/Renderer/index.js +1 -1
  6. package/dist/es2019/react/nodes/extension.js +31 -67
  7. package/dist/es2019/react/nodes/multiBodiedExtension.js +11 -68
  8. package/dist/es2019/ui/Renderer/breakout-ssr.js +5 -9
  9. package/dist/es2019/ui/Renderer/index.js +1 -1
  10. package/dist/esm/react/nodes/extension.js +34 -69
  11. package/dist/esm/react/nodes/multiBodiedExtension.js +13 -68
  12. package/dist/esm/ui/Renderer/breakout-ssr.js +5 -9
  13. package/dist/esm/ui/Renderer/index.js +1 -1
  14. package/dist/types/ui/Renderer/breakout-ssr.d.ts +1 -1
  15. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 144.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 144.0.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`e2193743a9a17`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e2193743a9a17) -
14
+ Clean up experiment `platform_editor_renderer_extension_width_fix`
15
+ - Updated dependencies
16
+
3
17
  ## 144.0.1
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/react/nodes/extension.js CHANGED
@@ -11,7 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
11
11
  var _react2 = require("@emotion/react");
12
12
  var _analytics = require("@atlaskit/editor-common/analytics");
13
13
  var _ui = require("@atlaskit/editor-common/ui");
14
- var _utils = require("@atlaskit/editor-common/utils");
15
14
  var _fg = require("@atlaskit/platform-feature-flags/fg");
16
15
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
17
16
  var _consts = require("../../consts");
@@ -153,70 +152,36 @@ var renderExtension = exports.renderExtension = function renderExtension(content
153
152
  fireAnalyticsEvent: fireAnalyticsEvent,
154
153
  node: node
155
154
  }) : null;
156
- if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
157
- var extensionDiv = (0, _react2.jsx)("div", {
158
- ref: options.handleRef
159
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
160
- ,
161
- className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
162
- style: {
163
- width: isInline ? undefined : ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
164
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
165
- (0, _breakout.calcBreakoutWidthCss)(layout) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
166
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
167
- minHeight: isInline ? undefined : extensionHeight && "".concat(extensionHeight, "px")
168
- },
169
- "data-layout": layout,
170
- "data-local-id": localId,
171
- "data-testid": "extension--wrapper",
172
- "data-node-type": "extension",
173
- "data-top-level": isTopLevel || undefined,
174
- "data-forge-inline": isNativeForgeInline || undefined,
175
- "data-migrated-inline": isMigratedInlineBodied || undefined
176
- }, (0, _react2.jsx)("div", {
177
- tabIndex: options.tabIndex
178
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
179
- ,
180
- className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
181
- css: [!isInsideOfInlineExtension && containerStyle]
182
- }, asInlineAnalytics, content));
183
- return centerAlignClass ? (0, _react2.jsx)("div", {
184
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
185
- className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
186
- }, extensionDiv) : extensionDiv;
187
- }
188
- return (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref3) {
189
- var width = _ref3.width;
190
- var extensionDiv = (0, _react2.jsx)("div", {
191
- ref: options.handleRef
192
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
193
- ,
194
- className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
195
- style: {
196
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
197
- width: isInline ? undefined : ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
198
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
199
- (0, _utils.calcBreakoutWidth)(layout, width) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
200
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
201
- minHeight: isInline ? undefined : "".concat(extensionHeight, "px")
202
- },
203
- "data-layout": layout,
204
- "data-local-id": localId,
205
- "data-top-level": isTopLevel || undefined,
206
- "data-forge-inline": isNativeForgeInline || undefined,
207
- "data-migrated-inline": isMigratedInlineBodied || undefined
208
- }, (0, _react2.jsx)("div", {
209
- tabIndex: options.tabIndex
210
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
211
- ,
212
- className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
213
- css: [!isInsideOfInlineExtension && containerStyle]
214
- }, asInlineAnalytics, content));
215
- return centerAlignClass ? (0, _react2.jsx)("div", {
216
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
217
- className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
218
- }, extensionDiv) : extensionDiv;
219
- });
155
+ var extensionDiv = (0, _react2.jsx)("div", {
156
+ ref: options.handleRef
157
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
158
+ ,
159
+ className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
160
+ style: {
161
+ width: isInline ? undefined : ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
162
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
163
+ (0, _breakout.calcBreakoutWidthCss)(layout) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
164
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
165
+ minHeight: isInline ? undefined : extensionHeight && "".concat(extensionHeight, "px")
166
+ },
167
+ "data-layout": layout,
168
+ "data-local-id": localId,
169
+ "data-testid": "extension--wrapper",
170
+ "data-node-type": "extension",
171
+ "data-top-level": isTopLevel || undefined,
172
+ "data-forge-inline": isNativeForgeInline || undefined,
173
+ "data-migrated-inline": isMigratedInlineBodied || undefined
174
+ }, (0, _react2.jsx)("div", {
175
+ tabIndex: options.tabIndex
176
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
177
+ ,
178
+ className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
179
+ css: [!isInsideOfInlineExtension && containerStyle]
180
+ }, asInlineAnalytics, content));
181
+ return centerAlignClass ? (0, _react2.jsx)("div", {
182
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
183
+ className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
184
+ }, extensionDiv) : extensionDiv;
220
185
  };
221
186
  var Extension = function Extension(props) {
222
187
  var text = props.text,
@@ -236,10 +201,10 @@ var Extension = function Extension(props) {
236
201
  // eslint-disable-next-line react/jsx-props-no-spreading
237
202
  , (0, _extends2.default)({}, props, {
238
203
  type: "extension"
239
- }), function (_ref4) {
204
+ }), function (_ref3) {
240
205
  var _props$hideExtensionK;
241
- var isExtensionProviderPending = _ref4.isExtensionProviderPending,
242
- result = _ref4.result;
206
+ var isExtensionProviderPending = _ref3.isExtensionProviderPending,
207
+ result = _ref3.result;
243
208
  try {
244
209
  // Return the result directly if it's a valid JSX.Element
245
210
  if (result && /*#__PURE__*/_react.default.isValidElement(result)) {
package/dist/cjs/react/nodes/multiBodiedExtension.js CHANGED
@@ -10,8 +10,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
10
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var _react2 = require("@emotion/react");
13
- var _ui = require("@atlaskit/editor-common/ui");
14
- var _utils = require("@atlaskit/editor-common/utils");
15
13
  var _fg = require("@atlaskit/platform-feature-flags/fg");
16
14
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
17
15
  var _analyticsContext = _interopRequireDefault(require("../../analytics/analyticsContext"));
@@ -71,9 +69,8 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
71
69
  "data-testid": "multiBodiedExtension-navigation"
72
70
  }, children);
73
71
  };
74
- var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
75
- var width = _ref3.width,
76
- path = _ref3.path,
72
+ var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref3) {
73
+ var path = _ref3.path,
77
74
  layout = _ref3.layout,
78
75
  rendererAppearance = _ref3.rendererAppearance,
79
76
  children = _ref3.children;
@@ -83,34 +80,6 @@ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLega
83
80
  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
84
81
  var centerAlignClass = isCustomLayout ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
85
82
 
86
- // This hierarchy is copied from regular extension (see extension.tsx)
87
- return (0, _react2.jsx)("div", {
88
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
89
- className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
90
- style: {
91
- width: ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
92
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
93
- (0, _utils.calcBreakoutWidth)(layout, width) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
94
- },
95
- "data-layout": layout,
96
- "data-testid": "multiBodiedExtension--wrapper-renderer",
97
- "data-top-level": isTopLevel || undefined
98
- }, (0, _react2.jsx)("div", {
99
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
100
- className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
101
- }, children));
102
- };
103
- var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref4) {
104
- var path = _ref4.path,
105
- layout = _ref4.layout,
106
- rendererAppearance = _ref4.rendererAppearance,
107
- children = _ref4.children;
108
- var isTopLevel = path.length < 1;
109
- // we should only use custom layout for full-page appearance
110
- var canUseCustomLayout = (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
111
- var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
112
- var centerAlignClass = isCustomLayout ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
113
-
114
83
  // This hierarchy is copied from regular extension (see extension.tsx)
115
84
  return (0, _react2.jsx)("div", {
116
85
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -203,48 +172,24 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
203
172
 
204
173
  // make the frame visible
205
174
  var containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex);
206
- if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
207
- var _isTopLevel = path.length < 1;
208
- var _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout);
209
- var wrapper = (0, _react2.jsx)(MultiBodiedExtensionWrapperNext, {
210
- layout: layout,
211
- path: path,
212
- rendererAppearance: rendererAppearance
213
- }, renderContent());
214
- return (0, _react2.jsx)("section", {
215
- css: [containerStyles, containerActiveFrameStyles],
216
- "data-testid": "multiBodiedExtension--container",
217
- "data-multiBodiedExtension-container": true,
218
- "data-active-child-index": activeChildIndex,
219
- "data-layout": layout,
220
- "data-local-id": localId,
221
- "data-node-type": "multiBodiedExtension"
222
- }, _useCenterWrapper ? (0, _react2.jsx)("div", {
223
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
224
- className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
225
- }, wrapper) : wrapper);
226
- }
227
175
  var isTopLevel = path.length < 1;
228
176
  var useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout);
177
+ var wrapper = (0, _react2.jsx)(MultiBodiedExtensionWrapperNext, {
178
+ layout: layout,
179
+ path: path,
180
+ rendererAppearance: rendererAppearance
181
+ }, renderContent());
229
182
  return (0, _react2.jsx)("section", {
230
183
  css: [containerStyles, containerActiveFrameStyles],
231
184
  "data-testid": "multiBodiedExtension--container",
232
185
  "data-multiBodiedExtension-container": true,
233
186
  "data-active-child-index": activeChildIndex,
234
187
  "data-layout": layout,
235
- "data-local-id": localId
236
- }, (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref5) {
237
- var width = _ref5.width;
238
- var wrapper = (0, _react2.jsx)(MultiBodiedExtensionWrapperLegacy, {
239
- layout: layout,
240
- width: width,
241
- path: path,
242
- rendererAppearance: rendererAppearance
243
- }, renderContent());
244
- return useCenterWrapper ? (0, _react2.jsx)("div", {
245
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
246
- className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
247
- }, wrapper) : wrapper;
248
- }));
188
+ "data-local-id": localId,
189
+ "data-node-type": "multiBodiedExtension"
190
+ }, useCenterWrapper ? (0, _react2.jsx)("div", {
191
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
192
+ className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
193
+ }, wrapper) : wrapper);
249
194
  };
250
195
  var _default = exports.default = MultiBodiedExtension;
package/dist/cjs/ui/Renderer/breakout-ssr.js CHANGED
@@ -9,7 +9,6 @@ exports.calcLineLength = exports.breakoutInlineScriptContext = void 0;
9
9
  exports.createBreakoutInlineScript = createBreakoutInlineScript;
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
  var _utils = require("@atlaskit/editor-common/utils");
12
- var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
13
12
  var _style = require("./style");
14
13
  /* eslint-disable jsdoc/require-jsdoc -- SSR inline script helpers */
15
14
 
@@ -50,10 +49,7 @@ function BreakoutSSRInlineScript(_ref) {
50
49
  });
51
50
  }
52
51
  function createBreakoutInlineScript(id, shouldSkipScript) {
53
- var flags = {
54
- platform_editor_renderer_extension_width_fix: (0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)
55
- };
56
- return "(function(window){\nif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) { return; }\n".concat(breakoutInlineScriptContext, ";\n(").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(JSON.stringify(shouldSkipScript), ", ").concat(JSON.stringify(flags), ");\n})(window);\n");
52
+ return "(function(window){\nif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) { return; }\n".concat(breakoutInlineScriptContext, ";\n(").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(JSON.stringify(shouldSkipScript), ");\n})(window);\n");
57
53
  }
58
54
  var breakoutInlineScriptContext = exports.breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n breakoutConsts.FullPagePadding = ").concat(_style.FullPagePadding.toString(), ";\n");
59
55
 
@@ -65,7 +61,7 @@ var breakoutInlineScriptContext = exports.breakoutInlineScriptContext = "\n var
65
61
  */
66
62
  // Ignored via go/ees005
67
63
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
68
- function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, flags) {
64
+ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
69
65
  var MEDIA_NODE_TYPE = 'mediaSingle';
70
66
  var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
71
67
  function findUp(element, condition) {
@@ -113,7 +109,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, fla
113
109
  var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension';
114
110
  if (!mode || !WIDE_LAYOUT_MODES.includes(mode) ||
115
111
  // skip apply width styling to mediaSingle node with pixel width to avoid image size changing
116
- isMediaSingleWithPixelWidth || isExtension && flags['platform_editor_renderer_extension_width_fix']) {
112
+ isMediaSingleWithPixelWidth || isExtension) {
117
113
  return;
118
114
  }
119
115
 
@@ -171,11 +167,11 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, fla
171
167
  item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
172
168
  // Ignored via go/ees005
173
169
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
174
- applyMediaBreakout(item.target, flags);
170
+ applyMediaBreakout(item.target);
175
171
  }
176
172
  });
177
173
  });
178
- var applyMediaBreakout = function applyMediaBreakout(card, flags) {
174
+ var applyMediaBreakout = function applyMediaBreakout(card) {
179
175
  // width was already set by another breakout script
180
176
  if (card.style.width) {
181
177
  return;
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -71,7 +71,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
71
71
  var TABLE_INFO_TIMEOUT = 10000;
72
72
  var RENDER_EVENT_SAMPLE_RATE = 0.1;
73
73
  var packageName = "@atlaskit/renderer";
74
- var packageVersion = "144.0.0";
74
+ var packageVersion = "144.0.2";
75
75
  var setAsQueryContainerStyles = (0, _react2.css)({
76
76
  containerName: 'ak-renderer-wrapper',
77
77
  containerType: 'inline-size'
package/dist/es2019/react/nodes/extension.js CHANGED
@@ -9,8 +9,7 @@ import React, { useEffect, useRef } from 'react';
9
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
10
  import { jsx, css } from '@emotion/react';
11
11
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
12
- import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
13
- import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
12
+ import { overflowShadow } from '@atlaskit/editor-common/ui';
14
13
  import { fg } from '@atlaskit/platform-feature-flags/fg';
15
14
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
16
15
  import { RendererCssClassName } from '../../consts';
@@ -134,71 +133,36 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
134
133
  fireAnalyticsEvent: fireAnalyticsEvent,
135
134
  node: node
136
135
  }) : null;
137
- if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
138
- const extensionDiv = jsx("div", {
139
- ref: options.handleRef
140
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
141
- ,
142
- className: `${RendererCssClassName.EXTENSION} ${inlineClassName} ${options.shadowClassNames} ${centerAlignClass}`,
143
- style: {
144
- width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
145
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
146
- calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
147
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
148
- minHeight: isInline ? undefined : extensionHeight && `${extensionHeight}px`
149
- },
150
- "data-layout": layout,
151
- "data-local-id": localId,
152
- "data-testid": "extension--wrapper",
153
- "data-node-type": "extension",
154
- "data-top-level": isTopLevel || undefined,
155
- "data-forge-inline": isNativeForgeInline || undefined,
156
- "data-migrated-inline": isMigratedInlineBodied || undefined
157
- }, jsx("div", {
158
- tabIndex: options.tabIndex
159
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
160
- ,
161
- className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
162
- css: [!isInsideOfInlineExtension && containerStyle]
163
- }, asInlineAnalytics, content));
164
- return centerAlignClass ? jsx("div", {
165
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
166
- className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
167
- }, extensionDiv) : extensionDiv;
168
- }
169
- return jsx(WidthConsumer, null, ({
170
- width
171
- }) => {
172
- const extensionDiv = jsx("div", {
173
- ref: options.handleRef
174
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
175
- ,
176
- className: `${RendererCssClassName.EXTENSION} ${inlineClassName} ${options.shadowClassNames} ${centerAlignClass}`,
177
- style: {
178
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
179
- width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
180
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
181
- calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
182
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
183
- minHeight: isInline ? undefined : `${extensionHeight}px`
184
- },
185
- "data-layout": layout,
186
- "data-local-id": localId,
187
- "data-top-level": isTopLevel || undefined,
188
- "data-forge-inline": isNativeForgeInline || undefined,
189
- "data-migrated-inline": isMigratedInlineBodied || undefined
190
- }, jsx("div", {
191
- tabIndex: options.tabIndex
192
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
193
- ,
194
- className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
195
- css: [!isInsideOfInlineExtension && containerStyle]
196
- }, asInlineAnalytics, content));
197
- return centerAlignClass ? jsx("div", {
198
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
199
- className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
200
- }, extensionDiv) : extensionDiv;
201
- });
136
+ const extensionDiv = jsx("div", {
137
+ ref: options.handleRef
138
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
139
+ ,
140
+ className: `${RendererCssClassName.EXTENSION} ${inlineClassName} ${options.shadowClassNames} ${centerAlignClass}`,
141
+ style: {
142
+ width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
143
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
144
+ calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
145
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
146
+ minHeight: isInline ? undefined : extensionHeight && `${extensionHeight}px`
147
+ },
148
+ "data-layout": layout,
149
+ "data-local-id": localId,
150
+ "data-testid": "extension--wrapper",
151
+ "data-node-type": "extension",
152
+ "data-top-level": isTopLevel || undefined,
153
+ "data-forge-inline": isNativeForgeInline || undefined,
154
+ "data-migrated-inline": isMigratedInlineBodied || undefined
155
+ }, jsx("div", {
156
+ tabIndex: options.tabIndex
157
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
158
+ ,
159
+ className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
160
+ css: [!isInsideOfInlineExtension && containerStyle]
161
+ }, asInlineAnalytics, content));
162
+ return centerAlignClass ? jsx("div", {
163
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
164
+ className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
165
+ }, extensionDiv) : extensionDiv;
202
166
  };
203
167
  const Extension = props => {
204
168
  const {
package/dist/es2019/react/nodes/multiBodiedExtension.js CHANGED
@@ -8,8 +8,6 @@
8
8
 
9
9
  import React, { useContext, useState } from 'react';
10
10
  import { jsx, css } from '@emotion/react';
11
- import { WidthConsumer } from '@atlaskit/editor-common/ui';
12
- import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
13
11
  import { fg } from '@atlaskit/platform-feature-flags/fg';
14
12
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
15
13
  import AnalyticsContext from '../../analytics/analyticsContext';
@@ -71,36 +69,6 @@ const MultiBodiedExtensionNavigation = ({
71
69
  "data-testid": "multiBodiedExtension-navigation"
72
70
  }, children);
73
71
  };
74
- const MultiBodiedExtensionWrapperLegacy = ({
75
- width,
76
- path,
77
- layout,
78
- rendererAppearance,
79
- children
80
- }) => {
81
- const isTopLevel = path.length < 1;
82
- // we should only use custom layout for full-page appearance
83
- const canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
84
- const isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
85
- const centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
86
-
87
- // This hierarchy is copied from regular extension (see extension.tsx)
88
- return jsx("div", {
89
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
90
- className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
91
- style: {
92
- width: (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
93
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
94
- calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
95
- },
96
- "data-layout": layout,
97
- "data-testid": "multiBodiedExtension--wrapper-renderer",
98
- "data-top-level": isTopLevel || undefined
99
- }, jsx("div", {
100
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
101
- className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
102
- }, children));
103
- };
104
72
  const MultiBodiedExtensionWrapperNext = ({
105
73
  path,
106
74
  layout,
@@ -204,49 +172,24 @@ const MultiBodiedExtension = props => {
204
172
 
205
173
  // make the frame visible
206
174
  const containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex);
207
- if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
208
- const isTopLevel = path.length < 1;
209
- const useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout);
210
- const wrapper = jsx(MultiBodiedExtensionWrapperNext, {
211
- layout: layout,
212
- path: path,
213
- rendererAppearance: rendererAppearance
214
- }, renderContent());
215
- return jsx("section", {
216
- css: [containerStyles, containerActiveFrameStyles],
217
- "data-testid": "multiBodiedExtension--container",
218
- "data-multiBodiedExtension-container": true,
219
- "data-active-child-index": activeChildIndex,
220
- "data-layout": layout,
221
- "data-local-id": localId,
222
- "data-node-type": "multiBodiedExtension"
223
- }, useCenterWrapper ? jsx("div", {
224
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
225
- className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
226
- }, wrapper) : wrapper);
227
- }
228
175
  const isTopLevel = path.length < 1;
229
176
  const useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout);
177
+ const wrapper = jsx(MultiBodiedExtensionWrapperNext, {
178
+ layout: layout,
179
+ path: path,
180
+ rendererAppearance: rendererAppearance
181
+ }, renderContent());
230
182
  return jsx("section", {
231
183
  css: [containerStyles, containerActiveFrameStyles],
232
184
  "data-testid": "multiBodiedExtension--container",
233
185
  "data-multiBodiedExtension-container": true,
234
186
  "data-active-child-index": activeChildIndex,
235
187
  "data-layout": layout,
236
- "data-local-id": localId
237
- }, jsx(WidthConsumer, null, ({
238
- width
239
- }) => {
240
- const wrapper = jsx(MultiBodiedExtensionWrapperLegacy, {
241
- layout: layout,
242
- width: width,
243
- path: path,
244
- rendererAppearance: rendererAppearance
245
- }, renderContent());
246
- return useCenterWrapper ? jsx("div", {
247
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
248
- className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
249
- }, wrapper) : wrapper;
250
- }));
188
+ "data-local-id": localId,
189
+ "data-node-type": "multiBodiedExtension"
190
+ }, useCenterWrapper ? jsx("div", {
191
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
192
+ className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
193
+ }, wrapper) : wrapper);
251
194
  };
252
195
  export default MultiBodiedExtension;
package/dist/es2019/ui/Renderer/breakout-ssr.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  import React from 'react';
4
4
  import { breakoutConsts } from '@atlaskit/editor-common/utils';
5
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
5
  import { FullPagePadding } from './style';
7
6
  /**
8
7
  * Inline Script that updates breakout node width on client side,
@@ -42,13 +41,10 @@ export function BreakoutSSRInlineScript({
42
41
  });
43
42
  }
44
43
  export function createBreakoutInlineScript(id, shouldSkipScript) {
45
- const flags = {
46
- platform_editor_renderer_extension_width_fix: expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)
47
- };
48
44
  return `(function(window){
49
45
  if(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) { return; }
50
46
  ${breakoutInlineScriptContext};
51
- (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${JSON.stringify(shouldSkipScript)}, ${JSON.stringify(flags)});
47
+ (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${JSON.stringify(shouldSkipScript)});
52
48
  })(window);
53
49
  `;
54
50
  }
@@ -70,7 +66,7 @@ export const breakoutInlineScriptContext = `
70
66
  */
71
67
  // Ignored via go/ees005
72
68
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
73
- function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, flags) {
69
+ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
74
70
  const MEDIA_NODE_TYPE = 'mediaSingle';
75
71
  const WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
76
72
  function findUp(element, condition) {
@@ -118,7 +114,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, fla
118
114
  const isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension';
119
115
  if (!mode || !WIDE_LAYOUT_MODES.includes(mode) ||
120
116
  // skip apply width styling to mediaSingle node with pixel width to avoid image size changing
121
- isMediaSingleWithPixelWidth || isExtension && flags['platform_editor_renderer_extension_width_fix']) {
117
+ isMediaSingleWithPixelWidth || isExtension) {
122
118
  return;
123
119
  }
124
120
 
@@ -176,11 +172,11 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, fla
176
172
  item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
177
173
  // Ignored via go/ees005
178
174
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
179
- applyMediaBreakout(item.target, flags);
175
+ applyMediaBreakout(item.target);
180
176
  }
181
177
  });
182
178
  });
183
- const applyMediaBreakout = (card, flags) => {
179
+ const applyMediaBreakout = card => {
184
180
  // width was already set by another breakout script
185
181
  if (card.style.width) {
186
182
  return;
package/dist/es2019/ui/Renderer/index.js CHANGED
@@ -56,7 +56,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
56
56
  const TABLE_INFO_TIMEOUT = 10000;
57
57
  const RENDER_EVENT_SAMPLE_RATE = 0.1;
58
58
  const packageName = "@atlaskit/renderer";
59
- const packageVersion = "144.0.0";
59
+ const packageVersion = "144.0.2";
60
60
  const setAsQueryContainerStyles = css({
61
61
  containerName: 'ak-renderer-wrapper',
62
62
  containerType: 'inline-size'
package/dist/esm/react/nodes/extension.js CHANGED
@@ -9,8 +9,7 @@ import React, { useEffect, useRef } from 'react';
9
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
10
  import { jsx, css } from '@emotion/react';
11
11
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
12
- import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
13
- import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
12
+ import { overflowShadow } from '@atlaskit/editor-common/ui';
14
13
  import { fg } from '@atlaskit/platform-feature-flags/fg';
15
14
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
16
15
  import { RendererCssClassName } from '../../consts';
@@ -144,70 +143,36 @@ export var renderExtension = function renderExtension(content, layout) {
144
143
  fireAnalyticsEvent: fireAnalyticsEvent,
145
144
  node: node
146
145
  }) : null;
147
- if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
148
- var extensionDiv = jsx("div", {
149
- ref: options.handleRef
150
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
151
- ,
152
- className: "".concat(RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
153
- style: {
154
- width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
155
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
156
- calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
157
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
158
- minHeight: isInline ? undefined : extensionHeight && "".concat(extensionHeight, "px")
159
- },
160
- "data-layout": layout,
161
- "data-local-id": localId,
162
- "data-testid": "extension--wrapper",
163
- "data-node-type": "extension",
164
- "data-top-level": isTopLevel || undefined,
165
- "data-forge-inline": isNativeForgeInline || undefined,
166
- "data-migrated-inline": isMigratedInlineBodied || undefined
167
- }, jsx("div", {
168
- tabIndex: options.tabIndex
169
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
170
- ,
171
- className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
172
- css: [!isInsideOfInlineExtension && containerStyle]
173
- }, asInlineAnalytics, content));
174
- return centerAlignClass ? jsx("div", {
175
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
176
- className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
177
- }, extensionDiv) : extensionDiv;
178
- }
179
- return jsx(WidthConsumer, null, function (_ref3) {
180
- var width = _ref3.width;
181
- var extensionDiv = jsx("div", {
182
- ref: options.handleRef
183
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
184
- ,
185
- className: "".concat(RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
186
- style: {
187
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
188
- width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
189
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
190
- calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
191
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
192
- minHeight: isInline ? undefined : "".concat(extensionHeight, "px")
193
- },
194
- "data-layout": layout,
195
- "data-local-id": localId,
196
- "data-top-level": isTopLevel || undefined,
197
- "data-forge-inline": isNativeForgeInline || undefined,
198
- "data-migrated-inline": isMigratedInlineBodied || undefined
199
- }, jsx("div", {
200
- tabIndex: options.tabIndex
201
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
202
- ,
203
- className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
204
- css: [!isInsideOfInlineExtension && containerStyle]
205
- }, asInlineAnalytics, content));
206
- return centerAlignClass ? jsx("div", {
207
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
208
- className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
209
- }, extensionDiv) : extensionDiv;
210
- });
146
+ var extensionDiv = jsx("div", {
147
+ ref: options.handleRef
148
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
149
+ ,
150
+ className: "".concat(RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
151
+ style: {
152
+ width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
153
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
154
+ calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
155
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
156
+ minHeight: isInline ? undefined : extensionHeight && "".concat(extensionHeight, "px")
157
+ },
158
+ "data-layout": layout,
159
+ "data-local-id": localId,
160
+ "data-testid": "extension--wrapper",
161
+ "data-node-type": "extension",
162
+ "data-top-level": isTopLevel || undefined,
163
+ "data-forge-inline": isNativeForgeInline || undefined,
164
+ "data-migrated-inline": isMigratedInlineBodied || undefined
165
+ }, jsx("div", {
166
+ tabIndex: options.tabIndex
167
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
168
+ ,
169
+ className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
170
+ css: [!isInsideOfInlineExtension && containerStyle]
171
+ }, asInlineAnalytics, content));
172
+ return centerAlignClass ? jsx("div", {
173
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
174
+ className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
175
+ }, extensionDiv) : extensionDiv;
211
176
  };
212
177
  var Extension = function Extension(props) {
213
178
  var text = props.text,
@@ -227,10 +192,10 @@ var Extension = function Extension(props) {
227
192
  // eslint-disable-next-line react/jsx-props-no-spreading
228
193
  , _extends({}, props, {
229
194
  type: "extension"
230
- }), function (_ref4) {
195
+ }), function (_ref3) {
231
196
  var _props$hideExtensionK;
232
- var isExtensionProviderPending = _ref4.isExtensionProviderPending,
233
- result = _ref4.result;
197
+ var isExtensionProviderPending = _ref3.isExtensionProviderPending,
198
+ result = _ref3.result;
234
199
  try {
235
200
  // Return the result directly if it's a valid JSX.Element
236
201
  if (result && /*#__PURE__*/React.isValidElement(result)) {
package/dist/esm/react/nodes/multiBodiedExtension.js CHANGED
@@ -11,8 +11,6 @@ var _templateObject, _templateObject2;
11
11
 
12
12
  import React, { useContext, useState } from 'react';
13
13
  import { jsx, css } from '@emotion/react';
14
- import { WidthConsumer } from '@atlaskit/editor-common/ui';
15
- import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
16
14
  import { fg } from '@atlaskit/platform-feature-flags/fg';
17
15
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
18
16
  import AnalyticsContext from '../../analytics/analyticsContext';
@@ -64,9 +62,8 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
64
62
  "data-testid": "multiBodiedExtension-navigation"
65
63
  }, children);
66
64
  };
67
- var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
68
- var width = _ref3.width,
69
- path = _ref3.path,
65
+ var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref3) {
66
+ var path = _ref3.path,
70
67
  layout = _ref3.layout,
71
68
  rendererAppearance = _ref3.rendererAppearance,
72
69
  children = _ref3.children;
@@ -76,34 +73,6 @@ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLega
76
73
  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
77
74
  var centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
78
75
 
79
- // This hierarchy is copied from regular extension (see extension.tsx)
80
- return jsx("div", {
81
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
82
- className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
83
- style: {
84
- width: (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
85
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
86
- calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
87
- },
88
- "data-layout": layout,
89
- "data-testid": "multiBodiedExtension--wrapper-renderer",
90
- "data-top-level": isTopLevel || undefined
91
- }, jsx("div", {
92
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
93
- className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
94
- }, children));
95
- };
96
- var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref4) {
97
- var path = _ref4.path,
98
- layout = _ref4.layout,
99
- rendererAppearance = _ref4.rendererAppearance,
100
- children = _ref4.children;
101
- var isTopLevel = path.length < 1;
102
- // we should only use custom layout for full-page appearance
103
- var canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
104
- var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
105
- var centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
106
-
107
76
  // This hierarchy is copied from regular extension (see extension.tsx)
108
77
  return jsx("div", {
109
78
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -196,48 +165,24 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
196
165
 
197
166
  // make the frame visible
198
167
  var containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex);
199
- if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
200
- var _isTopLevel = path.length < 1;
201
- var _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout);
202
- var wrapper = jsx(MultiBodiedExtensionWrapperNext, {
203
- layout: layout,
204
- path: path,
205
- rendererAppearance: rendererAppearance
206
- }, renderContent());
207
- return jsx("section", {
208
- css: [containerStyles, containerActiveFrameStyles],
209
- "data-testid": "multiBodiedExtension--container",
210
- "data-multiBodiedExtension-container": true,
211
- "data-active-child-index": activeChildIndex,
212
- "data-layout": layout,
213
- "data-local-id": localId,
214
- "data-node-type": "multiBodiedExtension"
215
- }, _useCenterWrapper ? jsx("div", {
216
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
217
- className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
218
- }, wrapper) : wrapper);
219
- }
220
168
  var isTopLevel = path.length < 1;
221
169
  var useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout);
170
+ var wrapper = jsx(MultiBodiedExtensionWrapperNext, {
171
+ layout: layout,
172
+ path: path,
173
+ rendererAppearance: rendererAppearance
174
+ }, renderContent());
222
175
  return jsx("section", {
223
176
  css: [containerStyles, containerActiveFrameStyles],
224
177
  "data-testid": "multiBodiedExtension--container",
225
178
  "data-multiBodiedExtension-container": true,
226
179
  "data-active-child-index": activeChildIndex,
227
180
  "data-layout": layout,
228
- "data-local-id": localId
229
- }, jsx(WidthConsumer, null, function (_ref5) {
230
- var width = _ref5.width;
231
- var wrapper = jsx(MultiBodiedExtensionWrapperLegacy, {
232
- layout: layout,
233
- width: width,
234
- path: path,
235
- rendererAppearance: rendererAppearance
236
- }, renderContent());
237
- return useCenterWrapper ? jsx("div", {
238
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
239
- className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
240
- }, wrapper) : wrapper;
241
- }));
181
+ "data-local-id": localId,
182
+ "data-node-type": "multiBodiedExtension"
183
+ }, useCenterWrapper ? jsx("div", {
184
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
185
+ className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
186
+ }, wrapper) : wrapper);
242
187
  };
243
188
  export default MultiBodiedExtension;
package/dist/esm/ui/Renderer/breakout-ssr.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  import React from 'react';
4
4
  import { breakoutConsts } from '@atlaskit/editor-common/utils';
5
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
5
  import { FullPagePadding } from './style';
7
6
  /**
8
7
  * Inline Script that updates breakout node width on client side,
@@ -41,10 +40,7 @@ export function BreakoutSSRInlineScript(_ref) {
41
40
  });
42
41
  }
43
42
  export function createBreakoutInlineScript(id, shouldSkipScript) {
44
- var flags = {
45
- platform_editor_renderer_extension_width_fix: expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)
46
- };
47
- return "(function(window){\nif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) { return; }\n".concat(breakoutInlineScriptContext, ";\n(").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(JSON.stringify(shouldSkipScript), ", ").concat(JSON.stringify(flags), ");\n})(window);\n");
43
+ return "(function(window){\nif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) { return; }\n".concat(breakoutInlineScriptContext, ";\n(").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(JSON.stringify(shouldSkipScript), ");\n})(window);\n");
48
44
  }
49
45
  export var breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON.stringify(breakoutConsts), ";\n breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n breakoutConsts.getBreakpoint = ").concat(breakoutConsts.getBreakpoint.toString(), ";\n breakoutConsts.calcBreakoutWidth = ").concat(breakoutConsts.calcBreakoutWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n breakoutConsts.FullPagePadding = ").concat(FullPagePadding.toString(), ";\n");
50
46
 
@@ -56,7 +52,7 @@ export var breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON
56
52
  */
57
53
  // Ignored via go/ees005
58
54
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
59
- function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, flags) {
55
+ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
60
56
  var MEDIA_NODE_TYPE = 'mediaSingle';
61
57
  var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
62
58
  function findUp(element, condition) {
@@ -104,7 +100,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, fla
104
100
  var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension';
105
101
  if (!mode || !WIDE_LAYOUT_MODES.includes(mode) ||
106
102
  // skip apply width styling to mediaSingle node with pixel width to avoid image size changing
107
- isMediaSingleWithPixelWidth || isExtension && flags['platform_editor_renderer_extension_width_fix']) {
103
+ isMediaSingleWithPixelWidth || isExtension) {
108
104
  return;
109
105
  }
110
106
 
@@ -162,11 +158,11 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, fla
162
158
  item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
163
159
  // Ignored via go/ees005
164
160
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
165
- applyMediaBreakout(item.target, flags);
161
+ applyMediaBreakout(item.target);
166
162
  }
167
163
  });
168
164
  });
169
- var applyMediaBreakout = function applyMediaBreakout(card, flags) {
165
+ var applyMediaBreakout = function applyMediaBreakout(card) {
170
166
  // width was already set by another breakout script
171
167
  if (card.style.width) {
172
168
  return;
package/dist/esm/ui/Renderer/index.js CHANGED
@@ -61,7 +61,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
61
61
  var TABLE_INFO_TIMEOUT = 10000;
62
62
  var RENDER_EVENT_SAMPLE_RATE = 0.1;
63
63
  var packageName = "@atlaskit/renderer";
64
- var packageVersion = "144.0.0";
64
+ var packageVersion = "144.0.2";
65
65
  var setAsQueryContainerStyles = css({
66
66
  containerName: 'ak-renderer-wrapper',
67
67
  containerType: 'inline-size'
package/dist/types/ui/Renderer/breakout-ssr.d.ts CHANGED
@@ -10,7 +10,7 @@ declare global {
10
10
  * More info: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1216218119/Renderer+SSR+for+Breakout+Nodes
11
11
  */
12
12
  export declare function BreakoutSSRInlineScript({ noOpSSRInlineScript, }: {
13
- noOpSSRInlineScript: Boolean;
13
+ noOpSSRInlineScript: boolean;
14
14
  }): React.JSX.Element | null;
15
15
  export declare function createBreakoutInlineScript(id: number, shouldSkipScript: {
16
16
  table: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "144.0.1",
3
+ "version": "144.0.3",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -73,7 +73,7 @@
73
73
  "@atlaskit/status": "^5.12.0",
74
74
  "@atlaskit/task-decision": "^21.10.0",
75
75
  "@atlaskit/theme": "^28.2.0",
76
- "@atlaskit/tmp-editor-statsig": "^206.0.0",
76
+ "@atlaskit/tmp-editor-statsig": "^208.0.0",
77
77
  "@atlaskit/tokens": "^20.0.0",
78
78
  "@atlaskit/tooltip": "^24.3.0",
79
79
  "@atlaskit/visually-hidden": "^4.4.0",
@@ -88,7 +88,7 @@
88
88
  "uuid": "^11.1.1"
89
89
  },
90
90
  "peerDependencies": {
91
- "@atlaskit/editor-common": "^125.1.0",
91
+ "@atlaskit/editor-common": "^125.2.0",
92
92
  "@atlaskit/link-provider": "^6.0.0",
93
93
  "@atlaskit/media-core": "^39.0.0",
94
94
  "react": "^18.2.0 || ^19.2.0",