@atlaskit/editor-plugin-table 7.16.7 → 7.16.9

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/es2019/commands/misc.js

@@ -563,4 +563,14 @@ export const setTableAlignment = newAlignment => ({
   };
   tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
   return tr;
+};
+export const setTableAlignmentWithTableContentWithPos = (newAlignment, tableNodeWithPos) => ({
+  tr
+}) => {
+  const nextTableAttrs = {
+    ...tableNodeWithPos.node.attrs,
+    layout: newAlignment
+  };
+  tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
+  return tr;
 };

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);
@@ -65,6 +75,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   className,
   node,
   containerWidth,
+  lineLength,
   editorView,
   getPos,
   tableRef,
@@ -146,6 +157,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     width,
     maxWidth: maxResizerWidth,
     containerWidth,
+    lineLength,
     updateWidth,
     editorView,
     getPos,
@@ -170,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'
     }
@@ -189,7 +207,8 @@ export const TableContainer = ({
   node,
   className,
   containerWidth: {
-    width: editorWidth
+    width: editorWidth,
+    lineLength
   },
   editorView,
   getPos,
@@ -204,10 +223,13 @@ 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,
+      lineLength: lineLength,
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
@@ -220,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

@@ -8,18 +8,20 @@ import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keyma
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { browser } from '@atlaskit/editor-common/utils';
+import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { updateWidthToWidest } from '../commands/misc';
+import { setTableAlignmentWithTableContentWithPos, updateWidthToWidest } from '../commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
-import { normaliseAlignment } from '../utils/alignment';
+import { ALIGN_CENTER, ALIGN_START, normaliseAlignment } from '../utils/alignment';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
 import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
 const RESIZE_STEP_VALUE = 10;
+const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 const handles = {
   right: true
 };
@@ -73,6 +75,7 @@ export const TableResizer = ({
   width,
   maxWidth,
   containerWidth,
+  lineLength,
   updateWidth,
   onResizeStop,
   onResizeStart,
@@ -128,6 +131,22 @@ export const TableResizer = ({
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
     x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths
   } : undefined, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, 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
+    isResizing.current) {
+      const tableNodeWithPos = {
+        pos,
+        node
+      };
+      const tr = setTableAlignmentWithTableContentWithPos(ALIGN_CENTER, tableNodeWithPos)(state);
+      if (tr) {
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  }, [lineLength, isTableAlignmentEnabled, isResizing]);
   useEffect(() => {
     return () => {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
@@ -206,12 +225,14 @@ export const TableResizer = ({
     const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled).filter(guideline => guideline.isFullWidth)[0];
     const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
     const shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
-    updateWidthToWidest({
+    chainCommands((state, dispatch) => {
+      return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
+    }, updateWidthToWidest({
       [currentTableNodeLocalId]: shouldUpdateWidthToWidest
-    })(state, dispatch);
+    }))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? 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]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
     var _node$attrs$localId2, _node$attrs2;
@@ -365,7 +386,7 @@ export const TableResizer = ({
       (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 ? void 0 : _updateTooltip$curren.call(updateTooltip);
     }
   }, [width]);
-  const resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && normaliseAlignment(node.attrs.layout) === 'center' ? 2 : 1;
+  const resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && normaliseAlignment(node.attrs.layout) === ALIGN_CENTER ? 2 : 1;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
     ref: resizerRef,
     enable: handles,

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

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

@@ -148,7 +148,9 @@ const DragHandleComponent = ({
   }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
   const showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-    type: "button",
+    type: "button"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
     "data-testid": "table-drag-handle-clickable-zone-button",
     style: {
@@ -173,7 +175,9 @@ const DragHandleComponent = ({
     onClick: onClick
   }), /*#__PURE__*/React.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: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, {
       [ClassName.DRAG_HANDLE_DISABLED]: hasMergedCells
     }),
@@ -202,7 +206,10 @@ const DragHandleComponent = ({
     }
   }, appearance !== 'placeholder' ?
   //  cannot block pointer events in Firefox as it breaks Dragging functionality
-  browser.gecko ? /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps) : /*#__PURE__*/React.createElement("span", {
+  browser.gecko ? /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  React.createElement("span", {
     style: {
       pointerEvents: 'none'
     }

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

@@ -24,6 +24,7 @@ export const DragPreview = ({
     }
   }, /*#__PURE__*/React.createElement(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: `${marginLeft}px`,