@atlaskit/editor-plugin-table 5.3.13 → 5.3.14

package/dist/esm/plugins/table/utils/dom.js

@@ -20,9 +20,6 @@ export var isColumnControlsDecorations = function isColumnControlsDecorations(no
 export var isRowControlsButton = function isRowControlsButton(node) {
   return containsClassName(node, ClassName.ROW_CONTROLS_BUTTON) || containsClassName(node, ClassName.NUMBERED_COLUMN_BUTTON);
 };
-export var isRowDragControlsButton = function isRowDragControlsButton(node) {
-  return containsClassName(node, ClassName.ROW_CONTROLS_WITH_DRAG) || closestElement(node, ".".concat(ClassName.ROW_CONTROLS_WITH_DRAG));
-};
 export var isResizeHandleDecoration = function isResizeHandleDecoration(node) {
   return containsClassName(node, ClassName.RESIZE_HANDLE_DECORATION);
 };
@@ -33,6 +30,17 @@ export var isTableContainerOrWrapper = function isTableContainerOrWrapper(node)
   return containsClassName(node, ClassName.TABLE_CONTAINER) || containsClassName(node, ClassName.TABLE_NODE_WRAPPER);
 };
 
+/** drag-and-drop classes */
+export var isRowDragControlsButton = function isRowDragControlsButton(node) {
+  return containsClassName(node, ClassName.DRAG_ROW_CONTROLS) || closestElement(node, ".".concat(ClassName.DRAG_ROW_CONTROLS));
+};
+export var isDragRowFloatingInsertDot = function isDragRowFloatingInsertDot(node) {
+  return containsClassName(node, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER);
+};
+export var isDragColumnFloatingInsertDot = function isDragColumnFloatingInsertDot(node) {
+  return containsClassName(node, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
+};
+
 /*
  * This function returns which side of a given element the mouse cursor is,
  * using as a base the half of the width by default, for example:

package/dist/esm/plugins/table/utils/index.js

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';

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

@@ -269,6 +269,9 @@ export declare const TableCssClassName: {
     CONTROLS_INSERT_LINE: string;
     CONTROLS_BUTTON_OVERLAY: string;
     LAYOUT_BUTTON: string;
+    DRAG_CONTROLS_INSERT_BUTTON: string;
+    DRAG_CONTROLS_INSERT_BUTTON_INNER: string;
+    DRAG_CONTROLS_INSERT_BUTTON_WRAP: string;
     CONTROLS_INSERT_MARKER: string;
     CONTROLS_INSERT_COLUMN: string;
     CONTROLS_INSERT_ROW: string;
@@ -281,8 +284,12 @@ export declare const TableCssClassName: {
     CORNER_CONTROLS_INSERT_COLUMN_MARKER: string;
     CONTROLS_CORNER_BUTTON: string;
     /** Controls with drag handle */
-    COLUMN_CONTROLS_WITH_DRAG: string;
-    ROW_CONTROLS_WITH_DRAG: string;
+    DRAG_ROW_CONTROLS: string;
+    DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: string;
+    DRAG_ROW_FLOATING_INSERT_DOT: string;
+    DRAG_COLUMN_CONTROLS: string;
+    DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: string;
+    DRAG_COLUMN_FLOATING_INSERT_DOT: string;
     DRAG_HANDLE_BUTTON_CONTAINER: string;
     /** Other classes */
     NUMBERED_COLUMN: string;

package/dist/types/plugins/table/ui/FloatingInsertButton/InsertButton.d.ts

@@ -3,11 +3,15 @@ import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { TableDirection } from '../../types';
 export interface ButtonProps {
-    direction: TableDirection;
+    type: TableDirection;
     tableRef: HTMLElement;
     onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
     hasStickyHeaders: boolean;
 }
+export declare const InsertButtonForDragAndDrop: ({ onMouseDown, tableRef, type, intl: { formatMessage }, hasStickyHeaders, }: ButtonProps & WrappedComponentProps) => JSX.Element;
+export declare const DragAndDropInsertButton: React.FC<import("react-intl-next").WithIntlProps<ButtonProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<ButtonProps & WrappedComponentProps<"intl">>;
+};
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ButtonProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<ButtonProps & WrappedComponentProps<"intl">>;
 };

package/dist/types/plugins/table/ui/FloatingInsertButton/getPopupOptions.d.ts

@@ -1,4 +1,4 @@
 import type { PopupProps } from '@atlaskit/editor-common/ui';
 import type { TableDirection } from '../../types';
-declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
+declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, isDragAndDropEnabled: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
 export default getPopupOptions;

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

@@ -13,6 +13,7 @@ export interface Props {
     insertRowButtonIndex?: number;
     isHeaderColumnEnabled?: boolean;
     isHeaderRowEnabled?: boolean;
+    isDragAndDropEnabled?: boolean;
     mountPoint?: HTMLElement;
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;

package/dist/types/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -12,6 +12,7 @@ export interface ColumnControlsProps {
     localId?: string;
     rowHeights?: number[];
     colWidths?: (number | undefined)[];
+    hasHeaderColumn?: boolean;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -10,6 +10,8 @@ type DragControlsProps = {
     tableActive?: boolean;
     hoveredCell?: CellHoverMeta;
     isInDanger?: boolean;
+    isResizing?: boolean;
+    hasHeaderRow?: boolean;
     hoverRows: (rows: number[], danger?: boolean) => void;
     selectRow: (row: number, expand: boolean) => void;
     updateCellHoverLocation: (rowIndex: number) => void;

package/dist/types/plugins/table/ui/ui-styles.d.ts

@@ -3,6 +3,7 @@ export declare const InsertMarker: (props: ThemeProps, cssString?: string) => im
 export declare const HeaderButton: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const dragInsertButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;

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

@@ -5,10 +5,13 @@ export declare const isInsertRowButton: (node: HTMLElement | null) => boolean |
 export declare const getColumnOrRowIndex: (target: HTMLElement) => [number, number];
 export declare const isColumnControlsDecorations: (node: HTMLElement | null) => boolean;
 export declare const isRowControlsButton: (node: HTMLElement | null) => boolean;
-export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
 export declare const isResizeHandleDecoration: (node: HTMLElement | null) => boolean;
 export declare const isTableControlsButton: (node: HTMLElement | null) => boolean;
 export declare const isTableContainerOrWrapper: (node: HTMLElement | null) => boolean;
+/** drag-and-drop classes */
+export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
+export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
+export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number) => 'left' | 'right' | null;
 export declare const getMousePositionVerticalRelativeByElement: (mouseEvent: MouseEvent) => 'top' | 'bottom' | null;
 export declare const updateResizeHandles: (tableRef?: HTMLElement) => void;

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

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';

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

@@ -269,6 +269,9 @@ export declare const TableCssClassName: {
     CONTROLS_INSERT_LINE: string;
     CONTROLS_BUTTON_OVERLAY: string;
     LAYOUT_BUTTON: string;
+    DRAG_CONTROLS_INSERT_BUTTON: string;
+    DRAG_CONTROLS_INSERT_BUTTON_INNER: string;
+    DRAG_CONTROLS_INSERT_BUTTON_WRAP: string;
     CONTROLS_INSERT_MARKER: string;
     CONTROLS_INSERT_COLUMN: string;
     CONTROLS_INSERT_ROW: string;
@@ -281,8 +284,12 @@ export declare const TableCssClassName: {
     CORNER_CONTROLS_INSERT_COLUMN_MARKER: string;
     CONTROLS_CORNER_BUTTON: string;
     /** Controls with drag handle */
-    COLUMN_CONTROLS_WITH_DRAG: string;
-    ROW_CONTROLS_WITH_DRAG: string;
+    DRAG_ROW_CONTROLS: string;
+    DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: string;
+    DRAG_ROW_FLOATING_INSERT_DOT: string;
+    DRAG_COLUMN_CONTROLS: string;
+    DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: string;
+    DRAG_COLUMN_FLOATING_INSERT_DOT: string;
     DRAG_HANDLE_BUTTON_CONTAINER: string;
     /** Other classes */
     NUMBERED_COLUMN: string;

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

@@ -3,11 +3,15 @@ import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { TableDirection } from '../../types';
 export interface ButtonProps {
-    direction: TableDirection;
+    type: TableDirection;
     tableRef: HTMLElement;
     onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
     hasStickyHeaders: boolean;
 }
+export declare const InsertButtonForDragAndDrop: ({ onMouseDown, tableRef, type, intl: { formatMessage }, hasStickyHeaders, }: ButtonProps & WrappedComponentProps) => JSX.Element;
+export declare const DragAndDropInsertButton: React.FC<import("react-intl-next").WithIntlProps<ButtonProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<ButtonProps & WrappedComponentProps<"intl">>;
+};
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ButtonProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<ButtonProps & WrappedComponentProps<"intl">>;
 };

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

@@ -1,4 +1,4 @@
 import type { PopupProps } from '@atlaskit/editor-common/ui';
 import type { TableDirection } from '../../types';
-declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
+declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, isDragAndDropEnabled: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
 export default getPopupOptions;

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

@@ -13,6 +13,7 @@ export interface Props {
     insertRowButtonIndex?: number;
     isHeaderColumnEnabled?: boolean;
     isHeaderRowEnabled?: boolean;
+    isDragAndDropEnabled?: boolean;
     mountPoint?: HTMLElement;
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;

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

@@ -12,6 +12,7 @@ export interface ColumnControlsProps {
     localId?: string;
     rowHeights?: number[];
     colWidths?: (number | undefined)[];
+    hasHeaderColumn?: boolean;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -10,6 +10,8 @@ type DragControlsProps = {
     tableActive?: boolean;
     hoveredCell?: CellHoverMeta;
     isInDanger?: boolean;
+    isResizing?: boolean;
+    hasHeaderRow?: boolean;
     hoverRows: (rows: number[], danger?: boolean) => void;
     selectRow: (row: number, expand: boolean) => void;
     updateCellHoverLocation: (rowIndex: number) => void;

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

@@ -3,6 +3,7 @@ export declare const InsertMarker: (props: ThemeProps, cssString?: string) => im
 export declare const HeaderButton: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const dragInsertButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;

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

@@ -8,10 +8,13 @@ export declare const getColumnOrRowIndex: (target: HTMLElement) => [
 ];
 export declare const isColumnControlsDecorations: (node: HTMLElement | null) => boolean;
 export declare const isRowControlsButton: (node: HTMLElement | null) => boolean;
-export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
 export declare const isResizeHandleDecoration: (node: HTMLElement | null) => boolean;
 export declare const isTableControlsButton: (node: HTMLElement | null) => boolean;
 export declare const isTableContainerOrWrapper: (node: HTMLElement | null) => boolean;
+/** drag-and-drop classes */
+export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
+export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
+export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number) => 'left' | 'right' | null;
 export declare const getMousePositionVerticalRelativeByElement: (mouseEvent: MouseEvent) => 'top' | 'bottom' | null;
 export declare const updateResizeHandles: (tableRef?: HTMLElement) => void;

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

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.13",
+  "version": "5.3.14",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,6 +40,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^0.23.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.8",
+    "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.4",
     "@atlaskit/primitives": "^1.7.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",

package/src/__tests__/unit/pm-plugins/decorations/plugin.ts

@@ -23,7 +23,6 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import tablePlugin from '../../../../plugins/table';
 import { selectColumn } from '../../../../plugins/table/commands';
@@ -55,141 +54,27 @@ describe('decorations plugin', () => {
   // ED-8457
   describe('when there is a selection pointer set', () => {
     describe('should remove the column selected decorations', () => {
-      ffTest(
-        'platform.editor.table.drag-and-drop',
-        () => {
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-
-          selectColumn(1)(editorView.state, editorView.dispatch);
-
-          const { tr: transaction } = editorView.state;
-
-          transaction.setMeta('pointer', true);
-          transaction.setSelection(Selection.atStart(transaction.doc));
-          editorView.dispatch(transaction);
-
-          const decorationSet = getDecorations(editorView.state);
-
-          const columnSelectedDecorations = decorationSet.find(
-            undefined,
-            undefined,
-            (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
-          );
-
-          expect(columnSelectedDecorations).toHaveLength(0);
-        },
-        () => {
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-
-          selectColumn(1)(editorView.state, editorView.dispatch);
-
-          const { tr: transaction } = editorView.state;
-
-          transaction.setMeta('pointer', true);
-          transaction.setSelection(Selection.atStart(transaction.doc));
-          editorView.dispatch(transaction);
-
-          const decorationSet = getDecorations(editorView.state);
-
-          const columnSelectedDecorations = decorationSet.find(
-            undefined,
-            undefined,
-            (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
-          );
-
-          expect(columnSelectedDecorations).toHaveLength(0);
-        },
+      const { editorView } = editor(
+        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
       );
-    });
-  });
 
-  describe('when the hovered cell state changes', () => {
-    describe('should not add column control decorations', () => {
-      ffTest(
-        'platform.editor.table.drag-and-drop',
-        () => {
-          const pluginState = DecorationSet.empty;
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
+      selectColumn(1)(editorView.state, editorView.dispatch);
 
-          const transaction = editorView.state.tr.setMeta(pluginKey, {
-            type: 'HOVER_CELL',
-            data: {
-              colIndex: 0,
-              rowIndex: 0,
-            },
-          });
-
-          const oldState = handleDocOrSelectionChanged(
-            transaction,
-            pluginState,
-            editorView.state,
-            editorView.state,
-          );
-
-          editorView.dispatch(transaction);
-          const newState = handleDocOrSelectionChanged(
-            transaction,
-            oldState,
-            editorView.state,
-            editorView.state,
-          );
+      const { tr: transaction } = editorView.state;
 
-          const columnDecorations = newState.find(
-            undefined,
-            undefined,
-            (spec) =>
-              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
-              -1,
-          );
+      transaction.setMeta('pointer', true);
+      transaction.setSelection(Selection.atStart(transaction.doc));
+      editorView.dispatch(transaction);
 
-          expect(columnDecorations).toHaveLength(0);
-        },
-        () => {
-          const pluginState = DecorationSet.empty;
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-
-          const transaction = editorView.state.tr.setMeta(pluginKey, {
-            type: 'HOVER_CELL',
-            data: {
-              colIndex: 0,
-              rowIndex: 0,
-            },
-          });
+      const decorationSet = getDecorations(editorView.state);
 
-          const oldState = handleDocOrSelectionChanged(
-            transaction,
-            pluginState,
-            editorView.state,
-            editorView.state,
-          );
-
-          editorView.dispatch(transaction);
-          const newState = handleDocOrSelectionChanged(
-            transaction,
-            oldState,
-            editorView.state,
-            editorView.state,
-          );
-
-          const columnDecorations = newState.find(
-            undefined,
-            undefined,
-            (spec) =>
-              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
-              -1,
-          );
-
-          expect(columnDecorations).toHaveLength(2);
-        },
+      const columnSelectedDecorations = decorationSet.find(
+        undefined,
+        undefined,
+        (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
       );
+
+      expect(columnSelectedDecorations).toHaveLength(0);
     });
   });
 
@@ -220,75 +105,36 @@ describe('decorations plugin', () => {
 
   describe('when the table changed', () => {
     describe('should not re-create the column controls decorations', () => {
-      ffTest(
-        'platform.editor.table.drag-and-drop',
-        () => {
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-          const { state } = editorView;
-
-          const nextPluginState = handleDocOrSelectionChanged(
-            editorView.state.tr,
-            DecorationSet.empty,
-            editorView.state,
-            state,
-          );
-
-          const { tr: transaction } = state;
-          editorView.dispatch(addColumnAt(2)(transaction));
-
-          const newState = handleDocOrSelectionChanged(
-            transaction,
-            nextPluginState,
-            editorView.state,
-            state,
-          );
-          const expectedDecorationSet = newState;
-          const decorations = expectedDecorationSet.find(
-            undefined,
-            undefined,
-            (spec) =>
-              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
-              -1,
-          );
-
-          expect(decorations).toHaveLength(0);
-        },
-        () => {
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-          const { state } = editorView;
-
-          const nextPluginState = handleDocOrSelectionChanged(
-            editorView.state.tr,
-            DecorationSet.empty,
-            editorView.state,
-            state,
-          );
+      const { editorView } = editor(
+        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+      );
+      const { state } = editorView;
 
-          const { tr: transaction } = state;
-          editorView.dispatch(addColumnAt(2)(transaction));
+      const nextPluginState = handleDocOrSelectionChanged(
+        editorView.state.tr,
+        DecorationSet.empty,
+        editorView.state,
+        state,
+      );
 
-          const newState = handleDocOrSelectionChanged(
-            transaction,
-            nextPluginState,
-            editorView.state,
-            state,
-          );
-          const expectedDecorationSet = newState;
-          const decorations = expectedDecorationSet.find(
-            undefined,
-            undefined,
-            (spec) =>
-              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
-              -1,
-          );
+      const { tr: transaction } = state;
+      editorView.dispatch(addColumnAt(2)(transaction));
 
-          expect(decorations).toHaveLength(3);
-        },
+      const newState = handleDocOrSelectionChanged(
+        transaction,
+        nextPluginState,
+        editorView.state,
+        state,
       );
+      const expectedDecorationSet = newState;
+      const decorations = expectedDecorationSet.find(
+        undefined,
+        undefined,
+        (spec) =>
+          spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) > -1,
+      );
+
+      expect(decorations).toHaveLength(3);
     });
   });
 

package/src/__tests__/unit/ui/RowDragControls.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl-next';
 
 import type { DocBuilder } from '@atlaskit/editor-common/types';
@@ -29,7 +29,7 @@ import {
 
 import tablePlugin from '../../../plugins/table-plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import { TableCssClassName as ClassName } from '../../../plugins/table/types';
+// import { TableCssClassName as ClassName } from '../../../plugins/table/types';
 import { DragControls } from '../../../plugins/table/ui/TableFloatingControls/RowControls';
 
 describe('NumberColumn', () => {
@@ -63,7 +63,7 @@ describe('NumberColumn', () => {
     );
     const ref = editorView.dom.querySelector('table');
 
-    const { container } = render(
+    render(
       <IntlProvider locale="en">
         <DragControls
           tableRef={ref!}
@@ -77,11 +77,9 @@ describe('NumberColumn', () => {
       </IntlProvider>,
     );
 
-    const dragHandleContainer = container.querySelector(
-      `.${ClassName.ROW_CONTROLS_WITH_DRAG}`,
-    );
+    const dragHandle = screen.getAllByTestId('table-floating-row-drag-handle');
 
-    expect(dragHandleContainer?.children.length).toBe(1);
+    expect(dragHandle.length).toBe(1);
   });
 
   it('should not render any drag handle containers if hoveredCell is undefined', () => {
@@ -98,7 +96,7 @@ describe('NumberColumn', () => {
     );
     const ref = editorView.dom.querySelector('table');
 
-    const { container } = render(
+    render(
       <IntlProvider locale="en">
         <DragControls
           tableRef={ref!}
@@ -115,10 +113,10 @@ describe('NumberColumn', () => {
       </IntlProvider>,
     );
 
-    const dragHandleContainer = container.querySelector(
-      `.${ClassName.ROW_CONTROLS_WITH_DRAG}`,
+    const dragHandle = screen.queryAllByTestId(
+      'table-floating-row-drag-handle',
     );
 
-    expect(dragHandleContainer?.children.length).toBe(0);
+    expect(dragHandle.length).toBe(0);
   });
 });