@atlaskit/editor-plugin-table 5.3.14 → 5.3.16

package/dist/es2019/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -1,7 +1,12 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
+import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
 const convertToDropdownItems = dragMenuConfig => {
@@ -14,7 +19,18 @@ const convertToDropdownItems = dragMenuConfig => {
       value: {
         name: item.id
       },
-      isDisabled: item.disabled
+      isDisabled: item.disabled,
+      elemBefore: item.icon ? jsx("div", {
+        style: {
+          marginRight: "var(--ds-space-negative-075, -6px)",
+          display: 'flex'
+        }
+      }, jsx(item.icon, {
+        label: item.title
+      })) : undefined,
+      elemAfter: item.keymap ? jsx("div", {
+        css: shortcutStyle
+      }, item.keymap) : undefined
     });
     item.onClick && (menuCallback[item.id] = item.onClick);
   });
@@ -31,10 +47,20 @@ export const DragMenu = ({
   tableNode,
   mountPoint,
   boundariesElement,
-  scrollableElement
+  scrollableElement,
+  targetCellPosition,
+  getEditorContainerWidth
 }) => {
   const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
-  const dragMenuConfig = getDragMenuConfig(direction, tableMap, index);
+  const {
+    state,
+    dispatch
+  } = editorView;
+  const {
+    selection
+  } = state;
+  const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect);
   const {
     menuItems,
     menuCallback
@@ -46,17 +72,33 @@ export const DragMenu = ({
     } = editorView;
     toggleDragMenu(false)(state, dispatch);
   };
-  const onMenuItemActivated = ({
+  const handleMenuItemActivated = ({
     item
   }) => {
     var _menuCallback$item$va;
-    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 ? void 0 : _menuCallback$item$va.call(menuCallback, editorView.state, editorView.dispatch);
+    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 ? void 0 : _menuCallback$item$va.call(menuCallback, state, dispatch);
     closeMenu();
   };
+  const handleItemMouseEnter = ({
+    item
+  }) => {
+    var _item$value$name;
+    if (!selectionRect || !((_item$value$name = item.value.name) !== null && _item$value$name !== void 0 && _item$value$name.startsWith('delete'))) {
+      return;
+    }
+    (item.value.name === 'delete_column' ? hoverColumns(getSelectedColumnIndexes(selectionRect), true) : hoverRows(getSelectedRowIndexes(selectionRect), true))(state, dispatch);
+  };
+  const handleItemMouseLeave = ({
+    item
+  }) => {
+    if (['sort_column_asc', 'sort_column_desc', 'delete_column', 'delete_row'].indexOf(item.value.name) > -1) {
+      clearHoverSelection()(state, dispatch);
+    }
+  };
   if (!menuItems) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
+  return jsx(DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially
@@ -70,7 +112,9 @@ export const DragMenu = ({
     }],
     isOpen: isOpen,
     onOpenChange: closeMenu,
-    onItemActivated: onMenuItemActivated,
+    onItemActivated: handleMenuItemActivated,
+    onMouseEnter: handleItemMouseEnter,
+    onMouseLeave: handleItemMouseLeave,
     fitWidth: dragMenuDropdownWidth,
     boundariesElement: boundariesElement
   });

package/dist/es2019/plugins/table/ui/FloatingDragMenu/index.js

@@ -15,7 +15,8 @@ const FloatingDragMenu = ({
   tableNode,
   direction,
   index,
-  targetCellPosition
+  targetCellPosition,
+  getEditorContainerWidth
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -49,7 +50,9 @@ const FloatingDragMenu = ({
     boundariesElement: boundariesElement,
     tableNode: tableNode,
     direction: direction,
-    index: index
+    index: index,
+    targetCellPosition: targetCellPosition,
+    getEditorContainerWidth: getEditorContainerWidth
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/es2019/plugins/table/ui/FloatingInsertButton/index.js

@@ -35,6 +35,11 @@ export class FloatingInsertButton extends React.Component {
       isDragAndDropEnabled,
       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' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
     if (!tableNode || !tableRef || !type) {
       return null;

package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -78,7 +78,7 @@ export const ColumnControls = ({
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS
   }, /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_CONTROLS_INNER,
+    className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls",
     style: {
       gridTemplateColumns: widths,
@@ -96,13 +96,7 @@ export const ColumnControls = ({
     className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
     contentEditable: false,
     key: index
-  }, !hasHeaderColumn && index === 0 && /*#__PURE__*/React.createElement("div", {
-    style: {
-      left: '0px',
-      right: 'unset'
-    },
-    className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT,
     style: columnParams.length - 1 === index ? {
       right: '0'
@@ -110,12 +104,10 @@ export const ColumnControls = ({
   }))), tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridColumn: gridColumnPosition,
-      zIndex: 99,
       display: 'flex',
-      width: '100%',
       justifyContent: 'center',
       alignItems: 'center',
-      marginTop: "var(--ds-space-negative-025, -2px)"
+      zIndex: 99
     },
     "data-column-control-index": hoveredCell.colIndex,
     "data-testid": "table-floating-column-control"

package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.js

@@ -17,10 +17,10 @@ export const ColumnDropTargets = ({
   const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   const marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
   return /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_DROP_TARGET_CONTROLS,
+    className: ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS,
     contentEditable: false
   }, /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_CONTROLS_INNER,
+    className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls-drop-targets"
   }, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map((width, index) => {
     return /*#__PURE__*/React.createElement(ColumnDropTarget, {

package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -81,7 +81,7 @@ export const TableFloatingColumnControls = ({
     return null;
   }
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_CONTROLS_WRAPPER,
+    className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/React.createElement(ColumnControls, {
     editorView: editorView,

package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -0,0 +1,93 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import classnames from 'classnames';
+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';
+class CornerControlComponent extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "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;
+    });
+    _defineProperty(this, "clearHoverSelection", () => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      clearHoverSelection()(state, dispatch);
+    });
+    _defineProperty(this, "selectTable", () => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+    });
+    _defineProperty(this, "hoverTable", () => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      hoverTable()(state, dispatch);
+    });
+  }
+  render() {
+    const {
+      isInDanger,
+      tableRef,
+      isHeaderColumnEnabled,
+      isHeaderRowEnabled,
+      intl: {
+        formatMessage
+      }
+    } = this.props;
+    if (!tableRef) {
+      return null;
+    }
+    const isActive = this.isActive();
+    return /*#__PURE__*/React.createElement("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
+    }, /*#__PURE__*/React.createElement("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 && /*#__PURE__*/React.createElement("div", {
+      className: ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ClassName.CONTROLS_INSERT_MARKER
+    })), !isHeaderColumnEnabled && /*#__PURE__*/React.createElement("div", {
+      className: ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ClassName.CONTROLS_INSERT_MARKER
+    })));
+  }
+}
+export const CornerControls = injectIntl(CornerControlComponent);

package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
+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';
+const DragCornerControlsComponent = ({
+  editorView,
+  isInDanger,
+  intl: {
+    formatMessage
+  }
+}) => {
+  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 /*#__PURE__*/React.createElement("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
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ClassName.DRAG_CORNER_BUTTON_INNER
+  }));
+};
+export const DragCornerControls = injectIntl(DragCornerControlsComponent);

package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/index.js

@@ -1,99 +1,2 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
-import classnames from 'classnames';
-import { defineMessages, 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';
-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.'
-  }
-});
-class CornerControlComponent extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "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;
-    });
-    _defineProperty(this, "clearHoverSelection", () => {
-      const {
-        state,
-        dispatch
-      } = this.props.editorView;
-      clearHoverSelection()(state, dispatch);
-    });
-    _defineProperty(this, "selectTable", () => {
-      const {
-        state,
-        dispatch
-      } = this.props.editorView;
-      dispatch(selectTable(state.tr).setMeta('addToHistory', false));
-    });
-    _defineProperty(this, "hoverTable", () => {
-      const {
-        state,
-        dispatch
-      } = this.props.editorView;
-      hoverTable()(state, dispatch);
-    });
-  }
-  render() {
-    const {
-      isInDanger,
-      tableRef,
-      isHeaderColumnEnabled,
-      isHeaderRowEnabled,
-      intl: {
-        formatMessage
-      }
-    } = this.props;
-    if (!tableRef) {
-      return null;
-    }
-    const isActive = this.isActive();
-    return /*#__PURE__*/React.createElement("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
-    }, /*#__PURE__*/React.createElement("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 && /*#__PURE__*/React.createElement("div", {
-      className: ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
-    }, /*#__PURE__*/React.createElement("div", {
-      className: ClassName.CONTROLS_INSERT_MARKER
-    })), !isHeaderColumnEnabled && /*#__PURE__*/React.createElement("div", {
-      className: ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
-    }, /*#__PURE__*/React.createElement("div", {
-      className: ClassName.CONTROLS_INSERT_MARKER
-    })));
-  }
-}
-export const CornerControls = injectIntl(CornerControlComponent);
+export { CornerControls } from './ClassicCornerControls';
+export { DragCornerControls } from './DragCornerControls';

package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -90,13 +90,7 @@ const DragControlsComponent = ({
     className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
     contentEditable: false,
     key: index
-  }, !hasHeaderRow && index === 0 && /*#__PURE__*/React.createElement("div", {
-    style: {
-      top: '0px',
-      left: "var(--ds-space-075, 6px)"
-    },
-    className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
   }))), !isResizing && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
     style: {

package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js

@@ -4,7 +4,7 @@ import { browser } from '@atlaskit/editor-common/utils';
 import { hoverCell, hoverRows, selectRow } from '../../commands';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { isSelectionUpdated } from '../../utils';
-import { CornerControls } from './CornerControls';
+import { CornerControls, DragCornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
 import { DragControls, RowControls } from './RowControls';
 export default class TableFloatingControls extends Component {
@@ -137,7 +137,12 @@ export default class TableFloatingControls extends Component {
       updateCellHoverLocation: this.updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
-    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragControls, {
+    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragCornerControls, {
+      editorView: editorView,
+      tableRef: tableRef,
+      isInDanger: isInDanger,
+      isResizing: isResizing
+    }), /*#__PURE__*/React.createElement(DragControls, {
       tableRef: tableRef,
       tableNode: tableNode,
       hoveredCell: hoveredCell,
@@ -149,7 +154,7 @@ export default class TableFloatingControls extends Component {
       hoverRows: this.hoverRows,
       selectRow: this.selectRow,
       updateCellHoverLocation: this.updateCellHoverLocation
-    }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
+    })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -7,7 +7,7 @@ import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
-import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
+import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 
 /*
@@ -272,6 +272,8 @@ export const tableStyles = props => {
 
     ${dragInsertButtonWrapper(props)}
 
+    ${dragCornerControlButton(props)}
+
     /* Delete button */
     ${DeleteButton(props)}
     /* Ends Delete button */
@@ -455,7 +457,7 @@ export const tableStyles = props => {
         }
       }
 
-      .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
         padding: 0 ${tablePadding}px;
       }
 
@@ -630,11 +632,11 @@ export const tableStyles = props => {
     }
 
     .${ClassName.DRAG_COLUMN_CONTROLS} {
-      .${ClassName.COLUMN_CONTROLS_INNER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
         height: 24px;
         position: absolute;
         top: ${"var(--ds-space-negative-150, -12px)"};
-        z-index: ${akEditorUnitZIndex};
+        z-index: ${akEditorUnitZIndex * 13};
       }
 
       .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER} {
@@ -917,9 +919,9 @@ export const tableStyles = props => {
       z-index: ${akEditorUnitZIndex};
     }
 
-    .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+    .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
       position: absolute;
-      top: ${tableMarginTop + 1}px;
+      top: ${tableMarginTop}px;
     }
 
     ${tableWrapperStyles()}

package/dist/es2019/plugins/table/ui/icons/AddColLeftIcon.js

@@ -0,0 +1,35 @@
+import React from 'react';
+export const AddColLeftIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("rect", {
+  width: "24",
+  height: "24",
+  transform: "matrix(0 -1 1 0 0 24)",
+  fill: "none",
+  fillOpacity: "0.01"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "12",
+  y: "18",
+  width: "12",
+  height: "3",
+  rx: "0.5",
+  transform: "rotate(-90 12 18)",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "16",
+  y: "18",
+  width: "12",
+  height: "3",
+  rx: "0.5",
+  transform: "rotate(-90 16 18)",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M7 11H5.99C5.72652 11.0026 5.47473 11.1092 5.28935 11.2964C5.10397 11.4837 4.99999 11.7365 5 12C5 12.556 5.444 13 5.99 13H7V14C7 14.2652 7.10536 14.5196 7.29289 14.7071C7.48043 14.8946 7.73478 15 8 15C8.26522 15 8.51957 14.8946 8.70711 14.7071C8.89464 14.5196 9 14.2652 9 14V13H10.01C10.2735 12.9974 10.5253 12.8908 10.7107 12.7036C10.896 12.5163 11 12.2635 11 12C11 11.444 10.556 11 10.01 11H9V10C9 9.73478 8.89464 9.48043 8.70711 9.29289C8.51957 9.10536 8.26522 9 8 9C7.73478 9 7.48043 9.10536 7.29289 9.29289C7.10536 9.48043 7 9.73478 7 10V11Z",
+  fill: "currentColor"
+}));

package/dist/es2019/plugins/table/ui/icons/AddColRightIcon.js

@@ -0,0 +1,35 @@
+import React from 'react';
+export const AddColRightIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("rect", {
+  width: "24",
+  height: "24",
+  transform: "translate(0 24) rotate(-90)",
+  fill: "none",
+  fillOpacity: "0.01"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "9",
+  y: "18",
+  width: "12",
+  height: "3",
+  rx: "0.5",
+  transform: "rotate(-90 9 18)",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "5",
+  y: "18",
+  width: "12",
+  height: "3",
+  rx: "0.5",
+  transform: "rotate(-90 5 18)",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M15 11L13.99 11C13.7265 11.0026 13.4747 11.1092 13.2893 11.2964C13.104 11.4837 13 11.7365 13 12C13 12.556 13.444 13 13.99 13L15 13L15 14C15 14.2652 15.1054 14.5196 15.2929 14.7071C15.4804 14.8946 15.7348 15 16 15C16.2652 15 16.5196 14.8946 16.7071 14.7071C16.8946 14.5196 17 14.2652 17 14L17 13L18.01 13C18.2735 12.9974 18.5253 12.8908 18.7107 12.7036C18.896 12.5163 19 12.2635 19 12C19 11.444 18.556 11 18.01 11L17 11L17 10C17 9.73478 16.8946 9.48043 16.7071 9.29289C16.5196 9.10536 16.2652 9 16 9C15.7348 9 15.4804 9.10536 15.2929 9.29289C15.1054 9.48043 15 9.73478 15 10L15 11Z",
+  fill: "currentColor"
+}));