@atlaskit/editor-plugin-table 7.5.5 → 7.5.6

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

@@ -1,235 +1,124 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 = _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; })(); }
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
-import { isSelectionUpdated } from '../../utils';
 import { CornerControls, DragCornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
 import { DragControls, RowControls } from './RowControls';
-var TableFloatingControls = /*#__PURE__*/function (_Component) {
-  _inherits(TableFloatingControls, _Component);
-  var _super = _createSuper(TableFloatingControls);
-  function TableFloatingControls(props) {
-    var _this;
-    _classCallCheck(this, TableFloatingControls);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "selectRow", function (row, expand) {
-      var editorView = _this.props.editorView;
-      var state = editorView.state,
-        dispatch = editorView.dispatch;
-      // fix for issue ED-4665
-      if (browser.ie_version === 11) {
-        editorView.dom.blur();
-      }
-      selectRow(row, expand)(state, dispatch);
-    });
-    _defineProperty(_assertThisInitialized(_this), "selectRows", function (rowIndexes) {
-      var editorView = _this.props.editorView;
-      var state = editorView.state,
-        dispatch = editorView.dispatch;
-      // fix for issue ED-4665
-      if (browser.ie_version === 11) {
-        editorView.dom.blur();
-      }
-      selectRows(rowIndexes)(state, dispatch);
-    });
-    _defineProperty(_assertThisInitialized(_this), "hoverRows", function (rows, danger) {
-      var _this$props$editorVie = _this.props.editorView,
-        state = _this$props$editorVie.state,
-        dispatch = _this$props$editorVie.dispatch;
-      hoverRows(rows, danger)(state, dispatch);
-    });
-    // re-use across numbered columns and row controls
-    _defineProperty(_assertThisInitialized(_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.
-        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;
-  }
-  _createClass(TableFloatingControls, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.tryInitResizeObserver();
+export var 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 = useCallback(function (row, expand) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    // fix for issue ED-4665
+    if (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();
+    selectRow(row, expand)(state, dispatch);
+  }, [editorView]);
+  var _selectRows = useCallback(function (rowIndexes) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    // fix for issue ED-4665
+    if (browser.ie_version === 11) {
+      editorView.dom.blur();
     }
+    selectRows(rowIndexes)(state, dispatch);
+  }, [editorView]);
+  var _hoverRows = useCallback(function (rows, danger) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    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(ClassName.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 || 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 = 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.
+      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 ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
-      return /*#__PURE__*/React.createElement("div", {
-        className: wrapperClassName
-      }, /*#__PURE__*/React.createElement("div", {
-        onMouseDown: function onMouseDown(e) {
-          return !isDragAndDropEnabled && e.preventDefault();
-        }
-      }, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(NumberColumn, {
-        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.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragCornerControls, {
-        editorView: editorView,
-        tableRef: tableRef,
-        isInDanger: isInDanger,
-        isResizing: isResizing
-      }), /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
-        editorView: editorView,
-        tableRef: tableRef,
-        isInDanger: isInDanger,
-        isResizing: isResizing,
-        isHeaderRowEnabled: isHeaderRowEnabled,
-        isHeaderColumnEnabled: isHeaderColumnEnabled,
-        hoveredRows: hoveredRows,
-        stickyTop: tableActive ? stickyTop : undefined
-      }), /*#__PURE__*/React.createElement(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 ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    onMouseDown: function onMouseDown(e) {
+      return !isDragAndDropEnabled && e.preventDefault();
     }
-  }]);
-  return TableFloatingControls;
-}(Component);
-_defineProperty(TableFloatingControls, "displayName", 'TableFloatingControls');
-export { TableFloatingControls as default };
+  }, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(NumberColumn, {
+    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.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragCornerControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing
+  }), /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    hoveredRows: hoveredRows,
+    stickyTop: tableActive ? stickyTop : undefined
+  }), /*#__PURE__*/React.createElement(RowControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    hoverRows: _hoverRows,
+    hoveredRows: hoveredRows,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    selectRow: _selectRow,
+    stickyTop: tableActive ? stickyTop : undefined
+  })))));
+};
+export default TableFloatingControls;

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

@@ -3,7 +3,7 @@ import { maphElem } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, getCellsInColumn, getSelectionRect, isColumnSelected, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { findTable, getSelectionRect, isColumnSelected, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { tableDeleteButtonSize } from '../ui/consts';
 export var getColumnsWidths = function getColumnsWidths(view) {
@@ -19,13 +19,13 @@ export var getColumnsWidths = function getColumnsWidths(view) {
       length: map.width
     });
     for (var i = 0; i < map.width; i++) {
-      var cells = getCellsInColumn(i)(selection);
-      var cell = cells[0];
-      if (cell) {
-        var cellRef = 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 = 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/esm/utils/dom.js

@@ -1,6 +1,5 @@
 import { closestElement, containsClassName } from '@atlaskit/editor-common/utils';
 import { TableCssClassName as ClassName } from '../types';
-var SELECTOR_TABLE_LEAFS = ".".concat(ClassName.TABLE_CELL, ", .").concat(ClassName.TABLE_HEADER_CELL);
 export var isCell = function isCell(node) {
   return Boolean(node && (['TH', 'TD'].indexOf(node.tagName) > -1 || !!closestElement(node, ".".concat(ClassName.TABLE_HEADER_CELL)) || !!closestElement(node, ".".concat(ClassName.TABLE_CELL))));
 };
@@ -96,22 +95,21 @@ export var isDragCornerButton = function isDragCornerButton(node) {
  *
  * the same is valid to the right side.
  */
-
-export var 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
+ */
+export var 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;
     }

package/dist/types/event-handlers.d.ts

@@ -1,7 +1,6 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { ElementContentRects } from './types';
 export declare const handleBlur: (view: EditorView, event: Event) => boolean;
 export declare const handleFocus: (view: EditorView, event: Event) => boolean;
 export declare const handleClick: (view: EditorView, event: Event) => boolean;
@@ -11,9 +10,9 @@ export declare const handleMouseDown: (_: EditorView, event: Event) => boolean;
 export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseLeave: (view: EditorView, event: Event) => boolean;
-export declare const handleMouseMove: (view: EditorView, event: Event, elementContentRects?: ElementContentRects) => boolean;
+export declare const handleMouseMove: (view: EditorView, event: Event) => boolean;
 export declare function handleTripleClick(view: EditorView, pos: number): boolean;
 export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, editorAnalyticsAPI?: EditorAnalyticsAPI, editorView?: EditorView, isTableScalingEnabled?: boolean) => Transaction;
 export declare const isTableInFocus: (view: EditorView) => boolean;
-export declare const whenTableInFocus: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;
-export declare const withCellTracking: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;
+export declare const whenTableInFocus: (eventHandler: (view: EditorView, mouseEvent: Event) => boolean) => (view: EditorView, mouseEvent: Event) => boolean;
+export declare const withCellTracking: (eventHandler: (view: EditorView, mouseEvent: Event) => boolean) => (view: EditorView, mouseEvent: Event) => boolean;

package/dist/types/nodeviews/OverflowShadowsObserver.d.ts

@@ -19,6 +19,8 @@ export declare class OverflowShadowsObserver {
      * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
      * reading it from sticky cell
      */
-    updateStickyShadows: (stickyRowHeight?: number) => void;
+    updateStickyShadows: ((stickyRowHeight?: number) => void) & {
+        cancel(): void;
+    };
     dispose(): void;
 }

package/dist/types/nodeviews/TableCell.d.ts

@@ -3,11 +3,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import TableNodeView from './TableNodeViewBase';
 export default class TableCell extends TableNodeView<HTMLElement> implements NodeView {
-    private readonly observer?;
-    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher, observer?: ResizeObserver | undefined);
-    private isStickyHeaderEnabled;
-    private isDragAndDropEnabled;
+    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher);
     update(node: PMNode): boolean;
-    destroy(): void;
     private updateNodeView;
 }

package/dist/types/nodeviews/TableComponent.d.ts

@@ -37,6 +37,8 @@ interface TableState {
     stickyHeader?: RowStickyState;
     [ShadowEvent.SHOW_BEFORE_SHADOW]: boolean;
     [ShadowEvent.SHOW_AFTER_SHADOW]: boolean;
+    tableWrapperWidth?: number;
+    tableWrapperHeight?: number;
 }
 declare class TableComponent extends React.Component<ComponentProps, TableState> {
     static displayName: string;
@@ -50,6 +52,7 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     private stickyScrollbar?;
     private isInitialOverflowSent;
     private initialOverflowCaptureTimerId?;
+    private resizeObserver?;
     private dragAndDropCleanupFn?;
     constructor(props: ComponentProps);
     componentDidMount(): void;
@@ -58,6 +61,7 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     componentDidUpdate(_: any, prevState: TableState): void;
     private updateShadowState;
     private createShadowSentinels;
+    private observeTable;
     onStickyState: (state: StickyPluginState) => void;
     prevTableState: any;
     render(): JSX.Element;

package/dist/types/nodeviews/TableContainer.d.ts

@@ -25,8 +25,9 @@ type ResizableTableContainerProps = {
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
     isTableScalingEnabled?: boolean;
+    tableWrapperHeight?: number;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, isTableScalingEnabled, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, isTableScalingEnabled, tableWrapperHeight, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -40,6 +41,7 @@ type TableContainerProps = {
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
     isTableScalingEnabled?: boolean;
+    tableWrapperHeight?: number;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, isTableScalingEnabled, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isTableScalingEnabled, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types/types.d.ts

@@ -412,9 +412,6 @@ export interface ToolbarMenuState {
 export interface ToolbarMenuContext {
     formatMessage: IntlShape['formatMessage'];
 }
-export type ElementContentRects = {
-    [key: string]: ResizeObserverEntry['contentRect'];
-};
 export declare enum ShadowEvent {
     SHOW_BEFORE_SHADOW = "showBeforeShadow",
     SHOW_AFTER_SHADOW = "showAfterShadow"

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

@@ -25,6 +25,7 @@ export interface Props {
     tableContainerWidth?: number;
     isNumberColumnEnabled?: boolean;
     getScrollOffset?: () => number;
+    tableWrapperHeight?: number;
 }
-export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, }: Props) => JSX.Element | null;
+export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, }: Props) => JSX.Element | null;
 export default TableFloatingColumnControls;

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

@@ -1,11 +1,11 @@
-import { Component } from 'react';
+/// <reference types="react" />
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { CellHoverMeta } from '../../types';
-export interface Props {
+export interface TableFloatingControlsProps {
     editorView: EditorView;
     selection?: Selection;
     tableRef?: HTMLTableElement;
@@ -25,24 +25,7 @@ export interface Props {
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
     insertRowButtonIndex?: number;
+    tableWrapperWidth?: number;
 }
-interface State {
-    tableWrapperWidth: number;
-    tableWrapperHeight: number;
-}
-export default class TableFloatingControls extends Component<Props, State> {
-    static displayName: string;
-    private resizeObserver?;
-    constructor(props: Props);
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    private tryInitResizeObserver;
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean;
-    componentWillUnmount(): void;
-    render(): JSX.Element | null;
-    private selectRow;
-    private selectRows;
-    private hoverRows;
-    private updateCellHoverLocation;
-}
-export {};
+export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, }: TableFloatingControlsProps) => JSX.Element | null;
+export default TableFloatingControls;

package/dist/types/utils/dom.d.ts

@@ -1,4 +1,3 @@
-import type { ElementContentRects } from '../types';
 export declare const isCell: (node: HTMLElement | null) => boolean;
 export declare const isCornerButton: (node: HTMLElement | null) => boolean;
 export declare const isInsertRowButton: (node: HTMLElement | null) => boolean | HTMLElement | null;
@@ -13,7 +12,16 @@ export declare const isDragRowControlsButton: (node: HTMLElement | null) => true
 export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragCornerButton: (node: HTMLElement | null) => boolean;
-export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number, isDragAndDropEnabled?: boolean) => 'left' | 'right' | null;
+/**
+ * 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
+ */
+export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, offsetX: number, gapInPixels?: number) => 'left' | 'right' | null;
 export declare const getMousePositionVerticalRelativeByElement: (mouseEvent: MouseEvent) => 'top' | 'bottom' | null;
 export declare const hasResizeHandler: ({ columnEndIndexTarget, target, }: {
     columnEndIndexTarget: number;

package/dist/types-ts4.5/event-handlers.d.ts

@@ -1,7 +1,6 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { ElementContentRects } from './types';
 export declare const handleBlur: (view: EditorView, event: Event) => boolean;
 export declare const handleFocus: (view: EditorView, event: Event) => boolean;
 export declare const handleClick: (view: EditorView, event: Event) => boolean;
@@ -11,9 +10,9 @@ export declare const handleMouseDown: (_: EditorView, event: Event) => boolean;
 export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseLeave: (view: EditorView, event: Event) => boolean;
-export declare const handleMouseMove: (view: EditorView, event: Event, elementContentRects?: ElementContentRects) => boolean;
+export declare const handleMouseMove: (view: EditorView, event: Event) => boolean;
 export declare function handleTripleClick(view: EditorView, pos: number): boolean;
 export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, editorAnalyticsAPI?: EditorAnalyticsAPI, editorView?: EditorView, isTableScalingEnabled?: boolean) => Transaction;
 export declare const isTableInFocus: (view: EditorView) => boolean;
-export declare const whenTableInFocus: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;
-export declare const withCellTracking: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;
+export declare const whenTableInFocus: (eventHandler: (view: EditorView, mouseEvent: Event) => boolean) => (view: EditorView, mouseEvent: Event) => boolean;
+export declare const withCellTracking: (eventHandler: (view: EditorView, mouseEvent: Event) => boolean) => (view: EditorView, mouseEvent: Event) => boolean;

package/dist/types-ts4.5/nodeviews/OverflowShadowsObserver.d.ts

@@ -19,6 +19,8 @@ export declare class OverflowShadowsObserver {
      * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
      * reading it from sticky cell
      */
-    updateStickyShadows: (stickyRowHeight?: number) => void;
+    updateStickyShadows: ((stickyRowHeight?: number) => void) & {
+        cancel(): void;
+    };
     dispose(): void;
 }