@atlaskit/editor-plugin-table 7.16.8 → 7.16.10

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.10",
   "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

@@ -688,7 +688,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       isDragAndDropEnabled,
       getEditorFeatureFlags,
       isTableScalingEnabled, // here we can use options.isTableScalingEnabled
-      isTableAlignmentEnabled
+      isTableAlignmentEnabled,
     } = this.props;
 
     let {
@@ -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/nodeviews/TableResizer.tsx

@@ -209,6 +209,16 @@ export const TableResizer = ({
 
   const { startMeasure, endMeasure, countFrames } = useMeasureFramerate();
 
+  const excludeGuidelineConfig = useMemo(
+    () => ({
+      innerGuidelines: !!isTableAlignmentEnabled,
+      breakoutPoints: !!(
+        isTableAlignmentEnabled && tableState?.isFullWidthModeEnabled
+      ),
+    }),
+    [tableState, isTableAlignmentEnabled],
+  );
+
   const updateActiveGuidelines = useCallback(
     ({ gap, keys }: { gap: number; keys: string[] }) => {
       if (gap !== currentGap.current) {
@@ -217,7 +227,7 @@ export const TableResizer = ({
           isTableScalingEnabled
             ? defaultGuidelinesForPreserveTable(
                 containerWidth,
-                isTableAlignmentEnabled,
+                excludeGuidelineConfig,
               )
             : defaultGuidelines,
           containerWidth,
@@ -235,7 +245,7 @@ export const TableResizer = ({
     },
     [
       isTableScalingEnabled,
-      isTableAlignmentEnabled,
+      excludeGuidelineConfig,
       containerWidth,
       displayGuideline,
     ],
@@ -248,7 +258,7 @@ export const TableResizer = ({
             x: isTableScalingEnabled
               ? defaultTablePreserveSnappingWidths(
                   containerWidth,
-                  isTableAlignmentEnabled,
+                  excludeGuidelineConfig,
                 )
               : defaultSnappingWidths,
           }
@@ -256,7 +266,7 @@ export const TableResizer = ({
     [
       snappingEnabled,
       isTableScalingEnabled,
-      isTableAlignmentEnabled,
+      excludeGuidelineConfig,
       containerWidth,
     ],
   );
@@ -334,7 +344,7 @@ export const TableResizer = ({
       isTableScalingEnabled
         ? defaultGuidelinesForPreserveTable(
             containerWidth,
-            isTableAlignmentEnabled,
+            excludeGuidelineConfig,
           )
         : defaultGuidelines,
       containerWidth,
@@ -351,7 +361,7 @@ export const TableResizer = ({
     node.attrs.localId,
     tableRef,
     isTableScalingEnabled,
-    isTableAlignmentEnabled,
+    excludeGuidelineConfig,
     containerWidth,
     displayGuideline,
     onResizeStart,
@@ -388,13 +398,13 @@ export const TableResizer = ({
         isTableScalingEnabled
           ? defaultTablePreserveSnappingWidths(
               containerWidth,
-              isTableAlignmentEnabled,
+              excludeGuidelineConfig,
             )
           : defaultSnappingWidths,
         isTableScalingEnabled
           ? defaultGuidelinesForPreserveTable(
               containerWidth,
-              isTableAlignmentEnabled,
+              excludeGuidelineConfig,
             )
           : defaultGuidelines,
         TABLE_HIGHLIGHT_GAP,
@@ -409,7 +419,7 @@ export const TableResizer = ({
 
       const fullWidthGuideline = defaultGuidelinesForPreserveTable(
         containerWidth,
-        isTableAlignmentEnabled,
+        excludeGuidelineConfig,
       ).filter((guideline) => guideline.isFullWidth)[0];
 
       const isFullWidthGuidelineActive = closestSnap.keys.includes(
@@ -434,7 +444,7 @@ export const TableResizer = ({
     [
       countFrames,
       isTableScalingEnabled,
-      isTableAlignmentEnabled,
+      excludeGuidelineConfig,
       tableRef,
       node,
       editorView,

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"

package/src/ui/FloatingDeleteButton/index.tsx

@@ -346,9 +346,11 @@ class FloatingDeleteButton extends Component<Props, State> {
         return createPortal(
           <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:

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -392,14 +392,17 @@ export const DragMenu = React.memo(
         ),
         elemAfter: (
           <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className={DropdownMenuSharedCssClassName.SUBMENU}
             css={dragMenuBackgroundColorStyles}
           >
             <div
               css={cellColourPreviewStyles(background)}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
               className={ClassName.DRAG_SUBMENU_ICON}
             />
             {isSubmenuOpen && (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
               <div className={ClassName.DRAG_SUBMENU} ref={handleSubMenuRef}>
                 <ArrowKeyNavigationProvider
                   type={ArrowKeyNavigationType.COLOR}

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -90,6 +90,7 @@ export const DropdownMenu = ({
         }}
         targetRef={targetRefDiv}
       >
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
         <div style={{ height: 0, minWidth: dragMenuDropdownWidth }} />
         <MenuGroup role="menu">
           {items.map((group, index) => (
@@ -116,7 +117,9 @@ export const DropdownMenu = ({
   };
 
   return (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     <div className="drag-dropdown-menu-wrapper">
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
       <div className="drag-dropdown-menu-popup-ref" ref={handleRef}></div>
       <Popup
         target={targetRefDiv as HTMLElement}

package/src/ui/FloatingInsertButton/InsertButton.tsx

@@ -124,6 +124,7 @@ export const InsertButtonForDragAndDrop = ({
     >
       <>
         <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className={classnames(ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, {
             [ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW]: isRow,
             [ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN]: !isRow,
@@ -131,10 +132,12 @@ export const InsertButtonForDragAndDrop = ({
         >
           <button
             type="button"
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className={ClassName.DRAG_CONTROLS_INSERT_BUTTON}
             onMouseDown={onMouseDown}
           >
             <svg
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
               className={ClassName.CONTROLS_BUTTON_ICON}
               width="16"
               height="16"
@@ -150,7 +153,9 @@ export const InsertButtonForDragAndDrop = ({
           </button>
         </div>
         <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className={ClassName.CONTROLS_INSERT_LINE}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           style={
             type === 'row'
               ? {
@@ -174,8 +179,10 @@ export const InsertButtonForDragAndDrop = ({
     : ClassName.CONTROLS_FLOATING_BUTTON_COLUMN;
 
   return (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     <div className={floatingButtonClassName}>
       <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={`${ClassName.DRAG_CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`}
       >
         {content}
@@ -204,12 +211,15 @@ const InsertButton = ({
       position="top"
     >
       <>
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
         <div className={ClassName.CONTROLS_INSERT_BUTTON_INNER}>
           <button
             type="button"
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className={ClassName.CONTROLS_INSERT_BUTTON}
             onMouseDown={onMouseDown}
           >
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
             <svg className={ClassName.CONTROLS_BUTTON_ICON}>
               <path
                 d="M10 4a1 1 0 0 1 1 1v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H5a1 1 0 1 1 0-2h4V5a1 1 0 0 1 1-1z"
@@ -220,7 +230,9 @@ const InsertButton = ({
           </button>
         </div>
         <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className={ClassName.CONTROLS_INSERT_LINE}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           style={
             type === 'row'
               ? { width: getInsertLineWidth(tableRef) }
@@ -237,8 +249,10 @@ const InsertButton = ({
       : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
 
   return (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     <div className={floatingButtonClassName}>
       <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={`${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`}
       >
         {content}