@atlaskit/renderer 108.11.0 → 108.11.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 108.11.2
+
+### Patch Changes
+
+- [`32f9d24dcdb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/32f9d24dcdb) - Improve table renderer resizing performance.
+
+## 108.11.1
+
+### Patch Changes
+
+- [`39099193642`](https://bitbucket.org/atlassian/atlassian-frontend/commits/39099193642) - Cleanup breakout styling when table has fragment mark ff
+
 ## 108.11.0
 
 ### Minor Changes

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

@@ -17,6 +17,7 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     tableNode = _ref.tableNode,
     rendererAppearance = _ref.rendererAppearance;
   return /*#__PURE__*/_react.default.createElement("table", {
+    "data-testid": "renderer-table",
     "data-number-column": isNumberColumnEnabled,
     ref: innerRef
   }, /*#__PURE__*/_react.default.createElement(_colgroup.Colgroup, {

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

@@ -27,6 +27,9 @@ var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _sticky = require("./table/sticky");
 var _table = require("./table/table");
 var _appearance = require("../utils/appearance");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
@@ -126,7 +129,9 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      stickyMode: 'none'
+      stickyMode: 'none',
+      wrapperWidth: 0,
+      headerRowHeight: 0
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "stickyHeaderRef", /*#__PURE__*/_react.default.createRef());
@@ -134,6 +139,33 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "stickyWrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "overflowParent", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resizeObserver", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyResizerChange", function (entries) {
+      var wrapperWidth = _this.state.wrapperWidth;
+      var headerRowHeight = _this.state.headerRowHeight;
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          if (entry.target === _this.wrapperRef.current) {
+            wrapperWidth = entry.contentRect.width;
+          } else if (entry.target === _this.stickyHeaderRef.current) {
+            headerRowHeight = Math.round(entry.contentRect.height);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      if (headerRowHeight !== _this.state.headerRowHeight || wrapperWidth !== _this.state.wrapperWidth) {
+        _this.setState({
+          wrapperWidth: wrapperWidth,
+          headerRowHeight: headerRowHeight
+        });
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillUnmount", function () {
       if (_this.overflowParent) {
         _this.overflowParent.removeEventListener('scroll', _this.onScroll);
@@ -141,6 +173,9 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
       if (_this.nextFrame) {
         cancelAnimationFrame(_this.nextFrame);
       }
+      if (_this.resizeObserver) {
+        _this.resizeObserver.disconnect();
+      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getScrollTop", function () {
       var stickyHeaders = _this.props.stickyHeaders;
@@ -197,6 +232,13 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(TableContainer, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.resizeObserver = new ResizeObserver(this.applyResizerChange);
+      if (this.wrapperRef.current) {
+        this.resizeObserver.observe(this.wrapperRef.current);
+      }
+      if (this.stickyHeaderRef.current) {
+        this.resizeObserver.observe(this.stickyHeaderRef.current);
+      }
       if (this.props.stickyHeaders) {
         this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current);
         this.overflowParent.addEventListener('scroll', this.onScroll);
@@ -243,11 +285,6 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
           return undefined;
       }
     }
-  }, {
-    key: "headerRowHeight",
-    get: function get() {
-      return this.stickyHeaderRef.current ? this.stickyHeaderRef.current.offsetHeight : 0;
-    }
   }, {
     key: "render",
     value: function render() {
@@ -274,7 +311,6 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
       if (canUseLinelength(rendererAppearance) && tableWidth !== 'inherit' && tableWidth > lineLength) {
         left = lineLength / 2 - tableWidth / 2;
       }
-      var wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
       var children = _react.default.Children.toArray(this.props.children);
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
@@ -287,9 +323,9 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         left: left,
         mode: stickyMode,
         innerRef: this.stickyWrapperRef,
-        wrapperWidth: wrapperWidth,
+        wrapperWidth: this.state.wrapperWidth,
         columnWidths: columnWidths,
-        rowHeight: this.headerRowHeight,
+        rowHeight: this.state.headerRowHeight,
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
@@ -309,9 +345,9 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         top: this.stickyTop,
         mode: stickyMode,
         innerRef: this.stickyWrapperRef,
-        wrapperWidth: wrapperWidth,
+        wrapperWidth: this.state.wrapperWidth,
         columnWidths: columnWidths,
-        rowHeight: this.headerRowHeight,
+        rowHeight: this.state.headerRowHeight,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {

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

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.11.0";
+var packageVersion = "108.11.2";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -351,7 +351,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         }
       };
       try {
-        var _featureFlags$feature, _featureFlags$feature2, _this$featureFlags2, _this$featureFlags2$f, _this$featureFlags2$f2;
+        var _featureFlags$feature, _this$featureFlags2, _this$featureFlags2$f, _this$featureFlags2$f2;
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
         var _renderDocument = (0, _.renderDocument)(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
           result = _renderDocument.result,
@@ -378,8 +378,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowWrapCodeBlock: allowWrapCodeBlock,
           allowCustomPanels: allowCustomPanels,
           allowPlaceholderText: allowPlaceholderText,
-          useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
-          useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+          useBlockRenderForCodeBlock: (_featureFlags$feature = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView
@@ -402,7 +401,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         });
         return (0, _react2.jsx)(_react.Fragment, null, reRenderTracking, rendererResult);
       } catch (e) {
-        var _featureFlags$feature3, _featureFlags$feature4;
+        var _featureFlags$feature2;
         if (onError) {
           onError(e);
         }
@@ -413,8 +412,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowPlaceholderText: allowPlaceholderText,
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
-          useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature3 = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature3 !== void 0 ? _featureFlags$feature3 : true,
-          useBlockRenderForCodeBlock: (_featureFlags$feature4 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature4 !== void 0 ? _featureFlags$feature4 : true,
+          useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
           onClick: handleWrapperOnClick
         }, (0, _react2.jsx)(_ui.UnsupportedBlock, null));
       }
@@ -468,7 +466,6 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     children = props.children,
     onClick = props.onClick,
     onMouseDown = props.onMouseDown,
-    useFragmentMarkBreakoutWidthStylingFix = props.useFragmentMarkBreakoutWidthStylingFix,
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock;
   return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper"
@@ -482,7 +479,6 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
       appearance: appearance,
       allowNestedHeaderLinks: allowNestedHeaderLinks,
       allowColumnSorting: !!allowColumnSorting,
-      useFragmentMarkBreakoutWidthStylingFix: useFragmentMarkBreakoutWidthStylingFix,
       useBlockRenderForCodeBlock: useBlockRenderForCodeBlock
     })
   }, children)));

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

@@ -20,7 +20,7 @@ var _consts = require("../../consts");
 var _headingAnchor = require("../../react/nodes/heading-anchor");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
 var _table = require("../../react/nodes/table");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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; }
 var FullPagePadding = 32;
@@ -89,11 +89,8 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   }
   return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n\n    ", "\n  "])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _table.isTableResizingEnabled)(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
-var breakoutWidthStyle = function breakoutWidthStyle(useFragmentMarkBreakoutWidthStylingFix) {
-  if (useFragmentMarkBreakoutWidthStylingFix) {
-    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n      *:not([data-mark-type='fragment'])\n        .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n\n      [data-mark-type='fragment']\n        *\n        .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n    "])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
-  }
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n  "])), _styles.TableSharedCssClassName.TABLE_CONTAINER);
+var breakoutWidthStyle = function breakoutWidthStyle() {
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    *:not([data-mark-type='fragment'])\n      .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    [data-mark-type='fragment'] * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n  "])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 };
 var rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
@@ -102,7 +99,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
       theme: theme
     };
     var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
-    return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
+    return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, #B8C7E0)"
     })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), (0, _components.themed)({
@@ -114,7 +111,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), "var(--ds-border-radius-100, 3px)", (0, _components.themed)({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, ".concat(colors.DN600, ")")
-    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(wrapperProps.useFragmentMarkBreakoutWidthStylingFix), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
+    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
       light: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
       dark: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
     })(themeProps), (0, _components.themed)({

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.11.0",
+	"version": "108.11.2",
 	"sideEffects": false
 }

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

@@ -11,6 +11,7 @@ export const Table = /*#__PURE__*/React.memo(({
   rendererAppearance
 }) => {
   return /*#__PURE__*/React.createElement("table", {
+    "data-testid": "renderer-table",
     "data-number-column": isNumberColumnEnabled,
     ref: innerRef
   }, /*#__PURE__*/React.createElement(Colgroup, {

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

@@ -91,7 +91,9 @@ export class TableContainer extends React.Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {
-      stickyMode: 'none'
+      stickyMode: 'none',
+      wrapperWidth: 0,
+      headerRowHeight: 0
     });
     _defineProperty(this, "tableRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "stickyHeaderRef", /*#__PURE__*/React.createRef());
@@ -99,6 +101,24 @@ export class TableContainer extends React.Component {
     _defineProperty(this, "stickyWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "overflowParent", null);
+    _defineProperty(this, "resizeObserver", null);
+    _defineProperty(this, "applyResizerChange", entries => {
+      let wrapperWidth = this.state.wrapperWidth;
+      let headerRowHeight = this.state.headerRowHeight;
+      for (const entry of entries) {
+        if (entry.target === this.wrapperRef.current) {
+          wrapperWidth = entry.contentRect.width;
+        } else if (entry.target === this.stickyHeaderRef.current) {
+          headerRowHeight = Math.round(entry.contentRect.height);
+        }
+      }
+      if (headerRowHeight !== this.state.headerRowHeight || wrapperWidth !== this.state.wrapperWidth) {
+        this.setState({
+          wrapperWidth,
+          headerRowHeight
+        });
+      }
+    });
     _defineProperty(this, "componentWillUnmount", () => {
       if (this.overflowParent) {
         this.overflowParent.removeEventListener('scroll', this.onScroll);
@@ -106,6 +126,9 @@ export class TableContainer extends React.Component {
       if (this.nextFrame) {
         cancelAnimationFrame(this.nextFrame);
       }
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
     });
     _defineProperty(this, "getScrollTop", () => {
       const {
@@ -161,6 +184,13 @@ export class TableContainer extends React.Component {
     });
   }
   componentDidMount() {
+    this.resizeObserver = new ResizeObserver(this.applyResizerChange);
+    if (this.wrapperRef.current) {
+      this.resizeObserver.observe(this.wrapperRef.current);
+    }
+    if (this.stickyHeaderRef.current) {
+      this.resizeObserver.observe(this.stickyHeaderRef.current);
+    }
     if (this.props.stickyHeaders) {
       this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
       this.overflowParent.addEventListener('scroll', this.onScroll);
@@ -201,9 +231,6 @@ export class TableContainer extends React.Component {
         return undefined;
     }
   }
-  get headerRowHeight() {
-    return this.stickyHeaderRef.current ? this.stickyHeaderRef.current.offsetHeight : 0;
-  }
   render() {
     const {
       isNumberColumnEnabled,
@@ -231,7 +258,6 @@ export class TableContainer extends React.Component {
     if (canUseLinelength(rendererAppearance) && tableWidth !== 'inherit' && tableWidth > lineLength) {
       left = lineLength / 2 - tableWidth / 2;
     }
-    const wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
     const children = React.Children.toArray(this.props.children);
     return /*#__PURE__*/React.createElement(React.Fragment, null, !getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
       isNumberColumnEnabled: isNumberColumnEnabled,
@@ -244,9 +270,9 @@ export class TableContainer extends React.Component {
       left: left,
       mode: stickyMode,
       innerRef: this.stickyWrapperRef,
-      wrapperWidth: wrapperWidth,
+      wrapperWidth: this.state.wrapperWidth,
       columnWidths: columnWidths,
-      rowHeight: this.headerRowHeight,
+      rowHeight: this.state.headerRowHeight,
       rendererAppearance: rendererAppearance
     }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
       className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
@@ -266,9 +292,9 @@ export class TableContainer extends React.Component {
       top: this.stickyTop,
       mode: stickyMode,
       innerRef: this.stickyWrapperRef,
-      wrapperWidth: wrapperWidth,
+      wrapperWidth: this.state.wrapperWidth,
       columnWidths: columnWidths,
-      rowHeight: this.headerRowHeight,
+      rowHeight: this.state.headerRowHeight,
       tableNode: tableNode,
       rendererAppearance: rendererAppearance
     }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {

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

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.11.0";
+const packageVersion = "108.11.2";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
@@ -327,7 +327,7 @@ export class Renderer extends PureComponent {
       }
     };
     try {
-      var _featureFlags$feature, _featureFlags$feature2, _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
+      var _featureFlags$feature, _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
       const schema = this.getSchema(this.props.schema, this.props.adfStage);
       const {
         result,
@@ -353,8 +353,7 @@ export class Renderer extends PureComponent {
         allowWrapCodeBlock: allowWrapCodeBlock,
         allowCustomPanels: allowCustomPanels,
         allowPlaceholderText: allowPlaceholderText,
-        useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
-        useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+        useBlockRenderForCodeBlock: (_featureFlags$feature = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,
         onMouseDown: this.onMouseDownEditView
@@ -377,7 +376,7 @@ export class Renderer extends PureComponent {
       });
       return jsx(Fragment, null, reRenderTracking, rendererResult);
     } catch (e) {
-      var _featureFlags$feature3, _featureFlags$feature4;
+      var _featureFlags$feature2;
       if (onError) {
         onError(e);
       }
@@ -388,8 +387,7 @@ export class Renderer extends PureComponent {
         allowPlaceholderText: allowPlaceholderText,
         allowColumnSorting: allowColumnSorting,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
-        useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature3 = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature3 !== void 0 ? _featureFlags$feature3 : true,
-        useBlockRenderForCodeBlock: (_featureFlags$feature4 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature4 !== void 0 ? _featureFlags$feature4 : true,
+        useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
         onClick: handleWrapperOnClick
       }, jsx(UnsupportedBlock, null));
     }
@@ -439,7 +437,6 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     children,
     onClick,
     onMouseDown,
-    useFragmentMarkBreakoutWidthStylingFix,
     useBlockRenderForCodeBlock
   } = props;
   return jsx(WidthProvider, {
@@ -454,7 +451,6 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
       appearance,
       allowNestedHeaderLinks,
       allowColumnSorting: !!allowColumnSorting,
-      useFragmentMarkBreakoutWidthStylingFix,
       useBlockRenderForCodeBlock
     })
   }, children)));

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

@@ -282,25 +282,15 @@ const fullWidthStyles = ({
     `}
   `;
 };
-const breakoutWidthStyle = useFragmentMarkBreakoutWidthStylingFix => {
-  if (useFragmentMarkBreakoutWidthStylingFix) {
-    return css`
-      *:not([data-mark-type='fragment'])
-        .${TableSharedCssClassName.TABLE_CONTAINER} {
-        width: 100% !important;
-        left: 0 !important;
-      }
-
-      [data-mark-type='fragment']
-        *
-        .${TableSharedCssClassName.TABLE_CONTAINER} {
-        width: 100% !important;
-        left: 0 !important;
-      }
-    `;
-  }
+const breakoutWidthStyle = () => {
   return css`
-    * .${TableSharedCssClassName.TABLE_CONTAINER} {
+    *:not([data-mark-type='fragment'])
+      .${TableSharedCssClassName.TABLE_CONTAINER} {
+      width: 100% !important;
+      left: 0 !important;
+    }
+
+    [data-mark-type='fragment'] * .${TableSharedCssClassName.TABLE_CONTAINER} {
       width: 100% !important;
       left: 0 !important;
     }
@@ -474,7 +464,7 @@ export const rendererStyles = wrapperProps => theme => {
 
       /* Breakout for tables and extensions */
       .${RendererCssClassName.DOCUMENT} > {
-        ${breakoutWidthStyle(wrapperProps.useFragmentMarkBreakoutWidthStylingFix)}
+        ${breakoutWidthStyle()}
 
         * .${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER} {
           overflow-x: auto;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.11.0",
+	"version": "108.11.2",
 	"sideEffects": false
 }

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

@@ -10,6 +10,7 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     tableNode = _ref.tableNode,
     rendererAppearance = _ref.rendererAppearance;
   return /*#__PURE__*/React.createElement("table", {
+    "data-testid": "renderer-table",
     "data-number-column": isNumberColumnEnabled,
     ref: innerRef
   }, /*#__PURE__*/React.createElement(Colgroup, {

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

@@ -6,6 +6,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React from 'react';
@@ -119,7 +122,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "state", {
-      stickyMode: 'none'
+      stickyMode: 'none',
+      wrapperWidth: 0,
+      headerRowHeight: 0
     });
     _defineProperty(_assertThisInitialized(_this), "tableRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "stickyHeaderRef", /*#__PURE__*/React.createRef());
@@ -127,6 +132,33 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "stickyWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "wrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "overflowParent", null);
+    _defineProperty(_assertThisInitialized(_this), "resizeObserver", null);
+    _defineProperty(_assertThisInitialized(_this), "applyResizerChange", function (entries) {
+      var wrapperWidth = _this.state.wrapperWidth;
+      var headerRowHeight = _this.state.headerRowHeight;
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          if (entry.target === _this.wrapperRef.current) {
+            wrapperWidth = entry.contentRect.width;
+          } else if (entry.target === _this.stickyHeaderRef.current) {
+            headerRowHeight = Math.round(entry.contentRect.height);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      if (headerRowHeight !== _this.state.headerRowHeight || wrapperWidth !== _this.state.wrapperWidth) {
+        _this.setState({
+          wrapperWidth: wrapperWidth,
+          headerRowHeight: headerRowHeight
+        });
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
       if (_this.overflowParent) {
         _this.overflowParent.removeEventListener('scroll', _this.onScroll);
@@ -134,6 +166,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       if (_this.nextFrame) {
         cancelAnimationFrame(_this.nextFrame);
       }
+      if (_this.resizeObserver) {
+        _this.resizeObserver.disconnect();
+      }
     });
     _defineProperty(_assertThisInitialized(_this), "getScrollTop", function () {
       var stickyHeaders = _this.props.stickyHeaders;
@@ -190,6 +225,13 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
   _createClass(TableContainer, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.resizeObserver = new ResizeObserver(this.applyResizerChange);
+      if (this.wrapperRef.current) {
+        this.resizeObserver.observe(this.wrapperRef.current);
+      }
+      if (this.stickyHeaderRef.current) {
+        this.resizeObserver.observe(this.stickyHeaderRef.current);
+      }
       if (this.props.stickyHeaders) {
         this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
         this.overflowParent.addEventListener('scroll', this.onScroll);
@@ -236,11 +278,6 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
           return undefined;
       }
     }
-  }, {
-    key: "headerRowHeight",
-    get: function get() {
-      return this.stickyHeaderRef.current ? this.stickyHeaderRef.current.offsetHeight : 0;
-    }
   }, {
     key: "render",
     value: function render() {
@@ -267,7 +304,6 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       if (canUseLinelength(rendererAppearance) && tableWidth !== 'inherit' && tableWidth > lineLength) {
         left = lineLength / 2 - tableWidth / 2;
       }
-      var wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
       var children = React.Children.toArray(this.props.children);
       return /*#__PURE__*/React.createElement(React.Fragment, null, !getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
@@ -280,9 +316,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         left: left,
         mode: stickyMode,
         innerRef: this.stickyWrapperRef,
-        wrapperWidth: wrapperWidth,
+        wrapperWidth: this.state.wrapperWidth,
         columnWidths: columnWidths,
-        rowHeight: this.headerRowHeight,
+        rowHeight: this.state.headerRowHeight,
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
@@ -302,9 +338,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         top: this.stickyTop,
         mode: stickyMode,
         innerRef: this.stickyWrapperRef,
-        wrapperWidth: wrapperWidth,
+        wrapperWidth: this.state.wrapperWidth,
         columnWidths: columnWidths,
-        rowHeight: this.headerRowHeight,
+        rowHeight: this.state.headerRowHeight,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {

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

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.11.0";
+var packageVersion = "108.11.2";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -341,7 +341,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         }
       };
       try {
-        var _featureFlags$feature, _featureFlags$feature2, _this$featureFlags2, _this$featureFlags2$f, _this$featureFlags2$f2;
+        var _featureFlags$feature, _this$featureFlags2, _this$featureFlags2$f, _this$featureFlags2$f2;
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
         var _renderDocument = renderDocument(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
           result = _renderDocument.result,
@@ -368,8 +368,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowWrapCodeBlock: allowWrapCodeBlock,
           allowCustomPanels: allowCustomPanels,
           allowPlaceholderText: allowPlaceholderText,
-          useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
-          useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+          useBlockRenderForCodeBlock: (_featureFlags$feature = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView
@@ -392,7 +391,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         });
         return jsx(Fragment, null, reRenderTracking, rendererResult);
       } catch (e) {
-        var _featureFlags$feature3, _featureFlags$feature4;
+        var _featureFlags$feature2;
         if (onError) {
           onError(e);
         }
@@ -403,8 +402,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowPlaceholderText: allowPlaceholderText,
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
-          useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature3 = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature3 !== void 0 ? _featureFlags$feature3 : true,
-          useBlockRenderForCodeBlock: (_featureFlags$feature4 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature4 !== void 0 ? _featureFlags$feature4 : true,
+          useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
           onClick: handleWrapperOnClick
         }, jsx(UnsupportedBlock, null));
       }
@@ -457,7 +455,6 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     children = props.children,
     onClick = props.onClick,
     onMouseDown = props.onMouseDown,
-    useFragmentMarkBreakoutWidthStylingFix = props.useFragmentMarkBreakoutWidthStylingFix,
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock;
   return jsx(WidthProvider, {
     className: "ak-renderer-wrapper"
@@ -471,7 +468,6 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
       appearance: appearance,
       allowNestedHeaderLinks: allowNestedHeaderLinks,
       allowColumnSorting: !!allowColumnSorting,
-      useFragmentMarkBreakoutWidthStylingFix: useFragmentMarkBreakoutWidthStylingFix,
       useBlockRenderForCodeBlock: useBlockRenderForCodeBlock
     })
   }, children)));

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { fontFamily, fontSize } from '@atlaskit/theme/constants';
@@ -78,11 +78,8 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   }
   return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n\n    ", "\n  "])), akEditorFullWidthLayoutWidth, isTableResizingEnabled(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
-var breakoutWidthStyle = function breakoutWidthStyle(useFragmentMarkBreakoutWidthStylingFix) {
-  if (useFragmentMarkBreakoutWidthStylingFix) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      *:not([data-mark-type='fragment'])\n        .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n\n      [data-mark-type='fragment']\n        *\n        .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n    "])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
-  }
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n  "])), TableSharedCssClassName.TABLE_CONTAINER);
+var breakoutWidthStyle = function breakoutWidthStyle() {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    *:not([data-mark-type='fragment'])\n      .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    [data-mark-type='fragment'] * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n  "])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
 };
 export var rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
@@ -91,7 +88,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
       theme: theme
     };
     var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), editorFontSize(themeProps), themed({
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), editorFontSize(themeProps), themed({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, #B8C7E0)"
     })(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), themed({
@@ -103,7 +100,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), "var(--ds-border-radius-100, 3px)", themed({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, ".concat(colors.DN600, ")")
-    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(wrapperProps.useFragmentMarkBreakoutWidthStylingFix), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(themeProps), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, themed({
+    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(themeProps), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, themed({
       light: "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"),
       dark: "var(--ds-background-neutral, ".concat(akEditorTableToolbarDark, ")")
     })(themeProps), themed({

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.11.0",
+	"version": "108.11.2",
 	"sideEffects": false
 }

package/dist/types/react/nodes/table/sticky.d.ts

@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
-import { TableLayout } from '@atlaskit/adf-schema';
-import { RendererAppearance } from '../../../ui/Renderer/types';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { RendererAppearance } from '../../../ui/Renderer/types';
 export type StickyMode = 'none' | 'stick' | 'pin-bottom';
 export declare const tableStickyPadding = 8;
 interface FixedProps {

package/dist/types/react/nodes/table.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { RendererAppearance, StickyHeaderConfig } from '../../ui/Renderer/types';
-import { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
-import { StickyMode, OverflowParent } from './table/sticky';
-import { SharedTableProps } from './table/types';
+import type { RendererAppearance, StickyHeaderConfig } from '../../ui/Renderer/types';
+import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
+import type { StickyMode } from './table/sticky';
+import { OverflowParent } from './table/sticky';
+import type { SharedTableProps } from './table/types';
 export declare const isTableResizingEnabled: (appearance: RendererAppearance) => boolean;
 export type TableProps = SharedTableProps & {
     children: React.ReactElement<any> | Array<React.ReactElement<any>>;
@@ -20,6 +21,8 @@ interface TableOrderStatus {
 }
 interface TableState {
     stickyMode: StickyMode;
+    wrapperWidth: number;
+    headerRowHeight: number;
 }
 export declare class TableContainer extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableState> {
     state: TableState;
@@ -29,6 +32,8 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     wrapperRef: React.RefObject<HTMLDivElement>;
     nextFrame: number | undefined;
     overflowParent: OverflowParent | null;
+    private resizeObserver;
+    private applyResizerChange;
     componentDidMount(): void;
     componentDidUpdate(prevProps: TableProps, prevState: TableState): void;
     componentWillUnmount: () => void;
@@ -38,7 +43,6 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     onWrapperScrolled: () => void;
     get pinTop(): number | undefined;
     get stickyTop(): number | undefined;
-    get headerRowHeight(): number;
     render(): JSX.Element;
     private grabFirstRowRef;
 }

package/dist/types/ui/Renderer/index.d.ts

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { RendererProps } from '../renderer-props';
+import type { RendererProps } from '../renderer-props';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 export interface Extension<T> {

package/dist/types/ui/Renderer/style.d.ts

@@ -5,7 +5,6 @@ export type RendererWrapperProps = {
     appearance?: RendererAppearance;
     allowNestedHeaderLinks: boolean;
     allowColumnSorting: boolean;
-    useFragmentMarkBreakoutWidthStylingFix: boolean;
     useBlockRenderForCodeBlock: boolean;
 };
 export declare const headingSizes: {

package/dist/types-ts4.5/react/nodes/table/sticky.d.ts

@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
-import { TableLayout } from '@atlaskit/adf-schema';
-import { RendererAppearance } from '../../../ui/Renderer/types';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { RendererAppearance } from '../../../ui/Renderer/types';
 export type StickyMode = 'none' | 'stick' | 'pin-bottom';
 export declare const tableStickyPadding = 8;
 interface FixedProps {

package/dist/types-ts4.5/react/nodes/table.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { RendererAppearance, StickyHeaderConfig } from '../../ui/Renderer/types';
-import { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
-import { StickyMode, OverflowParent } from './table/sticky';
-import { SharedTableProps } from './table/types';
+import type { RendererAppearance, StickyHeaderConfig } from '../../ui/Renderer/types';
+import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
+import type { StickyMode } from './table/sticky';
+import { OverflowParent } from './table/sticky';
+import type { SharedTableProps } from './table/types';
 export declare const isTableResizingEnabled: (appearance: RendererAppearance) => boolean;
 export type TableProps = SharedTableProps & {
     children: React.ReactElement<any> | Array<React.ReactElement<any>>;
@@ -20,6 +21,8 @@ interface TableOrderStatus {
 }
 interface TableState {
     stickyMode: StickyMode;
+    wrapperWidth: number;
+    headerRowHeight: number;
 }
 export declare class TableContainer extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableState> {
     state: TableState;
@@ -29,6 +32,8 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     wrapperRef: React.RefObject<HTMLDivElement>;
     nextFrame: number | undefined;
     overflowParent: OverflowParent | null;
+    private resizeObserver;
+    private applyResizerChange;
     componentDidMount(): void;
     componentDidUpdate(prevProps: TableProps, prevState: TableState): void;
     componentWillUnmount: () => void;
@@ -38,7 +43,6 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     onWrapperScrolled: () => void;
     get pinTop(): number | undefined;
     get stickyTop(): number | undefined;
-    get headerRowHeight(): number;
     render(): JSX.Element;
     private grabFirstRowRef;
 }

package/dist/types-ts4.5/ui/Renderer/index.d.ts

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { RendererProps } from '../renderer-props';
+import type { RendererProps } from '../renderer-props';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 export interface Extension<T> {

package/dist/types-ts4.5/ui/Renderer/style.d.ts

@@ -5,7 +5,6 @@ export type RendererWrapperProps = {
     appearance?: RendererAppearance;
     allowNestedHeaderLinks: boolean;
     allowColumnSorting: boolean;
-    useFragmentMarkBreakoutWidthStylingFix: boolean;
     useBlockRenderForCodeBlock: boolean;
 };
 export declare const headingSizes: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.11.0",
+  "version": "108.11.2",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,14 +24,14 @@
     }
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^28.0.0",
+    "@atlaskit/adf-schema": "^28.1.0",
     "@atlaskit/adf-utils": "^19.0.0",
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.8.0",
+    "@atlaskit/button": "^16.9.0",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/editor-common": "^74.37.0",
+    "@atlaskit/editor-common": "^74.42.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-prosemirror": "1.0.2",