@atlaskit/editor-plugin-table 7.21.3 → 7.21.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.21.4
+
+### Patch Changes
+
+- [#122264](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122264)
+  [`257d7e96264e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/257d7e96264e0) -
+  [ux] Fix table column delete decorations showing when expected in React 18.
+
 ## 7.21.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -28,6 +28,7 @@ var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _commands = require("../commands");
+var _eventHandlers = require("../event-handlers");
 var _utils3 = require("../pm-plugins/drag-and-drop/utils");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _stickyHeaders = require("../pm-plugins/sticky-headers");
@@ -74,6 +75,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       scroll: 0,
       parentWidth: undefined
     }, (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_AFTER_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, "tableWrapperWidth", undefined), (0, _defineProperty3.default)(_defineProperty2, "tableWrapperHeight", undefined), _defineProperty2));
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleMouseOut", function (event) {
+      if (!(0, _eventHandlers.isTableInFocus)(_this.props.view)) {
+        return false;
+      }
+      return (0, _eventHandlers.handleMouseOut)(_this.props.view, event);
+    });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleMouseEnter", function () {
       var node = _this.props.getNode();
       var pos = _this.props.getPos();
@@ -364,6 +371,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
         }
       }
+      if ((0, _platformFeatureFlags.fg)('editor_react_18_fix_table_delete_col_decorations')) {
+        var _this$table2;
+        this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
+      }
       var _getEditorFeatureFlag = getEditorFeatureFlags(),
         _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2,
@@ -445,8 +456,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
       if ((0, _platformFeatureFlags.fg)('platform.editor.table.live-pages-sorting_4malx')) {
-        var _this$table2;
-        this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.removeEventListener('mouseenter', this.handleMouseEnter);
+        var _this$table3;
+        this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.removeEventListener('mouseenter', this.handleMouseEnter);
+      }
+      if ((0, _platformFeatureFlags.fg)('editor_react_18_fix_table_delete_col_decorations')) {
+        var _this$table4;
+        this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseout', this.handleMouseOut);
       }
       if (this.overflowShadowsObserver) {
         this.overflowShadowsObserver.dispose();

package/dist/cjs/pm-plugins/main.js

@@ -282,7 +282,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         mousedown: (0, _eventHandlers.withCellTracking)(_eventHandlers.handleMouseDown),
         mouseover: (0, _eventHandlers.withCellTracking)((0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOver)),
         mouseleave: _eventHandlers.handleMouseLeave,
-        mouseout: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOut),
+        mouseout: (0, _platformFeatureFlags.fg)('editor_react_18_fix_table_delete_col_decorations') ? undefined : (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOut),
         mousemove: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseMove),
         mouseenter: _eventHandlers.handleMouseEnter,
         mouseup: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseUp),

package/dist/cjs/toolbar.js

@@ -42,7 +42,10 @@ var _alignment = require("./utils/alignment");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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; } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
   var isTableScalingWithFixedColumnWidthsOptionShown = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;

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

@@ -12,7 +12,10 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _types = require("../../types");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidget(_ref) {

package/dist/cjs/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.js

@@ -8,7 +8,10 @@ var _react = require("@emotion/react");
 var _button = require("@atlaskit/button");
 var _ui = require("@atlaskit/editor-common/ui");
 var _primitives = require("@atlaskit/primitives");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var containerStyles = (0, _primitives.xcss)({

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

@@ -25,7 +25,10 @@ var _FixedButton = _interopRequireDefault(require("./FixedButton"));
 var _styles = require("./styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -48,7 +48,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/prefer-primitives */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/prefer-primitives */ /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
 var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ContextualMenu, _Component);

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

@@ -14,7 +14,10 @@ var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _consts = require("../consts");
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var FloatingContextualMenu = function FloatingContextualMenu(_ref) {

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -38,7 +38,10 @@ var _styles2 = require("./styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /** @jsxFrag */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/nodeviews/TableComponent.js

@@ -14,6 +14,7 @@ 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 { autoSizeTable, clearHoverSelection } from '../commands';
+import { handleMouseOut, isTableInFocus } from '../event-handlers';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
@@ -52,6 +53,12 @@ class TableComponent extends React.Component {
       tableWrapperWidth: undefined,
       tableWrapperHeight: undefined
     });
+    _defineProperty(this, "handleMouseOut", event => {
+      if (!isTableInFocus(this.props.view)) {
+        return false;
+      }
+      return handleMouseOut(this.props.view, event);
+    });
     _defineProperty(this, "handleMouseEnter", () => {
       const node = this.props.getNode();
       const pos = this.props.getPos();
@@ -348,6 +355,10 @@ class TableComponent extends React.Component {
         this === null || this === void 0 ? void 0 : (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.addEventListener('mouseenter', this.handleMouseEnter);
       }
     }
+    if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+      var _this$table2;
+      this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.addEventListener('mouseout', this.handleMouseOut);
+    }
     const {
       tableWithFixedColumnWidthsOption = false,
       stickyScrollbar
@@ -429,8 +440,12 @@ class TableComponent extends React.Component {
       window.removeEventListener('resize', this.handleWindowResizeDebounced);
     }
     if (fg('platform.editor.table.live-pages-sorting_4malx')) {
-      var _this$table2;
-      this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.removeEventListener('mouseenter', this.handleMouseEnter);
+      var _this$table3;
+      this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.removeEventListener('mouseenter', this.handleMouseEnter);
+    }
+    if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+      var _this$table4;
+      this === null || this === void 0 ? void 0 : (_this$table4 = this.table) === null || _this$table4 === void 0 ? void 0 : _this$table4.removeEventListener('mouseout', this.handleMouseOut);
     }
     if (this.overflowShadowsObserver) {
       this.overflowShadowsObserver.dispose();

package/dist/es2019/pm-plugins/main.js

@@ -280,7 +280,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         mousedown: withCellTracking(handleMouseDown),
         mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
         mouseleave: handleMouseLeave,
-        mouseout: whenTableInFocus(handleMouseOut),
+        mouseout: fg('editor_react_18_fix_table_delete_col_decorations') ? undefined : whenTableInFocus(handleMouseOut),
         mousemove: whenTableInFocus(handleMouseMove),
         mouseenter: handleMouseEnter,
         mouseup: whenTableInFocus(handleMouseUp),

package/dist/es2019/toolbar.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';

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

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';

package/dist/es2019/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { ButtonGroup } from '@atlaskit/button';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -1,6 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { Component } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Popup } from '@atlaskit/editor-common/ui';

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -1,5 +1,8 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /** @jsxFrag */
 import React, { useEffect, useState } from 'react';
 

package/dist/esm/nodeviews/TableComponent.js

@@ -28,6 +28,7 @@ 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 { autoSizeTable, clearHoverSelection } from '../commands';
+import { handleMouseOut, isTableInFocus } from '../event-handlers';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
@@ -67,6 +68,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       scroll: 0,
       parentWidth: undefined
     }, _defineProperty(_defineProperty2, ShadowEvent.SHOW_BEFORE_SHADOW, false), _defineProperty(_defineProperty2, ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty(_defineProperty2, "tableWrapperWidth", undefined), _defineProperty(_defineProperty2, "tableWrapperHeight", undefined), _defineProperty2));
+    _defineProperty(_assertThisInitialized(_this), "handleMouseOut", function (event) {
+      if (!isTableInFocus(_this.props.view)) {
+        return false;
+      }
+      return handleMouseOut(_this.props.view, event);
+    });
     _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function () {
       var node = _this.props.getNode();
       var pos = _this.props.getPos();
@@ -357,6 +364,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
         }
       }
+      if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+        var _this$table2;
+        this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
+      }
       var _getEditorFeatureFlag = getEditorFeatureFlags(),
         _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2,
@@ -438,8 +449,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
       if (fg('platform.editor.table.live-pages-sorting_4malx')) {
-        var _this$table2;
-        this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.removeEventListener('mouseenter', this.handleMouseEnter);
+        var _this$table3;
+        this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.removeEventListener('mouseenter', this.handleMouseEnter);
+      }
+      if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+        var _this$table4;
+        this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseout', this.handleMouseOut);
       }
       if (this.overflowShadowsObserver) {
         this.overflowShadowsObserver.dispose();

package/dist/esm/pm-plugins/main.js

@@ -275,7 +275,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         mousedown: withCellTracking(handleMouseDown),
         mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
         mouseleave: handleMouseLeave,
-        mouseout: whenTableInFocus(handleMouseOut),
+        mouseout: fg('editor_react_18_fix_table_delete_col_decorations') ? undefined : whenTableInFocus(handleMouseOut),
         mousemove: whenTableInFocus(handleMouseMove),
         mouseenter: handleMouseEnter,
         mouseup: whenTableInFocus(handleMouseUp),

package/dist/esm/toolbar.js

@@ -3,7 +3,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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) { _defineProperty(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; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';

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

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';

package/dist/esm/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { ButtonGroup } from '@atlaskit/button';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js

@@ -11,7 +11,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { Component } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Popup } from '@atlaskit/editor-common/ui';

package/dist/esm/ui/FloatingDragMenu/DragMenu.js

@@ -1,7 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /** @jsxFrag */
 import React, { useEffect, useState } from 'react';
 

package/dist/types/ui/ColumnResizeWidget/index.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 type Props = {
     startIndex: number;

package/dist/types/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 type Props = {

package/dist/types/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import type { WrappedComponentProps } from 'react-intl-next';

package/dist/types/ui/FloatingContextualMenu/index.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';

package/dist/types/ui/FloatingDragMenu/DragMenu.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /** @jsxFrag */
 import React from 'react';
 import { jsx } from '@emotion/react';

package/dist/types-ts4.5/ui/ColumnResizeWidget/index.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 type Props = {
     startIndex: number;

package/dist/types-ts4.5/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 type Props = {

package/dist/types-ts4.5/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import type { WrappedComponentProps } from 'react-intl-next';

package/dist/types-ts4.5/ui/FloatingContextualMenu/index.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';

package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /** @jsxFrag */
 import React from 'react';
 import { jsx } from '@emotion/react';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.21.3",
+	"version": "7.21.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/adf-schema": "^39.0.3",
 		"@atlaskit/button": "^19.0.0",
 		"@atlaskit/custom-steps": "^0.4.0",
-		"@atlaskit/editor-common": "^86.2.0",
+		"@atlaskit/editor-common": "^86.4.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-prosemirror": "4.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.7.0",
-		"@atlaskit/icon": "^22.6.0",
+		"@atlaskit/icon": "^22.7.0",
 		"@atlaskit/menu": "^2.8.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
@@ -128,6 +128,9 @@
 		},
 		"platform_editor_element_drag_and_drop_ed_24041": {
 			"type": "boolean"
+		},
+		"editor_react_18_fix_table_delete_col_decorations": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableComponent.tsx

@@ -26,6 +26,7 @@ import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
 import { token } from '@atlaskit/tokens';
 
 import { autoSizeTable, clearHoverSelection } from '../commands';
+import { handleMouseOut, isTableInFocus } from '../event-handlers';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import type { RowStickyState, StickyPluginState } from '../pm-plugins/sticky-headers';
@@ -186,6 +187,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		}
 	}
 
+	private handleMouseOut = (event: Event) => {
+		if (!isTableInFocus(this.props.view)) {
+			return false;
+		}
+		return handleMouseOut(this.props.view, event);
+	};
+
 	componentDidMount() {
 		const {
 			allowColumnResizing,
@@ -204,6 +212,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				this?.table?.addEventListener('mouseenter', this.handleMouseEnter);
 			}
 		}
+		if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+			this?.table?.addEventListener('mouseout', this.handleMouseOut);
+		}
 
 		const { tableWithFixedColumnWidthsOption = false, stickyScrollbar } = getEditorFeatureFlags();
 
@@ -308,6 +319,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		if (fg('platform.editor.table.live-pages-sorting_4malx')) {
 			this?.table?.removeEventListener('mouseenter', this.handleMouseEnter);
 		}
+		if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+			this?.table?.removeEventListener('mouseout', this.handleMouseOut);
+		}
 
 		if (this.overflowShadowsObserver) {
 			this.overflowShadowsObserver.dispose();

package/src/pm-plugins/main.ts

@@ -374,7 +374,9 @@ export const createPlugin = (
 				mousedown: withCellTracking(handleMouseDown),
 				mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
 				mouseleave: handleMouseLeave,
-				mouseout: whenTableInFocus(handleMouseOut),
+				mouseout: fg('editor_react_18_fix_table_delete_col_decorations')
+					? undefined
+					: whenTableInFocus(handleMouseOut),
 				mousemove: whenTableInFocus(handleMouseMove),
 				mouseenter: handleMouseEnter,
 				mouseup: whenTableInFocus(handleMouseUp),

package/src/toolbar.tsx

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 

package/src/ui/ColumnResizeWidget/index.tsx

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';

package/src/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.tsx

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 

package/src/ui/FloatingContextualButton/index.tsx

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -1,5 +1,8 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { Component } from 'react';
 import type { PointerEvent } from 'react';
 

package/src/ui/FloatingContextualMenu/index.tsx

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -1,5 +1,8 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /** @jsxFrag */
 import React, { useEffect, useState } from 'react';