@atlaskit/editor-plugin-table 10.10.7 → 10.11.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-table
 
+## 10.11.1
+
+### Patch Changes
+
+- [#159070](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159070)
+  [`9857b771c1da1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9857b771c1da1) -
+  [ux] [ED-27778] Fix selection state hiding for tables, breakout buttons and layout
+- Updated dependencies
+
+## 10.11.0
+
+### Minor Changes
+
+- [#156919](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156919)
+  [`379f5c27f4939`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/379f5c27f4939) -
+  delay table sticky headers until table is in viewport
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.10.7
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -50,6 +50,9 @@
         {
             "path": "../../editor-plugin-guideline/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../editor-plugin-interaction/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../editor-plugin-selection/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../editor-plugin-guideline/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-interaction/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../editor-plugin-guideline/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-interaction/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/nodeviews/TableComponent.js

@@ -20,6 +20,7 @@ var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _collab = require("@atlaskit/editor-common/collab");
 var _nesting = require("@atlaskit/editor-common/nesting");
+var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -27,6 +28,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../pm-plugins/commands");
 var _autoscrollers = require("../pm-plugins/drag-and-drop/utils/autoscrollers");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -400,10 +402,29 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   return (0, _createClass2.default)(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
+      if ((0, _experiments.editorExperiment)('platform_editor_nodevisibility', false)) {
+        this.initialiseEventListenersAfterMount();
+        return;
+      }
+      var _nodeVisibilityManage = (0, _nodeVisibility.nodeVisibilityManager)(this.props.view.dom),
+        observe = _nodeVisibilityManage.observe;
+      if (this.table) {
+        this.nodeVisibilityObserverCleanupFn = observe({
+          element: this.table,
+          onFirstVisible: function onFirstVisible() {
+            _this2.initialiseEventListenersAfterMount();
+          }
+        });
+      }
+    }
+  }, {
+    key: "initialiseEventListenersAfterMount",
+    value: function initialiseEventListenersAfterMount() {
       var _this$table,
         _this$table2,
         _this$table3,
-        _this2 = this;
+        _this3 = this;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         allowTableResizing = _this$props7.allowTableResizing,
@@ -441,7 +462,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
               var _entry$contentRect3;
               var entry = _step2.value;
-              _this2.wrapperWidth = (_entry$contentRect3 = entry.contentRect) === null || _entry$contentRect3 === void 0 ? void 0 : _entry$contentRect3.width;
+              _this3.wrapperWidth = (_entry$contentRect3 = entry.contentRect) === null || _entry$contentRect3 === void 0 ? void 0 : _entry$contentRect3.width;
             }
           } catch (err) {
             _iterator2.e(err);
@@ -515,6 +536,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
         this.dragAndDropCleanupFn();
       }
+      if (this.nodeVisibilityObserverCleanupFn) {
+        this.nodeVisibilityObserverCleanupFn();
+      }
       (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
       (_this$wrapperReisizeO = this.wrapperReisizeObserver) === null || _this$wrapperReisizeO === void 0 || _this$wrapperReisizeO.disconnect();
       if (this.stickyScrollbar) {
@@ -584,7 +608,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
       var _this$containerWidth,
-        _this3 = this;
+        _this4 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$props10 = this.props,
         getNode = _this$props10.getNode,
@@ -661,26 +685,26 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           }
           var scalePercent = 1;
           requestAnimationFrame(function () {
-            var _this3$props$options, _this3$props$options2;
+            var _this4$props$options, _this4$props$options2;
             // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
             // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
             // inside of getTableScalingPercent returns 0.
-            if (!((_this3$props$options = _this3.props.options) !== null && _this3$props$options !== void 0 && _this3$props$options.isCommentEditor) || (_this3$props$options2 = _this3.props.options) !== null && _this3$props$options2 !== void 0 && _this3$props$options2.isCommentEditor && tableNode.attrs.width) {
+            if (!((_this4$props$options = _this4.props.options) !== null && _this4$props$options !== void 0 && _this4$props$options.isCommentEditor) || (_this4$props$options2 = _this4.props.options) !== null && _this4$props$options2 !== void 0 && _this4$props$options2.isCommentEditor && tableNode.attrs.width) {
               scalePercent = (0, _misc.getTableScalingPercent)(tableNode,
               // Ignored via go/ees005
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              _this3.table, shouldUseIncreasedScalingPercent);
+              _this4.table, shouldUseIncreasedScalingPercent);
             } else {
               // Ignored via go/ees005
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(tableNode, _this3.table);
+              scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(tableNode, _this4.table);
             }
 
             // Request animation frame required for Firefox
             (0, _resizeState.updateColgroup)(resizeState,
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            _this3.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
+            _this4.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
           });
         }
       }
@@ -700,7 +724,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props$options8,
         _this$props$options9,
         _this$wrapper,
-        _this4 = this;
+        _this5 = this;
       var _this$props11 = this.props,
         view = _this$props11.view,
         getNode = _this$props11.getNode,
@@ -748,10 +772,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           // that happens when a table is nested in expand and expand's width is
           // changed via breakout button
           window.requestAnimationFrame(function () {
-            _this4.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? _this4.updateShadowStateDebounced : _this4.updateShadowState,
+            _this5.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? _this5.updateShadowStateDebounced : _this5.updateShadowState,
             // Ignored via go/ees005
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
-            _this4.table, _this4.wrapper);
+            _this5.table, _this5.wrapper);
           });
         } else {
           this.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
@@ -828,7 +852,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this,
+      var _this6 = this,
         _this$props$options10;
       var _this$props12 = this.props,
         view = _this$props12.view,
@@ -918,8 +942,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableContainerWidth: tableContainerWidth,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         getScrollOffset: function getScrollOffset() {
-          var _this5$wrapper;
-          return ((_this5$wrapper = _this5.wrapper) === null || _this5$wrapper === void 0 ? void 0 : _this5$wrapper.scrollLeft) || 0;
+          var _this6$wrapper;
+          return ((_this6$wrapper = _this6.wrapper) === null || _this6$wrapper === void 0 ? void 0 : _this6$wrapper.scrollLeft) || 0;
         },
         tableWrapperHeight: this.state.tableWrapperHeight,
         api: pluginInjectionApi,
@@ -991,12 +1015,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this5$wrapper2;
-          return ((_this5$wrapper2 = _this5.wrapper) === null || _this5$wrapper2 === void 0 ? void 0 : _this5$wrapper2.scrollLeft) || 0;
+          var _this6$wrapper2;
+          return ((_this6$wrapper2 = _this6.wrapper) === null || _this6$wrapper2 === void 0 ? void 0 : _this6$wrapper2.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this5$wrapper3;
-          return ((_this5$wrapper3 = _this5.wrapper) === null || _this5$wrapper3 === void 0 ? void 0 : _this5$wrapper3.clientWidth) || 760;
+          var _this6$wrapper3;
+          return ((_this6$wrapper3 = _this6.wrapper) === null || _this6$wrapper3 === void 0 ? void 0 : _this6$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
         contentEditable: false
@@ -1018,14 +1042,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
-          _this5.wrapper = elem;
+          _this6.wrapper = elem;
           if (elem) {
-            _this5.props.contentDOM(elem);
+            _this6.props.contentDOM(elem);
             var tableElement = elem.querySelector('table');
-            if (tableElement !== _this5.table) {
-              _this5.table = tableElement;
-              _this5.createShadowSentinels(_this5.table);
-              _this5.observeTable(_this5.table);
+            if (tableElement !== _this6.table) {
+              _this6.table = tableElement;
+              _this6.createShadowSentinels(_this6.table);
+              _this6.observeTable(_this6.table);
             }
           }
         }

package/dist/cjs/nodeviews/TableComponentWithSharedState.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorTables = require("@atlaskit/editor-tables");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _useInternalTablePluginStateSelector = require("../ui/hooks/useInternalTablePluginStateSelector");
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
@@ -42,6 +43,9 @@ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (
   // widthState
   var width = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'width.width');
   var lineLength = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'width.lineLength');
+
+  // interactionState
+  var interaction = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'interaction.interactionState');
   return {
     tableState: undefined,
     widthState: undefined,
@@ -59,15 +63,17 @@ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (
     selection: selection,
     mode: mode,
     width: width,
-    lineLength: lineLength
+    lineLength: lineLength,
+    interaction: interaction
   };
 }, function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection', 'editorViewMode']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection', 'editorViewMode', 'interaction']),
     widthState = _useSharedPluginState.widthState,
     tableState = _useSharedPluginState.tableState,
     mediaState = _useSharedPluginState.mediaState,
     selectionState = _useSharedPluginState.selectionState,
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
+    interactionState = _useSharedPluginState.interactionState;
   var tableStateInternal = tableState;
   return {
     tableState: tableState,
@@ -86,7 +92,8 @@ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (
     selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
     mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
     width: widthState === null || widthState === void 0 ? void 0 : widthState.width,
-    lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength
+    lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    interaction: interactionState === null || interactionState === void 0 ? void 0 : interactionState.interactionState
   };
 });
 
@@ -124,7 +131,8 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     lineLength = _useSharedState.lineLength,
     ordering = _useSharedState.ordering,
     selection = _useSharedState.selection,
-    width = _useSharedState.width;
+    width = _useSharedState.width,
+    interaction = _useSharedState.interaction;
   var isLivePageViewMode = mode === 'view';
   if ((0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false) && !tableState) {
     return null;
@@ -158,7 +166,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
     allowTableAlignment: allowTableAlignment,
     allowTableResizing: allowTableResizing,
-    tableActive: tableActive && !isLivePageViewMode,
+    tableActive: tableActive && !isLivePageViewMode && (interaction !== 'hasNotHadInteraction' || !(0, _platformFeatureFlags.fg)('platform_editor_hide_expand_selection_states')),
     ordering: ordering,
     isResizing: isResizing,
     getNode: getNode,

package/dist/cjs/nodeviews/TableResizer.js

@@ -19,6 +19,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _resizer = require("@atlaskit/editor-common/resizer");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("@atlaskit/editor-tables/utils");
@@ -149,6 +150,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
   var isResizing = (0, _react.useRef)(false);
   var areResizeMetaKeysPressed = (0, _react.useRef)(false);
   var resizerRef = (0, _react.useRef)(null);
+  var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.interactionState');
   var _useSharedState = useSharedState(pluginInjectionApi),
     widthToWidest = _useSharedState.widthToWidest;
 
@@ -170,6 +172,9 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     if (typeof tableFromSelectionPosition !== 'number') {
       return false;
     }
+    if (interactionState === 'hasNotHadInteraction' && (0, _platformFeatureFlags.fg)('platform_editor_hide_expand_selection_states')) {
+      return false;
+    }
     var currentNodePosition;
     try {
       // The React Table and the ProseMirror can endup out-of-sync
@@ -182,7 +187,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       return false;
     }
     return tableFromSelectionPosition === currentNodePosition;
-  }, [tableFromSelectionPosition, getPos]);
+  }, [tableFromSelectionPosition, interactionState, getPos]);
   var resizerMinWidth = getResizerMinWidth(node);
   var handleSize = getResizerHandleHeight(tableRef);
   var _useMeasureFramerate = (0, _analytics2.useMeasureFramerate)(),

package/dist/cjs/nodeviews/TableRow.js

@@ -14,9 +14,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _nesting = require("@atlaskit/editor-common/nesting");
+var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _commands = require("../pm-plugins/sticky-headers/commands");
@@ -84,19 +86,38 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
       _this.isInNestedTable = (0, _nesting.getParentOfTypeCount)(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
     }
     if (_this.isHeaderRow) {
-      _this.dom.setAttribute('data-header-row', 'true');
-      if (_this.isStickyHeaderEnabled) {
-        _this.subscribe();
+      if ((0, _experiments.editorExperiment)('platform_editor_nodevisibility', false)) {
+        _this.subscribeWhenRowVisible();
+      } else {
+        var _nodeVisibilityManage = (0, _nodeVisibility.nodeVisibilityManager)(view.dom),
+          observe = _nodeVisibilityManage.observe;
+        _this.nodeVisibilityObserverCleanupFn = observe({
+          element: _this.contentDOM,
+          onFirstVisible: function onFirstVisible() {
+            _this.subscribeWhenRowVisible();
+          }
+        });
       }
     }
     return _this;
   }
-
-  /**
-   * Variables
-   */
   (0, _inherits2.default)(TableRow, _TableNodeView);
   return (0, _createClass2.default)(TableRow, [{
+    key: "subscribeWhenRowVisible",
+    value: function subscribeWhenRowVisible() {
+      if (this.listening) {
+        return;
+      }
+      this.dom.setAttribute('data-header-row', 'true');
+      if (this.isStickyHeaderEnabled) {
+        this.subscribe();
+      }
+    }
+
+    /**
+     * Variables
+     */
+  }, {
     key: "update",
     value:
     /**
@@ -138,6 +159,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
     value: function destroy() {
       if (this.isStickyHeaderEnabled) {
         this.unsubscribe();
+        this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
         var tree = (0, _dom2.getTree)(this.dom);
         if (tree) {
           this.makeRowHeaderNotSticky(tree.table, true);

package/dist/es2019/nodeviews/TableComponent.js

@@ -7,6 +7,7 @@ import { injectIntl } from 'react-intl-next';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
+import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
@@ -14,6 +15,7 @@ import { akEditorTableNumberColumnWidth, akEditorTableToolbarSize as tableToolba
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { autoSizeTable, clearHoverSelection } from '../pm-plugins/commands';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils/autoscrollers';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -385,6 +387,23 @@ class TableComponent extends React.Component {
     }
   }
   componentDidMount() {
+    if (editorExperiment('platform_editor_nodevisibility', false)) {
+      this.initialiseEventListenersAfterMount();
+      return;
+    }
+    const {
+      observe
+    } = nodeVisibilityManager(this.props.view.dom);
+    if (this.table) {
+      this.nodeVisibilityObserverCleanupFn = observe({
+        element: this.table,
+        onFirstVisible: () => {
+          this.initialiseEventListenersAfterMount();
+        }
+      });
+    }
+  }
+  initialiseEventListenersAfterMount() {
     var _this$table, _this$table2, _this$table3;
     const {
       allowColumnResizing,
@@ -488,6 +507,9 @@ class TableComponent extends React.Component {
     if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
       this.dragAndDropCleanupFn();
     }
+    if (this.nodeVisibilityObserverCleanupFn) {
+      this.nodeVisibilityObserverCleanupFn();
+    }
     (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
     (_this$wrapperReisizeO = this.wrapperReisizeObserver) === null || _this$wrapperReisizeO === void 0 ? void 0 : _this$wrapperReisizeO.disconnect();
     if (this.stickyScrollbar) {

package/dist/es2019/nodeviews/TableComponentWithSharedState.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { findTable } from '@atlaskit/editor-tables';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 import TableComponent from './TableComponent';
@@ -36,6 +37,9 @@ const useSharedState = sharedPluginStateHookMigratorFactory(api => {
   // widthState
   const width = useSharedPluginStateSelector(api, 'width.width');
   const lineLength = useSharedPluginStateSelector(api, 'width.lineLength');
+
+  // interactionState
+  const interaction = useSharedPluginStateSelector(api, 'interaction.interactionState');
   return {
     tableState: undefined,
     widthState: undefined,
@@ -53,7 +57,8 @@ const useSharedState = sharedPluginStateHookMigratorFactory(api => {
     selection,
     mode,
     width,
-    lineLength
+    lineLength,
+    interaction
   };
 }, api => {
   const {
@@ -61,8 +66,9 @@ const useSharedState = sharedPluginStateHookMigratorFactory(api => {
     tableState,
     mediaState,
     selectionState,
-    editorViewModeState
-  } = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']);
+    editorViewModeState,
+    interactionState
+  } = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode', 'interaction']);
   const tableStateInternal = tableState;
   return {
     tableState,
@@ -81,7 +87,8 @@ const useSharedState = sharedPluginStateHookMigratorFactory(api => {
     selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
     mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
     width: widthState === null || widthState === void 0 ? void 0 : widthState.width,
-    lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength
+    lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    interaction: interactionState === null || interactionState === void 0 ? void 0 : interactionState.interactionState
   };
 });
 
@@ -120,7 +127,8 @@ export const TableComponentWithSharedState = ({
     lineLength,
     ordering,
     selection,
-    width
+    width,
+    interaction
   } = useSharedState(api);
   const isLivePageViewMode = mode === 'view';
   if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
@@ -155,7 +163,7 @@ export const TableComponentWithSharedState = ({
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
     allowTableAlignment: allowTableAlignment,
     allowTableResizing: allowTableResizing,
-    tableActive: tableActive && !isLivePageViewMode,
+    tableActive: tableActive && !isLivePageViewMode && (interaction !== 'hasNotHadInteraction' || !fg('platform_editor_hide_expand_selection_states')),
     ordering: ordering,
     isResizing: isResizing,
     getNode: getNode,

package/dist/es2019/nodeviews/TableResizer.js

@@ -9,6 +9,7 @@ import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keyma
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -137,6 +138,7 @@ export const TableResizer = ({
   const isResizing = useRef(false);
   const areResizeMetaKeysPressed = useRef(false);
   const resizerRef = useRef(null);
+  const interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
   const {
     widthToWidest
   } = useSharedState(pluginInjectionApi);
@@ -157,6 +159,9 @@ export const TableResizer = ({
     if (typeof tableFromSelectionPosition !== 'number') {
       return false;
     }
+    if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
+      return false;
+    }
     let currentNodePosition;
     try {
       // The React Table and the ProseMirror can endup out-of-sync
@@ -169,7 +174,7 @@ export const TableResizer = ({
       return false;
     }
     return tableFromSelectionPosition === currentNodePosition;
-  }, [tableFromSelectionPosition, getPos]);
+  }, [tableFromSelectionPosition, interactionState, getPos]);
   const resizerMinWidth = getResizerMinWidth(node);
   const handleSize = getResizerHandleHeight(tableRef);
   const {

package/dist/es2019/nodeviews/TableRow.js

@@ -2,9 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
+import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -69,12 +71,30 @@ export default class TableRow extends TableNodeView {
       this.isInNestedTable = getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
     }
     if (this.isHeaderRow) {
-      this.dom.setAttribute('data-header-row', 'true');
-      if (this.isStickyHeaderEnabled) {
-        this.subscribe();
+      if (editorExperiment('platform_editor_nodevisibility', false)) {
+        this.subscribeWhenRowVisible();
+      } else {
+        const {
+          observe
+        } = nodeVisibilityManager(view.dom);
+        this.nodeVisibilityObserverCleanupFn = observe({
+          element: this.contentDOM,
+          onFirstVisible: () => {
+            this.subscribeWhenRowVisible();
+          }
+        });
       }
     }
   }
+  subscribeWhenRowVisible() {
+    if (this.listening) {
+      return;
+    }
+    this.dom.setAttribute('data-header-row', 'true');
+    if (this.isStickyHeaderEnabled) {
+      this.subscribe();
+    }
+  }
 
   /**
    * Variables
@@ -117,6 +137,7 @@ export default class TableRow extends TableNodeView {
   destroy() {
     if (this.isStickyHeaderEnabled) {
       this.unsubscribe();
+      this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
       const tree = getTree(this.dom);
       if (tree) {
         this.makeRowHeaderNotSticky(tree.table, true);