@atlaskit/editor-plugin-table 5.3.11 → 5.3.13

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

@@ -1,9 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils/merged-cells';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
+import { DragAndDropActionType } from './actions';
 import { clearDropTarget, moveSource, setDropTarget } from './commands';
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
@@ -14,13 +16,47 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
     state: createPluginState(dispatch, function (state) {
       return {
         decorationSet: DecorationSet.empty,
-        // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
-        // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
         dropTargetType: DropTargetType.NONE,
-        dropTargetIndex: 0
+        dropTargetIndex: 0,
+        isDragMenuOpen: false,
+        dragMenuIndex: 0
       };
     }),
     key: pluginKey,
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var _getTablePluginState = getTablePluginState(oldState),
+        oldTargetCellPosition = _getTablePluginState.targetCellPosition;
+      var _getTablePluginState2 = getTablePluginState(newState),
+        newTargetCellPosition = _getTablePluginState2.targetCellPosition;
+      var _getPluginState = getPluginState(newState),
+        isDragMenuOpen = _getPluginState.isDragMenuOpen,
+        dragMenuIndex = _getPluginState.dragMenuIndex;
+
+      // What's happening here? you asked... In a nutshell;
+      // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
+      // This will stop the drag menu from moving around the screen to different row/cols. Too achieve this we need
+      // to check if the new target cell position is pointed at a different cell than what the drag menu was opened on.
+      if (oldTargetCellPosition !== newTargetCellPosition) {
+        if (isDragMenuOpen) {
+          var tr = newState.tr;
+          var action = {
+            type: DragAndDropActionType.TOGGLE_DRAG_MENU,
+            data: {
+              isDragMenuOpen: false,
+              direction: undefined
+            }
+          };
+          if (newTargetCellPosition !== undefined) {
+            var cells = getCellsInRow(dragMenuIndex)(tr.selection);
+            if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition)) {
+              return tr.setMeta(pluginKey, action);
+            } // else NOP
+          } else {
+            return tr.setMeta(pluginKey, action);
+          }
+        }
+      }
+    },
     view: function view(editorView) {
       return {
         destroy: monitorForElements({
@@ -38,8 +74,8 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             indexes.length !== 1 || !(type === 'table-row' || type === 'table-column')) {
               return false;
             }
-            var _getTablePluginState = getTablePluginState(editorView.state),
-              tableNode = _getTablePluginState.tableNode;
+            var _getTablePluginState3 = getTablePluginState(editorView.state),
+              tableNode = _getTablePluginState3.tableNode;
             // If the draggable localId is the same as the current selected table localId then we will allow the monitor
             // watch for changes
             return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
@@ -87,8 +123,8 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
     },
     props: {
       decorations: function decorations(state) {
-        var _getPluginState = getPluginState(state),
-          decorationSet = _getPluginState.decorationSet;
+        var _getPluginState2 = getPluginState(state),
+          decorationSet = _getPluginState2.decorationSet;
         return decorationSet;
       }
     }

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

@@ -17,6 +17,12 @@ export default (function (pluginState, action) {
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0
       });
+    case DragAndDropActionType.TOGGLE_DRAG_MENU:
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        isDragMenuOpen: action.data.isDragMenuOpen,
+        dragMenuDirection: action.data.direction,
+        dragMenuIndex: action.data.index
+      });
     default:
       return pluginState;
   }

package/dist/esm/plugins/table/ui/DragHandle/index.js

@@ -18,6 +18,7 @@ export var DragHandle = function DragHandle(_ref) {
     previewHeight = _ref.previewHeight,
     onMouseOver = _ref.onMouseOver,
     onMouseOut = _ref.onMouseOut,
+    onMouseUp = _ref.onMouseUp,
     onClick = _ref.onClick;
   var dragHandleDivRef = useRef(null);
   var _useState = useState(null),
@@ -77,6 +78,7 @@ export var DragHandle = function DragHandle(_ref) {
     "data-testid": "table-floating-column-controls-drag-handle",
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
+    onMouseUp: onMouseUp,
     onClick: onClick
   }, /*#__PURE__*/React.createElement(DragHandleIcon, null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
     direction: direction,

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
+import { getDragMenuConfig } from '../../utils/drag-menu';
+import { dragMenuDropdownWidth } from '../consts';
+var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
+  var menuItems = [];
+  var menuCallback = {};
+  dragMenuConfig.forEach(function (item) {
+    menuItems.push({
+      key: item.id,
+      content: item.title,
+      value: {
+        name: item.id
+      },
+      isDisabled: item.disabled
+    });
+    item.onClick && (menuCallback[item.id] = item.onClick);
+  });
+  return {
+    menuItems: menuItems,
+    menuCallback: menuCallback
+  };
+};
+export var DragMenu = function DragMenu(_ref) {
+  var _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    index = _ref.index,
+    isOpen = _ref.isOpen,
+    editorView = _ref.editorView,
+    tableNode = _ref.tableNode,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement;
+  var tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+  var dragMenuConfig = getDragMenuConfig(direction, tableMap, index);
+  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
+    menuItems = _convertToDropdownIte.menuItems,
+    menuCallback = _convertToDropdownIte.menuCallback;
+  var closeMenu = function closeMenu() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    toggleDragMenu(false)(state, dispatch);
+  };
+  var onMenuItemActivated = function onMenuItemActivated(_ref2) {
+    var _menuCallback$item$va;
+    var item = _ref2.item;
+    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 || _menuCallback$item$va.call(menuCallback, editorView.state, editorView.dispatch);
+    closeMenu();
+  };
+  if (!menuItems) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    mountTo: mountPoint
+    //This needs be removed when the a11y is completely handled
+    //Disabling key navigation now as it works only partially
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU,
+      disableArrowKeyNavigation: true
+    },
+    items: [{
+      items: menuItems
+    }],
+    isOpen: isOpen,
+    onOpenChange: closeMenu,
+    onItemActivated: onMenuItemActivated,
+    fitWidth: dragMenuDropdownWidth,
+    boundariesElement: boundariesElement
+  });
+};

package/dist/esm/plugins/table/ui/FloatingDragMenu/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { dragMenuDropdownWidth } from '../consts';
+import { DragMenu } from './DragMenu';
+var FloatingDragMenu = function FloatingDragMenu(_ref) {
+  var mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement,
+    editorView = _ref.editorView,
+    isOpen = _ref.isOpen,
+    tableRef = _ref.tableRef,
+    tableNode = _ref.tableNode,
+    direction = _ref.direction,
+    index = _ref.index,
+    targetCellPosition = _ref.targetCellPosition;
+  if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+    return null;
+  }
+  var domAtPos = editorView.domAtPos.bind(editorView);
+  var targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+  if (!targetCellRef) {
+    return null;
+  }
+
+  // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
+  return /*#__PURE__*/React.createElement(Popup, {
+    alignX: "left",
+    alignY: "top",
+    target: targetCellRef,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    fitWidth: dragMenuDropdownWidth
+    // z-index value below is to ensure that this menu is above other floating menu
+    // in table, but below floating dialogs like typeaheads, pickers, etc.
+    ,
+    zIndex: akEditorFloatingOverlapPanelZIndex,
+    forcePlacement: true,
+    offset: [7, 0],
+    stick: true
+  }, /*#__PURE__*/React.createElement(DragMenu, {
+    editorView: editorView,
+    isOpen: isOpen,
+    boundariesElement: boundariesElement,
+    tableNode: tableNode,
+    direction: direction,
+    index: index
+  }));
+};
+FloatingDragMenu.displayName = 'FloatingDragMenu';
+export default FloatingDragMenu;

package/dist/esm/plugins/table/ui/FloatingInsertButton/InsertButton.js

@@ -43,13 +43,13 @@ var tooltipMessageByType = function tooltipMessageByType(type) {
 var InsertButton = function InsertButton(_ref2) {
   var onMouseDown = _ref2.onMouseDown,
     tableRef = _ref2.tableRef,
-    type = _ref2.type,
+    direction = _ref2.direction,
     formatMessage = _ref2.intl.formatMessage,
     hasStickyHeaders = _ref2.hasStickyHeaders;
   var content = /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(ToolTipContent, {
-      description: formatMessage(tooltipMessageByType(type)),
-      keymap: type === 'row' ? addRowAfter : addColumnAfter
+      description: formatMessage(tooltipMessageByType(direction)),
+      keymap: direction === 'row' ? addRowAfter : addColumnAfter
     }),
     position: "top"
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -66,13 +66,13 @@ var InsertButton = function InsertButton(_ref2) {
     fillRule: "evenodd"
   })))), /*#__PURE__*/React.createElement("div", {
     className: ClassName.CONTROLS_INSERT_LINE,
-    style: type === 'row' ? {
+    style: direction === 'row' ? {
       width: getInsertLineWidth(tableRef)
     } : {
       height: getInsertLineHeight(tableRef, hasStickyHeaders)
     }
   })));
-  var floatingButtonClassName = type === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  var floatingButtonClassName = direction === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
   return /*#__PURE__*/React.createElement("div", {
     className: floatingButtonClassName
   }, /*#__PURE__*/React.createElement("div", {

package/dist/esm/plugins/table/ui/FloatingInsertButton/getPopupOptions.js

@@ -70,8 +70,8 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns) {
   }
   return options;
 }
-function getPopupOptions(type, index, hasNumberedColumns, tableContainer) {
-  switch (type) {
+function getPopupOptions(direction, index, hasNumberedColumns, tableContainer) {
+  switch (direction) {
     case 'column':
       return getColumnOptions(index, tableContainer, hasNumberedColumns);
     case 'row':

package/dist/esm/plugins/table/ui/FloatingInsertButton/index.js

@@ -124,7 +124,7 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper), {
         zIndex: zIndex
       }), /*#__PURE__*/React.createElement(InsertButton, {
-        type: type,
+        direction: type,
         tableRef: tableRef,
         onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
         hasStickyHeaders: this.props.hasStickyHeaders || false

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

@@ -1,8 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { CellSelection } from '@atlaskit/editor-tables';
-import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection } from '../../../commands';
+import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights, getSelectedRowIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -17,7 +18,9 @@ var getSelectedRows = function getSelectedRows(selection) {
   return [];
 };
 var DragControlsComponent = function DragControlsComponent(_ref) {
+  var _tableNode$attrs$loca, _tableNode$attrs;
   var tableRef = _ref.tableRef,
+    tableNode = _ref.tableNode,
     hoveredCell = _ref.hoveredCell,
     tableActive = _ref.tableActive,
     editorView = _ref.editorView,
@@ -31,6 +34,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
   }).join(' ');
   var selectedRowIndexes = getSelectedRows(editorView.state.selection);
   var rowWidth = tableRef.offsetWidth;
+  var onMouseUp = useCallback(function () {
+    toggleDragMenu(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex)(editorView.state, editorView.dispatch);
+  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
   var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
   var gridRowPosition = useMemo(function () {
     // if more than one row is selected, ensure the handle spans over the selected range
@@ -39,11 +45,6 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     }
     return "".concat(rowIndex + 1, " / span 1");
   }, [rowIndex, selectedRowIndexes]);
-  var getLocalId = function getLocalId() {
-    var _tableNode$node;
-    var tableNode = findTable(editorView.state.selection);
-    return (tableNode === null || tableNode === void 0 || (_tableNode$node = tableNode.node) === null || _tableNode$node === void 0 || (_tableNode$node = _tableNode$node.attrs) === null || _tableNode$node === void 0 ? void 0 : _tableNode$node.localId) || '';
-  };
   var handleMouseOut = useCallback(function () {
     if (tableActive) {
       var state = editorView.state,
@@ -85,14 +86,15 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
       justifyContent: 'center'
     }
   }, /*#__PURE__*/React.createElement(DragHandle, {
-    tableLocalId: getLocalId(),
+    tableLocalId: (_tableNode$attrs$loca = tableNode === null || tableNode === void 0 || (_tableNode$attrs = tableNode.attrs) === null || _tableNode$attrs === void 0 ? void 0 : _tableNode$attrs.localId) !== null && _tableNode$attrs$loca !== void 0 ? _tableNode$attrs$loca : '',
     indexes: [rowIndex],
     previewWidth: rowWidth,
     previewHeight: rowHeights[rowIndex],
     appearance: selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
     onClick: handleClick,
     onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut
+    onMouseOut: handleMouseOut,
+    onMouseUp: onMouseUp
   })));
 };
 export var DragControls = injectIntl(DragControlsComponent);

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

@@ -134,6 +134,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
       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,
@@ -168,6 +169,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         isDragAndDropEnabled: isDragAndDropEnabled
       }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragControls, {
         tableRef: tableRef,
+        tableNode: tableNode,
         hoveredCell: hoveredCell,
         editorView: editorView,
         tableActive: tableActive,

package/dist/esm/plugins/table/ui/consts.js

@@ -104,4 +104,5 @@ export var tableOverflowShadowWidthWide = 32;
 export var TABLE_SNAP_GAP = 9;
 export var TABLE_HIGHLIGHT_GAP = 10;
 export var TABLE_HIGHLIGHT_TOLERANCE = 2;
-export var STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+export var STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+export var dragMenuDropdownWidth = 240;

package/dist/esm/plugins/table/utils/drag-menu.js

@@ -0,0 +1,52 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { moveSource } from '../pm-plugins/drag-and-drop/commands';
+var canDecrease = function canDecrease(index) {
+  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return index !== undefined && index > min;
+};
+var canIncrease = function canIncrease(index) {
+  var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return index !== undefined && index < max;
+};
+export var getDragMenuConfig = function getDragMenuConfig(direction, tableMap, index) {
+  var moveOptions = direction === 'row' ? [{
+    label: 'up',
+    offset: -1,
+    canMove: canDecrease
+  }, {
+    label: 'down',
+    offset: 1,
+    canMove: function canMove(index) {
+      var _tableMap$height;
+      return canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
+    }
+  }] : [{
+    label: 'left',
+    offset: -1,
+    canMove: canDecrease
+  }, {
+    label: 'right',
+    offset: 1,
+    canMove: function canMove(index) {
+      var _tableMap$width;
+      return canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
+    }
+  }];
+  return _toConsumableArray(moveOptions.map(function (_ref) {
+    var label = _ref.label,
+      offset = _ref.offset,
+      canMove = _ref.canMove;
+    return {
+      id: "move_".concat(direction, "_").concat(label),
+      title: "Move ".concat(direction, " ").concat(label),
+      disabled: !canMove(index),
+      onClick: function onClick(state, dispatch) {
+        if (canMove(index)) {
+          moveSource("table-".concat(direction), index, index + offset)(state, dispatch);
+          return true;
+        }
+        return false;
+      }
+    };
+  }));
+};

package/dist/types/plugins/table/pm-plugins/drag-and-drop/actions.d.ts

@@ -1,4 +1,5 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { TableDirection } from '../../types';
 import type { DropTargetType } from './consts';
 export interface DragAndDropAction<T, D> {
     type: T;
@@ -7,6 +8,7 @@ export interface DragAndDropAction<T, D> {
 export declare const DragAndDropActionType: {
     readonly SET_DROP_TARGET: "SET_DROP_TARGET";
     readonly CLEAR_DROP_TARGET: "CLEAR_DROP_TARGET";
+    readonly TOGGLE_DRAG_MENU: "TOGGLE_DRAG_MENU";
 };
 export type DragAndDropSetDropTargetAction = DragAndDropAction<typeof DragAndDropActionType.SET_DROP_TARGET, {
     type: DropTargetType;
@@ -16,4 +18,9 @@ export type DragAndDropSetDropTargetAction = DragAndDropAction<typeof DragAndDro
 export type DragAndDropClearDropTargetAction = DragAndDropAction<typeof DragAndDropActionType.CLEAR_DROP_TARGET, {
     decorationSet: DecorationSet;
 }>;
-export type DragAndDropPluginAction = DragAndDropSetDropTargetAction | DragAndDropClearDropTargetAction;
+export type DragAndDropToggleDragMenuAction = DragAndDropAction<typeof DragAndDropActionType.TOGGLE_DRAG_MENU, {
+    isDragMenuOpen: boolean;
+    direction: TableDirection;
+    index: number;
+}>;
+export type DragAndDropPluginAction = DragAndDropSetDropTargetAction | DragAndDropClearDropTargetAction | DragAndDropToggleDragMenuAction;

package/dist/types/plugins/table/pm-plugins/drag-and-drop/commands.d.ts

@@ -1,7 +1,7 @@
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import type { DraggableType } from '../../types';
+import type { DraggableType, TableDirection } from '../../types';
 import { TableDecorations } from '../../types';
 import { DropTargetType } from './consts';
 export declare const getDecorations: (state: EditorState) => DecorationSet;
@@ -9,3 +9,4 @@ export declare const updatePluginStateDecorations: (state: EditorState, decorati
 export declare const setDropTarget: (type: DropTargetType, index: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const moveSource: (sourceType: DraggableType, sourceIndex: number, targetIndex: number) => import("@atlaskit/editor-common/types").Command;
+export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number) => import("@atlaskit/editor-common/types").Command;

package/dist/types/plugins/table/pm-plugins/drag-and-drop/types.d.ts

@@ -1,7 +1,11 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { TableDirection } from '../../types';
 import type { DropTargetType } from './consts';
 export interface DragAndDropPluginState {
     decorationSet: DecorationSet;
     dropTargetType: DropTargetType;
     dropTargetIndex: number;
+    isDragMenuOpen: boolean;
+    dragMenuDirection?: TableDirection;
+    dragMenuIndex: number;
 }

package/dist/types/plugins/table/types.d.ts

@@ -373,6 +373,7 @@ export type InvalidNodeAttr = {
     spanValue: number;
     tableLocalId: string;
 };
+export type TableDirection = 'row' | 'column';
 /**
  * Drag and Drop interfaces
  */

package/dist/types/plugins/table/ui/DragHandle/index.d.ts

@@ -1,15 +1,17 @@
 import type { MouseEventHandler } from 'react';
+import type { TableDirection } from '../../types';
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
     previewWidth?: number;
     previewHeight?: number;
-    direction?: 'column' | 'row';
+    direction?: TableDirection;
     appearance?: DragHandleAppearance;
     onClick?: MouseEventHandler;
     onMouseOver?: MouseEventHandler;
     onMouseOut?: MouseEventHandler;
+    onMouseUp?: MouseEventHandler;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onClick, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types/plugins/table/ui/DragPreview/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import type { TableDirection } from '../../types';
 export declare const DragPreview: ({ direction, width, height, }: {
-    direction: 'column' | 'row';
+    direction: TableDirection;
     width: number;
     height: number;
 }) => JSX.Element;

package/dist/types/plugins/table/ui/FloatingDeleteButton/index.d.ts

@@ -3,6 +3,7 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 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 { TableDirection } from '../../types';
 import type { CellSelectionType } from './types';
 export interface Props {
     editorView: EditorView;
@@ -23,7 +24,7 @@ export interface State {
     position?: string;
     scrollLeft: number;
 }
-export declare function getSelectionType(selection: Selection): 'column' | 'row' | undefined;
+export declare function getSelectionType(selection: Selection): TableDirection | undefined;
 declare class FloatingDeleteButton extends Component<Props, State> {
     static displayName: string;
     wrapper: HTMLElement | null;

package/dist/types/plugins/table/ui/FloatingDeleteButton/types.d.ts

@@ -1 +1,2 @@
-export type CellSelectionType = 'column' | 'row' | undefined;
+import type { TableDirection } from '../../types';
+export type CellSelectionType = TableDirection | undefined;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginConfig, TableDirection } from '../../types';
+type DragMenuProps = {
+    direction?: TableDirection;
+    index?: number;
+    tableRef?: HTMLTableElement;
+    tableNode?: PmNode;
+    editorView: EditorView;
+    isOpen?: boolean;
+    targetCellPosition?: number;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    pluginConfig?: PluginConfig;
+};
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, }: DragMenuProps) => JSX.Element | null;
+export {};

package/dist/types/plugins/table/ui/FloatingDragMenu/index.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TableDirection } from '../../types';
+export interface Props {
+    editorView: EditorView;
+    isOpen: boolean;
+    tableRef?: HTMLTableElement;
+    tableNode?: PmNode;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    direction?: TableDirection;
+    index?: number;
+    targetCellPosition?: number;
+}
+declare const FloatingDragMenu: {
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, }: Props): JSX.Element | null;
+    displayName: string;
+};
+export default FloatingDragMenu;

package/dist/types/plugins/table/ui/FloatingInsertButton/InsertButton.d.ts

@@ -1,8 +1,9 @@
 import type { SyntheticEvent } from 'react';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { TableDirection } from '../../types';
 export interface ButtonProps {
-    type: 'row' | 'column';
+    direction: TableDirection;
     tableRef: HTMLElement;
     onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
     hasStickyHeaders: boolean;

package/dist/types/plugins/table/ui/FloatingInsertButton/getPopupOptions.d.ts

@@ -1,3 +1,4 @@
 import type { PopupProps } from '@atlaskit/editor-common/ui';
-declare function getPopupOptions(type: 'column' | 'row', index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
+import type { TableDirection } from '../../types';
+declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
 export default getPopupOptions;

package/dist/types/plugins/table/ui/FloatingInsertButton/index.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
     editorView: EditorView;
     getEditorContainerWidth: GetEditorContainerWidth;

package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CellHoverMeta } from '../../../types';
 type DragControlsProps = {
     editorView: EditorView;
     tableRef: HTMLTableElement;
+    tableNode?: PmNode;
     tableActive?: boolean;
     hoveredCell?: CellHoverMeta;
     isInDanger?: boolean;