@atlaskit/editor-plugin-table 8.1.1 → 8.2.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-table
 
+## 8.2.1
+
+### Patch Changes
+
+- [#169304](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169304)
+  [`305b55f6ac586`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/305b55f6ac586) -
+  Set alignment to center for tables during resizing, this fixes issues with tables in comment
+  editor where the width attribute defaults to inherit even if a table has been resized
+
+## 8.2.0
+
+### Minor Changes
+
+- [#169553](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169553)
+  [`4232aaa0d75e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4232aaa0d75e4) -
+  Fix type on resize handle for drag and drop table class name
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.1.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableResizer.js

@@ -22,6 +22,7 @@ var _resizer = require("@atlaskit/editor-common/resizer");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commandsWithAnalytics = require("../commands-with-analytics");
 var _misc = require("../commands/misc");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
@@ -322,9 +323,16 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     }
     if (typeof pos === 'number') {
       var _attachAnalyticsEvent2;
-      tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
-        width: newWidth
-      }));
+      if ((0, _platformFeatureFlags.fg)('platform_editor_set_alignment_when_resized')) {
+        tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          width: newWidth,
+          layout: node.attrs.layout !== _alignment.ALIGN_START && node.attrs.layout !== _alignment.ALIGN_CENTER ? _alignment.ALIGN_CENTER : node.attrs.layout
+        }));
+      } else {
+        tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          width: newWidth
+        }));
+      }
       var newNode = tr.doc.nodeAt(pos);
       tr = (0, _utils2.scaleTable)(tableRef, {
         node: newNode,
@@ -363,7 +371,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
+  }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, attachAnalyticsEvent, tableRef, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/cjs/types.js

@@ -158,7 +158,7 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-last-column-insert-line__inactive"),
   WITH_RESIZE_LINE: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line"),
   WITH_RESIZE_LINE_LAST_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line-last-column"),
-  WITH_DRAG_RESIZE_LINE: "".concat(_adfSchema.tablePrefixSelector, "-drag-column--resize-line"),
+  WITH_DRAG_RESIZE_LINE: "".concat(_adfSchema.tablePrefixSelector, "-drag-column-resize-line"),
   WITH_DRAG_RESIZE_LINE_LAST_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-drag-column-resize-line-last-column"),
   WITH_ROW_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-row-insert-line"),
   WITH_ROW_INSERT_LINE_INACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-row-insert-line__inactive"),

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

@@ -203,8 +203,12 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     "data-testid": "table-drag-handle-button",
     "aria-label": formatMessage(isRow ? _messages.tableMessages.rowDragHandle : _messages.tableMessages.columnDragHandle),
     "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
-    "aria-haspopup": "menu",
-    onMouseOver: onMouseOver,
+    "aria-haspopup": "menu"
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    ,
+    onMouseOver: onMouseOver
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    ,
     onMouseOut: onMouseOut,
     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

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -695,37 +695,40 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
       var isOpenAllowed = false;
       isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
-      return (0, _react2.jsx)("div", {
-        "data-testid": "table-cell-contextual-menu",
-        onMouseLeave: this.closeSubmenu,
-        ref: this.dropdownMenuRef
-      }, (0, _react2.jsx)(_uiMenu.DropdownMenu, {
-        mountTo: mountPoint
-        //This needs be removed when the a11y is completely handled
-        //Disabling key navigation now as it works only partially
-        ,
-        arrowKeyNavigationProviderOptions: {
-          type: _uiMenu.ArrowKeyNavigationType.MENU,
-          disableArrowKeyNavigation: !isCellMenuOpenByKeyboard || this.state.isSubmenuOpen
-        },
-        items: items,
-        isOpen: isOpenAllowed,
-        onOpenChange: this.handleOpenChange,
-        onItemActivated: this.onMenuItemActivated,
-        onMouseEnter: this.handleItemMouseEnter,
-        onMouseLeave: this.handleItemMouseLeave,
-        fitHeight: 188,
-        fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth,
-        shouldFocusFirstItem: function shouldFocusFirstItem() {
-          return Boolean(isCellMenuOpenByKeyboard);
-        },
-        boundariesElement: boundariesElement,
-        offset: offset,
-        section: isDragAndDropEnabled ? {
-          hasSeparator: true
-        } : undefined,
-        allowEnterDefaultBehavior: this.state.isSubmenuOpen
-      }));
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        (0, _react2.jsx)("div", {
+          "data-testid": "table-cell-contextual-menu",
+          onMouseLeave: this.closeSubmenu,
+          ref: this.dropdownMenuRef
+        }, (0, _react2.jsx)(_uiMenu.DropdownMenu, {
+          mountTo: mountPoint
+          //This needs be removed when the a11y is completely handled
+          //Disabling key navigation now as it works only partially
+          ,
+          arrowKeyNavigationProviderOptions: {
+            type: _uiMenu.ArrowKeyNavigationType.MENU,
+            disableArrowKeyNavigation: !isCellMenuOpenByKeyboard || this.state.isSubmenuOpen
+          },
+          items: items,
+          isOpen: isOpenAllowed,
+          onOpenChange: this.handleOpenChange,
+          onItemActivated: this.onMenuItemActivated,
+          onMouseEnter: this.handleItemMouseEnter,
+          onMouseLeave: this.handleItemMouseLeave,
+          fitHeight: 188,
+          fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth,
+          shouldFocusFirstItem: function shouldFocusFirstItem() {
+            return Boolean(isCellMenuOpenByKeyboard);
+          },
+          boundariesElement: boundariesElement,
+          offset: offset,
+          section: isDragAndDropEnabled ? {
+            hasSeparator: true
+          } : undefined,
+          allowEnterDefaultBehavior: this.state.isSubmenuOpen
+        }))
+      );
     }
   }]);
   return ContextualMenu;

package/dist/cjs/ui/FloatingDeleteButton/DeleteButton.js

@@ -15,32 +15,36 @@ var DeleteButton = function DeleteButton(_ref) {
     onMouseLeave = _ref.onMouseLeave,
     removeLabel = _ref.removeLabel,
     formatMessage = _ref.intl.formatMessage;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: style,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    "aria-label": formatMessage(removeLabel, {
-      0: 1
-    })
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: _types.TableCssClassName.CONTROLS_DELETE_BUTTON,
-    onMouseDown: onClick,
-    onMouseMove: function onMouseMove(e) {
-      return e.preventDefault();
-    }
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    className: _types.TableCssClassName.CONTROLS_BUTTON_ICON
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M12.242 10.828L9.414 8l2.828-2.829a.999.999 0 1 0-1.414-1.414L8 6.587l-2.829-2.83a1 1 0 0 0-1.414 1.414l2.83 2.83-2.83 2.827a1 1 0 0 0 1.414 1.414l2.83-2.828 2.827 2.828a.999.999 0 1 0 1.414-1.414",
-    fill: "currentColor",
-    fillRule: "evenodd"
-  }))));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _react.default.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: style,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      "aria-label": formatMessage(removeLabel, {
+        0: 1
+      })
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: _types.TableCssClassName.CONTROLS_DELETE_BUTTON,
+      onMouseDown: onClick,
+      onMouseMove: function onMouseMove(e) {
+        return e.preventDefault();
+      }
+    }, /*#__PURE__*/_react.default.createElement("svg", {
+      className: _types.TableCssClassName.CONTROLS_BUTTON_ICON
+    }, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M12.242 10.828L9.414 8l2.828-2.829a.999.999 0 1 0-1.414-1.414L8 6.587l-2.829-2.83a1 1 0 0 0-1.414 1.414l2.83 2.83-2.83 2.827a1 1 0 0 0 1.414 1.414l2.83-2.828 2.827 2.828a.999.999 0 1 0 1.414-1.414",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }))))
+  );
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(DeleteButton);

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

@@ -197,48 +197,52 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     return handles;
   };
   var containerWidth = isNumberColumnEnabled && tableContainerWidth ? tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableContainerWidth;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS,
-    onMouseMove: handleMouseMove
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: columnControlsRef
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER,
-    "data-testid": "table-floating-column-controls",
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      gridTemplateColumns: widths,
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      marginTop: marginTop,
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-      width: stickyTop ? containerWidth : undefined,
-      overflowX: stickyTop ? 'hidden' : 'visible',
-      pointerEvents: isDragging ? 'none' : undefined
-    }
-  }, columnParams.map(function (_ref2, index) {
-    var startIndex = _ref2.startIndex,
-      endIndex = _ref2.endIndex;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        gridColumn: "".concat(startIndex + 1, " / span 1")
-      },
-      "data-start-index": startIndex,
-      "data-end-index": endIndex
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _react.default.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
-      contentEditable: false,
-      key: index
+      className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS,
+      onMouseMove: handleMouseMove
     }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: columnControlsRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
-      style: columnParams.length - 1 === index ? {
-        right: '0'
-      } : {}
-    }));
-  }), columnHandles()));
+      className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER,
+      "data-testid": "table-floating-column-controls",
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        gridTemplateColumns: widths,
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        marginTop: marginTop,
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+        width: stickyTop ? containerWidth : undefined,
+        overflowX: stickyTop ? 'hidden' : 'visible',
+        pointerEvents: isDragging ? 'none' : undefined
+      }
+    }, columnParams.map(function (_ref2, index) {
+      var startIndex = _ref2.startIndex,
+        endIndex = _ref2.endIndex;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          gridColumn: "".concat(startIndex + 1, " / span 1")
+        },
+        "data-start-index": startIndex,
+        "data-end-index": endIndex
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
+        className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
+        contentEditable: false,
+        key: index
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: columnParams.length - 1 === index ? {
+          right: '0'
+        } : {}
+      }));
+    }), columnHandles()))
+  );
 };

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

@@ -100,8 +100,12 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
         className: (0, _classnames.default)(_types.TableCssClassName.CONTROLS_CORNER_BUTTON, {
           danger: isActive && isInDanger
         }),
-        onClick: this.selectTable,
-        onMouseOver: this.hoverTable,
+        onClick: this.selectTable
+        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+        ,
+        onMouseOver: this.hoverTable
+        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+        ,
         onMouseOut: this.clearHoverSelection
       }), !isHeaderRowEnabled &&
       /*#__PURE__*/

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

@@ -50,7 +50,9 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     }),
     "aria-label": formatMessage(_messages.tableMessages.cornerControl),
     type: "button",
-    onClick: handleOnClick,
+    onClick: handleOnClick
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    ,
     onMouseOut: handleMouseOut,
     contentEditable: false
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -96,7 +98,9 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     }),
     "aria-label": formatMessage(_messages.tableMessages.cornerControl),
     type: "button",
-    onClick: handleOnClick,
+    onClick: handleOnClick
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    ,
     onMouseOut: handleMouseOut,
     contentEditable: false
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js

@@ -123,7 +123,10 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
         },
         contentEditable: false
       }, rowHeights.map(function (rowHeight, index) {
-        return isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement("div", {
+        return isDragAndDropEnabled ?
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        _react.default.createElement("div", {
           key: "wrapper-".concat(index)
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           ,
@@ -131,11 +134,16 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
           "data-index": index
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           ,
-          style: _this2.getCellStyles(index, rowHeight),
+          style: _this2.getCellStyles(index, rowHeight)
+          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+          ,
           onMouseOver: function onMouseOver() {
             return updateCellHoverLocation(index);
           }
-        }, hasHeaderRow ? index > 0 ? index : null : index + 1) : /*#__PURE__*/_react.default.createElement("div", {
+        }, hasHeaderRow ? index > 0 ? index : null : index + 1) :
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        _react.default.createElement("div", {
           key: "wrapper-".concat(index)
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           ,
@@ -146,10 +154,14 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
           style: _this2.getCellStyles(index, rowHeight),
           onClick: function onClick(event) {
             return _this2.selectRow(index, event);
-          },
+          }
+          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+          ,
           onMouseOver: function onMouseOver() {
             return _this2.hoverRows(index);
-          },
+          }
+          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+          ,
           onMouseOut: _this2.clearHoverSelection
         }, hasHeaderRow ? index > 0 ? index : null : index + 1);
       }));

package/dist/cjs/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -102,10 +102,14 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
             className: "".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON, " ").concat(_types.TableCssClassName.CONTROLS_BUTTON),
             onClick: function onClick(event) {
               return _this2.props.selectRow(startIndex, event.shiftKey);
-            },
+            }
+            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+            ,
             onMouseOver: function onMouseOver() {
               return _this2.props.hoverRows([startIndex]);
-            },
+            }
+            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+            ,
             onMouseOut: _this2.clearHoverSelection,
             "data-start-index": startIndex,
             "data-end-index": endIndex

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

@@ -187,57 +187,61 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
   if (isResizing) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: _types.TableCssClassName.DRAG_ROW_CONTROLS,
-    style: {
-      gridTemplateRows: heights,
-      gridTemplateColumns: isDragging ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      "".concat(_consts.dropTargetExtendedWidth, "px 14px ").concat(tableWidth, "px") : '0px 14px 0px',
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-      left: isDragging ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      "-".concat(_consts.dropTargetExtendedWidth + 2, "px") : "var(--ds-space-negative-025, -2px)"
-    },
-    onMouseMove: handleMouseMove,
-    contentEditable: false
-  }, rowsParams.map(function (_ref4, index) {
-    var startIndex = _ref4.startIndex,
-      endIndex = _ref4.endIndex;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-      key: index
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        gridRow: "".concat(index + 1, " / span 1"),
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        gridColumn: '2'
-      },
-      "data-start-index": startIndex,
-      "data-end-index": endIndex
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _react.default.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
-      contentEditable: false,
-      key: "insert-dot-".concat(index)
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT
-    })), isDragging && /*#__PURE__*/_react.default.createElement(_RowDropTarget.default, {
-      key: "drop-target-".concat(index),
-      index: index,
-      localId: currentNodeLocalId,
+      className: _types.TableCssClassName.DRAG_ROW_CONTROLS,
       style: {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        gridColumn: '1 / span 3',
-        gridRow: "".concat(index + 1, " / span 1"),
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        height: '100%',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        pointerEvents: 'auto',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        position: 'relative',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        left: "var(--ds-space-negative-100, -8px)"
-      }
-    }));
-  }), rowHandles());
+        gridTemplateRows: heights,
+        gridTemplateColumns: isDragging ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        "".concat(_consts.dropTargetExtendedWidth, "px 14px ").concat(tableWidth, "px") : '0px 14px 0px',
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+        left: isDragging ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        "-".concat(_consts.dropTargetExtendedWidth + 2, "px") : "var(--ds-space-negative-025, -2px)"
+      },
+      onMouseMove: handleMouseMove,
+      contentEditable: false
+    }, rowsParams.map(function (_ref4, index) {
+      var startIndex = _ref4.startIndex,
+        endIndex = _ref4.endIndex;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: index
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          gridRow: "".concat(index + 1, " / span 1"),
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          gridColumn: '2'
+        },
+        "data-start-index": startIndex,
+        "data-end-index": endIndex
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
+        className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
+        contentEditable: false,
+        key: "insert-dot-".concat(index)
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT
+      })), isDragging && /*#__PURE__*/_react.default.createElement(_RowDropTarget.default, {
+        key: "drop-target-".concat(index),
+        index: index,
+        localId: currentNodeLocalId,
+        style: {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          gridColumn: '1 / span 3',
+          gridRow: "".concat(index + 1, " / span 1"),
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          height: '100%',
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          pointerEvents: 'auto',
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          position: 'relative',
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          left: "var(--ds-space-negative-100, -8px)"
+        }
+      }));
+    }), rowHandles())
+  );
 };
 var DragControls = exports.DragControls = (0, _reactIntlNext.injectIntl)(DragControlsComponent);

package/dist/es2019/nodeviews/TableResizer.js

@@ -12,6 +12,7 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
 import { updateWidthToWidest } from '../commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -317,10 +318,18 @@ export const TableResizer = ({
     }
     if (typeof pos === 'number') {
       var _attachAnalyticsEvent2;
-      tr = tr.setNodeMarkup(pos, undefined, {
-        ...node.attrs,
-        width: newWidth
-      });
+      if (fg('platform_editor_set_alignment_when_resized')) {
+        tr = tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          width: newWidth,
+          layout: node.attrs.layout !== ALIGN_START && node.attrs.layout !== ALIGN_CENTER ? ALIGN_CENTER : node.attrs.layout
+        });
+      } else {
+        tr = tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          width: newWidth
+        });
+      }
       const newNode = tr.doc.nodeAt(pos);
       tr = scaleTable(tableRef, {
         node: newNode,
@@ -359,7 +368,7 @@ export const TableResizer = ({
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
+  }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, attachAnalyticsEvent, tableRef, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/es2019/types.js

@@ -150,7 +150,7 @@ export const TableCssClassName = {
   WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-last-column-insert-line__inactive`,
   WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
   WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
-  WITH_DRAG_RESIZE_LINE: `${tablePrefixSelector}-drag-column--resize-line`,
+  WITH_DRAG_RESIZE_LINE: `${tablePrefixSelector}-drag-column-resize-line`,
   WITH_DRAG_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-drag-column-resize-line-last-column`,
   WITH_ROW_INSERT_LINE: `${tablePrefixSelector}-row-insert-line`,
   WITH_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-row-insert-line__inactive`,

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

@@ -198,8 +198,12 @@ const DragHandleComponent = ({
     "data-testid": "table-drag-handle-button",
     "aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
     "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
-    "aria-haspopup": "menu",
-    onMouseOver: onMouseOver,
+    "aria-haspopup": "menu"
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    ,
+    onMouseOver: onMouseOver
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    ,
     onMouseOut: onMouseOut,
     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