@atlaskit/editor-plugin-table 5.4.11 → 5.4.13

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

@@ -100,8 +100,10 @@ export const DragHandle = ({
       });
     }
   }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells]);
-  return /*#__PURE__*/React.createElement("button", {
-    className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, isDragAndDropEnabled && hasMergedCells && ClassName.DRAG_HANDLE_DISABLED),
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, ClassName.CONTROLS_BUTTON, appearance, {
+      [ClassName.DRAG_HANDLE_DISABLED]: isDragAndDropEnabled && hasMergedCells
+    }),
     ref: dragHandleDivRef,
     style: {
       transform: direction === 'column' ? 'none' : 'rotate(90deg)',
@@ -110,9 +112,14 @@ export const DragHandle = ({
     "data-testid": "table-floating-column-controls-drag-handle",
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
-    onMouseUp: onMouseUp,
+    onMouseUp: e => {
+      // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
+      // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
+      editorView.focus();
+      onMouseUp && onMouseUp(e);
+    },
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+  }, /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps)), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight

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

@@ -1,3 +1,5 @@
+/* index.tsx generated by @compiled/babel-plugin v0.26.1 */
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Box, xcss } from '@atlaskit/primitives';
 import { DragInMotionIcon } from '../icons/DragInMotionIcon';

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

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
@@ -50,25 +48,25 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     return null;
   }
   const labelCellOptions = formatMessage(messages.cellOptions);
-  const button = jsx("div", {
+  const button = /*#__PURE__*/React.createElement("div", {
     css: theme => [tableFloatingCellButtonStyles({
       theme
     }), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles({
       theme
     })]
-  }, jsx(ToolbarButton, {
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
     className: ClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,
     title: labelCellOptions,
     onClick: handleClick,
-    iconBefore: jsx(ExpandIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(ExpandIcon, {
       label: ""
     }),
     "aria-label": labelCellOptions
   }));
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   if (stickyHeader && parentSticky && tableWrapper) {
-    return jsx(FixedButton, {
+    return /*#__PURE__*/React.createElement(FixedButton, {
       offset: BUTTON_OFFSET,
       stickyHeader: stickyHeader,
       tableWrapper: tableWrapper,
@@ -78,7 +76,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       isContextualMenuOpen: isContextualMenuOpen
     }, button);
   }
-  return jsx(Popup, {
+  return /*#__PURE__*/React.createElement(Popup, {
     alignX: "right",
     alignY: "start",
     target: targetCellRef,
@@ -93,9 +91,9 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
 });
 const FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
 export default function (props) {
-  return jsx(ErrorBoundary, {
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
     component: ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     fallbackComponent: null
-  }, jsx(FloatingContextualButton, props));
+  }, /*#__PURE__*/React.createElement(FloatingContextualButton, props));
 }

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -1,7 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
 import { Component } from 'react';
-import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -75,15 +73,15 @@ export class ContextualMenu extends Component {
           value: {
             name: 'background'
           },
-          elemAfter: jsx("div", {
+          elemAfter: /*#__PURE__*/React.createElement("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
-          }, jsx("div", {
+          }, /*#__PURE__*/React.createElement("div", {
             css: cellColourPreviewStyles(background),
             className: ClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && jsx("div", {
+          }), isSubmenuOpen && /*#__PURE__*/React.createElement("div", {
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: this.handleSubMenuRef
-          }, jsx(ColorPalette, {
+          }, /*#__PURE__*/React.createElement(ColorPalette, {
             cols: 7,
             onClick: this.setColor,
             selectedColor: background,
@@ -100,7 +98,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'insert_column'
         },
-        elemAfter: jsx("div", {
+        elemAfter: /*#__PURE__*/React.createElement("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter))
       });
@@ -109,7 +107,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'insert_row'
         },
-        elemAfter: jsx("div", {
+        elemAfter: /*#__PURE__*/React.createElement("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter))
       });
@@ -193,7 +191,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'clear'
         },
-        elemAfter: jsx("div", {
+        elemAfter: /*#__PURE__*/React.createElement("div", {
           css: shortcutStyle
         }, tooltip(backspace))
       });
@@ -375,10 +373,10 @@ export class ContextualMenu extends Component {
     if (!items) {
       return null;
     }
-    return jsx("div", {
+    return /*#__PURE__*/React.createElement("div", {
       "data-testid": "table-cell-contextual-menu",
       onMouseLeave: this.closeSubmenu
-    }, jsx(DropdownMenu, {
+    }, /*#__PURE__*/React.createElement(DropdownMenu, {
       mountTo: mountPoint
       //This needs be removed when the a11y is completely handled
       //Disabling key navigation now as it works only partially

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

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -38,7 +36,7 @@ const FloatingContextualMenu = ({
     return null;
   }
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-  return jsx(Popup, {
+  return /*#__PURE__*/React.createElement(Popup, {
     alignX: "right",
     alignY: "top",
     target: targetCellRef,
@@ -54,9 +52,9 @@ const FloatingContextualMenu = ({
     forcePlacement: true,
     offset: [-7, 0],
     stick: true
-  }, jsx("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     css: tablePopupStyles
-  }, jsx(ContextualMenu, {
+  }, /*#__PURE__*/React.createElement(ContextualMenu, {
     editorView: editorView,
     offset: [contextualMenuTriggerSize / 2, -contextualMenuTriggerSize],
     isOpen: isOpen,

package/dist/es2019/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -26,15 +24,15 @@ const convertToDropdownItems = dragMenuConfig => {
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? jsx("div", {
+      elemBefore: item.icon ? /*#__PURE__*/React.createElement("div", {
         style: {
           marginRight: "var(--ds-space-negative-075, -6px)",
           display: 'flex'
         }
-      }, jsx(item.icon, {
+      }, /*#__PURE__*/React.createElement(item.icon, {
         label: item.title
       })) : undefined,
-      elemAfter: item.keymap ? jsx("div", {
+      elemAfter: item.keymap ? /*#__PURE__*/React.createElement("div", {
         css: shortcutStyle
       }, item.keymap) : undefined
     });
@@ -137,7 +135,7 @@ export const DragMenu = ({
   if (!menuItems) {
     return null;
   }
-  return jsx(DropdownMenu, {
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially

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

@@ -70,14 +70,11 @@ export const TableFloatingColumnControls = ({
     }
     return [0];
   }, [tableRef, tableRect.height]);
-  if (!tableRef) {
+  if (!tableRef || !tableActive) {
     return null;
   }
   const colWidths = getColumnsWidths(editorView);
   const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  if (!tableActive) {
-    return null;
-  }
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"

package/dist/es2019/plugins/table/utils/column-controls.js

@@ -159,4 +159,66 @@ export const colWidthsForRow = tr => {
   const visualColCount = rowColSpans.reduce((acc, val) => acc + val, 0);
   const pctWidths = rowColSpans.map(cellColSpan => cellColSpan / visualColCount * 100);
   return pctWidths.map(pct => `${pct}%`).join(' ');
+};
+export const convertHTMLCellIndexToColumnIndex = (htmlColIndex, htmlRowIndex, tableMap) => {
+  // Same numbers (positions) in tableMap.map array mean that there are merged cells.
+  // Cells can be merged across columns. So we need to check if the cell on the left and current cell have the same value.
+  // Cells can be merged acroll rows. So we need to check if the cell above has the same value as current cell.
+  // When cell has the same value as the cell above it or the cell to the left of it, html cellIndex won't count it a separete column.
+  const width = tableMap.width;
+  const map = tableMap.map;
+  let htmlColCount = 0;
+  if (htmlRowIndex === 0) {
+    for (let colIndex = 0; colIndex < width; colIndex++) {
+      if (colIndex === 0 || map[colIndex] !== map[colIndex - 1]) {
+        htmlColCount++;
+      }
+      if (htmlColCount - 1 === htmlColIndex) {
+        return colIndex;
+      }
+    }
+  } else {
+    for (let colIndex = 0; colIndex < width; colIndex++) {
+      const currentCellMapIndex = htmlRowIndex * width + colIndex;
+      const cellAboveMapIndex = (htmlRowIndex - 1) * width + colIndex;
+      if (colIndex > 0) {
+        if (map[currentCellMapIndex] !== map[currentCellMapIndex - 1] && map[currentCellMapIndex] !== map[cellAboveMapIndex]) {
+          htmlColCount++;
+        }
+      } else {
+        if (map[currentCellMapIndex] !== map[cellAboveMapIndex]) {
+          htmlColCount++;
+        }
+      }
+      if (htmlColCount - 1 === htmlColIndex) {
+        return colIndex;
+      }
+    }
+  }
+  return 0;
+};
+
+// When first row has merged cells, our converted column index needs to be mapped.
+export const getColumnIndexMappedToColumnIndexInFirstRow = (convertedColIndex, htmlRowIndex, tableMap) => {
+  const width = tableMap.width;
+  const map = tableMap.map;
+  const mapColIndexToFistRowColIndex = [];
+  let htmlColCounFirstRow = 0;
+  let colSpan = 0;
+  if (htmlRowIndex === 0) {
+    return convertedColIndex;
+  }
+  for (let colIndex = 0; colIndex < width; colIndex++) {
+    if (colIndex === 0 || map[colIndex] !== map[colIndex - 1]) {
+      if (colSpan > 0) {
+        htmlColCounFirstRow += colSpan;
+        colSpan = 0;
+      }
+      htmlColCounFirstRow++;
+    } else if (map[colIndex] === map[colIndex - 1]) {
+      colSpan++;
+    }
+    mapColIndexToFistRowColIndex[colIndex] = htmlColCounFirstRow - 1;
+  }
+  return mapColIndexToFistRowColIndex[convertedColIndex];
 };

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

@@ -3,7 +3,7 @@ export { findControlsHoverDecoration, createControlsHoverDecoration, createColum
 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, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
-export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames } from './column-controls';
+export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions } from './table';

package/dist/esm/plugins/table/event-handlers.js

@@ -11,7 +11,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
-import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
+import { convertHTMLCellIndexToColumnIndex, getColumnIndexMappedToColumnIndexInFirstRow, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 var isFocusingCalendar = function isFocusingCalendar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
@@ -339,13 +339,19 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   if (!maybeTableCell || !tableRef) {
     return;
   }
-  var colIndex = maybeTableCell.cellIndex;
+  var htmlColIndex = maybeTableCell.cellIndex;
   var rowElement = closestElement(target, 'tr');
-  var rowIndex = rowElement && rowElement.rowIndex;
+  var htmlRowIndex = rowElement && rowElement.rowIndex;
   var colHeight = tableRef.offsetHeight;
   var colWidth = maybeTableCell.offsetWidth;
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
-    hoverCell(rowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
+  var tableMap = tableNode && TableMap.get(tableNode);
+  var colIndex = htmlColIndex;
+  if (tableMap) {
+    var convertedColIndex = convertHTMLCellIndexToColumnIndex(htmlColIndex, htmlRowIndex, tableMap);
+    colIndex = getColumnIndexMappedToColumnIndexInFirstRow(convertedColIndex, htmlRowIndex, tableMap);
+  }
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== htmlRowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
+    hoverCell(htmlRowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
   }
 };
 export var withCellTracking = function withCellTracking(eventHandler, elementContentRects) {

package/dist/esm/plugins/table/toolbar.js

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
@@ -87,7 +85,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     },
     selected: false,
     disabled: false,
-    elemAfter: jsx("div", {
+    elemAfter: /*#__PURE__*/React.createElement("div", {
       css: shortcutStyle
     }, tooltip(addColumnAfter))
   }, {
@@ -106,7 +104,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     },
     selected: false,
     disabled: false,
-    elemAfter: jsx("div", {
+    elemAfter: /*#__PURE__*/React.createElement("div", {
       css: shortcutStyle
     }, tooltip(addRowAfter))
   }, {
@@ -238,7 +236,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     },
     selected: false,
     disabled: false,
-    elemAfter: jsx("div", {
+    elemAfter: /*#__PURE__*/React.createElement("div", {
       css: shortcutStyle
     }, tooltip(backspace))
   });

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

@@ -1,7 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import Tooltip from '@atlaskit/tooltip';
@@ -13,20 +11,20 @@ export var ColumnResizeWidget = function ColumnResizeWidget(_ref) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   if (!includeTooltip) {
-    return jsx("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex
     });
   }
-  return jsx(Tooltip, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
     content: formatMessage(messages.adjustColumns),
     hideTooltipOnClick: true,
     hideTooltipOnMouseDown: true,
     position: "mouse",
     mousePosition: "auto-start"
   }, function (tooltipProps) {
-    return jsx("div", _extends({
+    return /*#__PURE__*/React.createElement("div", _extends({
       className: TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
@@ -21,7 +22,7 @@ export var DragHandle = function DragHandle(_ref) {
     previewHeight = _ref.previewHeight,
     onMouseOver = _ref.onMouseOver,
     onMouseOut = _ref.onMouseOut,
-    onMouseUp = _ref.onMouseUp,
+    _onMouseUp = _ref.onMouseUp,
     onClick = _ref.onClick,
     editorView = _ref.editorView;
   var dragHandleDivRef = useRef(null);
@@ -102,8 +103,8 @@ export var DragHandle = function DragHandle(_ref) {
       });
     }
   }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells]);
-  return /*#__PURE__*/React.createElement("button", {
-    className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, isDragAndDropEnabled && hasMergedCells && ClassName.DRAG_HANDLE_DISABLED),
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, ClassName.CONTROLS_BUTTON, appearance, _defineProperty({}, ClassName.DRAG_HANDLE_DISABLED, isDragAndDropEnabled && hasMergedCells)),
     ref: dragHandleDivRef,
     style: {
       transform: direction === 'column' ? 'none' : 'rotate(90deg)',
@@ -112,9 +113,14 @@ export var DragHandle = function DragHandle(_ref) {
     "data-testid": "table-floating-column-controls-drag-handle",
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
-    onMouseUp: onMouseUp,
+    onMouseUp: function onMouseUp(e) {
+      // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
+      // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
+      editorView.focus();
+      _onMouseUp && _onMouseUp(e);
+    },
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+  }, /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps)), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight

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

@@ -1,3 +1,5 @@
+/* index.tsx generated by @compiled/babel-plugin v0.26.1 */
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Box, xcss } from '@atlaskit/primitives';
 import { DragInMotionIcon } from '../icons/DragInMotionIcon';

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

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
@@ -44,7 +42,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     return null;
   }
   var labelCellOptions = formatMessage(messages.cellOptions);
-  var button = jsx("div", {
+  var button = /*#__PURE__*/React.createElement("div", {
     css: function css(theme) {
       return [tableFloatingCellButtonStyles({
         theme: theme
@@ -52,19 +50,19 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
         theme: theme
       })];
     }
-  }, jsx(ToolbarButton, {
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
     className: ClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,
     title: labelCellOptions,
     onClick: handleClick,
-    iconBefore: jsx(ExpandIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(ExpandIcon, {
       label: ""
     }),
     "aria-label": labelCellOptions
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   if (stickyHeader && parentSticky && tableWrapper) {
-    return jsx(FixedButton, {
+    return /*#__PURE__*/React.createElement(FixedButton, {
       offset: BUTTON_OFFSET,
       stickyHeader: stickyHeader,
       tableWrapper: tableWrapper,
@@ -74,7 +72,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
       isContextualMenuOpen: isContextualMenuOpen
     }, button);
   }
-  return jsx(Popup, {
+  return /*#__PURE__*/React.createElement(Popup, {
     alignX: "right",
     alignY: "start",
     target: targetCellRef,
@@ -89,9 +87,9 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
 });
 var FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
 export default function (props) {
-  return jsx(ErrorBoundary, {
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
     component: ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     fallbackComponent: null
-  }, jsx(FloatingContextualButton, props));
+  }, /*#__PURE__*/React.createElement(FloatingContextualButton, props));
 }

package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -9,9 +9,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-/** @jsx jsx */
 import { Component } from 'react';
-import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -82,15 +80,15 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           value: {
             name: 'background'
           },
-          elemAfter: jsx("div", {
+          elemAfter: /*#__PURE__*/React.createElement("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
-          }, jsx("div", {
+          }, /*#__PURE__*/React.createElement("div", {
             css: cellColourPreviewStyles(background),
             className: ClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && jsx("div", {
+          }), isSubmenuOpen && /*#__PURE__*/React.createElement("div", {
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
-          }, jsx(ColorPalette, {
+          }, /*#__PURE__*/React.createElement(ColorPalette, {
             cols: 7,
             onClick: _this.setColor,
             selectedColor: background,
@@ -107,7 +105,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'insert_column'
         },
-        elemAfter: jsx("div", {
+        elemAfter: /*#__PURE__*/React.createElement("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter))
       });
@@ -116,7 +114,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'insert_row'
         },
-        elemAfter: jsx("div", {
+        elemAfter: /*#__PURE__*/React.createElement("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter))
       });
@@ -196,7 +194,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'clear'
         },
-        elemAfter: jsx("div", {
+        elemAfter: /*#__PURE__*/React.createElement("div", {
           css: shortcutStyle
         }, tooltip(backspace))
       });
@@ -358,10 +356,10 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       if (!items) {
         return null;
       }
-      return jsx("div", {
+      return /*#__PURE__*/React.createElement("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
-      }, jsx(DropdownMenu, {
+      }, /*#__PURE__*/React.createElement(DropdownMenu, {
         mountTo: mountPoint
         //This needs be removed when the a11y is completely handled
         //Disabling key navigation now as it works only partially

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

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -34,7 +32,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     return null;
   }
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-  return jsx(Popup, {
+  return /*#__PURE__*/React.createElement(Popup, {
     alignX: "right",
     alignY: "top",
     target: targetCellRef,
@@ -50,9 +48,9 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     forcePlacement: true,
     offset: [-7, 0],
     stick: true
-  }, jsx("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     css: tablePopupStyles
-  }, jsx(ContextualMenu, {
+  }, /*#__PURE__*/React.createElement(ContextualMenu, {
     editorView: editorView,
     offset: [contextualMenuTriggerSize / 2, -contextualMenuTriggerSize],
     isOpen: isOpen,