@atlaskit/editor-plugin-table 5.3.13 → 5.3.15

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

@@ -1,6 +1,7 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
+import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils/merged-cells';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
@@ -83,7 +84,17 @@ export const createPlugin = (dispatch, eventDispatcher) => {
             // watch for changes
             return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
           },
+          onDragStart: ({
+            location
+          }) => {
+            autoScroller.start({
+              input: location.current.input
+            });
+          },
           onDrag(event) {
+            autoScroller.updateInput({
+              input: event.location.current.input
+            });
             const data = getDraggableDataFromEvent(event);
             // If no data can be found then it's most like we do not want to perform any drag actions
             if (!data) {
@@ -101,6 +112,7 @@ export const createPlugin = (dispatch, eventDispatcher) => {
             setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop(event) {
+            autoScroller.stop();
             const data = getDraggableDataFromEvent(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action

package/dist/es2019/plugins/table/types.js

@@ -66,6 +66,9 @@ export const TableCssClassName = {
   CONTROLS_INSERT_LINE: `${tablePrefixSelector}-controls__insert-line`,
   CONTROLS_BUTTON_OVERLAY: `${tablePrefixSelector}-controls__button-overlay`,
   LAYOUT_BUTTON: `${tablePrefixSelector}-layout-button`,
+  DRAG_CONTROLS_INSERT_BUTTON: `${tablePrefixSelector}-controls__drag-insert-button`,
+  DRAG_CONTROLS_INSERT_BUTTON_INNER: `${tablePrefixSelector}-controls__drag-insert-button-inner`,
+  DRAG_CONTROLS_INSERT_BUTTON_WRAP: `${tablePrefixSelector}-controls__drag-insert-button-wrap`,
   CONTROLS_INSERT_MARKER: `${tablePrefixSelector}-controls__insert-marker`,
   CONTROLS_INSERT_COLUMN: `${tablePrefixSelector}-controls__insert-column`,
   CONTROLS_INSERT_ROW: `${tablePrefixSelector}-controls__insert-row`,
@@ -78,8 +81,12 @@ export const TableCssClassName = {
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: `${tablePrefixSelector}-corner-controls__insert-column-marker`,
   CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
   /** Controls with drag handle */
-  COLUMN_CONTROLS_WITH_DRAG: `${tablePrefixSelector}-column-controls-with-drag`,
-  ROW_CONTROLS_WITH_DRAG: `${tablePrefixSelector}-row-controls-with-drag`,
+  DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
+  DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
+  DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,
+  DRAG_COLUMN_CONTROLS: `${tablePrefixSelector}-drag-column-controls`,
+  DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-columns-floating-insert-dot-wrapper`,
+  DRAG_COLUMN_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-columns-floating-insert-dot`,
   DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
   /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,

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

@@ -1,7 +1,12 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
+import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
 const convertToDropdownItems = dragMenuConfig => {
@@ -14,7 +19,18 @@ const convertToDropdownItems = dragMenuConfig => {
       value: {
         name: item.id
       },
-      isDisabled: item.disabled
+      isDisabled: item.disabled,
+      elemBefore: item.icon ? jsx("div", {
+        style: {
+          marginRight: "var(--ds-space-negative-075, -6px)",
+          display: 'flex'
+        }
+      }, jsx(item.icon, {
+        label: item.title
+      })) : undefined,
+      elemAfter: item.keymap ? jsx("div", {
+        css: shortcutStyle
+      }, item.keymap) : undefined
     });
     item.onClick && (menuCallback[item.id] = item.onClick);
   });
@@ -31,10 +47,20 @@ export const DragMenu = ({
   tableNode,
   mountPoint,
   boundariesElement,
-  scrollableElement
+  scrollableElement,
+  targetCellPosition,
+  getEditorContainerWidth
 }) => {
   const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
-  const dragMenuConfig = getDragMenuConfig(direction, tableMap, index);
+  const {
+    state,
+    dispatch
+  } = editorView;
+  const {
+    selection
+  } = state;
+  const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect);
   const {
     menuItems,
     menuCallback
@@ -46,17 +72,33 @@ export const DragMenu = ({
     } = editorView;
     toggleDragMenu(false)(state, dispatch);
   };
-  const onMenuItemActivated = ({
+  const handleMenuItemActivated = ({
     item
   }) => {
     var _menuCallback$item$va;
-    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 ? void 0 : _menuCallback$item$va.call(menuCallback, editorView.state, editorView.dispatch);
+    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 ? void 0 : _menuCallback$item$va.call(menuCallback, state, dispatch);
     closeMenu();
   };
+  const handleItemMouseEnter = ({
+    item
+  }) => {
+    var _item$value$name;
+    if (!selectionRect || !((_item$value$name = item.value.name) !== null && _item$value$name !== void 0 && _item$value$name.startsWith('delete'))) {
+      return;
+    }
+    (item.value.name === 'delete_column' ? hoverColumns(getSelectedColumnIndexes(selectionRect), true) : hoverRows(getSelectedRowIndexes(selectionRect), true))(state, dispatch);
+  };
+  const handleItemMouseLeave = ({
+    item
+  }) => {
+    if (['sort_column_asc', 'sort_column_desc', 'delete_column', 'delete_row'].indexOf(item.value.name) > -1) {
+      clearHoverSelection()(state, dispatch);
+    }
+  };
   if (!menuItems) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
+  return jsx(DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially
@@ -70,7 +112,9 @@ export const DragMenu = ({
     }],
     isOpen: isOpen,
     onOpenChange: closeMenu,
-    onItemActivated: onMenuItemActivated,
+    onItemActivated: handleMenuItemActivated,
+    onMouseEnter: handleItemMouseEnter,
+    onMouseLeave: handleItemMouseLeave,
     fitWidth: dragMenuDropdownWidth,
     boundariesElement: boundariesElement
   });

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

@@ -2,6 +2,7 @@ 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 { TableMap } from '@atlaskit/editor-tables/table-map';
 import { dragMenuDropdownWidth } from '../consts';
 import { DragMenu } from './DragMenu';
 const FloatingDragMenu = ({
@@ -14,7 +15,8 @@ const FloatingDragMenu = ({
   tableNode,
   direction,
   index,
-  targetCellPosition
+  targetCellPosition,
+  getEditorContainerWidth
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -24,10 +26,11 @@ const FloatingDragMenu = ({
   if (!targetCellRef) {
     return null;
   }
-
+  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+  const offset = direction === 'row' ? [7, 0] : index === ((tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) || 1) - 1 ? [14, 0] : [-14, 0];
   // 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",
+    alignX: direction === 'row' ? 'left' : 'center',
     alignY: "top",
     target: targetCellRef,
     mountTo: mountPoint,
@@ -39,7 +42,7 @@ const FloatingDragMenu = ({
     ,
     zIndex: akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: [7, 0],
+    offset: offset,
     stick: true
   }, /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,
@@ -47,7 +50,9 @@ const FloatingDragMenu = ({
     boundariesElement: boundariesElement,
     tableNode: tableNode,
     direction: direction,
-    index: index
+    index: index,
+    targetCellPosition: targetCellPosition,
+    getEditorContainerWidth: getEditorContainerWidth
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -1,3 +1,5 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { addColumnAfter, addRowAfter, ToolTipContent } from '@atlaskit/editor-common/keymaps';
@@ -23,7 +25,7 @@ const getToolbarSize = tableRef => {
   }
   return tableToolbarSize;
 };
-const getInsertLineWidth = tableRef => {
+const getInsertLineWidth = (tableRef, isDragAndDropEnabled) => {
   // The line gets width 100% from the table,
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
@@ -37,16 +39,65 @@ const getInsertLineWidth = tableRef => {
     scrollLeft
   } = parentElement;
   const diff = offsetWidth - parentOffsetWidth;
-  const toolbarSize = getToolbarSize(tableRef);
+  const toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
   return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + LINE_OFFSET;
 };
 const tooltipMessageByType = type => {
   return type === 'row' ? tableMessages.insertRow : tableMessages.insertColumn;
 };
+export const InsertButtonForDragAndDrop = ({
+  onMouseDown,
+  tableRef,
+  type,
+  intl: {
+    formatMessage
+  },
+  hasStickyHeaders
+}) => {
+  const content = /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(tooltipMessageByType(type)),
+      keymap: type === 'row' ? addRowAfter : addColumnAfter
+    }),
+    position: "top"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: ClassName.DRAG_CONTROLS_INSERT_BUTTON,
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "10",
+    height: "10",
+    viewBox: "0 0 10 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.41667 4.58333V2.91667C5.41667 2.80616 5.37277 2.70018 5.29463 2.62204C5.21649 2.5439 5.11051 2.5 5 2.5C4.88949 2.5 4.78351 2.5439 4.70537 2.62204C4.62723 2.70018 4.58333 2.80616 4.58333 2.91667V4.58333H2.91667C2.80616 4.58333 2.70018 4.62723 2.62204 4.70537C2.5439 4.78351 2.5 4.88949 2.5 5C2.5 5.11051 2.5439 5.21649 2.62204 5.29463C2.70018 5.37277 2.80616 5.41667 2.91667 5.41667H4.58333V7.08333C4.58333 7.19384 4.62723 7.29982 4.70537 7.37796C4.78351 7.4561 4.88949 7.5 5 7.5C5.11051 7.5 5.21649 7.4561 5.29463 7.37796C5.37277 7.29982 5.41667 7.19384 5.41667 7.08333V5.41667H7.08333C7.19384 5.41667 7.29982 5.37277 7.37796 5.29463C7.4561 5.21649 7.5 5.11051 7.5 5C7.5 4.88949 7.4561 4.78351 7.37796 4.70537C7.29982 4.62723 7.19384 4.58333 7.08333 4.58333H5.41667Z",
+    fill: "currentColor"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: ClassName.CONTROLS_INSERT_LINE,
+    style: type === 'row' ? {
+      width: getInsertLineWidth(tableRef, true),
+      left: '14px'
+    } : {
+      height: getInsertLineHeight(tableRef, hasStickyHeaders) - 11
+    }
+  })));
+  const floatingButtonClassName = type === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  return /*#__PURE__*/React.createElement("div", {
+    className: floatingButtonClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`
+  }, content));
+};
+export const DragAndDropInsertButton = injectIntl(InsertButtonForDragAndDrop);
 const InsertButton = ({
   onMouseDown,
   tableRef,
-  direction,
+  type,
   intl: {
     formatMessage
   },
@@ -54,8 +105,8 @@ const InsertButton = ({
 }) => {
   const content = /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(ToolTipContent, {
-      description: formatMessage(tooltipMessageByType(direction)),
-      keymap: direction === 'row' ? addRowAfter : addColumnAfter
+      description: formatMessage(tooltipMessageByType(type)),
+      keymap: type === 'row' ? addRowAfter : addColumnAfter
     }),
     position: "top"
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -72,13 +123,13 @@ const InsertButton = ({
     fillRule: "evenodd"
   })))), /*#__PURE__*/React.createElement("div", {
     className: ClassName.CONTROLS_INSERT_LINE,
-    style: direction === 'row' ? {
+    style: type === 'row' ? {
       width: getInsertLineWidth(tableRef)
     } : {
       height: getInsertLineHeight(tableRef, hasStickyHeaders)
     }
   })));
-  const floatingButtonClassName = direction === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  const floatingButtonClassName = type === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
   return /*#__PURE__*/React.createElement("div", {
     className: floatingButtonClassName
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -3,9 +3,11 @@ import { tableInsertColumnButtonOffset, tableInsertColumnButtonSize, tableToolba
 const HORIZONTAL_ALIGN_COLUMN_BUTTON = -(tableInsertColumnButtonSize / 2);
 const HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON = HORIZONTAL_ALIGN_COLUMN_BUTTON + akEditorTableNumberColumnWidth;
 const VERTICAL_ALIGN_COLUMN_BUTTON = tableToolbarSize + tableInsertColumnButtonOffset;
+const VERTICAL_ALIGN_COLUMN_BUTTON_DRAG = tableInsertColumnButtonOffset;
 const HORIZONTAL_ALIGN_ROW_BUTTON = -(tableToolbarSize + tableInsertColumnButtonOffset + tableInsertColumnButtonSize);
+const HORIZONTAL_ALIGN_ROW_BUTTON_DRAG = -18;
 const VERTICAL_ALIGN_ROW_BUTTON = tableInsertColumnButtonSize / 2;
-function getRowOptions(index) {
+function getRowOptions(index, isDragAndDropEnabled) {
   let defaultOptions = {
     alignX: 'left',
     alignY: 'bottom',
@@ -25,16 +27,16 @@ function getRowOptions(index) {
       return {
         ...position,
         // Left position should be always the offset (To place in the correct position even if the table has overflow).
-        left: HORIZONTAL_ALIGN_ROW_BUTTON
+        left: isDragAndDropEnabled ? HORIZONTAL_ALIGN_ROW_BUTTON_DRAG : HORIZONTAL_ALIGN_ROW_BUTTON
       };
     }
   };
 }
-function getColumnOptions(index, tableContainer, hasNumberedColumns) {
+function getColumnOptions(index, tableContainer, hasNumberedColumns, isDragAndDropEnabled) {
   const options = {
     alignX: 'end',
     alignY: 'top',
-    offset: [HORIZONTAL_ALIGN_COLUMN_BUTTON, VERTICAL_ALIGN_COLUMN_BUTTON],
+    offset: [HORIZONTAL_ALIGN_COLUMN_BUTTON, isDragAndDropEnabled ? VERTICAL_ALIGN_COLUMN_BUTTON_DRAG : VERTICAL_ALIGN_COLUMN_BUTTON],
     // :: (position: PopupPosition) -> PopupPosition
     // Limit the InsertButton position to the table container
     // if the left position starts before it
@@ -75,12 +77,12 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns) {
   }
   return options;
 }
-function getPopupOptions(direction, index, hasNumberedColumns, tableContainer) {
+function getPopupOptions(direction, index, hasNumberedColumns, isDragAndDropEnabled, tableContainer) {
   switch (direction) {
     case 'column':
-      return getColumnOptions(index, tableContainer, hasNumberedColumns);
+      return getColumnOptions(index, tableContainer, hasNumberedColumns, isDragAndDropEnabled);
     case 'row':
-      return getRowOptions(index);
+      return getRowOptions(index, isDragAndDropEnabled);
     default:
       return {};
   }

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

@@ -14,7 +14,7 @@ import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../command
 import { TableCssClassName as ClassName } from '../../types';
 import { checkIfNumberColumnEnabled } from '../../utils';
 import getPopupOptions from './getPopupOptions';
-import InsertButton from './InsertButton';
+import InsertButton, { DragAndDropInsertButton } from './InsertButton';
 export class FloatingInsertButton extends React.Component {
   constructor(props) {
     super(props);
@@ -32,6 +32,7 @@ export class FloatingInsertButton extends React.Component {
       boundariesElement,
       isHeaderColumnEnabled,
       isHeaderRowEnabled,
+      isDragAndDropEnabled,
       dispatchAnalyticsEvent
     } = this.props;
     const type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
@@ -111,10 +112,15 @@ export class FloatingInsertButton extends React.Component {
       scrollableElement: tableWrapper,
       forcePlacement: true,
       allowOutOfBounds: true
-    }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper), {
+    }, getPopupOptions(type, index, hasNumberedColumns, !!isDragAndDropEnabled, tableContainerWrapper), {
       zIndex: zIndex
-    }), /*#__PURE__*/React.createElement(InsertButton, {
-      direction: type,
+    }), isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragAndDropInsertButton, {
+      type: type,
+      tableRef: tableRef,
+      onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
+      hasStickyHeaders: this.props.hasStickyHeaders || false
+    }) : /*#__PURE__*/React.createElement(InsertButton, {
+      type: type,
       tableRef: tableRef,
       onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
       hasStickyHeaders: this.props.hasStickyHeaders || false

package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -2,8 +2,9 @@ import React, { useCallback, useMemo } from 'react';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverColumns, selectColumn } from '../../../commands';
+import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { TableCssClassName as ClassName } from '../../../types';
-import { getSelectedColumnIndexes } from '../../../utils';
+import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
 const getSelectedColumns = selection => {
   if (selection instanceof CellSelection && selection.isColSelection()) {
@@ -25,10 +26,13 @@ export const ColumnControls = ({
   localId,
   isInDanger,
   rowHeights,
-  colWidths
+  colWidths,
+  hasHeaderColumn
 }) => {
   var _colWidths$map$join, _rowHeights$;
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width => width ? `${width - 1}px` : '0px').join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
+  // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
+  const columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   const colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   const selectedColIndexes = getSelectedColumns(editorView.state.selection);
   const gridColumnPosition = useMemo(() => {
@@ -64,8 +68,15 @@ export const ColumnControls = ({
       clearHoverSelection()(state, dispatch);
     }
   }, [editorView, tableActive]);
+  const handleMouseUp = useCallback(() => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
+  }, [editorView, colIndex]);
   return /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_CONTROLS_WITH_DRAG
+    className: ClassName.DRAG_COLUMN_CONTROLS
   }, /*#__PURE__*/React.createElement("div", {
     className: ClassName.COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls",
@@ -73,10 +84,38 @@ export const ColumnControls = ({
       gridTemplateColumns: widths,
       marginTop
     }
-  }, tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
+  }, !isResizing && columnParams.map(({
+    startIndex,
+    endIndex
+  }, index) => /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridColumn: `${index + 1} / span 1`
+    },
+    "data-start-index": startIndex,
+    "data-end-index": endIndex,
+    className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
+    contentEditable: false,
+    key: index
+  }, !hasHeaderColumn && index === 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      left: '0px',
+      right: 'unset'
+    },
+    className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
+  }), /*#__PURE__*/React.createElement("div", {
+    className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT,
+    style: columnParams.length - 1 === index ? {
+      right: '0'
+    } : {}
+  }))), tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridColumn: gridColumnPosition,
-      marginTop: `-15px`
+      zIndex: 99,
+      display: 'flex',
+      width: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: "var(--ds-space-negative-025, -2px)"
     },
     "data-column-control-index": hoveredCell.colIndex,
     "data-testid": "table-floating-column-control"
@@ -89,7 +128,8 @@ export const ColumnControls = ({
     appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
     onClick: handleClick,
     onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut
+    onMouseOut: handleMouseOut,
+    onMouseUp: handleMouseUp
   }))));
 };
 export default ColumnControls;

package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { TableCssClassName as ClassName } from '../../types';
-import { getColumnsWidths, getRowHeights } from '../../utils';
+import { containsHeaderColumn, getColumnsWidths, getRowHeights } from '../../utils';
 import { ColumnControls } from './ColumnControls';
 import { ColumnDropTargets } from './ColumnDropTargets';
 export const TableFloatingColumnControls = ({
@@ -24,6 +24,7 @@ export const TableFloatingColumnControls = ({
   const [hasDropTargets, setHasDropTargets] = useState(false);
   const node = getNode();
   const currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
+  const hasHeaderColumn = containsHeaderColumn(node);
   useEffect(() => {
     var _window;
     if (tableRef && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
@@ -76,11 +77,11 @@ export const TableFloatingColumnControls = ({
   const colWidths = getColumnsWidths(editorView);
   const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
   const mountTo = tableRef && (tableRef === null || tableRef === void 0 ? void 0 : tableRef.parentElement) || document.body;
+  if (!tableActive) {
+    return null;
+  }
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
     className: ClassName.COLUMN_CONTROLS_WRAPPER,
-    style: {
-      pointerEvents: 'none'
-    },
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/React.createElement(ColumnControls, {
     editorView: editorView,
@@ -92,7 +93,8 @@ export const TableFloatingColumnControls = ({
     localId: currentNodeLocalId,
     isInDanger: isInDanger,
     rowHeights: rowHeights,
-    colWidths: colWidths
+    colWidths: colWidths,
+    hasHeaderColumn: hasHeaderColumn
   }), hasDropTargets && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,

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

@@ -5,7 +5,7 @@ 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 { getRowHeights, getRowsParams, getSelectedRowIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
 const getSelectedRows = selection => {
   if (selection instanceof CellSelection && selection.isRowSelection()) {
@@ -24,12 +24,15 @@ const DragControlsComponent = ({
   tableActive,
   editorView,
   isInDanger,
+  isResizing,
+  hasHeaderRow,
   hoverRows,
   selectRow,
   updateCellHoverLocation
 }) => {
   var _tableNode$attrs$loca, _tableNode$attrs;
   const rowHeights = getRowHeights(tableRef);
+  const rowsParams = getRowsParams(rowHeights);
   const heights = rowHeights.map(height => `${height - 1}px`).join(' ');
   const selectedRowIndexes = getSelectedRows(editorView.state.selection);
   const rowWidth = tableRef.offsetWidth;
@@ -54,18 +57,15 @@ const DragControlsComponent = ({
     }
   }, [editorView, tableActive]);
   const handleMouseMove = useCallback(e => {
-    // avoid updating if event target is drag handle
-    if (!e.nativeEvent.target.classList.contains(ClassName.ROW_CONTROLS_WITH_DRAG)) {
+    const isParentDragControls = e.nativeEvent.target.closest(`.${ClassName.DRAG_ROW_CONTROLS}`);
+    const rowIndex = e.nativeEvent.target.getAttribute('data-start-index');
+
+    // avoid updating if event target is not related
+    if (!isParentDragControls || !rowIndex) {
       return;
     }
-    const hoverHeight = e.nativeEvent.offsetY;
-    let totalHeight = 0;
-    const rowIndex = rowHeights.findIndex(row => {
-      totalHeight += row;
-      return hoverHeight <= totalHeight;
-    });
-    updateCellHoverLocation(rowIndex);
-  }, [updateCellHoverLocation, rowHeights]);
+    updateCellHoverLocation(Number(rowIndex));
+  }, [updateCellHoverLocation]);
   const handleMouseOver = useCallback(() => {
     hoverRows([rowIndex]);
   }, [hoverRows, rowIndex]);
@@ -73,19 +73,40 @@ const DragControlsComponent = ({
     selectRow(rowIndex, e === null || e === void 0 ? void 0 : e.shiftKey);
   }, [rowIndex, selectRow]);
   return /*#__PURE__*/React.createElement("div", {
-    className: ClassName.ROW_CONTROLS_WITH_DRAG,
+    className: ClassName.DRAG_ROW_CONTROLS,
     style: {
       gridTemplateRows: heights
     },
     onMouseMove: handleMouseMove
-  }, Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
+  }, !isResizing && rowsParams.map(({
+    startIndex,
+    endIndex
+  }, index) => /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridRow: `${index + 1} / span 1`
+    },
+    "data-start-index": startIndex,
+    "data-end-index": endIndex,
+    className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
+    contentEditable: false,
+    key: index
+  }, !hasHeaderRow && index === 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      top: '0px',
+      left: "var(--ds-space-075, 6px)"
+    },
+    className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
+  }), /*#__PURE__*/React.createElement("div", {
+    className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
+  }))), !isResizing && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridRow: gridRowPosition,
       display: 'flex',
       height: '100%',
       alignItems: 'center',
       justifyContent: 'center'
-    }
+    },
+    "data-testid": "table-floating-row-drag-handle"
   }, /*#__PURE__*/React.createElement(DragHandle, {
     tableLocalId: (_tableNode$attrs$loca = tableNode === null || tableNode === void 0 ? 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],

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

@@ -144,6 +144,8 @@ export default class TableFloatingControls extends Component {
       editorView: editorView,
       tableActive: tableActive,
       isInDanger: isInDanger,
+      isResizing: isResizing,
+      hasHeaderRow: hasHeaderRow,
       hoverRows: this.hoverRows,
       selectRow: this.selectRow,
       updateCellHoverLocation: this.updateCellHoverLocation