@atlaskit/editor-plugin-table 2.9.1 → 2.10.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 2.10.1
+
+### Patch Changes
+
+- [`30d49e87f62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30d49e87f62) - Added danger apperance to ReszierNext component and toggled it when the delete icon in the table floating toolbar is rolled over
+- Updated dependencies
+
+## 2.10.0
+
+### Minor Changes
+
+- [`0f3026deda5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0f3026deda5) - ED-12027 cleaned up table optimisation feature flags, made optimised code run by default.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.9.1
 
 ### Patch Changes

package/dist/cjs/plugins/table/event-handlers.js

@@ -190,67 +190,63 @@ var handleMouseLeave = function handleMouseLeave(view, event) {
   return false;
 };
 exports.handleMouseLeave = handleMouseLeave;
-var handleMouseMove = function handleMouseMove(getEditorFeatureFlags) {
-  return function (view, event, elementContentRects) {
-    if (!(event.target instanceof HTMLElement)) {
-      return false;
-    }
-    var element = event.target;
-    if ((0, _utils3.isColumnControlsDecorations)(element)) {
-      var state = view.state,
-        dispatch = view.dispatch;
-      var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
-        insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
-      var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
-        _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
-        startIndex = _getColumnOrRowIndex10[0],
-        endIndex = _getColumnOrRowIndex10[1];
-      var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, false, elementContentRects) === 'right' ? endIndex : startIndex;
-      if (positionColumn !== insertColumnButtonIndex) {
-        return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
-      }
+var handleMouseMove = function handleMouseMove(view, event, elementContentRects) {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
+  }
+  var element = event.target;
+  if ((0, _utils3.isColumnControlsDecorations)(element)) {
+    var state = view.state,
+      dispatch = view.dispatch;
+    var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
+      insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
+    var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
+      _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
+      startIndex = _getColumnOrRowIndex10[0],
+      endIndex = _getColumnOrRowIndex10[1];
+    var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, elementContentRects) === 'right' ? endIndex : startIndex;
+    if (positionColumn !== insertColumnButtonIndex) {
+      return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
     }
-    if ((0, _utils3.isRowControlsButton)(element)) {
-      var _state3 = view.state,
-        _dispatch4 = view.dispatch;
-      var _getPluginState4 = (0, _pluginFactory.getPluginState)(_state3),
-        insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
-      var _getColumnOrRowIndex11 = (0, _utils3.getColumnOrRowIndex)(element),
-        _getColumnOrRowIndex12 = (0, _slicedToArray2.default)(_getColumnOrRowIndex11, 2),
-        _startIndex3 = _getColumnOrRowIndex12[0],
-        _endIndex2 = _getColumnOrRowIndex12[1];
-      var positionRow = (0, _utils3.getMousePositionVerticalRelativeByElement)(event) === 'bottom' ? _endIndex2 : _startIndex3;
-      if (positionRow !== insertRowButtonIndex) {
-        return (0, _commands.showInsertRowButton)(positionRow)(_state3, _dispatch4);
-      }
+  }
+  if ((0, _utils3.isRowControlsButton)(element)) {
+    var _state3 = view.state,
+      _dispatch4 = view.dispatch;
+    var _getPluginState4 = (0, _pluginFactory.getPluginState)(_state3),
+      insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
+    var _getColumnOrRowIndex11 = (0, _utils3.getColumnOrRowIndex)(element),
+      _getColumnOrRowIndex12 = (0, _slicedToArray2.default)(_getColumnOrRowIndex11, 2),
+      _startIndex3 = _getColumnOrRowIndex12[0],
+      _endIndex2 = _getColumnOrRowIndex12[1];
+    var positionRow = (0, _utils3.getMousePositionVerticalRelativeByElement)(event) === 'bottom' ? _endIndex2 : _startIndex3;
+    if (positionRow !== insertRowButtonIndex) {
+      return (0, _commands.showInsertRowButton)(positionRow)(_state3, _dispatch4);
     }
-    var _getEditorFeatureFlag = getEditorFeatureFlags(),
-      mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization;
-    if (!(0, _utils3.isResizeHandleDecoration)(element) && (0, _utils3.isCell)(element)) {
-      var _positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, mouseMoveOptimization, elementContentRects, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
-      if (_positionColumn !== null) {
-        var _state4 = view.state,
-          _dispatch5 = view.dispatch;
-        var _getPluginState5 = (0, _pluginFactory.getPluginState)(_state4),
-          resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex,
-          resizeHandleRowIndex = _getPluginState5.resizeHandleRowIndex;
-        var tableCell = (0, _utils.closestElement)(element, 'td, th');
-        var cellStartPosition = view.posAtDOM(tableCell, 0);
-        var rect = (0, _utils2.findCellRectClosestToPos)(_state4.doc.resolve(cellStartPosition));
-        if (rect) {
-          var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
-          var rowIndexTarget = rect.top;
-          if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !(0, _utils3.hasResizeHandler)({
-            target: element,
-            columnEndIndexTarget: columnEndIndexTarget
-          })) {
-            return (0, _commands.addResizeHandleDecorations)(rowIndexTarget, columnEndIndexTarget)(_state4, _dispatch5);
-          }
+  }
+  if (!(0, _utils3.isResizeHandleDecoration)(element) && (0, _utils3.isCell)(element)) {
+    var _positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, elementContentRects, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
+    if (_positionColumn !== null) {
+      var _state4 = view.state,
+        _dispatch5 = view.dispatch;
+      var _getPluginState5 = (0, _pluginFactory.getPluginState)(_state4),
+        resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex,
+        resizeHandleRowIndex = _getPluginState5.resizeHandleRowIndex;
+      var tableCell = (0, _utils.closestElement)(element, 'td, th');
+      var cellStartPosition = view.posAtDOM(tableCell, 0);
+      var rect = (0, _utils2.findCellRectClosestToPos)(_state4.doc.resolve(cellStartPosition));
+      if (rect) {
+        var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
+        var rowIndexTarget = rect.top;
+        if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !(0, _utils3.hasResizeHandler)({
+          target: element,
+          columnEndIndexTarget: columnEndIndexTarget
+        })) {
+          return (0, _commands.addResizeHandleDecorations)(rowIndexTarget, columnEndIndexTarget)(_state4, _dispatch5);
         }
       }
     }
-    return false;
-  };
+  }
+  return false;
 };
 exports.handleMouseMove = handleMouseMove;
 function handleTripleClick(view, pos) {

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -34,15 +34,11 @@ var _TableFloatingControls = _interopRequireDefault(require("../ui/TableFloating
 var _utils4 = require("../utils");
 var _OverflowShadowsObserver = require("./OverflowShadowsObserver");
 var _TableContainer = require("./TableContainer");
-var _updateOverflowShadows = require("./update-overflow-shadows");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty3.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var isIE11 = _utils.browser.ie_version === 11;
-var NOOP = function NOOP() {
-  return undefined;
-};
 var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(TableComponent, _React$Component);
   var _super = _createSuper(TableComponent);
@@ -53,8 +49,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "state", (_defineProperty2 = {
       scroll: 0,
-      parentWidth: undefined,
-      isLoading: true
+      parentWidth: undefined
     }, (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty2));
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateShadowState", function (shadowKey, value) {
       if (_this.state[shadowKey] === value) {
@@ -73,8 +68,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "onStickyState", function (state) {
-      var _this$props$getEditor = _this.props.getEditorFeatureFlags(),
-        tableOverflowShadowsOptimization = _this$props$getEditor.tableOverflowShadowsOptimization;
       var pos = _this.props.getPos();
       if (!(0, _utils.isValidPosition)(pos, _this.props.view.state)) {
         return;
@@ -84,7 +77,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         _this.setState({
           stickyHeader: stickyHeader
         });
-        if (tableOverflowShadowsOptimization && _this.overflowShadowsObserver) {
+        if (_this.overflowShadowsObserver) {
           _this.overflowShadowsObserver.updateStickyShadows();
         }
       }
@@ -103,11 +96,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           header.style.marginRight = '2px';
         }
       }
-      var _this$props$getEditor2 = _this.props.getEditorFeatureFlags(),
-        tableOverflowShadowsOptimization = _this$props$getEditor2.tableOverflowShadowsOptimization;
-      if (!tableOverflowShadowsOptimization) {
-        _this.updateShadows();
-      }
       _this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, _this.wrapper.scrollLeft !== 0));
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizing", function () {
@@ -252,8 +240,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleWindowResizeDebounced", (0, _rafSchd.default)(_this.handleWindowResize));
     var _options = props.options,
       _containerWidth = props.containerWidth,
-      _getNode = props.getNode,
-      getEditorFeatureFlags = props.getEditorFeatureFlags;
+      _getNode = props.getNode;
     _this.node = _getNode();
     _this.containerWidth = _containerWidth;
 
@@ -272,16 +259,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
       });
     }
-    var _getEditorFeatureFlag = getEditorFeatureFlags(),
-      initialRenderOptimization = _getEditorFeatureFlag.initialRenderOptimization;
-    if (!initialRenderOptimization) {
-      // @see ED-7945
-      requestAnimationFrame(function () {
-        _this.setState({
-          isLoading: false
-        });
-      });
-    }
     return _this;
   }
   (0, _createClass2.default)(TableComponent, [{
@@ -338,6 +315,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
+      var _this$wrapper;
       var _this$props8 = this.props,
         view = _this$props8.view,
         getNode = _this$props8.getNode,
@@ -349,19 +327,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
-      var _this$props$getEditor3 = this.props.getEditorFeatureFlags(),
-        tableOverflowShadowsOptimization = _this$props$getEditor3.tableOverflowShadowsOptimization;
-      if (!tableOverflowShadowsOptimization) {
-        this.updateShadows();
-      } else {
-        var _this$wrapper;
-        if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
-          this.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
-        }
-        if (this.overflowShadowsObserver) {
-          var _this$state$stickyHea;
-          this.overflowShadowsObserver.observeShadowSentinels((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky);
-        }
+      if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
+        this.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
+      }
+      if (this.overflowShadowsObserver) {
+        var _this$state$stickyHea;
+        this.overflowShadowsObserver.observeShadowSentinels((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky);
       }
       var currentTable = getNode();
       if (currentTable.attrs.__autoSize) {
@@ -377,22 +348,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if ((0, _utils4.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils4.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
           var _view = this.props.view;
           (0, _utils3.insertColgroupFromNode)(this.table, currentTable);
-          (0, _dom.updateControls)(this.props.getEditorFeatureFlags)(_view.state);
+          (0, _dom.updateControls)()(_view.state);
         }
         this.handleTableResizingDebounced();
       }
     }
-  }, {
-    key: "updateShadows",
-    value: function updateShadows() {
-      var _this$wrapper2;
-      var parent = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.parentElement;
-      if (this.wrapper && parent) {
-        var rightShadows = parent.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
-        var leftShadows = parent.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
-        (0, _updateOverflowShadows.updateOverflowShadows)(this.props.getEditorFeatureFlags)(this.wrapper, this.table, rightShadows, leftShadows);
-      }
-    }
   }, {
     key: "render",
     value: function render() {
@@ -413,7 +373,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getPos = _this$props9.getPos,
         pluginInjectionApi = _this$props9.pluginInjectionApi;
       var _this$state = this.state,
-        isLoading = _this$state.isLoading,
         showBeforeShadow = _this$state.showBeforeShadow,
         showAfterShadow = _this$state.showAfterShadow;
       var node = getNode();
@@ -421,16 +380,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
         isInDanger = _getPluginState2.isInDanger,
         hoveredRows = _getPluginState2.hoveredRows;
-      var _this$props$getEditor4 = this.props.getEditorFeatureFlags(),
-        stickyHeadersOptimization = _this$props$getEditor4.stickyHeadersOptimization,
-        initialRenderOptimization = _this$props$getEditor4.initialRenderOptimization,
-        tableRenderOptimization = _this$props$getEditor4.tableRenderOptimization,
-        tableOverflowShadowsOptimization = _this$props$getEditor4.tableOverflowShadowsOptimization;
       var tableRef = this.table || undefined;
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
-
-      //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
-      var tableHeight = tableRef && !tableRenderOptimization ? tableRef.offsetHeight : undefined;
       var hasHeaderRow = (0, _utils4.containsHeaderRow)(node);
       var rowControls = /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.ROW_CONTROLS_WRAPPER
@@ -449,17 +400,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // pass `selection` and `tableHeight` to control re-render
         ,
         selection: view.state.selection,
-        tableHeight: tableHeight,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader,
         getEditorFeatureFlags: this.props.getEditorFeatureFlags
       }));
-      var shadowPadding = allowControls && (!isLoading || initialRenderOptimization) && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
-      var shadowStyle = tableOverflowShadowsOptimization ? (0, _memoizeOne.default)(function (visible) {
+      var shadowPadding = allowControls && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
+      var shadowStyle = (0, _memoizeOne.default)(function (visible) {
         return {
           visibility: visible ? 'visible' : 'hidden'
         };
-      }) : NOOP;
+      });
       var isNested = (0, _utils4.isTableNested)(view.state, getPos());
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer, {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (_classnames = {}, (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(view.state.selection)), _classnames)),
@@ -472,16 +422,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isNested: isNested,
         pluginInjectionApi: pluginInjectionApi,
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
-      }, stickyHeadersOptimization && /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
-      }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/_react.default.createElement("div", {
+      }), allowControls && rowControls, /*#__PURE__*/_react.default.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: _types.TableCssClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),
         style: {
-          visibility: tableOverflowShadowsOptimization ? showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden' : undefined,
+          visibility: showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
           top: "".concat(this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2, "px")
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
@@ -508,10 +458,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),
         style: {
-          visibility: tableOverflowShadowsOptimization ? showAfterShadow && hasHeaderRow ? 'visible' : 'hidden' : undefined,
+          visibility: showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
           top: "".concat(this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2, "px")
         }
-      })), stickyHeadersOptimization && /*#__PURE__*/_react.default.createElement("div", {
+      })), /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM,
         "data-testid": "sticky-sentinel-bottom"
       }));

package/dist/cjs/plugins/table/nodeviews/TableResizer.js

@@ -14,6 +14,7 @@ var _guideline = require("@atlaskit/editor-common/guideline");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _utils2 = require("../pm-plugins/table-resizing/utils");
 var _tableWidth = require("../pm-plugins/table-width");
 var _consts = require("../ui/consts");
@@ -86,6 +87,8 @@ var TableResizer = function TableResizer(_ref) {
     setSnappingEnabled = _useState2[1];
   var resizerMinWidth = getResizerMinWidth(node);
   var handleHeightSize = getResizerHandleHeight(tableRef);
+  var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+    isInDanger = _getPluginState.isInDanger;
   var _useMeasureFramerate = (0, _analytics.useMeasureFramerate)(),
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
@@ -213,7 +216,8 @@ var TableResizer = function TableResizer(_ref) {
     handlePositioning: "adjacent",
     innerPadding: tableHandlePosition,
     isHandleVisible: ((_findTable = (0, _utils.findTable)((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos(),
-    handleComponent: handleComponent
+    handleComponent: handleComponent,
+    appearance: isInDanger ? 'danger' : undefined
   }, children);
 };
 exports.TableResizer = TableResizer;

package/dist/cjs/plugins/table/nodeviews/table.js

@@ -77,7 +77,6 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasHoveredRows", false);
     _this.getPos = props.getPos;
-    _this.tableRenderOptimization = props.tableRenderOptimization;
     _this.eventDispatcher = props.eventDispatcher;
     return _this;
   }
@@ -178,33 +177,30 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "viewShouldUpdate",
     value: function viewShouldUpdate(nextNode) {
-      if (this.tableRenderOptimization) {
-        var _getPluginState = (0, _pluginFactory.getPluginState)(this.view.state),
-          hoveredRows = _getPluginState.hoveredRows;
-        var hoveredRowsChanged = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length) !== this.hasHoveredRows;
-        if (nextNode.attrs.isNumberColumnEnabled && hoveredRowsChanged) {
-          this.hasHoveredRows = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length);
-          return true;
-        }
-        var _node = this.getNode();
-        if ((0, _typeof2.default)(_node.attrs) !== (0, _typeof2.default)(nextNode.attrs)) {
-          return true;
-        }
-        var attrKeys = Object.keys(_node.attrs);
-        var nextAttrKeys = Object.keys(nextNode.attrs);
-        if (attrKeys.length !== nextAttrKeys.length) {
-          return true;
-        }
-        var tableMap = _tableMap.TableMap.get(_node);
-        var nextTableMap = _tableMap.TableMap.get(nextNode);
-        if (tableMap.width !== nextTableMap.width) {
-          return true;
-        }
-        return attrKeys.some(function (key) {
-          return _node.attrs[key] !== nextNode.attrs[key];
-        });
+      var _getPluginState = (0, _pluginFactory.getPluginState)(this.view.state),
+        hoveredRows = _getPluginState.hoveredRows;
+      var hoveredRowsChanged = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length) !== this.hasHoveredRows;
+      if (nextNode.attrs.isNumberColumnEnabled && hoveredRowsChanged) {
+        this.hasHoveredRows = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length);
+        return true;
       }
-      return (0, _get2.default)((0, _getPrototypeOf2.default)(TableView.prototype), "viewShouldUpdate", this).call(this, nextNode);
+      var node = this.getNode();
+      if ((0, _typeof2.default)(node.attrs) !== (0, _typeof2.default)(nextNode.attrs)) {
+        return true;
+      }
+      var attrKeys = Object.keys(node.attrs);
+      var nextAttrKeys = Object.keys(nextNode.attrs);
+      if (attrKeys.length !== nextAttrKeys.length) {
+        return true;
+      }
+      var tableMap = _tableMap.TableMap.get(node);
+      var nextTableMap = _tableMap.TableMap.get(nextNode);
+      if (tableMap.width !== nextTableMap.width) {
+        return true;
+      }
+      return attrKeys.some(function (key) {
+        return node.attrs[key] !== nextNode.attrs[key];
+      });
     }
   }, {
     key: "ignoreMutation",
@@ -244,8 +240,6 @@ var createTableView = function createTableView(node, view, getPos, portalProvide
     pluginConfig = _getPluginState2.pluginConfig;
   var _getPluginConfig = (0, _createPluginConfig.pluginConfig)(pluginConfig),
     allowColumnResizing = _getPluginConfig.allowColumnResizing;
-  var _getEditorFeatureFlag = getEditorFeatureFlags(),
-    tableRenderOptimization = _getEditorFeatureFlag.tableRenderOptimization;
   var hasIntlContext = true;
   return new TableView({
     node: node,
@@ -255,7 +249,6 @@ var createTableView = function createTableView(node, view, getPos, portalProvide
     eventDispatcher: eventDispatcher,
     getPos: getPos,
     options: options,
-    tableRenderOptimization: tableRenderOptimization,
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,
     hasIntlContext: hasIntlContext,

package/dist/cjs/plugins/table/nodeviews/tableCell.js

@@ -14,7 +14,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var DEFAULT_COL_SPAN = 1;
 var DEFAULT_ROW_SPAN = 1;
 var TableCellNodeView = /*#__PURE__*/function () {
-  function TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer) {
+  function TableCellNodeView(node, view, getPos, observer) {
     (0, _classCallCheck2.default)(this, TableCellNodeView);
     this.view = view;
     this.node = node;
@@ -24,11 +24,8 @@ var TableCellNodeView = /*#__PURE__*/function () {
     this.getPos = getPos;
     this.dom = dom;
     this.contentDOM = contentDOM;
-    var _getEditorFeatureFlag = getEditorFeatureFlags(),
-      mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization;
-    if (mouseMoveOptimization && observer) {
+    if (observer) {
       this.contentDOM.id = (0, _uuid.default)();
-      this.mouseMoveOptimization = mouseMoveOptimization;
       this.observer = observer;
       observer.observe(this.contentDOM);
     }
@@ -93,7 +90,7 @@ var TableCellNodeView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      if (this.mouseMoveOptimization && this.observer) {
+      if (this.observer) {
         this.observer.unobserve(this.contentDOM);
       }
     }

package/dist/cjs/plugins/table/nodeviews/update-overflow-shadows.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateShadowListForStickyStyles = exports.updateOverflowShadows = void 0;
+exports.updateShadowListForStickyStyles = void 0;
 var _types = require("../types");
 var updateShadowListForStickyStyles = function updateShadowListForStickyStyles(heightStyle, shadows) {
   Array.from(shadows).forEach(function (shadow) {
@@ -14,42 +14,4 @@ var updateShadowListForStickyStyles = function updateShadowListForStickyStyles(h
     }
   });
 };
-
-/**
- * Update overflow shadows for a given wrapper & table.
- * if `overflowShadowOptimization` is enabled, this will exit early.
- */
-exports.updateShadowListForStickyStyles = updateShadowListForStickyStyles;
-var updateOverflowShadows = function updateOverflowShadows(getEditorFeatureFlags) {
-  return function (wrapper, table, rightShadows, leftShadows) {
-    var _getEditorFeatureFlag;
-    if (((_getEditorFeatureFlag = getEditorFeatureFlags()) === null || _getEditorFeatureFlag === void 0 ? void 0 : _getEditorFeatureFlag.tableOverflowShadowsOptimization) === true) {
-      return false;
-    }
-    // Right shadow
-    if (table && wrapper) {
-      var stickyRow = wrapper.querySelector('tr.sticky');
-      var stickyCell = stickyRow && stickyRow.firstElementChild;
-      if (rightShadows) {
-        var diff = table.offsetWidth - wrapper.offsetWidth;
-        for (var i = 0; i < rightShadows.length; i++) {
-          var rightShadow = rightShadows[i];
-          rightShadow.style.display = diff > 0 && diff > wrapper.scrollLeft ? 'block' : 'none';
-          if (rightShadow.classList.contains(_types.TableCssClassName.TABLE_STICKY_SHADOW) && stickyCell) {
-            rightShadow.style.height = "".concat(stickyCell.clientHeight + 1, "px");
-          }
-        }
-      }
-      if (leftShadows) {
-        for (var _i = 0; _i < leftShadows.length; _i++) {
-          var leftShadow = leftShadows[_i];
-          leftShadow.style.display = wrapper.scrollLeft > 0 ? 'block' : 'none';
-          if (leftShadow.classList.contains(_types.TableCssClassName.TABLE_STICKY_SHADOW) && stickyCell) {
-            leftShadow.style.height = "".concat(stickyCell.clientHeight + 1, "px");
-          }
-        }
-      }
-    }
-  };
-};
-exports.updateOverflowShadows = updateOverflowShadows;
+exports.updateShadowListForStickyStyles = updateShadowListForStickyStyles;

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

@@ -57,10 +57,10 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
   }) : undefined;
   var tableCellNodeview = {
     tableCell: function tableCell(node, view, getPos) {
-      return new _tableCell.default(node, view, getPos, getEditorFeatureFlags, observer);
+      return new _tableCell.default(node, view, getPos, observer);
     },
     tableHeader: function tableHeader(node, view, getPos) {
-      return new _tableCell.default(node, view, getPos, getEditorFeatureFlags, observer);
+      return new _tableCell.default(node, view, getPos, observer);
     }
   };
 
@@ -249,7 +249,7 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
         mouseover: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOver),
         mouseleave: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseLeave),
         mouseout: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOut),
-        mousemove: (0, _eventHandlers.whenTableInFocus)((0, _eventHandlers.handleMouseMove)(getEditorFeatureFlags), elementContentRects),
+        mousemove: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseMove, elementContentRects),
         click: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleClick)
       },
       handleTripleClick: _eventHandlers.handleTripleClick