@atlaskit/editor-plugin-table 5.5.2 → 5.5.3

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';
@@ -77,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,
@@ -110,6 +105,61 @@ 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 = function generateHandleByType(type) {
+    if (!hoveredCell) {
+      return null;
+    }
+    var isHover = type === 'hover';
+    var isRowsSelected = selectedRowIndexes.length > 0;
+    var showCondition = isHover ? isRowsSelected && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedRowIndexes.length < rowHeights.length && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
+    if (!showCondition) {
+      return null;
+    }
+    var gridRowPosition = "".concat(rowIndex + 1, " / span 1");
+
+    // if more than one row is selected, ensure the handle spans over the selected range
+    var selectedRowPosition = "".concat(selectedRowIndexes[0] + 1, " / span ").concat(selectedRowIndexes.length);
+    var hoveredAppearance = selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    var currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
+    var isSelecting = isRowsSelected && !isHover;
+    var indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
+    return showCondition && /*#__PURE__*/React.createElement("div", {
+      key: type,
+      style: {
+        gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
+        gridColumn: '2',
+        // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
+        width: '9px',
+        position: 'relative',
+        right: '-0.5px'
+      },
+      "data-testid": isHover ? 'table-floating-row-drag-handle-hover' : 'table-floating-row-drag-handle'
+    }, /*#__PURE__*/React.createElement(DragHandle, {
+      direction: "row",
+      tableLocalId: currentNodeLocalId,
+      indexes: indexes,
+      forceDefaultHandle: isHover ? false : isRowsSelected,
+      previewWidth: tableWidth,
+      previewHeight: rowHeights[rowIndex],
+      appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      onMouseUp: onMouseUp,
+      editorView: editorView,
+      canDrag: canDrag
+    }));
+  };
+  var rowHandles = function rowHandles(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();
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_ROW_CONTROLS,
     style: {
@@ -149,28 +199,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',
-      // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
-      width: '9px',
-      position: 'relative',
-      right: '-0.5px'
-    },
-    "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,
-    canDrag: canDrag
-  })));
+  }), tableActive && isTableHovered && !isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell));
 };
 export var DragControls = injectIntl(DragControlsComponent);

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

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

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

@@ -1,14 +1,9 @@
 /// <reference types="react" />
 type HandleIconProps = {
-    canDrag: boolean;
-    hasMergedCells: boolean;
-    direction: 'row' | 'column';
-    isDragMenuOpen: boolean | undefined;
+    forceDefaultHandle: boolean;
     isRowHandleHovered: boolean;
     isColumnHandleHovered: boolean;
-    isCurrentRowSelected: boolean;
-    isCurrentColumnSelected: boolean;
-    dragMenuDirection: 'row' | 'column' | undefined;
+    hasMergedCells: boolean;
 };
 export declare const HandleIconComponent: (props: HandleIconProps) => JSX.Element;
 export {};

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;
@@ -16,5 +17,5 @@ type DragHandleProps = {
     editorView: EditorView;
     canDrag?: boolean;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
 export {};

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

@@ -421,3 +421,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

@@ -1,14 +1,9 @@
 /// <reference types="react" />
 type HandleIconProps = {
-    canDrag: boolean;
-    hasMergedCells: boolean;
-    direction: 'row' | 'column';
-    isDragMenuOpen: boolean | undefined;
+    forceDefaultHandle: boolean;
     isRowHandleHovered: boolean;
     isColumnHandleHovered: boolean;
-    isCurrentRowSelected: boolean;
-    isCurrentColumnSelected: boolean;
-    dragMenuDirection: 'row' | 'column' | undefined;
+    hasMergedCells: boolean;
 };
 export declare const HandleIconComponent: (props: HandleIconProps) => JSX.Element;
 export {};

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;
@@ -16,5 +17,5 @@ type DragHandleProps = {
     editorView: EditorView;
     canDrag?: boolean;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -121,9 +121,6 @@
     "platform.editor.table-remove-update-resize-handles_djvab": {
       "type": "boolean"
     },
-    "platform.editor.table.overflow-state-analytics": {
-      "type": "boolean"
-    },
     "platform.editor.table.increase-shadow-visibility_lh89r": {
       "type": "boolean"
     },

package/src/plugins/table/index.tsx

@@ -303,13 +303,11 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         {
           name: 'tableOverflowAnalyticsPlugin',
           plugin: ({ dispatch, dispatchAnalyticsEvent }) =>
-            getBooleanFF('platform.editor.table.overflow-state-analytics')
-              ? createTableOverflowAnalyticsPlugin(
-                  dispatch,
-                  dispatchAnalyticsEvent,
-                  options?.tableResizingEnabled ?? false,
-                )
-              : undefined,
+            createTableOverflowAnalyticsPlugin(
+              dispatch,
+              dispatchAnalyticsEvent,
+              options?.tableResizingEnabled ?? false,
+            ),
         },
         {
           name: 'tableAnalyticsPlugin',

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -263,13 +263,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     eventDispatcher.on((stickyHeadersPluginKey as any).key, this.onStickyState);
 
-    if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
-      const initialIsOveflowing =
-        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+    const initialIsOveflowing =
+      this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+      this.state[ShadowEvent.SHOW_AFTER_SHADOW];
 
-      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
-    }
+    this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
   }
 
   componentWillUnmount() {
@@ -389,42 +387,37 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       this.handleTableResizingDebounced();
     }
 
-    if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
-      const newIsOverflowing =
-        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+    const newIsOverflowing =
+      this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+      this.state[ShadowEvent.SHOW_AFTER_SHADOW];
 
-      const prevIsOverflowing =
-        prevState[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-        prevState[ShadowEvent.SHOW_AFTER_SHADOW];
+    const prevIsOverflowing =
+      prevState[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+      prevState[ShadowEvent.SHOW_AFTER_SHADOW];
 
-      if (this.initialOverflowCaptureTimerId) {
-        clearTimeout(this.initialOverflowCaptureTimerId);
-      }
+    if (this.initialOverflowCaptureTimerId) {
+      clearTimeout(this.initialOverflowCaptureTimerId);
+    }
 
-      if (!this.isInitialOverflowSent) {
-        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
-      }
+    if (!this.isInitialOverflowSent) {
+      this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+    }
 
-      if (
-        this.isInitialOverflowSent &&
-        prevIsOverflowing !== newIsOverflowing
-      ) {
-        const {
-          dispatch,
-          state: { tr },
-        } = this.props.view;
-
-        dispatch(
-          tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
-            isOverflowing: newIsOverflowing,
-            wasOverflowing: prevIsOverflowing,
-            editorWidth: this.props.containerWidth.width || 0,
-            width: this.node.attrs.width || 0,
-            parentWidth: this.state?.parentWidth || 0,
-          }),
-        );
-      }
+    if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
+      const {
+        dispatch,
+        state: { tr },
+      } = this.props.view;
+
+      dispatch(
+        tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
+          isOverflowing: newIsOverflowing,
+          wasOverflowing: prevIsOverflowing,
+          editorWidth: this.props.containerWidth.width || 0,
+          width: this.node.attrs.width || 0,
+          parentWidth: this.state?.parentWidth || 0,
+        }),
+      );
     }
   }
 

package/src/plugins/table/pm-plugins/table-resizing/event-handlers.ts

@@ -55,13 +55,11 @@ export const handleMouseDown = (
   }
   event.preventDefault();
 
-  if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
-    const tr = view.state.tr;
-    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
-      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN,
-    });
-    dispatch(tr);
-  }
+  const tr = view.state.tr;
+  tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+    name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN,
+  });
+  dispatch(tr);
 
   const mouseDownTime = event.timeStamp;
   const cell = state.doc.nodeAt(localResizeHandlePos);

package/src/plugins/table/types.ts

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

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

@@ -7,48 +7,23 @@ import {
 } from '../icons';
 
 type HandleIconProps = {
-  canDrag: boolean;
-  hasMergedCells: boolean;
-  direction: 'row' | 'column';
-  isDragMenuOpen: boolean | undefined;
+  forceDefaultHandle: boolean;
   isRowHandleHovered: boolean;
   isColumnHandleHovered: boolean;
-  isCurrentRowSelected: boolean;
-  isCurrentColumnSelected: boolean;
-  dragMenuDirection: 'row' | 'column' | undefined;
+  hasMergedCells: boolean;
 };
 
 export const HandleIconComponent = (props: HandleIconProps) => {
   const {
-    canDrag,
-    direction,
-    isDragMenuOpen,
+    forceDefaultHandle,
     isRowHandleHovered,
     isColumnHandleHovered,
     hasMergedCells,
-    isCurrentRowSelected,
-    isCurrentColumnSelected,
-    dragMenuDirection,
   } = props;
   const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
-  const isCurrentRowOrColumnSelected =
-    isCurrentRowSelected || isCurrentColumnSelected;
-  const isDragMenuOpenOnCurrentRowOrColumn =
-    isDragMenuOpen &&
-    dragMenuDirection === direction &&
-    isCurrentRowOrColumnSelected;
-
-  const isDragPossible = canDrag && !hasMergedCells;
-
-  const showNormalHandle = !isDragPossible ? (
-    <DragHandleDisabledIcon />
-  ) : (
-    <DragHandleIcon />
-  );
 
-  // hoverred handle or open drag menu
-  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
-    return showNormalHandle;
+  if (isHandleHovered || forceDefaultHandle) {
+    return hasMergedCells ? <DragHandleDisabledIcon /> : <DragHandleIcon />;
   }
 
   return <MinimisedHandleIcon />;

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

@@ -9,7 +9,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 
-import { getPluginState as getDragDropPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
@@ -23,6 +22,7 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
   tableLocalId: string;
   indexes: number[];
+  forceDefaultHandle?: boolean;
   previewWidth?: number;
   previewHeight?: number;
   direction?: TableDirection;
@@ -40,6 +40,7 @@ export const DragHandle = ({
   direction = 'row',
   appearance = 'default',
   indexes,
+  forceDefaultHandle = false,
   previewWidth,
   previewHeight,
   onMouseOver,
@@ -53,24 +54,11 @@ export const DragHandle = ({
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
   );
-  const { hoveredColumns, hoveredRows, hoveredCell } = getPluginState(
-    editorView.state,
-  );
 
-  const { dragMenuDirection, isDragMenuOpen, dragMenuIndex } =
-    getDragDropPluginState(editorView.state);
+  const { hoveredColumns, hoveredRows } = getPluginState(editorView.state);
 
   const { selection } = editorView.state;
 
-  const isCurrentRowSelected =
-    isDragMenuOpen &&
-    direction === 'row' &&
-    hoveredCell.rowIndex === dragMenuIndex;
-  const isCurrentColumnSelected =
-    isDragMenuOpen &&
-    direction === 'column' &&
-    hoveredCell.colIndex === dragMenuIndex;
-
   const isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
   const isColumnHandleHovered =
     direction === 'column' && hoveredColumns.length > 0;
@@ -84,15 +72,10 @@ export const DragHandle = ({
   );
 
   const handleIconProps = {
-    canDrag,
-    hasMergedCells,
-    direction,
-    isDragMenuOpen,
-    isRowHandleHovered,
+    forceDefaultHandle,
     isColumnHandleHovered,
-    isCurrentRowSelected,
-    isCurrentColumnSelected,
-    dragMenuDirection,
+    isRowHandleHovered,
+    hasMergedCells,
   };
 
   useEffect(() => {

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';
 
@@ -14,7 +15,7 @@ import {
   selectColumn,
 } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
-import type { CellHoverMeta } from '../../../types';
+import type { CellHoverMeta, HandleTypes } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -69,14 +70,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')
@@ -143,6 +136,114 @@ export const ColumnControls = ({
 
   const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
 
+  const generateHandleByType = (type: HandleTypes): JSX.Element | null => {
+    if (!hoveredCell || !colWidths?.length) {
+      return null;
+    }
+    const isHover = type === 'hover';
+
+    const isColumnsSelected = selectedColIndexes.length > 0;
+
+    const showCondition = isHover
+      ? isColumnsSelected &&
+        !selectedColIndexes.includes(colIndex!) &&
+        Number.isFinite(hoveredCell?.colIndex)
+      : selectedColIndexes.length < colWidths?.length &&
+        Number.isFinite(hoveredCell?.colIndex);
+
+    if (!showCondition) {
+      return null;
+    }
+
+    const gridColumnPosition = `${colIndex! + 1} / span 1`;
+    const selectedColumnPosition = `${selectedColIndexes[0] + 1} / span ${
+      selectedColIndexes.length
+    }`;
+
+    const hoveredAppearance = selectedColIndexes.includes(colIndex!)
+      ? isInDanger
+        ? 'danger'
+        : 'selected'
+      : 'default';
+
+    const currentSelectionApprearance = isColumnsSelected
+      ? isInDanger
+        ? 'danger'
+        : 'selected'
+      : hoveredAppearance;
+
+    const istSelecting = isColumnsSelected && !isHover;
+
+    // this indexes are used to calculate the drag and drop source
+    const indexes = isColumnsSelected
+      ? isHover
+        ? colIndexes
+        : selectedColIndexes
+      : colIndexes;
+
+    return (
+      showCondition && (
+        <div
+          key={type}
+          style={{
+            gridColumn: istSelecting
+              ? selectedColumnPosition
+              : gridColumnPosition,
+            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-hover'
+              : 'table-floating-column-control'
+          }
+        >
+          <DragHandle
+            direction="column"
+            tableLocalId={localId || ''}
+            indexes={indexes}
+            forceDefaultHandle={isHover ? false : isColumnsSelected}
+            previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
+            previewHeight={previewHeight}
+            appearance={
+              istSelecting ? currentSelectionApprearance : hoveredAppearance
+            }
+            onClick={handleClick}
+            onMouseOver={handleMouseOver}
+            onMouseOut={handleMouseOut}
+            onMouseUp={handleMouseUp}
+            editorView={editorView}
+            canDrag={canDrag}
+          />
+        </div>
+      )
+    );
+  };
+
+  const columnHandles = (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();
+  };
+
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS}
@@ -185,45 +286,9 @@ 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!] ?? tableCellMinWidth}
-                previewHeight={previewHeight}
-                appearance={
-                  selectedColIndexes.includes(hoveredCell.colIndex!)
-                    ? isInDanger
-                      ? 'danger'
-                      : 'selected'
-                    : 'default'
-                }
-                onClick={handleClick}
-                onMouseOver={handleMouseOver}
-                onMouseOut={handleMouseOut}
-                onMouseUp={handleMouseUp}
-                editorView={editorView}
-                canDrag={canDrag}
-              />
-            </div>
-          )}
+          !isResizing &&
+          columnHandles(hoveredCell)}
       </div>
     </div>
   );

package/src/plugins/table/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -81,9 +81,9 @@ export default class NumberColumn extends Component<Props, any> {
     );
   }
 
-  private hoverRows = (index: number) =>
-    this.props.tableActive ? this.props.hoverRows([index]) : null;
-
+  private hoverRows = (index: number) => {
+    return this.props.tableActive ? this.props.hoverRows([index]) : null;
+  };
   private selectRow = (
     index: number,
     event: React.MouseEvent<HTMLDivElement, MouseEvent>,