@atlaskit/editor-plugin-table 15.6.4 → 15.6.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 15.6.6
+
+### Patch Changes
+
+- [`8e7168f651cc2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e7168f651cc2) -
+  Only set native sticky header classes if a scroll event has occurred
+- Updated dependencies
+
+## 15.6.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.6.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableRowNativeStickyWithFallback.js

@@ -183,6 +183,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       if (this.isStickyHeaderEnabled) {
         this.unsubscribe();
         this.overflowObserver && this.overflowObserver.disconnect();
+        this.overflowObserverEntries = undefined;
         this.stickyStateObserver && this.stickyStateObserver.disconnect();
         this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
         var tree = (0, _dom2.getTree)(this.dom);
@@ -226,12 +227,56 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "subscribe",
     value: function subscribe() {
+      var _this2 = this;
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       this.editorScrollableElement = (0, _ui.findOverflowScrollParent)(this.view.dom) || window;
       if (this.editorScrollableElement) {
         this.initObservers();
         this.topPosEditorElement = (0, _dom2.getTop)(this.editorScrollableElement);
+        if (!TableRowNativeStickyWithFallback.scrollListener && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_5')) {
+          TableRowNativeStickyWithFallback.scrollListener = function () {
+            if (TableRowNativeStickyWithFallback.hasScrolledSinceLoad) {
+              return;
+            }
+            TableRowNativeStickyWithFallback.hasScrolledSinceLoad = true;
+            if (!_this2.overflowObserver) {
+              return;
+            }
+
+            // Re-check intersection state now that scrolling has occurred
+            if (_this2.overflowObserver) {
+              var _this2$overflowObserv;
+              var entries = (_this2$overflowObserv = _this2.overflowObserverEntries) !== null && _this2$overflowObserv !== void 0 ? _this2$overflowObserv : _this2.overflowObserver.takeRecords();
+              _this2.overflowObserverEntries = undefined;
+
+              /** NOTE: This logic is duplicated in the overflowObserver callback
+               *  to avoid conflicting with a follow up refactor where this will
+               *  be cleaned up.
+               */
+              entries.forEach(function (entry) {
+                var tableWrapper = _this2.dom.closest(".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
+                if (tableWrapper && tableWrapper instanceof HTMLElement) {
+                  if (entry.isIntersecting) {
+                    tableWrapper.classList.add(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+                    _this2.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY);
+                    _this2.isNativeSticky = true;
+                  } else {
+                    tableWrapper.classList.remove(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+                    _this2.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY);
+                    _this2.isNativeSticky = false;
+                  }
+                  _this2.refreshLegacyStickyState();
+                }
+              });
+            }
+          };
+          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+          this.editorScrollableElement.addEventListener('scroll', TableRowNativeStickyWithFallback.scrollListener, {
+            passive: true,
+            once: true
+          });
+        }
       }
       this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth.bind(this));
 
@@ -270,6 +315,11 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
       }
+      if (TableRowNativeStickyWithFallback.scrollListener && this.editorScrollableElement) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.editorScrollableElement.removeEventListener('scroll', TableRowNativeStickyWithFallback.scrollListener);
+        TableRowNativeStickyWithFallback.scrollListener = undefined;
+      }
       this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -286,7 +336,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "initOverflowObserver",
     value: function initOverflowObserver() {
-      var _this2 = this;
+      var _this3 = this;
       var tableWrapper = this.dom.closest(".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
       if (!tableWrapper) {
         return;
@@ -300,16 +350,21 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
           if (!(observer.root instanceof HTMLElement)) {
             return;
           }
+          // Only apply classes if page has scrolled since load
+          if (!TableRowNativeStickyWithFallback.hasScrolledSinceLoad && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_5')) {
+            _this3.overflowObserverEntries = entries;
+            return;
+          }
           if (entry.isIntersecting) {
             observer.root.classList.add(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
-            _this2.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY);
-            _this2.isNativeSticky = true;
+            _this3.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY);
+            _this3.isNativeSticky = true;
           } else {
             observer.root.classList.remove(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
-            _this2.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY);
-            _this2.isNativeSticky = false;
+            _this3.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY);
+            _this3.isNativeSticky = false;
           }
-          _this2.refreshLegacyStickyState();
+          _this3.refreshLegacyStickyState();
         });
       }, options);
     }
@@ -322,7 +377,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "initStickyStateObserver",
     value: function initStickyStateObserver() {
-      var _this3 = this;
+      var _this4 = this;
       if (!this.editorScrollableElement || !(this.editorScrollableElement instanceof Element)) {
         return;
       }
@@ -334,14 +389,14 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       this.stickyStateObserver = new IntersectionObserver(function (entries) {
         entries.forEach(function (entry) {
           var _entry$rootBounds;
-          var tableContainer = _this3.dom.closest(".".concat(_types.TableCssClassName.TABLE_CONTAINER));
+          var tableContainer = _this4.dom.closest(".".concat(_types.TableCssClassName.TABLE_CONTAINER));
           if (entry.intersectionRect.top === ((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.top)) {
-            _this3.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY_ACTIVE);
+            _this4.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY_ACTIVE);
             if (tableContainer && tableContainer instanceof HTMLElement) {
               tableContainer.dataset.tableHeaderIsStuck = 'true';
             }
           } else {
-            _this3.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY_ACTIVE);
+            _this4.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY_ACTIVE);
             if (tableContainer && tableContainer instanceof HTMLElement) {
               if ((0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_3')) {
                 delete tableContainer.dataset.tableHeaderIsStuck;
@@ -358,7 +413,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "initObservers",
     value: function initObservers() {
-      var _this4 = this;
+      var _this5 = this;
       if (!this.dom || this.dom.dataset.isObserved) {
         return;
       }
@@ -392,7 +447,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       window.requestAnimationFrame(function () {
         var getTableContainer = function getTableContainer() {
           var _getTree;
-          return (_getTree = (0, _dom2.getTree)(_this4.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
+          return (_getTree = (0, _dom2.getTree)(_this5.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
         };
 
         // we expect tree to be defined after animation frame
@@ -418,16 +473,16 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
             return getSentinelTop() !== null && getSentinelBottom() !== null;
           };
           var observeStickySentinels = function observeStickySentinels() {
-            _this4.sentinels.top = getSentinelTop();
-            _this4.sentinels.bottom = getSentinelBottom();
-            [_this4.sentinels.top, _this4.sentinels.bottom].forEach(function (el) {
+            _this5.sentinels.top = getSentinelTop();
+            _this5.sentinels.bottom = getSentinelBottom();
+            [_this5.sentinels.top, _this5.sentinels.bottom].forEach(function (el) {
               // skip if already observed for another row on this table
               if (el && !el.dataset.isObserved) {
                 el.dataset.isObserved = 'true';
 
                 // Ignored via go/ees005
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                _this4.intersectionObserver.observe(el);
+                _this5.intersectionObserver.observe(el);
               }
             });
           };
@@ -442,7 +497,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
             // observe sentinels before they are in the DOM, use MutationObserver
             // to wait for sentinels to be added to the parent Table node DOM
             // then attach the IntersectionObserver
-            _this4.tableContainerObserver = new MutationObserver(function () {
+            _this5.tableContainerObserver = new MutationObserver(function () {
               // Check if the tableContainer is still connected to the DOM. It can become disconnected when the placholder
               // prosemirror node is replaced with the fully rendered React node (see _handleTableRef).
 
@@ -450,14 +505,14 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
                 tableContainer = getTableContainer();
               }
               if (sentinelsInDom()) {
-                var _this4$tableContainer;
+                var _this5$tableContainer;
                 observeStickySentinels();
-                (_this4$tableContainer = _this4.tableContainerObserver) === null || _this4$tableContainer === void 0 || _this4$tableContainer.disconnect();
+                (_this5$tableContainer = _this5.tableContainerObserver) === null || _this5$tableContainer === void 0 || _this5$tableContainer.disconnect();
               }
             });
             var mutatingNode = tableContainer;
-            if (mutatingNode && _this4.tableContainerObserver) {
-              _this4.tableContainerObserver.observe(mutatingNode, {
+            if (mutatingNode && _this5.tableContainerObserver) {
+              _this5.tableContainerObserver.observe(mutatingNode, {
                 subtree: true,
                 childList: true
               });
@@ -472,32 +527,32 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "createResizeObserver",
     value: function createResizeObserver() {
-      var _this5 = this;
+      var _this6 = this;
       this.resizeObserver = new ResizeObserver(function (entries) {
-        var tree = (0, _dom2.getTree)(_this5.dom);
+        var tree = (0, _dom2.getTree)(_this6.dom);
         if (!tree) {
           return;
         }
         var table = tree.table;
         entries.forEach(function (entry) {
-          var _this5$editorScrollab;
+          var _this6$editorScrollab;
           // On resize of the parent scroll element we need to adjust the width
           // of the sticky header
           // Ignored via go/ees005
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          if (entry.target.className === ((_this5$editorScrollab = _this5.editorScrollableElement) === null || _this5$editorScrollab === void 0 ? void 0 : _this5$editorScrollab.className)) {
-            _this5.updateStickyHeaderWidth();
+          if (entry.target.className === ((_this6$editorScrollab = _this6.editorScrollableElement) === null || _this6$editorScrollab === void 0 ? void 0 : _this6$editorScrollab.className)) {
+            _this6.updateStickyHeaderWidth();
           } else {
             var newHeight = entry.contentRect ? entry.contentRect.height :
             // Ignored via go/ees005
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
             entry.target.offsetHeight;
-            if (_this5.sentinels.bottom &&
+            if (_this6.sentinels.bottom &&
             // When the table header is sticky, it would be taller by a 1px (border-bottom),
             // So we adding this check to allow a 1px difference.
-            Math.abs(newHeight - (_this5.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
-              _this5.stickyRowHeight = newHeight;
-              _this5.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
+            Math.abs(newHeight - (_this6.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
+              _this6.stickyRowHeight = newHeight;
+              _this6.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
               (0, _dom.updateStickyMargins)(table);
             }
           }
@@ -507,13 +562,13 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "createIntersectionObserver",
     value: function createIntersectionObserver() {
-      var _this6 = this;
+      var _this7 = this;
       this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-        var _this6$editorScrollab, _this6$editorScrollab2;
+        var _this7$editorScrollab, _this7$editorScrollab2;
         // IMPORTANT: please try and avoid using entry.rootBounds it's terribly inconsistent. For example; sometimes it may return
         // 0 height. In safari it will multiply all values by the window scale factor, however chrome & firfox won't.
         // This is why i just get the scroll view bounding rect here and use it, and fallback to the entry.rootBounds if needed.
-        var rootBounds = (_this6$editorScrollab = _this6.editorScrollableElement) === null || _this6$editorScrollab === void 0 || (_this6$editorScrollab2 = _this6$editorScrollab.getBoundingClientRect) === null || _this6$editorScrollab2 === void 0 ? void 0 : _this6$editorScrollab2.call(_this6$editorScrollab);
+        var rootBounds = (_this7$editorScrollab = _this7.editorScrollableElement) === null || _this7$editorScrollab === void 0 || (_this7$editorScrollab2 = _this7$editorScrollab.getBoundingClientRect) === null || _this7$editorScrollab2 === void 0 ? void 0 : _this7$editorScrollab2.call(_this7$editorScrollab);
         entries.forEach(function (entry) {
           var target = entry.target,
             isIntersecting = entry.isIntersecting,
@@ -521,15 +576,15 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
           // This observer only every looks at the top/bottom sentinels, we can assume if it's not one then it's the other.
           var targetKey = target.classList.contains(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP) ? 'top' : 'bottom';
           // Cache the latest sentinel information
-          _this6.sentinelData[targetKey] = {
+          _this7.sentinelData[targetKey] = {
             isIntersecting: isIntersecting,
             boundingClientRect: boundingClientRect,
             rootBounds: rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds
           };
           // Keep the other sentinels rootBounds in sync with this latest one
-          _this6.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
+          _this7.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
         });
-        _this6.refreshLegacyStickyState();
+        _this7.refreshLegacyStickyState();
       }, {
         threshold: 0,
         root: this.editorScrollableElement
@@ -704,12 +759,12 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "refireIntersectionObservers",
     value: function refireIntersectionObservers() {
-      var _this7 = this;
+      var _this8 = this;
       if (this.isLegacySticky) {
         [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
-          if (el && _this7.intersectionObserver) {
-            _this7.intersectionObserver.unobserve(el);
-            _this7.intersectionObserver.observe(el);
+          if (el && _this8.intersectionObserver) {
+            _this8.intersectionObserver.unobserve(el);
+            _this8.intersectionObserver.observe(el);
           }
         });
       }
@@ -718,7 +773,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
     key: "makeHeaderRowLegacySticky",
     value: function makeHeaderRowLegacySticky(tree, scrollTop) {
       var _tbody$firstChild,
-        _this8 = this;
+        _this9 = this;
       // If header row height is more than 50% of viewport height don't do this
       if (this.isLegacySticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2 || this.isInNestedTable) {
         return;
@@ -757,7 +812,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this8.refireIntersectionObservers();
+          _this9.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "0px";
@@ -845,4 +900,5 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       }
     }
   }]);
-}(_TableNodeViewBase.default);
+}(_TableNodeViewBase.default);
+(0, _defineProperty2.default)(TableRowNativeStickyWithFallback, "hasScrolledSinceLoad", false);

package/dist/es2019/nodeviews/TableRowNativeStickyWithFallback.js

@@ -161,6 +161,7 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     if (this.isStickyHeaderEnabled) {
       this.unsubscribe();
       this.overflowObserver && this.overflowObserver.disconnect();
+      this.overflowObserverEntries = undefined;
       this.stickyStateObserver && this.stickyStateObserver.disconnect();
       this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
       const tree = getTree(this.dom);
@@ -206,6 +207,49 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     if (this.editorScrollableElement) {
       this.initObservers();
       this.topPosEditorElement = getTop(this.editorScrollableElement);
+      if (!TableRowNativeStickyWithFallback.scrollListener && fg('platform_editor_table_sticky_header_patch_5')) {
+        TableRowNativeStickyWithFallback.scrollListener = () => {
+          if (TableRowNativeStickyWithFallback.hasScrolledSinceLoad) {
+            return;
+          }
+          TableRowNativeStickyWithFallback.hasScrolledSinceLoad = true;
+          if (!this.overflowObserver) {
+            return;
+          }
+
+          // Re-check intersection state now that scrolling has occurred
+          if (this.overflowObserver) {
+            var _this$overflowObserve;
+            const entries = (_this$overflowObserve = this.overflowObserverEntries) !== null && _this$overflowObserve !== void 0 ? _this$overflowObserve : this.overflowObserver.takeRecords();
+            this.overflowObserverEntries = undefined;
+
+            /** NOTE: This logic is duplicated in the overflowObserver callback
+             *  to avoid conflicting with a follow up refactor where this will
+             *  be cleaned up.
+             */
+            entries.forEach(entry => {
+              const tableWrapper = this.dom.closest(`.${ClassName.TABLE_NODE_WRAPPER}`);
+              if (tableWrapper && tableWrapper instanceof HTMLElement) {
+                if (entry.isIntersecting) {
+                  tableWrapper.classList.add(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+                  this.dom.classList.add(ClassName.NATIVE_STICKY);
+                  this.isNativeSticky = true;
+                } else {
+                  tableWrapper.classList.remove(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+                  this.dom.classList.remove(ClassName.NATIVE_STICKY);
+                  this.isNativeSticky = false;
+                }
+                this.refreshLegacyStickyState();
+              }
+            });
+          }
+        };
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.editorScrollableElement.addEventListener('scroll', TableRowNativeStickyWithFallback.scrollListener, {
+          passive: true,
+          once: true
+        });
+      }
     }
     this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth.bind(this));
 
@@ -242,6 +286,11 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
+    if (TableRowNativeStickyWithFallback.scrollListener && this.editorScrollableElement) {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      this.editorScrollableElement.removeEventListener('scroll', TableRowNativeStickyWithFallback.scrollListener);
+      TableRowNativeStickyWithFallback.scrollListener = undefined;
+    }
     this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -269,6 +318,11 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
         if (!(observer.root instanceof HTMLElement)) {
           return;
         }
+        // Only apply classes if page has scrolled since load
+        if (!TableRowNativeStickyWithFallback.hasScrolledSinceLoad && fg('platform_editor_table_sticky_header_patch_5')) {
+          this.overflowObserverEntries = entries;
+          return;
+        }
         if (entry.isIntersecting) {
           observer.root.classList.add(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
           this.dom.classList.add(ClassName.NATIVE_STICKY);
@@ -340,8 +394,8 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
       this.initOverflowObserver();
       const closestTable = this.dom.closest('table');
       if (closestTable) {
-        var _this$overflowObserve;
-        (_this$overflowObserve = this.overflowObserver) === null || _this$overflowObserve === void 0 ? void 0 : _this$overflowObserve.observe(closestTable);
+        var _this$overflowObserve2;
+        (_this$overflowObserve2 = this.overflowObserver) === null || _this$overflowObserve2 === void 0 ? void 0 : _this$overflowObserve2.observe(closestTable);
       }
       this.initStickyStateObserver();
       (_this$stickyStateObse = this.stickyStateObserver) === null || _this$stickyStateObse === void 0 ? void 0 : _this$stickyStateObse.observe(this.dom);
@@ -778,4 +832,5 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
       })(this.view.state, this.view.dispatch, this.view);
     }
   }
-}
+}
+_defineProperty(TableRowNativeStickyWithFallback, "hasScrolledSinceLoad", false);

package/dist/esm/nodeviews/TableRowNativeStickyWithFallback.js

@@ -176,6 +176,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
       if (this.isStickyHeaderEnabled) {
         this.unsubscribe();
         this.overflowObserver && this.overflowObserver.disconnect();
+        this.overflowObserverEntries = undefined;
         this.stickyStateObserver && this.stickyStateObserver.disconnect();
         this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
         var tree = getTree(this.dom);
@@ -219,12 +220,56 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "subscribe",
     value: function subscribe() {
+      var _this2 = this;
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
       if (this.editorScrollableElement) {
         this.initObservers();
         this.topPosEditorElement = getTop(this.editorScrollableElement);
+        if (!TableRowNativeStickyWithFallback.scrollListener && fg('platform_editor_table_sticky_header_patch_5')) {
+          TableRowNativeStickyWithFallback.scrollListener = function () {
+            if (TableRowNativeStickyWithFallback.hasScrolledSinceLoad) {
+              return;
+            }
+            TableRowNativeStickyWithFallback.hasScrolledSinceLoad = true;
+            if (!_this2.overflowObserver) {
+              return;
+            }
+
+            // Re-check intersection state now that scrolling has occurred
+            if (_this2.overflowObserver) {
+              var _this2$overflowObserv;
+              var entries = (_this2$overflowObserv = _this2.overflowObserverEntries) !== null && _this2$overflowObserv !== void 0 ? _this2$overflowObserv : _this2.overflowObserver.takeRecords();
+              _this2.overflowObserverEntries = undefined;
+
+              /** NOTE: This logic is duplicated in the overflowObserver callback
+               *  to avoid conflicting with a follow up refactor where this will
+               *  be cleaned up.
+               */
+              entries.forEach(function (entry) {
+                var tableWrapper = _this2.dom.closest(".".concat(ClassName.TABLE_NODE_WRAPPER));
+                if (tableWrapper && tableWrapper instanceof HTMLElement) {
+                  if (entry.isIntersecting) {
+                    tableWrapper.classList.add(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+                    _this2.dom.classList.add(ClassName.NATIVE_STICKY);
+                    _this2.isNativeSticky = true;
+                  } else {
+                    tableWrapper.classList.remove(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+                    _this2.dom.classList.remove(ClassName.NATIVE_STICKY);
+                    _this2.isNativeSticky = false;
+                  }
+                  _this2.refreshLegacyStickyState();
+                }
+              });
+            }
+          };
+          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+          this.editorScrollableElement.addEventListener('scroll', TableRowNativeStickyWithFallback.scrollListener, {
+            passive: true,
+            once: true
+          });
+        }
       }
       this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth.bind(this));
 
@@ -263,6 +308,11 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
       }
+      if (TableRowNativeStickyWithFallback.scrollListener && this.editorScrollableElement) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.editorScrollableElement.removeEventListener('scroll', TableRowNativeStickyWithFallback.scrollListener);
+        TableRowNativeStickyWithFallback.scrollListener = undefined;
+      }
       this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -279,7 +329,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "initOverflowObserver",
     value: function initOverflowObserver() {
-      var _this2 = this;
+      var _this3 = this;
       var tableWrapper = this.dom.closest(".".concat(ClassName.TABLE_NODE_WRAPPER));
       if (!tableWrapper) {
         return;
@@ -293,16 +343,21 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
           if (!(observer.root instanceof HTMLElement)) {
             return;
           }
+          // Only apply classes if page has scrolled since load
+          if (!TableRowNativeStickyWithFallback.hasScrolledSinceLoad && fg('platform_editor_table_sticky_header_patch_5')) {
+            _this3.overflowObserverEntries = entries;
+            return;
+          }
           if (entry.isIntersecting) {
             observer.root.classList.add(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
-            _this2.dom.classList.add(ClassName.NATIVE_STICKY);
-            _this2.isNativeSticky = true;
+            _this3.dom.classList.add(ClassName.NATIVE_STICKY);
+            _this3.isNativeSticky = true;
           } else {
             observer.root.classList.remove(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
-            _this2.dom.classList.remove(ClassName.NATIVE_STICKY);
-            _this2.isNativeSticky = false;
+            _this3.dom.classList.remove(ClassName.NATIVE_STICKY);
+            _this3.isNativeSticky = false;
           }
-          _this2.refreshLegacyStickyState();
+          _this3.refreshLegacyStickyState();
         });
       }, options);
     }
@@ -315,7 +370,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "initStickyStateObserver",
     value: function initStickyStateObserver() {
-      var _this3 = this;
+      var _this4 = this;
       if (!this.editorScrollableElement || !(this.editorScrollableElement instanceof Element)) {
         return;
       }
@@ -327,14 +382,14 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
       this.stickyStateObserver = new IntersectionObserver(function (entries) {
         entries.forEach(function (entry) {
           var _entry$rootBounds;
-          var tableContainer = _this3.dom.closest(".".concat(ClassName.TABLE_CONTAINER));
+          var tableContainer = _this4.dom.closest(".".concat(ClassName.TABLE_CONTAINER));
           if (entry.intersectionRect.top === ((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.top)) {
-            _this3.dom.classList.add(ClassName.NATIVE_STICKY_ACTIVE);
+            _this4.dom.classList.add(ClassName.NATIVE_STICKY_ACTIVE);
             if (tableContainer && tableContainer instanceof HTMLElement) {
               tableContainer.dataset.tableHeaderIsStuck = 'true';
             }
           } else {
-            _this3.dom.classList.remove(ClassName.NATIVE_STICKY_ACTIVE);
+            _this4.dom.classList.remove(ClassName.NATIVE_STICKY_ACTIVE);
             if (tableContainer && tableContainer instanceof HTMLElement) {
               if (fg('platform_editor_table_sticky_header_patch_3')) {
                 delete tableContainer.dataset.tableHeaderIsStuck;
@@ -351,7 +406,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "initObservers",
     value: function initObservers() {
-      var _this4 = this;
+      var _this5 = this;
       if (!this.dom || this.dom.dataset.isObserved) {
         return;
       }
@@ -385,7 +440,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
       window.requestAnimationFrame(function () {
         var getTableContainer = function getTableContainer() {
           var _getTree;
-          return (_getTree = getTree(_this4.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
+          return (_getTree = getTree(_this5.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
         };
 
         // we expect tree to be defined after animation frame
@@ -411,16 +466,16 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
             return getSentinelTop() !== null && getSentinelBottom() !== null;
           };
           var observeStickySentinels = function observeStickySentinels() {
-            _this4.sentinels.top = getSentinelTop();
-            _this4.sentinels.bottom = getSentinelBottom();
-            [_this4.sentinels.top, _this4.sentinels.bottom].forEach(function (el) {
+            _this5.sentinels.top = getSentinelTop();
+            _this5.sentinels.bottom = getSentinelBottom();
+            [_this5.sentinels.top, _this5.sentinels.bottom].forEach(function (el) {
               // skip if already observed for another row on this table
               if (el && !el.dataset.isObserved) {
                 el.dataset.isObserved = 'true';
 
                 // Ignored via go/ees005
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                _this4.intersectionObserver.observe(el);
+                _this5.intersectionObserver.observe(el);
               }
             });
           };
@@ -435,7 +490,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
             // observe sentinels before they are in the DOM, use MutationObserver
             // to wait for sentinels to be added to the parent Table node DOM
             // then attach the IntersectionObserver
-            _this4.tableContainerObserver = new MutationObserver(function () {
+            _this5.tableContainerObserver = new MutationObserver(function () {
               // Check if the tableContainer is still connected to the DOM. It can become disconnected when the placholder
               // prosemirror node is replaced with the fully rendered React node (see _handleTableRef).
 
@@ -443,14 +498,14 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
                 tableContainer = getTableContainer();
               }
               if (sentinelsInDom()) {
-                var _this4$tableContainer;
+                var _this5$tableContainer;
                 observeStickySentinels();
-                (_this4$tableContainer = _this4.tableContainerObserver) === null || _this4$tableContainer === void 0 || _this4$tableContainer.disconnect();
+                (_this5$tableContainer = _this5.tableContainerObserver) === null || _this5$tableContainer === void 0 || _this5$tableContainer.disconnect();
               }
             });
             var mutatingNode = tableContainer;
-            if (mutatingNode && _this4.tableContainerObserver) {
-              _this4.tableContainerObserver.observe(mutatingNode, {
+            if (mutatingNode && _this5.tableContainerObserver) {
+              _this5.tableContainerObserver.observe(mutatingNode, {
                 subtree: true,
                 childList: true
               });
@@ -465,32 +520,32 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "createResizeObserver",
     value: function createResizeObserver() {
-      var _this5 = this;
+      var _this6 = this;
       this.resizeObserver = new ResizeObserver(function (entries) {
-        var tree = getTree(_this5.dom);
+        var tree = getTree(_this6.dom);
         if (!tree) {
           return;
         }
         var table = tree.table;
         entries.forEach(function (entry) {
-          var _this5$editorScrollab;
+          var _this6$editorScrollab;
           // On resize of the parent scroll element we need to adjust the width
           // of the sticky header
           // Ignored via go/ees005
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          if (entry.target.className === ((_this5$editorScrollab = _this5.editorScrollableElement) === null || _this5$editorScrollab === void 0 ? void 0 : _this5$editorScrollab.className)) {
-            _this5.updateStickyHeaderWidth();
+          if (entry.target.className === ((_this6$editorScrollab = _this6.editorScrollableElement) === null || _this6$editorScrollab === void 0 ? void 0 : _this6$editorScrollab.className)) {
+            _this6.updateStickyHeaderWidth();
           } else {
             var newHeight = entry.contentRect ? entry.contentRect.height :
             // Ignored via go/ees005
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
             entry.target.offsetHeight;
-            if (_this5.sentinels.bottom &&
+            if (_this6.sentinels.bottom &&
             // When the table header is sticky, it would be taller by a 1px (border-bottom),
             // So we adding this check to allow a 1px difference.
-            Math.abs(newHeight - (_this5.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
-              _this5.stickyRowHeight = newHeight;
-              _this5.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
+            Math.abs(newHeight - (_this6.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
+              _this6.stickyRowHeight = newHeight;
+              _this6.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
               updateTableMargin(table);
             }
           }
@@ -500,13 +555,13 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "createIntersectionObserver",
     value: function createIntersectionObserver() {
-      var _this6 = this;
+      var _this7 = this;
       this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-        var _this6$editorScrollab, _this6$editorScrollab2;
+        var _this7$editorScrollab, _this7$editorScrollab2;
         // IMPORTANT: please try and avoid using entry.rootBounds it's terribly inconsistent. For example; sometimes it may return
         // 0 height. In safari it will multiply all values by the window scale factor, however chrome & firfox won't.
         // This is why i just get the scroll view bounding rect here and use it, and fallback to the entry.rootBounds if needed.
-        var rootBounds = (_this6$editorScrollab = _this6.editorScrollableElement) === null || _this6$editorScrollab === void 0 || (_this6$editorScrollab2 = _this6$editorScrollab.getBoundingClientRect) === null || _this6$editorScrollab2 === void 0 ? void 0 : _this6$editorScrollab2.call(_this6$editorScrollab);
+        var rootBounds = (_this7$editorScrollab = _this7.editorScrollableElement) === null || _this7$editorScrollab === void 0 || (_this7$editorScrollab2 = _this7$editorScrollab.getBoundingClientRect) === null || _this7$editorScrollab2 === void 0 ? void 0 : _this7$editorScrollab2.call(_this7$editorScrollab);
         entries.forEach(function (entry) {
           var target = entry.target,
             isIntersecting = entry.isIntersecting,
@@ -514,15 +569,15 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
           // This observer only every looks at the top/bottom sentinels, we can assume if it's not one then it's the other.
           var targetKey = target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP) ? 'top' : 'bottom';
           // Cache the latest sentinel information
-          _this6.sentinelData[targetKey] = {
+          _this7.sentinelData[targetKey] = {
             isIntersecting: isIntersecting,
             boundingClientRect: boundingClientRect,
             rootBounds: rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds
           };
           // Keep the other sentinels rootBounds in sync with this latest one
-          _this6.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
+          _this7.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
         });
-        _this6.refreshLegacyStickyState();
+        _this7.refreshLegacyStickyState();
       }, {
         threshold: 0,
         root: this.editorScrollableElement
@@ -697,12 +752,12 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "refireIntersectionObservers",
     value: function refireIntersectionObservers() {
-      var _this7 = this;
+      var _this8 = this;
       if (this.isLegacySticky) {
         [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
-          if (el && _this7.intersectionObserver) {
-            _this7.intersectionObserver.unobserve(el);
-            _this7.intersectionObserver.observe(el);
+          if (el && _this8.intersectionObserver) {
+            _this8.intersectionObserver.unobserve(el);
+            _this8.intersectionObserver.observe(el);
           }
         });
       }
@@ -711,7 +766,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
     key: "makeHeaderRowLegacySticky",
     value: function makeHeaderRowLegacySticky(tree, scrollTop) {
       var _tbody$firstChild,
-        _this8 = this;
+        _this9 = this;
       // If header row height is more than 50% of viewport height don't do this
       if (this.isLegacySticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2 || this.isInNestedTable) {
         return;
@@ -750,7 +805,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this8.refireIntersectionObservers();
+          _this9.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "0px";
@@ -839,4 +894,5 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
     }
   }]);
 }(TableNodeView);
+_defineProperty(TableRowNativeStickyWithFallback, "hasScrolledSinceLoad", false);
 export { TableRowNativeStickyWithFallback as default };

package/dist/types/nodeviews/TableRowNativeStickyWithFallback.d.ts

@@ -4,6 +4,8 @@ import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { type PluginInjectionAPI } from '../types';
 import TableNodeView from './TableNodeViewBase';
 export default class TableRowNativeStickyWithFallback extends TableNodeView<HTMLTableRowElement> implements NodeView {
+    static hasScrolledSinceLoad: boolean;
+    static scrollListener?: () => void;
     private nodeVisibilityObserverCleanupFn?;
     cleanup: () => void;
     constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher, api?: PluginInjectionAPI);
@@ -32,6 +34,7 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView<HTML
     private overflowObserver?;
     private stickyStateObserver?;
     private isNativeSticky;
+    private overflowObserverEntries?;
     /**
      * Methods: Nodeview Lifecycle
      */

package/dist/types-ts4.5/nodeviews/TableRowNativeStickyWithFallback.d.ts

@@ -4,6 +4,8 @@ import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { type PluginInjectionAPI } from '../types';
 import TableNodeView from './TableNodeViewBase';
 export default class TableRowNativeStickyWithFallback extends TableNodeView<HTMLTableRowElement> implements NodeView {
+    static hasScrolledSinceLoad: boolean;
+    static scrollListener?: () => void;
     private nodeVisibilityObserverCleanupFn?;
     cleanup: () => void;
     constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher, api?: PluginInjectionAPI);
@@ -32,6 +34,7 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView<HTML
     private overflowObserver?;
     private stickyStateObserver?;
     private isNativeSticky;
+    private overflowObserverEntries?;
     /**
      * Methods: Nodeview Lifecycle
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "15.6.4",
+	"version": "15.6.6",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,12 +37,12 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^6.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^6.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^8.0.0",
-		"@atlaskit/editor-plugin-extension": "9.2.15",
+		"@atlaskit/editor-plugin-extension": "9.3.0",
 		"@atlaskit/editor-plugin-guideline": "^6.0.0",
 		"@atlaskit/editor-plugin-interaction": "^11.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^3.1.0",
 		"@atlaskit/editor-plugin-selection": "^6.1.0",
-		"@atlaskit/editor-plugin-toolbar": "^3.4.0",
+		"@atlaskit/editor-plugin-toolbar": "^3.5.0",
 		"@atlaskit/editor-plugin-user-intent": "^4.0.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "^7.2.0",
@@ -70,7 +70,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.46.0",
+		"@atlaskit/editor-common": "^110.47.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -160,6 +160,9 @@
 		},
 		"platform_editor_table_sticky_header_patch_3": {
 			"type": "boolean"
+		},
+		"platform_editor_table_sticky_header_patch_5": {
+			"type": "boolean"
 		}
 	}
 }