@atlaskit/editor-plugin-table 7.16.8 → 7.16.10

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

@@ -76,81 +76,85 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
   }
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
   var wrapperClassName = isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: wrapperClassName
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    onMouseDown: function onMouseDown(e) {
-      return !isDragAndDropEnabled && e.preventDefault();
-    }
-  }, isNumberColumnEnabled ? /*#__PURE__*/_react.default.createElement(_NumberColumn.default, {
-    editorView: editorView,
-    hoverRows: _hoverRows,
-    tableRef: tableRef,
-    tableActive: tableActive,
-    hoveredRows: hoveredRows,
-    hasHeaderRow: hasHeaderRow,
-    isInDanger: isInDanger,
-    isResizing: isResizing,
-    selectRow: _selectRow,
-    updateCellHoverLocation: updateCellHoverLocation,
-    stickyTop: stickyTop,
-    isDragAndDropEnabled: isDragAndDropEnabled
-  }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/_react.default.createElement(_CornerControls.DragCornerControlsWithSelection, {
-    editorView: editorView,
-    tableRef: tableRef,
-    isInDanger: isInDanger,
-    isResizing: isResizing,
-    api: api
-  }) : /*#__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,
-    isTableHovered: isTableHovered,
-    editorView: editorView,
-    tableActive: tableActive,
-    isInDanger: isInDanger,
-    isResizing: isResizing,
-    tableWidth: tableWrapperWidth,
-    hoverRows: _hoverRows,
-    selectRow: _selectRow,
-    selectRows: _selectRows,
-    updateCellHoverLocation: updateCellHoverLocation
-  })) : (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/_react.default.createElement(_FloatingControlsWithSelection.FloatingControlsWithSelection, {
-    editorView: editorView,
-    tableRef: tableRef,
-    isInDanger: isInDanger,
-    isResizing: isResizing,
-    isHeaderRowEnabled: isHeaderRowEnabled,
-    isHeaderColumnEnabled: isHeaderColumnEnabled,
-    hoveredRows: hoveredRows,
-    stickyTop: tableActive ? stickyTop : undefined,
-    tableActive: tableActive,
-    hoverRows: _hoverRows,
-    selectRow: _selectRow,
-    api: api
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
-    editorView: editorView,
-    tableRef: tableRef,
-    isInDanger: isInDanger,
-    isResizing: isResizing,
-    isHeaderRowEnabled: isHeaderRowEnabled,
-    isHeaderColumnEnabled: isHeaderColumnEnabled,
-    hoveredRows: hoveredRows,
-    stickyTop: tableActive ? stickyTop : undefined
-  }), /*#__PURE__*/_react.default.createElement(_RowControls.RowControls, {
-    editorView: editorView,
-    tableRef: tableRef,
-    hoverRows: _hoverRows,
-    hoveredRows: hoveredRows,
-    isInDanger: isInDanger,
-    isResizing: isResizing,
-    selectRow: _selectRow,
-    stickyTop: tableActive ? stickyTop : undefined
-  })))));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    _react.default.createElement("div", {
+      className: wrapperClassName
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      onMouseDown: function onMouseDown(e) {
+        return !isDragAndDropEnabled && e.preventDefault();
+      }
+    }, isNumberColumnEnabled ? /*#__PURE__*/_react.default.createElement(_NumberColumn.default, {
+      editorView: editorView,
+      hoverRows: _hoverRows,
+      tableRef: tableRef,
+      tableActive: tableActive,
+      hoveredRows: hoveredRows,
+      hasHeaderRow: hasHeaderRow,
+      isInDanger: isInDanger,
+      isResizing: isResizing,
+      selectRow: _selectRow,
+      updateCellHoverLocation: updateCellHoverLocation,
+      stickyTop: stickyTop,
+      isDragAndDropEnabled: isDragAndDropEnabled
+    }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/_react.default.createElement(_CornerControls.DragCornerControlsWithSelection, {
+      editorView: editorView,
+      tableRef: tableRef,
+      isInDanger: isInDanger,
+      isResizing: isResizing,
+      api: api
+    }) : /*#__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,
+      isTableHovered: isTableHovered,
+      editorView: editorView,
+      tableActive: tableActive,
+      isInDanger: isInDanger,
+      isResizing: isResizing,
+      tableWidth: tableWrapperWidth,
+      hoverRows: _hoverRows,
+      selectRow: _selectRow,
+      selectRows: _selectRows,
+      updateCellHoverLocation: updateCellHoverLocation
+    })) : (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/_react.default.createElement(_FloatingControlsWithSelection.FloatingControlsWithSelection, {
+      editorView: editorView,
+      tableRef: tableRef,
+      isInDanger: isInDanger,
+      isResizing: isResizing,
+      isHeaderRowEnabled: isHeaderRowEnabled,
+      isHeaderColumnEnabled: isHeaderColumnEnabled,
+      hoveredRows: hoveredRows,
+      stickyTop: tableActive ? stickyTop : undefined,
+      tableActive: tableActive,
+      hoverRows: _hoverRows,
+      selectRow: _selectRow,
+      api: api
+    }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
+      editorView: editorView,
+      tableRef: tableRef,
+      isInDanger: isInDanger,
+      isResizing: isResizing,
+      isHeaderRowEnabled: isHeaderRowEnabled,
+      isHeaderColumnEnabled: isHeaderColumnEnabled,
+      hoveredRows: hoveredRows,
+      stickyTop: tableActive ? stickyTop : undefined
+    }), /*#__PURE__*/_react.default.createElement(_RowControls.RowControls, {
+      editorView: editorView,
+      tableRef: tableRef,
+      hoverRows: _hoverRows,
+      hoveredRows: hoveredRows,
+      isInDanger: isInDanger,
+      isResizing: isResizing,
+      selectRow: _selectRow,
+      stickyTop: tableActive ? stickyTop : undefined
+    })))))
+  );
 };
 var _default = exports.default = TableFloatingControls;

package/dist/cjs/ui/icons/DragHandleDisabledIcon.js

@@ -13,7 +13,9 @@ var DragHandleDisabledIcon = exports.DragHandleDisabledIcon = function DragHandl
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+    xmlns: "http://www.w3.org/2000/svg"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style,
     "data-testid": "drag-icon-disabled"
   }, /*#__PURE__*/_react.default.createElement("rect", {

package/dist/cjs/ui/icons/DragInMotionIcon.js

@@ -13,7 +13,9 @@ var DragInMotionIcon = exports.DragInMotionIcon = function DragInMotionIcon(_ref
     height: "20",
     viewBox: "0 0 28 20",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+    xmlns: "http://www.w3.org/2000/svg"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style
   }, /*#__PURE__*/_react.default.createElement("rect", {
     x: "1",

package/dist/cjs/ui/icons/MinimisedHandle.js

@@ -14,6 +14,7 @@ var MinimisedHandleIcon = exports.MinimisedHandleIcon = function MinimisedHandle
     height: "5",
     fill: "none"
   }, /*#__PURE__*/_react.default.createElement("rect", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: _types.TableCssClassName.DRAG_HANDLE_MINIMISED,
     width: "24",
     height: "5",

package/dist/cjs/utils/guidelines.js

@@ -12,7 +12,10 @@ var _snapping = require("./snapping");
 // If we don't do this then the guidelines will not align correctly to the edge of the table
 var defaultGuidelines = exports.defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultSnappings)(-1))));
 var defaultGuidelinesForPreserveTable = exports.defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
-  var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var lengths = (0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth, excludeInnerGuidelines);
+  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    innerGuidelines: false,
+    breakoutPoints: false
+  };
+  var lengths = (0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth, exclude);
   return (0, _guideline.createFixedGuidelinesFromLengths)(lengths, undefined, true);
 };

package/dist/cjs/utils/snapping.js

@@ -19,24 +19,33 @@ var calculateDefaultSnappings = exports.calculateDefaultSnappings = function cal
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, _editorSharedStyles.akEditorFullWidthLayoutWidth + lengthOffset]);
 };
-
 // FF TablePreserve for calculateDefaultSnappings
 var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorFullWidthLayoutWidth;
-  var excludeInnerGuidelines = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    innerGuidelines: false,
+    breakoutPoints: false
+  };
   var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _consts.tableResizerWidth;
-  if (excludeInnerGuidelines) {
-    return [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
+  var guides = [dynamicFullWidthLine - lengthOffset];
+  if (!exclude.breakoutPoints) {
+    guides.unshift(_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset);
   }
-  return [0].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
+  if (!exclude.innerGuidelines) {
+    guides.unshift.apply(guides, [0].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset))));
+  }
+  return guides;
 };
 var defaultSnappingWidths = exports.defaultSnappingWidths = calculateDefaultSnappings();
 
 // FF TablePreserve for defaultSnappingWidths
 var defaultTablePreserveSnappingWidths = exports.defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
-  var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, excludeInnerGuidelines);
+  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    innerGuidelines: false,
+    breakoutPoints: false
+  };
+  return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, exclude);
 };
 
 /**

package/dist/es2019/nodeviews/ExternalDropTargets.js

@@ -39,16 +39,20 @@ export const ExternalDropTargets = ({
   return /*#__PURE__*/React.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: `-${dropTargetExtendedWidth - tableMarginTop}px`,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       pointerEvents: 'auto',
       zIndex: `${dropTargetsZIndex}`
     },
     "data-testid": "table-floating-column-extended-drop-targets"
   }, /*#__PURE__*/React.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/es2019/nodeviews/TableComponent.js

@@ -736,7 +736,9 @@ class TableComponent extends React.Component {
     const {
       stickyScrollbar
     } = getEditorFeatureFlags();
-    return /*#__PURE__*/React.createElement(TableContainer, {
+    return /*#__PURE__*/React.createElement(TableContainer
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: classnames(ClassName.TABLE_CONTAINER, {
         [ClassName.WITH_CONTROLS]: allowControls && tableActive,
         [ClassName.TABLE_STICKY]: this.state.stickyHeader && hasHeaderRow,
@@ -757,9 +759,11 @@ class TableComponent extends React.Component {
       isWholeTableInDanger: isWholeTableInDanger,
       isTableAlignmentEnabled: isTableAlignmentEnabled
     }, /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,
       "data-testid": "sticky-sentinel-top"
     }), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
       "data-testid": "sticky-scrollbar-sentinel-top"
     }), allowControls && rowControls, isDragAndDropEnabled && /*#__PURE__*/React.createElement(ExternalDropTargets, {
@@ -774,10 +778,15 @@ class TableComponent extends React.Component {
         return ((_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.clientWidth) || 760;
       }
     }), /*#__PURE__*/React.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: ClassName.TABLE_LEFT_SHADOW
     }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: `${ClassName.TABLE_LEFT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,
       style: {
         visibility: showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
@@ -785,6 +794,7 @@ class TableComponent extends React.Component {
         paddingBottom: `${isDragAndDropEnabled && "var(--ds-space-025, 2px)"}`
       }
     }), /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: classnames(ClassName.TABLE_NODE_WRAPPER),
       ref: elem => {
         this.wrapper = elem;
@@ -799,10 +809,13 @@ class TableComponent extends React.Component {
         }
       }
     }, allowControls && colControls), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.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%'
@@ -810,18 +823,26 @@ class TableComponent extends React.Component {
     }, /*#__PURE__*/React.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.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: ClassName.TABLE_RIGHT_SHADOW
     }), this.state.stickyHeader && /*#__PURE__*/React.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.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: `${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,
       style: {
         visibility: showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
@@ -829,9 +850,11 @@ class TableComponent extends React.Component {
         paddingBottom: `${isDragAndDropEnabled && "var(--ds-space-025, 2px)"}`
       }
     })), /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
       "data-testid": "sticky-sentinel-bottom"
     }), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
       "data-testid": "sticky-scrollbar-sentinel-bottom"
     }));

package/dist/es2019/nodeviews/TableContainer.js

@@ -13,8 +13,12 @@ export const InnerContainer = /*#__PURE__*/forwardRef(({
   children
 }, ref) => {
   return /*#__PURE__*/React.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,
@@ -37,10 +41,14 @@ const AlignmentTableContainer = ({
   const style = useMemo(() => {
     return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
   }, [alignment]);
-  return /*#__PURE__*/React.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.createElement("div", {
+      "data-testid": "table-alignment-container",
+      style: style
+    }, children)
+  );
 };
 const AlignmentTableContainerWrapper = ({
   isTableAlignmentEnabled,
@@ -51,7 +59,9 @@ const AlignmentTableContainerWrapper = ({
     return /*#__PURE__*/React.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);
@@ -172,12 +182,18 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
       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: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
-  }, isLivePageViewMode ? /*#__PURE__*/React.createElement(InnerContainer, {
+  }, isLivePageViewMode ? /*#__PURE__*/React.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'
     }
@@ -207,7 +223,9 @@ export const TableContainer = ({
   isTableAlignmentEnabled
 }) => {
   if (isTableResizingEnabled && !isNested) {
-    return /*#__PURE__*/React.createElement(ResizableTableContainer, {
+    return /*#__PURE__*/React.createElement(ResizableTableContainer
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       node: node,
       containerWidth: editorWidth,
@@ -224,11 +242,14 @@ export const TableContainer = ({
     }, children);
   }
   return /*#__PURE__*/React.createElement(InnerContainer, {
-    node: node,
+    node: node
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: classNames(className, {
       'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested
     }),
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       width: 'inherit'
     }
   }, children);

package/dist/es2019/nodeviews/TableResizer.js

@@ -118,19 +118,23 @@ export const TableResizer = ({
     endMeasure,
     countFrames
   } = useMeasureFramerate();
+  const excludeGuidelineConfig = useMemo(() => ({
+    innerGuidelines: !!isTableAlignmentEnabled,
+    breakoutPoints: !!(isTableAlignmentEnabled && tableState !== null && tableState !== void 0 && tableState.isFullWidthModeEnabled)
+  }), [tableState, isTableAlignmentEnabled]);
   const updateActiveGuidelines = useCallback(({
     gap,
     keys
   }) => {
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
+      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
-    x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths
-  } : undefined, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
+    x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
+  } : undefined, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth]);
   const switchToCenterAlignment = useCallback((pos, node, newWidth, state, dispatch) => {
     if (isTableAlignmentEnabled && node && node.attrs.layout === ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
     // We don't want to switch alignment in Full-width editor
@@ -188,12 +192,12 @@ export const TableResizer = ({
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
+    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, onResizeStart]);
   const handleResize = useCallback((originalState, delta) => {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -213,7 +217,7 @@ export const TableResizer = ({
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
     updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
@@ -222,7 +226,7 @@ export const TableResizer = ({
       dispatch
     } = editorView;
     const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
-    const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled).filter(guideline => guideline.isFullWidth)[0];
+    const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig).filter(guideline => guideline.isFullWidth)[0];
     const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
     const shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
     chainCommands((state, dispatch) => {
@@ -232,7 +236,7 @@ export const TableResizer = ({
     }))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
+  }, [countFrames, isTableScalingEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
     var _node$attrs$localId2, _node$attrs2;

package/dist/es2019/toolbar.js

@@ -317,7 +317,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
     let alignmentMenu;
     const isNested = pluginState.tablePos && 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) : [];
     let cellItems;
     cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
     let columnSettingsItems;
@@ -564,7 +564,7 @@ const highlightColumnsHandler = (state, dispatch) => {
 };
 export const getAlignmentOptionsConfig = (editorState, {
   formatMessage
-}, editorAnalyticsAPI) => {
+}, editorAnalyticsAPI, getEditorContainerWidth) => {
   const tableObject = findTable(editorState.selection);
   if (!tableObject) {
     return [];
@@ -597,7 +597,10 @@ export const getAlignmentOptionsConfig = (editorState, {
       icon: icon,
       title: formatMessage(layoutToMessages[value]),
       selected: normaliseAlignment(currentLayout) === value,
-      onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB)
+      onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB),
+      ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
+        disabled: value !== 'center'
+      })
     };
   });
   const alignmentItemOptions = {
@@ -623,4 +626,11 @@ export const getAlignmentOptionsConfig = (editorState, {
 export const getSelectedAlignmentIcon = (alignmentIcons, selectedNode) => {
   const selectedAlignment = selectedNode.attrs.layout;
   return alignmentIcons.find(icon => icon.value === normaliseAlignment(selectedAlignment));
+};
+export const isLayoutOptionDisabled = (selectedNode, getEditorContainerWidth) => {
+  const lineLength = getEditorContainerWidth().lineLength;
+  if (selectedNode && lineLength && selectedNode.attrs.width > lineLength) {
+    return true;
+  }
+  return false;
 };

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

@@ -16,6 +16,7 @@ export const ColumnResizeWidget = ({
   } = useIntl();
   if (!includeTooltip) {
     return jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex
@@ -31,6 +32,7 @@ export const ColumnResizeWidget = ({
     position: "mouse",
     mousePosition: "auto-start"
   }, tooltipProps => jsx("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: TableCssClassName.RESIZE_HANDLE_DECORATION,
     "data-start-index": startIndex,
     "data-end-index": endIndex