@atlaskit/editor-plugin-table 5.3.15 → 5.3.16

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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/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/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", {

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

@@ -177,7 +177,12 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         updateCellHoverLocation: this.updateCellHoverLocation,
         stickyTop: stickyTop,
         isDragAndDropEnabled: isDragAndDropEnabled
-      }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_RowControls.DragControls, {
+      }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.DragCornerControls, {
+        editorView: editorView,
+        tableRef: tableRef,
+        isInDanger: isInDanger,
+        isResizing: isResizing
+      }), /*#__PURE__*/_react.default.createElement(_RowControls.DragControls, {
         tableRef: tableRef,
         tableNode: tableNode,
         hoveredCell: hoveredCell,
@@ -189,7 +194,7 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         hoverRows: this.hoverRows,
         selectRow: this.selectRow,
         updateCellHoverLocation: this.updateCellHoverLocation
-      }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
+      })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
         editorView: editorView,
         tableRef: tableRef,
         isInDanger: isInDanger,