@atlaskit/editor-plugin-table 7.0.2 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-table
 
+## 7.1.0
+
+### Minor Changes
+
+- [#69232](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69232) [`93c8f231aa82`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/93c8f231aa82) - Optimized the table move column logic to perform individual insert/deletes per row
+- [#68790](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68790) [`c6d8affc52d1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c6d8affc52d1) - Support maybeAdd plugins in usePreset. Add typing support for universal preset.
+
+  Now when using the editor API with the universal preset
+
+### Patch Changes
+
+- [#68693](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68693) [`f664d35cc135`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f664d35cc135) - Fix incorrect drag handle position after deleting row in table
+- [#68011](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68011) [`f19b64a46694`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f19b64a46694) - Remove check for header for column insert keyboard shortcut
+- [#68926](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68926) [`fceb32f94798`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fceb32f94798) - [ux] update drag menu's insert row's icons
+- Updated dependencies
+
+## 7.0.3
+
+### Patch Changes
+
+- [#68585](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68585) [`453395005d42`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/453395005d42) - [ux] Fixed a bug where a table nested in expand has showdows after clicking breakout button.
+
 ## 7.0.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -394,7 +394,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$wrapper;
+      var _this$wrapper,
+        _this2 = this;
       var _this$props9 = this.props,
         view = _this$props9.view,
         getNode = _this$props9.getNode,
@@ -409,7 +410,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
       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.props.isDragAndDropEnabled) {
+          // requestAnimationFrame is used here to fix a race condition issue
+          // that happens when a table is nested in expand and expand's width is
+          // changed via breakout button
+          window.requestAnimationFrame(function () {
+            _this2.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(_this2.updateShadowState, _this2.table, _this2.wrapper);
+          });
+        } else {
+          this.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
+        }
       }
       if (this.overflowShadowsObserver) {
         var _this$state$stickyHea;
@@ -462,7 +472,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _classnames,
-        _this2 = this;
+        _this3 = this;
       var _this$props10 = this.props,
         view = _this$props10.view,
         getNode = _this$props10.getNode,
@@ -585,12 +595,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this2$wrapper;
-          return ((_this2$wrapper = _this2.wrapper) === null || _this2$wrapper === void 0 ? void 0 : _this2$wrapper.scrollLeft) || 0;
+          var _this3$wrapper;
+          return ((_this3$wrapper = _this3.wrapper) === null || _this3$wrapper === void 0 ? void 0 : _this3$wrapper.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this2$wrapper2;
-          return ((_this2$wrapper2 = _this2.wrapper) === null || _this2$wrapper2 === void 0 ? void 0 : _this2$wrapper2.clientWidth) || 760;
+          var _this3$wrapper2;
+          return ((_this3$wrapper2 = _this3.wrapper) === null || _this3$wrapper2 === void 0 ? void 0 : _this3$wrapper2.clientWidth) || 760;
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
         style: shadowStyle(showBeforeShadow),
@@ -605,13 +615,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
-          _this2.wrapper = elem;
+          _this3.wrapper = elem;
           if (elem) {
-            _this2.props.contentDOM(elem);
+            _this3.props.contentDOM(elem);
             var tableElement = elem.querySelector('table');
-            if (tableElement !== _this2.table) {
-              _this2.table = tableElement;
-              _this2.createShadowSentinels(_this2.table);
+            if (tableElement !== _this3.table) {
+              _this3.table = tableElement;
+              _this3.createShadowSentinels(_this3.table);
             }
           }
         }

package/dist/cjs/pm-plugins/drag-and-drop/commands.js

@@ -87,7 +87,7 @@ var moveSource = exports.moveSource = function moveSource(sourceType, sourceInde
     if (isTableRow) {
       return (0, _transforms.combineTransforms)([(0, _utils.moveRow)(state, sourceIndexes, targetIndex), selectStartOfTable, (0, _utils.selectRow)(targetIndex)], nextTr);
     }
-    return (0, _transforms.combineTransforms)([(0, _utils.moveColumn)(sourceIndexes, targetIndex), selectStartOfTable, (0, _utils.selectColumn)(targetIndex)], nextTr);
+    return (0, _transforms.combineTransforms)([(0, _utils.moveColumn)(state, sourceIndexes, targetIndex), selectStartOfTable, (0, _utils.selectColumn)(targetIndex)], nextTr);
   });
 };
 var toggleDragMenu = exports.toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {

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

@@ -38,7 +38,7 @@ function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEn
   // Add row/column shortcuts
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.addRowBefore.common, (0, _commandsWithAnalytics.addRowAroundSelection)(editorAnalyticsAPI)('TOP'), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.addRowAfter.common, (0, _commandsWithAnalytics.addRowAroundSelection)(editorAnalyticsAPI)('BOTTOM'), list);
-  (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnBefore.common, (0, _commands2.triggerUnlessTableHeader)((0, _insert.addColumnBefore)(getEditorContainerWidth)), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnBefore.common, (0, _insert.addColumnBefore)(getEditorContainerWidth), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnAfter.common, (0, _insert.addColumnAfter)(getEditorContainerWidth), list);
   if (dragAndDropEnabled) {
     // Move row/column shortcuts

package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js

@@ -128,7 +128,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     }
     var isHover = type === 'hover';
     var isRowsSelected = selectedRowIndexes.length > 0;
-    var showCondition = isHover ? isRowsSelected && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedRowIndexes.length < rowHeights.length && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
+    var showCondition = isHover ? isRowsSelected && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedRowIndexes.length < rowHeights.length && rowIndex < rowHeights.length && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
     if (!showCondition) {
       return null;
     }

package/dist/cjs/ui/icons/AddRowAboveIcon.js

@@ -18,24 +18,20 @@ var AddRowAboveIcon = exports.AddRowAboveIcon = function AddRowAboveIcon() {
     height: "24",
     fill: "var(--ds-border-inverse, #FFFFFF)",
     fillOpacity: "0.01"
-  }), /*#__PURE__*/_react.default.createElement("mask", {
-    id: "path-1-inside-1_896_17822",
-    fill: "var(--ds-border-inverse, #FFFFFF)"
-  }, /*#__PURE__*/_react.default.createElement("rect", {
+  }), /*#__PURE__*/_react.default.createElement("rect", {
     x: "6",
     y: "12",
     width: "12",
-    height: "8",
-    rx: "0.5"
-  })), /*#__PURE__*/_react.default.createElement("rect", {
+    height: "3",
+    rx: "0.5",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
     x: "6",
-    y: "12",
+    y: "16",
     width: "12",
-    height: "8",
+    height: "3",
     rx: "0.5",
-    stroke: "currentColor",
-    strokeWidth: "4",
-    mask: "url(#path-1-inside-1_896_17822)"
+    fill: "currentColor"
   }), /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",

package/dist/cjs/ui/icons/AddRowBelowIcon.js

@@ -13,28 +13,32 @@ var AddRowBelowIcon = exports.AddRowBelowIcon = function AddRowBelowIcon() {
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react.default.createElement("mask", {
-    id: "path-1-inside-1_920_47112",
-    fill: "var(--ds-border-inverse, #FFFFFF)"
   }, /*#__PURE__*/_react.default.createElement("rect", {
-    x: "6",
-    y: "4",
+    width: "24",
+    height: "24",
+    transform: "matrix(-1 0 0 -1 24 24)",
+    fill: "var(--ds-border-inverse, #FFFFFF)",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "18",
+    y: "12",
     width: "12",
-    height: "8",
-    rx: "0.5"
-  })), /*#__PURE__*/_react.default.createElement("rect", {
-    x: "6",
-    y: "4",
+    height: "3",
+    rx: "0.5",
+    transform: "rotate(-180 18 12)",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "18",
+    y: "8",
     width: "12",
-    height: "8",
+    height: "3",
     rx: "0.5",
-    stroke: "currentColor",
-    strokeWidth: "4",
-    mask: "url(#path-1-inside-1_920_47112)"
+    transform: "rotate(-180 18 8)",
+    fill: "currentColor"
   }), /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M13 15V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13Z",
+    d: "M11 17V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11Z",
     fill: "currentColor"
   }));
 };

package/dist/es2019/nodeviews/TableComponent.js

@@ -406,7 +406,16 @@ class TableComponent extends React.Component {
       clearHoverSelection()(view.state, view.dispatch);
     }
     if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
-      this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
+      if (this.props.isDragAndDropEnabled) {
+        // requestAnimationFrame is used here to fix a race condition issue
+        // that happens when a table is nested in expand and expand's width is
+        // changed via breakout button
+        window.requestAnimationFrame(() => {
+          this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
+        });
+      } else {
+        this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
+      }
     }
     if (this.overflowShadowsObserver) {
       var _this$state$stickyHea;

package/dist/es2019/pm-plugins/drag-and-drop/commands.js

@@ -71,7 +71,7 @@ export const moveSource = (sourceType, sourceIndexes, targetIndex, tr) => create
   if (isTableRow) {
     return combineTransforms([moveRow(state, sourceIndexes, targetIndex), selectStartOfTable, selectRow(targetIndex)], nextTr);
   }
-  return combineTransforms([moveColumn(sourceIndexes, targetIndex), selectStartOfTable, selectColumn(targetIndex)], nextTr);
+  return combineTransforms([moveColumn(state, sourceIndexes, targetIndex), selectStartOfTable, selectColumn(targetIndex)], nextTr);
 });
 export const toggleDragMenu = (isDragMenuOpen, direction, index) => createCommand(state => {
   let {

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

@@ -3,7 +3,7 @@ import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace,
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { createTable, goToNextCell, moveCursorBackward, triggerUnlessTableHeader } from '../commands';
+import { createTable, goToNextCell, moveCursorBackward } from '../commands';
 import { addRowAroundSelection, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
 import { activateNextResizeArea, changeColumnWidthByStep, initiateKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
@@ -29,7 +29,7 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   // Add row/column shortcuts
   bindKeymapWithCommand(addRowBefore.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
   bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-  bindKeymapWithCommand(addColumnBefore.common, triggerUnlessTableHeader(addColumnBeforeCommand(getEditorContainerWidth)), list);
+  bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(getEditorContainerWidth), list);
   bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(getEditorContainerWidth), list);
   if (dragAndDropEnabled) {
     // Move row/column shortcuts

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -118,7 +118,7 @@ const DragControlsComponent = ({
     }
     const isHover = type === 'hover';
     const isRowsSelected = selectedRowIndexes.length > 0;
-    const showCondition = isHover ? isRowsSelected && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedRowIndexes.length < rowHeights.length && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
+    const showCondition = isHover ? isRowsSelected && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedRowIndexes.length < rowHeights.length && rowIndex < rowHeights.length && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
     if (!showCondition) {
       return null;
     }

package/dist/es2019/ui/icons/AddRowAboveIcon.js

@@ -10,24 +10,20 @@ export const AddRowAboveIcon = () => /*#__PURE__*/React.createElement("svg", {
   height: "24",
   fill: "var(--ds-border-inverse, #FFFFFF)",
   fillOpacity: "0.01"
-}), /*#__PURE__*/React.createElement("mask", {
-  id: "path-1-inside-1_896_17822",
-  fill: "var(--ds-border-inverse, #FFFFFF)"
-}, /*#__PURE__*/React.createElement("rect", {
+}), /*#__PURE__*/React.createElement("rect", {
   x: "6",
   y: "12",
   width: "12",
-  height: "8",
-  rx: "0.5"
-})), /*#__PURE__*/React.createElement("rect", {
+  height: "3",
+  rx: "0.5",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("rect", {
   x: "6",
-  y: "12",
+  y: "16",
   width: "12",
-  height: "8",
+  height: "3",
   rx: "0.5",
-  stroke: "currentColor",
-  strokeWidth: "4",
-  mask: "url(#path-1-inside-1_896_17822)"
+  fill: "currentColor"
 }), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",

package/dist/es2019/ui/icons/AddRowBelowIcon.js

@@ -5,27 +5,31 @@ export const AddRowBelowIcon = () => /*#__PURE__*/React.createElement("svg", {
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React.createElement("mask", {
-  id: "path-1-inside-1_920_47112",
-  fill: "var(--ds-border-inverse, #FFFFFF)"
 }, /*#__PURE__*/React.createElement("rect", {
-  x: "6",
-  y: "4",
+  width: "24",
+  height: "24",
+  transform: "matrix(-1 0 0 -1 24 24)",
+  fill: "var(--ds-border-inverse, #FFFFFF)",
+  fillOpacity: "0.01"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "18",
+  y: "12",
   width: "12",
-  height: "8",
-  rx: "0.5"
-})), /*#__PURE__*/React.createElement("rect", {
-  x: "6",
-  y: "4",
+  height: "3",
+  rx: "0.5",
+  transform: "rotate(-180 18 12)",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "18",
+  y: "8",
   width: "12",
-  height: "8",
+  height: "3",
   rx: "0.5",
-  stroke: "currentColor",
-  strokeWidth: "4",
-  mask: "url(#path-1-inside-1_920_47112)"
+  transform: "rotate(-180 18 8)",
+  fill: "currentColor"
 }), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M13 15V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13Z",
+  d: "M11 17V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11Z",
   fill: "currentColor"
 }));

package/dist/esm/nodeviews/TableComponent.js

@@ -387,7 +387,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$wrapper;
+      var _this$wrapper,
+        _this2 = this;
       var _this$props9 = this.props,
         view = _this$props9.view,
         getNode = _this$props9.getNode,
@@ -402,7 +403,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         clearHoverSelection()(view.state, view.dispatch);
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
-        this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
+        if (this.props.isDragAndDropEnabled) {
+          // requestAnimationFrame is used here to fix a race condition issue
+          // that happens when a table is nested in expand and expand's width is
+          // changed via breakout button
+          window.requestAnimationFrame(function () {
+            _this2.overflowShadowsObserver = new OverflowShadowsObserver(_this2.updateShadowState, _this2.table, _this2.wrapper);
+          });
+        } else {
+          this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
+        }
       }
       if (this.overflowShadowsObserver) {
         var _this$state$stickyHea;
@@ -455,7 +465,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _classnames,
-        _this2 = this;
+        _this3 = this;
       var _this$props10 = this.props,
         view = _this$props10.view,
         getNode = _this$props10.getNode,
@@ -578,12 +588,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this2$wrapper;
-          return ((_this2$wrapper = _this2.wrapper) === null || _this2$wrapper === void 0 ? void 0 : _this2$wrapper.scrollLeft) || 0;
+          var _this3$wrapper;
+          return ((_this3$wrapper = _this3.wrapper) === null || _this3$wrapper === void 0 ? void 0 : _this3$wrapper.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this2$wrapper2;
-          return ((_this2$wrapper2 = _this2.wrapper) === null || _this2$wrapper2 === void 0 ? void 0 : _this2$wrapper2.clientWidth) || 760;
+          var _this3$wrapper2;
+          return ((_this3$wrapper2 = _this3.wrapper) === null || _this3$wrapper2 === void 0 ? void 0 : _this3$wrapper2.clientWidth) || 760;
         }
       }), /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showBeforeShadow),
@@ -598,13 +608,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement("div", {
         className: classnames(ClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
-          _this2.wrapper = elem;
+          _this3.wrapper = elem;
           if (elem) {
-            _this2.props.contentDOM(elem);
+            _this3.props.contentDOM(elem);
             var tableElement = elem.querySelector('table');
-            if (tableElement !== _this2.table) {
-              _this2.table = tableElement;
-              _this2.createShadowSentinels(_this2.table);
+            if (tableElement !== _this3.table) {
+              _this3.table = tableElement;
+              _this3.createShadowSentinels(_this3.table);
             }
           }
         }

package/dist/esm/pm-plugins/drag-and-drop/commands.js

@@ -82,7 +82,7 @@ export var moveSource = function moveSource(sourceType, sourceIndexes, targetInd
     if (isTableRow) {
       return combineTransforms([moveRow(state, sourceIndexes, targetIndex), selectStartOfTable, selectRow(targetIndex)], nextTr);
     }
-    return combineTransforms([moveColumn(sourceIndexes, targetIndex), selectStartOfTable, selectColumn(targetIndex)], nextTr);
+    return combineTransforms([moveColumn(state, sourceIndexes, targetIndex), selectStartOfTable, selectColumn(targetIndex)], nextTr);
   });
 };
 export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {

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

@@ -3,7 +3,7 @@ import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace,
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { createTable, goToNextCell, moveCursorBackward, triggerUnlessTableHeader } from '../commands';
+import { createTable, goToNextCell, moveCursorBackward } from '../commands';
 import { addRowAroundSelection, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
 import { activateNextResizeArea, changeColumnWidthByStep, initiateKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
@@ -31,7 +31,7 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   // Add row/column shortcuts
   bindKeymapWithCommand(addRowBefore.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
   bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-  bindKeymapWithCommand(addColumnBefore.common, triggerUnlessTableHeader(addColumnBeforeCommand(getEditorContainerWidth)), list);
+  bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(getEditorContainerWidth), list);
   bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(getEditorContainerWidth), list);
   if (dragAndDropEnabled) {
     // Move row/column shortcuts

package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js

@@ -118,7 +118,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     }
     var isHover = type === 'hover';
     var isRowsSelected = selectedRowIndexes.length > 0;
-    var showCondition = isHover ? isRowsSelected && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedRowIndexes.length < rowHeights.length && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
+    var showCondition = isHover ? isRowsSelected && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedRowIndexes.length < rowHeights.length && rowIndex < rowHeights.length && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
     if (!showCondition) {
       return null;
     }

package/dist/esm/ui/icons/AddRowAboveIcon.js

@@ -11,24 +11,20 @@ export var AddRowAboveIcon = function AddRowAboveIcon() {
     height: "24",
     fill: "var(--ds-border-inverse, #FFFFFF)",
     fillOpacity: "0.01"
-  }), /*#__PURE__*/React.createElement("mask", {
-    id: "path-1-inside-1_896_17822",
-    fill: "var(--ds-border-inverse, #FFFFFF)"
-  }, /*#__PURE__*/React.createElement("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     x: "6",
     y: "12",
     width: "12",
-    height: "8",
-    rx: "0.5"
-  })), /*#__PURE__*/React.createElement("rect", {
+    height: "3",
+    rx: "0.5",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("rect", {
     x: "6",
-    y: "12",
+    y: "16",
     width: "12",
-    height: "8",
+    height: "3",
     rx: "0.5",
-    stroke: "currentColor",
-    strokeWidth: "4",
-    mask: "url(#path-1-inside-1_896_17822)"
+    fill: "currentColor"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",

package/dist/esm/ui/icons/AddRowBelowIcon.js

@@ -6,28 +6,32 @@ export var AddRowBelowIcon = function AddRowBelowIcon() {
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("mask", {
-    id: "path-1-inside-1_920_47112",
-    fill: "var(--ds-border-inverse, #FFFFFF)"
   }, /*#__PURE__*/React.createElement("rect", {
-    x: "6",
-    y: "4",
+    width: "24",
+    height: "24",
+    transform: "matrix(-1 0 0 -1 24 24)",
+    fill: "var(--ds-border-inverse, #FFFFFF)",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "18",
+    y: "12",
     width: "12",
-    height: "8",
-    rx: "0.5"
-  })), /*#__PURE__*/React.createElement("rect", {
-    x: "6",
-    y: "4",
+    height: "3",
+    rx: "0.5",
+    transform: "rotate(-180 18 12)",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "18",
+    y: "8",
     width: "12",
-    height: "8",
+    height: "3",
     rx: "0.5",
-    stroke: "currentColor",
-    strokeWidth: "4",
-    mask: "url(#path-1-inside-1_920_47112)"
+    transform: "rotate(-180 18 8)",
+    fill: "currentColor"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M13 15V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13Z",
+    d: "M11 17V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11Z",
     fill: "currentColor"
   }));
 };

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { default as tablesPlugin } from './plugin';
-export type { TablePlugin } from './plugin';
+export type { TablePlugin, TablePluginOptions } from './plugin';

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

@@ -1,2 +1,2 @@
 export { default as tablesPlugin } from './plugin';
-export type { TablePlugin } from './plugin';
+export type { TablePlugin, TablePluginOptions } from './plugin';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.3.0",
     "@atlaskit/custom-steps": "^0.0.11",
-    "@atlaskit/editor-common": "^77.0.0",
+    "@atlaskit/editor-common": "^77.1.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -39,16 +39,16 @@
     "@atlaskit/editor-plugin-width": "^0.2.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
-    "@atlaskit/editor-tables": "^2.4.0",
+    "@atlaskit/editor-tables": "^2.5.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^0.25.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^0.8.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
-    "@atlaskit/primitives": "^1.18.0",
+    "@atlaskit/primitives": "^1.20.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/toggle": "^13.0.0",
-    "@atlaskit/tokens": "^1.34.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/src/index.ts

@@ -1,2 +1,2 @@
 export { default as tablesPlugin } from './plugin';
-export type { TablePlugin } from './plugin';
+export type { TablePlugin, TablePluginOptions } from './plugin';