@atlaskit/editor-plugin-table 7.2.3 → 7.3.1

package/dist/es2019/commands/selection.js

@@ -5,7 +5,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isColumnSelected, isRowSelected, isTableSelected, selectedRect } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { selectColumn, selectRow } from '../commands/misc';
-import { getPluginState as getResizePluginState } from '../pm-plugins/table-resizing/plugin-factory';
+import { getPluginState } from '../pm-plugins/plugin-factory';
 import { getClosestSelectionRect } from '../toolbar';
 export let TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -69,7 +69,7 @@ const arrowRightFromCellSelection = editorSelectionAPI => selection => (state, d
   }
   return false;
 };
-export const selectColumns = editorSelectionAPI => () => (state, dispatch) => {
+export const selectColumns = editorSelectionAPI => (triggeredByKeyboard = false) => (state, dispatch) => {
   const {
     selection
   } = state;
@@ -83,11 +83,11 @@ export const selectColumns = editorSelectionAPI => () => (state, dispatch) => {
     })(state, dispatch);
   }
   if (table && rect) {
-    return selectColumn(rect.left)(state, dispatch);
+    return selectColumn(rect.left, undefined, triggeredByKeyboard)(state, dispatch);
   }
   return false;
 };
-export const selectRows = editorSelectionAPI => () => (state, dispatch) => {
+export const selectRows = editorSelectionAPI => (triggeredByKeyboard = false) => (state, dispatch) => {
   const {
     selection
   } = state;
@@ -101,7 +101,7 @@ export const selectRows = editorSelectionAPI => () => (state, dispatch) => {
     })(state, dispatch);
   }
   if (table && rect) {
-    return selectRow(rect.top)(state, dispatch);
+    return selectRow(rect.top, undefined, triggeredByKeyboard)(state, dispatch);
   }
   return false;
 };
@@ -179,8 +179,8 @@ const arrowLeftFromText = editorSelectionAPI => selection => (state, dispatch) =
     } = selection;
     let isColumnResizing = false;
     if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-      const columResizePluginState = getResizePluginState(state) || {};
-      isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+      const columResizePluginState = getPluginState(state) || {};
+      isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.isKeyboardResize);
     }
     if (isSelectionAtStartOfTable($from, selection) && $from.parent.type.name === 'paragraph' && $from.depth === table.depth + 3 &&
     // + 3 for: row, cell & paragraph nodes
@@ -211,8 +211,8 @@ const arrowRightFromText = editorSelectionAPI => selection => (state, dispatch)
     } = selection;
     let isColumnResizing = false;
     if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-      const columResizePluginState = getResizePluginState(state) || {};
-      isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+      const columResizePluginState = getPluginState(state) || {};
+      isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.isKeyboardResize);
     }
     if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $to.depth === table.depth + 3 &&
     // + 3 for: row, cell & paragraph nodes

package/dist/es2019/event-handlers.js

@@ -4,6 +4,7 @@ import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, setTableHovered, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
 import { getPluginState as getDragDropPluginState } from './pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -164,7 +165,18 @@ export const handleMouseOut = (view, mouseEvent) => {
       state,
       dispatch
     } = view;
-    return hideResizeHandleLine()(state, dispatch);
+    if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      const {
+        isKeyboardResize
+      } = getPluginState(state);
+      if (isKeyboardResize) {
+        // no need to hide decoration if column resizing started by keyboard
+        return false;
+      }
+      return hideResizeHandleLine()(state, dispatch);
+    } else {
+      return hideResizeHandleLine()(state, dispatch);
+    }
   }
   return false;
 };
@@ -265,16 +277,18 @@ export const handleMouseMove = (view, event, elementContentRects) => {
         resizeHandleColumnIndex,
         resizeHandleRowIndex
       } = getPluginState(state);
+      const isKeyboardResize = getBooleanFF('platform.editor.a11y-column-resizing_emcvz') ? getPluginState(state).isKeyboardResize : false;
       const tableCell = closestElement(element, 'td, th');
       const cellStartPosition = view.posAtDOM(tableCell, 0);
       const rect = findCellRectClosestToPos(state.doc.resolve(cellStartPosition));
       if (rect) {
         const columnEndIndexTarget = positionColumn === 'left' ? rect.left : rect.right;
         const rowIndexTarget = rect.top;
-        if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
+        if ((columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
           target: element,
           columnEndIndexTarget
-        })) {
+        })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
+        ) {
           return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true)(state, dispatch);
         }
       }

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

@@ -6,7 +6,6 @@ import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-
 // TODO: This command is a placeholder example. Please replace this if required.
 export const getDecorations = state => {
   var _pluginKey$getState;
@@ -68,7 +67,7 @@ export const moveSource = (sourceType, sourceIndexes, targetIndex, tr) => create
     selectAfterMove: true
   })(nextTr);
 });
-export const toggleDragMenu = (isDragMenuOpen, direction, index) => createCommand(state => {
+export const toggleDragMenu = (isDragMenuOpen, direction, index, trigger = 'mouse') => createCommand(state => {
   let {
     isDragMenuOpen: previousOpenState,
     dragMenuDirection: previousDragMenuDirection,
@@ -95,7 +94,8 @@ export const toggleDragMenu = (isDragMenuOpen, direction, index) => createComman
     data: {
       isDragMenuOpen: updatedMenuOpenState,
       direction: direction !== null && direction !== void 0 ? direction : previousDragMenuDirection,
-      index: index !== null && index !== void 0 ? index : previousDragMenuIndex
+      index: index !== null && index !== void 0 ? index : previousDragMenuIndex,
+      isKeyboardModeActive: updatedMenuOpenState && trigger === 'keyboard'
     }
   };
 }, tr => {

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

@@ -177,7 +177,8 @@ export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
       dropTargetIndex: 0,
       isDragMenuOpen: false,
       dragMenuIndex: 0,
-      isDragging: false
+      isDragging: false,
+      isKeyboardModeActive: false
     })),
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
@@ -191,6 +192,20 @@ export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
         isDragMenuOpen,
         dragMenuIndex
       } = getPluginState(newState);
+      transactions.forEach(transaction => {
+        if (transaction.getMeta('selectedRowViaKeyboard')) {
+          const button = document.querySelector('#drag-handle-button-row');
+          if (button) {
+            button.focus();
+          }
+        }
+        if (transaction.getMeta('selectedColumnViaKeyboard')) {
+          const button = document.querySelector('#drag-handle-button-column');
+          if (button) {
+            button.focus();
+          }
+        }
+      });
 
       // 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.
@@ -232,6 +247,24 @@ export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
           decorationSet
         } = getPluginState(state);
         return decorationSet;
+      },
+      handleKeyDown: (view, event) => {
+        var _ref;
+        const isDragHandleFocused = ['drag-handle-button-row', 'drag-handle-button-column'].includes((_ref = event.target || null) === null || _ref === void 0 ? void 0 : _ref.id);
+        const keysToTrap = ['Enter', ' '];
+        const keysToTrapWhen = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+        const {
+          isDragMenuOpen
+        } = getPluginState(view.state);
+
+        // drag handle is focused, and user presses any key return them back to editing
+        if (isDragHandleFocused && !isDragMenuOpen && !keysToTrap.includes(event.key)) {
+          view.dom.focus();
+          return true;
+        }
+        if (isDragHandleFocused && keysToTrap.includes(event.key) || isDragMenuOpen && keysToTrapWhen.includes(event.key)) {
+          return true;
+        }
       }
     }
   });

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

@@ -23,7 +23,8 @@ export default ((pluginState, action) => {
         ...pluginState,
         isDragMenuOpen: action.data.isDragMenuOpen,
         dragMenuDirection: action.data.direction,
-        dragMenuIndex: action.data.index
+        dragMenuIndex: action.data.index,
+        isKeyboardModeActive: action.data.isKeyboardModeActive
       };
     default:
       return pluginState;

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

@@ -1,11 +1,11 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
+import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { createTable, goToNextCell, moveCursorBackward } from '../commands';
 import { addRowAroundSelection, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
-import { activateNextResizeArea, changeColumnWidthByStep, initiateKeyboardColumnResizing } from '../commands/column-resize';
+import { activateNextResizeArea, changeColumnWidthByStep, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
 import { withEditorAnalyticsAPI } from '../utils/analytics';
@@ -48,6 +48,7 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(moveLeft.common, activateNextResizeArea(-1), list);
     bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStep(-10, getEditorContainerWidth), list);
     bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStep(10, getEditorContainerWidth), list);
+    bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing(), list);
   }
   return keymap(list);
 }

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

@@ -4,7 +4,11 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension } from '@atlaskit/editor-common/transforms';
 import { browser, closestElement } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { TableMap } from '@atlaskit/editor-tables';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
+import { stopKeyboardColumnResizing } from '../commands/column-resize';
 import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
@@ -91,7 +95,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       const domAtPos = editorView.domAtPos.bind(editorView);
       editorViewRef = editorView;
       return {
-        update: view => {
+        update: (view, prevState) => {
           const {
             state,
             dispatch
@@ -106,6 +110,28 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
             if (parent) {
               tableRef = parent.querySelector('table') || undefined;
             }
+            const tableNode = findTable(state.selection);
+            if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+              // when cursor leaves the table we need to stop column resizing
+              const pluginPrevState = getPluginState(prevState);
+              const isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
+              if (isStopKeyboardColumResizing) {
+                const isTableNodesDifferent = (pluginPrevState === null || pluginPrevState === void 0 ? void 0 : pluginPrevState.tableNode) !== (tableNode === null || tableNode === void 0 ? void 0 : tableNode.node);
+                if (pluginPrevState !== null && pluginPrevState !== void 0 && pluginPrevState.tableNode && tableNode && isTableNodesDifferent) {
+                  const oldRowsNumber = TableMap.get(pluginPrevState.tableNode).height;
+                  const newRowsNumber = TableMap.get(tableNode.node).height;
+                  if (oldRowsNumber !== newRowsNumber ||
+                  // Add/delete row
+                  tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
+                    // Jump to another table
+                    stopKeyboardColumnResizing()(state, dispatch);
+                  }
+                } else if (!tableNode) {
+                  // selection outside of table
+                  stopKeyboardColumnResizing()(state, dispatch);
+                }
+              }
+            }
           }
           if (pluginState.tableRef !== tableRef) {
             setTableRef(tableRef)(state, dispatch);
@@ -208,10 +234,20 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         const maybeTr = closestElement(domRef, 'tr');
         return maybeTr ? maybeTr.classList.contains('sticky') : false;
       },
-      handleTextInput: ({
-        state,
-        dispatch
-      }, _from, _to, text) => {
+      handleTextInput: (view, _from, _to, text) => {
+        const {
+          state,
+          dispatch
+        } = view;
+        if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+          const {
+            isKeyboardResize
+          } = getPluginState(state);
+          if (isKeyboardResize) {
+            stopKeyboardColumnResizing()(state, dispatch);
+            return false;
+          }
+        }
         const tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
         if (tr.selectionSet) {
           dispatch(tr);

package/dist/es2019/pm-plugins/table-resizing/event-handlers.js

@@ -5,9 +5,11 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { stopKeyboardColumnResizing } from '../../commands/column-resize';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes } from '../../utils';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
@@ -22,6 +24,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
+  const {
+    isKeyboardResize
+  } = getTablePluginState(state);
   event.preventDefault();
   const tr = view.state.tr;
   tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
@@ -96,6 +101,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
       dragging,
       resizeHandlePos
     } = getPluginState(state);
+    const {
+      isTableHovered
+    } = getTablePluginState(state);
     if (resizeHandlePos === null) {
       return stopResizing()(state, dispatch);
     }
@@ -108,9 +116,20 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     const start = $cell.start(-1);
     const table = $cell.node(-1);
 
-    // If we let go in the same place we started, dont need to do anything.
+    // If we let go in the same place we started, don't need to do anything.
     if (dragging && clientX === dragging.startX) {
-      return stopResizing()(state, dispatch);
+      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+        if (isKeyboardResize || !isTableHovered) {
+          /** if column resize had started via keyboard but continued by mouse
+           *  or mouse pointer leaves the table but mouse button still pressed
+           */
+          return stopKeyboardColumnResizing()(state, dispatch, view);
+        } else {
+          return stopResizing()(state, dispatch);
+        }
+      } else {
+        return stopResizing()(state, dispatch);
+      }
     }
     let {
       tr
@@ -148,7 +167,18 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
           })(tr);
         }
       }
-      return stopResizing(tr)(state, dispatch);
+      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+        if (isKeyboardResize || !isTableHovered) {
+          /** if column resize had started via keyboard but continued by mouse
+           *  or mouse pointer leaves the table but mouse button still pressed
+           */
+          return stopKeyboardColumnResizing(tr)(state, dispatch, view);
+        } else {
+          return stopResizing(tr)(state, dispatch);
+        }
+      } else {
+        return stopResizing(tr)(state, dispatch);
+      }
     }
   }
   function move(event) {
@@ -163,7 +193,10 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
       dragging,
       resizeHandlePos
     } = getPluginState(state);
-    if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos))) {
+    const {
+      isTableHovered
+    } = getTablePluginState(state);
+    if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered && getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return finish(event);
     }
     const $cell = state.doc.resolve(resizeHandlePos);

package/dist/es2019/pm-plugins/table-resizing/plugin.js

@@ -1,6 +1,8 @@
 import classnames from 'classnames';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName } from '../../types';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { setResizeHandlePos } from './commands';
 import { handleMouseDown } from './event-handlers';
 import { createPluginState, getPluginState } from './plugin-factory';
@@ -38,7 +40,20 @@ export function createPlugin(dispatch, {
           const {
             dragging
           } = getPluginState(state);
-          if (resizeHandlePos !== null && !dragging) {
+          let isColumnKeyboardResizeStarted = false;
+          if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+            /*
+              We need to start listening mouse events if column resize started from keyboard.
+              This will allow continue resizing via mouse
+            */
+            const {
+              isKeyboardResize
+            } = getTablePluginState(state);
+            if (isKeyboardResize) {
+              isColumnKeyboardResizeStarted = isKeyboardResize;
+            }
+          }
+          if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
             if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI)) {
               const {
                 state,

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

@@ -7,8 +7,8 @@ export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
   bindKeymapWithCommand(moveLeft.common, arrowLeftFromTable(editorSelectionAPI)(), list);
   if (getBooleanFF('platform.editor.a11y.table-selection_9uv33')) {
-    bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(), list);
-    bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(), list);
+    bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(true), list);
+    bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
   }
   if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
     bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);

package/dist/es2019/reducer.js

@@ -75,8 +75,9 @@ export default ((pluginState, action) => {
         resizeHandleColumnIndex: undefined,
         resizeHandleRowIndex: undefined
       };
+    case 'START_KEYBOARD_COLUMN_RESIZE':
     case 'ADD_RESIZE_HANDLE_DECORATIONS':
-      if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex && action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex && action.data.resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip) {
+      if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex && action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex && action.data.resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip && action.data.isKeyboardResize === pluginState.isKeyboardResize) {
         return pluginState;
       }
       return {
@@ -99,6 +100,7 @@ export default ((pluginState, action) => {
         resizeHandleRowIndex: resizeHandleRowIndex !== null && resizeHandleRowIndex !== void 0 ? resizeHandleRowIndex : pluginState.resizeHandleRowIndex,
         resizeHandleIncludeTooltip: resizeHandleIncludeTooltip !== null && resizeHandleIncludeTooltip !== void 0 ? resizeHandleIncludeTooltip : pluginState.resizeHandleIncludeTooltip
       };
+    case 'STOP_KEYBOARD_COLUMN_RESIZE':
     case 'REMOVE_RESIZE_HANDLE_DECORATIONS':
       if (!pluginState.isResizeHandleWidgetAdded) {
         return pluginState;
@@ -108,7 +110,8 @@ export default ((pluginState, action) => {
         ...action.data,
         resizeHandleColumnIndex: undefined,
         resizeHandleRowIndex: undefined,
-        isResizeHandleWidgetAdded: false
+        isResizeHandleWidgetAdded: false,
+        isKeyboardResize: undefined
       };
     case 'SET_TABLE_REF':
     case 'HOVER_ROWS':

package/dist/es2019/ui/DragHandle/HandleIconComponent.js

@@ -3,11 +3,9 @@ import { DragHandleDisabledIcon, DragHandleIcon, MinimisedHandleIcon } from '../
 export const HandleIconComponent = props => {
   const {
     forceDefaultHandle,
-    isRowHandleHovered,
-    isColumnHandleHovered,
+    isHandleHovered,
     hasMergedCells
   } = props;
-  const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   if (isHandleHovered || forceDefaultHandle) {
     return hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
   }

package/dist/es2019/ui/DragHandle/index.js

@@ -6,6 +6,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
@@ -23,7 +24,7 @@ const DragHandleComponent = ({
   previewHeight,
   onMouseOver,
   onMouseOut,
-  onMouseUp,
+  toggleDragMenu,
   onClick,
   editorView,
   intl: {
@@ -32,13 +33,19 @@ const DragHandleComponent = ({
 }) => {
   const dragHandleDivRef = useRef(null);
   const [previewContainer, setPreviewContainer] = useState(null);
+  const {
+    state,
+    state: {
+      selection
+    }
+  } = editorView;
   const {
     hoveredColumns,
     hoveredRows
-  } = getPluginState(editorView.state);
+  } = getPluginState(state);
   const {
-    selection
-  } = editorView.state;
+    isDragMenuOpen
+  } = getDnDPluginState(state);
   const isRow = direction === 'row';
   const isColumn = direction === 'column';
   const isRowHandleHovered = isRow && hoveredRows.length > 0;
@@ -46,8 +53,7 @@ const DragHandleComponent = ({
   const hasMergedCells = useMemo(() => isRow ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection), [indexes, isRow, selection]);
   const handleIconProps = {
     forceDefaultHandle,
-    isColumnHandleHovered,
-    isRowHandleHovered,
+    isHandleHovered: isColumnHandleHovered || isRowHandleHovered,
     hasMergedCells
   };
   useEffect(() => {
@@ -133,20 +139,29 @@ const DragHandleComponent = ({
     },
     "data-testid": "table-drag-handle-button",
     "aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
+    "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
+    "aria-haspopup": "menu",
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: e => {
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
       editorView.focus();
-      onMouseUp && onMouseUp(e);
+      toggleDragMenu && toggleDragMenu('mouse', e);
     },
-    onClick: onClick
-  }, browser.gecko ? /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps) : /*#__PURE__*/React.createElement("span", {
+    onClick: onClick,
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        toggleDragMenu && toggleDragMenu('keyboard');
+      }
+    }
+  }, appearance !== 'placeholder' ?
+  //  cannot block pointer events in Firefox as it breaks Dragging functionality
+  browser.gecko ? /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps) : /*#__PURE__*/React.createElement("span", {
     style: {
       pointerEvents: 'none'
     }
-  }, /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps))), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+  }, /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps)) : null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight