@atlaskit/editor-plugin-table 7.5.4 → 7.5.6

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

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _consts = require("../consts");
 var _DragMenu = _interopRequireDefault(require("./DragMenu"));
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
@@ -24,8 +25,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     stickyHeaders = _ref.stickyHeaders,
-    pluginConfig = _ref.pluginConfig,
-    getEditorFeatureFlags = _ref.getEditorFeatureFlags;
+    pluginConfig = _ref.pluginConfig;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -35,9 +35,9 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
   }
-  var _getEditorFeatureFlag = getEditorFeatureFlags(),
-    _getEditorFeatureFlag2 = _getEditorFeatureFlag.tablePreserveWidth,
-    tablePreserveWidth = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
+  var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+    _getPluginState$isTab = _getPluginState.isTableScalingEnabled,
+    isTableScalingEnabled = _getPluginState$isTab === void 0 ? false : _getPluginState$isTab;
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -71,7 +71,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    tablePreserveWidth: tablePreserveWidth
+    isTableScalingEnabled: isTableScalingEnabled
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -25,6 +25,7 @@ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
 var _commandsWithAnalytics = require("../../commands-with-analytics");
+var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _types = require("../../types");
 var _utils4 = require("../../utils");
 var _getPopupOptions = _interopRequireDefault(require("./getPopupOptions"));
@@ -195,17 +196,15 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
       var _this$props4 = this.props,
         editorView = _this$props4.editorView,
         insertColumnButtonIndex = _this$props4.insertColumnButtonIndex,
-        editorAnalyticsAPI = _this$props4.editorAnalyticsAPI,
-        getEditorContainerWidth = _this$props4.getEditorContainerWidth;
+        editorAnalyticsAPI = _this$props4.editorAnalyticsAPI;
       if (typeof insertColumnButtonIndex !== 'undefined') {
-        var _this$props$getEditor, _this$props5;
         event.preventDefault();
-        var _ref = ((_this$props$getEditor = (_this$props5 = this.props).getEditorFeatureFlags) === null || _this$props$getEditor === void 0 ? void 0 : _this$props$getEditor.call(_this$props5)) || {},
-          _ref$tablePreserveWid = _ref.tablePreserveWidth,
-          tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
+        var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+          _getPluginState$isTab = _getPluginState.isTableScalingEnabled,
+          isTableScalingEnabled = _getPluginState$isTab === void 0 ? false : _getPluginState$isTab;
         var state = editorView.state,
           dispatch = editorView.dispatch;
-        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
       }
     }
   }]);

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

@@ -15,9 +15,6 @@ var _ColumnControls = require("./ColumnControls");
 var _ColumnDropTargets = require("./ColumnDropTargets");
 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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var TableFloatingColumnControls = exports.TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
   var editorView = _ref.editorView,
     tableRef = _ref.tableRef,
@@ -32,54 +29,17 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     isTableHovered = _ref.isTableHovered,
     tableContainerWidth = _ref.tableContainerWidth,
     isNumberColumnEnabled = _ref.isNumberColumnEnabled,
-    getScrollOffset = _ref.getScrollOffset;
-  var _useState = (0, _react.useState)({
-      width: 0,
-      height: 0
-    }),
+    getScrollOffset = _ref.getScrollOffset,
+    tableWrapperHeight = _ref.tableWrapperHeight;
+  var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    tableRect = _useState2[0],
-    setTableRect = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isDragging = _useState4[0],
-    setIsDragging = _useState4[1];
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
   var containerRef = (0, _react.useRef)(null);
   var node = getNode();
   var currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
   var hasHeaderColumn = (0, _utils.containsHeaderColumn)(node);
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  (0, _react.useEffect)(function () {
-    var _window;
-    if (tableRef && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
-      var resizeObserver = new ResizeObserver(function (entries) {
-        var _iterator = _createForOfIteratorHelper(entries),
-          _step;
-        try {
-          var _loop = function _loop() {
-            var entry = _step.value;
-            setTableRect(function (prev) {
-              if (prev.width !== entry.contentRect.width || prev.height !== entry.contentRect.height) {
-                return entry.contentRect;
-              }
-              return prev;
-            });
-          };
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            _loop();
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
-      });
-      resizeObserver.observe(tableRef);
-      return function () {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [tableRef]);
   (0, _react.useEffect)(function () {
     return (0, _adapter.monitorForElements)({
       canMonitor: function canMonitor(_ref2) {
@@ -100,11 +60,11 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
   }, [editorView, currentNodeLocalId]);
   var rowHeights = (0, _react.useMemo)(function () {
     // NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
-    if (tableRef && !!tableRect.height) {
+    if (tableRef && !!tableWrapperHeight) {
       return (0, _utils.getRowHeights)(tableRef);
     }
     return [0];
-  }, [tableRef, tableRect.height]);
+  }, [tableRef, tableWrapperHeight]);
   if (!tableRef || !tableActive || isResizing) {
     return null;
   }
@@ -141,7 +101,7 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
   }), isDragging && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,
-    tableHeight: tableRect.height,
+    tableHeight: tableWrapperHeight,
     localId: currentNodeLocalId,
     colWidths: colWidths,
     getScrollOffset: getScrollOffset

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

@@ -5,240 +5,130 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = exports.TableFloatingControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _commands = require("../../commands");
 var _types = require("../../types");
-var _utils2 = require("../../utils");
 var _CornerControls = require("./CornerControls");
 var _NumberColumn = _interopRequireDefault(require("./NumberColumn"));
 var _RowControls = require("./RowControls");
 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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-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; })(); }
-var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(TableFloatingControls, _Component);
-  var _super = _createSuper(TableFloatingControls);
-  function TableFloatingControls(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, TableFloatingControls);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectRow", function (row, expand) {
-      var editorView = _this.props.editorView;
-      var state = editorView.state,
-        dispatch = editorView.dispatch;
-      // fix for issue ED-4665
-      if (_utils.browser.ie_version === 11) {
-        editorView.dom.blur();
-      }
-      (0, _commands.selectRow)(row, expand)(state, dispatch);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectRows", function (rowIndexes) {
-      var editorView = _this.props.editorView;
-      var state = editorView.state,
-        dispatch = editorView.dispatch;
-      // fix for issue ED-4665
-      if (_utils.browser.ie_version === 11) {
-        editorView.dom.blur();
-      }
-      (0, _commands.selectRows)(rowIndexes)(state, dispatch);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hoverRows", function (rows, danger) {
-      var _this$props$editorVie = _this.props.editorView,
-        state = _this$props$editorVie.state,
-        dispatch = _this$props$editorVie.dispatch;
-      (0, _commands.hoverRows)(rows, danger)(state, dispatch);
-    });
-    // re-use across numbered columns and row controls
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateCellHoverLocation", function (rowIndex) {
-      var _this$props = _this.props,
-        editorView = _this$props.editorView,
-        tableActive = _this$props.tableActive;
-      var state = editorView.state,
-        dispatch = editorView.dispatch;
-      if (tableActive) {
-        // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
-        // of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
-        // also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
-        // current column index. We can just force it to 0.
-        (0, _commands.hoverCell)(rowIndex, 0)(state, dispatch);
-      }
-    });
-    _this.state = {
-      tableWrapperWidth: 0,
-      /** Height needs to be tracked to re-render decorations correctly, do not remove */
-      tableWrapperHeight: 0
-    };
-    return _this;
-  }
-  (0, _createClass2.default)(TableFloatingControls, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.tryInitResizeObserver();
+var TableFloatingControls = exports.TableFloatingControls = function TableFloatingControls(_ref) {
+  var editorView = _ref.editorView,
+    tableRef = _ref.tableRef,
+    tableNode = _ref.tableNode,
+    isInDanger = _ref.isInDanger,
+    isResizing = _ref.isResizing,
+    isNumberColumnEnabled = _ref.isNumberColumnEnabled,
+    isHeaderRowEnabled = _ref.isHeaderRowEnabled,
+    isHeaderColumnEnabled = _ref.isHeaderColumnEnabled,
+    tableActive = _ref.tableActive,
+    hasHeaderRow = _ref.hasHeaderRow,
+    hoveredRows = _ref.hoveredRows,
+    stickyHeader = _ref.stickyHeader,
+    isDragAndDropEnabled = _ref.isDragAndDropEnabled,
+    hoveredCell = _ref.hoveredCell,
+    isTableHovered = _ref.isTableHovered,
+    tableWrapperWidth = _ref.tableWrapperWidth;
+  var _selectRow = (0, _react.useCallback)(function (row, expand) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    // fix for issue ED-4665
+    if (_utils.browser.ie_version === 11) {
+      editorView.dom.blur();
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      // tableRef prop is not guaranteed to be defined after componentDidMount, so retry to init resize observer on update
-      this.tryInitResizeObserver();
+    (0, _commands.selectRow)(row, expand)(state, dispatch);
+  }, [editorView]);
+  var _selectRows = (0, _react.useCallback)(function (rowIndexes) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    // fix for issue ED-4665
+    if (_utils.browser.ie_version === 11) {
+      editorView.dom.blur();
     }
+    (0, _commands.selectRows)(rowIndexes)(state, dispatch);
+  }, [editorView]);
+  var _hoverRows = (0, _react.useCallback)(function (rows, danger) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    (0, _commands.hoverRows)(rows, danger)(state, dispatch);
+  }, [editorView]);
 
-    // tracking the table height changes to update floating controls
-  }, {
-    key: "tryInitResizeObserver",
-    value: function tryInitResizeObserver() {
-      var _window,
-        _this2 = this;
-      var tableRef = this.props.tableRef;
-      if (tableRef && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
-        var tableWrapper = tableRef.closest(".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
-        this.resizeObserver = new ResizeObserver(function (entries) {
-          var _iterator = _createForOfIteratorHelper(entries),
-            _step;
-          try {
-            var _loop = function _loop() {
-              var entry = _step.value;
-              _this2.setState(function (prev) {
-                return (prev === null || prev === void 0 ? void 0 : prev.tableWrapperWidth) === entry.contentRect.width && prev.tableWrapperHeight === entry.contentRect.height ? prev : {
-                  tableWrapperWidth: entry.contentRect.width,
-                  tableWrapperHeight: entry.contentRect.height
-                };
-              });
-            };
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              _loop();
-            }
-          } catch (err) {
-            _iterator.e(err);
-          } finally {
-            _iterator.f();
-          }
-        });
-        this.resizeObserver.observe(tableWrapper);
-      }
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      var _this$props2 = this.props,
-        tableRef = _this$props2.tableRef,
-        isInDanger = _this$props2.isInDanger,
-        isResizing = _this$props2.isResizing,
-        isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
-        isNumberColumnEnabled = _this$props2.isNumberColumnEnabled,
-        hoveredRows = _this$props2.hoveredRows,
-        selection = _this$props2.selection,
-        tableActive = _this$props2.tableActive,
-        isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
-        ordering = _this$props2.ordering,
-        headerRowHeight = _this$props2.headerRowHeight,
-        stickyHeader = _this$props2.stickyHeader,
-        hoveredCell = _this$props2.hoveredCell,
-        isTableHovered = _this$props2.isTableHovered;
-      return this.state.tableWrapperWidth !== nextState.tableWrapperWidth || this.state.tableWrapperHeight !== nextState.tableWrapperHeight || ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || (0, _utils2.isSelectionUpdated)(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell || isTableHovered !== nextProps.isTableHovered;
+  // re-use across numbered columns and row controls
+  var updateCellHoverLocation = (0, _react.useCallback)(function (rowIndex) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    if (tableActive) {
+      // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
+      // of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
+      // also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
+      // current column index. We can just force it to 0.
+      (0, _commands.hoverCell)(rowIndex, 0)(state, dispatch);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-        editorView = _this$props3.editorView,
-        tableRef = _this$props3.tableRef,
-        tableNode = _this$props3.tableNode,
-        isInDanger = _this$props3.isInDanger,
-        isResizing = _this$props3.isResizing,
-        isNumberColumnEnabled = _this$props3.isNumberColumnEnabled,
-        isHeaderRowEnabled = _this$props3.isHeaderRowEnabled,
-        isHeaderColumnEnabled = _this$props3.isHeaderColumnEnabled,
-        tableActive = _this$props3.tableActive,
-        hasHeaderRow = _this$props3.hasHeaderRow,
-        hoveredRows = _this$props3.hoveredRows,
-        stickyHeader = _this$props3.stickyHeader,
-        isDragAndDropEnabled = _this$props3.isDragAndDropEnabled,
-        hoveredCell = _this$props3.hoveredCell,
-        isTableHovered = _this$props3.isTableHovered;
-      if (!tableRef) {
-        return null;
-      }
-      var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-      var wrapperClassName = isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: wrapperClassName
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        onMouseDown: function onMouseDown(e) {
-          return !isDragAndDropEnabled && e.preventDefault();
-        }
-      }, isNumberColumnEnabled ? /*#__PURE__*/_react.default.createElement(_NumberColumn.default, {
-        editorView: editorView,
-        hoverRows: this.hoverRows,
-        tableRef: tableRef,
-        tableActive: tableActive,
-        hoveredRows: hoveredRows,
-        hasHeaderRow: hasHeaderRow,
-        isInDanger: isInDanger,
-        isResizing: isResizing,
-        selectRow: this.selectRow,
-        updateCellHoverLocation: this.updateCellHoverLocation,
-        stickyTop: stickyTop,
-        isDragAndDropEnabled: isDragAndDropEnabled
-      }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.DragCornerControls, {
-        editorView: editorView,
-        tableRef: tableRef,
-        isInDanger: isInDanger,
-        isResizing: isResizing
-      }), /*#__PURE__*/_react.default.createElement(_RowControls.DragControls, {
-        tableRef: tableRef,
-        tableNode: tableNode,
-        hoveredCell: hoveredCell,
-        isTableHovered: isTableHovered,
-        editorView: editorView,
-        tableActive: tableActive,
-        isInDanger: isInDanger,
-        isResizing: isResizing,
-        tableWidth: this.state.tableWrapperWidth,
-        hoverRows: this.hoverRows,
-        selectRow: this.selectRow,
-        selectRows: this.selectRows,
-        updateCellHoverLocation: this.updateCellHoverLocation
-      })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
-        editorView: editorView,
-        tableRef: tableRef,
-        isInDanger: isInDanger,
-        isResizing: isResizing,
-        isHeaderRowEnabled: isHeaderRowEnabled,
-        isHeaderColumnEnabled: isHeaderColumnEnabled,
-        hoveredRows: hoveredRows,
-        stickyTop: tableActive ? stickyTop : undefined
-      }), /*#__PURE__*/_react.default.createElement(_RowControls.RowControls, {
-        editorView: editorView,
-        tableRef: tableRef,
-        hoverRows: this.hoverRows,
-        hoveredRows: hoveredRows,
-        isInDanger: isInDanger,
-        isResizing: isResizing,
-        selectRow: this.selectRow,
-        stickyTop: tableActive ? stickyTop : undefined
-      })))));
+  }, [editorView, tableActive]);
+  if (!tableRef) {
+    return null;
+  }
+  var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
+  var wrapperClassName = isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: wrapperClassName
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onMouseDown: function onMouseDown(e) {
+      return !isDragAndDropEnabled && e.preventDefault();
     }
-  }]);
-  return TableFloatingControls;
-}(_react.Component);
-(0, _defineProperty2.default)(TableFloatingControls, "displayName", 'TableFloatingControls');
+  }, isNumberColumnEnabled ? /*#__PURE__*/_react.default.createElement(_NumberColumn.default, {
+    editorView: editorView,
+    hoverRows: _hoverRows,
+    tableRef: tableRef,
+    tableActive: tableActive,
+    hoveredRows: hoveredRows,
+    hasHeaderRow: hasHeaderRow,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    selectRow: _selectRow,
+    updateCellHoverLocation: updateCellHoverLocation,
+    stickyTop: stickyTop,
+    isDragAndDropEnabled: isDragAndDropEnabled
+  }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.DragCornerControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing
+  }), /*#__PURE__*/_react.default.createElement(_RowControls.DragControls, {
+    tableRef: tableRef,
+    tableNode: tableNode,
+    hoveredCell: hoveredCell,
+    isTableHovered: isTableHovered,
+    editorView: editorView,
+    tableActive: tableActive,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    tableWidth: tableWrapperWidth,
+    hoverRows: _hoverRows,
+    selectRow: _selectRow,
+    selectRows: _selectRows,
+    updateCellHoverLocation: updateCellHoverLocation
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    hoveredRows: hoveredRows,
+    stickyTop: tableActive ? stickyTop : undefined
+  }), /*#__PURE__*/_react.default.createElement(_RowControls.RowControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    hoverRows: _hoverRows,
+    hoveredRows: hoveredRows,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    selectRow: _selectRow,
+    stickyTop: tableActive ? stickyTop : undefined
+  })))));
+};
+var _default = exports.default = TableFloatingControls;

package/dist/cjs/utils/column-controls.js

@@ -26,13 +26,13 @@ var getColumnsWidths = exports.getColumnsWidths = function getColumnsWidths(view
       length: map.width
     });
     for (var i = 0; i < map.width; i++) {
-      var cells = (0, _utils3.getCellsInColumn)(i)(selection);
-      var cell = cells[0];
-      if (cell) {
-        var cellRef = (0, _utils2.findDomRefAtPos)(cell.pos, domAtPos);
+      if (!map.isCellMergedTopLeft(0, i)) {
+        var node = table.node.nodeAt(map.map[i]);
+        var pos = map.map[i] + table.start;
+        var cellRef = (0, _utils2.findDomRefAtPos)(pos, domAtPos);
         var rect = cellRef.getBoundingClientRect();
         widths[i] = (rect ? rect.width : cellRef.offsetWidth) + 1;
-        i += cell.node.attrs.colspan - 1;
+        i += node.attrs.colspan - 1;
       }
     }
   }

package/dist/cjs/utils/create.js

@@ -10,12 +10,9 @@ var _utils = require("@atlaskit/editor-tables/utils");
 var _utils2 = require("../pm-plugins/table-resizing/utils");
 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; }
-var createTableWithWidth = exports.createTableWithWidth = function createTableWithWidth(isFullWidthModeEnabled, getEditorFeatureFlags, createTableProps) {
+var createTableWithWidth = exports.createTableWithWidth = function createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled, createTableProps) {
   return function (schema) {
-    var _ref = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {},
-      _ref$tablePreserveWid = _ref.tablePreserveWidth,
-      tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
-    if (tablePreserveWidth && isFullWidthModeEnabled) {
+    if (isTableScalingEnabled && isFullWidthModeEnabled) {
       return (0, _utils.createTable)(_objectSpread({
         schema: schema,
         tableWidth: _utils2.TABLE_MAX_WIDTH

package/dist/cjs/utils/dom.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragRowControlsButton = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = exports.findNearestCellIndexToPoint = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("../types");
-var SELECTOR_TABLE_LEAFS = ".".concat(_types.TableCssClassName.TABLE_CELL, ", .").concat(_types.TableCssClassName.TABLE_HEADER_CELL);
 var isCell = exports.isCell = function isCell(node) {
   return Boolean(node && (['TH', 'TD'].indexOf(node.tagName) > -1 || !!(0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.TABLE_HEADER_CELL)) || !!(0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.TABLE_CELL))));
 };
@@ -102,22 +101,21 @@ var isDragCornerButton = exports.isDragCornerButton = function isDragCornerButto
  *
  * the same is valid to the right side.
  */
-
-var getMousePositionHorizontalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = function getMousePositionHorizontalRelativeByElement(mouseEvent, elementContentRects, gapInPixels, isDragAndDropEnabled) {
+/**
+ * This can be used with mouse events to determine the left/right side of the target the pointer is closest too.
+ *
+ * WARNING: This metod reads properties which can trigger a reflow; use this wisely.
+ *
+ * @param mouseEvent
+ * @param gapInPixels
+ * @returns
+ */
+var getMousePositionHorizontalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = function getMousePositionHorizontalRelativeByElement(mouseEvent, offsetX, gapInPixels) {
   var element = mouseEvent.target;
   if (element instanceof HTMLElement) {
-    var width, x;
-    if (isDragAndDropEnabled) {
-      // mouse event fires for new overlapping column controls, so the cell can not get detected. Get width
-      // directly from element that will be .pm-table-drag-columns-floating-insert-dot-wrapper
-      width = element.clientWidth;
-    } else {
-      var _closestCell$id, _elementContentRects$, _elementContentRects$2;
-      var closestCell = element.closest(SELECTOR_TABLE_LEAFS);
-      var id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
-      width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 || (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
-    }
-    x = mouseEvent.offsetX;
+    var width = element.clientWidth; // reflow
+    var x = !Number.isNaN(offsetX) ? offsetX : mouseEvent.offsetX; // reflow
+
     if (width <= 0) {
       return null;
     }