@atlaskit/editor-plugin-table 5.3.14 → 5.3.16

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.16
+
+### Patch Changes
+
+- [#42211](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42211) [`feef33e6e7e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/feef33e6e7e) - Add new corner button for tables to support drag and drop
+- [#42213](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42213) [`1daf5ff634c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1daf5ff634c) - Fixed and issue where a drag could occur with the menu open. When a drag starts if a menu is open then it wil be closed.
+- Updated dependencies
+
+## 5.3.15
+
+### Patch Changes
+
+- [#42203](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42203) [`7eb9439a045`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7eb9439a045) - Implement drag menu options
+
 ## 5.3.14
 
 ### Patch Changes

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

@@ -142,7 +142,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, m
 // Ignore any `mousedown` `event` from control and numbered column buttons
 // PM end up changing selection during shift selection if not prevented
 var handleMouseDown = exports.handleMouseDown = function handleMouseDown(_, event) {
-  var isControl = !!(event.target && event.target instanceof HTMLElement && ((0, _utils3.isTableContainerOrWrapper)(event.target) || (0, _utils3.isColumnControlsDecorations)(event.target) || (0, _utils3.isRowControlsButton)(event.target)));
+  var isControl = !!(event.target && event.target instanceof HTMLElement && ((0, _utils3.isTableContainerOrWrapper)(event.target) || (0, _utils3.isColumnControlsDecorations)(event.target) || (0, _utils3.isRowControlsButton)(event.target) || (0, _utils3.isDragCornerButton)(event.target)));
   if (isControl) {
     event.preventDefault();
   }
@@ -199,12 +199,13 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
     var state = view.state,
       dispatch = view.dispatch;
     var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
-      insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
+      insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex,
+      isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
     var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
       _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
       endIndex = _getColumnOrRowIndex10[1];
-    var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, elementContentRects) === 'right' ? endIndex : startIndex;
+    var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, elementContentRects, undefined, isDragAndDropEnabled) === 'right' ? endIndex : startIndex;
     if (positionColumn !== insertColumnButtonIndex) {
       return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
     }

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

@@ -337,7 +337,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             targetCellPosition: targetCellPosition,
             direction: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
             index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
-            isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing
+            isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
+            getEditorContainerWidth: defaultGetEditorContainerWidth
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,
             selection: editorView.state.selection,

package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -93,6 +93,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.start({
               input: location.current.input
             });
+            (0, _commands.toggleDragMenu)(false)(editorView.state, editorView.dispatch);
           },
           onDrag: function onDrag(event) {
             _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.updateInput({

package/dist/cjs/plugins/table/types.js

@@ -58,9 +58,6 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   COLUMN_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls"),
   COLUMN_CONTROLS_DECORATIONS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls-decoration"),
   COLUMN_SELECTED: "".concat(_adfSchema.tablePrefixSelector, "-column__selected"),
-  COLUMN_CONTROLS_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-col-controls-wrapper"),
-  COLUMN_DROP_TARGET_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-col-drop-target-controls"),
-  COLUMN_CONTROLS_INNER: "".concat(_adfSchema.tablePrefixSelector, "-col-controls__inner"),
   ROW_CONTROLS_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-row-controls-wrapper"),
   ROW_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-row-controls"),
   ROW_CONTROLS_INNER: "".concat(_adfSchema.tablePrefixSelector, "-row-controls__inner"),
@@ -95,7 +92,12 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   DRAG_COLUMN_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-drag-column-controls"),
   DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-drag-columns-floating-insert-dot-wrapper"),
   DRAG_COLUMN_FLOATING_INSERT_DOT: "".concat(_adfSchema.tablePrefixSelector, "-drag-columns-floating-insert-dot"),
+  DRAG_COLUMN_CONTROLS_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-col-controls-wrapper"),
+  DRAG_COLUMN_DROP_TARGET_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-col-drop-target-controls"),
+  DRAG_COLUMN_CONTROLS_INNER: "".concat(_adfSchema.tablePrefixSelector, "-col-controls__inner"),
   DRAG_HANDLE_BUTTON_CONTAINER: "".concat(_adfSchema.tablePrefixSelector, "-drag-handle-button-container"),
+  DRAG_CORNER_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-drag-corner-button"),
+  DRAG_CORNER_BUTTON_INNER: "".concat(_adfSchema.tablePrefixSelector, "-drag-corner-button-inner"),
   /** Other classes */
   NUMBERED_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-numbered-column"),
   NUMBERED_COLUMN_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-numbered-column__button"),

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

@@ -1,16 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragMenu = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
-var _commands = require("../../pm-plugins/drag-and-drop/commands");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _commands = require("../../commands");
+var _commands2 = require("../../pm-plugins/drag-and-drop/commands");
+var _utils2 = require("../../utils");
 var _dragMenu = require("../../utils/drag-menu");
 var _consts = require("../consts");
+/** @jsx jsx */
+
 var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
   var menuItems = [];
   var menuCallback = {};
@@ -21,7 +26,18 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
       value: {
         name: item.id
       },
-      isDisabled: item.disabled
+      isDisabled: item.disabled,
+      elemBefore: item.icon ? (0, _react.jsx)("div", {
+        style: {
+          marginRight: "var(--ds-space-negative-075, -6px)",
+          display: 'flex'
+        }
+      }, (0, _react.jsx)(item.icon, {
+        label: item.title
+      })) : undefined,
+      elemAfter: item.keymap ? (0, _react.jsx)("div", {
+        css: _shortcut.shortcutStyle
+      }, item.keymap) : undefined
     });
     item.onClick && (menuCallback[item.id] = item.onClick);
   });
@@ -39,27 +55,47 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     tableNode = _ref.tableNode,
     mountPoint = _ref.mountPoint,
     boundariesElement = _ref.boundariesElement,
-    scrollableElement = _ref.scrollableElement;
+    scrollableElement = _ref.scrollableElement,
+    targetCellPosition = _ref.targetCellPosition,
+    getEditorContainerWidth = _ref.getEditorContainerWidth;
   var tableMap = tableNode ? _tableMap.TableMap.get(tableNode) : undefined;
-  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, tableMap, index);
+  var state = editorView.state,
+    dispatch = editorView.dispatch;
+  var selection = state.selection;
+  var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
   var closeMenu = function closeMenu() {
     var state = editorView.state,
       dispatch = editorView.dispatch;
-    (0, _commands.toggleDragMenu)(false)(state, dispatch);
+    (0, _commands2.toggleDragMenu)(false)(state, dispatch);
   };
-  var onMenuItemActivated = function onMenuItemActivated(_ref2) {
+  var handleMenuItemActivated = function handleMenuItemActivated(_ref2) {
     var _menuCallback$item$va;
     var item = _ref2.item;
-    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 || _menuCallback$item$va.call(menuCallback, editorView.state, editorView.dispatch);
+    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 || _menuCallback$item$va.call(menuCallback, state, dispatch);
     closeMenu();
   };
+  var handleItemMouseEnter = function handleItemMouseEnter(_ref3) {
+    var _item$value$name;
+    var item = _ref3.item;
+    if (!selectionRect || !((_item$value$name = item.value.name) !== null && _item$value$name !== void 0 && _item$value$name.startsWith('delete'))) {
+      return;
+    }
+    (item.value.name === 'delete_column' ? (0, _commands.hoverColumns)((0, _utils2.getSelectedColumnIndexes)(selectionRect), true) : (0, _commands.hoverRows)((0, _utils2.getSelectedRowIndexes)(selectionRect), true))(state, dispatch);
+  };
+  var handleItemMouseLeave = function handleItemMouseLeave(_ref4) {
+    var item = _ref4.item;
+    if (['sort_column_asc', 'sort_column_desc', 'delete_column', 'delete_row'].indexOf(item.value.name) > -1) {
+      (0, _commands.clearHoverSelection)()(state, dispatch);
+    }
+  };
   if (!menuItems) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenu, {
+  return (0, _react.jsx)(_uiMenu.DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially
@@ -73,7 +109,9 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     }],
     isOpen: isOpen,
     onOpenChange: closeMenu,
-    onItemActivated: onMenuItemActivated,
+    onItemActivated: handleMenuItemActivated,
+    onMouseEnter: handleItemMouseEnter,
+    onMouseLeave: handleItemMouseLeave,
     fitWidth: _consts.dragMenuDropdownWidth,
     boundariesElement: boundariesElement
   });

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

@@ -22,7 +22,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     tableNode = _ref.tableNode,
     direction = _ref.direction,
     index = _ref.index,
-    targetCellPosition = _ref.targetCellPosition;
+    targetCellPosition = _ref.targetCellPosition,
+    getEditorContainerWidth = _ref.getEditorContainerWidth;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -55,7 +56,9 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     boundariesElement: boundariesElement,
     tableNode: tableNode,
     direction: direction,
-    index: index
+    index: index,
+    targetCellPosition: targetCellPosition,
+    getEditorContainerWidth: getEditorContainerWidth
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -59,6 +59,11 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
         isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
         isDragAndDropEnabled = _this$props.isDragAndDropEnabled,
         dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent;
+
+      // TODO: temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
+      if (isDragAndDropEnabled && (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0)) {
+        return null;
+      }
       var type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
       if (!tableNode || !tableRef || !type) {
         return null;

package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -80,7 +80,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _types.TableCssClassName.COLUMN_CONTROLS_INNER,
+    className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls",
     style: {
       gridTemplateColumns: widths,
@@ -98,13 +98,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
       contentEditable: false,
       key: index
-    }, !hasHeaderColumn && index === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        left: '0px',
-        right: 'unset'
-      },
-      className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
-    }), /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT,
       style: columnParams.length - 1 === index ? {
         right: '0'
@@ -113,12 +107,10 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   }), tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       gridColumn: gridColumnPosition,
-      zIndex: 99,
       display: 'flex',
-      width: '100%',
       justifyContent: 'center',
       alignItems: 'center',
-      marginTop: "var(--ds-space-negative-025, -2px)"
+      zIndex: 99
     },
     "data-column-control-index": hoveredCell.colIndex,
     "data-testid": "table-floating-column-control"

package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.js

@@ -23,10 +23,10 @@ var ColumnDropTargets = exports.ColumnDropTargets = function ColumnDropTargets(_
   var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   var marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _types.TableCssClassName.COLUMN_DROP_TARGET_CONTROLS,
+    className: _types.TableCssClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS,
     contentEditable: false
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _types.TableCssClassName.COLUMN_CONTROLS_INNER,
+    className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls-drop-targets"
   }, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width, index) {
     return /*#__PURE__*/_react.default.createElement(_ColumnDropTarget.ColumnDropTarget, {

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

@@ -110,7 +110,7 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     return null;
   }
   return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement("div", {
-    className: _types.TableCssClassName.COLUMN_CONTROLS_WRAPPER,
+    className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_ColumnControls.ColumnControls, {
     editorView: editorView,

package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CornerControls = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactIntlNext = require("react-intl-next");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _commands = require("../../../commands");
+var _types = require("../../../types");
+var _messages = _interopRequireDefault(require("../../messages"));
+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; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+var CornerControlComponent = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(CornerControlComponent, _Component);
+  var _super = _createSuper(CornerControlComponent);
+  function CornerControlComponent() {
+    var _this;
+    (0, _classCallCheck2.default)(this, CornerControlComponent);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isActive", function () {
+      var _this$props = _this.props,
+        editorView = _this$props.editorView,
+        hoveredRows = _this$props.hoveredRows,
+        isResizing = _this$props.isResizing;
+      var selection = editorView.state.selection;
+      var table = (0, _utils.findTable)(selection);
+      if (!table) {
+        return false;
+      }
+      return (0, _utils.isTableSelected)(selection) || hoveredRows && hoveredRows.length === _tableMap.TableMap.get(table.node).height && !isResizing;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clearHoverSelection", function () {
+      var _this$props$editorVie = _this.props.editorView,
+        state = _this$props$editorVie.state,
+        dispatch = _this$props$editorVie.dispatch;
+      (0, _commands.clearHoverSelection)()(state, dispatch);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectTable", function () {
+      var _this$props$editorVie2 = _this.props.editorView,
+        state = _this$props$editorVie2.state,
+        dispatch = _this$props$editorVie2.dispatch;
+      dispatch((0, _utils.selectTable)(state.tr).setMeta('addToHistory', false));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hoverTable", function () {
+      var _this$props$editorVie3 = _this.props.editorView,
+        state = _this$props$editorVie3.state,
+        dispatch = _this$props$editorVie3.dispatch;
+      (0, _commands.hoverTable)()(state, dispatch);
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(CornerControlComponent, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        isInDanger = _this$props2.isInDanger,
+        tableRef = _this$props2.tableRef,
+        isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
+        isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
+        formatMessage = _this$props2.intl.formatMessage;
+      if (!tableRef) {
+        return null;
+      }
+      var isActive = this.isActive();
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(_types.TableCssClassName.CORNER_CONTROLS, {
+          active: isActive,
+          sticky: this.props.stickyTop !== undefined
+        }),
+        style: {
+          top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
+        },
+        contentEditable: false
+      }, /*#__PURE__*/_react.default.createElement("button", {
+        "aria-label": formatMessage(_messages.default.cornerControl),
+        type: "button",
+        className: (0, _classnames.default)(_types.TableCssClassName.CONTROLS_CORNER_BUTTON, {
+          danger: isActive && isInDanger
+        }),
+        onClick: this.selectTable,
+        onMouseOver: this.hoverTable,
+        onMouseOut: this.clearHoverSelection
+      }), !isHeaderRowEnabled && /*#__PURE__*/_react.default.createElement("div", {
+        className: _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _types.TableCssClassName.CONTROLS_INSERT_MARKER
+      })), !isHeaderColumnEnabled && /*#__PURE__*/_react.default.createElement("div", {
+        className: _types.TableCssClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _types.TableCssClassName.CONTROLS_INSERT_MARKER
+      })));
+    }
+  }]);
+  return CornerControlComponent;
+}(_react.Component);
+var CornerControls = exports.CornerControls = (0, _reactIntlNext.injectIntl)(CornerControlComponent);

package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragCornerControls = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactIntlNext = require("react-intl-next");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _commands = require("../../../commands");
+var _types = require("../../../types");
+var _messages = _interopRequireDefault(require("../../messages"));
+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; }
+var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
+  var editorView = _ref.editorView,
+    isInDanger = _ref.isInDanger,
+    formatMessage = _ref.intl.formatMessage;
+  var handleOnClick = function handleOnClick() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    dispatch((0, _utils.selectTable)(state.tr).setMeta('addToHistory', false));
+  };
+  var handleMouseOver = function handleMouseOver() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    (0, _commands.hoverTable)()(state, dispatch);
+  };
+  var handleMouseOut = function handleMouseOut() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    (0, _commands.clearHoverSelection)()(state, dispatch);
+  };
+  var isActive = (0, _react.useMemo)(function () {
+    var selection = editorView.state.selection;
+    var table = (0, _utils.findTable)(selection);
+    if (!table) {
+      return false;
+    }
+    return (0, _utils.isTableSelected)(selection);
+  }, [editorView.state]);
+  return /*#__PURE__*/_react.default.createElement("button", {
+    className: (0, _classnames.default)(_types.TableCssClassName.DRAG_CORNER_BUTTON, {
+      active: isActive,
+      danger: isActive && isInDanger
+    }),
+    "aria-label": formatMessage(_messages.default.cornerControl),
+    type: "button",
+    onClick: handleOnClick,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    contentEditable: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER
+  }));
+};
+var DragCornerControls = exports.DragCornerControls = (0, _reactIntlNext.injectIntl)(DragCornerControlsComponent);

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

@@ -1,120 +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.CornerControls = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactIntlNext = require("react-intl-next");
-var _tableMap = require("@atlaskit/editor-tables/table-map");
-var _utils = require("@atlaskit/editor-tables/utils");
-var _commands = require("../../../commands");
-var _types = require("../../../types");
-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; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-var messages = (0, _reactIntlNext.defineMessages)({
-  cornerControl: {
-    id: 'fabric.editor.cornerControl',
-    defaultMessage: 'Highlight table',
-    description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
+Object.defineProperty(exports, "CornerControls", {
+  enumerable: true,
+  get: function get() {
+    return _ClassicCornerControls.CornerControls;
   }
 });
-var CornerControlComponent = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(CornerControlComponent, _Component);
-  var _super = _createSuper(CornerControlComponent);
-  function CornerControlComponent() {
-    var _this;
-    (0, _classCallCheck2.default)(this, CornerControlComponent);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isActive", function () {
-      var _this$props = _this.props,
-        editorView = _this$props.editorView,
-        hoveredRows = _this$props.hoveredRows,
-        isResizing = _this$props.isResizing;
-      var selection = editorView.state.selection;
-      var table = (0, _utils.findTable)(selection);
-      if (!table) {
-        return false;
-      }
-      return (0, _utils.isTableSelected)(selection) || hoveredRows && hoveredRows.length === _tableMap.TableMap.get(table.node).height && !isResizing;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clearHoverSelection", function () {
-      var _this$props$editorVie = _this.props.editorView,
-        state = _this$props$editorVie.state,
-        dispatch = _this$props$editorVie.dispatch;
-      (0, _commands.clearHoverSelection)()(state, dispatch);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectTable", function () {
-      var _this$props$editorVie2 = _this.props.editorView,
-        state = _this$props$editorVie2.state,
-        dispatch = _this$props$editorVie2.dispatch;
-      dispatch((0, _utils.selectTable)(state.tr).setMeta('addToHistory', false));
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hoverTable", function () {
-      var _this$props$editorVie3 = _this.props.editorView,
-        state = _this$props$editorVie3.state,
-        dispatch = _this$props$editorVie3.dispatch;
-      (0, _commands.hoverTable)()(state, dispatch);
-    });
-    return _this;
+Object.defineProperty(exports, "DragCornerControls", {
+  enumerable: true,
+  get: function get() {
+    return _DragCornerControls.DragCornerControls;
   }
-  (0, _createClass2.default)(CornerControlComponent, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        isInDanger = _this$props2.isInDanger,
-        tableRef = _this$props2.tableRef,
-        isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
-        isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
-        formatMessage = _this$props2.intl.formatMessage;
-      if (!tableRef) {
-        return null;
-      }
-      var isActive = this.isActive();
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(_types.TableCssClassName.CORNER_CONTROLS, {
-          active: isActive,
-          sticky: this.props.stickyTop !== undefined
-        }),
-        style: {
-          top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
-        },
-        contentEditable: false
-      }, /*#__PURE__*/_react.default.createElement("button", {
-        "aria-label": formatMessage(messages.cornerControl),
-        type: "button",
-        className: (0, _classnames.default)(_types.TableCssClassName.CONTROLS_CORNER_BUTTON, {
-          danger: isActive && isInDanger
-        }),
-        onClick: this.selectTable,
-        onMouseOver: this.hoverTable,
-        onMouseOut: this.clearHoverSelection
-      }), !isHeaderRowEnabled && /*#__PURE__*/_react.default.createElement("div", {
-        className: _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: _types.TableCssClassName.CONTROLS_INSERT_MARKER
-      })), !isHeaderColumnEnabled && /*#__PURE__*/_react.default.createElement("div", {
-        className: _types.TableCssClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: _types.TableCssClassName.CONTROLS_INSERT_MARKER
-      })));
-    }
-  }]);
-  return CornerControlComponent;
-}(_react.Component);
-var CornerControls = exports.CornerControls = (0, _reactIntlNext.injectIntl)(CornerControlComponent);
+});
+var _ClassicCornerControls = require("./ClassicCornerControls");
+var _DragCornerControls = require("./DragCornerControls");

package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -98,13 +98,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
       className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
       contentEditable: false,
       key: index
-    }, !hasHeaderRow && index === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        top: '0px',
-        left: "var(--ds-space-075, 6px)"
-      },
-      className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT
-    }), /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT
     }));
   }), !isResizing && Number.isFinite(rowIndex) && /*#__PURE__*/_react.default.createElement("div", {