@atlaskit/editor-plugin-table 7.16.8 → 7.16.9

package/dist/esm/ui/TableFloatingControls/RowDropTarget/index.js

@@ -70,7 +70,9 @@ var RowDropTarget = function RowDropTarget(_ref) {
     });
   }, [index, localId]);
   return /*#__PURE__*/React.createElement("div", {
-    ref: dropTargetRef,
+    ref: dropTargetRef
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style,
     "data-drop-target-index": index,
     "data-drop-target-localid": localId,

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

@@ -66,81 +66,85 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
   }
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
   var wrapperClassName = isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
-  return /*#__PURE__*/React.createElement("div", {
-    className: wrapperClassName
-  }, /*#__PURE__*/React.createElement("div", {
-    onMouseDown: function onMouseDown(e) {
-      return !isDragAndDropEnabled && e.preventDefault();
-    }
-  }, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(NumberColumn, {
-    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.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, getBooleanFF('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
-    editorView: editorView,
-    tableRef: tableRef,
-    isInDanger: isInDanger,
-    isResizing: isResizing,
-    api: api
-  }) : /*#__PURE__*/React.createElement(DragCornerControls, {
-    editorView: editorView,
-    tableRef: tableRef,
-    isInDanger: isInDanger,
-    isResizing: isResizing
-  }), /*#__PURE__*/React.createElement(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
-  })) : getBooleanFF('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
-    editorView: editorView,
-    tableRef: tableRef,
-    isInDanger: isInDanger,
-    isResizing: isResizing,
-    isHeaderRowEnabled: isHeaderRowEnabled,
-    isHeaderColumnEnabled: isHeaderColumnEnabled,
-    hoveredRows: hoveredRows,
-    stickyTop: tableActive ? stickyTop : undefined
-  }), /*#__PURE__*/React.createElement(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.createElement("div", {
+      className: wrapperClassName
+    }, /*#__PURE__*/React.createElement("div", {
+      onMouseDown: function onMouseDown(e) {
+        return !isDragAndDropEnabled && e.preventDefault();
+      }
+    }, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(NumberColumn, {
+      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.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, getBooleanFF('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
+      editorView: editorView,
+      tableRef: tableRef,
+      isInDanger: isInDanger,
+      isResizing: isResizing,
+      api: api
+    }) : /*#__PURE__*/React.createElement(DragCornerControls, {
+      editorView: editorView,
+      tableRef: tableRef,
+      isInDanger: isInDanger,
+      isResizing: isResizing
+    }), /*#__PURE__*/React.createElement(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
+    })) : getBooleanFF('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
+      editorView: editorView,
+      tableRef: tableRef,
+      isInDanger: isInDanger,
+      isResizing: isResizing,
+      isHeaderRowEnabled: isHeaderRowEnabled,
+      isHeaderColumnEnabled: isHeaderColumnEnabled,
+      hoveredRows: hoveredRows,
+      stickyTop: tableActive ? stickyTop : undefined
+    }), /*#__PURE__*/React.createElement(RowControls, {
+      editorView: editorView,
+      tableRef: tableRef,
+      hoverRows: _hoverRows,
+      hoveredRows: hoveredRows,
+      isInDanger: isInDanger,
+      isResizing: isResizing,
+      selectRow: _selectRow,
+      stickyTop: tableActive ? stickyTop : undefined
+    })))))
+  );
 };
 export default TableFloatingControls;

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

@@ -6,7 +6,9 @@ export var DragHandleDisabledIcon = function DragHandleDisabledIcon(_ref) {
     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.createElement("rect", {

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

@@ -6,7 +6,9 @@ export var 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.createElement("rect", {
     x: "1",

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

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

package/dist/types/toolbar.d.ts

@@ -19,6 +19,7 @@ type AlignmentIcon = {
     value: AlignmentOptions;
     icon: React.ComponentClass<any>;
 };
-export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Array<FloatingToolbarDropdown<Command>>;
+export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorContainerWidth: GetEditorContainerWidth) => Array<FloatingToolbarDropdown<Command>>;
 export declare const getSelectedAlignmentIcon: (alignmentIcons: AlignmentIcon[], selectedNode: PMNode) => AlignmentIcon | undefined;
+export declare const isLayoutOptionDisabled: (selectedNode: PMNode, getEditorContainerWidth: GetEditorContainerWidth) => boolean;
 export {};

package/dist/types-ts4.5/toolbar.d.ts

@@ -19,6 +19,7 @@ type AlignmentIcon = {
     value: AlignmentOptions;
     icon: React.ComponentClass<any>;
 };
-export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Array<FloatingToolbarDropdown<Command>>;
+export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorContainerWidth: GetEditorContainerWidth) => Array<FloatingToolbarDropdown<Command>>;
 export declare const getSelectedAlignmentIcon: (alignmentIcons: AlignmentIcon[], selectedNode: PMNode) => AlignmentIcon | undefined;
+export declare const isLayoutOptionDisabled: (selectedNode: PMNode, getEditorContainerWidth: GetEditorContainerWidth) => boolean;
 export {};

package/docs/0-intro.tsx

@@ -13,6 +13,7 @@ ${createEditorUseOnlyNotice('Editor Plugin Table', [
 
 
   ${(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     <div style={{ marginTop: token('space.100', '8px') }}>
       <AtlassianInternalWarning />
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.8",
+  "version": "7.16.9",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/nodeviews/ExternalDropTargets.tsx

@@ -54,10 +54,13 @@ export const ExternalDropTargets = ({
     <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}`,
       }}
@@ -65,6 +68,7 @@ export const ExternalDropTargets = ({
     >
       <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/src/nodeviews/TableComponent.tsx

@@ -804,6 +804,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     return (
       <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,
@@ -825,11 +826,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isTableAlignmentEnabled={isTableAlignmentEnabled}
       >
         <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 && (
           <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"
           />
@@ -850,11 +853,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         )}
         <div
           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 && (
           <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:
@@ -867,6 +873,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           />
         )}
         <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;
@@ -885,9 +892,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         </div>
         {stickyScrollbar && (
           <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: token('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 ? token('space.0', '0px') : '100%',
@@ -896,6 +906,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             <div
               style={{
                 width: tableRef?.clientWidth,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
                 height: '100%',
               }}
             ></div>
@@ -903,17 +914,22 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         )}
         <div
           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 && (
           <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: token('space.400', '32px'), // tableOverflowShadowWidthWide
             }}
           >
             <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:
@@ -927,11 +943,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           </div>
         )}
         <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 && (
           <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/src/nodeviews/TableContainer.tsx

@@ -45,7 +45,9 @@ export const InnerContainer = forwardRef<
   return (
     <div
       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}
@@ -75,6 +77,7 @@ const AlignmentTableContainer = ({
   }, [alignment]);
 
   return (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     <div data-testid="table-alignment-container" style={style}>
       {children}
     </div>
@@ -93,7 +96,9 @@ const AlignmentTableContainerWrapper = ({
       <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',
         }}
       >
@@ -280,19 +285,23 @@ export const ResizableTableContainer = React.memo(
               : '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 ? (
             <InnerContainer
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
               className={className}
               node={node}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               style={{ width: 'inherit' }}
             >
               {children}
             </InnerContainer>
           ) : (
             <TableResizer {...tableResizerProps}>
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
               <InnerContainer className={className} node={node}>
                 {children}
               </InnerContainer>
@@ -342,6 +351,7 @@ export const TableContainer = ({
   if (isTableResizingEnabled && !isNested) {
     return (
       <ResizableTableContainer
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={className}
         node={node}
         containerWidth={editorWidth!}
@@ -364,10 +374,12 @@ export const TableContainer = ({
   return (
     <InnerContainer
       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',
       }}
     >

package/src/toolbar.tsx

@@ -487,7 +487,7 @@ export const getToolbarConfig =
 
       alignmentMenu =
         options?.isTableAlignmentEnabled && !isNested
-          ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI)
+          ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth)
           : [];
 
       let cellItems: Array<FloatingToolbarItem<Command>>;
@@ -900,6 +900,7 @@ export const getAlignmentOptionsConfig = (
   editorState: EditorState,
   { formatMessage }: ToolbarMenuContext,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  getEditorContainerWidth: GetEditorContainerWidth
 ): Array<FloatingToolbarDropdown<Command>> => {
   const tableObject = findTable(editorState.selection);
 
@@ -942,6 +943,7 @@ export const getAlignmentOptionsConfig = (
           currentLayout,
           INPUT_METHOD.FLOATING_TB
         ),
+        ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && { disabled: value !== 'center' }),
       };
     },
   );
@@ -988,3 +990,20 @@ export const getSelectedAlignmentIcon = (
     (icon) => icon.value === normaliseAlignment(selectedAlignment),
   );
 };
+
+export const isLayoutOptionDisabled = (
+  selectedNode: PMNode,
+  getEditorContainerWidth: GetEditorContainerWidth
+) => {
+  const lineLength = getEditorContainerWidth().lineLength;
+
+  if (
+    selectedNode &&
+    lineLength &&
+    selectedNode.attrs.width > lineLength
+  ) {
+    return true;
+  }
+
+  return false;
+};

package/src/ui/ColumnResizeWidget/index.tsx

@@ -27,6 +27,7 @@ export const ColumnResizeWidget = ({
   if (!includeTooltip) {
     return (
       <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}
@@ -49,6 +50,7 @@ export const ColumnResizeWidget = ({
     >
       {(tooltipProps) => (
         <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}

package/src/ui/DragHandle/index.tsx

@@ -213,6 +213,7 @@ const DragHandleComponent = ({
     <>
       <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={{
@@ -241,6 +242,7 @@ const DragHandleComponent = ({
       <button
         type="button"
         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,
@@ -279,6 +281,7 @@ const DragHandleComponent = ({
           browser.gecko ? (
             <HandleIconComponent {...handleIconProps} />
           ) : (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
             <span style={{ pointerEvents: 'none' }}>
               <HandleIconComponent {...handleIconProps} />
             </span>

package/src/ui/DragPreview/index.tsx

@@ -35,6 +35,7 @@ export const DragPreview = ({
     >
       <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/src/ui/FloatingContextualButton/FixedButton.tsx

@@ -144,19 +144,26 @@ export const FixedButton = ({
     <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: token('space.0', '0px'),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         left: token('space.0', '0px'),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         width: token('space.250', '20px'), // BUTTON_WIDTH
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         height: token('space.250', '20px'), // BUTTON_WIDTH
       }}
     >
       <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({
@@ -165,9 +172,12 @@ export const FixedButton = ({
             cellRefWidth: targetCellRef.clientWidth,
             offset,
           }),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           width: token('space.250', '20px'), // BUTTON_WIDTH
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           height: token('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}

package/src/ui/FloatingContextualButton/index.tsx

@@ -86,6 +86,7 @@ const FloatingContextualButtonInner = React.memo(
         ]}
       >
         <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/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -212,9 +212,11 @@ export class ContextualMenu extends Component<
           </span>
         ) : undefined,
         elemAfter: (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           <div className={DropdownMenuSharedCssClassName.SUBMENU}>
             <div
               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
@@ -223,6 +225,7 @@ export class ContextualMenu extends Component<
             />
             {isSubmenuOpen && (
               <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
                 className={ClassName.CONTEXTUAL_SUBMENU}
                 ref={this.handleSubMenuRef}
               >

package/src/ui/FloatingDeleteButton/DeleteButton.tsx

@@ -23,7 +23,9 @@ const DeleteButton = ({
   intl: { formatMessage },
 }: ButtonProps & WrappedComponentProps) => (
   <div
+// 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}
@@ -31,10 +33,12 @@ const DeleteButton = ({
     <button
       type="button"
       aria-label={formatMessage(removeLabel, { 0: 1 })}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className={ClassName.CONTROLS_DELETE_BUTTON}
       onMouseDown={onClick}
       onMouseMove={(e) => e.preventDefault()}
     >
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
       <svg className={ClassName.CONTROLS_BUTTON_ICON}>
         <path
           d="M12.242 10.828L9.414 8l2.828-2.829a.999.999 0 1 0-1.414-1.414L8 6.587l-2.829-2.83a1 1 0 0 0-1.414 1.414l2.83 2.83-2.83 2.827a1 1 0 0 0 1.414 1.414l2.83-2.828 2.827 2.828a.999.999 0 1 0 1.414-1.414"