@atlaskit/renderer 110.2.0 → 110.2.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/renderer
 
+## 110.2.2
+
+### Patch Changes
+
+- [#141244](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141244)
+  [`df87e6ab23533`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/df87e6ab23533) -
+  Remove references to webdriver tooling in editor packages
+
+## 110.2.1
+
+### Patch Changes
+
+- [#139038](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139038)
+  [`86a6dad9fb62e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/86a6dad9fb62e) -
+  [ux] Enables Table sticky scrollbar in Renderer under an experiment FF.
+- Updated dependencies
+
 ## 110.2.0
 
 ### Minor Changes

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

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableStickyScrollbar = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _styles = require("@atlaskit/editor-common/styles");
+var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function () {
+  function TableStickyScrollbar(wrapper) {
+    var _this = this;
+    (0, _classCallCheck2.default)(this, TableStickyScrollbar);
+    (0, _defineProperty2.default)(this, "sentinels", {});
+    (0, _defineProperty2.default)(this, "handleScroll", function (event) {
+      if (!_this.stickyScrollbarContainerElement || !_this.wrapper || event.target !== _this.stickyScrollbarContainerElement) {
+        return;
+      }
+      _this.wrapper.scrollLeft = _this.stickyScrollbarContainerElement.scrollLeft;
+    });
+    this.wrapper = wrapper;
+    this.init();
+  }
+  (0, _createClass2.default)(TableStickyScrollbar, [{
+    key: "dispose",
+    value: function dispose() {
+      if (this.stickyScrollbarContainerElement) {
+        this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScroll);
+      }
+      this.deleteIntersectionObserver();
+    }
+  }, {
+    key: "scrollLeft",
+    value: function scrollLeft(left) {
+      if (this.stickyScrollbarContainerElement) {
+        this.stickyScrollbarContainerElement.scrollLeft = left;
+      }
+    }
+  }, {
+    key: "init",
+    value: function init() {
+      var _this$wrapper$parentE;
+      if (!this.wrapper) {
+        return;
+      }
+      this.stickyScrollbarContainerElement = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelector(".".concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));
+      if (this.stickyScrollbarContainerElement) {
+        this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScroll, {
+          passive: true
+        });
+      }
+      this.createIntersectionObserver();
+    }
+  }, {
+    key: "createIntersectionObserver",
+    value: function createIntersectionObserver() {
+      var _this2 = this,
+        _this$wrapper,
+        _this$wrapper2;
+      this.rendererScrollableElement = (0, _ui.findOverflowScrollParent)(window.document.querySelector('.pm-table-container')) || window.document;
+      if (!this.rendererScrollableElement || !this.wrapper) {
+        return;
+      }
+      this.intersectionObserver = new IntersectionObserver(function (entries, _) {
+        if (!_this2.stickyScrollbarContainerElement) {
+          return;
+        }
+        entries.forEach(function (entry) {
+          var _entry$rootBounds;
+          var target = entry.target;
+          // if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
+          if (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.height) === 0) {
+            return;
+          }
+          if (target.classList.contains(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) {
+            _this2.sentinelBottomCallback(entry);
+          }
+          if (target.classList.contains(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) {
+            _this2.sentinelTopCallback(entry);
+          }
+        });
+      }, {
+        root: this.rendererScrollableElement
+      });
+      this.sentinels.bottom = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 || (_this$wrapper = _this$wrapper.parentElement) === null || _this$wrapper === void 0 || (_this$wrapper = _this$wrapper.getElementsByClassName(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.item(0);
+      this.sentinels.top = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.getElementsByClassName(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.item(0);
+      [this.sentinels.bottom, this.sentinels.top].forEach(function (el) {
+        return _this2.intersectionObserver.observe(el);
+      });
+    }
+  }, {
+    key: "deleteIntersectionObserver",
+    value: function deleteIntersectionObserver() {
+      if (this.intersectionObserver) {
+        if (this.sentinels.bottom) {
+          this.intersectionObserver.unobserve(this.sentinels.bottom);
+        }
+        this.intersectionObserver.disconnect();
+      }
+    }
+  }, {
+    key: "sentinelBottomCallback",
+    value: function sentinelBottomCallback(entry) {
+      var _entry$rootBounds2;
+      var sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0);
+      this.bottomSentinelState = sentinelIsAboveScrollArea ? 'above' : entry.isIntersecting ? 'visible' : 'below';
+      this.toggle();
+    }
+  }, {
+    key: "sentinelTopCallback",
+    value: function sentinelTopCallback(entry) {
+      var _entry$rootBounds3;
+      var sentinelIsBelowScrollArea = (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.bottom) || 0) < entry.boundingClientRect.top;
+      this.topSentinelState = sentinelIsBelowScrollArea ? 'below' : entry.isIntersecting ? 'visible' : 'above';
+      this.toggle();
+    }
+  }, {
+    key: "toggle",
+    value: function toggle() {
+      if ((this.topSentinelState === 'visible' || this.topSentinelState === 'above') && this.bottomSentinelState === 'below') {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'none') {
+        this.stickyScrollbarContainerElement.style.display = 'none';
+      }
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'block') {
+        this.stickyScrollbarContainerElement.style.display = 'block';
+      }
+    }
+  }]);
+  return TableStickyScrollbar;
+}();

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isTableResizingEnabled = exports.default = exports.TableProcessor = exports.TableContainer = void 0;
+exports.isTableResizingEnabled = exports.isStickyScrollbarEnabled = exports.default = exports.TableProcessor = exports.TableContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -27,6 +27,7 @@ var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _sticky = require("./table/sticky");
 var _table = require("./table/table");
 var _appearance = require("../utils/appearance");
+var _TableStickyScrollbar = require("./TableStickyScrollbar");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -37,6 +38,11 @@ var isTableResizingEnabled = exports.isTableResizingEnabled = function isTableRe
     exposure: true
   });
 };
+var isStickyScrollbarEnabled = exports.isStickyScrollbarEnabled = function isStickyScrollbarEnabled(appearance) {
+  return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) && (0, _experiments.editorExperiment)('platform_renderer_table_sticky_scrollbar', true, {
+    exposure: true
+  });
+};
 var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
   if (!tableOrderStatus || tableOrderStatus.order === _types.SortOrder.NO_ORDER) {
     return children;
@@ -136,6 +142,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "stickyHeaderRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "stickyScrollbarRef", /*#__PURE__*/_react.default.createRef());
     // used for sync scroll + copying wrapper width to sticky header
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "stickyWrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperRef", /*#__PURE__*/_react.default.createRef());
@@ -177,6 +184,9 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       if (_this.resizeObserver) {
         _this.resizeObserver.disconnect();
       }
+      if (_this.stickyScrollbar) {
+        _this.stickyScrollbar.dispose();
+      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getScrollTop", function () {
       var stickyHeaders = _this.props.stickyHeaders;
@@ -217,6 +227,9 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         return;
       }
       _this.stickyWrapperRef.current.scrollLeft = _this.wrapperRef.current.scrollLeft;
+      if (_this.stickyScrollbarRef.current) {
+        _this.stickyScrollbarRef.current.scrollLeft = _this.wrapperRef.current.scrollLeft;
+      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "grabFirstRowRef", function (children) {
       return _react.default.Children.map(children || false, function (child, idx) {
@@ -244,6 +257,9 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current);
         this.overflowParent.addEventListener('scroll', this.onScroll);
       }
+      if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
+        this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapperRef.current);
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -289,6 +305,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
   }, {
     key: "render",
     value: function render() {
+      var _this$tableRef$curren;
       var _this$props = this.props,
         isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
         layout = _this$props.layout,
@@ -377,7 +394,11 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
           left: left,
           marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
         }
-      }, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
+      }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
+        "data-testid": "sticky-scrollbar-sentinel-top"
+      }), stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
         tableWidth: tableWidth,
         layout: layout,
@@ -409,7 +430,30 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         isInsideOfBlockNode: isInsideOfBlockNode,
         isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
         allowTableResizing: allowTableResizing
-      }, this.grabFirstRowRef(children)))));
+      }, this.grabFirstRowRef(children))), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
+        ref: this.stickyScrollbarRef,
+        style: {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          height: "var(--ds-space-250, 20px)",
+          // MAX_BROWSER_SCROLLBAR_HEIGHT
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          display: 'block',
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+          width: '100%'
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: (_this$tableRef$curren = this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.clientWidth,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          height: '100%'
+        }
+      })), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
+        "data-testid": "sticky-scrollbar-sentinel-bottom"
+      })));
     }
   }]);
   return TableContainer;

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

@@ -63,7 +63,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "110.2.0";
+var packageVersion = "110.2.2";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);

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

@@ -145,6 +145,8 @@ function getAnnotationStyles(_ref6) {
     }
   });
 }
+var tableRowHeight = 44;
+var stickyScrollbarStyles = "\n\tposition: relative;\n\tflex-direction: column;\n\n\t> .".concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n\t  width: 100%;\n\t  display: none;\n\t  overflow-x: auto;\n\t  position: sticky;\n\t  bottom: ", "var(--ds-space-0, 0px)", ";\n\t  z-index: 1;\n\t}\n\n\t> .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n\t> .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t   position: absolute;\n\t   width: 100%;\n\t   height: 1px;\n\t   margin-top: -1px;\n\t   // need this to avoid sentinel being focused via keyboard\n\t   // this still allows it to be detected by intersection observer\n\t   visibility: hidden;\n\t }\n\t > .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t   top: ").concat(tableRowHeight * 3, "px;\n\t }\n\t > .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n\t   bottom:  ", "var(--ds-space-250, 20px)", "; // MAX_BROWSER_SCROLLBAR_HEIGHT = 20;\n\t }\n  ");
 var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
     var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
@@ -153,10 +155,11 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
     var themeProps = {
       theme: theme
     };
-    var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
+    var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock,
+      appearance = wrapperProps.appearance;
 
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
-    return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\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\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, 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, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), _styles.whitespaceSharedStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? _styles.blockquoteSharedStylesNew : _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "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, "var(--ds-space-100, 8px)", 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)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
+    return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\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\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, 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, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), _styles.whitespaceSharedStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? _styles.blockquoteSharedStylesNew : _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "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, "var(--ds-space-100, 8px)", 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)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), (0, _table.isStickyScrollbarEnabled)(appearance) ? stickyScrollbarStyles : '', _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };
 var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {

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

@@ -0,0 +1,108 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+export class TableStickyScrollbar {
+  constructor(wrapper) {
+    _defineProperty(this, "sentinels", {});
+    _defineProperty(this, "handleScroll", event => {
+      if (!this.stickyScrollbarContainerElement || !this.wrapper || event.target !== this.stickyScrollbarContainerElement) {
+        return;
+      }
+      this.wrapper.scrollLeft = this.stickyScrollbarContainerElement.scrollLeft;
+    });
+    this.wrapper = wrapper;
+    this.init();
+  }
+  dispose() {
+    if (this.stickyScrollbarContainerElement) {
+      this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScroll);
+    }
+    this.deleteIntersectionObserver();
+  }
+  scrollLeft(left) {
+    if (this.stickyScrollbarContainerElement) {
+      this.stickyScrollbarContainerElement.scrollLeft = left;
+    }
+  }
+  init() {
+    var _this$wrapper$parentE;
+    if (!this.wrapper) {
+      return;
+    }
+    this.stickyScrollbarContainerElement = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelector(`.${TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}`);
+    if (this.stickyScrollbarContainerElement) {
+      this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScroll, {
+        passive: true
+      });
+    }
+    this.createIntersectionObserver();
+  }
+  createIntersectionObserver() {
+    var _this$wrapper, _this$wrapper$parentE2, _this$wrapper$parentE3, _this$wrapper2, _this$wrapper2$parent, _this$wrapper2$parent2;
+    this.rendererScrollableElement = findOverflowScrollParent(window.document.querySelector('.pm-table-container')) || window.document;
+    if (!this.rendererScrollableElement || !this.wrapper) {
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver((entries, _) => {
+      if (!this.stickyScrollbarContainerElement) {
+        return;
+      }
+      entries.forEach(entry => {
+        var _entry$rootBounds;
+        const target = entry.target;
+        // if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
+        if (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.height) === 0) {
+          return;
+        }
+        if (target.classList.contains(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) {
+          this.sentinelBottomCallback(entry);
+        }
+        if (target.classList.contains(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) {
+          this.sentinelTopCallback(entry);
+        }
+      });
+    }, {
+      root: this.rendererScrollableElement
+    });
+    this.sentinels.bottom = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 ? void 0 : (_this$wrapper$parentE2 = _this$wrapper.parentElement) === null || _this$wrapper$parentE2 === void 0 ? void 0 : (_this$wrapper$parentE3 = _this$wrapper$parentE2.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper$parentE3 === void 0 ? void 0 : _this$wrapper$parentE3.item(0);
+    this.sentinels.top = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : (_this$wrapper2$parent2 = _this$wrapper2$parent.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper2$parent2 === void 0 ? void 0 : _this$wrapper2$parent2.item(0);
+    [this.sentinels.bottom, this.sentinels.top].forEach(el => this.intersectionObserver.observe(el));
+  }
+  deleteIntersectionObserver() {
+    if (this.intersectionObserver) {
+      if (this.sentinels.bottom) {
+        this.intersectionObserver.unobserve(this.sentinels.bottom);
+      }
+      this.intersectionObserver.disconnect();
+    }
+  }
+  sentinelBottomCallback(entry) {
+    var _entry$rootBounds2;
+    const sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0);
+    this.bottomSentinelState = sentinelIsAboveScrollArea ? 'above' : entry.isIntersecting ? 'visible' : 'below';
+    this.toggle();
+  }
+  sentinelTopCallback(entry) {
+    var _entry$rootBounds3;
+    const sentinelIsBelowScrollArea = (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.bottom) || 0) < entry.boundingClientRect.top;
+    this.topSentinelState = sentinelIsBelowScrollArea ? 'below' : entry.isIntersecting ? 'visible' : 'above';
+    this.toggle();
+  }
+  toggle() {
+    if ((this.topSentinelState === 'visible' || this.topSentinelState === 'above') && this.bottomSentinelState === 'below') {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+  hide() {
+    if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'none') {
+      this.stickyScrollbarContainerElement.style.display = 'none';
+    }
+  }
+  show() {
+    if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'block') {
+      this.stickyScrollbarContainerElement.style.display = 'block';
+    }
+  }
+}

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

@@ -14,9 +14,13 @@ import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
+import { TableStickyScrollbar } from './TableStickyScrollbar';
 export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
   exposure: true
 });
+export const isStickyScrollbarEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) && editorExperiment('platform_renderer_table_sticky_scrollbar', true, {
+  exposure: true
+});
 const orderChildren = (children, tableNode, smartCardStorage, tableOrderStatus) => {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
     return children;
@@ -98,6 +102,7 @@ export class TableContainer extends React.Component {
     });
     _defineProperty(this, "tableRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "stickyHeaderRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "stickyScrollbarRef", /*#__PURE__*/React.createRef());
     // used for sync scroll + copying wrapper width to sticky header
     _defineProperty(this, "stickyWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
@@ -130,6 +135,9 @@ export class TableContainer extends React.Component {
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
       }
+      if (this.stickyScrollbar) {
+        this.stickyScrollbar.dispose();
+      }
     });
     _defineProperty(this, "getScrollTop", () => {
       const {
@@ -172,6 +180,9 @@ export class TableContainer extends React.Component {
         return;
       }
       this.stickyWrapperRef.current.scrollLeft = this.wrapperRef.current.scrollLeft;
+      if (this.stickyScrollbarRef.current) {
+        this.stickyScrollbarRef.current.scrollLeft = this.wrapperRef.current.scrollLeft;
+      }
     });
     _defineProperty(this, "grabFirstRowRef", children => {
       return React.Children.map(children || false, (child, idx) => {
@@ -196,6 +207,9 @@ export class TableContainer extends React.Component {
       this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
       this.overflowParent.addEventListener('scroll', this.onScroll);
     }
+    if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
+      this.stickyScrollbar = new TableStickyScrollbar(this.wrapperRef.current);
+    }
   }
   componentDidUpdate(prevProps, prevState) {
     // toggling sticky headers visiblity
@@ -233,6 +247,7 @@ export class TableContainer extends React.Component {
     }
   }
   render() {
+    var _this$tableRef$curren;
     const {
       isNumberColumnEnabled,
       layout,
@@ -324,7 +339,11 @@ export class TableContainer extends React.Component {
         left: left,
         marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
       }
-    }, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
+    }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
+      "data-testid": "sticky-scrollbar-sentinel-top"
+    }), stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
       isNumberColumnEnabled: isNumberColumnEnabled,
       tableWidth: tableWidth,
       layout: layout,
@@ -356,7 +375,30 @@ export class TableContainer extends React.Component {
       isInsideOfBlockNode: isInsideOfBlockNode,
       isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
       allowTableResizing: allowTableResizing
-    }, this.grabFirstRowRef(children)))));
+    }, this.grabFirstRowRef(children))), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
+      ref: this.stickyScrollbarRef,
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        height: "var(--ds-space-250, 20px)",
+        // MAX_BROWSER_SCROLLBAR_HEIGHT
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        display: 'block',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: (_this$tableRef$curren = this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.clientWidth,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        height: '100%'
+      }
+    })), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
+      "data-testid": "sticky-scrollbar-sentinel-bottom"
+    })));
   }
 }
 export class TableProcessor extends React.Component {

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

@@ -45,7 +45,7 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "110.2.0";
+const packageVersion = "110.2.2";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {

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

@@ -18,7 +18,7 @@ import { N40A } from '@atlaskit/theme/colors';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
-import { isTableResizingEnabled } from '../../react/nodes/table';
+import { isTableResizingEnabled, isStickyScrollbarEnabled } from '../../react/nodes/table';
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const FullPagePadding = 32;
@@ -403,6 +403,37 @@ function getAnnotationStyles({
     }
   });
 }
+const tableRowHeight = 44;
+const stickyScrollbarStyles = `
+	position: relative;
+	flex-direction: column;
+
+	> .${TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER} {
+	  width: 100%;
+	  display: none;
+	  overflow-x: auto;
+	  position: sticky;
+	  bottom: ${"var(--ds-space-0, 0px)"};
+	  z-index: 1;
+	}
+
+	> .${TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM},
+	> .${TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP} {
+	   position: absolute;
+	   width: 100%;
+	   height: 1px;
+	   margin-top: -1px;
+	   // need this to avoid sentinel being focused via keyboard
+	   // this still allows it to be detected by intersection observer
+	   visibility: hidden;
+	 }
+	 > .${TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP} {
+	   top: ${tableRowHeight * 3}px;
+	 }
+	 > .${TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM} {
+	   bottom:  ${"var(--ds-space-250, 20px)"}; // MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
+	 }
+  `;
 export const rendererStyles = wrapperProps => theme => {
   const {
     colorMode
@@ -412,7 +443,8 @@ export const rendererStyles = wrapperProps => theme => {
     theme
   };
   const {
-    useBlockRenderForCodeBlock
+    useBlockRenderForCodeBlock,
+    appearance
   } = wrapperProps;
 
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
@@ -614,6 +646,8 @@ export const rendererStyles = wrapperProps => theme => {
 
 			${getShadowOverrides()}
 
+			${isStickyScrollbarEnabled(appearance) ? stickyScrollbarStyles : ''}
+
 			&
           .${shadowObserverClassNames.SENTINEL_LEFT},
           &

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

@@ -0,0 +1,138 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+export var TableStickyScrollbar = /*#__PURE__*/function () {
+  function TableStickyScrollbar(wrapper) {
+    var _this = this;
+    _classCallCheck(this, TableStickyScrollbar);
+    _defineProperty(this, "sentinels", {});
+    _defineProperty(this, "handleScroll", function (event) {
+      if (!_this.stickyScrollbarContainerElement || !_this.wrapper || event.target !== _this.stickyScrollbarContainerElement) {
+        return;
+      }
+      _this.wrapper.scrollLeft = _this.stickyScrollbarContainerElement.scrollLeft;
+    });
+    this.wrapper = wrapper;
+    this.init();
+  }
+  _createClass(TableStickyScrollbar, [{
+    key: "dispose",
+    value: function dispose() {
+      if (this.stickyScrollbarContainerElement) {
+        this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScroll);
+      }
+      this.deleteIntersectionObserver();
+    }
+  }, {
+    key: "scrollLeft",
+    value: function scrollLeft(left) {
+      if (this.stickyScrollbarContainerElement) {
+        this.stickyScrollbarContainerElement.scrollLeft = left;
+      }
+    }
+  }, {
+    key: "init",
+    value: function init() {
+      var _this$wrapper$parentE;
+      if (!this.wrapper) {
+        return;
+      }
+      this.stickyScrollbarContainerElement = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelector(".".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));
+      if (this.stickyScrollbarContainerElement) {
+        this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScroll, {
+          passive: true
+        });
+      }
+      this.createIntersectionObserver();
+    }
+  }, {
+    key: "createIntersectionObserver",
+    value: function createIntersectionObserver() {
+      var _this2 = this,
+        _this$wrapper,
+        _this$wrapper2;
+      this.rendererScrollableElement = findOverflowScrollParent(window.document.querySelector('.pm-table-container')) || window.document;
+      if (!this.rendererScrollableElement || !this.wrapper) {
+        return;
+      }
+      this.intersectionObserver = new IntersectionObserver(function (entries, _) {
+        if (!_this2.stickyScrollbarContainerElement) {
+          return;
+        }
+        entries.forEach(function (entry) {
+          var _entry$rootBounds;
+          var target = entry.target;
+          // if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
+          if (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.height) === 0) {
+            return;
+          }
+          if (target.classList.contains(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) {
+            _this2.sentinelBottomCallback(entry);
+          }
+          if (target.classList.contains(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) {
+            _this2.sentinelTopCallback(entry);
+          }
+        });
+      }, {
+        root: this.rendererScrollableElement
+      });
+      this.sentinels.bottom = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 || (_this$wrapper = _this$wrapper.parentElement) === null || _this$wrapper === void 0 || (_this$wrapper = _this$wrapper.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.item(0);
+      this.sentinels.top = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.item(0);
+      [this.sentinels.bottom, this.sentinels.top].forEach(function (el) {
+        return _this2.intersectionObserver.observe(el);
+      });
+    }
+  }, {
+    key: "deleteIntersectionObserver",
+    value: function deleteIntersectionObserver() {
+      if (this.intersectionObserver) {
+        if (this.sentinels.bottom) {
+          this.intersectionObserver.unobserve(this.sentinels.bottom);
+        }
+        this.intersectionObserver.disconnect();
+      }
+    }
+  }, {
+    key: "sentinelBottomCallback",
+    value: function sentinelBottomCallback(entry) {
+      var _entry$rootBounds2;
+      var sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0);
+      this.bottomSentinelState = sentinelIsAboveScrollArea ? 'above' : entry.isIntersecting ? 'visible' : 'below';
+      this.toggle();
+    }
+  }, {
+    key: "sentinelTopCallback",
+    value: function sentinelTopCallback(entry) {
+      var _entry$rootBounds3;
+      var sentinelIsBelowScrollArea = (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.bottom) || 0) < entry.boundingClientRect.top;
+      this.topSentinelState = sentinelIsBelowScrollArea ? 'below' : entry.isIntersecting ? 'visible' : 'above';
+      this.toggle();
+    }
+  }, {
+    key: "toggle",
+    value: function toggle() {
+      if ((this.topSentinelState === 'visible' || this.topSentinelState === 'above') && this.bottomSentinelState === 'below') {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'none') {
+        this.stickyScrollbarContainerElement.style.display = 'none';
+      }
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'block') {
+        this.stickyScrollbarContainerElement.style.display = 'block';
+      }
+    }
+  }]);
+  return TableStickyScrollbar;
+}();

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

@@ -25,11 +25,17 @@ import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
+import { TableStickyScrollbar } from './TableStickyScrollbar';
 export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
   return isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
     exposure: true
   });
 };
+export var isStickyScrollbarEnabled = function isStickyScrollbarEnabled(appearance) {
+  return isFullWidthOrFullPageAppearance(appearance) && editorExperiment('platform_renderer_table_sticky_scrollbar', true, {
+    exposure: true
+  });
+};
 var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
     return children;
@@ -129,6 +135,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "tableRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "stickyHeaderRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "stickyScrollbarRef", /*#__PURE__*/React.createRef());
     // used for sync scroll + copying wrapper width to sticky header
     _defineProperty(_assertThisInitialized(_this), "stickyWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "wrapperRef", /*#__PURE__*/React.createRef());
@@ -170,6 +177,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       if (_this.resizeObserver) {
         _this.resizeObserver.disconnect();
       }
+      if (_this.stickyScrollbar) {
+        _this.stickyScrollbar.dispose();
+      }
     });
     _defineProperty(_assertThisInitialized(_this), "getScrollTop", function () {
       var stickyHeaders = _this.props.stickyHeaders;
@@ -210,6 +220,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         return;
       }
       _this.stickyWrapperRef.current.scrollLeft = _this.wrapperRef.current.scrollLeft;
+      if (_this.stickyScrollbarRef.current) {
+        _this.stickyScrollbarRef.current.scrollLeft = _this.wrapperRef.current.scrollLeft;
+      }
     });
     _defineProperty(_assertThisInitialized(_this), "grabFirstRowRef", function (children) {
       return React.Children.map(children || false, function (child, idx) {
@@ -237,6 +250,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
         this.overflowParent.addEventListener('scroll', this.onScroll);
       }
+      if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
+        this.stickyScrollbar = new TableStickyScrollbar(this.wrapperRef.current);
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -282,6 +298,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this$tableRef$curren;
       var _this$props = this.props,
         isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
         layout = _this$props.layout,
@@ -370,7 +387,11 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
           left: left,
           marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
         }
-      }, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
+      }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
+        "data-testid": "sticky-scrollbar-sentinel-top"
+      }), stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
         tableWidth: tableWidth,
         layout: layout,
@@ -402,7 +423,30 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         isInsideOfBlockNode: isInsideOfBlockNode,
         isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
         allowTableResizing: allowTableResizing
-      }, this.grabFirstRowRef(children)))));
+      }, this.grabFirstRowRef(children))), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
+        ref: this.stickyScrollbarRef,
+        style: {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          height: "var(--ds-space-250, 20px)",
+          // MAX_BROWSER_SCROLLBAR_HEIGHT
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          display: 'block',
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+          width: '100%'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: (_this$tableRef$curren = this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.clientWidth,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          height: '100%'
+        }
+      })), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
+        "data-testid": "sticky-scrollbar-sentinel-bottom"
+      })));
     }
   }]);
   return TableContainer;

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

@@ -55,7 +55,7 @@ import { nodeToReact } from '../../react/nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "110.2.0";
+var packageVersion = "110.2.2";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);

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

@@ -20,7 +20,7 @@ import { N40A } from '@atlaskit/theme/colors';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
-import { isTableResizingEnabled } from '../../react/nodes/table';
+import { isTableResizingEnabled, isStickyScrollbarEnabled } from '../../react/nodes/table';
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var FullPagePadding = 32;
@@ -136,6 +136,8 @@ function getAnnotationStyles(_ref6) {
     }
   });
 }
+var tableRowHeight = 44;
+var stickyScrollbarStyles = "\n\tposition: relative;\n\tflex-direction: column;\n\n\t> .".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n\t  width: 100%;\n\t  display: none;\n\t  overflow-x: auto;\n\t  position: sticky;\n\t  bottom: ", "var(--ds-space-0, 0px)", ";\n\t  z-index: 1;\n\t}\n\n\t> .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n\t> .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t   position: absolute;\n\t   width: 100%;\n\t   height: 1px;\n\t   margin-top: -1px;\n\t   // need this to avoid sentinel being focused via keyboard\n\t   // this still allows it to be detected by intersection observer\n\t   visibility: hidden;\n\t }\n\t > .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t   top: ").concat(tableRowHeight * 3, "px;\n\t }\n\t > .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n\t   bottom:  ", "var(--ds-space-250, 20px)", "; // MAX_BROWSER_SCROLLBAR_HEIGHT = 20;\n\t }\n  ");
 export var rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
     var _getGlobalTheme = getGlobalTheme(),
@@ -144,10 +146,11 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     var themeProps = {
       theme: theme
     };
-    var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
+    var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock,
+      appearance = wrapperProps.appearance;
 
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\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\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), editorFontSize(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, mediaInlineImageStyles, 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, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), whitespaceSharedStyles, editorExperiment('nested-dnd', true) ? blockquoteSharedStylesNew : blockquoteSharedStyles, headingsSharedStyles(), ruleSharedStyles(), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles(), tasksAndDecisionsStyles, smartCardSharedStyles, getAnnotationStyles(wrapperProps), fontFamily(), relativeFontSizeToBase16(fontSize()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "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, "var(--ds-space-100, 8px)", 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(), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, getShadowOverrides(), shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), relativeFontSizeToBase16(fontSize()), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\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\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), editorFontSize(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, mediaInlineImageStyles, 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, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), whitespaceSharedStyles, editorExperiment('nested-dnd', true) ? blockquoteSharedStylesNew : blockquoteSharedStyles, headingsSharedStyles(), ruleSharedStyles(), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles(), tasksAndDecisionsStyles, smartCardSharedStyles, getAnnotationStyles(wrapperProps), fontFamily(), relativeFontSizeToBase16(fontSize()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "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, "var(--ds-space-100, 8px)", 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(), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, getShadowOverrides(), isStickyScrollbarEnabled(appearance) ? stickyScrollbarStyles : '', shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), relativeFontSizeToBase16(fontSize()), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
   };
 };
 var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {

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

@@ -0,0 +1,21 @@
+export declare class TableStickyScrollbar {
+    private wrapper;
+    private rendererScrollableElement?;
+    private intersectionObserver?;
+    private stickyScrollbarContainerElement?;
+    private sentinels;
+    private topSentinelState?;
+    private bottomSentinelState?;
+    constructor(wrapper: HTMLDivElement);
+    dispose(): void;
+    scrollLeft(left: number): void;
+    private init;
+    private createIntersectionObserver;
+    private deleteIntersectionObserver;
+    private sentinelBottomCallback;
+    private sentinelTopCallback;
+    private toggle;
+    private hide;
+    private show;
+    private handleScroll;
+}

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

@@ -7,7 +7,9 @@ import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
 import type { StickyMode } from './table/sticky';
 import { OverflowParent } from './table/sticky';
 import type { SharedTableProps } from './table/types';
+import { TableStickyScrollbar } from './TableStickyScrollbar';
 export declare const isTableResizingEnabled: (appearance: RendererAppearance) => boolean;
+export declare const isStickyScrollbarEnabled: (appearance: RendererAppearance) => boolean;
 type TableProps = SharedTableProps & {
     children: React.ReactElement<any> | Array<React.ReactElement<any>>;
     tableNode?: PMNode;
@@ -30,8 +32,10 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     state: TableState;
     tableRef: React.RefObject<HTMLTableElement>;
     stickyHeaderRef: React.RefObject<HTMLElement>;
+    stickyScrollbarRef: React.RefObject<HTMLDivElement>;
     stickyWrapperRef: React.RefObject<HTMLDivElement>;
     wrapperRef: React.RefObject<HTMLDivElement>;
+    stickyScrollbar?: TableStickyScrollbar;
     nextFrame: number | undefined;
     overflowParent: OverflowParent | null;
     private resizeObserver;

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

@@ -0,0 +1,21 @@
+export declare class TableStickyScrollbar {
+    private wrapper;
+    private rendererScrollableElement?;
+    private intersectionObserver?;
+    private stickyScrollbarContainerElement?;
+    private sentinels;
+    private topSentinelState?;
+    private bottomSentinelState?;
+    constructor(wrapper: HTMLDivElement);
+    dispose(): void;
+    scrollLeft(left: number): void;
+    private init;
+    private createIntersectionObserver;
+    private deleteIntersectionObserver;
+    private sentinelBottomCallback;
+    private sentinelTopCallback;
+    private toggle;
+    private hide;
+    private show;
+    private handleScroll;
+}

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

@@ -7,7 +7,9 @@ import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
 import type { StickyMode } from './table/sticky';
 import { OverflowParent } from './table/sticky';
 import type { SharedTableProps } from './table/types';
+import { TableStickyScrollbar } from './TableStickyScrollbar';
 export declare const isTableResizingEnabled: (appearance: RendererAppearance) => boolean;
+export declare const isStickyScrollbarEnabled: (appearance: RendererAppearance) => boolean;
 type TableProps = SharedTableProps & {
     children: React.ReactElement<any> | Array<React.ReactElement<any>>;
     tableNode?: PMNode;
@@ -30,8 +32,10 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     state: TableState;
     tableRef: React.RefObject<HTMLTableElement>;
     stickyHeaderRef: React.RefObject<HTMLElement>;
+    stickyScrollbarRef: React.RefObject<HTMLDivElement>;
     stickyWrapperRef: React.RefObject<HTMLDivElement>;
     wrapperRef: React.RefObject<HTMLDivElement>;
+    stickyScrollbar?: TableStickyScrollbar;
     nextFrame: number | undefined;
     overflowParent: OverflowParent | null;
     private resizeObserver;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "110.2.0",
+	"version": "110.2.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,11 +38,11 @@
 		"@atlaskit/feature-gate-js-client": "^4.19.0",
 		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/link-datasource": "^3.0.0",
-		"@atlaskit/media-card": "^78.4.0",
+		"@atlaskit/media-card": "^78.5.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.2.0",
 		"@atlaskit/media-common": "^11.4.0",
-		"@atlaskit/media-filmstrip": "^47.2.0",
+		"@atlaskit/media-filmstrip": "^47.3.0",
 		"@atlaskit/media-ui": "^25.14.0",
 		"@atlaskit/media-viewer": "^48.10.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
@@ -72,18 +72,17 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/css-reset": "^6.11.0",
-		"@atlaskit/editor-test-helpers": "^18.33.0",
+		"@atlaskit/editor-test-helpers": "^19.0.0",
 		"@atlaskit/link-provider": "^1.16.0",
 		"@atlaskit/link-test-helpers": "^7.5.0",
 		"@atlaskit/linking-common": "^5.11.0",
 		"@atlaskit/media-core": "^34.3.0",
 		"@atlaskit/media-integration-test-helpers": "^3.1.0",
-		"@atlaskit/media-test-helpers": "^34.3.0",
+		"@atlaskit/media-test-helpers": "^34.4.0",
 		"@atlaskit/mention": "^23.2.0",
 		"@atlaskit/navigation-next": "^9.0.0",
 		"@atlaskit/util-data-test": "^17.9.0",
 		"@atlaskit/visual-regression": "*",
-		"@atlaskit/webdriver-runner": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/react": "^12.1.5",
 		"@testing-library/react-hooks": "^8.0.1",