@atlaskit/editor-plugin-table 5.4.18 → 5.4.20

package/src/__tests__/unit/pm-plugins/drag-and-drop/plugin.ts

@@ -0,0 +1,112 @@
+import type { DocBuilder } from '@atlaskit/editor-common/types';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import {
+  doc,
+  p,
+  table,
+  td,
+  tdCursor,
+  tdEmpty,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import tablePlugin from '../../../../plugins/table';
+import { DRAGGABLE_TABLE_NODE_SIZE_LIMIT } from '../../../../plugins/table/pm-plugins/drag-and-drop/consts';
+import { getPluginState } from '../../../../plugins/table/pm-plugins/drag-and-drop/plugin-factory';
+import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
+import type { PluginConfig } from '../../../../plugins/table/types';
+
+const tableOptions = {
+  allowNumberColumn: true,
+  allowHeaderRow: true,
+  allowHeaderColumn: true,
+  permittedLayouts: 'all',
+  allowColumnResizing: true,
+  stickyHeaders: true,
+} as PluginConfig;
+
+describe('drag and drop plugin', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const editor = (doc: DocBuilder) =>
+    createEditor({
+      doc,
+      attachTo: document.body,
+      preset: new Preset<LightEditorPlugin>()
+        .add([featureFlagsPlugin, {}])
+        .add([analyticsPlugin, {}])
+        .add(contentInsertionPlugin)
+        .add(widthPlugin)
+        .add(guidelinePlugin)
+        .add(selectionPlugin)
+        .add([
+          tablePlugin,
+          {
+            tableOptions,
+            dragAndDropEnabled: true,
+          },
+        ]),
+      pluginKey,
+    });
+
+  describe('when table is not selected', () => {
+    it('should reset table canDrag so by default tables are draggable', () => {
+      const { editorView } = editor(
+        doc(
+          p('{<>}Hello World'),
+          table()(tr(tdEmpty, tdEmpty), tr(tdEmpty, tdEmpty)),
+        ),
+      );
+
+      const { canDrag } = getPluginState(editorView.state);
+      expect(canDrag).toBe(true);
+    });
+  });
+
+  describe('when table is selected', () => {
+    it('should allow items to be draggable if table is within nodeSize limit', () => {
+      const { editorView } = editor(
+        // The nodeSize of an empty 2x2 is 22 so if i adjust the limit to be 1 under the max (ie. 23), then canDrag should be enabled.
+        doc(
+          table()(
+            tr(tdCursor, tdEmpty),
+            tr(
+              tdEmpty,
+              td()(p('-'.repeat(DRAGGABLE_TABLE_NODE_SIZE_LIMIT - 23))),
+            ),
+          ),
+        ),
+      );
+
+      const { canDrag } = getPluginState(editorView.state);
+      expect(canDrag).toBe(true);
+    });
+
+    it('should not allow items to be draggable if table is above nodeSize limit', () => {
+      const { editorView } = editor(
+        doc(
+          table()(
+            tr(tdCursor, tdEmpty),
+            tr(tdEmpty, td()(p('-'.repeat(DRAGGABLE_TABLE_NODE_SIZE_LIMIT)))),
+          ),
+        ),
+      );
+
+      const { canDrag } = getPluginState(editorView.state);
+      expect(canDrag).toBe(false);
+    });
+  });
+});

package/src/plugins/table/index.tsx

@@ -494,6 +494,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       direction={dragAndDropState?.dragMenuDirection}
                       index={dragAndDropState?.dragMenuIndex}
                       isOpen={!!dragAndDropState?.isDragMenuOpen && !isResizing}
+                      canDrag={dragAndDropState?.canDrag}
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
                     />
                   )}

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

@@ -97,6 +97,7 @@ export interface ComponentProps {
   isHeaderColumnEnabled: boolean;
   isMediaFullscreen?: boolean;
   isDragAndDropEnabled?: boolean;
+  canDrag?: boolean;
   tableActive: boolean;
   ordering: TableColumnOrdering;
   isResizing?: boolean;
@@ -470,6 +471,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       getPos,
       pluginInjectionApi,
       isDragAndDropEnabled,
+      canDrag,
     } = this.props;
     const { showBeforeShadow, showAfterShadow } = this.state;
     const node = getNode();
@@ -497,6 +499,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
         isHeaderRowEnabled={isHeaderRowEnabled}
         isDragAndDropEnabled={isDragAndDropEnabled}
+        canDrag={canDrag}
         ordering={ordering}
         isHeaderColumnEnabled={isHeaderColumnEnabled}
         hasHeaderRow={hasHeaderRow}
@@ -525,6 +528,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
         stickyHeader={this.state.stickyHeader}
         getEditorFeatureFlags={this.props.getEditorFeatureFlags}
+        canDrag={canDrag}
       />
     ) : null;
 

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

@@ -27,6 +27,7 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
+import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
@@ -206,6 +207,7 @@ export default class TableView extends ReactNodeView<Props> {
           tableWidthPluginState: tableWidthPluginKey,
           widthPlugin: fakePluginKey,
           mediaState: fakeMediaPluginKey,
+          tableDragAndDropState: tableDragAndDropPluginKey,
         }}
         editorView={props.view}
         render={(pluginStates) => {
@@ -215,6 +217,7 @@ export default class TableView extends ReactNodeView<Props> {
             pluginState,
             // containerWidth,
             mediaState,
+            tableDragAndDropState,
           } = pluginStates;
           const containerWidth = props.getEditorContainerWidth();
 
@@ -250,6 +253,7 @@ export default class TableView extends ReactNodeView<Props> {
               isHeaderRowEnabled={pluginState!.isHeaderRowEnabled}
               isHeaderColumnEnabled={pluginState!.isHeaderColumnEnabled}
               isDragAndDropEnabled={pluginState!.isDragAndDropEnabled}
+              canDrag={tableDragAndDropState?.canDrag ?? false}
               tableActive={tableActive}
               ordering={pluginState!.ordering as TableColumnOrdering}
               isResizing={isResizing}

package/src/plugins/table/pm-plugins/drag-and-drop/actions.ts

@@ -3,6 +3,7 @@ import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { TableDirection } from '../../types';
 
 import type { DropTargetType } from './consts';
+import type { DragAndDropPluginState } from './types';
 
 export interface DragAndDropAction<T, D> {
   type: T;
@@ -13,6 +14,7 @@ export const DragAndDropActionType = {
   SET_DROP_TARGET: 'SET_DROP_TARGET',
   CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET',
   TOGGLE_DRAG_MENU: 'TOGGLE_DRAG_MENU',
+  UPDATE: 'UPDATE',
 } as const;
 
 export type DragAndDropSetDropTargetAction = DragAndDropAction<
@@ -40,8 +42,14 @@ export type DragAndDropToggleDragMenuAction = DragAndDropAction<
   }
 >;
 
+export type DragAndDropUpdateAction = DragAndDropAction<
+  typeof DragAndDropActionType.UPDATE,
+  Partial<DragAndDropPluginState>
+>;
+
 // NOTE: This should be a Union of all possible actions
 export type DragAndDropPluginAction =
   | DragAndDropSetDropTargetAction
   | DragAndDropClearDropTargetAction
-  | DragAndDropToggleDragMenuAction;
+  | DragAndDropToggleDragMenuAction
+  | DragAndDropUpdateAction;

package/src/plugins/table/pm-plugins/drag-and-drop/consts.ts

@@ -6,3 +6,5 @@ export const DropTargetType = {
 
 export type DropTargetType =
   (typeof DropTargetType)[keyof typeof DropTargetType];
+
+export const DRAGGABLE_TABLE_NODE_SIZE_LIMIT = 20000;

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -25,9 +25,10 @@ import {
   setDropTarget,
   toggleDragMenu,
 } from './commands';
-import { DropTargetType } from './consts';
+import { DRAGGABLE_TABLE_NODE_SIZE_LIMIT, DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
+import type { DragAndDropPluginState } from './types';
 import { getDraggableDataFromEvent } from './utils/monitor';
 
 export const createPlugin = (
@@ -42,14 +43,23 @@ export const createPlugin = (
       isDragMenuOpen: false,
       dragMenuIndex: 0,
       isDragging: false,
+      canDrag: false,
     })),
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
-      const { targetCellPosition: oldTargetCellPosition } =
-        getTablePluginState(oldState);
-      const { targetCellPosition: newTargetCellPosition } =
-        getTablePluginState(newState);
-      const { isDragMenuOpen, dragMenuIndex } = getPluginState(newState);
+      const {
+        targetCellPosition: oldTargetCellPosition,
+        tableNode: oldTableNode,
+      } = getTablePluginState(oldState);
+      const {
+        targetCellPosition: newTargetCellPosition,
+        tableNode: newTableNode,
+      } = getTablePluginState(newState);
+      const { isDragMenuOpen, dragMenuIndex, canDrag } =
+        getPluginState(newState);
+
+      const stateChanges: Array<Partial<DragAndDropPluginState>> = [];
+      const tr = newState.tr;
 
       // What's happening here? you asked... In a nutshell;
       // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
@@ -57,15 +67,6 @@ export const createPlugin = (
       // to check if the new target cell position is pointed at a different cell than what the drag menu was opened on.
       if (oldTargetCellPosition !== newTargetCellPosition) {
         if (isDragMenuOpen) {
-          const tr = newState.tr;
-          const action = {
-            type: DragAndDropActionType.TOGGLE_DRAG_MENU,
-            data: {
-              isDragMenuOpen: false,
-              direction: undefined,
-            },
-          };
-
           if (newTargetCellPosition !== undefined) {
             const cells = getCellsInRow(dragMenuIndex)(tr.selection);
             // ED-20673 check if it is a cell selection,
@@ -78,13 +79,44 @@ export const createPlugin = (
               cells[0].node !== tr.doc.nodeAt(newTargetCellPosition) &&
               !isCellSelection
             ) {
-              return tr.setMeta(pluginKey, action);
+              stateChanges.push({
+                isDragMenuOpen: false,
+                dragMenuDirection: undefined,
+              });
             } // else NOP
           } else {
-            return tr.setMeta(pluginKey, action);
+            stateChanges.push({
+              isDragMenuOpen: false,
+              dragMenuDirection: undefined,
+            });
           }
         }
       }
+
+      if (oldTableNode?.nodeSize !== newTableNode?.nodeSize) {
+        const nextCanDrag =
+          (newTableNode?.nodeSize ?? 0) < DRAGGABLE_TABLE_NODE_SIZE_LIMIT;
+
+        if (canDrag !== nextCanDrag) {
+          stateChanges.push({
+            canDrag: nextCanDrag,
+          });
+        }
+      }
+
+      if (stateChanges.length) {
+        return tr
+          .setMeta(pluginKey, {
+            type: DragAndDropActionType.UPDATE,
+            data: {
+              ...stateChanges.reduce(
+                (state, cur) => ({ ...state, ...cur }),
+                {},
+              ),
+            },
+          })
+          .setMeta('addToHistory', false);
+      }
     },
     view: (editorView: EditorView) => {
       return {

package/src/plugins/table/pm-plugins/drag-and-drop/reducer.ts

@@ -31,6 +31,11 @@ export default (
         dragMenuDirection: action.data.direction,
         dragMenuIndex: action.data.index,
       };
+    case DragAndDropActionType.UPDATE:
+      return {
+        ...pluginState,
+        ...action.data,
+      };
     default:
       return pluginState;
   }

package/src/plugins/table/pm-plugins/drag-and-drop/types.ts

@@ -12,4 +12,5 @@ export interface DragAndDropPluginState {
   dragMenuDirection?: TableDirection;
   dragMenuIndex: number;
   isDragging: boolean;
+  canDrag: boolean;
 }

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

@@ -7,6 +7,7 @@ import {
 } from '../icons';
 
 type HandleIconProps = {
+  canDrag: boolean;
   hasMergedCells: boolean;
   direction: 'row' | 'column';
   isDragMenuOpen: boolean | undefined;
@@ -19,6 +20,7 @@ type HandleIconProps = {
 
 export const HandleIconComponent = (props: HandleIconProps) => {
   const {
+    canDrag,
     direction,
     isDragMenuOpen,
     isRowHandleHovered,
@@ -36,7 +38,9 @@ export const HandleIconComponent = (props: HandleIconProps) => {
     dragMenuDirection === direction &&
     isCurrentRowOrColumnSelected;
 
-  const showNormalHandle = hasMergedCells ? (
+  const isDragPossible = canDrag && !hasMergedCells;
+
+  const showNormalHandle = !isDragPossible ? (
     <DragHandleDisabledIcon />
   ) : (
     <DragHandleIcon />

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

@@ -32,6 +32,7 @@ type DragHandleProps = {
   onMouseOut?: MouseEventHandler;
   onMouseUp?: MouseEventHandler;
   editorView: EditorView;
+  canDrag?: boolean;
 };
 
 export const DragHandle = ({
@@ -46,6 +47,7 @@ export const DragHandle = ({
   onMouseUp,
   onClick,
   editorView,
+  canDrag = false,
 }: DragHandleProps) => {
   const dragHandleDivRef = useRef<HTMLButtonElement>(null);
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
@@ -82,6 +84,7 @@ export const DragHandle = ({
   );
 
   const handleIconProps = {
+    canDrag,
     hasMergedCells,
     direction,
     isDragMenuOpen,
@@ -99,7 +102,7 @@ export const DragHandle = ({
       return draggable({
         element: dragHandleDivRefCurrent,
         canDrag: () => {
-          return !hasMergedCells;
+          return canDrag && !hasMergedCells;
         },
         getInitialData() {
           return {
@@ -112,6 +115,15 @@ export const DragHandle = ({
           setCustomNativeDragPreview({
             getOffset: ({ container }) => {
               const rect = container.getBoundingClientRect();
+              if (browser.safari) {
+                // See: https://product-fabric.atlassian.net/browse/ED-21442
+                // We need to ensure that the preview is not overlaying screen content when the snapshot is taken, otherwise
+                // safari will composite the screen text elements into the bitmap snapshot. The container is a wrapper which is already
+                // positioned fixed at top/left 0.
+                // IMPORTANT: we must not exceed more then the width of the container off-screen otherwise not preview will
+                // be generated.
+                container.style.left = `-${rect.width - 0.0001}px`;
+              }
               if (direction === 'row') {
                 return { x: 16, y: 16 };
               } else {
@@ -133,6 +145,7 @@ export const DragHandle = ({
     indexes,
     editorView.state.selection,
     hasMergedCells,
+    canDrag,
   ]);
 
   return (
@@ -142,7 +155,7 @@ export const DragHandle = ({
           ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
           appearance,
           {
-            [ClassName.DRAG_HANDLE_DISABLED]: hasMergedCells,
+            [ClassName.DRAG_HANDLE_DISABLED]: !canDrag || hasMergedCells,
           },
         )}
         ref={dragHandleDivRef}

package/src/plugins/table/ui/FloatingDragMenu/DragMenu.tsx

@@ -49,6 +49,7 @@ type DragMenuProps = {
   scrollableElement?: HTMLElement;
   pluginConfig?: PluginConfig;
   getEditorContainerWidth: GetEditorContainerWidth;
+  canDrag?: boolean;
 };
 
 const groupedDragMenuConfig = [
@@ -119,6 +120,7 @@ export const DragMenu = ({
   scrollableElement,
   targetCellPosition,
   getEditorContainerWidth,
+  canDrag,
 }: DragMenuProps) => {
   const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
 
@@ -137,7 +139,7 @@ export const DragMenu = ({
   const dragMenuConfig = getDragMenuConfig(
     direction,
     getEditorContainerWidth,
-    shouldMoveDisabled,
+    !!canDrag && !shouldMoveDisabled,
     tableMap,
     index,
     targetCellPosition,

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

@@ -25,6 +25,7 @@ export interface Props {
   index?: number;
   targetCellPosition?: number;
   getEditorContainerWidth: GetEditorContainerWidth;
+  canDrag?: boolean;
 }
 
 const FloatingDragMenu = ({
@@ -39,6 +40,7 @@ const FloatingDragMenu = ({
   index,
   targetCellPosition,
   getEditorContainerWidth,
+  canDrag,
 }: Props) => {
   if (
     !isOpen ||
@@ -86,6 +88,7 @@ const FloatingDragMenu = ({
         index={index}
         targetCellPosition={targetCellPosition}
         getEditorContainerWidth={getEditorContainerWidth}
+        canDrag={canDrag}
       />
     </Popup>
   );

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

@@ -1,6 +1,7 @@
 import type { MouseEvent } from 'react';
 import React, { useCallback, useMemo } from 'react';
 
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
@@ -31,6 +32,7 @@ export interface ColumnControlsProps {
   colWidths?: (number | undefined)[];
   hasHeaderColumn?: boolean;
   isTableHovered?: boolean;
+  canDrag?: boolean;
 }
 
 const getSelectedColumns = (selection: Selection) => {
@@ -57,6 +59,7 @@ export const ColumnControls = ({
   colWidths,
   hasHeaderColumn,
   isTableHovered,
+  canDrag,
 }: ColumnControlsProps) => {
   const widths =
     colWidths?.map((width) => (width ? `${width - 1}px` : '0px')).join(' ') ??
@@ -203,7 +206,7 @@ export const ColumnControls = ({
                 direction="column"
                 tableLocalId={localId || ''}
                 indexes={colIndexes}
-                previewWidth={colWidths?.[colIndex!] ?? 48}
+                previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
                 previewHeight={previewHeight}
                 appearance={
                   selectedColIndexes.includes(hoveredCell.colIndex!)
@@ -217,6 +220,7 @@ export const ColumnControls = ({
                 onMouseOut={handleMouseOut}
                 onMouseUp={handleMouseUp}
                 editorView={editorView}
+                canDrag={canDrag}
               />
             </div>
           )}

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

@@ -35,6 +35,7 @@ export interface Props {
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
   isTableHovered?: boolean;
+  canDrag?: boolean;
 }
 
 export const TableFloatingColumnControls: React.FC<Props> = ({
@@ -49,6 +50,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   selection,
   isInDanger,
   isTableHovered,
+  canDrag,
 }) => {
   const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
     { width: 0, height: 0 },
@@ -139,6 +141,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         rowHeights={rowHeights}
         colWidths={colWidths}
         hasHeaderColumn={hasHeaderColumn}
+        canDrag={canDrag}
       />
       {hasDropTargets && (
         <ColumnDropTargets

package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -42,6 +42,7 @@ type DragControlsProps = {
   isInDanger?: boolean;
   isResizing?: boolean;
   isTableHovered?: boolean;
+  canDrag?: boolean;
   hoverRows: (rows: number[], danger?: boolean) => void;
   selectRow: (row: number, expand: boolean) => void;
   updateCellHoverLocation: (rowIndex: number) => void;
@@ -68,6 +69,7 @@ const DragControlsComponent = ({
   isInDanger,
   isResizing,
   isTableHovered,
+  canDrag,
   hoverRows,
   selectRow,
   updateCellHoverLocation,
@@ -188,7 +190,7 @@ const DragControlsComponent = ({
               data-end-index={endIndex}
               className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER}
               contentEditable={false}
-              key={index}
+              key={`insert-dot-${index}`}
             >
               {/* TODO: Disabling first column insert button https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50 */}
               {/* {!hasHeaderRow && index === 0 && (
@@ -204,7 +206,7 @@ const DragControlsComponent = ({
             </div>
             {isDragging && (
               <RowDropTarget
-                key={index}
+                key={`drop-target-${index}`}
                 index={index}
                 localId={currentNodeLocalId}
                 style={{
@@ -248,6 +250,7 @@ const DragControlsComponent = ({
             onMouseOut={handleMouseOut}
             onMouseUp={onMouseUp}
             editorView={editorView}
+            canDrag={canDrag}
           />
         </div>
       )}

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

@@ -29,6 +29,7 @@ export interface Props {
   isHeaderColumnEnabled?: boolean;
   isNumberColumnEnabled?: boolean;
   isDragAndDropEnabled?: boolean;
+  canDrag?: boolean;
   hasHeaderRow?: boolean;
   headerRowHeight?: number;
   hoveredRows?: number[];
@@ -106,6 +107,7 @@ export default class TableFloatingControls extends Component<Props, State> {
       stickyHeader,
       hoveredCell,
       isTableHovered,
+      canDrag,
     } = this.props;
     return (
       this.state.tableWrapperWidth !== nextState.tableWrapperWidth ||
@@ -123,7 +125,8 @@ export default class TableFloatingControls extends Component<Props, State> {
       headerRowHeight !== nextProps.headerRowHeight ||
       stickyHeader !== nextProps.stickyHeader ||
       hoveredCell !== nextProps.hoveredCell ||
-      isTableHovered !== nextProps.isTableHovered
+      isTableHovered !== nextProps.isTableHovered ||
+      canDrag !== nextProps.canDrag
     );
   }
 
@@ -150,6 +153,7 @@ export default class TableFloatingControls extends Component<Props, State> {
       isDragAndDropEnabled,
       hoveredCell,
       isTableHovered,
+      canDrag,
     } = this.props;
 
     if (!tableRef) {
@@ -208,6 +212,7 @@ export default class TableFloatingControls extends Component<Props, State> {
                     hoverRows={this.hoverRows}
                     selectRow={this.selectRow}
                     updateCellHoverLocation={this.updateCellHoverLocation}
+                    canDrag={canDrag}
                   />
                 </>
               ) : (