@atlaskit/editor-plugin-table 5.3.9 → 5.3.11

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

@@ -1,47 +1,99 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { injectIntl } from 'react-intl-next';
-import { findTable } from '@atlaskit/editor-tables/utils';
+import { CellSelection } from '@atlaskit/editor-tables';
+import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
-import { getRowHeights } from '../../../utils';
+import { getRowHeights, getSelectedRowIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
+const getSelectedRows = selection => {
+  if (selection instanceof CellSelection && selection.isRowSelection()) {
+    const rect = getSelectionRect(selection);
+    if (!rect) {
+      return [];
+    }
+    return getSelectedRowIndexes(rect);
+  }
+  return [];
+};
 const DragControlsComponent = ({
   tableRef,
   hoveredCell,
+  tableActive,
+  editorView,
+  isInDanger,
   hoverRows,
   selectRow,
-  tableActive,
-  editorView
+  updateCellHoverLocation
 }) => {
   const rowHeights = getRowHeights(tableRef);
-  const heights = rowHeights.map((height, index) => `${height - 1}px`).join(' ');
+  const heights = rowHeights.map(height => `${height - 1}px`).join(' ');
+  const selectedRowIndexes = getSelectedRows(editorView.state.selection);
   const rowWidth = tableRef.offsetWidth;
-  const onClick = (index, event) => {};
-  const onMouseOver = () => {};
-  const onMouseOut = () => {};
   const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
+  const gridRowPosition = useMemo(() => {
+    // if more than one row is selected, ensure the handle spans over the selected range
+    if (selectedRowIndexes.includes(rowIndex)) {
+      return `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`;
+    }
+    return `${rowIndex + 1} / span 1`;
+  }, [rowIndex, selectedRowIndexes]);
   const getLocalId = () => {
     var _tableNode$node, _tableNode$node$attrs;
     const tableNode = findTable(editorView.state.selection);
     return (tableNode === null || tableNode === void 0 ? void 0 : (_tableNode$node = tableNode.node) === null || _tableNode$node === void 0 ? void 0 : (_tableNode$node$attrs = _tableNode$node.attrs) === null || _tableNode$node$attrs === void 0 ? void 0 : _tableNode$node$attrs.localId) || '';
   };
+  const handleMouseOut = useCallback(() => {
+    if (tableActive) {
+      const {
+        state,
+        dispatch
+      } = editorView;
+      clearHoverSelection()(state, dispatch);
+    }
+  }, [editorView, tableActive]);
+  const handleMouseMove = useCallback(e => {
+    // avoid updating if event target is drag handle
+    if (!e.nativeEvent.target.classList.contains(ClassName.ROW_CONTROLS_WITH_DRAG)) {
+      return;
+    }
+    const hoverHeight = e.nativeEvent.offsetY;
+    let totalHeight = 0;
+    const rowIndex = rowHeights.findIndex(row => {
+      totalHeight += row;
+      return hoverHeight <= totalHeight;
+    });
+    updateCellHoverLocation(rowIndex);
+  }, [updateCellHoverLocation, rowHeights]);
+  const handleMouseOver = useCallback(() => {
+    hoverRows([rowIndex]);
+  }, [hoverRows, rowIndex]);
+  const handleClick = useCallback(e => {
+    selectRow(rowIndex, e === null || e === void 0 ? void 0 : e.shiftKey);
+  }, [rowIndex, selectRow]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.ROW_CONTROLS_WITH_DRAG,
     style: {
       gridTemplateRows: heights
-    }
-  }, rowIndex !== undefined && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
+    },
+    onMouseMove: handleMouseMove
+  }, Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
-      gridRow: `${rowIndex + 1} / span 1`,
-      display: 'flex'
+      gridRow: gridRowPosition,
+      display: 'flex',
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
     }
   }, /*#__PURE__*/React.createElement(DragHandle, {
-    onClick: event => onClick(rowIndex, event),
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
     tableLocalId: getLocalId(),
     indexes: [rowIndex],
     previewWidth: rowWidth,
-    previewHeight: rowHeights[rowIndex]
+    previewHeight: rowHeights[rowIndex],
+    appearance: selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
+    onClick: handleClick,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut
   })));
 };
 export const DragControls = injectIntl(DragControlsComponent);

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

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
-import { hoverRows, selectRow } from '../../commands';
+import { hoverCell, hoverRows, selectRow } from '../../commands';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { isSelectionUpdated } from '../../utils';
 import { CornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
@@ -30,6 +31,23 @@ export default class TableFloatingControls extends Component {
       } = this.props.editorView;
       hoverRows(rows, danger)(state, dispatch);
     });
+    // re-use across numbered columns and row controls
+    _defineProperty(this, "updateCellHoverLocation", rowIndex => {
+      const {
+        editorView,
+        tableActive
+      } = this.props;
+      const {
+        state,
+        dispatch
+      } = editorView;
+      const {
+        hoveredCell
+      } = getPluginState(state);
+      if (tableActive && hoveredCell.rowIndex !== rowIndex) {
+        hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
+      }
+    });
   }
   componentDidMount() {
     this.tryInitResizeObserver();
@@ -115,14 +133,18 @@ export default class TableFloatingControls extends Component {
       isInDanger: isInDanger,
       isResizing: isResizing,
       selectRow: this.selectRow,
+      updateCellHoverLocation: this.updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
     }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragControls, {
       tableRef: tableRef,
       hoveredCell: hoveredCell,
       editorView: editorView,
+      tableActive: tableActive,
+      isInDanger: isInDanger,
       hoverRows: this.hoverRows,
-      selectRow: this.selectRow
+      selectRow: this.selectRow,
+      updateCellHoverLocation: this.updateCellHoverLocation
     }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
       editorView: editorView,
       tableRef: tableRef,

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

@@ -164,7 +164,7 @@ const tableRowControlStyles = () => {
           position: absolute;
           margin-top: ${tableMarginTop}px;
           left: -${tableToolbarSize + 1}px;
-          z-index: ${rowControlsZIndex};
+          z-index: ${rowControlsZIndex + 4};
         }
       ` : css`
         .${ClassName.ROW_CONTROLS_WRAPPER} {
@@ -607,14 +607,74 @@ export const tableStyles = props => {
       align-items: center;
       position: absolute;
       left: -4px;
+      z-index: ${akEditorUnitZIndex};
     }
 
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
       cursor: grab;
-      width: max-content;
       padding: 0;
-      border: none;
-      background: none;
+
+      border-radius: 6px;
+      width: max-content;
+      height: max-content;
+      border: 2px solid ${`var(--ds-surface, ${N0})`};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        rect {
+          //
+          fill: ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
+        }
+        g {
+          fill: ${"var(--ds-icon-subtle, #626F86)"};
+        }
+      }
+
+      &:hover {
+        svg {
+          rect {
+            fill: ${"var(--ds-background-accent-blue-subtle, #579DFF)"};
+          }
+          g {
+            fill: ${"var(--ds-icon-inverse, #FFF)"};
+          }
+        }
+      }
+
+      &.selected {
+        svg {
+          rect {
+            fill: ${"var(--ds-background-accent-blue-subtle, #579DFF)"};
+          }
+          g {
+            fill: ${"var(--ds-icon-inverse, #FFF)"};
+          }
+        }
+      }
+
+      &.danger {
+        svg {
+          rect {
+            fill: ${"var(--ds-background-accent-red-subtler-pressed, #F87462)"};
+          }
+          g {
+            fill: ${"var(--ds-border-inverse, #FFF)"};
+          }
+        }
+      }
+
+      &.disabled {
+        svg {
+          rect {
+            fill: ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
+          }
+          g {
+            fill: ${"var(--ds-border-inverse, #FFF)"};
+          }
+        }
+      }
     }
 
     ${floatingColumnControls(props)}

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

@@ -1,54 +1,13 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
-export const DragHandleIcon = ({
-  backgroundColor,
-  foregroundColor
-}) => /*#__PURE__*/React.createElement("svg", {
-  width: "28",
-  height: "20",
-  viewBox: "0 0 28 20",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
+export const DragHandleIcon = () => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "16",
+  fill: "none"
 }, /*#__PURE__*/React.createElement("rect", {
-  x: "1",
-  y: "1",
-  width: "26",
-  height: "18",
-  rx: "5",
-  fill: backgroundColor || '#F1F2F4'
-}), /*#__PURE__*/React.createElement("g", {
-  clipPath: "url(#clip0_125_45007)"
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M11 12C11 11.4477 10.5523 11 10 11C9.44772 11 9 11.4477 9 12C9 12.5523 9.44772 13 10 13C10.5523 13 11 12.5523 11 12Z",
-  fill: foregroundColor || '#626F86'
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M11 8C11 7.44772 10.5523 7 10 7C9.44772 7 9 7.44772 9 8C9 8.55228 9.44772 9 10 9C10.5523 9 11 8.55228 11 8Z",
-  fill: foregroundColor || '#626F86'
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M19 12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13C18.5523 13 19 12.5523 19 12Z",
-  fill: foregroundColor || '#626F86'
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M19 8C19 7.44772 18.5523 7 18 7C17.4477 7 17 7.44772 17 8C17 8.55228 17.4477 9 18 9C18.5523 9 19 8.55228 19 8Z",
-  fill: foregroundColor || '#626F86'
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12C13 12.5523 13.4477 13 14 13C14.5523 13 15 12.5523 15 12Z",
-  fill: foregroundColor || '#626F86'
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M15 8C15 7.44772 14.5523 7 14 7C13.4477 7 13 7.44772 13 8C13 8.55228 13.4477 9 14 9C14.5523 9 15 8.55228 15 8Z",
-  fill: foregroundColor || '#626F86'
-})), /*#__PURE__*/React.createElement("rect", {
-  x: "1",
-  y: "1",
-  width: "26",
-  height: "18",
-  rx: "5",
-  stroke: "white",
-  strokeWidth: "2"
-}), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-  id: "clip0_125_45007"
-}, /*#__PURE__*/React.createElement("rect", {
-  width: "16",
-  height: "24",
-  fill: "white",
-  transform: "matrix(0 -1 1 0 2 18)"
-}))));
+  width: "24",
+  height: "16",
+  rx: "4"
+}), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  d: "M9 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM9 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM17 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM17 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"
+})));

package/dist/esm/plugins/table/commands/hover.js

@@ -131,14 +131,16 @@ export var hideResizeHandleLine = function hideResizeHandleLine() {
     };
   });
 };
-export var hoverCell = function hoverCell(rowIndex, colIndex) {
+export var hoverCell = function hoverCell(rowIndex, colIndex, colWidth, colHeight) {
   return createCommand(function () {
     return {
       type: 'HOVER_CELL',
       data: {
         hoveredCell: {
           rowIndex: rowIndex,
-          colIndex: colIndex
+          colIndex: colIndex,
+          colWidth: colWidth,
+          colHeight: colHeight
         }
       }
     };

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

@@ -171,7 +171,7 @@ export var handleMouseLeave = function handleMouseLeave(view, event) {
     return true;
   }
   if (isDragAndDropEnabled) {
-    hoverCell(undefined, undefined)(state, dispatch);
+    hoverCell()(state, dispatch);
   }
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && hideInsertColumnOrRowButton()(state, dispatch)) {
     return true;
@@ -317,7 +317,8 @@ export var whenTableInFocus = function whenTableInFocus(eventHandler, elementCon
 var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var target = mouseEvent.target;
   var maybeTableCell = isElementInTableCell(target);
-  if (!maybeTableCell) {
+  var tableRef = getPluginState(view.state).tableRef;
+  if (!maybeTableCell || !tableRef) {
     return;
   }
   var colIndex = maybeTableCell.cellIndex;
@@ -325,8 +326,10 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var rowIndex = rowElement && rowElement.rowIndex;
   var _getPluginState8 = getPluginState(view.state),
     hoveredCell = _getPluginState8.hoveredCell;
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex) {
-    hoverCell(rowIndex, colIndex)(view.state, view.dispatch);
+  var colHeight = tableRef.offsetHeight;
+  var colWidth = maybeTableCell.offsetWidth;
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
+    hoverCell(rowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
   }
 };
 export var withCellTracking = function withCellTracking(eventHandler, elementContentRects) {

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -489,11 +489,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader
       }));
-      var colControls = /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
+      var colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
         editorView: view,
         tableRef: tableRef,
         getNode: getNode,
         tableActive: tableActive,
+        isInDanger: isInDanger,
         hoveredRows: hoveredRows,
         hoveredCell: hoveredCell,
         isResizing: isResizing,
@@ -505,7 +506,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader,
         getEditorFeatureFlags: this.props.getEditorFeatureFlags
-      });
+      }) : null;
       var shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
       var shadowStyle = memoizeOne(function (visible) {
         return {

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

@@ -1,39 +1,25 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useRef, useState } from 'react';
+import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 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 { N200, N700 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
 import { DragPreview } from '../DragPreview';
 import { DragHandleIcon } from '../icons';
-var mapStateToProps = function mapStateToProps(state) {
-  switch (state) {
-    case 'danger':
-    case 'disabled':
-    case 'selected':
-    case 'default':
-    default:
-      return {
-        backgroundColor: "var(--ds-background-accent-gray-subtlest, ".concat(N200, ")"),
-        foregroundColor: "var(--ds-icon-subtle, ".concat(N700, ")")
-      };
-  }
-};
 export var DragHandle = function DragHandle(_ref) {
   var tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
-    _ref$state = _ref.state,
-    state = _ref$state === void 0 ? 'default' : _ref$state,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     indexes = _ref.indexes,
     previewWidth = _ref.previewWidth,
     previewHeight = _ref.previewHeight,
-    onClick = _ref.onClick,
     onMouseOver = _ref.onMouseOver,
-    onMouseOut = _ref.onMouseOut;
+    onMouseOut = _ref.onMouseOut,
+    onClick = _ref.onClick;
   var dragHandleDivRef = useRef(null);
-  var iconProps = mapStateToProps(state);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     previewContainer = _useState2[0],
@@ -82,17 +68,17 @@ export var DragHandle = function DragHandle(_ref) {
     }
   }, [tableLocalId, direction, indexes]);
   return /*#__PURE__*/React.createElement("button", {
-    className: ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
+    className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance),
     ref: dragHandleDivRef,
     style: {
-      backgroundColor: "var(--ds-surface, white)",
-      borderRadius: '4px',
-      border: "2px solid ".concat("var(--ds-surface, white)"),
       transform: direction === 'column' ? 'none' : 'rotate(90deg)',
       pointerEvents: 'auto'
     },
-    "data-testid": "table-floating-column-controls-drag-handle"
-  }, /*#__PURE__*/React.createElement(DragHandleIcon, iconProps), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+    "data-testid": "table-floating-column-controls-drag-handle",
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(DragHandleIcon, null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight

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

@@ -1,8 +1,22 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { CellSelection } from '@atlaskit/editor-tables';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection, hoverColumns, selectColumn } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
+import { getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
+var getSelectedColumns = function getSelectedColumns(selection) {
+  if (selection instanceof CellSelection && selection.isColSelection()) {
+    var rect = getSelectionRect(selection);
+    if (!rect) {
+      return [];
+    }
+    return getSelectedColumnIndexes(rect);
+  }
+  return [];
+};
 export var ColumnControls = function ColumnControls(_ref) {
-  var _rowHeights$, _colWidths$map$join;
+  var _colWidths$map$join, _rowHeights$;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -10,21 +24,41 @@ export var ColumnControls = function ColumnControls(_ref) {
     isResizing = _ref.isResizing,
     stickyTop = _ref.stickyTop,
     localId = _ref.localId,
+    isInDanger = _ref.isInDanger,
     rowHeights = _ref.rowHeights,
     colWidths = _ref.colWidths;
-  if (!tableRef) {
-    return null;
-  }
-  var firstRow = tableRef.querySelector('tr');
-  var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
-  var marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return width ? "".concat(width - 1, "px") : '0px';
   }).join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
-  var _onClick = function onClick(index, event) {};
-  var onMouseOver = function onMouseOver() {};
-  var onMouseOut = function onMouseOut() {};
+  var selectedColIndexes = getSelectedColumns(editorView.state.selection);
+  var gridColumnPosition = useMemo(function () {
+    // if more than one row is selected, ensure the handle spans over the selected range
+    if (selectedColIndexes.includes(colIndex)) {
+      return "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length);
+    }
+    return "".concat(colIndex + 1, " / span 1");
+  }, [colIndex, selectedColIndexes]);
+  var firstRow = tableRef.querySelector('tr');
+  var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
+  var marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
+  var handleClick = useCallback(function (event) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    selectColumn(colIndex, event.shiftKey)(state, dispatch);
+  }, [colIndex, editorView]);
+  var handleMouseOver = useCallback(function () {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    hoverColumns([colIndex])(state, dispatch);
+  }, [colIndex, editorView]);
+  var handleMouseOut = useCallback(function () {
+    if (tableActive) {
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      clearHoverSelection()(state, dispatch);
+    }
+  }, [editorView, tableActive]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.COLUMN_CONTROLS_WITH_DRAG
   }, /*#__PURE__*/React.createElement("div", {
@@ -34,22 +68,23 @@ export var ColumnControls = function ColumnControls(_ref) {
       gridTemplateColumns: widths,
       marginTop: marginTop
     }
-  }, tableActive && !isResizing && Number.isFinite(colIndex) && /*#__PURE__*/React.createElement("div", {
+  }, tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
-      gridColumn: "".concat(colIndex + 1, " / span 1"),
+      gridColumn: gridColumnPosition,
       marginTop: "-15px"
     },
-    "data-column-control-index": colIndex,
+    "data-column-control-index": hoveredCell.colIndex,
     "data-testid": "table-floating-column-control"
   }, /*#__PURE__*/React.createElement(DragHandle, {
     direction: "column",
-    indexes: [colIndex],
-    onClick: function onClick(event) {
-      return _onClick(colIndex, event);
-    },
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
-    tableLocalId: localId || ''
+    tableLocalId: localId || '',
+    indexes: [hoveredCell.colIndex],
+    previewWidth: hoveredCell.colWidth,
+    previewHeight: hoveredCell.colHeight,
+    appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
+    onClick: handleClick,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut
   }))));
 };
 export default ColumnControls;

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

@@ -18,7 +18,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     hoveredCell = _ref.hoveredCell,
     isResizing = _ref.isResizing,
     stickyHeader = _ref.stickyHeader,
-    selection = _ref.selection;
+    selection = _ref.selection,
+    isInDanger = _ref.isInDanger;
   var _useState = useState({
       width: 0,
       height: 0
@@ -108,6 +109,7 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     tableActive: tableActive,
     stickyTop: tableActive ? stickyTop : undefined,
     localId: currentNodeLocalId,
+    isInDanger: isInDanger,
     rowHeights: rowHeights,
     colWidths: colWidths
   }), hasDropTargets && /*#__PURE__*/React.createElement(ColumnDropTargets, {