@atlaskit/editor-plugin-table 7.2.3 → 7.3.1

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -1,18 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DragMenu = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _styles = require("@atlaskit/editor-common/styles");
+var _ui = require("@atlaskit/editor-common/ui");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -32,9 +34,13 @@ var _types = require("../../types");
 var _utils3 = require("../../utils");
 var _dragMenu = require("../../utils/drag-menu");
 var _consts = require("../consts");
+var _DropdownMenu = require("./DropdownMenu");
 var _styles2 = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
+/** @jsxFrag */
 
 var MapDragMenuOptionIdToMessage = {
   add_row_above: {
@@ -165,17 +171,16 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
     menuCallback: menuCallback
   };
 };
-var DragMenu = exports.DragMenu = function DragMenu(_ref) {
+var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_uiColor.ColorPalette);
+var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
   var _pluginConfig$allowBa;
   var _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
     index = _ref.index,
+    target = _ref.target,
     isOpen = _ref.isOpen,
     editorView = _ref.editorView,
     tableNode = _ref.tableNode,
-    mountPoint = _ref.mountPoint,
-    boundariesElement = _ref.boundariesElement,
-    scrollableElement = _ref.scrollableElement,
     targetCellPosition = _ref.targetCellPosition,
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
@@ -189,6 +194,8 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSubmenuOpen = _useState2[0],
     setIsSubmenuOpen = _useState2[1];
+  var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+    isKeyboardModeActive = _getPluginState.isKeyboardModeActive;
   var selectionRect = (0, _utils2.isSelectionType)(selection, 'cell') ? (0, _utils2.getSelectionRect)(selection) : (0, _utils2.findCellRectClosestToPos)(selection.$from);
   var hasMergedCells = direction === 'row' ? _utils3.hasMergedCellsInRow : _utils3.hasMergedCellsInColumn;
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
@@ -224,7 +231,11 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       targetCellPosition = _getTablePluginState2.targetCellPosition;
     var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
     var background = (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+    var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.cellBackgroundColorPalette, background, _consts.colorPalletteColumns),
+      selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
+      selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
     return {
+      key: 'background',
       content: formatMessage(_messages.tableMessages.backgroundColor),
       value: {
         name: 'background'
@@ -244,16 +255,33 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       }), isSubmenuOpen && (0, _react2.jsx)("div", {
         className: _types.TableCssClassName.DRAG_SUBMENU,
         ref: handleSubMenuRef
-      }, (0, _react2.jsx)(_uiColor.ColorPalette, {
-        cols: 7,
-        onClick: setColor,
+      }, (0, _react2.jsx)(_uiMenu.ArrowKeyNavigationProvider, {
+        type: _uiMenu.ArrowKeyNavigationType.COLOR,
+        selectedRowIndex: selectedRowIndex,
+        selectedColumnIndex: selectedColumnIndex,
+        handleClose: function handleClose() {
+          var keyboardEvent = new KeyboardEvent('keydown', {
+            key: 'ArrowDown',
+            bubbles: true
+          });
+          setIsSubmenuOpen(false);
+          target === null || target === void 0 || target.focus();
+          target === null || target === void 0 || target.dispatchEvent(keyboardEvent);
+        },
+        isPopupPositioned: true,
+        isOpenedByKeyboard: isKeyboardModeActive
+      }, (0, _react2.jsx)(ColorPaletteWithListeners, {
+        cols: _consts.colorPalletteColumns,
+        onClick: function onClick(color) {
+          setColor(color);
+        },
         selectedColor: background,
         paletteOptions: {
           palette: _uiColor.cellBackgroundColorPalette,
           paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
           hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
         }
-      })))
+      }))))
     };
   };
   var toggleHeaderColumn = function toggleHeaderColumn() {
@@ -265,8 +293,9 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   var toggleRowNumbers = function toggleRowNumbers() {
     (0, _commandsWithAnalytics.toggleNumberColumnWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
   };
-  var createhHeaderRowColumnMenuItem = function createhHeaderRowColumnMenuItem(direction) {
+  var createHeaderRowColumnMenuItem = function createHeaderRowColumnMenuItem(direction) {
     return direction === 'column' ? {
+      key: 'header_column',
       content: formatMessage(_messages.tableMessages.headerColumn),
       value: {
         name: 'header_column'
@@ -279,6 +308,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
         isChecked: (0, _utils3.checkIfHeaderColumnEnabled)(selection)
       }))
     } : {
+      key: 'header_row',
       content: formatMessage(_messages.tableMessages.headerRow),
       value: {
         name: 'header_row'
@@ -294,6 +324,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   };
   var createRowNumbersMenuItem = function createRowNumbersMenuItem() {
     return {
+      key: 'row_numbers',
       content: formatMessage(_messages.tableMessages.rowNumbers),
       value: {
         name: 'row_numbers'
@@ -315,10 +346,10 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
    * @returns true when the menu should be closed, false otherwise
    */
   var shouldCloseMenu = function shouldCloseMenu(state) {
-    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
-      previousOpenState = _getPluginState.isDragMenuOpen,
-      previousDragMenuDirection = _getPluginState.dragMenuDirection,
-      previousDragMenuIndex = _getPluginState.dragMenuIndex;
+    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+      previousOpenState = _getPluginState2.isDragMenuOpen,
+      previousDragMenuDirection = _getPluginState2.dragMenuDirection,
+      previousDragMenuIndex = _getPluginState2.dragMenuIndex;
 
     // menu open but menu direction changed, means user clicked on drag handle of different row/column
     // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
@@ -330,9 +361,15 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     }
   };
   var closeMenu = function closeMenu() {
+    var focusTarget = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'handle';
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (shouldCloseMenu(state)) {
+      if (target && focusTarget === 'handle') {
+        target === null || target === void 0 || target.focus();
+      } else {
+        editorView.dom.focus();
+      }
       (0, _commands2.toggleDragMenu)(false, direction, index)(state, dispatch);
     }
   };
@@ -341,6 +378,9 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     var item = _ref2.item;
     (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 || _menuCallback$item$va.call(menuCallback, state, dispatch);
     switch (item.value.name) {
+      case 'background':
+        setIsSubmenuOpen(!isSubmenuOpen);
+        break;
       case 'header_column':
         toggleHeaderColumn();
         break;
@@ -354,7 +394,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
         break;
     }
     if (['header_column', 'header_row', 'row_numbers', 'background'].indexOf(item.value.name) <= -1) {
-      closeMenu();
+      closeMenu('editor');
     }
   };
   var handleItemMouseEnter = function handleItemMouseEnter(_ref3) {
@@ -380,6 +420,17 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       (0, _commands.clearHoverSelection)()(state, dispatch);
     }
   };
+  (0, _react.useEffect)(function () {
+    // focus on first menu item automatically when menu renders
+    // and user is using keyboard
+    if (isOpen && target && isKeyboardModeActive) {
+      var keyboardEvent = new KeyboardEvent('keydown', {
+        key: 'ArrowDown',
+        bubbles: true
+      });
+      target.dispatchEvent(keyboardEvent);
+    }
+  }, [isOpen, target, isKeyboardModeActive]);
   if (!menuItems) {
     return null;
   }
@@ -387,11 +438,11 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     menuItems[0].items.unshift(createBackgroundColorMenuItem());
   }
 
-  // If first row, add toggle for Hearder row, default is true
+  // If first row, add toggle for Header row, default is true
   // If first column, add toggle for Header column, default is false
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') && index === 0) {
     menuItems.push({
-      items: [createhHeaderRowColumnMenuItem(direction)]
+      items: [createHeaderRowColumnMenuItem(direction)]
     });
   }
 
@@ -401,26 +452,17 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       items: [createRowNumbersMenuItem()]
     });
   }
-  return (0, _react2.jsx)(_uiMenu.DropdownMenu, {
-    mountTo: mountPoint
-    //This needs be removed when the a11y is completely handled
-    //Disabling key navigation now as it works only partially
-    ,
-    arrowKeyNavigationProviderOptions: {
-      type: _uiMenu.ArrowKeyNavigationType.MENU,
-      disableArrowKeyNavigation: true
+  return (0, _react2.jsx)(_DropdownMenu.DropdownMenu, {
+    disableKeyboardHandling: isSubmenuOpen,
+    section: {
+      hasSeparator: true
     },
+    target: target,
     items: menuItems,
-    isOpen: isOpen,
-    onOpenChange: closeMenu,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
-    fitWidth: _consts.dragMenuDropdownWidth,
-    boundariesElement: boundariesElement,
-    section: {
-      hasSeparator: true
-    }
+    handleClose: closeMenu
   });
-};
+});
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(DragMenu);

package/dist/cjs/ui/FloatingDragMenu/DropdownMenu.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownMenu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _consts = require("../consts");
+var DropListWithOutsideListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.DropList);
+var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
+  var target = _ref.target,
+    items = _ref.items,
+    section = _ref.section,
+    disableKeyboardHandling = _ref.disableKeyboardHandling,
+    onItemActivated = _ref.onItemActivated,
+    handleClose = _ref.handleClose,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
+  var innerMenu = function innerMenu() {
+    return /*#__PURE__*/_react.default.createElement(DropListWithOutsideListeners, {
+      isOpen: true,
+      shouldFitContainer: true,
+      position: ['bottom', 'left'].join(' '),
+      handleClickOutside: function handleClickOutside() {
+        return handleClose('editor');
+      },
+      handleEscapeKeydown: function handleEscapeKeydown() {
+        if (!disableKeyboardHandling) {
+          handleClose('handle');
+        }
+      },
+      handleEnterKeydown: function handleEnterKeydown(e) {
+        if (!disableKeyboardHandling) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      },
+      targetRef: target
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: 0,
+        minWidth: _consts.dragMenuDropdownWidth
+      }
+    }), /*#__PURE__*/_react.default.createElement(_menu.MenuGroup, {
+      role: "menu"
+    }, items.map(function (group, index) {
+      return /*#__PURE__*/_react.default.createElement(_menu.Section, {
+        hasSeparator: (section === null || section === void 0 ? void 0 : section.hasSeparator) && index > 0,
+        title: section === null || section === void 0 ? void 0 : section.title,
+        key: index
+      }, group.items.map(function (item) {
+        var _item$key;
+        return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenuItem, {
+          shouldUseDefaultRole: false,
+          key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : String(item.content),
+          item: item,
+          onItemActivated: onItemActivated,
+          onMouseEnter: onMouseEnter,
+          onMouseLeave: onMouseLeave
+        });
+      }));
+    })));
+  };
+  if (disableKeyboardHandling) {
+    return innerMenu();
+  }
+  return /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+    closeOnTab: true,
+    type: _uiMenu.ArrowKeyNavigationType.MENU,
+    onSelection: function onSelection(index) {
+      var results = items.flatMap(function (item) {
+        return 'items' in item ? item.items : item;
+      });
+
+      // onSelection is called when any focusable element is 'activated'
+      // this is an issue as some menu items have toggles, which cause the index value
+      // in the callback to be outside of array length.
+      // The logic below normalises the index value based on the number
+      // of menu items with 2 focusable elements, and adjusts the index to ensure
+      // the correct menu item is sent in onItemActivated callback
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling')) {
+        var keys = ['row_numbers', 'header_row', 'header_column'];
+        var doubleItemCount = 0;
+        var firstIndex = results.findIndex(function (value) {
+          return keys.includes(value.key);
+        });
+        if (firstIndex === -1 || index <= firstIndex) {
+          onItemActivated && onItemActivated({
+            item: results[index]
+          });
+          return;
+        }
+        for (var i = firstIndex; i < results.length; i += 1) {
+          if (keys.includes(results[i].key)) {
+            doubleItemCount += 1;
+          }
+          if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
+            onItemActivated && onItemActivated({
+              item: results[i]
+            });
+            return;
+          }
+          if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+            onItemActivated && onItemActivated({
+              item: results[i]
+            });
+            return;
+          }
+        }
+      } else {
+        onItemActivated && onItemActivated({
+          item: results[index]
+        });
+      }
+    }
+  }, innerMenu());
+};

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

@@ -30,10 +30,10 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   }
   var inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
   var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  var offset = direction === 'row' ? [-9, 6] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
   }
-  var offset = direction === 'row' ? [-9, 6] : [0, -7];
 
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
@@ -55,10 +55,10 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_DragMenu.default, {
     editorView: editorView,
     isOpen: isOpen,
-    boundariesElement: boundariesElement,
     tableNode: tableNode,
     direction: direction,
     index: index,
+    target: targetHandleRef || undefined,
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     editorAnalyticsAPI: editorAnalyticsAPI,

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -35,7 +35,6 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
     hoveredCell = _ref.hoveredCell,
-    isResizing = _ref.isResizing,
     stickyTop = _ref.stickyTop,
     localId = _ref.localId,
     isInDanger = _ref.isInDanger,
@@ -105,13 +104,13 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       (0, _commands.clearHoverSelection)()(state, dispatch);
     }
   }, [editorView, tableActive]);
-  var handleMouseUp = (0, _react.useCallback)(function (event) {
+  var toggleDragMenuHandler = (0, _react.useCallback)(function (trigger, event) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
-    if (event.shiftKey) {
+    if (event !== null && event !== void 0 && event.shiftKey) {
       return;
     }
-    (0, _commands2.toggleDragMenu)(undefined, 'column', colIndex)(state, dispatch);
+    (0, _commands2.toggleDragMenu)(undefined, 'column', colIndex, trigger)(state, dispatch);
   }, [editorView, colIndex]);
   var colIndexes = (0, _react.useMemo)(function () {
     return [colIndex];
@@ -120,35 +119,20 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     var _getScrollOffset;
     columnControlsRef.current.scrollLeft = (_getScrollOffset = getScrollOffset === null || getScrollOffset === void 0 ? void 0 : getScrollOffset()) !== null && _getScrollOffset !== void 0 ? _getScrollOffset : 0;
   }
-  var generateHandleByType = function generateHandleByType(type) {
+  var generateHandleByType = function generateHandleByType(type, appearance, gridColumn, indexes) {
     var _rowHeights$reduce, _colWidths$reduce;
-    if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
-      return null;
-    }
     var isHover = type === 'hover';
-    var isColumnsSelected = selectedColIndexes.length > 0;
     var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
       return sum + cur;
     }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
-    var showCondition = isHover ? isColumnsSelected && !selectedColIndexes.includes(colIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedColIndexes.length < (colWidths === null || colWidths === void 0 ? void 0 : colWidths.length) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
-    if (!showCondition) {
-      return null;
-    }
-    var gridColumnPosition = "".concat(colIndex + 1, " / span 1");
-    var selectedColumnPosition = "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length);
-    var hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
-    var currentSelectionAppearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
-    var isSelecting = isColumnsSelected && !isHover;
-
-    // this indexes are used to calculate the drag and drop source
-    var indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
     var previewWidth = (_colWidths$reduce = colWidths === null || colWidths === void 0 ? void 0 : colWidths.reduce(function (sum, v, i) {
       return sum + (v !== null && v !== void 0 ? v : _styles.tableCellMinWidth) * (indexes.includes(i) ? 1 : 0);
     }, 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : _styles.tableCellMinWidth;
     return /*#__PURE__*/_react.default.createElement("div", {
       key: type,
       style: {
-        gridColumn: isSelecting ? selectedColumnPosition : gridColumnPosition,
+        gridColumn: gridColumn,
+        gridRow: '1',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
@@ -158,33 +142,38 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         width: '100%',
         position: 'relative'
       },
-      "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": "table-floating-column-".concat(isSelecting ? selectedColIndexes[0] : colIndex, "-drag-handle")
+      "data-testid": "table-floating-column-".concat(isHover ? colIndex : selectedColIndexes[0], "-drag-handle")
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',
       indexes: indexes,
-      forceDefaultHandle: isHover ? false : isColumnsSelected,
       previewWidth: previewWidth,
+      forceDefaultHandle: !isHover,
       previewHeight: previewHeight,
-      appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
+      appearance: appearance,
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
-      onMouseUp: handleMouseUp,
+      toggleDragMenu: toggleDragMenuHandler,
       editorView: editorView
     }));
   };
-  var columnHandles = function columnHandles(hoveredCell) {
-    if (!hoveredCell) {
+  var columnHandles = function columnHandles() {
+    var handles = [];
+    var isColumnSelected = selectedColIndexes.length > 0;
+    var isEntireTableSelected = (colWidths || []).length > selectedColIndexes.length;
+    if (!tableActive) {
       return null;
     }
-    if (hoveredCell.colIndex === undefined) {
-      return generateHandleByType('selected');
+
+    // placeholder / selected need to always render at least one handle
+    // so it can be focused via keyboard shortcuts
+    handles.push(generateHandleByType('selected', isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder', "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length), selectedColIndexes));
+    if (hoveredCell && isTableHovered && colIndex !== undefined && !selectedColIndexes.includes(colIndex)) {
+      handles.push(generateHandleByType('hover', 'default', "".concat(colIndex + 1, " / span 1"), colIndexes));
     }
-    var sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
-    return hoveredCell.colIndex < selectedColIndexes[0] ? sortedHandles : sortedHandles.reverse();
+    return handles;
   };
   var containerWidth = isNumberColumnEnabled && tableContainerWidth ? tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableContainerWidth;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -201,7 +190,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       overflowX: stickyTop ? 'hidden' : 'visible',
       pointerEvents: isDragging ? 'none' : undefined
     }
-  }, !isResizing && columnParams.map(function (_ref2, index) {
+  }, columnParams.map(function (_ref2, index) {
     var startIndex = _ref2.startIndex,
       endIndex = _ref2.endIndex;
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -219,6 +208,6 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         right: '0'
       } : {}
     }));
-  }), tableActive && isTableHovered && !isResizing && columnHandles(hoveredCell)));
+  }), columnHandles()));
 };
 var _default = exports.default = ColumnControls;

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

@@ -105,7 +105,7 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     }
     return [0];
   }, [tableRef, tableRect.height]);
-  if (!tableRef || !tableActive) {
+  if (!tableRef || !tableActive || isResizing) {
     return null;
   }
   var colWidths = (0, _utils.getColumnsWidths)(editorView);
@@ -126,7 +126,6 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     editorView: editorView,
     hoveredCell: hoveredCell,
     tableRef: tableRef,
-    isResizing: isResizing,
     tableActive: tableActive,
     isTableHovered: isTableHovered,
     stickyTop: tableActive ? stickyTop : undefined,

package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -18,6 +18,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
   var editorView = _ref.editorView,
     isInDanger = _ref.isInDanger,
+    isResizing = _ref.isResizing,
     formatMessage = _ref.intl.formatMessage;
   var handleOnClick = function handleOnClick() {
     var state = editorView.state,
@@ -37,6 +38,9 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     }
     return (0, _utils.isTableSelected)(selection);
   }, [editorView.state]);
+  if (isResizing) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement("button", {
     className: (0, _classnames.default)(_types.TableCssClassName.DRAG_CORNER_BUTTON, {
       active: isActive,