@atlaskit/editor-plugin-table 5.3.6 → 5.3.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.7
+
+### Patch Changes
+
+- [#41918](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41918) [`a82ee707d1d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a82ee707d1d) - [ux] ED-20495: Added table row drag preview
+
 ## 5.3.6
 
 ### Patch Changes

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

@@ -1,14 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragHandle = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
+var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("../../types");
+var _DragPreview = require("../DragPreview");
 var _DragHandleIcon = require("../icons/DragHandleIcon");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -32,11 +37,17 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _ref$state = _ref.state,
     state = _ref$state === void 0 ? 'default' : _ref$state,
     indexes = _ref.indexes,
+    previewWidth = _ref.previewWidth,
+    previewHeight = _ref.previewHeight,
     onClick = _ref.onClick,
     onMouseOver = _ref.onMouseOver,
     onMouseOut = _ref.onMouseOut;
   var dragHandleDivRef = (0, _react.useRef)(null);
   var iconProps = mapStateToProps(state);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    previewContainer = _useState2[0],
+    setPreviewContainer = _useState2[1];
   (0, _react.useEffect)(function () {
     var dragHandleDivRefCurrent = dragHandleDivRef.current;
     if (dragHandleDivRefCurrent) {
@@ -48,15 +59,50 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
             type: "table-".concat(direction),
             indexes: indexes
           };
+        },
+        onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+          var nativeSetDragImage = _ref2.nativeSetDragImage;
+          (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
+            getOffset: function getOffset(_ref3) {
+              var container = _ref3.container;
+              var rect = container.getBoundingClientRect();
+              if (direction === 'row') {
+                return {
+                  x: 16,
+                  y: 16
+                };
+              } else {
+                return {
+                  x: rect.width / 2 + 16,
+                  y: 16
+                };
+              }
+            },
+            render: function render(_ref4) {
+              var container = _ref4.container;
+              setPreviewContainer(container);
+              return function () {
+                return setPreviewContainer(null);
+              };
+            },
+            nativeSetDragImage: nativeSetDragImage
+          });
         }
       });
     }
   }, [tableLocalId, direction, indexes]);
   return /*#__PURE__*/_react.default.createElement("button", {
     className: _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER,
+    ref: dragHandleDivRef,
     style: {
+      backgroundColor: "var(--ds-surface, white)",
+      borderRadius: '4px',
+      border: "2px solid ".concat("var(--ds-surface, white)"),
       transform: direction === 'column' ? 'none' : 'rotate(90deg)'
-    },
-    ref: dragHandleDivRef
-  }, /*#__PURE__*/_react.default.createElement(_DragHandleIcon.DragHandleIcon, iconProps));
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DragHandleIcon.DragHandleIcon, iconProps), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_DragPreview.DragPreview, {
+    direction: direction,
+    width: previewWidth,
+    height: previewHeight
+  }), previewContainer));
 };

package/dist/cjs/plugins/table/ui/DragPreview/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DragPreview = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _primitives = require("@atlaskit/primitives");
-var _DragInMotionIcon = require("../Icons/DragInMotionIcon");
+var _DragInMotionIcon = require("../icons/DragInMotionIcon");
 var boxStyles = (0, _primitives.xcss)({
   borderColor: 'color.border.focused',
   borderStyle: 'solid',

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

@@ -22,6 +22,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
   var heights = rowHeights.map(function (height, index) {
     return "".concat(height - 1, "px");
   }).join(' ');
+  var rowWidth = tableRef.offsetWidth;
   var _onClick = function onClick(index, event) {};
   var onMouseOver = function onMouseOver() {};
   var onMouseOut = function onMouseOut() {};
@@ -36,7 +37,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     style: {
       gridTemplateRows: heights
     }
-  }, Number.isFinite(rowIndex) && /*#__PURE__*/_react.default.createElement("div", {
+  }, rowIndex !== undefined && Number.isFinite(rowIndex) && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       gridRow: "".concat(rowIndex + 1, " / span 1"),
       display: 'flex'
@@ -48,7 +49,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     tableLocalId: getLocalId(),
-    indexes: []
+    indexes: [rowIndex],
+    previewWidth: rowWidth,
+    previewHeight: rowHeights[rowIndex]
   })));
 };
 var DragControls = exports.DragControls = (0, _reactIntlNext.injectIntl)(DragControlsComponent);

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

@@ -147,7 +147,7 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
       var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
       return /*#__PURE__*/_react.default.createElement("div", {
         onMouseDown: function onMouseDown(e) {
-          return e.preventDefault();
+          return !isDragAndDropEnabled && e.preventDefault();
         }
       }, isNumberColumnEnabled ? /*#__PURE__*/_react.default.createElement(_NumberColumn.default, {
         editorView: editorView,

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

@@ -1,7 +1,10 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { N200, N700 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
+import { DragPreview } from '../DragPreview';
 import { DragHandleIcon } from '../icons/DragHandleIcon';
 const mapStateToProps = state => {
   switch (state) {
@@ -21,12 +24,15 @@ export const DragHandle = ({
   direction = 'row',
   state = 'default',
   indexes,
+  previewWidth,
+  previewHeight,
   onClick,
   onMouseOver,
   onMouseOut
 }) => {
   const dragHandleDivRef = useRef(null);
   const iconProps = mapStateToProps(state);
+  const [previewContainer, setPreviewContainer] = useState(null);
   useEffect(() => {
     const dragHandleDivRefCurrent = dragHandleDivRef.current;
     if (dragHandleDivRefCurrent) {
@@ -38,15 +44,51 @@ export const DragHandle = ({
             type: `table-${direction}`,
             indexes
           };
+        },
+        onGenerateDragPreview: ({
+          nativeSetDragImage
+        }) => {
+          setCustomNativeDragPreview({
+            getOffset: ({
+              container
+            }) => {
+              const rect = container.getBoundingClientRect();
+              if (direction === 'row') {
+                return {
+                  x: 16,
+                  y: 16
+                };
+              } else {
+                return {
+                  x: rect.width / 2 + 16,
+                  y: 16
+                };
+              }
+            },
+            render: function render({
+              container
+            }) {
+              setPreviewContainer(container);
+              return () => setPreviewContainer(null);
+            },
+            nativeSetDragImage
+          });
         }
       });
     }
   }, [tableLocalId, direction, indexes]);
   return /*#__PURE__*/React.createElement("button", {
     className: ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
+    ref: dragHandleDivRef,
     style: {
+      backgroundColor: `${"var(--ds-surface, white)"}`,
+      borderRadius: '4px',
+      border: `2px solid ${"var(--ds-surface, white)"}`,
       transform: direction === 'column' ? 'none' : 'rotate(90deg)'
-    },
-    ref: dragHandleDivRef
-  }, /*#__PURE__*/React.createElement(DragHandleIcon, iconProps));
+    }
+  }, /*#__PURE__*/React.createElement(DragHandleIcon, iconProps), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+    direction: direction,
+    width: previewWidth,
+    height: previewHeight
+  }), previewContainer));
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, xcss } from '@atlaskit/primitives';
-import { DragInMotionIcon } from '../Icons/DragInMotionIcon';
+import { DragInMotionIcon } from '../icons/DragInMotionIcon';
 const boxStyles = xcss({
   borderColor: 'color.border.focused',
   borderStyle: 'solid',

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

@@ -14,6 +14,7 @@ const DragControlsComponent = ({
 }) => {
   const rowHeights = getRowHeights(tableRef);
   const heights = rowHeights.map((height, index) => `${height - 1}px`).join(' ');
+  const rowWidth = tableRef.offsetWidth;
   const onClick = (index, event) => {};
   const onMouseOver = () => {};
   const onMouseOut = () => {};
@@ -28,7 +29,7 @@ const DragControlsComponent = ({
     style: {
       gridTemplateRows: heights
     }
-  }, Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
+  }, rowIndex !== undefined && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridRow: `${rowIndex + 1} / span 1`,
       display: 'flex'
@@ -38,7 +39,9 @@ const DragControlsComponent = ({
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     tableLocalId: getLocalId(),
-    indexes: []
+    indexes: [rowIndex],
+    previewWidth: rowWidth,
+    previewHeight: rowHeights[rowIndex]
   })));
 };
 export const DragControls = injectIntl(DragControlsComponent);

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

@@ -104,7 +104,7 @@ export default class TableFloatingControls extends Component {
     }
     const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
     return /*#__PURE__*/React.createElement("div", {
-      onMouseDown: e => e.preventDefault()
+      onMouseDown: e => !isDragAndDropEnabled && e.preventDefault()
     }, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(NumberColumn, {
       editorView: editorView,
       hoverRows: this.hoverRows,

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

@@ -1,7 +1,11 @@
-import React, { useEffect, useRef } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { N200, N700 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
+import { DragPreview } from '../DragPreview';
 import { DragHandleIcon } from '../icons/DragHandleIcon';
 var mapStateToProps = function mapStateToProps(state) {
   switch (state) {
@@ -23,11 +27,17 @@ export var DragHandle = function DragHandle(_ref) {
     _ref$state = _ref.state,
     state = _ref$state === void 0 ? 'default' : _ref$state,
     indexes = _ref.indexes,
+    previewWidth = _ref.previewWidth,
+    previewHeight = _ref.previewHeight,
     onClick = _ref.onClick,
     onMouseOver = _ref.onMouseOver,
     onMouseOut = _ref.onMouseOut;
   var dragHandleDivRef = useRef(null);
   var iconProps = mapStateToProps(state);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    previewContainer = _useState2[0],
+    setPreviewContainer = _useState2[1];
   useEffect(function () {
     var dragHandleDivRefCurrent = dragHandleDivRef.current;
     if (dragHandleDivRefCurrent) {
@@ -39,15 +49,50 @@ export var DragHandle = function DragHandle(_ref) {
             type: "table-".concat(direction),
             indexes: indexes
           };
+        },
+        onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+          var nativeSetDragImage = _ref2.nativeSetDragImage;
+          setCustomNativeDragPreview({
+            getOffset: function getOffset(_ref3) {
+              var container = _ref3.container;
+              var rect = container.getBoundingClientRect();
+              if (direction === 'row') {
+                return {
+                  x: 16,
+                  y: 16
+                };
+              } else {
+                return {
+                  x: rect.width / 2 + 16,
+                  y: 16
+                };
+              }
+            },
+            render: function render(_ref4) {
+              var container = _ref4.container;
+              setPreviewContainer(container);
+              return function () {
+                return setPreviewContainer(null);
+              };
+            },
+            nativeSetDragImage: nativeSetDragImage
+          });
         }
       });
     }
   }, [tableLocalId, direction, indexes]);
   return /*#__PURE__*/React.createElement("button", {
     className: ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
+    ref: dragHandleDivRef,
     style: {
+      backgroundColor: "var(--ds-surface, white)",
+      borderRadius: '4px',
+      border: "2px solid ".concat("var(--ds-surface, white)"),
       transform: direction === 'column' ? 'none' : 'rotate(90deg)'
-    },
-    ref: dragHandleDivRef
-  }, /*#__PURE__*/React.createElement(DragHandleIcon, iconProps));
+    }
+  }, /*#__PURE__*/React.createElement(DragHandleIcon, iconProps), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+    direction: direction,
+    width: previewWidth,
+    height: previewHeight
+  }), previewContainer));
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, xcss } from '@atlaskit/primitives';
-import { DragInMotionIcon } from '../Icons/DragInMotionIcon';
+import { DragInMotionIcon } from '../icons/DragInMotionIcon';
 var boxStyles = xcss({
   borderColor: 'color.border.focused',
   borderStyle: 'solid',

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

@@ -15,6 +15,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
   var heights = rowHeights.map(function (height, index) {
     return "".concat(height - 1, "px");
   }).join(' ');
+  var rowWidth = tableRef.offsetWidth;
   var _onClick = function onClick(index, event) {};
   var onMouseOver = function onMouseOver() {};
   var onMouseOut = function onMouseOut() {};
@@ -29,7 +30,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     style: {
       gridTemplateRows: heights
     }
-  }, Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
+  }, rowIndex !== undefined && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridRow: "".concat(rowIndex + 1, " / span 1"),
       display: 'flex'
@@ -41,7 +42,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     tableLocalId: getLocalId(),
-    indexes: []
+    indexes: [rowIndex],
+    previewWidth: rowWidth,
+    previewHeight: rowHeights[rowIndex]
   })));
 };
 export var DragControls = injectIntl(DragControlsComponent);

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

@@ -137,7 +137,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
       var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
       return /*#__PURE__*/React.createElement("div", {
         onMouseDown: function onMouseDown(e) {
-          return e.preventDefault();
+          return !isDragAndDropEnabled && e.preventDefault();
         }
       }, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(NumberColumn, {
         editorView: editorView,

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

@@ -3,11 +3,13 @@ type DragHandleState = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
+    previewWidth?: number;
+    previewHeight?: number;
     direction?: 'column' | 'row';
     state?: DragHandleState;
     onClick?: MouseEventHandler;
     onMouseOver?: MouseEventHandler;
     onMouseOut?: MouseEventHandler;
 };
-export declare const DragHandle: ({ tableLocalId, direction, state, indexes, onClick, onMouseOver, onMouseOut, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, state, indexes, previewWidth, previewHeight, onClick, onMouseOver, onMouseOut, }: DragHandleProps) => JSX.Element;
 export {};

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

@@ -3,11 +3,13 @@ type DragHandleState = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
+    previewWidth?: number;
+    previewHeight?: number;
     direction?: 'column' | 'row';
     state?: DragHandleState;
     onClick?: MouseEventHandler;
     onMouseOver?: MouseEventHandler;
     onMouseOut?: MouseEventHandler;
 };
-export declare const DragHandle: ({ tableLocalId, direction, state, indexes, onClick, onMouseOver, onMouseOut, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, state, indexes, previewWidth, previewHeight, onClick, onMouseOver, onMouseOut, }: DragHandleProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.6",
+  "version": "5.3.7",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/custom-steps": "^0.0.2",
-    "@atlaskit/editor-common": "^76.12.0",
+    "@atlaskit/editor-common": "^76.13.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

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

@@ -1,11 +1,15 @@
 import type { MouseEventHandler } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+
+import ReactDOM from 'react-dom';
 
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { N200, N700 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../../types';
+import { DragPreview } from '../DragPreview';
 import { DragHandleIcon } from '../icons/DragHandleIcon';
 
 type DragHandleState = 'default' | 'selected' | 'disabled' | 'danger';
@@ -13,6 +17,8 @@ type DragHandleState = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
   tableLocalId: string;
   indexes: number[];
+  previewWidth?: number;
+  previewHeight?: number;
   direction?: 'column' | 'row';
   state?: DragHandleState;
   onClick?: MouseEventHandler;
@@ -39,12 +45,17 @@ export const DragHandle = ({
   direction = 'row',
   state = 'default',
   indexes,
+  previewWidth,
+  previewHeight,
   onClick,
   onMouseOver,
   onMouseOut,
 }: DragHandleProps) => {
   const dragHandleDivRef = useRef<HTMLButtonElement>(null);
   const iconProps = mapStateToProps(state);
+  const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
+    null,
+  );
 
   useEffect(() => {
     const dragHandleDivRefCurrent = dragHandleDivRef.current;
@@ -58,6 +69,23 @@ export const DragHandle = ({
             indexes,
           };
         },
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          setCustomNativeDragPreview({
+            getOffset: ({ container }) => {
+              const rect = container.getBoundingClientRect();
+              if (direction === 'row') {
+                return { x: 16, y: 16 };
+              } else {
+                return { x: rect.width / 2 + 16, y: 16 };
+              }
+            },
+            render: function render({ container }) {
+              setPreviewContainer(container);
+              return () => setPreviewContainer(null);
+            },
+            nativeSetDragImage,
+          });
+        },
       });
     }
   }, [tableLocalId, direction, indexes]);
@@ -65,12 +93,26 @@ export const DragHandle = ({
   return (
     <button
       className={ClassName.DRAG_HANDLE_BUTTON_CONTAINER}
+      ref={dragHandleDivRef}
       style={{
+        backgroundColor: `${token('elevation.surface', 'white')}`,
+        borderRadius: '4px',
+        border: `2px solid ${token('elevation.surface', 'white')}`,
         transform: direction === 'column' ? 'none' : 'rotate(90deg)',
       }}
-      ref={dragHandleDivRef}
     >
       <DragHandleIcon {...iconProps} />
+      {previewContainer &&
+        previewWidth !== undefined &&
+        previewHeight !== undefined &&
+        ReactDOM.createPortal(
+          <DragPreview
+            direction={direction}
+            width={previewWidth}
+            height={previewHeight}
+          />,
+          previewContainer,
+        )}
     </button>
   );
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Box, xcss } from '@atlaskit/primitives';
 
-import { DragInMotionIcon } from '../Icons/DragInMotionIcon';
+import { DragInMotionIcon } from '../icons/DragInMotionIcon';
 
 const boxStyles = xcss({
   borderColor: 'color.border.focused',

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

@@ -32,6 +32,7 @@ const DragControlsComponent = ({
   const heights = rowHeights
     .map((height, index) => `${height - 1}px`)
     .join(' ');
+  const rowWidth = tableRef.offsetWidth;
 
   const onClick = (
     index: number,
@@ -55,7 +56,7 @@ const DragControlsComponent = ({
         gridTemplateRows: heights,
       }}
     >
-      {Number.isFinite(rowIndex) && (
+      {rowIndex !== undefined && Number.isFinite(rowIndex) && (
         <div
           style={{
             gridRow: `${(rowIndex as number) + 1} / span 1`,
@@ -67,7 +68,9 @@ const DragControlsComponent = ({
             onMouseOver={onMouseOver}
             onMouseOut={onMouseOut}
             tableLocalId={getLocalId()}
-            indexes={[]}
+            indexes={[rowIndex]}
+            previewWidth={rowWidth}
+            previewHeight={rowHeights[rowIndex]}
           />
         </div>
       )}

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

@@ -133,7 +133,7 @@ export default class TableFloatingControls extends Component<Props, State> {
         : undefined;
 
     return (
-      <div onMouseDown={(e) => e.preventDefault()}>
+      <div onMouseDown={(e) => !isDragAndDropEnabled && e.preventDefault()}>
         {isNumberColumnEnabled ? (
           <NumberColumn
             editorView={editorView}