@atlaskit/editor-plugin-table 5.4.15 → 5.4.16

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

@@ -1,8 +1,11 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 import React, { useCallback, useMemo } from 'react';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -17,7 +20,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 export var ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce, _colWidths;
+  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -37,13 +40,6 @@ export var ColumnControls = function ColumnControls(_ref) {
   var columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   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;
@@ -95,6 +91,63 @@ export var ColumnControls = function ColumnControls(_ref) {
   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 generateHandleByType = useCallback(function (type) {
+    var _colWidths;
+    if (!hoveredCell) {
+      return null;
+    }
+    var _getDragDropPluginSta = getDragDropPluginState(editorView.state),
+      isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen,
+      dragMenuIndex = _getDragDropPluginSta.dragMenuIndex,
+      dragMenuDirection = _getDragDropPluginSta.dragMenuDirection;
+    var isHover = type === 'hover';
+    var isHoveredOnSelectedColumn = isDragMenuOpen && dragMenuDirection === 'column' && dragMenuIndex === colIndex;
+    var showCondition = isHover ? !isHoveredOnSelectedColumn && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : isDragMenuOpen && dragMenuDirection === 'column';
+    if (!showCondition) {
+      return null;
+    }
+    var selectedColumnPosition = "".concat(dragMenuIndex + 1, " / span ").concat(selectedColIndexes.length);
+    var gridColumnPosition = selectedColIndexes.includes(colIndex) ? "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length) : "".concat(colIndex + 1, " / span 1");
+    var selectedApprearance = isInDanger ? 'danger' : 'selected';
+    var hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    return showCondition && /*#__PURE__*/React.createElement("div", {
+      key: type,
+      style: {
+        gridColumn: isHover ? gridColumnPosition : selectedColumnPosition,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 'fit-content',
+        placeSelf: 'center',
+        zIndex: 99
+      },
+      "data-column-control-index": hoveredCell.colIndex,
+      "data-testid": isHover ? 'table-floating-column-control' : 'table-floating-column-control-selected'
+    }, /*#__PURE__*/React.createElement(DragHandle, {
+      direction: "column",
+      tableLocalId: localId || '',
+      indexes: isHover ? colIndexes : selectedColIndexes,
+      forceDefaultHandle: !isHover,
+      previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
+      previewHeight: previewHeight,
+      appearance: isHover ? hoveredAppearance : selectedApprearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      onMouseUp: handleMouseUp,
+      editorView: editorView
+    }));
+  }, [colIndex, previewHeight, colWidths, colIndexes, editorView, handleClick, handleMouseOut, handleMouseOver, handleMouseUp, hoveredCell, isInDanger, localId, selectedColIndexes]);
+  var columnHandles = useCallback(function (hoveredCell) {
+    if (!hoveredCell) {
+      return null;
+    }
+    if (hoveredCell.colIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+    var sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
+    return hoveredCell.colIndex < selectedColIndexes[0] ? sortedHandles : sortedHandles.reverse();
+  }, [generateHandleByType, selectedColIndexes]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
@@ -123,30 +176,6 @@ export var ColumnControls = function ColumnControls(_ref) {
         right: '0'
       } : {}
     }));
-  }), tableActive && !isResizing && isTableHovered && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
-    style: {
-      gridColumn: gridColumnPosition,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: 'fit-content',
-      placeSelf: 'center',
-      zIndex: 99
-    },
-    "data-column-control-index": hoveredCell.colIndex,
-    "data-testid": "table-floating-column-control"
-  }, /*#__PURE__*/React.createElement(DragHandle, {
-    direction: "column",
-    tableLocalId: localId || '',
-    indexes: colIndexes,
-    previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
-    previewHeight: previewHeight,
-    appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
-    onClick: handleClick,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onMouseUp: handleMouseUp,
-    editorView: editorView
-  }))));
+  }), tableActive && !isResizing && columnHandles(hoveredCell)));
 };
 export default ColumnControls;

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

@@ -1,4 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { CellSelection } from '@atlaskit/editor-tables';
@@ -6,6 +8,7 @@ import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights, getRowsParams, getSelectedRowIndexes } from '../../../utils';
@@ -76,13 +79,6 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     toggleDragMenu(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex)(editorView.state, editorView.dispatch);
   }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
   var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
-  var gridRowPosition = useMemo(function () {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedRowIndexes.includes(rowIndex)) {
-      return "".concat(selectedRowIndexes[0] + 1, " / span ").concat(selectedRowIndexes.length);
-    }
-    return "".concat(rowIndex + 1, " / span 1");
-  }, [rowIndex, selectedRowIndexes]);
   var handleMouseOut = useCallback(function () {
     if (tableActive) {
       var state = editorView.state,
@@ -109,6 +105,62 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
   var handleClick = useCallback(function (e) {
     selectRow(rowIndex, e === null || e === void 0 ? void 0 : e.shiftKey);
   }, [rowIndex, selectRow]);
+  var generateHandleByType = useCallback(function (type) {
+    if (!hoveredCell) {
+      return null;
+    }
+    var _getDragDropPluginSta = getDragDropPluginState(editorView.state),
+      isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen,
+      dragMenuIndex = _getDragDropPluginSta.dragMenuIndex,
+      dragMenuDirection = _getDragDropPluginSta.dragMenuDirection;
+    var isHover = type === 'hover';
+    var isHoveredOnSelectedRow = isDragMenuOpen && dragMenuDirection === 'row' && dragMenuIndex === rowIndex;
+    var showCondition = isHover ? !isHoveredOnSelectedRow && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : isDragMenuOpen && dragMenuDirection === 'row' && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
+    if (!showCondition) {
+      return null;
+    }
+    var gridRowPosition =
+    // if more than one row is selected, ensure the handle spans over the selected range
+    selectedRowIndexes.includes(rowIndex) ? "".concat(selectedRowIndexes[0] + 1, " / span ").concat(selectedRowIndexes.length) : "".concat(rowIndex + 1, " / span 1");
+    var selectedRowPosition = "".concat(dragMenuIndex + 1, " / span ").concat(selectedRowIndexes.length);
+    var selectedApprearance = isInDanger ? 'danger' : 'selected';
+    var hoveredAppearance = selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    return showCondition && /*#__PURE__*/React.createElement("div", {
+      key: type,
+      style: {
+        gridRow: isHover ? gridRowPosition : selectedRowPosition,
+        gridColumn: '2',
+        display: 'flex',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      "data-testid": isHover ? 'table-floating-row-drag-handle' : 'table-floating-row-control-selected'
+    }, /*#__PURE__*/React.createElement(DragHandle, {
+      direction: "row",
+      tableLocalId: currentNodeLocalId,
+      indexes: isHover ? rowIndexes : selectedRowIndexes,
+      forceDefaultHandle: !isHover,
+      previewWidth: tableWidth,
+      previewHeight: rowHeights[rowIndex],
+      appearance: isHover ? hoveredAppearance : selectedApprearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      onMouseUp: onMouseUp,
+      editorView: editorView
+    }));
+  }, [currentNodeLocalId, editorView, handleClick, handleMouseOut, handleMouseOver, hoveredCell, isInDanger, onMouseUp, rowHeights, rowIndex, rowIndexes, selectedRowIndexes, tableWidth]);
+  var rowHandles = useCallback(function (hoveredCell) {
+    if (!hoveredCell) {
+      return null;
+    }
+    if (hoveredCell.rowIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+    var sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
+    return hoveredCell.rowIndex < selectedRowIndexes[0] ? sortedHandles : sortedHandles.reverse();
+  }, [generateHandleByType, selectedRowIndexes]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_ROW_CONTROLS,
     style: {
@@ -148,27 +200,6 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         left: "var(--ds-space-negative-100, -8px)"
       }
     }));
-  }), !isResizing && isTableHovered && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
-    style: {
-      gridRow: gridRowPosition,
-      gridColumn: '2',
-      display: 'flex',
-      height: '100%',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    "data-testid": "table-floating-row-drag-handle"
-  }, /*#__PURE__*/React.createElement(DragHandle, {
-    tableLocalId: currentNodeLocalId,
-    indexes: rowIndexes,
-    previewWidth: tableWidth,
-    previewHeight: rowHeights[rowIndex],
-    appearance: selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
-    onClick: handleClick,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onMouseUp: onMouseUp,
-    editorView: editorView
-  })));
+  }), !isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell));
 };
 export var DragControls = injectIntl(DragControlsComponent);

package/dist/types/plugins/table/types.d.ts

@@ -420,3 +420,4 @@ export interface DraggableData {
     targetClosestEdge: Edge;
     direction: 1 | -1;
 }
+export type HandleTypes = 'hover' | 'selected';

package/dist/types/plugins/table/ui/DragHandle/HandleIconComponent.d.ts

@@ -2,6 +2,7 @@
 type HandleIconProps = {
     hasMergedCells: boolean;
     direction: 'row' | 'column';
+    forceDefaultHandle: boolean;
     isDragMenuOpen: boolean | undefined;
     isRowHandleHovered: boolean;
     isColumnHandleHovered: boolean;

package/dist/types/plugins/table/ui/DragHandle/index.d.ts

@@ -5,6 +5,7 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
+    forceDefaultHandle?: boolean;
     previewWidth?: number;
     previewHeight?: number;
     direction?: TableDirection;
@@ -15,5 +16,5 @@ type DragHandleProps = {
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/table/types.d.ts

@@ -420,3 +420,4 @@ export interface DraggableData {
     targetClosestEdge: Edge;
     direction: 1 | -1;
 }
+export type HandleTypes = 'hover' | 'selected';

package/dist/types-ts4.5/plugins/table/ui/DragHandle/HandleIconComponent.d.ts

@@ -2,6 +2,7 @@
 type HandleIconProps = {
     hasMergedCells: boolean;
     direction: 'row' | 'column';
+    forceDefaultHandle: boolean;
     isDragMenuOpen: boolean | undefined;
     isRowHandleHovered: boolean;
     isColumnHandleHovered: boolean;

package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts

@@ -5,6 +5,7 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
+    forceDefaultHandle?: boolean;
     previewWidth?: number;
     previewHeight?: number;
     direction?: TableDirection;
@@ -15,5 +16,5 @@ type DragHandleProps = {
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.4.15",
+  "version": "5.4.16",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/plugins/table/types.ts

@@ -462,3 +462,5 @@ export interface DraggableData {
   targetClosestEdge: Edge;
   direction: 1 | -1;
 }
+
+export type HandleTypes = 'hover' | 'selected';

package/src/plugins/table/ui/DragHandle/HandleIconComponent.tsx

@@ -9,6 +9,7 @@ import {
 type HandleIconProps = {
   hasMergedCells: boolean;
   direction: 'row' | 'column';
+  forceDefaultHandle: boolean;
   isDragMenuOpen: boolean | undefined;
   isRowHandleHovered: boolean;
   isColumnHandleHovered: boolean;
@@ -20,6 +21,7 @@ type HandleIconProps = {
 export const HandleIconComponent = (props: HandleIconProps) => {
   const {
     direction,
+    forceDefaultHandle,
     isDragMenuOpen,
     isRowHandleHovered,
     isColumnHandleHovered,
@@ -29,22 +31,21 @@ export const HandleIconComponent = (props: HandleIconProps) => {
     dragMenuDirection,
   } = props;
   const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
+
   const isCurrentRowOrColumnSelected =
     isCurrentRowSelected || isCurrentColumnSelected;
+
   const isDragMenuOpenOnCurrentRowOrColumn =
     isDragMenuOpen &&
     dragMenuDirection === direction &&
     isCurrentRowOrColumnSelected;
 
-  const showNormalHandle = hasMergedCells ? (
-    <DragHandleDisabledIcon />
-  ) : (
-    <DragHandleIcon />
-  );
-
-  // hoverred handle or open drag menu
-  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
-    return showNormalHandle;
+  if (
+    forceDefaultHandle ||
+    isHandleHovered ||
+    isDragMenuOpenOnCurrentRowOrColumn
+  ) {
+    return hasMergedCells ? <DragHandleDisabledIcon /> : <DragHandleIcon />;
   }
 
   return <MinimisedHandleIcon />;

package/src/plugins/table/ui/DragHandle/index.tsx

@@ -22,6 +22,7 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
   tableLocalId: string;
   indexes: number[];
+  forceDefaultHandle?: boolean;
   previewWidth?: number;
   previewHeight?: number;
   direction?: TableDirection;
@@ -38,6 +39,7 @@ export const DragHandle = ({
   direction = 'row',
   appearance = 'default',
   indexes,
+  forceDefaultHandle = false,
   previewWidth,
   previewHeight,
   onMouseOver,
@@ -63,6 +65,7 @@ export const DragHandle = ({
     isDragMenuOpen &&
     direction === 'row' &&
     hoveredCell.rowIndex === dragMenuIndex;
+
   const isCurrentColumnSelected =
     isDragMenuOpen &&
     direction === 'column' &&
@@ -83,6 +86,7 @@ export const DragHandle = ({
   const handleIconProps = {
     hasMergedCells,
     direction,
+    forceDefaultHandle,
     isDragMenuOpen,
     isRowHandleHovered,
     isColumnHandleHovered,

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
 import React, { useCallback, useMemo } from 'react';
 
@@ -13,7 +14,8 @@ import {
   selectColumn,
 } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
-import type { CellHoverMeta } from '../../../types';
+import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
+import type { CellHoverMeta, HandleTypes } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -66,14 +68,6 @@ export const ColumnControls = ({
   const colIndex = hoveredCell?.colIndex;
   const selectedColIndexes = getSelectedColumns(editorView.state.selection);
 
-  const gridColumnPosition = useMemo(() => {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedColIndexes.includes(colIndex!)) {
-      return `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`;
-    }
-    return `${colIndex! + 1} / span 1`;
-  }, [colIndex, selectedColIndexes]);
-
   const firstRow = tableRef.querySelector('tr');
   const hasHeaderRow = firstRow
     ? firstRow.getAttribute('data-header-row')
@@ -140,6 +134,120 @@ export const ColumnControls = ({
 
   const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
 
+  const generateHandleByType = useCallback(
+    (type: HandleTypes): JSX.Element | null => {
+      if (!hoveredCell) {
+        return null;
+      }
+      const { isDragMenuOpen, dragMenuIndex, dragMenuDirection } =
+        getDragDropPluginState(editorView.state);
+      const isHover = type === 'hover';
+
+      const isHoveredOnSelectedColumn =
+        isDragMenuOpen &&
+        dragMenuDirection === 'column' &&
+        dragMenuIndex === colIndex;
+
+      const showCondition = isHover
+        ? !isHoveredOnSelectedColumn && Number.isFinite(hoveredCell?.colIndex)
+        : isDragMenuOpen && dragMenuDirection === 'column';
+
+      if (!showCondition) {
+        return null;
+      }
+
+      const selectedColumnPosition = `${dragMenuIndex + 1} / span ${
+        selectedColIndexes.length
+      }`;
+
+      const gridColumnPosition = selectedColIndexes.includes(colIndex!)
+        ? `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`
+        : `${colIndex! + 1} / span 1`;
+
+      const selectedApprearance = isInDanger ? 'danger' : 'selected';
+      const hoveredAppearance = selectedColIndexes.includes(colIndex!)
+        ? isInDanger
+          ? 'danger'
+          : 'selected'
+        : 'default';
+
+      return (
+        showCondition && (
+          <div
+            key={type}
+            style={{
+              gridColumn: isHover ? gridColumnPosition : selectedColumnPosition,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              height: 'fit-content',
+              placeSelf: 'center',
+              zIndex: 99,
+            }}
+            data-column-control-index={hoveredCell.colIndex}
+            data-testid={
+              isHover
+                ? 'table-floating-column-control'
+                : 'table-floating-column-control-selected'
+            }
+          >
+            <DragHandle
+              direction="column"
+              tableLocalId={localId || ''}
+              indexes={isHover ? colIndexes : selectedColIndexes}
+              forceDefaultHandle={!isHover}
+              previewWidth={colWidths?.[colIndex!] ?? 48}
+              previewHeight={previewHeight}
+              appearance={isHover ? hoveredAppearance : selectedApprearance}
+              onClick={handleClick}
+              onMouseOver={handleMouseOver}
+              onMouseOut={handleMouseOut}
+              onMouseUp={handleMouseUp}
+              editorView={editorView}
+            />
+          </div>
+        )
+      );
+    },
+    [
+      colIndex,
+      previewHeight,
+      colWidths,
+      colIndexes,
+      editorView,
+      handleClick,
+      handleMouseOut,
+      handleMouseOver,
+      handleMouseUp,
+      hoveredCell,
+      isInDanger,
+      localId,
+      selectedColIndexes,
+    ],
+  );
+
+  const columnHandles = useCallback(
+    (hoveredCell: CellHoverMeta | undefined) => {
+      if (!hoveredCell) {
+        return null;
+      }
+
+      if (hoveredCell.colIndex === undefined) {
+        return generateHandleByType('selected');
+      }
+
+      const sortedHandles = [
+        generateHandleByType('hover'),
+        generateHandleByType('selected'),
+      ];
+
+      return hoveredCell.colIndex < selectedColIndexes[0]
+        ? sortedHandles
+        : sortedHandles.reverse();
+    },
+    [generateHandleByType, selectedColIndexes],
+  );
+
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS}
@@ -181,45 +289,7 @@ export const ColumnControls = ({
               />
             </div>
           ))}
-        {tableActive &&
-          !isResizing &&
-          isTableHovered &&
-          !!hoveredCell &&
-          Number.isFinite(hoveredCell.colIndex) && (
-            <div
-              style={{
-                gridColumn: gridColumnPosition,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: 'fit-content',
-                placeSelf: 'center',
-                zIndex: 99,
-              }}
-              data-column-control-index={hoveredCell.colIndex}
-              data-testid="table-floating-column-control"
-            >
-              <DragHandle
-                direction="column"
-                tableLocalId={localId || ''}
-                indexes={colIndexes}
-                previewWidth={colWidths?.[colIndex!] ?? 48}
-                previewHeight={previewHeight}
-                appearance={
-                  selectedColIndexes.includes(hoveredCell.colIndex!)
-                    ? isInDanger
-                      ? 'danger'
-                      : 'selected'
-                    : 'default'
-                }
-                onClick={handleClick}
-                onMouseOver={handleMouseOver}
-                onMouseOut={handleMouseOut}
-                onMouseUp={handleMouseUp}
-                editorView={editorView}
-              />
-            </div>
-          )}
+        {tableActive && !isResizing && columnHandles(hoveredCell)}
       </div>
     </div>
   );