@atlaskit/renderer 109.1.0 → 109.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/renderer
 
+## 109.1.1
+
+### Patch Changes
+
+- [#62765](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/62765) [`ec6a2bbae20e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ec6a2bbae20e) - ED-21606: Width options support for MBE renderer and adding back edit option on toolbar
+
 ## 109.1.0
 
 ### Minor Changes

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

@@ -14,7 +14,11 @@ var _colors = require("@atlaskit/theme/colors");
 var _react2 = _interopRequireWildcard(require("react"));
 var _extension = require("./extension");
 var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRenderer"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _consts = require("../../consts");
+var _utils = require("@atlaskit/editor-common/utils");
 var _templateObject, _templateObject2;
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -69,40 +73,51 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     updateActiveChild: updateActiveChild,
     children: children
   });
-  var containerCSS = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    border: 1px solid ", ";\n    min-height: 100px;\n\n    .multiBodiedExtension--frames > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), "var(--ds-border, ".concat(_colors.N30, ")"), activeChildIndex + 1, "var(--ds-border, ".concat(_colors.N50, ")"));
+  var containerCSS = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-height: 100px;\n\n    .multiBodiedExtension--frames > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), activeChildIndex + 1, "var(--ds-border, ".concat(_colors.N50, ")"));
+  var isTopLevel = path.length < 1;
+  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   return (0, _react.jsx)("section", {
     className: "multiBodiedExtension--container",
     css: containerCSS,
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
-  }, (0, _react.jsx)("nav", {
-    className: "multiBodiedExtension-navigation",
-    css: navigationCSS,
-    "data-testid": "multiBodiedExtension-navigation"
-  }, (0, _react.jsx)(_ExtensionRenderer.default, (0, _extends2.default)({}, props, {
-    actions: actions,
-    type: "multiBodiedExtension"
-  }), function (_ref2) {
-    var result = _ref2.result;
-    try {
-      if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {
-        // Return the content directly if it's a valid JSX.Element
-        return (0, _extension.renderExtension)(result, layout, {
-          isTopLevel: path.length < 1
-        });
+  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref2) {
+    var width = _ref2.width;
+    return (0, _react.jsx)("div", {
+      className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
+      style: {
+        width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
+      },
+      "data-layout": layout
+    }, (0, _react.jsx)("nav", {
+      className: "multiBodiedExtension-navigation",
+      css: navigationCSS,
+      "data-testid": "multiBodiedExtension-navigation"
+    }, (0, _react.jsx)(_ExtensionRenderer.default, (0, _extends2.default)({}, props, {
+      actions: actions,
+      type: "multiBodiedExtension"
+    }), function (_ref3) {
+      var result = _ref3.result;
+      try {
+        if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {
+          // Return the content directly if it's a valid JSX.Element
+          return (0, _extension.renderExtension)(result, layout, {
+            isTopLevel: path.length < 1
+          });
+        }
+      } catch (e) {
+        /** We don't want this error to block renderer */
+        /** We keep rendering the default content */
       }
-    } catch (e) {
-      /** We don't want this error to block renderer */
-      /** We keep rendering the default content */
-    }
 
-    // Always return default content if anything goes wrong
-    return (0, _extension.renderExtension)(children, layout, {
-      isTopLevel: path.length < 1
-    });
-  })), (0, _react.jsx)("article", {
-    className: "multiBodiedExtension--frames",
-    "data-testid": "multiBodiedExtension--frames"
-  }, children));
+      // Always return default content if anything goes wrong
+      return (0, _extension.renderExtension)(children, layout, {
+        isTopLevel: path.length < 1
+      });
+    })), (0, _react.jsx)("article", {
+      className: "multiBodiedExtension--frames",
+      "data-testid": "multiBodiedExtension--frames"
+    }, children));
+  }));
 };
 var _default = exports.default = MultiBodiedExtension;

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

@@ -54,7 +54,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.1.0";
+var packageVersion = "109.1.1";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -1,11 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /** @jsx jsx */
 
 import { jsx, css } from '@emotion/react';
-import { N30, N40, N50 } from '@atlaskit/theme/colors';
+import { N40, N50 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
 import { renderExtension } from './extension';
 import ExtensionRenderer from '../../ui/ExtensionRenderer';
+import { WidthConsumer } from '@atlaskit/editor-common/ui';
+import { RendererCssClassName } from '../../consts';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 const useMultiBodiedExtensionActions = ({
   updateActiveChild,
   children
@@ -68,7 +72,6 @@ const MultiBodiedExtension = props => {
     children
   });
   const containerCSS = css`
-    border: 1px solid ${`var(--ds-border, ${N30})`};
     min-height: 100px;
 
     .multiBodiedExtension--frames > [data-extension-frame='true'] {
@@ -82,11 +85,21 @@ const MultiBodiedExtension = props => {
       min-height: 100px;
     }
   `;
+  const isTopLevel = path.length < 1;
+  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   return jsx("section", {
     className: "multiBodiedExtension--container",
     css: containerCSS,
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
+  }, jsx(WidthConsumer, null, ({
+    width
+  }) => jsx("div", {
+    className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
+    style: {
+      width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
+    },
+    "data-layout": layout
   }, jsx("nav", {
     className: "multiBodiedExtension-navigation",
     css: navigationCSS,
@@ -116,6 +129,6 @@ const MultiBodiedExtension = props => {
   })), jsx("article", {
     className: "multiBodiedExtension--frames",
     "data-testid": "multiBodiedExtension--frames"
-  }, children));
+  }, children))));
 };
 export default MultiBodiedExtension;

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

@@ -35,7 +35,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.1.0";
+const packageVersion = "109.1.1";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -2,13 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /** @jsx jsx */
 
 import { jsx, css } from '@emotion/react';
-import { N30, N40, N50 } from '@atlaskit/theme/colors';
+import { N40, N50 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
 import { renderExtension } from './extension';
 import ExtensionRenderer from '../../ui/ExtensionRenderer';
+import { WidthConsumer } from '@atlaskit/editor-common/ui';
+import { RendererCssClassName } from '../../consts';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
   var updateActiveChild = _ref.updateActiveChild,
     children = _ref.children;
@@ -60,40 +64,51 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     updateActiveChild: updateActiveChild,
     children: children
   });
-  var containerCSS = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    min-height: 100px;\n\n    .multiBodiedExtension--frames > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), "var(--ds-border, ".concat(N30, ")"), activeChildIndex + 1, "var(--ds-border, ".concat(N50, ")"));
+  var containerCSS = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-height: 100px;\n\n    .multiBodiedExtension--frames > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), activeChildIndex + 1, "var(--ds-border, ".concat(N50, ")"));
+  var isTopLevel = path.length < 1;
+  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   return jsx("section", {
     className: "multiBodiedExtension--container",
     css: containerCSS,
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
-  }, jsx("nav", {
-    className: "multiBodiedExtension-navigation",
-    css: navigationCSS,
-    "data-testid": "multiBodiedExtension-navigation"
-  }, jsx(ExtensionRenderer, _extends({}, props, {
-    actions: actions,
-    type: "multiBodiedExtension"
-  }), function (_ref2) {
-    var result = _ref2.result;
-    try {
-      if (result && /*#__PURE__*/React.isValidElement(result)) {
-        // Return the content directly if it's a valid JSX.Element
-        return renderExtension(result, layout, {
-          isTopLevel: path.length < 1
-        });
+  }, jsx(WidthConsumer, null, function (_ref2) {
+    var width = _ref2.width;
+    return jsx("div", {
+      className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
+      style: {
+        width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
+      },
+      "data-layout": layout
+    }, jsx("nav", {
+      className: "multiBodiedExtension-navigation",
+      css: navigationCSS,
+      "data-testid": "multiBodiedExtension-navigation"
+    }, jsx(ExtensionRenderer, _extends({}, props, {
+      actions: actions,
+      type: "multiBodiedExtension"
+    }), function (_ref3) {
+      var result = _ref3.result;
+      try {
+        if (result && /*#__PURE__*/React.isValidElement(result)) {
+          // Return the content directly if it's a valid JSX.Element
+          return renderExtension(result, layout, {
+            isTopLevel: path.length < 1
+          });
+        }
+      } catch (e) {
+        /** We don't want this error to block renderer */
+        /** We keep rendering the default content */
       }
-    } catch (e) {
-      /** We don't want this error to block renderer */
-      /** We keep rendering the default content */
-    }
 
-    // Always return default content if anything goes wrong
-    return renderExtension(children, layout, {
-      isTopLevel: path.length < 1
-    });
-  })), jsx("article", {
-    className: "multiBodiedExtension--frames",
-    "data-testid": "multiBodiedExtension--frames"
-  }, children));
+      // Always return default content if anything goes wrong
+      return renderExtension(children, layout, {
+        isTopLevel: path.length < 1
+      });
+    })), jsx("article", {
+      className: "multiBodiedExtension--frames",
+      "data-testid": "multiBodiedExtension--frames"
+    }, children));
+  }));
 };
 export default MultiBodiedExtension;

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

@@ -45,7 +45,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.1.0";
+var packageVersion = "109.1.1";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/package.json

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