@atlaskit/editor-plugin-table 5.4.10 → 5.4.12

package/dist/es2019/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';
@@ -89,7 +87,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     },
     selected: false,
     disabled: false,
-    elemAfter: jsx("div", {
+    elemAfter: /*#__PURE__*/React.createElement("div", {
       css: shortcutStyle
     }, tooltip(addColumnAfter))
   }, {
@@ -108,7 +106,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     },
     selected: false,
     disabled: false,
-    elemAfter: jsx("div", {
+    elemAfter: /*#__PURE__*/React.createElement("div", {
       css: shortcutStyle
     }, tooltip(addRowAfter))
   }, {
@@ -241,7 +239,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     },
     selected: false,
     disabled: false,
-    elemAfter: jsx("div", {
+    elemAfter: /*#__PURE__*/React.createElement("div", {
       css: shortcutStyle
     }, tooltip(backspace))
   });

package/dist/es2019/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';
@@ -15,19 +13,19 @@ export const ColumnResizeWidget = ({
     formatMessage
   } = useIntl();
   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"
-  }, tooltipProps => jsx("div", _extends({
+  }, tooltipProps => /*#__PURE__*/React.createElement("div", _extends({
     className: TableCssClassName.RESIZE_HANDLE_DECORATION,
     "data-start-index": startIndex,
     "data-end-index": endIndex

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/esm/plugins/table/index.js

@@ -147,10 +147,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableEditing',
         plugin: function plugin() {
+          var _ref6 = options || {},
+            dragAndDropEnabled = _ref6.dragAndDropEnabled;
           return tableEditing({
-            reportFixedTable: function reportFixedTable(_ref6) {
-              var tr = _ref6.tr,
-                reason = _ref6.reason;
+            reportFixedTable: function reportFixedTable(_ref7) {
+              var tr = _ref7.tr,
+                reason = _ref7.reason;
               editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
                 action: TABLE_ACTION.FIXED,
                 actionSubject: ACTION_SUBJECT.TABLE,
@@ -160,54 +162,55 @@ var tablesPlugin = function tablesPlugin(_ref) {
                 },
                 eventType: EVENT_TYPE.TRACK
               })(tr);
-            }
+            },
+            dragAndDropEnabled: dragAndDropEnabled
           });
         }
       }, {
         name: 'tableStickyHeaders',
-        plugin: function plugin(_ref7) {
-          var dispatch = _ref7.dispatch,
-            eventDispatcher = _ref7.eventDispatcher;
+        plugin: function plugin(_ref8) {
+          var dispatch = _ref8.dispatch,
+            eventDispatcher = _ref8.eventDispatcher;
           return options && options.tableOptions.stickyHeaders ? createStickyHeadersPlugin(dispatch, eventDispatcher, function () {
             return [];
           }, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined;
         }
       }, {
         name: 'tableDragAndDrop',
-        plugin: function plugin(_ref8) {
-          var dispatch = _ref8.dispatch,
-            eventDispatcher = _ref8.eventDispatcher;
+        plugin: function plugin(_ref9) {
+          var dispatch = _ref9.dispatch,
+            eventDispatcher = _ref9.eventDispatcher;
           return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, eventDispatcher) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref9) {
-          var dispatch = _ref9.dispatch;
+        plugin: function plugin(_ref10) {
+          var dispatch = _ref10.dispatch;
           return createTableLocalIdPlugin(dispatch);
         }
       }, {
         name: 'tableWidth',
-        plugin: function plugin(_ref10) {
+        plugin: function plugin(_ref11) {
           var _options$fullWidthEna;
-          var dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent,
-            dispatch = _ref10.dispatch;
+          var dispatchAnalyticsEvent = _ref11.dispatchAnalyticsEvent,
+            dispatch = _ref11.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
-        plugin: function plugin(_ref11) {
+        plugin: function plugin(_ref12) {
           var _options$tableResizin;
-          var dispatch = _ref11.dispatch,
-            dispatchAnalyticsEvent = _ref11.dispatchAnalyticsEvent;
+          var dispatch = _ref12.dispatch,
+            dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent;
           return getBooleanFF('platform.editor.table.overflow-state-analytics') ? createTableOverflowAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false) : undefined;
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref12) {
-          var dispatch = _ref12.dispatch,
-            dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref13) {
+          var dispatch = _ref13.dispatch,
+            dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent;
           return getBooleanFF('platform.editor.table.analytics-plugin-moved-event') ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent) : undefined;
         }
       }, {
@@ -238,12 +241,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref13) {
-      var editorView = _ref13.editorView,
-        popupsMountPoint = _ref13.popupsMountPoint,
-        popupsBoundariesElement = _ref13.popupsBoundariesElement,
-        popupsScrollableElement = _ref13.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref14) {
+      var editorView = _ref14.editorView,
+        popupsMountPoint = _ref14.popupsMountPoint,
+        popupsBoundariesElement = _ref14.popupsBoundariesElement,
+        popupsScrollableElement = _ref14.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -257,30 +260,30 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: stickyHeadersPluginKey,
           dragAndDropState: dragAndDropPluginKey
         },
-        render: function render(_ref14) {
-          var resizingPluginState = _ref14.tableResizingPluginState,
-            stickyHeadersState = _ref14.stickyHeadersState,
-            tablePluginState = _ref14.tablePluginState,
-            tableWidthPluginState = _ref14.tableWidthPluginState,
-            dragAndDropState = _ref14.dragAndDropState;
+        render: function render(_ref15) {
+          var resizingPluginState = _ref15.tableResizingPluginState,
+            stickyHeadersState = _ref15.stickyHeadersState,
+            tablePluginState = _ref15.tablePluginState,
+            tableWidthPluginState = _ref15.tableWidthPluginState,
+            dragAndDropState = _ref15.dragAndDropState;
           var state = editorView.state;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = isColumnResizing || isTableResizing;
-          var _ref15 = tablePluginState,
-            tableNode = _ref15.tableNode,
-            tablePos = _ref15.tablePos,
-            targetCellPosition = _ref15.targetCellPosition,
-            isContextualMenuOpen = _ref15.isContextualMenuOpen,
-            layout = _ref15.layout,
-            tableRef = _ref15.tableRef,
-            pluginConfig = _ref15.pluginConfig,
-            insertColumnButtonIndex = _ref15.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref15.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref15.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref15.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref15.isDragAndDropEnabled,
-            tableWrapperTarget = _ref15.tableWrapperTarget;
+          var _ref16 = tablePluginState,
+            tableNode = _ref16.tableNode,
+            tablePos = _ref16.tablePos,
+            targetCellPosition = _ref16.targetCellPosition,
+            isContextualMenuOpen = _ref16.isContextualMenuOpen,
+            layout = _ref16.layout,
+            tableRef = _ref16.tableRef,
+            pluginConfig = _ref16.pluginConfig,
+            insertColumnButtonIndex = _ref16.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref16.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref16.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref16.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref16.isDragAndDropEnabled,
+            tableWrapperTarget = _ref16.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -358,8 +361,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref16) {
-        var formatMessage = _ref16.formatMessage;
+      quickInsert: function quickInsert(_ref17) {
+        var formatMessage = _ref17.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),

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));
 }