@atlaskit/editor-plugin-table 7.16.7 → 7.16.9

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 7.16.9
+
+### Patch Changes
+
+-   [#103852](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103852)
+    [`a2972bca7951`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a2972bca7951) -
+    [ux] Table - Disable left align button when table's width is larger than line length
+
+## 7.16.8
+
+### Patch Changes
+
+-   [#103615](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103615)
+    [`fd239f714374`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fd239f714374) -
+    [ux] When table with left alignmnent is resized to be wider than line length, alignment
+    automatically changes to center.
+
 ## 7.16.7
 
 ### Patch Changes

package/dist/cjs/commands/misc.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setTableAlignment = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
+exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setTableAlignmentWithTableContentWithPos = exports.setTableAlignment = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -600,4 +600,14 @@ var setTableAlignment = exports.setTableAlignment = function setTableAlignment(n
     tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };
+};
+var setTableAlignmentWithTableContentWithPos = exports.setTableAlignmentWithTableContentWithPos = function setTableAlignmentWithTableContentWithPos(newAlignment, tableNodeWithPos) {
+  return function (_ref3) {
+    var tr = _ref3.tr;
+    var nextTableAttrs = _objectSpread(_objectSpread({}, tableNodeWithPos.node.attrs), {}, {
+      layout: newAlignment
+    });
+    tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
+    return tr;
+  };
 };

package/dist/cjs/nodeviews/ExternalDropTargets.js

@@ -50,16 +50,20 @@ var ExternalDropTargets = exports.ExternalDropTargets = function ExternalDropTar
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: getTableWrapperWidth(),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       overflow: 'hidden',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       position: 'absolute',
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: "-".concat(_consts.dropTargetExtendedWidth - _styles.tableMarginTop, "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       pointerEvents: 'auto',
       zIndex: "".concat(_consts.dropTargetsZIndex)
     },
     "data-testid": "table-floating-column-extended-drop-targets"
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       display: 'flex',
       // move drop targets based on table wrapper scroll
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview

package/dist/cjs/nodeviews/TableComponent.js

@@ -749,7 +749,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
       var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
         stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
-      return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer, {
+      return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      , {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (_classnames = {}, (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(view.state.selection)), _classnames)),
         editorView: view,
         getPos: getPos,
@@ -765,9 +767,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isWholeTableInDanger: isWholeTableInDanger,
         isTableAlignmentEnabled: isTableAlignmentEnabled
       }, /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
       }), stickyScrollbar && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
         "data-testid": "sticky-scrollbar-sentinel-top"
       }), allowControls && rowControls, isDragAndDropEnabled && /*#__PURE__*/_react.default.createElement(_ExternalDropTargets.ExternalDropTargets, {
@@ -782,10 +786,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           return ((_this4$wrapper3 = _this4.wrapper) === null || _this4$wrapper3 === void 0 ? void 0 : _this4$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
-        contentEditable: false,
-        style: shadowStyle(showBeforeShadow),
+        contentEditable: false
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: shadowStyle(showBeforeShadow)
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: _types.TableCssClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),
         style: {
           visibility: showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
@@ -793,6 +802,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           paddingBottom: "".concat(isDragAndDropEnabled && "var(--ds-space-025, 2px)")
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
           _this4.wrapper = elem;
@@ -807,10 +817,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           }
         }
       }, allowControls && colControls), stickyScrollbar && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         style: {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           height: "var(--ds-space-250, 20px)",
           // MAX_BROWSER_SCROLLBAR_HEIGHT
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           display: 'none',
           // prevent unwanted scroll during table resize without removing scrollbar container from the dom
           width: isResizing ? "var(--ds-space-0, 0px)" : '100%'
@@ -818,18 +831,26 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react.default.createElement("div", {
         style: {
           width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           height: '100%'
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
-        contentEditable: false,
-        style: shadowStyle(showAfterShadow),
+        contentEditable: false
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: shadowStyle(showAfterShadow)
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: _types.TableCssClassName.TABLE_RIGHT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
         style: {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           position: 'absolute',
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           right: "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),
         style: {
           visibility: showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
@@ -837,9 +858,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           paddingBottom: "".concat(isDragAndDropEnabled && "var(--ds-space-025, 2px)")
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM,
         "data-testid": "sticky-sentinel-bottom"
       }), stickyScrollbar && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"
       }));

package/dist/cjs/nodeviews/TableContainer.js

@@ -23,8 +23,12 @@ var InnerContainer = exports.InnerContainer = /*#__PURE__*/(0, _react.forwardRef
     node = _ref.node,
     children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
-    style: style,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: style
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-number-column": node.attrs.isNumberColumnEnabled,
     "data-layout": node.attrs.layout,
@@ -46,10 +50,14 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
   var style = (0, _react.useMemo)(function () {
     return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
   }, [alignment]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": "table-alignment-container",
-    style: style
-  }, children);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    _react.default.createElement("div", {
+      "data-testid": "table-alignment-container",
+      style: style
+    }, children)
+  );
 };
 var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_ref3) {
   var isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
@@ -59,7 +67,9 @@ var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_re
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-testid": "table-alignment-container",
       style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         display: 'flex',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         justifyContent: 'center'
       }
     }, children);
@@ -73,6 +83,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     className = _ref4.className,
     node = _ref4.node,
     containerWidth = _ref4.containerWidth,
+    lineLength = _ref4.lineLength,
     editorView = _ref4.editorView,
     getPos = _ref4.getPos,
     tableRef = _ref4.tableRef,
@@ -155,6 +166,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     width: width,
     maxWidth: maxResizerWidth,
     containerWidth: containerWidth,
+    lineLength: lineLength,
     updateWidth: updateWidth,
     editorView: editorView,
     getPos: getPos,
@@ -179,12 +191,18 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
       width: tableWidthRef.current,
       height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto',
       position: isLivePageViewMode ? 'relative' : 'unset'
-    },
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
-  }, isLivePageViewMode ? /*#__PURE__*/_react.default.createElement(InnerContainer, {
+  }, isLivePageViewMode ? /*#__PURE__*/_react.default.createElement(InnerContainer
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: className,
-    node: node,
+    node: node
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: {
       width: 'inherit'
     }
@@ -197,7 +215,9 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
   var children = _ref5.children,
     node = _ref5.node,
     className = _ref5.className,
-    editorWidth = _ref5.containerWidth.width,
+    _ref5$containerWidth = _ref5.containerWidth,
+    editorWidth = _ref5$containerWidth.width,
+    lineLength = _ref5$containerWidth.lineLength,
     editorView = _ref5.editorView,
     getPos = _ref5.getPos,
     tableRef = _ref5.tableRef,
@@ -210,10 +230,13 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
     isTableScalingEnabled = _ref5.isTableScalingEnabled,
     isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled;
   if (isTableResizingEnabled && !isNested) {
-    return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
+    return /*#__PURE__*/_react.default.createElement(ResizableTableContainer
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       node: node,
       containerWidth: editorWidth,
+      lineLength: lineLength,
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
@@ -226,11 +249,14 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
     }, children);
   }
   return /*#__PURE__*/_react.default.createElement(InnerContainer, {
-    node: node,
+    node: node
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: (0, _classnames.default)(className, {
       'less-padding': editorWidth < _editorSharedStyles.akEditorMobileBreakoutPoint && !isNested
     }),
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       width: 'inherit'
     }
   }, children);

package/dist/cjs/nodeviews/TableResizer.js

@@ -18,6 +18,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _utils = require("@atlaskit/editor-common/utils");
+var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _misc = require("../commands/misc");
@@ -34,6 +35,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RESIZE_STEP_VALUE = 10;
+var FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 var handles = {
   right: true
 };
@@ -88,6 +90,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     width = _ref.width,
     maxWidth = _ref.maxWidth,
     containerWidth = _ref.containerWidth,
+    lineLength = _ref.lineLength,
     updateWidth = _ref.updateWidth,
     onResizeStop = _ref.onResizeStop,
     onResizeStart = _ref.onResizeStart,
@@ -141,21 +144,37 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, isTableAlignmentEnabled) : _snapping.defaultSnappingWidths
     } : undefined;
   }, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
+  var switchToCenterAlignment = (0, _react.useCallback)(function (pos, node, newWidth, state, dispatch) {
+    if (isTableAlignmentEnabled && node && node.attrs.layout === _alignment.ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
+    // We don't want to switch alignment in Full-width editor
+    isResizing.current) {
+      var tableNodeWithPos = {
+        pos: pos,
+        node: node
+      };
+      var _tr = (0, _misc.setTableAlignmentWithTableContentWithPos)(_alignment.ALIGN_CENTER, tableNodeWithPos)(state);
+      if (_tr) {
+        dispatch(_tr);
+      }
+      return true;
+    }
+    return false;
+  }, [lineLength, isTableAlignmentEnabled, isResizing]);
   (0, _react.useEffect)(function () {
     return function () {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
         var dispatch = editorView.dispatch,
-          _tr = editorView.state.tr;
+          _tr2 = editorView.state.tr;
         displayGapCursor(true);
         displayGuideline([]);
-        _tr.setMeta(_tableWidth.pluginKey, {
+        _tr2.setMeta(_tableWidth.pluginKey, {
           resizing: false,
           tableLocalId: '',
           tableRef: null
         });
-        dispatch(_tr);
+        dispatch(_tr2);
       }
     };
   }, [editorView, displayGuideline, displayGapCursor]);
@@ -211,10 +230,12 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     })[0];
     var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
     var shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
-    (0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest))(state, dispatch);
+    (0, _commands.chainCommands)(function (state, dispatch) {
+      return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
+    }, (0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? _utils3.TABLE_MAX_WIDTH : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
+  }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
   var scheduleResize = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(handleResize);
   }, [handleResize]);
@@ -367,7 +388,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
     }
   }, [width]);
-  var resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && (0, _alignment.normaliseAlignment)(node.attrs.layout) === 'center' ? 2 : 1;
+  var resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && (0, _alignment.normaliseAlignment)(node.attrs.layout) === _alignment.ALIGN_CENTER ? 2 : 1;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
     ref: resizerRef,
     enable: handles,

package/dist/cjs/toolbar.js

@@ -5,8 +5,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getSelectedAlignmentIcon = exports.getLockBtnConfig = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = exports.getAlignmentOptionsConfig = void 0;
+exports.isLayoutOptionDisabled = exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getSelectedAlignmentIcon = exports.getLockBtnConfig = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = exports.getAlignmentOptionsConfig = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
 var _customSteps = require("@atlaskit/custom-steps");
@@ -40,8 +41,8 @@ var _utils4 = require("./utils");
 var _alignment = require("./utils/alignment");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsx jsx */
-
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
   var optionItem = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'item-checkbox' : 'item';
@@ -331,7 +332,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var alignmentMenu;
         var isNested = pluginState.tablePos && (0, _utils4.isTableNested)(state, pluginState.tablePos);
-        alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI) : [];
+        alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth) : [];
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
         var columnSettingsItems;
@@ -595,7 +596,7 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
   }
   return false;
 };
-var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI) {
+var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI, getEditorContainerWidth) {
   var formatMessage = _ref6.formatMessage;
   var tableObject = (0, _utils3.findTable)(editorState.selection);
   if (!tableObject) {
@@ -621,14 +622,16 @@ var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function get
       value = alignmentIcon.value,
       icon = alignmentIcon.icon;
     var currentLayout = tableObject.node.attrs.layout;
-    return {
+    return _objectSpread({
       id: id,
       type: 'button',
       icon: icon,
       title: formatMessage(layoutToMessages[value]),
       selected: (0, _alignment.normaliseAlignment)(currentLayout) === value,
       onClick: (0, _commandsWithAnalytics.setTableAlignmentWithAnalytics)(editorAnalyticsAPI)(value, currentLayout, _analytics.INPUT_METHOD.FLOATING_TB)
-    };
+    }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
+      disabled: value !== 'center'
+    });
   });
   var alignmentItemOptions = {
     render: function render(props) {
@@ -655,4 +658,11 @@ var getSelectedAlignmentIcon = exports.getSelectedAlignmentIcon = function getSe
   return alignmentIcons.find(function (icon) {
     return icon.value === (0, _alignment.normaliseAlignment)(selectedAlignment);
   });
+};
+var isLayoutOptionDisabled = exports.isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth) {
+  var lineLength = getEditorContainerWidth().lineLength;
+  if (selectedNode && lineLength && selectedNode.attrs.width > lineLength) {
+    return true;
+  }
+  return false;
 };

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

@@ -22,6 +22,7 @@ var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidge
     formatMessage = _useIntl.formatMessage;
   if (!includeTooltip) {
     return (0, _react.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex
@@ -38,6 +39,7 @@ var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidge
     mousePosition: "auto-start"
   }, function (tooltipProps) {
     return (0, _react.jsx)("div", (0, _extends2.default)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex

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

@@ -156,7 +156,9 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
   var showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
+    type: "button"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
     "data-testid": "table-drag-handle-clickable-zone-button",
     style: {
@@ -181,7 +183,9 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     onClick: onClick
   }), /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
-    id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
+    id: isDragMenuTarget ? showDragMenuAnchorId : undefined
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, (0, _defineProperty2.default)({}, _types.TableCssClassName.DRAG_HANDLE_DISABLED, hasMergedCells)),
     ref: dragHandleDivRef,
     style: {
@@ -208,7 +212,10 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     }
   }, appearance !== 'placeholder' ?
   //  cannot block pointer events in Firefox as it breaks Dragging functionality
-  _utils.browser.gecko ? /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps) : /*#__PURE__*/_react.default.createElement("span", {
+  _utils.browser.gecko ? /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  _react.default.createElement("span", {
     style: {
       pointerEvents: 'none'
     }

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

@@ -30,6 +30,7 @@ var DragPreview = exports.DragPreview = function DragPreview(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(_DragInMotionIcon.DragInMotionIcon, {
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       position: 'absolute',
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: "".concat(marginLeft, "px"),

package/dist/cjs/ui/FloatingContextualButton/FixedButton.js

@@ -101,19 +101,26 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
   _react.default.createElement("div", {
     ref: observerTargetRef,
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       position: 'absolute',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       top: "var(--ds-space-0, 0px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       left: "var(--ds-space-0, 0px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       width: "var(--ds-space-250, 20px)",
       // BUTTON_WIDTH
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       height: "var(--ds-space-250, 20px)" // BUTTON_WIDTH
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: fixedButtonRef,
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       position: 'fixed',
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: stickyHeader.top + stickyHeader.padding + offset * 2,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       zIndex: _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       left: calcLeftPos({
@@ -122,10 +129,14 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
         cellRefWidth: targetCellRef.clientWidth,
         offset: offset
       }),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       width: "var(--ds-space-250, 20px)",
       // BUTTON_WIDTH
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       height: "var(--ds-space-250, 20px)" // BUTTON_WIDTH
-    },
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON_FIXED
   }, children)), mountTo);
 };

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

@@ -54,7 +54,9 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   var labelCellOptions = formatMessage(_messages.tableMessages.cellOptions);
   var button = (0, _react2.jsx)("div", {
     css: [(0, _styles.tableFloatingCellButtonStyles)(), isContextualMenuOpen && (0, _styles.tableFloatingCellButtonSelectedStyles)()]
-  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+  }, (0, _react2.jsx)(_uiMenu.ToolbarButton
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,
     title: labelCellOptions,

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

@@ -94,12 +94,17 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             label: formatMessage(_messages.tableMessages.backgroundColor),
             size: "medium"
           })) : undefined,
-          elemAfter: (0, _react2.jsx)("div", {
+          elemAfter:
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          (0, _react2.jsx)("div", {
             className: _styles.DropdownMenuSharedCssClassName.SUBMENU
           }, (0, _react2.jsx)("div", {
-            css: (0, _styles2.cellColourPreviewStyles)(background),
+            css: (0, _styles2.cellColourPreviewStyles)(background)
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+            ,
             className: isDragAndDropEnabled ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && (0, _react2.jsx)("div", {
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
           }, (0, _react2.jsx)(_uiColor.ColorPalette, {

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

@@ -16,7 +16,10 @@ var DeleteButton = function DeleteButton(_ref) {
     removeLabel = _ref.removeLabel,
     formatMessage = _ref.intl.formatMessage;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP,
+    // 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
@@ -24,7 +27,9 @@ var DeleteButton = function DeleteButton(_ref) {
     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) {

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

@@ -209,9 +209,11 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
           });
           return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
             style: {
+              // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               position: 'fixed',
               // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               top: pos.top,
+              // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               zIndex: _consts.stickyRowZIndex,
               // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               left: rect.left + (pos.left || 0) - (this.state.selectionType === 'column' ? this.state.scrollLeft : 0) - (this.props.isNumberColumnEnabled ? _editorSharedStyles.akEditorTableNumberColumnWidth : 0)