@atlaskit/editor-plugin-table 5.4.7 → 5.4.8

package/src/__tests__/unit/pm-plugins/decorations/column-controls.ts

@@ -9,47 +9,57 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { ffTest } from '@atlassian/feature-flags-test-utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { buildColumnControlsDecorations } from '../../../../plugins/table/pm-plugins/decorations/utils';
 import { TableDecorations } from '../../../../plugins/table/types';
 
+// Mock Feature flags instead of using ffTest because we don't use the feature flag directly
+jest.mock('@atlaskit/platform-feature-flags', () => ({
+  getBooleanFF: jest.fn().mockImplementation(() => false),
+}));
+
+afterEach(() => {
+  (getBooleanFF as jest.Mock).mockReset();
+});
+
 describe('tables: column controls decorations', () => {
-  describe(`should return a decorationSet with 2 ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop disabled`, () => {
-    ffTest(
-      'platform.editor.table.drag-and-drop',
-      () => {
-        const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
-        const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
-        const nextDecorationSet = buildColumnControlsDecorations({
-          decorationSet: DecorationSet.empty,
-          tr: state.tr,
-        });
-
-        const decorations = nextDecorationSet.find(
-          undefined,
-          undefined,
-          (spec: any) => spec.key.indexOf(decorationKey) > -1,
-        );
-
-        expect(decorations).toHaveLength(0);
-      },
-      () => {
-        const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
-        const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
-        const nextDecorationSet = buildColumnControlsDecorations({
-          decorationSet: DecorationSet.empty,
-          tr: state.tr,
-        });
-
-        const decorations = nextDecorationSet.find(
-          undefined,
-          undefined,
-          (spec: any) => spec.key.indexOf(decorationKey) > -1,
-        );
-
-        expect(decorations).toHaveLength(2);
-      },
+  it(`should return an empty decorationSet ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop is enabled`, () => {
+    (getBooleanFF as jest.Mock).mockImplementation(
+      (name) => name === 'platform.editor.table.drag-and-drop',
     );
+    const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
+    const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+    const nextDecorationSet = buildColumnControlsDecorations({
+      decorationSet: DecorationSet.empty,
+      tr: state.tr,
+      options: { isDragAndDropEnabled: true },
+    });
+
+    const decorations = nextDecorationSet.find(
+      undefined,
+      undefined,
+      (spec: any) => spec.key.indexOf(decorationKey) > -1,
+    );
+
+    expect(decorations).toHaveLength(0);
+  });
+
+  it(`should return an empty decorationSet ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop is disabled`, () => {
+    const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
+    const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+    const nextDecorationSet = buildColumnControlsDecorations({
+      decorationSet: DecorationSet.empty,
+      tr: state.tr,
+      options: { isDragAndDropEnabled: false },
+    });
+
+    const decorations = nextDecorationSet.find(
+      undefined,
+      undefined,
+      (spec: any) => spec.key.indexOf(decorationKey) > -1,
+    );
+
+    expect(decorations).toHaveLength(2);
   });
 });

package/src/plugins/table/commands/misc.ts

@@ -1,4 +1,3 @@
-// #region Imports
 import type { CellAttributes } from '@atlaskit/adf-schema';
 import type { Command } from '@atlaskit/editor-common/types';
 import {
@@ -76,11 +75,7 @@ export const setTableRef = (ref?: HTMLTableElement) =>
         closestElement(tableRef, `.${ClassName.TABLE_NODE_WRAPPER}`) ||
         undefined;
       const layout = tableNode ? tableNode.attrs.layout : undefined;
-      const decorationSet = updatePluginStateDecorations(
-        state,
-        createColumnControlsDecoration(state.selection),
-        TableDecorations.COLUMN_CONTROLS_DECORATIONS,
-      );
+      const { isDragAndDropEnabled } = getPluginState(state);
 
       return {
         type: 'SET_TABLE_REF',
@@ -93,7 +88,14 @@ export const setTableRef = (ref?: HTMLTableElement) =>
           isNumberColumnEnabled: checkIfNumberColumnEnabled(state.selection),
           isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
           isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),
-          decorationSet,
+          // decoration set is drawn by the decoration plugin, skip this for DnD as all controls are floating
+          decorationSet: !isDragAndDropEnabled
+            ? updatePluginStateDecorations(
+                state,
+                createColumnControlsDecoration(state.selection),
+                TableDecorations.COLUMN_CONTROLS_DECORATIONS,
+              )
+            : undefined,
           resizeHandleRowIndex: undefined,
           resizeHandleColumnIndex: undefined,
         },

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -483,28 +483,26 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     const hasHeaderRow = containsHeaderRow(node);
     const rowControls = (
-      <div className={ClassName.ROW_CONTROLS_WRAPPER}>
-        <TableFloatingControls
-          editorView={view}
-          tableRef={tableRef}
-          tableNode={node}
-          tableActive={tableActive}
-          hoveredRows={hoveredRows}
-          hoveredCell={hoveredCell}
-          isInDanger={isInDanger}
-          isResizing={isResizing}
-          isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
-          isHeaderRowEnabled={isHeaderRowEnabled}
-          isDragAndDropEnabled={isDragAndDropEnabled}
-          ordering={ordering}
-          isHeaderColumnEnabled={isHeaderColumnEnabled}
-          hasHeaderRow={hasHeaderRow}
-          // pass `selection` and `tableHeight` to control re-render
-          selection={view.state.selection}
-          headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
-          stickyHeader={this.state.stickyHeader}
-        />
-      </div>
+      <TableFloatingControls
+        editorView={view}
+        tableRef={tableRef}
+        tableNode={node}
+        tableActive={tableActive}
+        hoveredRows={hoveredRows}
+        hoveredCell={hoveredCell}
+        isInDanger={isInDanger}
+        isResizing={isResizing}
+        isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
+        isHeaderRowEnabled={isHeaderRowEnabled}
+        isDragAndDropEnabled={isDragAndDropEnabled}
+        ordering={ordering}
+        isHeaderColumnEnabled={isHeaderColumnEnabled}
+        hasHeaderRow={hasHeaderRow}
+        // pass `selection` and `tableHeight` to control re-render
+        selection={view.state.selection}
+        headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
+        stickyHeader={this.state.stickyHeader}
+      />
     );
 
     const colControls = isDragAndDropEnabled ? (

package/src/plugins/table/pm-plugins/decorations/plugin.ts

@@ -8,7 +8,6 @@ import type {
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { pluginKey as tableWidthPluginKey } from '../table-width';
@@ -31,11 +30,13 @@ export const handleDocOrSelectionChanged = (
 ): DecorationSet => {
   const isResizing = tableWidthPluginKey.getState(newState)?.resizing;
   const wasResizing = tableWidthPluginKey.getState(oldState)?.resizing;
+  const { isDragAndDropEnabled = false } =
+    tablePluginKey.getState(newState) || {};
 
   const changedResizing = isResizing !== wasResizing;
 
   // Remove column controls when resizing and don't add column decoration controls when DnD enabled
-  if (isResizing || getBooleanFF('platform.editor.table.drag-and-drop')) {
+  if (isResizing) {
     return DecorationSet.empty;
   } else if (
     tr.docChanged ||
@@ -45,6 +46,9 @@ export const handleDocOrSelectionChanged = (
     return buildColumnControlsDecorations({
       decorationSet,
       tr,
+      options: {
+        isDragAndDropEnabled,
+      },
     });
   } else if (tr.selectionSet) {
     const isTransactionFromMouseClick =
@@ -70,6 +74,7 @@ export const createPlugin = () => {
 
       apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
+        // main table plugin --->
         const meta = tr.getMeta(tablePluginKey);
 
         if (meta && meta.data && meta.data.decorationSet) {

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -17,7 +17,10 @@ import {
 } from '../../../utils/decoration';
 
 import { composeDecorations } from './compose-decorations';
-import type { DecorationTransformer } from './types';
+import type {
+  BuildDecorationTransformerParams,
+  DecorationTransformer,
+} from './types';
 
 const isColumnSelected = (tr: Transaction | ReadonlyTransaction): boolean =>
   tr.selection instanceof CellSelection && tr.selection.isColSelection();
@@ -25,13 +28,12 @@ const isColumnSelected = (tr: Transaction | ReadonlyTransaction): boolean =>
 // @see: https://product-fabric.atlassian.net/browse/ED-3796
 const removeControlsHoverDecoration: DecorationTransformer = ({
   decorationSet,
-}): DecorationSet =>
-  decorationSet.remove(findControlsHoverDecoration(decorationSet));
+}) => decorationSet.remove(findControlsHoverDecoration(decorationSet));
 
 const maybeUpdateColumnSelectedDecoration: DecorationTransformer = ({
   decorationSet,
   tr,
-}): DecorationSet => {
+}) => {
   if (!isColumnSelected(tr)) {
     return decorationSet;
   }
@@ -47,10 +49,9 @@ const maybeUpdateColumnSelectedDecoration: DecorationTransformer = ({
 const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({
   decorationSet,
   tr,
-}): DecorationSet => {
+}) => {
   const table = findTable(tr.selection);
 
-  // avoid re-drawing state if dnd decorations don't need to be updated
   if (!table) {
     return decorationSet;
   }
@@ -66,14 +67,13 @@ const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({
 // @see: https://product-fabric.atlassian.net/browse/ED-7304
 const removeColumnControlsSelectedDecoration: DecorationTransformer = ({
   decorationSet,
-}): DecorationSet =>
-  decorationSet.remove(findColumnControlSelectedDecoration(decorationSet));
+}) => decorationSet.remove(findColumnControlSelectedDecoration(decorationSet));
 
 const hasColumnSelectedDecorations = (decorationSet: DecorationSet): boolean =>
   !!findColumnControlSelectedDecoration(decorationSet).length;
 
 export const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer =
-  ({ decorationSet, tr }): DecorationSet => {
+  ({ decorationSet, tr }) => {
     if (!hasColumnSelectedDecorations(decorationSet)) {
       return decorationSet;
     }
@@ -81,10 +81,19 @@ export const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer
     return removeColumnControlsSelectedDecoration({ decorationSet, tr });
   };
 
-export const buildColumnControlsDecorations: DecorationTransformer = ({
+export const buildColumnControlsDecorations = ({
   decorationSet,
   tr,
-}): DecorationSet => {
+  options,
+}: BuildDecorationTransformerParams): DecorationSet => {
+  if (options.isDragAndDropEnabled) {
+    return composeDecorations([
+      removeColumnControlsSelectedDecoration,
+      removeControlsHoverDecoration,
+      maybeUpdateColumnSelectedDecoration,
+    ])({ decorationSet, tr });
+  }
+
   return composeDecorations([
     removeColumnControlsSelectedDecoration,
     removeControlsHoverDecoration,

package/src/plugins/table/pm-plugins/decorations/utils/compose-decorations.ts

@@ -1,10 +1,8 @@
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-
-import { DecorationTransformer } from './types';
+import type { DecorationTransformer } from './types';
 
 export const composeDecorations =
   (transformers: Array<DecorationTransformer>): DecorationTransformer =>
-  ({ decorationSet, tr }): DecorationSet =>
+  ({ decorationSet, tr }) =>
     transformers.reduce(
       (decorationSet, transform) => transform({ decorationSet, tr }),
       decorationSet,

package/src/plugins/table/pm-plugins/decorations/utils/types.ts

@@ -1,14 +1,21 @@
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-import {
+import type {
   ReadonlyTransaction,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
-export type DecorationTransformer = ({
-  decorationSet,
-  tr,
-}: {
+export type DecorationTransformer = (
+  params: DecorationTransformerParams,
+) => DecorationSet;
+
+export type DecorationTransformerParams = {
   decorationSet: DecorationSet;
   tr: Transaction | ReadonlyTransaction;
-}) => DecorationSet;
+};
+
+export type BuildDecorationTransformerParams = DecorationTransformerParams & {
+  options: {
+    isDragAndDropEnabled: boolean;
+  };
+};

package/src/plugins/table/types.ts

@@ -309,7 +309,8 @@ export const TableCssClassName = {
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: `${tablePrefixSelector}-corner-controls__insert-column-marker`,
   CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
 
-  /** Controls with drag handle */
+  /** drag and drop controls */
+  DRAG_ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-drag-row-controls-wrapper`,
   DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
   DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
   DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,

package/src/plugins/table/ui/TableFloatingControls/index.tsx

@@ -158,75 +158,81 @@ export default class TableFloatingControls extends Component<Props, State> {
         ? stickyHeader.top
         : undefined;
 
+    const wrapperClassName = isDragAndDropEnabled
+      ? ClassName.DRAG_ROW_CONTROLS_WRAPPER
+      : ClassName.ROW_CONTROLS_WRAPPER;
+
     return (
-      <div onMouseDown={(e) => !isDragAndDropEnabled && e.preventDefault()}>
-        {isNumberColumnEnabled ? (
-          <NumberColumn
-            editorView={editorView}
-            hoverRows={this.hoverRows}
-            tableRef={tableRef}
-            tableActive={tableActive}
-            hoveredRows={hoveredRows}
-            hasHeaderRow={hasHeaderRow}
-            isInDanger={isInDanger}
-            isResizing={isResizing}
-            selectRow={this.selectRow}
-            updateCellHoverLocation={this.updateCellHoverLocation}
-            stickyTop={stickyTop}
-            isDragAndDropEnabled={isDragAndDropEnabled}
-          />
-        ) : null}
+      <div className={wrapperClassName}>
+        <div onMouseDown={(e) => !isDragAndDropEnabled && e.preventDefault()}>
+          {isNumberColumnEnabled ? (
+            <NumberColumn
+              editorView={editorView}
+              hoverRows={this.hoverRows}
+              tableRef={tableRef}
+              tableActive={tableActive}
+              hoveredRows={hoveredRows}
+              hasHeaderRow={hasHeaderRow}
+              isInDanger={isInDanger}
+              isResizing={isResizing}
+              selectRow={this.selectRow}
+              updateCellHoverLocation={this.updateCellHoverLocation}
+              stickyTop={stickyTop}
+              isDragAndDropEnabled={isDragAndDropEnabled}
+            />
+          ) : null}
 
-        {tableActive && (
-          <>
-            {isDragAndDropEnabled ? (
-              <>
-                <DragCornerControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                />
-                <DragControls
-                  tableRef={tableRef}
-                  tableNode={tableNode}
-                  hoveredCell={hoveredCell}
-                  editorView={editorView}
-                  tableActive={tableActive}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                  tableWidth={this.state.tableWrapperWidth}
-                  hoverRows={this.hoverRows}
-                  selectRow={this.selectRow}
-                  updateCellHoverLocation={this.updateCellHoverLocation}
-                />
-              </>
-            ) : (
-              <>
-                <CornerControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                  isHeaderRowEnabled={isHeaderRowEnabled}
-                  isHeaderColumnEnabled={isHeaderColumnEnabled}
-                  hoveredRows={hoveredRows}
-                  stickyTop={tableActive ? stickyTop : undefined}
-                />
-                <RowControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  hoverRows={this.hoverRows}
-                  hoveredRows={hoveredRows}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                  selectRow={this.selectRow}
-                  stickyTop={tableActive ? stickyTop : undefined}
-                />
-              </>
-            )}
-          </>
-        )}
+          {tableActive && (
+            <>
+              {isDragAndDropEnabled ? (
+                <>
+                  <DragCornerControls
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                  />
+                  <DragControls
+                    tableRef={tableRef}
+                    tableNode={tableNode}
+                    hoveredCell={hoveredCell}
+                    editorView={editorView}
+                    tableActive={tableActive}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                    tableWidth={this.state.tableWrapperWidth}
+                    hoverRows={this.hoverRows}
+                    selectRow={this.selectRow}
+                    updateCellHoverLocation={this.updateCellHoverLocation}
+                  />
+                </>
+              ) : (
+                <>
+                  <CornerControls
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                    isHeaderRowEnabled={isHeaderRowEnabled}
+                    isHeaderColumnEnabled={isHeaderColumnEnabled}
+                    hoveredRows={hoveredRows}
+                    stickyTop={tableActive ? stickyTop : undefined}
+                  />
+                  <RowControls
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    hoverRows={this.hoverRows}
+                    hoveredRows={hoveredRows}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                    selectRow={this.selectRow}
+                    stickyTop={tableActive ? stickyTop : undefined}
+                  />
+                </>
+              )}
+            </>
+          )}
+        </div>
       </div>
     );
   }

package/src/plugins/table/ui/common-styles.ts

@@ -265,26 +265,6 @@ const tableStickyHeaderFirefoxFixStyle = (
   }
 };
 
-const tableRowControlStyles = () => {
-  return getBooleanFF('platform.editor.table.drag-and-drop')
-    ? css`
-        .${ClassName.ROW_CONTROLS_WRAPPER} {
-          position: absolute;
-          margin-top: ${tableMarginTop}px;
-          left: -${tableToolbarSize + 1}px;
-          z-index: ${rowControlsZIndex + 4};
-        }
-      `
-    : css`
-        .${ClassName.ROW_CONTROLS_WRAPPER} {
-          position: absolute;
-          /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
-          top: ${tableMarginTop - cornerControlHeight + 1}px;
-          left: -${tableToolbarSize}px;
-        }
-      `;
-};
-
 const tableWrapperStyles = () => {
   if (getBooleanFF('platform.editor.custom-table-width')) {
     return css`
@@ -558,7 +538,8 @@ export const tableStyles = (
     .less-padding {
       padding: 0 ${tablePadding}px;
 
-      .${ClassName.ROW_CONTROLS_WRAPPER} {
+      .${ClassName.DRAG_ROW_CONTROLS_WRAPPER},
+        .${ClassName.ROW_CONTROLS_WRAPPER} {
         padding: 0 ${tablePadding}px;
 
         // https://product-fabric.atlassian.net/browse/ED-16386
@@ -1056,8 +1037,24 @@ export const tableStyles = (
         }
       }
     }
-    ${tableRowControlStyles()}
-    .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
+
+    // override for DnD controls
+    .${ClassName.DRAG_ROW_CONTROLS_WRAPPER} {
+      position: absolute;
+      margin-top: ${tableMarginTop}px;
+      left: -${tableToolbarSize + 1}px;
+      z-index: ${rowControlsZIndex + 4};
+    }
+
+    .${ClassName.ROW_CONTROLS_WRAPPER} {
+      position: absolute;
+      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
+      top: ${tableMarginTop - cornerControlHeight + 1}px;
+      left: -${tableToolbarSize}px;
+    }
+
+    .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW},
+      .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
       z-index: ${akEditorUnitZIndex};
     }
 

package/src/plugins/table/ui/ui-styles.ts

@@ -500,27 +500,24 @@ export const floatingColumnControls = (props: ThemeProps) => {
 };
 
 export const rowControlsWrapperDotStyle = (props: ThemeProps) => {
-  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
-    return css`
-      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
-        display: none;
-      }
-    `;
-  } else {
-    return css`
-      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
-        content: ' ';
-        background-color: ${tableBorderColor(props)};
-        position: absolute;
-        height: ${lineMarkerSize}px;
-        width: ${lineMarkerSize}px;
-        border-radius: 50%;
-        pointer-events: none;
-        top: -${tableToolbarSize + tableCellBorderWidth}px;
-        right: -1px;
-      }
-    `;
-  }
+  return css`
+    // override for DnD controls
+    div.${ClassName.WITH_CONTROLS}>.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}::after {
+      display: none;
+    }
+
+    div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
+      content: ' ';
+      background-color: ${tableBorderColor(props)};
+      position: absolute;
+      height: ${lineMarkerSize}px;
+      width: ${lineMarkerSize}px;
+      border-radius: 50%;
+      pointer-events: none;
+      top: -${tableToolbarSize + tableCellBorderWidth}px;
+      right: -1px;
+    }
+  `;
 };
 
 export const columnControlsDecoration = (props: ThemeProps) => {