@atlaskit/editor-plugin-table 5.3.15 → 5.3.17

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -17,7 +17,12 @@ import {
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 
 import { DragAndDropActionType } from './actions';
-import { clearDropTarget, moveSource, setDropTarget } from './commands';
+import {
+  clearDropTarget,
+  moveSource,
+  setDropTarget,
+  toggleDragMenu,
+} from './commands';
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
@@ -99,6 +104,7 @@ export const createPlugin = (
           },
           onDragStart: ({ location }) => {
             autoScroller.start({ input: location.current.input });
+            toggleDragMenu(false)(editorView.state, editorView.dispatch);
           },
           onDrag(event) {
             autoScroller.updateInput({

package/src/plugins/table/types.ts

@@ -273,10 +273,6 @@ export const TableCssClassName = {
   COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
 
-  COLUMN_CONTROLS_WRAPPER: `${tablePrefixSelector}-col-controls-wrapper`,
-  COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
-  COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
-
   ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-row-controls-wrapper`,
   ROW_CONTROLS: `${tablePrefixSelector}-row-controls`,
   ROW_CONTROLS_INNER: `${tablePrefixSelector}-row-controls__inner`,
@@ -320,8 +316,15 @@ export const TableCssClassName = {
   DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-columns-floating-insert-dot-wrapper`,
   DRAG_COLUMN_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-columns-floating-insert-dot`,
 
+  DRAG_COLUMN_CONTROLS_WRAPPER: `${tablePrefixSelector}-col-controls-wrapper`,
+  DRAG_COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
+  DRAG_COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
+
   DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
 
+  DRAG_CORNER_BUTTON: `${tablePrefixSelector}-drag-corner-button`,
+  DRAG_CORNER_BUTTON_INNER: `${tablePrefixSelector}-drag-corner-button-inner`,
+
   /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
   NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,

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

@@ -81,6 +81,14 @@ export class FloatingInsertButton extends React.Component<
       dispatchAnalyticsEvent,
     } = this.props;
 
+    // TODO: temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
+    if (
+      isDragAndDropEnabled &&
+      (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0)
+    ) {
+      return null;
+    }
+
     const type =
       typeof insertColumnButtonIndex !== 'undefined'
         ? 'column'

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -5,7 +5,6 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { token } from '@atlaskit/tokens';
 
 import {
   clearHoverSelection,
@@ -108,7 +107,7 @@ export const ColumnControls = ({
   return (
     <div className={ClassName.DRAG_COLUMN_CONTROLS}>
       <div
-        className={ClassName.COLUMN_CONTROLS_INNER}
+        className={ClassName.DRAG_COLUMN_CONTROLS_INNER}
         data-testid="table-floating-column-controls"
         style={{
           gridTemplateColumns: widths,
@@ -127,7 +126,8 @@ export const ColumnControls = ({
               contentEditable={false}
               key={index}
             >
-              {!hasHeaderColumn && index === 0 && (
+              {/* TODO: Disabling first column insert button https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50 */}
+              {/* {!hasHeaderColumn && index === 0 && (
                 <div
                   style={{
                     left: '0px',
@@ -135,7 +135,7 @@ export const ColumnControls = ({
                   }}
                   className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
                 />
-              )}
+              )} */}
               <div
                 className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
                 style={columnParams.length - 1 === index ? { right: '0' } : {}}
@@ -149,12 +149,10 @@ export const ColumnControls = ({
             <div
               style={{
                 gridColumn: gridColumnPosition,
-                zIndex: 99,
                 display: 'flex',
-                width: '100%',
                 justifyContent: 'center',
                 alignItems: 'center',
-                marginTop: token('space.negative.025', '-2px'),
+                zIndex: 99,
               }}
               data-column-control-index={hoveredCell.colIndex}
               data-testid="table-floating-column-control"

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx

@@ -35,11 +35,11 @@ export const ColumnDropTargets: React.FC<Props> = ({
 
   return (
     <div
-      className={ClassName.COLUMN_DROP_TARGET_CONTROLS}
+      className={ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS}
       contentEditable={false}
     >
       <div
-        className={ClassName.COLUMN_CONTROLS_INNER}
+        className={ClassName.DRAG_COLUMN_CONTROLS_INNER}
         data-testid="table-floating-column-controls-drop-targets"
       >
         {colWidths?.map((width, index) => {

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

@@ -129,7 +129,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
 
   return ReactDOM.createPortal(
     <div
-      className={ClassName.COLUMN_CONTROLS_WRAPPER}
+      className={ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}
       data-testid="table-floating-column-controls-wrapper"
     >
       <ColumnControls

package/src/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx

@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+
+import classnames from 'classnames';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { injectIntl } from 'react-intl-next';
+
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import {
+  findTable,
+  isTableSelected,
+  selectTable,
+} from '@atlaskit/editor-tables/utils';
+
+import { clearHoverSelection, hoverTable } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import messages from '../../messages';
+
+import type { CornerControlProps } from './types';
+
+class CornerControlComponent extends Component<
+  CornerControlProps & WrappedComponentProps,
+  any
+> {
+  render() {
+    const {
+      isInDanger,
+      tableRef,
+      isHeaderColumnEnabled,
+      isHeaderRowEnabled,
+      intl: { formatMessage },
+    } = this.props;
+    if (!tableRef) {
+      return null;
+    }
+    const isActive = this.isActive();
+
+    return (
+      <div
+        className={classnames(ClassName.CORNER_CONTROLS, {
+          active: isActive,
+          sticky: this.props.stickyTop !== undefined,
+        })}
+        style={{
+          top:
+            this.props.stickyTop !== undefined
+              ? `${this.props.stickyTop}px`
+              : undefined,
+        }}
+        contentEditable={false}
+      >
+        <button
+          aria-label={formatMessage(messages.cornerControl)}
+          type="button"
+          className={classnames(ClassName.CONTROLS_CORNER_BUTTON, {
+            danger: isActive && isInDanger,
+          })}
+          onClick={this.selectTable}
+          onMouseOver={this.hoverTable}
+          onMouseOut={this.clearHoverSelection}
+        />
+
+        {!isHeaderRowEnabled && (
+          <div className={ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER}>
+            <div className={ClassName.CONTROLS_INSERT_MARKER} />
+          </div>
+        )}
+        {!isHeaderColumnEnabled && (
+          <div className={ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER}>
+            <div className={ClassName.CONTROLS_INSERT_MARKER} />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  private isActive = () => {
+    const { editorView, hoveredRows, isResizing } = this.props;
+    const { selection } = editorView.state;
+    const table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+    return (
+      isTableSelected(selection) ||
+      (hoveredRows &&
+        hoveredRows.length === TableMap.get(table.node).height &&
+        !isResizing)
+    );
+  };
+
+  private clearHoverSelection = () => {
+    const { state, dispatch } = this.props.editorView;
+    clearHoverSelection()(state, dispatch);
+  };
+
+  private selectTable = () => {
+    const { state, dispatch } = this.props.editorView;
+    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+  };
+
+  private hoverTable = () => {
+    const { state, dispatch } = this.props.editorView;
+    hoverTable()(state, dispatch);
+  };
+}
+
+export const CornerControls = injectIntl(CornerControlComponent);

package/src/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+
+import classnames from 'classnames';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { injectIntl } from 'react-intl-next';
+
+import {
+  findTable,
+  isTableSelected,
+  selectTable,
+} from '@atlaskit/editor-tables/utils';
+
+import { clearHoverSelection, hoverTable } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import messages from '../../messages';
+
+import type { CornerControlProps } from './types';
+
+const DragCornerControlsComponent = ({
+  editorView,
+  isInDanger,
+  intl: { formatMessage },
+}: CornerControlProps & WrappedComponentProps) => {
+  const handleOnClick = () => {
+    const { state, dispatch } = editorView;
+    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+  };
+
+  const handleMouseOver = () => {
+    const { state, dispatch } = editorView;
+    hoverTable()(state, dispatch);
+  };
+
+  const handleMouseOut = () => {
+    const { state, dispatch } = editorView;
+    clearHoverSelection()(state, dispatch);
+  };
+
+  const isActive = useMemo(() => {
+    const { selection } = editorView.state;
+    const table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+    return isTableSelected(selection);
+  }, [editorView.state]);
+
+  return (
+    <button
+      className={classnames(ClassName.DRAG_CORNER_BUTTON, {
+        active: isActive,
+        danger: isActive && isInDanger,
+      })}
+      aria-label={formatMessage(messages.cornerControl)}
+      type="button"
+      onClick={handleOnClick}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      contentEditable={false}
+    >
+      <div className={ClassName.DRAG_CORNER_BUTTON_INNER} />
+    </button>
+  );
+};
+
+export const DragCornerControls = injectIntl(DragCornerControlsComponent);

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

@@ -1,125 +1,2 @@
-import React, { Component } from 'react';
-
-import classnames from 'classnames';
-import type { WrappedComponentProps } from 'react-intl-next';
-import { defineMessages, injectIntl } from 'react-intl-next';
-
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import {
-  findTable,
-  isTableSelected,
-  selectTable,
-} from '@atlaskit/editor-tables/utils';
-
-import { clearHoverSelection, hoverTable } from '../../../commands';
-import { TableCssClassName as ClassName } from '../../../types';
-
-const messages = defineMessages({
-  cornerControl: {
-    id: 'fabric.editor.cornerControl',
-    defaultMessage: 'Highlight table',
-    description:
-      'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.',
-  },
-});
-
-export interface Props {
-  editorView: EditorView;
-  tableRef?: HTMLTableElement;
-  isInDanger?: boolean;
-  isResizing?: boolean;
-  hoveredRows?: number[];
-  isHeaderColumnEnabled?: boolean;
-  isHeaderRowEnabled?: boolean;
-  stickyTop?: number;
-}
-
-class CornerControlComponent extends Component<
-  Props & WrappedComponentProps,
-  any
-> {
-  render() {
-    const {
-      isInDanger,
-      tableRef,
-      isHeaderColumnEnabled,
-      isHeaderRowEnabled,
-      intl: { formatMessage },
-    } = this.props;
-    if (!tableRef) {
-      return null;
-    }
-    const isActive = this.isActive();
-
-    return (
-      <div
-        className={classnames(ClassName.CORNER_CONTROLS, {
-          active: isActive,
-          sticky: this.props.stickyTop !== undefined,
-        })}
-        style={{
-          top:
-            this.props.stickyTop !== undefined
-              ? `${this.props.stickyTop}px`
-              : undefined,
-        }}
-        contentEditable={false}
-      >
-        <button
-          aria-label={formatMessage(messages.cornerControl)}
-          type="button"
-          className={classnames(ClassName.CONTROLS_CORNER_BUTTON, {
-            danger: isActive && isInDanger,
-          })}
-          onClick={this.selectTable}
-          onMouseOver={this.hoverTable}
-          onMouseOut={this.clearHoverSelection}
-        />
-
-        {!isHeaderRowEnabled && (
-          <div className={ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER}>
-            <div className={ClassName.CONTROLS_INSERT_MARKER} />
-          </div>
-        )}
-        {!isHeaderColumnEnabled && (
-          <div className={ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER}>
-            <div className={ClassName.CONTROLS_INSERT_MARKER} />
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  private isActive = () => {
-    const { editorView, hoveredRows, isResizing } = this.props;
-    const { selection } = editorView.state;
-    const table = findTable(selection);
-    if (!table) {
-      return false;
-    }
-    return (
-      isTableSelected(selection) ||
-      (hoveredRows &&
-        hoveredRows.length === TableMap.get(table.node).height &&
-        !isResizing)
-    );
-  };
-
-  private clearHoverSelection = () => {
-    const { state, dispatch } = this.props.editorView;
-    clearHoverSelection()(state, dispatch);
-  };
-
-  private selectTable = () => {
-    const { state, dispatch } = this.props.editorView;
-    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
-  };
-
-  private hoverTable = () => {
-    const { state, dispatch } = this.props.editorView;
-    hoverTable()(state, dispatch);
-  };
-}
-
-export const CornerControls = injectIntl(CornerControlComponent);
+export { CornerControls } from './ClassicCornerControls';
+export { DragCornerControls } from './DragCornerControls';

package/src/plugins/table/ui/TableFloatingControls/CornerControls/types.ts

@@ -0,0 +1,12 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+export type CornerControlProps = {
+  editorView: EditorView;
+  tableRef?: HTMLTableElement;
+  isInDanger?: boolean;
+  isResizing?: boolean;
+  hoveredRows?: number[];
+  isHeaderColumnEnabled?: boolean;
+  isHeaderRowEnabled?: boolean;
+  stickyTop?: number;
+};

package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -9,7 +9,6 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
@@ -141,7 +140,8 @@ const DragControlsComponent = ({
             contentEditable={false}
             key={index}
           >
-            {!hasHeaderRow && index === 0 && (
+            {/* TODO: Disabling first column insert button https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50 */}
+            {/* {!hasHeaderRow && index === 0 && (
               <div
                 style={{
                   top: '0px',
@@ -149,7 +149,7 @@ const DragControlsComponent = ({
                 }}
                 className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT}
               />
-            )}
+            )} */}
             <div className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT} />
           </div>
         ))}

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

@@ -12,7 +12,7 @@ import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { CellHoverMeta } from '../../types';
 import { isSelectionUpdated } from '../../utils';
 
-import { CornerControls } from './CornerControls';
+import { CornerControls, DragCornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
 import { DragControls, RowControls } from './RowControls';
 
@@ -159,19 +159,27 @@ export default class TableFloatingControls extends Component<Props, State> {
         {tableActive && (
           <>
             {isDragAndDropEnabled ? (
-              <DragControls
-                tableRef={tableRef}
-                tableNode={tableNode}
-                hoveredCell={hoveredCell}
-                editorView={editorView}
-                tableActive={tableActive}
-                isInDanger={isInDanger}
-                isResizing={isResizing}
-                hasHeaderRow={hasHeaderRow}
-                hoverRows={this.hoverRows}
-                selectRow={this.selectRow}
-                updateCellHoverLocation={this.updateCellHoverLocation}
-              />
+              <>
+                <DragCornerControls
+                  editorView={editorView}
+                  tableRef={tableRef}
+                  isInDanger={isInDanger}
+                  isResizing={isResizing}
+                />
+                <DragControls
+                  tableRef={tableRef}
+                  tableNode={tableNode}
+                  hoveredCell={hoveredCell}
+                  editorView={editorView}
+                  tableActive={tableActive}
+                  isInDanger={isInDanger}
+                  isResizing={isResizing}
+                  hasHeaderRow={hasHeaderRow}
+                  hoverRows={this.hoverRows}
+                  selectRow={this.selectRow}
+                  updateCellHoverLocation={this.updateCellHoverLocation}
+                />
+              </>
             ) : (
               <>
                 <CornerControls

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

@@ -56,6 +56,7 @@ import {
   columnControlsDecoration,
   columnControlsLineMarker,
   DeleteButton,
+  dragCornerControlButton,
   dragInsertButtonWrapper,
   floatingColumnControls,
   HeaderButton,
@@ -360,6 +361,8 @@ export const tableStyles = (
 
     ${dragInsertButtonWrapper(props)}
 
+    ${dragCornerControlButton(props)}
+
     /* Delete button */
     ${DeleteButton(props)}
     /* Ends Delete button */
@@ -543,7 +546,7 @@ export const tableStyles = (
         }
       }
 
-      .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
         padding: 0 ${tablePadding}px;
       }
 
@@ -732,11 +735,11 @@ export const tableStyles = (
     }
 
     .${ClassName.DRAG_COLUMN_CONTROLS} {
-      .${ClassName.COLUMN_CONTROLS_INNER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
         height: 24px;
         position: absolute;
         top: ${token('space.negative.150', '-12px')};
-        z-index: ${akEditorUnitZIndex};
+        z-index: ${akEditorUnitZIndex * 13};
       }
 
       .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER} {
@@ -1031,9 +1034,9 @@ export const tableStyles = (
       z-index: ${akEditorUnitZIndex};
     }
 
-    .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+    .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
       position: absolute;
-      top: ${tableMarginTop + 1}px;
+      top: ${tableMarginTop}px;
     }
 
     ${tableWrapperStyles()}

package/src/plugins/table/ui/messages.ts

@@ -65,4 +65,10 @@ export default defineMessages({
     defaultMessage: 'Adjust column',
     description: 'Tooltip displayed on table column resize handle',
   },
+  cornerControl: {
+    id: 'fabric.editor.cornerControl',
+    defaultMessage: 'Highlight table',
+    description:
+      'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.',
+  },
 });

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

@@ -187,6 +187,7 @@ export const dragInsertButtonWrapper = (props: ThemeProps) => css`
     bottom: -5px;
     left: 3px;
   }
+
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
     ${Button(`
     background: ${token('elevation.surface.overlay', 'white')};
@@ -198,6 +199,7 @@ export const dragInsertButtonWrapper = (props: ThemeProps) => css`
     border-radius: 50%;
   `)}
   }
+
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON}:hover {
     background: ${token('color.background.brand.bold', B300)};
     border: 1px solid ${token('color.background.brand.bold', B300)};
@@ -206,6 +208,46 @@ export const dragInsertButtonWrapper = (props: ThemeProps) => css`
   }
 `;
 
+export const dragCornerControlButton = (props: ThemeProps) => css`
+  .${ClassName.DRAG_CORNER_BUTTON} {
+    width: 12px;
+    height: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: ${token('space.negative.075', '-6px')};
+    left: ${token('space.075', '6px')};
+    background-color: ${token('elevation.surface', '#FFF')};
+    border-radius: 50%;
+    border: none;
+    padding: 0;
+    outline: none;
+    z-index: ${akEditorUnitZIndex * 99};
+
+    &.active .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+      background-color: ${token('color.border.selected', '#0C66E4')};
+      border-color: ${token('color.border.selected', '#0C66E4')};
+    }
+
+    &:hover {
+      cursor: pointer;
+
+      .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+        border-color: ${token('color.border.selected', '#0C66E4')};
+      }
+    }
+  }
+
+  .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+    border: 1px solid
+      ${token('color.background.accent.gray.subtler', '#DCDFE4')};
+    border-radius: 50%;
+    width: 6px;
+    height: 6px;
+  }
+`;
+
 export const insertColumnButtonWrapper = (props: ThemeProps) => css`
   ${InsertButton()}
   ${InsertButtonHover()}
@@ -403,12 +445,12 @@ const getFloatingDotOverrides = (props: ThemeProps) => {
 
 export const floatingColumnControls = (props: ThemeProps) => {
   return css`
-    .${ClassName.COLUMN_DROP_TARGET_CONTROLS} {
+    .${ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS} {
       box-sizing: border-box;
       position: absolute;
       top: 0;
 
-      .${ClassName.COLUMN_CONTROLS_INNER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
         display: flex;
         flex-direction: row;
       }
@@ -417,7 +459,7 @@ export const floatingColumnControls = (props: ThemeProps) => {
     .${ClassName.DRAG_COLUMN_CONTROLS} {
       box-sizing: border-box;
 
-      .${ClassName.COLUMN_CONTROLS_INNER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
         display: grid;
         justify-items: center;
       }