@atlaskit/editor-plugin-table 4.0.2 → 4.0.3

package/dist/esm/plugins/table/ui/ui-styles.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
 import { css } from '@emotion/react';
 import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
 import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
@@ -51,29 +51,37 @@ export var OverflowShadow = function OverflowShadow(props) {
   return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: ", ";\n  }\n  .", " {\n    .", ", .", " {\n      height: calc(100% - ", "px);\n      top: ", "px;\n    }\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop, tableMarginTop, akEditorShadowZIndex, getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", getBooleanFF('platform.editor.custom-table-width') ? "calc(100% - ".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, "px)") : "calc(100% - ".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide - 10 : -2, "px)"), ClassName.WITH_CONTROLS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTopWithControl, tableMarginTopWithControl, ClassName.TABLE_LEFT_SHADOW, tableBorderColor(props));
 };
 var columnHeaderButton = function columnHeaderButton(props, cssString) {
-  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px solid ", ";\n  display: block;\n  box-sizing: border-box;\n  padding: 0;\n\n  :focus {\n    outline: none;\n  }\n\n  ", "\n"])), tableHeaderCellBackgroundColor(props), tableBorderColor(props), cssString);
+  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      background: ", ";\n      display: block;\n      box-sizing: border-box;\n      padding: 0;\n\n      :focus {\n        outline: none;\n      }\n\n      ", "\n    "])), tableHeaderCellBackgroundColor(props), cssString);
+  } else {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      background: ", ";\n      border: 1px solid ", ";\n      display: block;\n      box-sizing: border-box;\n      padding: 0;\n\n      :focus {\n        outline: none;\n      }\n\n      ", "\n    "])), tableHeaderCellBackgroundColor(props), tableBorderColor(props), cssString);
+  }
 };
 var columnHeaderButtonSelected = function columnHeaderButtonSelected(props) {
-  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(N0, ")"), tableToolbarSelectedColor(props), tableBorderSelectedColor(props), columnControlsSelectedZIndex);
+  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(N0, ")"), tableToolbarSelectedColor(props), tableBorderSelectedColor(props), columnControlsSelectedZIndex);
 };
 var getFloatingDotOverrides = function getFloatingDotOverrides(props) {
-  return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n        tr\n          th:last-child\n          .", "::before,\n          tr\n          td:last-child\n          .", "::before {\n          content: '';\n          background-color: ", ";\n          position: absolute;\n          height: ", "px;\n          width: ", "px;\n          border-radius: 50%;\n          pointer-events: none;\n          top: ", ";\n          right: 0px;\n        }\n      "])), ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor(props), lineMarkerSize, lineMarkerSize, "var(--ds-space-025, 2px)") : '';
+  return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        tr\n          th:last-child\n          .", "::before,\n          tr\n          td:last-child\n          .", "::before {\n          content: '';\n          background-color: ", ";\n          position: absolute;\n          height: ", "px;\n          width: ", "px;\n          border-radius: 50%;\n          pointer-events: none;\n          top: ", ";\n          right: 0px;\n        }\n      "])), ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor(props), lineMarkerSize, lineMarkerSize, "var(--ds-space-025, 2px)") : '';
 };
 export var columnControlsDecoration = function columnControlsDecoration(props) {
-  return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  .", " {\n    display: none;\n    cursor: pointer;\n    position: absolute;\n    width: calc(100% + ", "px);\n    left: -1px;\n    top: -", "px;\n    height: ", "px;\n    // floating dot for adding column button\n    &::before {\n      content: ' ';\n      background-color: ", ";\n      position: absolute;\n      height: ", "px;\n      width: ", "px;\n      border-radius: 50%;\n      pointer-events: none;\n      top: 2px;\n      right: -1px;\n    }\n\n    &::after {\n      content: ' ';\n\n      ", "\n    }\n  }\n\n  // floating dot for adding column button - overriding style on last column to avoid scroll\n  ", "\n\n  div.", ">.", "::after {\n    content: ' ';\n    background-color: ", ";\n    position: absolute;\n    height: ", "px;\n    width: ", "px;\n    border-radius: 50%;\n    pointer-events: none;\n    top: -", "px;\n    right: -1px;\n  }\n\n  .", " .", " {\n    display: block;\n  }\n\n  table\n    tr:first-of-type\n    td.", ",\n    table\n    tr:first-of-type\n    th.", " {\n    &.", ",\n      &.", ",\n      &.", " {\n      .", "::after {\n        ", ";\n      }\n\n      &.", "\n        .", "::after {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-bottom: none;\n        z-index: ", ";\n      }\n    }\n  }\n\n  .", "\n    table\n    tr:first-of-type\n    td.", ",\n    .", "\n    table\n    tr:first-of-type\n    th.", " {\n    .", "::after {\n      ", ";\n    }\n  }\n"])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor(props), lineMarkerSize, lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n        border-bottom: none;\n        height: ").concat(tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(props), ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor(props), lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
+  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      .", " {\n        display: none;\n        cursor: pointer;\n        position: absolute;\n        width: 100%;\n        left: 0;\n        top: -", "px;\n        height: ", "px;\n        // floating dot for adding column button\n        &::before {\n          content: ' ';\n          background-color: ", ";\n          position: absolute;\n          height: ", "px;\n          width: ", "px;\n          border-radius: 50%;\n          pointer-events: none;\n          top: 2px;\n          right: -1px;\n        }\n\n        &::after {\n          content: ' ';\n\n          ", "\n        }\n      }\n\n      // floating dot for adding column button - overriding style on last column to avoid scroll\n      ", "\n\n      div.", ">.", "::after {\n        content: ' ';\n        background-color: ", ";\n        position: absolute;\n        height: ", "px;\n        width: ", "px;\n        border-radius: 50%;\n        pointer-events: none;\n        top: -", "px;\n        right: -1px;\n      }\n\n      .", " .", " {\n        display: block;\n      }\n\n      table tr:first-of-type th.", " {\n        &.", ", &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border-color: ", ";\n            z-index: ", ";\n          }\n        }\n      }\n\n      table tr:first-of-type th.", " {\n        &.", ", &.", " {\n          .", "::after {\n            ", ";\n            border-left: ", "px solid\n              ", ";\n            left: -", "px;\n          }\n        }\n      }\n\n      table tr:first-of-type th.", " {\n        &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border-color: ", ";\n            border-left: ", "px solid\n              ", ";\n            left: -", "px;\n            z-index: ", ";\n          }\n        }\n      }\n\n      .", "\n        table\n        tr:first-of-type\n        td.", ",\n        .", "\n        table\n        tr:first-of-type\n        th.", " {\n        .", "::after {\n          ", ";\n        }\n      }\n    "])), ClassName.COLUMN_CONTROLS_DECORATIONS, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor(props), lineMarkerSize, lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n        border-top: ").concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n        border-bottom: ").concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n        box-sizing: content-box;\n        height: ").concat(tableToolbarSize - 1, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(props), ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor(props), lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), akEditorUnitZIndex * 100, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), tableCellBorderWidth, tableBorderSelectedColor(props), tableCellBorderWidth, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), tableCellBorderWidth, tableBorderDeleteColor(props), tableCellBorderWidth, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
+  } else {
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      .", " {\n        display: none;\n        cursor: pointer;\n        position: absolute;\n        width: calc(100% + ", "px);\n        left: -1px;\n        top: -", "px;\n        height: ", "px;\n        // floating dot for adding column button\n        &::before {\n          content: ' ';\n          background-color: ", ";\n          position: absolute;\n          height: ", "px;\n          width: ", "px;\n          border-radius: 50%;\n          pointer-events: none;\n          top: 2px;\n          right: -1px;\n        }\n\n        &::after {\n          content: ' ';\n\n          ", "\n        }\n      }\n\n      // floating dot for adding column button - overriding style on last column to avoid scroll\n      ", "\n\n      div.", ">.", "::after {\n        content: ' ';\n        background-color: ", ";\n        position: absolute;\n        height: ", "px;\n        width: ", "px;\n        border-radius: 50%;\n        pointer-events: none;\n        top: -", "px;\n        right: -1px;\n      }\n\n      .", " .", " {\n        display: block;\n      }\n\n      table\n        tr:first-of-type\n        td.", ",\n        table\n        tr:first-of-type\n        th.", " {\n        &.", ",\n          &.", ",\n          &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border: 1px solid ", ";\n            border-bottom: none;\n            z-index: ", ";\n          }\n        }\n      }\n\n      .", "\n        table\n        tr:first-of-type\n        td.", ",\n        .", "\n        table\n        tr:first-of-type\n        th.", " {\n        .", "::after {\n          ", ";\n        }\n      }\n    "])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor(props), lineMarkerSize, lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n        border-bottom: none;\n        height: ").concat(tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(props), ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor(props), lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
+  }
 };
 export var hoveredDeleteButton = function hoveredDeleteButton(props) {
-  return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor(props), ClassName.SELECTED_CELL, tableCellDeleteColor(props));
+  return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor(props), ClassName.SELECTED_CELL, tableCellDeleteColor(props));
 };
 export var hoveredCell = function hoveredCell(props) {
-  return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor(props));
+  return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor(props));
 };
-export var hoveredWarningCell = css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(Y50, ")"), "var(--ds-border-warning, ".concat(Y200, ")"));
+export var hoveredWarningCell = css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(Y50, ")"), "var(--ds-border-warning, ".concat(Y200, ")"));
 
 // move the resize handle zone completely inside the table cell to avoid overflow
 var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
-  return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n        tr\n          th:last-child\n          .", ",\n          tr\n          td:last-child\n          .", " {\n          background-color: transparent;\n          position: absolute;\n          width: ", "px;\n          height: 100%;\n          top: 0;\n          right: 0;\n          cursor: col-resize;\n          z-index: ", ";\n        }\n      "])), ClassName.RESIZE_HANDLE_DECORATION, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth / 2, resizeHandlerZIndex) : '';
+  return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n        tr\n          th:last-child\n          .", ",\n          tr\n          td:last-child\n          .", " {\n          background-color: transparent;\n          position: absolute;\n          width: ", "px;\n          height: 100%;\n          top: 0;\n          right: 0;\n          cursor: col-resize;\n          z-index: ", ";\n        }\n      "])), ClassName.RESIZE_HANDLE_DECORATION, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth / 2, resizeHandlerZIndex) : '';
 };
 export var resizeHandle = function resizeHandle(props) {
-  return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, getLastColumnResizerOverrides(), ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);
+  return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, getLastColumnResizerOverrides(), ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);
 };

package/dist/esm/plugins/table/utils/analytics.js

@@ -53,7 +53,7 @@ export var withEditorAnalyticsAPI = function withEditorAnalyticsAPI(payload) {
         return command(state, function (tr) {
           var dynamicPayload = payload instanceof Function ? payload(state) : payload;
           if (dynamicPayload) {
-            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(dynamicPayload)(tr);
+            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(dynamicPayload)(tr);
           }
           if (dispatch) {
             dispatch(tr);

package/dist/esm/plugins/table/utils/dom.js

@@ -91,7 +91,7 @@ export var getMousePositionHorizontalRelativeByElement = function getMousePositi
     var width, x;
     var closestCell = element.closest(SELECTOR_TABLE_LEAFS);
     var id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
-    width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 ? void 0 : (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
+    width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 || (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
     x = mouseEvent.offsetX;
     if (width <= 0) {
       return null;

package/dist/esm/plugins/table/utils/paste.js

@@ -57,7 +57,7 @@ export var transformSliceToFixHardBreakProblemOnCopyFromCell = function transfor
   return slice;
 };
 export var transformSliceToRemoveOpenTable = function transformSliceToRemoveOpenTable(slice, schema) {
-  var _slice$content$firstC6;
+  var _slice$content$firstC2;
   // we're removing the table, tableRow and tableCell reducing the open depth by 3
   var depthDecrement = 3;
 
@@ -67,14 +67,14 @@ export var transformSliceToRemoveOpenTable = function transformSliceToRemoveOpen
   slice.openStart >= 4 && slice.openEnd >= 4 &&
   // slice is a table node
   slice.content.childCount === 1 && slice.content.firstChild.type === schema.nodes.table) {
-    var _slice$content$firstC, _slice$content$firstC2, _slice$content$firstC3, _slice$content$firstC4, _slice$content$firstC5;
+    var _slice$content$firstC;
     // prosemirror-view has a bug that it duplicates table entry when selecting multiple paragraphs in a table cell.
     // https://github.com/ProseMirror/prosemirror/issues/1270
     // The structure becomes
     // table(genuine) > tableRow(genuine) > table(duplicated) > tableRow(duplicated) > tableCell/tableHeader(genuine) > contents(genuine)
     // As we are removing wrapping table anyway, we keep duplicated table and tableRow for simplicity
     var cleaned = slice;
-    if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : (_slice$content$firstC2 = _slice$content$firstC.content) === null || _slice$content$firstC2 === void 0 ? void 0 : (_slice$content$firstC3 = _slice$content$firstC2.firstChild) === null || _slice$content$firstC3 === void 0 ? void 0 : (_slice$content$firstC4 = _slice$content$firstC3.content) === null || _slice$content$firstC4 === void 0 ? void 0 : (_slice$content$firstC5 = _slice$content$firstC4.firstChild) === null || _slice$content$firstC5 === void 0 ? void 0 : _slice$content$firstC5.type) === schema.nodes.table) {
+    if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 || (_slice$content$firstC = _slice$content$firstC.content) === null || _slice$content$firstC === void 0 || (_slice$content$firstC = _slice$content$firstC.firstChild) === null || _slice$content$firstC === void 0 || (_slice$content$firstC = _slice$content$firstC.content) === null || _slice$content$firstC === void 0 || (_slice$content$firstC = _slice$content$firstC.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type) === schema.nodes.table) {
       cleaned = new Slice(slice.content.firstChild.content.firstChild.content, slice.openStart - 2, slice.openEnd - 2);
     }
     return new Slice(flatmap(cleaned.content, unwrapContentFromTable), cleaned.openStart - depthDecrement, cleaned.openEnd - depthDecrement);
@@ -85,7 +85,7 @@ export var transformSliceToRemoveOpenTable = function transformSliceToRemoveOpen
   // starts inside of a cell but ends outside of the starting table
   slice.openStart >= 4 &&
   // slice starts from a table node (and spans across more than one node)
-  slice.content.childCount > 1 && ((_slice$content$firstC6 = slice.content.firstChild) === null || _slice$content$firstC6 === void 0 ? void 0 : _slice$content$firstC6.type) === schema.nodes.table) {
+  slice.content.childCount > 1 && ((_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.type) === schema.nodes.table) {
     // repoint the slice's cutting depth so that cell content where the slice starts
     // does not get lifted out of the cell on paste
     return new Slice(slice.content, 1, slice.openEnd);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/custom-steps": "^0.0.2",
-    "@atlaskit/editor-common": "^76.1.0",
+    "@atlaskit/editor-common": "^76.5.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -106,6 +106,9 @@
     "platform.editor.table-sticky-scrollbar": {
       "type": "boolean"
     },
+    "platform.editor.table.column-controls-styles-updated": {
+      "type": "boolean"
+    },
     "platform.editor.update-table-cell-width-via-step": {
       "type": "boolean"
     },

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

@@ -194,6 +194,50 @@ const breakoutWidthStyling = () => {
   `;
 };
 
+const tableBorderStyles = (
+  props: ThemeProps & { featureFlags?: FeatureFlags },
+) => {
+  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
+    return `border-color: ${tableBorderDeleteColor(props)}`;
+  } else {
+    return `border: 1px solid ${tableBorderDeleteColor(props)}`;
+  }
+};
+
+const tableStickyHeaderColumnControlsDecorationsStyle = (
+  props: ThemeProps & { featureFlags?: FeatureFlags },
+) => {
+  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
+    return css`
+      .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+        z-index: 0;
+        left: -1px;
+      }
+
+      .${ClassName.TABLE_STICKY}
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+        border-left: 1px solid ${tableBorderColor(props)};
+      }
+
+      .${ClassName.TABLE_STICKY}
+        tr:first-of-type
+        th.${ClassName.TABLE_HEADER_CELL} {
+        &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            left: 0;
+          }
+        }
+      }
+    `;
+  } else {
+    return css`
+      .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+        z-index: 0;
+      }
+    `;
+  }
+};
+
 const tableWrapperStyles = () => {
   if (getBooleanFF('platform.editor.custom-table-width')) {
     return css`
@@ -323,9 +367,7 @@ export const tableStyles = (
       width: ${tableToolbarSize}px;
     }
 
-    .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-      z-index: 0;
-    }
+    ${tableStickyHeaderColumnControlsDecorationsStyle(props)}
 
     .${ClassName.TABLE_STICKY}
       .${ClassName.ROW_CONTROLS}
@@ -798,7 +840,7 @@ export const tableStyles = (
           pointer-events: none;
         }
         &.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-          border: 1px solid ${tableBorderDeleteColor(props)};
+          ${tableBorderStyles(props)};
           z-index: ${akEditorUnitZIndex * 100};
         }
       }

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

@@ -313,19 +313,36 @@ export const OverflowShadow = (props: ThemeProps) => css`
   }
 `;
 
-const columnHeaderButton = (props: ThemeProps, cssString?: string) => css`
-  background: ${tableHeaderCellBackgroundColor(props)};
-  border: 1px solid ${tableBorderColor(props)};
-  display: block;
-  box-sizing: border-box;
-  padding: 0;
-
-  :focus {
-    outline: none;
-  }
+const columnHeaderButton = (props: ThemeProps, cssString?: string) => {
+  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
+    return css`
+      background: ${tableHeaderCellBackgroundColor(props)};
+      display: block;
+      box-sizing: border-box;
+      padding: 0;
+
+      :focus {
+        outline: none;
+      }
 
-  ${cssString}
-`;
+      ${cssString}
+    `;
+  } else {
+    return css`
+      background: ${tableHeaderCellBackgroundColor(props)};
+      border: 1px solid ${tableBorderColor(props)};
+      display: block;
+      box-sizing: border-box;
+      padding: 0;
+
+      :focus {
+        outline: none;
+      }
+
+      ${cssString}
+    `;
+  }
+};
 
 const columnHeaderButtonSelected = (props: ThemeProps) => css`
   color: ${token('color.text.inverse', N0)};
@@ -357,104 +374,232 @@ const getFloatingDotOverrides = (props: ThemeProps) => {
     : '';
 };
 
-export const columnControlsDecoration = (props: ThemeProps) => css`
-  .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-    display: none;
-    cursor: pointer;
-    position: absolute;
-    width: calc(100% + ${tableCellBorderWidth * 2}px);
-    left: -1px;
-    top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
-    height: ${columnControlsDecorationHeight}px;
-    // floating dot for adding column button
-    &::before {
-      content: ' ';
-      background-color: ${tableBorderColor(props)};
-      position: absolute;
-      height: ${lineMarkerSize}px;
-      width: ${lineMarkerSize}px;
-      border-radius: 50%;
-      pointer-events: none;
-      top: 2px;
-      right: -1px;
-    }
+export const columnControlsDecoration = (props: ThemeProps) => {
+  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
+    return css`
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+        display: none;
+        cursor: pointer;
+        position: absolute;
+        width: 100%;
+        left: 0;
+        top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
+        height: ${columnControlsDecorationHeight}px;
+        // floating dot for adding column button
+        &::before {
+          content: ' ';
+          background-color: ${tableBorderColor(props)};
+          position: absolute;
+          height: ${lineMarkerSize}px;
+          width: ${lineMarkerSize}px;
+          border-radius: 50%;
+          pointer-events: none;
+          top: 2px;
+          right: -1px;
+        }
 
-    &::after {
-      content: ' ';
+        &::after {
+          content: ' ';
 
-      ${columnHeaderButton(
-        props,
-        `
+          ${columnHeaderButton(
+            props,
+            `
         border-right: ${tableCellBorderWidth}px solid ${tableBorderColor(
-          props,
-        )};
-        border-bottom: none;
-        height: ${tableToolbarSize}px;
+              props,
+            )};
+        border-top: ${tableCellBorderWidth}px solid ${tableBorderColor(props)};
+        border-bottom: ${tableCellBorderWidth}px solid ${tableBorderColor(
+              props,
+            )};
+        box-sizing: content-box;
+        height: ${tableToolbarSize - 1}px;
         width: 100%;
         position: absolute;
         top: ${columnControlsDecorationHeight - tableToolbarSize}px;
         left: 0px;
         z-index: ${columnControlsZIndex};
       `,
-      )}
-    }
-  }
+          )}
+        }
+      }
 
-  // floating dot for adding column button - overriding style on last column to avoid scroll
-  ${getFloatingDotOverrides(props)}
+      // floating dot for adding column button - overriding style on last column to avoid scroll
+      ${getFloatingDotOverrides(props)}
 
-  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;
-  }
+      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;
+      }
 
-  .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-    display: block;
-  }
+      .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+        display: block;
+      }
 
-  table
-    tr:first-of-type
-    td.${ClassName.TABLE_CELL},
-    table
-    tr:first-of-type
-    th.${ClassName.TABLE_HEADER_CELL} {
-    &.${ClassName.COLUMN_SELECTED},
-      &.${ClassName.HOVERED_COLUMN},
-      &.${ClassName.HOVERED_TABLE} {
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        ${columnHeaderButtonSelected(props)};
+      table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
+        &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_TABLE} {
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            ${columnHeaderButtonSelected(props)};
+          }
+
+          &.${ClassName.HOVERED_CELL_IN_DANGER}
+            .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            background-color: ${tableToolbarDeleteColor(props)};
+            border-color: ${tableBorderDeleteColor(props)};
+            z-index: ${akEditorUnitZIndex * 100};
+          }
+        }
+      }
+
+      table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
+        &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            ${columnHeaderButtonSelected(props)};
+            border-left: ${tableCellBorderWidth}px solid
+              ${tableBorderSelectedColor(props)};
+            left: -${tableCellBorderWidth}px;
+          }
+        }
       }
 
-      &.${ClassName.HOVERED_CELL_IN_DANGER}
+      table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
+        &.${ClassName.HOVERED_COLUMN} {
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            ${columnHeaderButtonSelected(props)};
+          }
+
+          &.${ClassName.HOVERED_CELL_IN_DANGER}
+            .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            background-color: ${tableToolbarDeleteColor(props)};
+            border-color: ${tableBorderDeleteColor(props)};
+            border-left: ${tableCellBorderWidth}px solid
+              ${tableBorderDeleteColor(props)};
+            left: -${tableCellBorderWidth}px;
+            z-index: ${akEditorUnitZIndex * 100};
+          }
+        }
+      }
+
+      .${ClassName.TABLE_SELECTED}
+        table
+        tr:first-of-type
+        td.${ClassName.TABLE_CELL},
+        .${ClassName.TABLE_SELECTED}
+        table
+        tr:first-of-type
+        th.${ClassName.TABLE_HEADER_CELL} {
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        background-color: ${tableToolbarDeleteColor(props)};
-        border: 1px solid ${tableBorderDeleteColor(props)};
+          ${columnHeaderButtonSelected(props)};
+        }
+      }
+    `;
+  } else {
+    return css`
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+        display: none;
+        cursor: pointer;
+        position: absolute;
+        width: calc(100% + ${tableCellBorderWidth * 2}px);
+        left: -1px;
+        top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
+        height: ${columnControlsDecorationHeight}px;
+        // floating dot for adding column button
+        &::before {
+          content: ' ';
+          background-color: ${tableBorderColor(props)};
+          position: absolute;
+          height: ${lineMarkerSize}px;
+          width: ${lineMarkerSize}px;
+          border-radius: 50%;
+          pointer-events: none;
+          top: 2px;
+          right: -1px;
+        }
+
+        &::after {
+          content: ' ';
+
+          ${columnHeaderButton(
+            props,
+            `
+        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor(
+              props,
+            )};
         border-bottom: none;
-        z-index: ${akEditorUnitZIndex * 100};
+        height: ${tableToolbarSize}px;
+        width: 100%;
+        position: absolute;
+        top: ${columnControlsDecorationHeight - tableToolbarSize}px;
+        left: 0px;
+        z-index: ${columnControlsZIndex};
+      `,
+          )}
+        }
       }
-    }
-  }
 
-  .${ClassName.TABLE_SELECTED}
-    table
-    tr:first-of-type
-    td.${ClassName.TABLE_CELL},
-    .${ClassName.TABLE_SELECTED}
-    table
-    tr:first-of-type
-    th.${ClassName.TABLE_HEADER_CELL} {
-    .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-      ${columnHeaderButtonSelected(props)};
-    }
+      // floating dot for adding column button - overriding style on last column to avoid scroll
+      ${getFloatingDotOverrides(props)}
+
+      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;
+      }
+
+      .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+        display: block;
+      }
+
+      table
+        tr:first-of-type
+        td.${ClassName.TABLE_CELL},
+        table
+        tr:first-of-type
+        th.${ClassName.TABLE_HEADER_CELL} {
+        &.${ClassName.COLUMN_SELECTED},
+          &.${ClassName.HOVERED_COLUMN},
+          &.${ClassName.HOVERED_TABLE} {
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            ${columnHeaderButtonSelected(props)};
+          }
+
+          &.${ClassName.HOVERED_CELL_IN_DANGER}
+            .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            background-color: ${tableToolbarDeleteColor(props)};
+            border: 1px solid ${tableBorderDeleteColor(props)};
+            border-bottom: none;
+            z-index: ${akEditorUnitZIndex * 100};
+          }
+        }
+      }
+
+      .${ClassName.TABLE_SELECTED}
+        table
+        tr:first-of-type
+        td.${ClassName.TABLE_CELL},
+        .${ClassName.TABLE_SELECTED}
+        table
+        tr:first-of-type
+        th.${ClassName.TABLE_HEADER_CELL} {
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+          ${columnHeaderButtonSelected(props)};
+        }
+      }
+    `;
   }
-`;
+};
 
 export const hoveredDeleteButton = (props: ThemeProps) => css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {