@atlaskit/editor-plugin-table 7.16.8 → 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/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/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`,

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

@@ -93,19 +93,26 @@ export const FixedButton = ({
   React.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.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: akEditorTableCellOnStickyHeaderZIndex,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       left: calcLeftPos({
@@ -114,10 +121,14 @@ export const FixedButton = ({
         cellRefWidth: targetCellRef.clientWidth,
         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: ClassName.CONTEXTUAL_MENU_BUTTON_FIXED
   }, children)), mountTo);
 };

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

@@ -52,7 +52,9 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   const labelCellOptions = formatMessage(messages.cellOptions);
   const button = jsx("div", {
     css: [tableFloatingCellButtonStyles(), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles()]
-  }, jsx(ToolbarButton, {
+  }, jsx(ToolbarButton
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: ClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,
     title: labelCellOptions,

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

@@ -79,12 +79,17 @@ export class ContextualMenu extends Component {
             label: formatMessage(messages.backgroundColor),
             size: "medium"
           })) : undefined,
-          elemAfter: jsx("div", {
+          elemAfter:
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          jsx("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("div", {
-            css: cellColourPreviewStyles(background),
+            css: cellColourPreviewStyles(background)
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+            ,
             className: isDragAndDropEnabled ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && jsx("div", {
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: this.handleSubMenuRef
           }, jsx(ColorPalette, {

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

@@ -11,7 +11,10 @@ const DeleteButton = ({
     formatMessage
   }
 }) => /*#__PURE__*/React.createElement("div", {
-  className: ClassName.CONTROLS_DELETE_BUTTON_WRAP,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  className: ClassName.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
@@ -19,7 +22,9 @@ const DeleteButton = ({
   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: ClassName.CONTROLS_DELETE_BUTTON,
   onMouseDown: onClick,
   onMouseMove: e => e.preventDefault()

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

@@ -250,9 +250,11 @@ class FloatingDeleteButton extends Component {
         });
         return /*#__PURE__*/createPortal( /*#__PURE__*/React.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: 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 ? akEditorTableNumberColumnWidth : 0)