@atlaskit/editor-plugin-table 15.6.2 → 15.6.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 15.6.3
+
+### Patch Changes
+
+- [`dbe5bb7c0221c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dbe5bb7c0221c) -
+  Only set native sticky header classes if a scroll event has occurred
+- [`dbe5bb7c0221c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dbe5bb7c0221c) -
+  Remove top margin change when native table sticky headers are enabled
+- Updated dependencies
+
 ## 15.6.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableRowNativeStickyWithFallback.js

@@ -18,6 +18,7 @@ var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/plugin-key");
@@ -76,6 +77,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
     (0, _defineProperty2.default)(_this, "padding", 0);
     (0, _defineProperty2.default)(_this, "top", 0);
     (0, _defineProperty2.default)(_this, "isNativeSticky", false);
+    (0, _defineProperty2.default)(_this, "hasScrolledSinceLoad", false);
     /**
      * Methods
      */
@@ -182,6 +184,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);
@@ -225,12 +228,51 @@ 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 ((0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_3')) {
+          this.scrollListener = function () {
+            if (!_this2.hasScrolledSinceLoad) {
+              _this2.hasScrolledSinceLoad = true;
+              // 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', this.scrollListener, {
+            passive: true,
+            once: true
+          });
+        }
       }
       this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth.bind(this));
 
@@ -269,6 +311,11 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
       }
+      if (this.scrollListener && this.editorScrollableElement) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.editorScrollableElement.removeEventListener('scroll', this.scrollListener);
+        this.scrollListener = undefined;
+      }
       this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -285,7 +332,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;
@@ -299,16 +346,21 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
           if (!(observer.root instanceof HTMLElement)) {
             return;
           }
+          // Only apply classes if page has scrolled since load
+          if (!_this3.hasScrolledSinceLoad && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_3')) {
+            _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);
     }
@@ -321,7 +373,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;
       }
@@ -333,14 +385,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) {
               tableContainer.dataset.tableHeaderIsStuck = 'false';
             }
@@ -353,7 +405,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;
       }
@@ -387,7 +439,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
@@ -413,16 +465,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);
               }
             });
           };
@@ -437,7 +489,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).
 
@@ -445,14 +497,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
               });
@@ -467,32 +519,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);
             }
           }
@@ -502,13 +554,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,
@@ -516,15 +568,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
@@ -699,12 +751,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);
           }
         });
       }
@@ -713,7 +765,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;
@@ -752,7 +804,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this8.refireIntersectionObservers();
+          _this9.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "0px";

package/dist/es2019/nodeviews/TableRowNativeStickyWithFallback.js

@@ -6,6 +6,7 @@ import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { tableMarginTop } from '@atlaskit/editor-common/styles';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
@@ -60,6 +61,7 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     _defineProperty(this, "padding", 0);
     _defineProperty(this, "top", 0);
     _defineProperty(this, "isNativeSticky", false);
+    _defineProperty(this, "hasScrolledSinceLoad", false);
     /**
      * Methods
      */
@@ -160,6 +162,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);
@@ -205,6 +208,44 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     if (this.editorScrollableElement) {
       this.initObservers();
       this.topPosEditorElement = getTop(this.editorScrollableElement);
+      if (fg('platform_editor_table_sticky_header_patch_3')) {
+        this.scrollListener = () => {
+          if (!this.hasScrolledSinceLoad) {
+            this.hasScrolledSinceLoad = true;
+            // 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', this.scrollListener, {
+          passive: true,
+          once: true
+        });
+      }
     }
     this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth.bind(this));
 
@@ -241,6 +282,11 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
+    if (this.scrollListener && this.editorScrollableElement) {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      this.editorScrollableElement.removeEventListener('scroll', this.scrollListener);
+      this.scrollListener = undefined;
+    }
     this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -268,6 +314,11 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
         if (!(observer.root instanceof HTMLElement)) {
           return;
         }
+        // Only apply classes if page has scrolled since load
+        if (!this.hasScrolledSinceLoad && fg('platform_editor_table_sticky_header_patch_3')) {
+          this.overflowObserverEntries = entries;
+          return;
+        }
         if (entry.isIntersecting) {
           observer.root.classList.add(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
           this.dom.classList.add(ClassName.NATIVE_STICKY);
@@ -335,8 +386,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);

package/dist/esm/nodeviews/TableRowNativeStickyWithFallback.js

@@ -13,6 +13,7 @@ import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { tableMarginTop } from '@atlaskit/editor-common/styles';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
@@ -69,6 +70,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
     _defineProperty(_this, "padding", 0);
     _defineProperty(_this, "top", 0);
     _defineProperty(_this, "isNativeSticky", false);
+    _defineProperty(_this, "hasScrolledSinceLoad", false);
     /**
      * Methods
      */
@@ -175,6 +177,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);
@@ -218,12 +221,51 @@ 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 (fg('platform_editor_table_sticky_header_patch_3')) {
+          this.scrollListener = function () {
+            if (!_this2.hasScrolledSinceLoad) {
+              _this2.hasScrolledSinceLoad = true;
+              // 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', this.scrollListener, {
+            passive: true,
+            once: true
+          });
+        }
       }
       this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth.bind(this));
 
@@ -262,6 +304,11 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
       }
+      if (this.scrollListener && this.editorScrollableElement) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.editorScrollableElement.removeEventListener('scroll', this.scrollListener);
+        this.scrollListener = undefined;
+      }
       this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -278,7 +325,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;
@@ -292,16 +339,21 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
           if (!(observer.root instanceof HTMLElement)) {
             return;
           }
+          // Only apply classes if page has scrolled since load
+          if (!_this3.hasScrolledSinceLoad && fg('platform_editor_table_sticky_header_patch_3')) {
+            _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);
     }
@@ -314,7 +366,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;
       }
@@ -326,14 +378,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) {
               tableContainer.dataset.tableHeaderIsStuck = 'false';
             }
@@ -346,7 +398,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;
       }
@@ -380,7 +432,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
@@ -406,16 +458,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);
               }
             });
           };
@@ -430,7 +482,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).
 
@@ -438,14 +490,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
               });
@@ -460,32 +512,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);
             }
           }
@@ -495,13 +547,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,
@@ -509,15 +561,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
@@ -692,12 +744,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);
           }
         });
       }
@@ -706,7 +758,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;
@@ -745,7 +797,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this8.refireIntersectionObservers();
+          _this9.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "0px";

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

@@ -32,6 +32,9 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView<HTML
     private overflowObserver?;
     private stickyStateObserver?;
     private isNativeSticky;
+    private hasScrolledSinceLoad;
+    private scrollListener?;
+    private overflowObserverEntries?;
     /**
      * Methods: Nodeview Lifecycle
      */

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

@@ -32,6 +32,9 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView<HTML
     private overflowObserver?;
     private stickyStateObserver?;
     private isNativeSticky;
+    private hasScrolledSinceLoad;
+    private scrollListener?;
+    private overflowObserverEntries?;
     /**
      * Methods: Nodeview Lifecycle
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "15.6.2",
+	"version": "15.6.3",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,9 +37,9 @@
 		"@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.14",
+		"@atlaskit/editor-plugin-extension": "9.2.15",
 		"@atlaskit/editor-plugin-guideline": "^6.0.0",
-		"@atlaskit/editor-plugin-interaction": "^10.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",
@@ -55,11 +55,11 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-		"@atlaskit/primitives": "^16.4.0",
+		"@atlaskit/primitives": "^17.0.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tmp-editor-statsig": "^16.0.0",
 		"@atlaskit/toggle": "^15.2.0",
-		"@atlaskit/tokens": "^8.6.0",
+		"@atlaskit/tokens": "^9.0.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -157,6 +157,9 @@
 		},
 		"platform_editor_change_table_nesting_check": {
 			"type": "boolean"
+		},
+		"platform_editor_table_sticky_header_patch_3": {
+			"type": "boolean"
 		}
 	}
 }