@atlaskit/editor-plugin-table 7.2.3 → 7.3.1

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

@@ -57,6 +57,7 @@ function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEn
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, (0, _columnResize.activateNextResizeArea)(-1), list);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, (0, _columnResize.changeColumnWidthByStep)(-10, getEditorContainerWidth), list);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, (0, _columnResize.changeColumnWidthByStep)(10, getEditorContainerWidth), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.escape.common, (0, _columnResize.stopKeyboardColumnResizing)(), list);
   }
   return (0, _keymap.keymap)(list);
 }

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

@@ -12,7 +12,11 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _transforms = require("@atlaskit/editor-common/transforms");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _editorTables = require("@atlaskit/editor-tables");
+var _utils3 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
+var _columnResize = require("../commands/column-resize");
 var _misc = require("../commands/misc");
 var _eventHandlers = require("../event-handlers");
 var _table = require("../nodeviews/table");
@@ -21,7 +25,7 @@ var _TableRow = _interopRequireDefault(require("../nodeviews/TableRow"));
 var _plugin = require("../pm-plugins/decorations/plugin");
 var _transforms2 = require("../transforms");
 var _types = require("../types");
-var _utils3 = require("../utils");
+var _utils4 = require("../utils");
 var _paste = require("../utils/paste");
 var _defaultTableSelection = require("./default-table-selection");
 var _pluginFactory = require("./plugin-factory");
@@ -106,7 +110,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
       var domAtPos = editorView.domAtPos.bind(editorView);
       editorViewRef = editorView;
       return {
-        update: function update(view) {
+        update: function update(view, prevState) {
           var state = view.state,
             dispatch = view.dispatch;
           var selection = state.selection;
@@ -117,6 +121,28 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
             if (parent) {
               tableRef = parent.querySelector('table') || undefined;
             }
+            var tableNode = (0, _utils3.findTable)(state.selection);
+            if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+              // when cursor leaves the table we need to stop column resizing
+              var pluginPrevState = (0, _pluginFactory.getPluginState)(prevState);
+              var isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
+              if (isStopKeyboardColumResizing) {
+                var 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) {
+                  var oldRowsNumber = _editorTables.TableMap.get(pluginPrevState.tableNode).height;
+                  var newRowsNumber = _editorTables.TableMap.get(tableNode.node).height;
+                  if (oldRowsNumber !== newRowsNumber ||
+                  // Add/delete row
+                  tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
+                    // Jump to another table
+                    (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch);
+                  }
+                } else if (!tableNode) {
+                  // selection outside of table
+                  (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch);
+                }
+              }
+            }
           }
           if (pluginState.tableRef !== tableRef) {
             (0, _commands.setTableRef)(tableRef)(state, dispatch);
@@ -156,7 +182,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         if (!(0, _coreUtils.insideTable)(editorState) && (0, _paste.isHeaderRowRequired)(editorState)) {
           slice = (0, _misc.transformSliceToAddTableHeaders)(slice, schema);
         }
-        slice = (0, _utils3.transformSliceToFixHardBreakProblemOnCopyFromCell)(slice, schema);
+        slice = (0, _utils4.transformSliceToFixHardBreakProblemOnCopyFromCell)(slice, schema);
 
         // We do this separately, so it also applies to drag/drop events
         // This needs to go before `transformSliceToRemoveOpenExpand`
@@ -167,14 +193,14 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         slice = (0, _transforms.transformSliceToRemoveOpenExpand)(slice, schema);
 
         /** If a partial paste of table, paste only table's content */
-        slice = (0, _utils3.transformSliceToRemoveOpenTable)(slice, schema);
+        slice = (0, _utils4.transformSliceToRemoveOpenTable)(slice, schema);
 
         /** If a partial paste of bodied extension, paste only text */
         slice = (0, _transforms.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
 
         /** If a partial paste of multi bodied extension, paste only children */
         slice = (0, _transforms.transformSliceToRemoveOpenMultiBodiedExtension)(slice, schema);
-        slice = (0, _utils3.transformSliceToCorrectEmptyTableCells)(slice, schema);
+        slice = (0, _utils4.transformSliceToCorrectEmptyTableCells)(slice, schema);
         if (!pluginConfig.allowColumnResizing) {
           slice = (0, _misc.transformSliceToRemoveColumnsWidths)(slice, schema);
         }
@@ -190,7 +216,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         var state = _ref2.state,
           dispatch = _ref2.dispatch;
         var decorationSet = _plugin.pluginKey.getState(state);
-        if ((0, _utils3.findControlsHoverDecoration)(decorationSet).length) {
+        if ((0, _utils4.findControlsHoverDecoration)(decorationSet).length) {
           (0, _commands.clearHoverSelection)()(state, dispatch);
         }
 
@@ -213,9 +239,17 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         var maybeTr = (0, _utils.closestElement)(domRef, 'tr');
         return maybeTr ? maybeTr.classList.contains('sticky') : false;
       },
-      handleTextInput: function handleTextInput(_ref3, _from, _to, text) {
-        var state = _ref3.state,
-          dispatch = _ref3.dispatch;
+      handleTextInput: function handleTextInput(view, _from, _to, text) {
+        var state = view.state,
+          dispatch = view.dispatch;
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+          var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+            isKeyboardResize = _getPluginState.isKeyboardResize;
+          if (isKeyboardResize) {
+            (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch);
+            return false;
+          }
+        }
         var tr = (0, _transforms2.replaceSelectedTable)(state, text, _analytics.INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
         if (tr.selectionSet) {
           dispatch(tr);

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

@@ -11,12 +11,14 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _columnResize = require("../../commands/column-resize");
 var _misc = require("../../commands/misc");
 var _transforms = require("../../transforms");
 var _utils2 = require("../../utils");
+var _pluginFactory = require("../plugin-factory");
 var _tableAnalytics = require("../table-analytics");
 var _commands = require("./commands");
-var _pluginFactory = require("./plugin-factory");
+var _pluginFactory2 = require("./plugin-factory");
 var _utils3 = require("./utils");
 var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
   var state = view.state,
@@ -26,6 +28,8 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
   if (editorDisabled || localResizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
+  var _getTablePluginState = (0, _pluginFactory.getPluginState)(state),
+    isKeyboardResize = _getTablePluginState.isKeyboardResize;
   event.preventDefault();
   var tr = view.state.tr;
   tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
@@ -92,9 +96,11 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     var clientX = event.clientX;
     var state = view.state,
       dispatch = view.dispatch;
-    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+    var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
       dragging = _getPluginState.dragging,
       resizeHandlePos = _getPluginState.resizeHandlePos;
+    var _getTablePluginState2 = (0, _pluginFactory.getPluginState)(state),
+      isTableHovered = _getTablePluginState2.isTableHovered;
     if (resizeHandlePos === null) {
       return (0, _commands.stopResizing)()(state, dispatch);
     }
@@ -107,9 +113,20 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     var start = $cell.start(-1);
     var 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 (0, _commands.stopResizing)()(state, dispatch);
+      if ((0, _platformFeatureFlags.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 (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch, view);
+        } else {
+          return (0, _commands.stopResizing)()(state, dispatch);
+        }
+      } else {
+        return (0, _commands.stopResizing)()(state, dispatch);
+      }
     }
     var tr = state.tr;
     if (dragging) {
@@ -143,17 +160,30 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
           })(tr);
         }
       }
-      return (0, _commands.stopResizing)(tr)(state, dispatch);
+      if ((0, _platformFeatureFlags.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 (0, _columnResize.stopKeyboardColumnResizing)(tr)(state, dispatch, view);
+        } else {
+          return (0, _commands.stopResizing)(tr)(state, dispatch);
+        }
+      } else {
+        return (0, _commands.stopResizing)(tr)(state, dispatch);
+      }
     }
   }
   function move(event) {
     var clientX = event.clientX,
       which = event.which;
     var state = view.state;
-    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+    var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
       dragging = _getPluginState2.dragging,
       resizeHandlePos = _getPluginState2.resizeHandlePos;
-    if (!which || !dragging || resizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(resizeHandlePos))) {
+    var _getTablePluginState3 = (0, _pluginFactory.getPluginState)(state),
+      isTableHovered = _getTablePluginState3.isTableHovered;
+    if (!which || !dragging || resizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(resizeHandlePos)) || !isTableHovered && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
       return finish(event);
     }
     var $cell = state.doc.resolve(resizeHandlePos);

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

@@ -8,10 +8,12 @@ exports.createPlugin = createPlugin;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../../types");
+var _pluginFactory = require("../plugin-factory");
 var _commands = require("./commands");
 var _eventHandlers = require("./event-handlers");
-var _pluginFactory = require("./plugin-factory");
+var _pluginFactory2 = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 var _utils = require("./utils");
 function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
@@ -19,7 +21,7 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
     lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza;
   return new _safePlugin.SafePlugin({
     key: _pluginKey.pluginKey,
-    state: (0, _pluginFactory.createPluginState)(dispatch, {
+    state: (0, _pluginFactory2.createPluginState)(dispatch, {
       lastColumnResizable: lastColumnResizable,
       resizeHandlePos: null,
       dragging: null,
@@ -28,7 +30,7 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
     props: {
       attributes: function attributes(state) {
         var _classnames;
-        var pluginState = (0, _pluginFactory.getPluginState)(state);
+        var pluginState = (0, _pluginFactory2.getPluginState)(state);
         return {
           class: (0, _classnames2.default)(_types.TableCssClassName.RESIZING_PLUGIN, (_classnames = {}, (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.RESIZE_CURSOR, pluginState.resizeHandlePos !== null), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.IS_RESIZING, !!pluginState.dragging), _classnames))
         };
@@ -38,10 +40,22 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
           var state = view.state;
           var resizeHandlePos =
           // we're setting `resizeHandlePos` via command in unit tests
-          (0, _pluginFactory.getPluginState)(state).resizeHandlePos || (0, _utils.getResizeCellPos)(view, event);
-          var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+          (0, _pluginFactory2.getPluginState)(state).resizeHandlePos || (0, _utils.getResizeCellPos)(view, event);
+          var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
             dragging = _getPluginState.dragging;
-          if (resizeHandlePos !== null && !dragging) {
+          var isColumnKeyboardResizeStarted = false;
+          if ((0, _platformFeatureFlags.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
+            */
+            var _getTablePluginState = (0, _pluginFactory.getPluginState)(state),
+              isKeyboardResize = _getTablePluginState.isKeyboardResize;
+            if (isKeyboardResize) {
+              isColumnKeyboardResizeStarted = isKeyboardResize;
+            }
+          }
+          if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
             if ((0, _eventHandlers.handleMouseDown)(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI)) {
               var _state = view.state,
                 _dispatch = view.dispatch;

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

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

package/dist/cjs/reducer.js

@@ -64,8 +64,9 @@ var _default = exports.default = function _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 _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
@@ -84,6 +85,7 @@ var _default = exports.default = function _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;
@@ -91,7 +93,8 @@ var _default = exports.default = function _default(pluginState, action) {
       return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
         resizeHandleColumnIndex: undefined,
         resizeHandleRowIndex: undefined,
-        isResizeHandleWidgetAdded: false
+        isResizeHandleWidgetAdded: false,
+        isKeyboardResize: undefined
       });
     case 'SET_TABLE_REF':
     case 'HOVER_ROWS':

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

@@ -9,10 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 var _icons = require("../icons");
 var HandleIconComponent = exports.HandleIconComponent = function HandleIconComponent(props) {
   var forceDefaultHandle = props.forceDefaultHandle,
-    isRowHandleHovered = props.isRowHandleHovered,
-    isColumnHandleHovered = props.isColumnHandleHovered,
+    isHandleHovered = props.isHandleHovered,
     hasMergedCells = props.hasMergedCells;
-  var isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   if (isHandleHovered || forceDefaultHandle) {
     return hasMergedCells ? /*#__PURE__*/_react.default.createElement(_icons.DragHandleDisabledIcon, null) : /*#__PURE__*/_react.default.createElement(_icons.DragHandleIcon, null);
   }

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

@@ -16,7 +16,8 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview");
-var _pluginFactory = require("../../pm-plugins/plugin-factory");
+var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
+var _pluginFactory2 = require("../../pm-plugins/plugin-factory");
 var _types = require("../../types");
 var _utils2 = require("../../utils");
 var _consts = require("../consts");
@@ -38,7 +39,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     previewHeight = _ref.previewHeight,
     onMouseOver = _ref.onMouseOver,
     onMouseOut = _ref.onMouseOut,
-    _onMouseUp = _ref.onMouseUp,
+    toggleDragMenu = _ref.toggleDragMenu,
     onClick = _ref.onClick,
     editorView = _ref.editorView,
     formatMessage = _ref.intl.formatMessage;
@@ -47,10 +48,13 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     previewContainer = _useState2[0],
     setPreviewContainer = _useState2[1];
-  var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+  var state = editorView.state,
+    selection = editorView.state.selection;
+  var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
     hoveredColumns = _getPluginState.hoveredColumns,
     hoveredRows = _getPluginState.hoveredRows;
-  var selection = editorView.state.selection;
+  var _getDnDPluginState = (0, _pluginFactory.getPluginState)(state),
+    isDragMenuOpen = _getDnDPluginState.isDragMenuOpen;
   var isRow = direction === 'row';
   var isColumn = direction === 'column';
   var isRowHandleHovered = isRow && hoveredRows.length > 0;
@@ -60,8 +64,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }, [indexes, isRow, selection]);
   var handleIconProps = {
     forceDefaultHandle: forceDefaultHandle,
-    isColumnHandleHovered: isColumnHandleHovered,
-    isRowHandleHovered: isRowHandleHovered,
+    isHandleHovered: isColumnHandleHovered || isRowHandleHovered,
     hasMergedCells: hasMergedCells
   };
   (0, _react.useEffect)(function () {
@@ -144,20 +147,29 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     },
     "data-testid": "table-drag-handle-button",
     "aria-label": formatMessage(isRow ? _messages.tableMessages.rowDragHandle : _messages.tableMessages.columnDragHandle),
+    "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
+    "aria-haspopup": "menu",
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: function 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
-  }, _utils.browser.gecko ? /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps) : /*#__PURE__*/_react.default.createElement("span", {
+    onClick: onClick,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        toggleDragMenu && toggleDragMenu('keyboard');
+      }
+    }
+  }, appearance !== 'placeholder' ?
+  //  cannot block pointer events in Firefox as it breaks Dragging functionality
+  _utils.browser.gecko ? /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps) : /*#__PURE__*/_react.default.createElement("span", {
     style: {
       pointerEvents: 'none'
     }
-  }, /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps))), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_DragPreview.DragPreview, {
+  }, /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps)) : null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_DragPreview.DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight