@atlaskit/renderer 124.15.1 → 124.16.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 124.16.1
+
+### Patch Changes
+
+- [`516909774accc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/516909774accc) -
+  Fixing type issues
+- Updated dependencies
+
+## 124.16.0
+
+### Minor Changes
+
+- [`d2da08dd6c682`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2da08dd6c682) -
+  use css driven width for extension styles in renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 124.15.1
 
 ### Patch Changes

package/dist/cjs/actions/index.js

@@ -152,7 +152,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
     }
   }, {
     key: "annotate",
-    value: function annotate(range, annotationId, annotationType) {
+    value: function annotate(range, annotationId, _annotationType) {
       if (!this.doc || !this.schema || !this.schema.marks.annotation) {
         return false;
       }

package/dist/cjs/react/index.js

@@ -300,15 +300,14 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     key: "serializeTextWrapper",
     value: function serializeTextWrapper(content, _ref2) {
       var _this3 = this;
-      var index = _ref2.index,
-        parentInfo = _ref2.parentInfo;
+      var parentInfo = _ref2.parentInfo;
       var currentPath = parentInfo && parentInfo.path || [];
       var nodePosition = parentInfo && parentInfo.pos || 1;
       if ((0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true)) {
         var _this$standaloneBackg;
         (_this$standaloneBackg = this.standaloneBackgroundColorMarks).push.apply(_this$standaloneBackg, (0, _toConsumableArray2.default)((0, _getStandaloneBackgroundColorMarks.getStandaloneBackgroundColorMarks)(content)));
       }
-      return ReactSerializer.buildMarkStructure(content).map(function (mark, index) {
+      return ReactSerializer.buildMarkStructure(content).map(function (mark, _index) {
         return _this3.serializeMark({
           mark: mark,
           parentNode: {
@@ -329,7 +328,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         parentNode = _ref3.parentNode,
         parentMark = _ref3.parentMark;
       if (!(0, _nodes.isTextNode)(mark)) {
-        var serializeContent = function serializeContent(childMark, index) {
+        var serializeContent = function serializeContent(childMark, _index) {
           return _this4.serializeMark({
             mark: childMark,
             parentNode: parentNode,
@@ -665,7 +664,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     key: "getExpandProps",
     value: function getExpandProps(node) {
       var _this7 = this;
-      var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var _path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       if (!(0, _links.isNestedHeaderLinksEnabled)(this.allowHeadingAnchorLinks)) {
         return this.getProps(node);
       }

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

@@ -11,6 +11,8 @@ var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRende
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _consts = require("../../consts");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _breakout = require("../utils/breakout");
 var viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
 // Mirrors sizes from https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
 var macroHeights = {
@@ -54,6 +56,25 @@ var renderExtension = exports.renderExtension = function renderExtension(content
    */
   var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   var extensionHeight = nodeHeight || viewportSize;
+  if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: options.handleRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+        width: isTopLevel ? (0, _breakout.calcBreakoutWidthCss)(layout) : '100%',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        minHeight: extensionHeight && "".concat(extensionHeight, "px")
+      },
+      "data-layout": layout,
+      "data-local-id": localId,
+      "data-testid": "extension--wrapper"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: overflowContainerClass
+    }, content));
+  }
   return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
     var width = _ref2.width;
     return /*#__PURE__*/_react.default.createElement("div", {

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

@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RenderMediaInline = function RenderMediaInline(_ref) {
-  var rendererAppearance = _ref.rendererAppearance,
+  var _rendererAppearance = _ref.rendererAppearance,
     clipboardAttrs = _ref.clipboardAttrs,
     collectionName = _ref.collection,
     eventHandlers = _ref.eventHandlers,

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

@@ -15,6 +15,8 @@ var _consts = require("../../consts");
 var _utils = require("@atlaskit/editor-common/utils");
 var _actions = require("./multiBodiedExtension/actions");
 var _context = require("./multiBodiedExtension/context");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _breakout = require("../utils/breakout");
 var _templateObject;
 /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
 /**
@@ -43,7 +45,7 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
-var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
+var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
   var width = _ref3.width,
     path = _ref3.path,
     layout = _ref3.layout,
@@ -56,7 +58,7 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
     },
     "data-layout": layout,
@@ -66,6 +68,29 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
     className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
   }, children));
 };
+var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref4) {
+  var path = _ref4.path,
+    layout = _ref4.layout,
+    children = _ref4.children;
+  var isTopLevel = path.length < 1;
+  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+
+  // This hierarchy is copied from regular extension (see extension.tsx)
+  return (0, _react.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
+    style: {
+      width: isTopLevel ?
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      (0, _breakout.calcBreakoutWidthCss)(layout) : '100%'
+    },
+    "data-layout": layout,
+    "data-testid": "multiBodiedExtension--wrapper"
+  }, (0, _react.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
+  }, children));
+};
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var _extensionContext$pri;
   var children = props.children,
@@ -130,6 +155,19 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   // make the frame visible
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   var containerActiveFrameStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
+  if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    return (0, _react.jsx)("section", {
+      css: [containerStyles, containerActiveFrameStyles],
+      "data-testid": "multiBodiedExtension--container",
+      "data-multiBodiedExtension-container": true,
+      "data-active-child-index": activeChildIndex,
+      "data-layout": layout,
+      "data-local-id": localId
+    }, (0, _react.jsx)(MultiBodiedExtensionWrapperNext, {
+      layout: layout,
+      path: path
+    }, renderContent()));
+  }
   return (0, _react.jsx)("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
@@ -137,9 +175,9 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     "data-active-child-index": activeChildIndex,
     "data-layout": layout,
     "data-local-id": localId
-  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref4) {
-    var width = _ref4.width;
-    return (0, _react.jsx)(MultiBodiedExtensionWrapper, {
+  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref5) {
+    var width = _ref5.width;
+    return (0, _react.jsx)(MultiBodiedExtensionWrapperLegacy, {
       layout: layout,
       width: width,
       path: path

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

@@ -39,10 +39,10 @@ var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_re
       getChildrenCount: function getChildrenCount() {
         return children ? children === null || children === void 0 ? void 0 : children.length : 0;
       },
-      removeChild: function removeChild(index) {
+      removeChild: function removeChild(_index) {
         return false;
       },
-      updateParameters: function updateParameters(parameters) {
+      updateParameters: function updateParameters(_parameters) {
         return false;
       },
       // Ignored via go/ees005

package/dist/cjs/react/utils/breakout.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calcBreakoutWidthCss = void 0;
+var calcBreakoutWidthCss = exports.calcBreakoutWidthCss = function calcBreakoutWidthCss(layout) {
+  if (layout === 'full-width') {
+    return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))';
+  }
+  if (layout === 'wide') {
+    return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))';
+  }
+  return '100%';
+};

package/dist/cjs/text/nodes/date.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("../../utils");
-var date = function date(node, schema) {
+var date = function date(node, _schema) {
   return node.attrs.timestamp ? (0, _utils.timestampToIsoFormat)(node.attrs.timestamp) : (0, _utils2.getText)(node);
 };
 var _default = exports.default = date;

package/dist/cjs/text/nodes/inlineCard.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("../../utils");
-var inlineCard = function inlineCard(node, schema) {
+var inlineCard = function inlineCard(node, _schema) {
   var _node$attrs$data;
   return node.attrs.url || ((_node$attrs$data = node.attrs.data) === null || _node$attrs$data === void 0 ? void 0 : _node$attrs$data.url) || (0, _utils.getText)(node);
 };

package/dist/cjs/text/nodes/mention.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var mention = function mention(node, schema) {
+var mention = function mention(node, _schema) {
   if (['all', 'here'].indexOf(node.attrs.id) !== -1) {
     return "@".concat(node.attrs.id);
   }

package/dist/cjs/text/nodes/status.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("../../utils");
-var status = function status(node, schema) {
+var status = function status(node, _schema) {
   return node.attrs.text ? "[ ".concat(node.attrs.text.toUpperCase(), " ]") : (0, _utils.getText)(node);
 };
 var _default = exports.default = status;

package/dist/cjs/ui/Expand.js

@@ -202,7 +202,6 @@ function Expand(_ref2) {
     fireAnalyticsEvent = _ref2.fireAnalyticsEvent,
     localId = _ref2.localId,
     nestedHeaderIds = _ref2.nestedHeaderIds,
-    rendererAppearance = _ref2.rendererAppearance,
     rendererContentMode = _ref2.rendererContentMode;
   var _React$useState = _react2.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),

package/dist/cjs/ui/ExtensionRenderer.js

@@ -69,7 +69,7 @@ function ExtensionRenderer(props) {
 
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  var handleProvider = _react2.default.useCallback(function (name, providerPromise) {
+  var handleProvider = _react2.default.useCallback(function (_name, providerPromise) {
     providerPromise && providerPromise.then(function (provider) {
       if (isMounted.current) {
         setExtensionProvider(provider);

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

@@ -58,7 +58,8 @@ var baseStyles = (0, _react.css)((_css = {
   fontSize: 'var(--ak-renderer-base-font-size)',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.5rem',
-  color: "var(--ds-text, ".concat(_colors.N800, ")")
+  color: "var(--ds-text, ".concat(_colors.N800, ")"),
+  '--ak-editor--full-width-layout-width': "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px")
 }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css, ".".concat(_consts.RendererCssClassName.DOCUMENT, "::after"), {
   // we add a clearfix after ak-renderer-document in order to
   // contain internal floats (such as media images that are "wrap-left")

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

@@ -69,7 +69,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.15.0";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -616,7 +616,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
         lastChild && lastChild.appendChild(createTelepointer());
       }
       var mutateTelepointer = function mutateTelepointer(mutations) {
-        mutations.forEach(function (mutation, index) {
+        mutations.forEach(function (mutation, _index) {
           var _mutation$addedNodes$, _mutation$removedNode;
           if (initialUpdate.current) {
             var oldTelepointer = _renderer.querySelector("#".concat(_style.TELEPOINTER_ID));

package/dist/cjs/ui/annotations/contexts/AnnotationManagerContext.js

@@ -451,8 +451,8 @@ var AnnotationManagerProvider = exports.AnnotationManagerProvider = function Ann
     var onAnnotationClick = function onAnnotationClick(_ref2) {
       var annotationIds = _ref2.annotationIds,
         eventTarget = _ref2.eventTarget,
-        eventTargetType = _ref2.eventTargetType,
-        viewMethod = _ref2.viewMethod;
+        _eventTargetType = _ref2.eventTargetType,
+        _viewMethod = _ref2.viewMethod;
       dispatch({
         type: 'updateAnnotation',
         data: {

package/dist/cjs/ui/annotations/element/index.js

@@ -74,7 +74,7 @@ var MarkElement = exports.MarkElement = function MarkElement(_ref) {
         } else {
           // TODO: EDITOR-595 - If the preemptive gate returns false, should we track the analytics event?
         }
-      }).catch(function (error) {
+      }).catch(function (_error) {
         // TODO: EDITOR-595 - An error occurred while checking the preemptive gate. We should report this error.
       });
     } else {

package/dist/cjs/ui/annotations/hooks/user-selection.js

@@ -22,7 +22,7 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
     annotationManager = _useAnnotationManager.annotationManager;
   var lastRangeRef = (0, _react.useRef)(null);
   var isAnnotationManagerEnabled = !!annotationManager;
-  var onSelectionChange = (0, _react.useCallback)(function (event) {
+  var onSelectionChange = (0, _react.useCallback)(function (_event) {
     if (selectionTimeoutRef.current) {
       clearTimeout(selectionTimeoutRef.current);
     }

package/dist/es2019/actions/index.js

@@ -130,7 +130,7 @@ export default class RendererActions {
     }
     return false;
   }
-  annotate(range, annotationId, annotationType) {
+  annotate(range, annotationId, _annotationType) {
     if (!this.doc || !this.schema || !this.schema.marks.annotation) {
       return false;
     }

package/dist/es2019/react/index.js

@@ -278,7 +278,6 @@ export default class ReactSerializer {
     }));
   }
   serializeTextWrapper(content, {
-    index,
     parentInfo
   }) {
     const currentPath = parentInfo && parentInfo.path || [];
@@ -286,7 +285,7 @@ export default class ReactSerializer {
     if (expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true)) {
       this.standaloneBackgroundColorMarks.push(...getStandaloneBackgroundColorMarks(content));
     }
-    return ReactSerializer.buildMarkStructure(content).map((mark, index) => {
+    return ReactSerializer.buildMarkStructure(content).map((mark, _index) => {
       return this.serializeMark({
         mark,
         parentNode: {
@@ -305,7 +304,7 @@ export default class ReactSerializer {
     parentMark
   }) {
     if (!isTextNode(mark)) {
-      const serializeContent = (childMark, index) => this.serializeMark({
+      const serializeContent = (childMark, _index) => this.serializeMark({
         mark: childMark,
         parentNode,
         parentMark: {
@@ -589,7 +588,7 @@ export default class ReactSerializer {
       showAnchorLink: this.appearance !== 'comment' && this.allowHeadingAnchorLinks && !this.disableHeadingIDs && this.headingAnchorSupported(path)
     };
   }
-  getExpandProps(node, path = []) {
+  getExpandProps(node, _path = []) {
     if (!isNestedHeaderLinksEnabled(this.allowHeadingAnchorLinks)) {
       return this.getProps(node);
     }

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

@@ -4,6 +4,8 @@ import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { RendererCssClassName } from '../../consts';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { calcBreakoutWidthCss } from '../utils/breakout';
 const viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
 // Mirrors sizes from https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
 const macroHeights = {
@@ -39,6 +41,25 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
    */
   const viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   const extensionHeight = nodeHeight || viewportSize;
+  if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: options.handleRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: `${RendererCssClassName.EXTENSION} ${options.shadowClassNames} ${centerAlignClass}`,
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+        width: isTopLevel ? calcBreakoutWidthCss(layout) : '100%',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        minHeight: extensionHeight && `${extensionHeight}px`
+      },
+      "data-layout": layout,
+      "data-local-id": localId,
+      "data-testid": "extension--wrapper"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: overflowContainerClass
+    }, content));
+  }
   return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
     width
   }) => /*#__PURE__*/React.createElement("div", {

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

@@ -12,7 +12,7 @@ import { ErrorBoundary } from '../../ui/Renderer/ErrorBoundary';
 import { ACTION_SUBJECT } from '../../analytics/enums';
 import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 const RenderMediaInline = ({
-  rendererAppearance,
+  rendererAppearance: _rendererAppearance,
   clipboardAttrs,
   collection: collectionName,
   eventHandlers,

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

@@ -13,6 +13,8 @@ import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
 import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { calcBreakoutWidthCss } from '../utils/breakout';
 const containerStyles = css({
   // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
@@ -34,7 +36,7 @@ const MultiBodiedExtensionNavigation = ({
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
-const MultiBodiedExtensionWrapper = ({
+const MultiBodiedExtensionWrapperLegacy = ({
   width,
   path,
   layout,
@@ -48,7 +50,7 @@ const MultiBodiedExtensionWrapper = ({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
     style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
     },
     "data-layout": layout,
@@ -58,6 +60,30 @@ const MultiBodiedExtensionWrapper = ({
     className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
   }, children));
 };
+const MultiBodiedExtensionWrapperNext = ({
+  path,
+  layout,
+  children
+}) => {
+  const isTopLevel = path.length < 1;
+  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+
+  // This hierarchy is copied from regular extension (see extension.tsx)
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
+    style: {
+      width: isTopLevel ?
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      calcBreakoutWidthCss(layout) : '100%'
+    },
+    "data-layout": layout,
+    "data-testid": "multiBodiedExtension--wrapper"
+  }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
+  }, children));
+};
 const MultiBodiedExtension = props => {
   var _extensionContext$pri;
   const {
@@ -124,6 +150,19 @@ const MultiBodiedExtension = props => {
 			display: block;
 		}
 	`;
+  if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    return jsx("section", {
+      css: [containerStyles, containerActiveFrameStyles],
+      "data-testid": "multiBodiedExtension--container",
+      "data-multiBodiedExtension-container": true,
+      "data-active-child-index": activeChildIndex,
+      "data-layout": layout,
+      "data-local-id": localId
+    }, jsx(MultiBodiedExtensionWrapperNext, {
+      layout: layout,
+      path: path
+    }, renderContent()));
+  }
   return jsx("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
@@ -133,7 +172,7 @@ const MultiBodiedExtension = props => {
     "data-local-id": localId
   }, jsx(WidthConsumer, null, ({
     width
-  }) => jsx(MultiBodiedExtensionWrapper, {
+  }) => jsx(MultiBodiedExtensionWrapperLegacy, {
     layout: layout,
     width: width,
     path: path

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

@@ -29,10 +29,10 @@ const useMultiBodiedExtensionActions = ({
       getChildrenCount() {
         return children ? children === null || children === void 0 ? void 0 : children.length : 0;
       },
-      removeChild(index) {
+      removeChild(_index) {
         return false;
       },
-      updateParameters(parameters) {
+      updateParameters(_parameters) {
         return false;
       },
       // Ignored via go/ees005

package/dist/es2019/react/utils/breakout.js

@@ -0,0 +1,9 @@
+export const calcBreakoutWidthCss = layout => {
+  if (layout === 'full-width') {
+    return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))';
+  }
+  if (layout === 'wide') {
+    return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))';
+  }
+  return '100%';
+};

package/dist/es2019/text/nodes/date.js

@@ -1,6 +1,6 @@
 import { timestampToIsoFormat } from '@atlaskit/editor-common/utils';
 import { getText } from '../../utils';
-const date = (node, schema) => {
+const date = (node, _schema) => {
   return node.attrs.timestamp ? timestampToIsoFormat(node.attrs.timestamp) : getText(node);
 };
 export default date;

package/dist/es2019/text/nodes/inlineCard.js

@@ -1,5 +1,5 @@
 import { getText } from '../../utils';
-const inlineCard = (node, schema) => {
+const inlineCard = (node, _schema) => {
   var _node$attrs$data;
   return node.attrs.url || ((_node$attrs$data = node.attrs.data) === null || _node$attrs$data === void 0 ? void 0 : _node$attrs$data.url) || getText(node);
 };

package/dist/es2019/text/nodes/mention.js

@@ -1,4 +1,4 @@
-const mention = (node, schema) => {
+const mention = (node, _schema) => {
   if (['all', 'here'].indexOf(node.attrs.id) !== -1) {
     return `@${node.attrs.id}`;
   }

package/dist/es2019/text/nodes/status.js

@@ -1,5 +1,5 @@
 import { getText } from '../../utils';
-const status = (node, schema) => {
+const status = (node, _schema) => {
   return node.attrs.text ? `[ ${node.attrs.text.toUpperCase()} ]` : getText(node);
 };
 export default status;

package/dist/es2019/ui/Expand.js

@@ -193,7 +193,6 @@ function Expand({
   fireAnalyticsEvent,
   localId,
   nestedHeaderIds,
-  rendererAppearance,
   rendererContentMode
 }) {
   const [expanded, setExpanded] = React.useState(false);

package/dist/es2019/ui/ExtensionRenderer.js

@@ -56,7 +56,7 @@ export default function ExtensionRenderer(props) {
 
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleProvider = React.useCallback((name, providerPromise) => {
+  const handleProvider = React.useCallback((_name, providerPromise) => {
     providerPromise && providerPromise.then(provider => {
       if (isMounted.current) {
         setExtensionProvider(provider);

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

@@ -50,6 +50,7 @@ const baseStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.5rem',
   color: `var(--ds-text, ${N800})`,
+  '--ak-editor--full-width-layout-width': `${akEditorFullWidthLayoutWidth}px`,
   [`.${RendererCssClassName.DOCUMENT}::after`]: {
     // we add a clearfix after ak-renderer-document in order to
     // contain internal floats (such as media images that are "wrap-left")

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

@@ -55,7 +55,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 const TABLE_INFO_TIMEOUT = 10000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "124.15.0";
+const packageVersion = "0.0.0-development";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -604,7 +604,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
         lastChild && lastChild.appendChild(createTelepointer());
       }
       const mutateTelepointer = mutations => {
-        mutations.forEach((mutation, index) => {
+        mutations.forEach((mutation, _index) => {
           var _mutation$addedNodes$, _mutation$removedNode;
           if (initialUpdate.current) {
             const oldTelepointer = renderer.querySelector(`#${TELEPOINTER_ID}`);

package/dist/es2019/ui/annotations/contexts/AnnotationManagerContext.js

@@ -450,8 +450,8 @@ export const AnnotationManagerProvider = ({
     const onAnnotationClick = ({
       annotationIds,
       eventTarget,
-      eventTargetType,
-      viewMethod
+      eventTargetType: _eventTargetType,
+      viewMethod: _viewMethod
     }) => {
       dispatch({
         type: 'updateAnnotation',

package/dist/es2019/ui/annotations/element/index.js

@@ -69,7 +69,7 @@ const MarkElement = ({
         } else {
           // TODO: EDITOR-595 - If the preemptive gate returns false, should we track the analytics event?
         }
-      }).catch(error => {
+      }).catch(_error => {
         // TODO: EDITOR-595 - An error occurred while checking the preemptive gate. We should report this error.
       });
     } else {

package/dist/es2019/ui/annotations/hooks/user-selection.js

@@ -23,7 +23,7 @@ export const useUserSelectionRange = props => {
   } = useAnnotationManagerDispatch();
   const lastRangeRef = useRef(null);
   const isAnnotationManagerEnabled = !!annotationManager;
-  const onSelectionChange = useCallback(event => {
+  const onSelectionChange = useCallback(_event => {
     if (selectionTimeoutRef.current) {
       clearTimeout(selectionTimeoutRef.current);
     }

package/dist/esm/actions/index.js

@@ -145,7 +145,7 @@ var RendererActions = /*#__PURE__*/function () {
     }
   }, {
     key: "annotate",
-    value: function annotate(range, annotationId, annotationType) {
+    value: function annotate(range, annotationId, _annotationType) {
       if (!this.doc || !this.schema || !this.schema.marks.annotation) {
         return false;
       }

package/dist/esm/react/index.js

@@ -293,15 +293,14 @@ var ReactSerializer = /*#__PURE__*/function () {
     key: "serializeTextWrapper",
     value: function serializeTextWrapper(content, _ref2) {
       var _this3 = this;
-      var index = _ref2.index,
-        parentInfo = _ref2.parentInfo;
+      var parentInfo = _ref2.parentInfo;
       var currentPath = parentInfo && parentInfo.path || [];
       var nodePosition = parentInfo && parentInfo.pos || 1;
       if (expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true)) {
         var _this$standaloneBackg;
         (_this$standaloneBackg = this.standaloneBackgroundColorMarks).push.apply(_this$standaloneBackg, _toConsumableArray(getStandaloneBackgroundColorMarks(content)));
       }
-      return ReactSerializer.buildMarkStructure(content).map(function (mark, index) {
+      return ReactSerializer.buildMarkStructure(content).map(function (mark, _index) {
         return _this3.serializeMark({
           mark: mark,
           parentNode: {
@@ -322,7 +321,7 @@ var ReactSerializer = /*#__PURE__*/function () {
         parentNode = _ref3.parentNode,
         parentMark = _ref3.parentMark;
       if (!isTextNode(mark)) {
-        var serializeContent = function serializeContent(childMark, index) {
+        var serializeContent = function serializeContent(childMark, _index) {
           return _this4.serializeMark({
             mark: childMark,
             parentNode: parentNode,
@@ -658,7 +657,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     key: "getExpandProps",
     value: function getExpandProps(node) {
       var _this7 = this;
-      var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var _path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       if (!isNestedHeaderLinksEnabled(this.allowHeadingAnchorLinks)) {
         return this.getProps(node);
       }

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

@@ -4,6 +4,8 @@ import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { RendererCssClassName } from '../../consts';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { calcBreakoutWidthCss } from '../utils/breakout';
 var viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
 // Mirrors sizes from https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
 var macroHeights = {
@@ -47,6 +49,25 @@ export var renderExtension = function renderExtension(content, layout) {
    */
   var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   var extensionHeight = nodeHeight || viewportSize;
+  if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: options.handleRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "".concat(RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+        width: isTopLevel ? calcBreakoutWidthCss(layout) : '100%',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        minHeight: extensionHeight && "".concat(extensionHeight, "px")
+      },
+      "data-layout": layout,
+      "data-local-id": localId,
+      "data-testid": "extension--wrapper"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: overflowContainerClass
+    }, content));
+  }
   return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
     var width = _ref2.width;
     return /*#__PURE__*/React.createElement("div", {

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

@@ -18,7 +18,7 @@ import { ErrorBoundary } from '../../ui/Renderer/ErrorBoundary';
 import { ACTION_SUBJECT } from '../../analytics/enums';
 import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 var RenderMediaInline = function RenderMediaInline(_ref) {
-  var rendererAppearance = _ref.rendererAppearance,
+  var _rendererAppearance = _ref.rendererAppearance,
     clipboardAttrs = _ref.clipboardAttrs,
     collectionName = _ref.collection,
     eventHandlers = _ref.eventHandlers,

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

@@ -16,6 +16,8 @@ import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
 import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { calcBreakoutWidthCss } from '../utils/breakout';
 var containerStyles = css({
   // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
@@ -35,7 +37,7 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
-var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
+var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
   var width = _ref3.width,
     path = _ref3.path,
     layout = _ref3.layout,
@@ -48,7 +50,7 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
     },
     "data-layout": layout,
@@ -58,6 +60,29 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
     className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
   }, children));
 };
+var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref4) {
+  var path = _ref4.path,
+    layout = _ref4.layout,
+    children = _ref4.children;
+  var isTopLevel = path.length < 1;
+  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+
+  // This hierarchy is copied from regular extension (see extension.tsx)
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
+    style: {
+      width: isTopLevel ?
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      calcBreakoutWidthCss(layout) : '100%'
+    },
+    "data-layout": layout,
+    "data-testid": "multiBodiedExtension--wrapper"
+  }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
+  }, children));
+};
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var _extensionContext$pri;
   var children = props.children,
@@ -122,6 +147,19 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   // make the frame visible
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   var containerActiveFrameStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
+  if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    return jsx("section", {
+      css: [containerStyles, containerActiveFrameStyles],
+      "data-testid": "multiBodiedExtension--container",
+      "data-multiBodiedExtension-container": true,
+      "data-active-child-index": activeChildIndex,
+      "data-layout": layout,
+      "data-local-id": localId
+    }, jsx(MultiBodiedExtensionWrapperNext, {
+      layout: layout,
+      path: path
+    }, renderContent()));
+  }
   return jsx("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
@@ -129,9 +167,9 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     "data-active-child-index": activeChildIndex,
     "data-layout": layout,
     "data-local-id": localId
-  }, jsx(WidthConsumer, null, function (_ref4) {
-    var width = _ref4.width;
-    return jsx(MultiBodiedExtensionWrapper, {
+  }, jsx(WidthConsumer, null, function (_ref5) {
+    var width = _ref5.width;
+    return jsx(MultiBodiedExtensionWrapperLegacy, {
       layout: layout,
       width: width,
       path: path

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

@@ -31,10 +31,10 @@ var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_re
       getChildrenCount: function getChildrenCount() {
         return children ? children === null || children === void 0 ? void 0 : children.length : 0;
       },
-      removeChild: function removeChild(index) {
+      removeChild: function removeChild(_index) {
         return false;
       },
-      updateParameters: function updateParameters(parameters) {
+      updateParameters: function updateParameters(_parameters) {
         return false;
       },
       // Ignored via go/ees005

package/dist/esm/react/utils/breakout.js

@@ -0,0 +1,9 @@
+export var calcBreakoutWidthCss = function calcBreakoutWidthCss(layout) {
+  if (layout === 'full-width') {
+    return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))';
+  }
+  if (layout === 'wide') {
+    return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))';
+  }
+  return '100%';
+};

package/dist/esm/text/nodes/date.js

@@ -1,6 +1,6 @@
 import { timestampToIsoFormat } from '@atlaskit/editor-common/utils';
 import { getText } from '../../utils';
-var date = function date(node, schema) {
+var date = function date(node, _schema) {
   return node.attrs.timestamp ? timestampToIsoFormat(node.attrs.timestamp) : getText(node);
 };
 export default date;

package/dist/esm/text/nodes/inlineCard.js

@@ -1,5 +1,5 @@
 import { getText } from '../../utils';
-var inlineCard = function inlineCard(node, schema) {
+var inlineCard = function inlineCard(node, _schema) {
   var _node$attrs$data;
   return node.attrs.url || ((_node$attrs$data = node.attrs.data) === null || _node$attrs$data === void 0 ? void 0 : _node$attrs$data.url) || getText(node);
 };

package/dist/esm/text/nodes/mention.js

@@ -1,4 +1,4 @@
-var mention = function mention(node, schema) {
+var mention = function mention(node, _schema) {
   if (['all', 'here'].indexOf(node.attrs.id) !== -1) {
     return "@".concat(node.attrs.id);
   }

package/dist/esm/text/nodes/status.js

@@ -1,5 +1,5 @@
 import { getText } from '../../utils';
-var status = function status(node, schema) {
+var status = function status(node, _schema) {
   return node.attrs.text ? "[ ".concat(node.attrs.text.toUpperCase(), " ]") : getText(node);
 };
 export default status;

package/dist/esm/ui/Expand.js

@@ -193,7 +193,6 @@ function Expand(_ref2) {
     fireAnalyticsEvent = _ref2.fireAnalyticsEvent,
     localId = _ref2.localId,
     nestedHeaderIds = _ref2.nestedHeaderIds,
-    rendererAppearance = _ref2.rendererAppearance,
     rendererContentMode = _ref2.rendererContentMode;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),

package/dist/esm/ui/ExtensionRenderer.js

@@ -60,7 +60,7 @@ export default function ExtensionRenderer(props) {
 
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  var handleProvider = React.useCallback(function (name, providerPromise) {
+  var handleProvider = React.useCallback(function (_name, providerPromise) {
     providerPromise && providerPromise.then(function (provider) {
       if (isMounted.current) {
         setExtensionProvider(provider);

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

@@ -51,7 +51,8 @@ var baseStyles = css((_css = {
   fontSize: 'var(--ak-renderer-base-font-size)',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.5rem',
-  color: "var(--ds-text, ".concat(N800, ")")
+  color: "var(--ds-text, ".concat(N800, ")"),
+  '--ak-editor--full-width-layout-width': "".concat(akEditorFullWidthLayoutWidth, "px")
 }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, ".".concat(RendererCssClassName.DOCUMENT, "::after"), {
   // we add a clearfix after ak-renderer-document in order to
   // contain internal floats (such as media images that are "wrap-left")

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

@@ -60,7 +60,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.15.0";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -607,7 +607,7 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
         lastChild && lastChild.appendChild(createTelepointer());
       }
       var mutateTelepointer = function mutateTelepointer(mutations) {
-        mutations.forEach(function (mutation, index) {
+        mutations.forEach(function (mutation, _index) {
           var _mutation$addedNodes$, _mutation$removedNode;
           if (initialUpdate.current) {
             var oldTelepointer = _renderer.querySelector("#".concat(TELEPOINTER_ID));

package/dist/esm/ui/annotations/contexts/AnnotationManagerContext.js

@@ -442,8 +442,8 @@ export var AnnotationManagerProvider = function AnnotationManagerProvider(_ref)
     var onAnnotationClick = function onAnnotationClick(_ref2) {
       var annotationIds = _ref2.annotationIds,
         eventTarget = _ref2.eventTarget,
-        eventTargetType = _ref2.eventTargetType,
-        viewMethod = _ref2.viewMethod;
+        _eventTargetType = _ref2.eventTargetType,
+        _viewMethod = _ref2.viewMethod;
       dispatch({
         type: 'updateAnnotation',
         data: {

package/dist/esm/ui/annotations/element/index.js

@@ -66,7 +66,7 @@ var MarkElement = function MarkElement(_ref) {
         } else {
           // TODO: EDITOR-595 - If the preemptive gate returns false, should we track the analytics event?
         }
-      }).catch(function (error) {
+      }).catch(function (_error) {
         // TODO: EDITOR-595 - An error occurred while checking the preemptive gate. We should report this error.
       });
     } else {

package/dist/esm/ui/annotations/hooks/user-selection.js

@@ -16,7 +16,7 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
     annotationManager = _useAnnotationManager.annotationManager;
   var lastRangeRef = useRef(null);
   var isAnnotationManagerEnabled = !!annotationManager;
-  var onSelectionChange = useCallback(function (event) {
+  var onSelectionChange = useCallback(function (_event) {
     if (selectionTimeoutRef.current) {
       clearTimeout(selectionTimeoutRef.current);
     }

package/dist/types/actions/index.d.ts

@@ -49,7 +49,7 @@ export default class RendererActions implements RendererActionsOptions, Annotati
         step: RemoveNodeMarkStep | RemoveMarkStep;
         doc: JSONDocNode;
     };
-    annotate(range: Range, annotationId: string, annotationType: 'inlineComment'): AnnotationActionResult;
+    annotate(range: Range, annotationId: string, _annotationType: 'inlineComment'): AnnotationActionResult;
     isValidAnnotationRange(range: Range | null): boolean;
     isRangeAnnotatable(range: Range | null): boolean;
     /**

package/dist/types/analytics/events.d.ts

@@ -142,6 +142,6 @@ export type MediaRenderErrorEvent = UIAEP<ACTION.ERRORED, ACTION_SUBJECT.RENDERE
     external?: boolean;
     reason: string;
 }>;
-export type AnalyticsEventPayload<T = void> = RendererStartAEP | RendererRenderedAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | HoverLabelAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | TableRendererHeightInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP | MediaRenderErrorEvent;
+export type AnalyticsEventPayload<_T = void> = RendererStartAEP | RendererRenderedAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | HoverLabelAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | TableRendererHeightInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP | MediaRenderErrorEvent;
 export type FireAnalyticsCallback = <T = void>(payload: AnalyticsEventPayload<T>) => void | undefined;
 export {};

package/dist/types/react/utils/breakout.d.ts

@@ -0,0 +1 @@
+export declare const calcBreakoutWidthCss: (layout: "full-width" | "wide" | "default") => "100%" | "min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))" | "min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))";

package/dist/types-ts4.5/actions/index.d.ts

@@ -49,7 +49,7 @@ export default class RendererActions implements RendererActionsOptions, Annotati
         step: RemoveNodeMarkStep | RemoveMarkStep;
         doc: JSONDocNode;
     };
-    annotate(range: Range, annotationId: string, annotationType: 'inlineComment'): AnnotationActionResult;
+    annotate(range: Range, annotationId: string, _annotationType: 'inlineComment'): AnnotationActionResult;
     isValidAnnotationRange(range: Range | null): boolean;
     isRangeAnnotatable(range: Range | null): boolean;
     /**

package/dist/types-ts4.5/analytics/events.d.ts

@@ -142,6 +142,6 @@ export type MediaRenderErrorEvent = UIAEP<ACTION.ERRORED, ACTION_SUBJECT.RENDERE
     external?: boolean;
     reason: string;
 }>;
-export type AnalyticsEventPayload<T = void> = RendererStartAEP | RendererRenderedAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | HoverLabelAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | TableRendererHeightInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP | MediaRenderErrorEvent;
+export type AnalyticsEventPayload<_T = void> = RendererStartAEP | RendererRenderedAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | HoverLabelAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | TableRendererHeightInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP | MediaRenderErrorEvent;
 export type FireAnalyticsCallback = <T = void>(payload: AnalyticsEventPayload<T>) => void | undefined;
 export {};

package/dist/types-ts4.5/react/utils/breakout.d.ts

@@ -0,0 +1 @@
+export declare const calcBreakoutWidthCss: (layout: "full-width" | "wide" | "default") => "100%" | "min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))" | "min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "124.15.1",
+	"version": "124.16.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -54,13 +54,13 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/react-ufo": "^4.15.0",
-		"@atlaskit/smart-card": "^43.7.0",
+		"@atlaskit/smart-card": "^43.8.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.38.0",
-		"@atlaskit/tokens": "^8.0.0",
-		"@atlaskit/tooltip": "^20.9.0",
+		"@atlaskit/tmp-editor-statsig": "^13.39.0",
+		"@atlaskit/tokens": "^8.1.0",
+		"@atlaskit/tooltip": "^20.10.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -72,7 +72,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.32.0",
+		"@atlaskit/editor-common": "^110.33.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",