@atlaskit/editor-plugin-table 5.3.14 → 5.3.16

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

@@ -0,0 +1,36 @@
+import React from 'react';
+export const AddRowAboveIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("rect", {
+  width: "24",
+  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", {
+  x: "6",
+  y: "12",
+  width: "12",
+  height: "8",
+  rx: "0.5"
+})), /*#__PURE__*/React.createElement("rect", {
+  x: "6",
+  y: "12",
+  width: "12",
+  height: "8",
+  rx: "0.5",
+  stroke: "currentColor",
+  strokeWidth: "4",
+  mask: "url(#path-1-inside-1_896_17822)"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M13 7V5.99C12.9974 5.72652 12.8908 5.47473 12.7036 5.28935C12.5163 5.10397 12.2635 4.99999 12 5C11.444 5 11 5.444 11 5.99V7H10C9.73478 7 9.48043 7.10536 9.29289 7.29289C9.10536 7.48043 9 7.73478 9 8C9 8.26522 9.10536 8.51957 9.29289 8.70711C9.48043 8.89464 9.73478 9 10 9H11V10.01C11.0026 10.2735 11.1092 10.5253 11.2964 10.7107C11.4837 10.896 11.7365 11 12 11C12.556 11 13 10.556 13 10.01V9H14C14.2652 9 14.5196 8.89464 14.7071 8.70711C14.8946 8.51957 15 8.26522 15 8C15 7.73478 14.8946 7.48043 14.7071 7.29289C14.5196 7.10536 14.2652 7 14 7H13Z",
+  fill: "currentColor"
+}));

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

@@ -0,0 +1,31 @@
+import React from 'react';
+export const AddRowBelowIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  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: "12",
+  height: "8",
+  rx: "0.5"
+})), /*#__PURE__*/React.createElement("rect", {
+  x: "6",
+  y: "4",
+  width: "12",
+  height: "8",
+  rx: "0.5",
+  stroke: "currentColor",
+  strokeWidth: "4",
+  mask: "url(#path-1-inside-1_920_47112)"
+}), /*#__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",
+  fill: "currentColor"
+}));

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

@@ -1,2 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
-export { DragInMotionIcon } from './DragInMotionIcon';
+export { DragInMotionIcon } from './DragInMotionIcon';
+export { AddRowAboveIcon } from './AddRowAboveIcon';
+export { AddRowBelowIcon } from './AddRowBelowIcon';
+export { AddColLeftIcon } from './AddColLeftIcon';
+export { AddColRightIcon } from './AddColRightIcon';

package/dist/es2019/plugins/table/ui/messages.js

@@ -59,5 +59,10 @@ export default defineMessages({
     id: 'fabric.editor.tables.adjustColumn',
     defaultMessage: 'Adjust column',
     description: 'Tooltip displayed on table column resize handle'
+  },
+  cornerControl: {
+    id: 'fabric.editor.cornerControl',
+    defaultMessage: 'Highlight table',
+    description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
   }
 });

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -136,6 +136,7 @@ export const dragInsertButtonWrapper = props => css`
     bottom: -5px;
     left: 3px;
   }
+
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
     ${Button(`
     background: ${"var(--ds-surface-overlay, white)"};
@@ -144,6 +145,7 @@ export const dragInsertButtonWrapper = props => css`
     border-radius: 50%;
   `)}
   }
+
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON}:hover {
     background: ${`var(--ds-background-brand-bold, ${B300})`};
     border: 1px solid ${`var(--ds-background-brand-bold, ${B300})`};
@@ -151,6 +153,45 @@ export const dragInsertButtonWrapper = props => css`
     cursor: pointer;
   }
 `;
+export const dragCornerControlButton = props => css`
+  .${ClassName.DRAG_CORNER_BUTTON} {
+    width: 12px;
+    height: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: ${"var(--ds-space-negative-075, -6px)"};
+    left: ${"var(--ds-space-075, 6px)"};
+    background-color: ${"var(--ds-surface, #FFF)"};
+    border-radius: 50%;
+    border: none;
+    padding: 0;
+    outline: none;
+    z-index: ${akEditorUnitZIndex * 99};
+
+    &.active .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+      background-color: ${"var(--ds-border-selected, #0C66E4)"};
+      border-color: ${"var(--ds-border-selected, #0C66E4)"};
+    }
+
+    &:hover {
+      cursor: pointer;
+
+      .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+        border-color: ${"var(--ds-border-selected, #0C66E4)"};
+      }
+    }
+  }
+
+  .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+    border: 1px solid
+      ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+    border-radius: 50%;
+    width: 6px;
+    height: 6px;
+  }
+`;
 export const insertColumnButtonWrapper = props => css`
   ${InsertButton()}
   ${InsertButtonHover()}
@@ -310,12 +351,12 @@ const getFloatingDotOverrides = props => {
 };
 export const floatingColumnControls = props => {
   return css`
-    .${ClassName.COLUMN_DROP_TARGET_CONTROLS} {
+    .${ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS} {
       box-sizing: border-box;
       position: absolute;
       top: 0;
 
-      .${ClassName.COLUMN_CONTROLS_INNER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
         display: flex;
         flex-direction: row;
       }
@@ -324,7 +365,7 @@ export const floatingColumnControls = props => {
     .${ClassName.DRAG_COLUMN_CONTROLS} {
       box-sizing: border-box;
 
-      .${ClassName.COLUMN_CONTROLS_INNER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
         display: grid;
         justify-items: center;
       }

package/dist/es2019/plugins/table/utils/dom.js

@@ -15,9 +15,10 @@ export const isTableControlsButton = node => containsClassName(node, ClassName.C
 export const isTableContainerOrWrapper = node => containsClassName(node, ClassName.TABLE_CONTAINER) || containsClassName(node, ClassName.TABLE_NODE_WRAPPER);
 
 /** drag-and-drop classes */
-export const isRowDragControlsButton = node => containsClassName(node, ClassName.DRAG_ROW_CONTROLS) || closestElement(node, `.${ClassName.DRAG_ROW_CONTROLS}`);
+export const isDragRowControlsButton = node => containsClassName(node, ClassName.DRAG_ROW_CONTROLS) || closestElement(node, `.${ClassName.DRAG_ROW_CONTROLS}`);
 export const isDragRowFloatingInsertDot = node => containsClassName(node, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER);
 export const isDragColumnFloatingInsertDot = node => containsClassName(node, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
+export const isDragCornerButton = node => containsClassName(node, ClassName.DRAG_CORNER_BUTTON) || containsClassName(node, ClassName.DRAG_CORNER_BUTTON_INNER);
 
 /*
  * This function returns which side of a given element the mouse cursor is,
@@ -73,14 +74,20 @@ export const isDragColumnFloatingInsertDot = node => containsClassName(node, Cla
  * the same is valid to the right side.
  */
 
-export const getMousePositionHorizontalRelativeByElement = (mouseEvent, elementContentRects, gapInPixels) => {
+export const getMousePositionHorizontalRelativeByElement = (mouseEvent, elementContentRects, gapInPixels, isDragAndDropEnabled) => {
   const element = mouseEvent.target;
   if (element instanceof HTMLElement) {
-    var _closestCell$id, _elementContentRects$, _elementContentRects$2;
     let width, x;
-    const closestCell = element.closest(SELECTOR_TABLE_LEAFS);
-    const id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
-    width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 ? void 0 : (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
+    if (isDragAndDropEnabled) {
+      // mouse event fires for new overlapping column controls, so the cell can not get detected. Get width
+      // directly from element that will be .pm-table-drag-columns-floating-insert-dot-wrapper
+      width = element.clientWidth;
+    } else {
+      var _closestCell$id, _elementContentRects$, _elementContentRects$2;
+      const closestCell = element.closest(SELECTOR_TABLE_LEAFS);
+      const id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
+      width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 ? void 0 : (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
+    }
     x = mouseEvent.offsetX;
     if (width <= 0) {
       return null;

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

@@ -1,38 +1,136 @@
+import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
+import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
+import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
+import ArrowLeftIcon from '@atlaskit/icon/glyph/arrow-left';
+import ArrowRightIcon from '@atlaskit/icon/glyph/arrow-right';
+import ArrowUpIcon from '@atlaskit/icon/glyph/arrow-up';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
+import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
+import { clearMultipleCells, insertColumn, insertRow, sortByColumn } from '../commands';
+import { deleteColumnsCommand } from '../commands/delete';
 import { moveSource } from '../pm-plugins/drag-and-drop/commands';
+import { deleteRows } from '../transforms';
+import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
 const canDecrease = (index, min = 0) => index !== undefined && index > min;
 const canIncrease = (index, max = 0) => index !== undefined && index < max;
-export const getDragMenuConfig = (direction, tableMap, index) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect) => {
+  const addOptions = direction === 'row' ? [{
+    label: 'above',
+    offset: 0,
+    icon: AddRowAboveIcon,
+    keymap: addRowBefore
+  }, {
+    label: 'below',
+    offset: 1,
+    icon: AddRowBelowIcon,
+    keymap: addRowAfter
+  }] : [{
+    label: 'left',
+    offset: 0,
+    icon: AddColLeftIcon,
+    keymap: addColumnBefore
+  }, {
+    label: 'right',
+    offset: 1,
+    icon: AddColRightIcon,
+    keymap: addColumnAfter
+  }];
   const moveOptions = direction === 'row' ? [{
     label: 'up',
     offset: -1,
-    canMove: canDecrease
+    canMove: canDecrease,
+    icon: ArrowUpIcon
   }, {
     label: 'down',
     offset: 1,
     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);
-    }
+    },
+    icon: ArrowDownIcon
   }] : [{
     label: 'left',
     offset: -1,
-    canMove: canDecrease
+    canMove: canDecrease,
+    icon: ArrowLeftIcon
   }, {
     label: 'right',
     offset: 1,
     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);
-    }
+    },
+    icon: ArrowRightIcon
   }];
-  return [...moveOptions.map(({
+  const sortOptions = direction === 'column' ? [{
+    label: 'increasing',
+    order: SortOrder.ASC,
+    icon: HipchatChevronDoubleUpIcon
+  }, {
+    label: 'decreasing',
+    order: SortOrder.DESC,
+    icon: HipchatChevronDoubleDownIcon
+  }] : [];
+  return [...addOptions.map(({
     label,
     offset,
-    canMove
+    icon,
+    keymap
+  }) => ({
+    id: `add_${direction}_${label}`,
+    title: `Add ${direction} ${label}`,
+    icon,
+    onClick: (state, dispatch) => {
+      if (direction === 'row') {
+        insertRow(index + offset, true)(state, dispatch);
+      } else {
+        insertColumn(getEditorContainerWidth)(index + offset)(state, dispatch);
+      }
+      return true;
+    },
+    keymap: keymap && tooltip(keymap)
+  })), direction === 'column' ? {
+    id: 'distribute_columns',
+    title: 'Distribute columns',
+    disabled: true,
+    onClick: () => {
+      return false;
+    },
+    icon: EditorLayoutThreeEqualIcon
+  } : undefined, {
+    id: 'clear_cells',
+    title: 'Clear cells',
+    onClick: (state, dispatch) => {
+      clearMultipleCells(targetCellPosition)(state, dispatch);
+      return true;
+    },
+    icon: CrossCircleIcon,
+    keymap: tooltip(backspace)
+  }, {
+    id: `delete_${direction}`,
+    title: `Delete ${direction}`,
+    onClick: (state, dispatch) => {
+      if (direction === 'row') {
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch(deleteRows(selectionRect, false)(state.tr));
+      } else {
+        deleteColumnsCommand(selectionRect)(state, dispatch);
+      }
+      return true;
+    },
+    icon: RemoveIcon
+  }, ...moveOptions.map(({
+    label,
+    offset,
+    canMove,
+    icon
   }) => ({
     id: `move_${direction}_${label}`,
     title: `Move ${direction} ${label}`,
     disabled: !canMove(index),
+    icon,
     onClick: (state, dispatch) => {
       if (canMove(index)) {
         moveSource(`table-${direction}`, index, index + offset)(state, dispatch);
@@ -40,5 +138,17 @@ export const getDragMenuConfig = (direction, tableMap, index) => {
       }
       return false;
     }
-  }))];
+  })), ...sortOptions.map(({
+    label,
+    order,
+    icon
+  }) => ({
+    id: `sort_column_${order}`,
+    title: `Sort ${label}`,
+    icon,
+    onClick: (state, dispatch) => {
+      sortByColumn(index, order)(state, dispatch);
+      return true;
+    }
+  }))].filter(Boolean);
 };

package/dist/es2019/plugins/table/utils/index.js

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';

package/dist/esm/plugins/table/event-handlers.js

@@ -10,7 +10,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
-import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
+import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 var isFocusingCalendar = function isFocusingCalendar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
@@ -133,7 +133,7 @@ export var handleMouseOver = function handleMouseOver(view, mouseEvent) {
 // Ignore any `mousedown` `event` from control and numbered column buttons
 // PM end up changing selection during shift selection if not prevented
 export var handleMouseDown = function handleMouseDown(_, event) {
-  var isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target)));
+  var isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target) || isDragCornerButton(event.target)));
   if (isControl) {
     event.preventDefault();
   }
@@ -190,12 +190,13 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     var state = view.state,
       dispatch = view.dispatch;
     var _getPluginState3 = getPluginState(state),
-      insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
+      insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex,
+      isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
     var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
       _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
       endIndex = _getColumnOrRowIndex10[1];
-    var positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects) === 'right' ? endIndex : startIndex;
+    var positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects, undefined, isDragAndDropEnabled) === 'right' ? endIndex : startIndex;
     if (positionColumn !== insertColumnButtonIndex) {
       return showInsertColumnButton(positionColumn)(state, dispatch);
     }

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

@@ -330,7 +330,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             targetCellPosition: targetCellPosition,
             direction: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
             index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
-            isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing
+            isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
+            getEditorContainerWidth: defaultGetEditorContainerWidth
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,

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

@@ -7,7 +7,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 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 { clearDropTarget, moveSource, setDropTarget, toggleDragMenu } from './commands';
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
@@ -86,6 +86,7 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             autoScroller.start({
               input: location.current.input
             });
+            toggleDragMenu(false)(editorView.state, editorView.dispatch);
           },
           onDrag: function onDrag(event) {
             autoScroller.updateInput({

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

@@ -52,9 +52,6 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   COLUMN_CONTROLS: "".concat(tablePrefixSelector, "-column-controls"),
   COLUMN_CONTROLS_DECORATIONS: "".concat(tablePrefixSelector, "-column-controls-decoration"),
   COLUMN_SELECTED: "".concat(tablePrefixSelector, "-column__selected"),
-  COLUMN_CONTROLS_WRAPPER: "".concat(tablePrefixSelector, "-col-controls-wrapper"),
-  COLUMN_DROP_TARGET_CONTROLS: "".concat(tablePrefixSelector, "-col-drop-target-controls"),
-  COLUMN_CONTROLS_INNER: "".concat(tablePrefixSelector, "-col-controls__inner"),
   ROW_CONTROLS_WRAPPER: "".concat(tablePrefixSelector, "-row-controls-wrapper"),
   ROW_CONTROLS: "".concat(tablePrefixSelector, "-row-controls"),
   ROW_CONTROLS_INNER: "".concat(tablePrefixSelector, "-row-controls__inner"),
@@ -89,7 +86,12 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   DRAG_COLUMN_CONTROLS: "".concat(tablePrefixSelector, "-drag-column-controls"),
   DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: "".concat(tablePrefixSelector, "-drag-columns-floating-insert-dot-wrapper"),
   DRAG_COLUMN_FLOATING_INSERT_DOT: "".concat(tablePrefixSelector, "-drag-columns-floating-insert-dot"),
+  DRAG_COLUMN_CONTROLS_WRAPPER: "".concat(tablePrefixSelector, "-col-controls-wrapper"),
+  DRAG_COLUMN_DROP_TARGET_CONTROLS: "".concat(tablePrefixSelector, "-col-drop-target-controls"),
+  DRAG_COLUMN_CONTROLS_INNER: "".concat(tablePrefixSelector, "-col-controls__inner"),
   DRAG_HANDLE_BUTTON_CONTAINER: "".concat(tablePrefixSelector, "-drag-handle-button-container"),
+  DRAG_CORNER_BUTTON: "".concat(tablePrefixSelector, "-drag-corner-button"),
+  DRAG_CORNER_BUTTON_INNER: "".concat(tablePrefixSelector, "-drag-corner-button-inner"),
   /** Other classes */
   NUMBERED_COLUMN: "".concat(tablePrefixSelector, "-numbered-column"),
   NUMBERED_COLUMN_BUTTON: "".concat(tablePrefixSelector, "-numbered-column__button"),

package/dist/esm/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';
 var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
@@ -14,7 +19,18 @@ var convertToDropdownItems = function 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);
   });
@@ -32,9 +48,15 @@ export var DragMenu = function DragMenu(_ref) {
     tableNode = _ref.tableNode,
     mountPoint = _ref.mountPoint,
     boundariesElement = _ref.boundariesElement,
-    scrollableElement = _ref.scrollableElement;
+    scrollableElement = _ref.scrollableElement,
+    targetCellPosition = _ref.targetCellPosition,
+    getEditorContainerWidth = _ref.getEditorContainerWidth;
   var tableMap = tableNode ? TableMap.get(tableNode) : undefined;
-  var dragMenuConfig = getDragMenuConfig(direction, tableMap, index);
+  var state = editorView.state,
+    dispatch = editorView.dispatch;
+  var selection = state.selection;
+  var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
+  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
@@ -43,16 +65,30 @@ export var DragMenu = function DragMenu(_ref) {
       dispatch = editorView.dispatch;
     toggleDragMenu(false)(state, dispatch);
   };
-  var onMenuItemActivated = function onMenuItemActivated(_ref2) {
+  var handleMenuItemActivated = function handleMenuItemActivated(_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);
+    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 || _menuCallback$item$va.call(menuCallback, state, dispatch);
     closeMenu();
   };
+  var handleItemMouseEnter = function handleItemMouseEnter(_ref3) {
+    var _item$value$name;
+    var item = _ref3.item;
+    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);
+  };
+  var handleItemMouseLeave = function handleItemMouseLeave(_ref4) {
+    var item = _ref4.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
@@ -66,7 +102,9 @@ export var DragMenu = function DragMenu(_ref) {
     }],
     isOpen: isOpen,
     onOpenChange: closeMenu,
-    onItemActivated: onMenuItemActivated,
+    onItemActivated: handleMenuItemActivated,
+    onMouseEnter: handleItemMouseEnter,
+    onMouseLeave: handleItemMouseLeave,
     fitWidth: dragMenuDropdownWidth,
     boundariesElement: boundariesElement
   });

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

@@ -15,7 +15,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     tableNode = _ref.tableNode,
     direction = _ref.direction,
     index = _ref.index,
-    targetCellPosition = _ref.targetCellPosition;
+    targetCellPosition = _ref.targetCellPosition,
+    getEditorContainerWidth = _ref.getEditorContainerWidth;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -48,7 +49,9 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     boundariesElement: boundariesElement,
     tableNode: tableNode,
     direction: direction,
-    index: index
+    index: index,
+    targetCellPosition: targetCellPosition,
+    getEditorContainerWidth: getEditorContainerWidth
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -49,6 +49,11 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
         isDragAndDropEnabled = _this$props.isDragAndDropEnabled,
         dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent;
+
+      // TODO: temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
+      if (isDragAndDropEnabled && (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0)) {
+        return null;
+      }
       var type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
       if (!tableNode || !tableRef || !type) {
         return null;

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

@@ -71,7 +71,7 @@ export var ColumnControls = function ColumnControls(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS
   }, /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_CONTROLS_INNER,
+    className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls",
     style: {
       gridTemplateColumns: widths,
@@ -89,13 +89,7 @@ export var ColumnControls = function ColumnControls(_ref) {
       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", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT,
       style: columnParams.length - 1 === index ? {
         right: '0'
@@ -104,12 +98,10 @@ export var ColumnControls = function ColumnControls(_ref) {
   }), tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridColumn: gridColumnPosition,
-      zIndex: 99,
       display: 'flex',
-      width: '100%',
       justifyContent: 'center',
       alignItems: 'center',
-      marginTop: "var(--ds-space-negative-025, -2px)"
+      zIndex: 99
     },
     "data-column-control-index": hoveredCell.colIndex,
     "data-testid": "table-floating-column-control"