@atlaskit/editor-plugin-table 10.11.0 → 10.11.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 10.11.2
+
+### Patch Changes
+
+- [#161309](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161309)
+  [`ec4edba1f5f2d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ec4edba1f5f2d) -
+  Fix selection colour bug after deleting a column or row
+- Updated dependencies
+
+## 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

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/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/pm-plugins/commands/delete.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.deleteColumnsCommand = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _pluginKey = require("../plugin-key");
 var _deleteColumns = require("../transforms/delete-columns");
 var _getAllowAddColumnCustomStep = require("../utils/get-allow-add-column-custom-step");
 var deleteColumnsCommand = exports.deleteColumnsCommand = function deleteColumnsCommand(rect, api) {
@@ -13,6 +15,16 @@ var deleteColumnsCommand = exports.deleteColumnsCommand = function deleteColumns
   var isCommentEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   return function (state, dispatch, view) {
     var tr = (0, _deleteColumns.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), api, view, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(state.tr);
+    // If we delete a column we should also clean up the hover selection
+    if ((0, _platformFeatureFlags.fg)('platform_editor_remove_slow_table_transactions')) {
+      tr.setMeta(_pluginKey.pluginKey, {
+        type: 'CLEAR_HOVER_SELECTION',
+        data: {
+          isInDanger: false,
+          isWholeTableInDanger: false
+        }
+      });
+    }
     if (dispatch) {
       dispatch(tr);
       return true;

package/dist/cjs/pm-plugins/transforms/delete-rows.js

@@ -10,6 +10,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _pluginKey = require("../plugin-key");
 var _merge = require("./merge");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -116,6 +118,17 @@ var deleteRows = exports.deleteRows = function deleteRows(rect) {
       return tr;
     }
     var cursorPos = getNextCursorPos(newTable, rowsToDelete);
+
+    // If we delete a row we should also clean up the hover selection
+    if ((0, _platformFeatureFlags.fg)('platform_editor_remove_slow_table_transactions')) {
+      tr.setMeta(_pluginKey.pluginKey, {
+        type: 'CLEAR_HOVER_SELECTION',
+        data: {
+          isInDanger: false,
+          isWholeTableInDanger: false
+        }
+      });
+    }
     return tr.replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable)
     // move cursor before the deleted rows if possible, otherwise - to the first row
     .setSelection(_state.Selection.near(tr.doc.resolve(table.pos + cursorPos)));

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/pm-plugins/commands/delete.js

@@ -1,7 +1,19 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { pluginKey } from '../plugin-key';
 import { deleteColumns } from '../transforms/delete-columns';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 export const deleteColumnsCommand = (rect, api, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false) => (state, dispatch, view) => {
   const tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), api, view, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(state.tr);
+  // If we delete a column we should also clean up the hover selection
+  if (fg('platform_editor_remove_slow_table_transactions')) {
+    tr.setMeta(pluginKey, {
+      type: 'CLEAR_HOVER_SELECTION',
+      data: {
+        isInDanger: false,
+        isWholeTableInDanger: false
+      }
+    });
+  }
   if (dispatch) {
     dispatch(tr);
     return true;

package/dist/es2019/pm-plugins/transforms/delete-rows.js

@@ -1,6 +1,8 @@
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { pluginKey } from '../plugin-key';
 import { mergeEmptyColumns } from './merge';
 export const deleteRows = (rect, isHeaderRowRequired = false) => tr => {
   const table = findTable(tr.selection);
@@ -97,6 +99,17 @@ export const deleteRows = (rect, isHeaderRowRequired = false) => tr => {
     return tr;
   }
   const cursorPos = getNextCursorPos(newTable, rowsToDelete);
+
+  // If we delete a row we should also clean up the hover selection
+  if (fg('platform_editor_remove_slow_table_transactions')) {
+    tr.setMeta(pluginKey, {
+      type: 'CLEAR_HOVER_SELECTION',
+      data: {
+        isInDanger: false,
+        isWholeTableInDanger: false
+      }
+    });
+  }
   return tr.replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable)
   // move cursor before the deleted rows if possible, otherwise - to the first row
   .setSelection(Selection.near(tr.doc.resolve(table.pos + cursorPos)));

package/dist/esm/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 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
   // widthState
   var width = useSharedPluginStateSelector(api, 'width.width');
   var lineLength = useSharedPluginStateSelector(api, 'width.lineLength');
+
+  // interactionState
+  var interaction = useSharedPluginStateSelector(api, 'interaction.interactionState');
   return {
     tableState: undefined,
     widthState: undefined,
@@ -53,15 +57,17 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
     selection: selection,
     mode: mode,
     width: width,
-    lineLength: lineLength
+    lineLength: lineLength,
+    interaction: interaction
   };
 }, function (api) {
-  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']),
+  var _useSharedPluginState = 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,
@@ -80,7 +86,8 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (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
   };
 });
 
@@ -118,7 +125,8 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     lineLength = _useSharedState.lineLength,
     ordering = _useSharedState.ordering,
     selection = _useSharedState.selection,
-    width = _useSharedState.width;
+    width = _useSharedState.width,
+    interaction = _useSharedState.interaction;
   var isLivePageViewMode = mode === 'view';
   if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
     return null;
@@ -152,7 +160,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     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/esm/nodeviews/TableResizer.js

@@ -13,6 +13,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';
@@ -139,6 +140,7 @@ export var TableResizer = function TableResizer(_ref) {
   var isResizing = useRef(false);
   var areResizeMetaKeysPressed = useRef(false);
   var resizerRef = useRef(null);
+  var interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
   var _useSharedState = useSharedState(pluginInjectionApi),
     widthToWidest = _useSharedState.widthToWidest;
 
@@ -160,6 +162,9 @@ export var TableResizer = function TableResizer(_ref) {
     if (typeof tableFromSelectionPosition !== 'number') {
       return false;
     }
+    if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
+      return false;
+    }
     var currentNodePosition;
     try {
       // The React Table and the ProseMirror can endup out-of-sync
@@ -172,7 +177,7 @@ export var TableResizer = function TableResizer(_ref) {
       return false;
     }
     return tableFromSelectionPosition === currentNodePosition;
-  }, [tableFromSelectionPosition, getPos]);
+  }, [tableFromSelectionPosition, interactionState, getPos]);
   var resizerMinWidth = getResizerMinWidth(node);
   var handleSize = getResizerHandleHeight(tableRef);
   var _useMeasureFramerate = useMeasureFramerate(),

package/dist/esm/pm-plugins/commands/delete.js

@@ -1,3 +1,5 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { pluginKey } from '../plugin-key';
 import { deleteColumns } from '../transforms/delete-columns';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 export var deleteColumnsCommand = function deleteColumnsCommand(rect, api) {
@@ -7,6 +9,16 @@ export var deleteColumnsCommand = function deleteColumnsCommand(rect, api) {
   var isCommentEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   return function (state, dispatch, view) {
     var tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), api, view, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(state.tr);
+    // If we delete a column we should also clean up the hover selection
+    if (fg('platform_editor_remove_slow_table_transactions')) {
+      tr.setMeta(pluginKey, {
+        type: 'CLEAR_HOVER_SELECTION',
+        data: {
+          isInDanger: false,
+          isWholeTableInDanger: false
+        }
+      });
+    }
     if (dispatch) {
       dispatch(tr);
       return true;

package/dist/esm/pm-plugins/transforms/delete-rows.js

@@ -5,6 +5,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { pluginKey } from '../plugin-key';
 import { mergeEmptyColumns } from './merge';
 export var deleteRows = function deleteRows(rect) {
   var isHeaderRowRequired = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -109,6 +111,17 @@ export var deleteRows = function deleteRows(rect) {
       return tr;
     }
     var cursorPos = getNextCursorPos(newTable, rowsToDelete);
+
+    // If we delete a row we should also clean up the hover selection
+    if (fg('platform_editor_remove_slow_table_transactions')) {
+      tr.setMeta(pluginKey, {
+        type: 'CLEAR_HOVER_SELECTION',
+        data: {
+          isInDanger: false,
+          isWholeTableInDanger: false
+        }
+      });
+    }
     return tr.replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable)
     // move cursor before the deleted rows if possible, otherwise - to the first row
     .setSelection(Selection.near(tr.doc.resolve(table.pos + cursorPos)));

package/dist/types/tablePluginType.d.ts

@@ -8,6 +8,7 @@ import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmo
 import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { PluginConfig, TableSharedState } from './types';
@@ -47,7 +48,8 @@ export type TablePluginDependencies = [
     OptionalPlugin<MediaPlugin>,
     OptionalPlugin<EditorViewModePlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<ExtensionPlugin>
+    OptionalPlugin<ExtensionPlugin>,
+    OptionalPlugin<InteractionPlugin>
 ];
 export type TablePlugin = NextEditorPlugin<'table', {
     pluginConfiguration: TablePluginOptions | undefined;

package/dist/types-ts4.5/tablePluginType.d.ts

@@ -8,6 +8,7 @@ import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmo
 import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { PluginConfig, TableSharedState } from './types';
@@ -47,7 +48,8 @@ export type TablePluginDependencies = [
     OptionalPlugin<MediaPlugin>,
     OptionalPlugin<EditorViewModePlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<ExtensionPlugin>
+    OptionalPlugin<ExtensionPlugin>,
+    OptionalPlugin<InteractionPlugin>
 ];
 export type TablePlugin = NextEditorPlugin<'table', {
     pluginConfiguration: TablePluginOptions | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.11.0",
+	"version": "10.11.2",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^105.10.0",
+		"@atlaskit/editor-common": "^105.11.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
@@ -41,6 +41,7 @@
 		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
 		"@atlaskit/editor-plugin-extension": "5.4.2",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
+		"@atlaskit/editor-plugin-interaction": "^1.1.0",
 		"@atlaskit/editor-plugin-selection": "^2.2.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -54,10 +55,10 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.0.0",
+		"@atlaskit/tmp-editor-statsig": "^5.1.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.9.0",
-		"@atlaskit/tooltip": "^20.0.0",
+		"@atlaskit/tooltip": "^20.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"classnames": "^2.2.5",
@@ -218,6 +219,9 @@
 		},
 		"platform_editor_table_fw_numcol_overflow_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_hide_expand_selection_states": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -11,6 +11,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
@@ -68,6 +69,9 @@ const useSharedState = sharedPluginStateHookMigratorFactory(
 		const width = useSharedPluginStateSelector(api, 'width.width');
 		const lineLength = useSharedPluginStateSelector(api, 'width.lineLength');
 
+		// interactionState
+		const interaction = useSharedPluginStateSelector(api, 'interaction.interactionState');
+
 		return {
 			tableState: undefined,
 			widthState: undefined,
@@ -86,11 +90,25 @@ const useSharedState = sharedPluginStateHookMigratorFactory(
 			mode,
 			width,
 			lineLength,
+			interaction,
 		};
 	},
 	(api: PluginInjectionAPI | undefined) => {
-		const { widthState, tableState, mediaState, selectionState, editorViewModeState } =
-			useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']);
+		const {
+			widthState,
+			tableState,
+			mediaState,
+			selectionState,
+			editorViewModeState,
+			interactionState,
+		} = useSharedPluginState(api, [
+			'width',
+			'table',
+			'media',
+			'selection',
+			'editorViewMode',
+			'interaction',
+		]);
 		const tableStateInternal = tableState as TableSharedStateInternal | undefined;
 
 		return {
@@ -111,6 +129,7 @@ const useSharedState = sharedPluginStateHookMigratorFactory(
 			mode: editorViewModeState?.mode,
 			width: widthState?.width,
 			lineLength: widthState?.lineLength,
+			interaction: interactionState?.interactionState,
 		};
 	},
 );
@@ -151,7 +170,9 @@ export const TableComponentWithSharedState = ({
 		ordering,
 		selection,
 		width,
+		interaction,
 	} = useSharedState(api);
+
 	const isLivePageViewMode = mode === 'view';
 
 	if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
@@ -195,7 +216,12 @@ export const TableComponentWithSharedState = ({
 			isTableScalingEnabled={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/src/nodeviews/TableResizer.tsx

@@ -22,6 +22,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import type { HandleResize, HandleSize } from '@atlaskit/editor-common/resizer';
 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 type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
@@ -231,6 +232,12 @@ export const TableResizer = ({
 	const isResizing = useRef(false);
 	const areResizeMetaKeysPressed = useRef(false);
 	const resizerRef = useRef<ResizerNextHandler>(null);
+
+	const interactionState = useSharedPluginStateSelector(
+		pluginInjectionApi,
+		'interaction.interactionState',
+	);
+
 	const { widthToWidest } = useSharedState(pluginInjectionApi);
 
 	// used to reposition tooltip when table is resizing via keyboard
@@ -250,6 +257,13 @@ export const TableResizer = ({
 			return false;
 		}
 
+		if (
+			interactionState === 'hasNotHadInteraction' &&
+			fg('platform_editor_hide_expand_selection_states')
+		) {
+			return false;
+		}
+
 		let currentNodePosition: number | undefined;
 		try {
 			// The React Table and the ProseMirror can endup out-of-sync
@@ -263,7 +277,7 @@ export const TableResizer = ({
 		}
 
 		return tableFromSelectionPosition === currentNodePosition;
-	}, [tableFromSelectionPosition, getPos]);
+	}, [tableFromSelectionPosition, interactionState, getPos]);
 
 	const resizerMinWidth = getResizerMinWidth(node);
 	const handleSize = getResizerHandleHeight(tableRef);

package/src/pm-plugins/commands/delete.ts

@@ -1,7 +1,9 @@
 import type { Command } from '@atlaskit/editor-common/types';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { PluginInjectionAPI } from '../../types';
+import { pluginKey } from '../plugin-key';
 import { deleteColumns } from '../transforms/delete-columns';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 
@@ -25,6 +27,16 @@ export const deleteColumnsCommand =
 			shouldUseIncreasedScalingPercent,
 			isCommentEditor,
 		)(state.tr);
+		// If we delete a column we should also clean up the hover selection
+		if (fg('platform_editor_remove_slow_table_transactions')) {
+			tr.setMeta(pluginKey, {
+				type: 'CLEAR_HOVER_SELECTION',
+				data: {
+					isInDanger: false,
+					isWholeTableInDanger: false,
+				},
+			});
+		}
 		if (dispatch) {
 			dispatch(tr);
 			return true;

package/src/pm-plugins/transforms/delete-rows.ts

@@ -5,6 +5,9 @@ import { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+import { pluginKey } from '../plugin-key';
 
 import { mergeEmptyColumns } from './merge';
 
@@ -127,6 +130,17 @@ export const deleteRows =
 		}
 		const cursorPos = getNextCursorPos(newTable, rowsToDelete);
 
+		// If we delete a row we should also clean up the hover selection
+		if (fg('platform_editor_remove_slow_table_transactions')) {
+			tr.setMeta(pluginKey, {
+				type: 'CLEAR_HOVER_SELECTION',
+				data: {
+					isInDanger: false,
+					isWholeTableInDanger: false,
+				},
+			});
+		}
+
 		return (
 			tr
 				.replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable)

package/src/tablePluginType.ts

@@ -14,6 +14,7 @@ import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmo
 import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 
@@ -82,6 +83,7 @@ export type TablePluginDependencies = [
 	OptionalPlugin<EditorViewModePlugin>,
 	OptionalPlugin<FeatureFlagsPlugin>,
 	OptionalPlugin<ExtensionPlugin>,
+	OptionalPlugin<InteractionPlugin>,
 ];
 
 export type TablePlugin = NextEditorPlugin<

package/tsconfig.app.json

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