@atlaskit/editor-plugin-table 5.3.25 → 5.3.27

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rowControlsWrapperDotStyle = exports.resizeHandle = exports.insertRowButtonWrapper = exports.insertLine = exports.insertColumnButtonWrapper = exports.hoveredWarningCell = exports.hoveredDeleteButton = exports.hoveredCell = exports.floatingColumnControls = exports.dragInsertButtonWrapper = exports.dragCornerControlButton = exports.columnControlsLineMarker = exports.columnControlsDecoration = exports.OverflowShadow = exports.InsertMarker = exports.HeaderButtonHover = exports.HeaderButtonDanger = exports.HeaderButton = exports.DeleteButton = void 0;
+exports.rowControlsWrapperDotStyle = exports.resizeHandle = exports.insertRowButtonWrapper = exports.insertLine = exports.insertColumnButtonWrapper = exports.hoveredWarningCell = exports.hoveredDeleteButton = exports.hoveredCell = exports.floatingColumnControls = exports.dragInsertButtonWrapper = exports.dragCornerControlButton = exports.disabledCell = exports.columnControlsLineMarker = exports.columnControlsDecoration = exports.OverflowShadow = exports.InsertMarker = exports.HeaderButtonHover = exports.HeaderButtonDanger = exports.HeaderButton = exports.DeleteButton = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -14,7 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _types = require("../types");
 var _consts = require("./consts");
-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, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33;
+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, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
 var InsertLine = function InsertLine(props, cssString) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, (0, _consts.tableBorderSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, cssString);
 };
@@ -96,24 +96,27 @@ var columnControlsDecoration = exports.columnControlsDecoration = function colum
 var hoveredDeleteButton = exports.hoveredDeleteButton = function hoveredDeleteButton(props) {
   return (0, _react.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderDeleteColor)(props), _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableCellDeleteColor)(props));
 };
+var disabledCell = exports.disabledCell = function disabledCell(props) {
+  return (0, _react.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", ".", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n    .", ".", "::after {\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_DISABLED_CELL, _consts.tableCellDisabledColor, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_DISABLED_CELL, _consts.tableCellDisabledColor);
+};
 var hoveredCell = exports.hoveredCell = function hoveredCell(props) {
-  return (0, _react.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderSelectedColor)(props));
+  return (0, _react.css)(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderSelectedColor)(props));
 };
-var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
+var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
 
 // move the resize handle zone completely inside the table cell to avoid overflow
 var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2.default)(["\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      "])), _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex) : '';
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\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      "])), _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex) : '';
 };
 var resizeHandleOverrides = function resizeHandleOverrides(props) {
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
-    return (0, _react.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\n      th.", "::before,\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        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    "])), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
+    return (0, _react.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2.default)(["\n      th.", "::before,\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        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    "])), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
   }
-  return (0, _react.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2.default)(["\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  "])), _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
+  return (0, _react.css)(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2.default)(["\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  "])), _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
 };
 var resizeHandle = exports.resizeHandle = function resizeHandle(props) {
-  return (0, _react.css)(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2.default)(["\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    ", "\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"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(props), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
+  return (0, _react.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2.default)(["\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    ", "\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"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(props), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
 };
 var insertLine = exports.insertLine = function insertLine(props) {
-  return (0, _react.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -1px;\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      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\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% + ", "px);\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    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -1px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      bottom: 0;\n      height: ", "px;\n      width: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      bottom: 0;\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
+  return (0, _react.css)(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -1px;\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      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\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% + ", "px);\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    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -1px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      bottom: 0;\n      height: ", "px;\n      width: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      bottom: 0;\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
 };

package/dist/cjs/plugins/table/utils/decoration.js

@@ -16,6 +16,7 @@ var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../types");
 var _ColumnResizeWidget = require("../ui/ColumnResizeWidget");
+var _mergedCells = require("./merged-cells");
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 
 var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
@@ -38,7 +39,7 @@ var createCellHoverDecoration = exports.createCellHoverDecoration = function cre
     });
   });
 };
-var createControlsHoverDecoration = exports.createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, tr, danger, selected) {
+var createControlsHoverDecoration = exports.createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, tr, isDragAndDropEnable, hoveredIndexes, danger, selected) {
   var table = (0, _utils2.findTable)(tr.selection);
   if (!table) {
     return [];
@@ -65,6 +66,8 @@ var createControlsHoverDecoration = exports.createControlsHoverDecoration = func
   var updatedCells = cells.map(function (x) {
     return x.pos;
   });
+  var hasMergedCells = type === 'row' ? (0, _mergedCells.hasMergedCellsInRow)(hoveredIndexes[0])(tr.selection) : (0, _mergedCells.hasMergedCellsInColumn)(hoveredIndexes[0])(tr.selection);
+  var disabled = hasMergedCells;
 
   // ED-15246 fixed trello card table overflow issue
   // If columns / rows have been merged the hovered selection is different to the actual selection
@@ -115,6 +118,9 @@ var createControlsHoverDecoration = exports.createControlsHoverDecoration = func
     if (selected) {
       classes.push(_types.TableCssClassName.SELECTED_CELL);
     }
+    if (isDragAndDropEnable && disabled) {
+      classes.push(_types.TableCssClassName.HOVERED_DISABLED_CELL);
+    }
     classes.push(type === 'column' ? _types.TableCssClassName.HOVERED_COLUMN : type === 'row' ? _types.TableCssClassName.HOVERED_ROW : _types.TableCssClassName.HOVERED_TABLE);
     var key;
     switch (type) {

package/dist/es2019/plugins/table/commands/hover.js

@@ -1,7 +1,7 @@
 // #region Imports
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInColumn, getCellsInRow } from '@atlaskit/editor-tables/utils';
-import { createCommand } from '../pm-plugins/plugin-factory';
+import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import { TableDecorations } from '../types';
 import { createCellHoverDecoration, createColumnLineResize, createControlsHoverDecoration, getMergedCellsPositions, updatePluginStateDecorations } from '../utils';
 const makeArray = n => Array.from(Array(n).keys());
@@ -29,10 +29,13 @@ export const hoverMergedCells = () => createCommand(state => {
 }, tr => tr.setMeta('addToHistory', false));
 export const hoverColumns = (hoveredColumns, isInDanger) => createCommand(state => {
   const cells = getCellsInColumn(hoveredColumns)(state.tr.selection);
+  const {
+    isDragAndDropEnabled
+  } = getPluginState(state);
   if (!cells) {
     return false;
   }
-  const decorations = createControlsHoverDecoration(cells, 'column', state.tr, isInDanger);
+  const decorations = createControlsHoverDecoration(cells, 'column', state.tr, isDragAndDropEnabled, hoveredColumns, isInDanger);
   return {
     type: 'HOVER_COLUMNS',
     data: {
@@ -47,7 +50,10 @@ export const hoverRows = (hoveredRows, isInDanger) => createCommand(state => {
   if (!cells) {
     return false;
   }
-  const decorations = createControlsHoverDecoration(cells, 'row', state.tr, isInDanger);
+  const {
+    isDragAndDropEnabled
+  } = getPluginState(state);
+  const decorations = createControlsHoverDecoration(cells, 'row', state.tr, isDragAndDropEnabled, hoveredRows, isInDanger);
   return {
     type: 'HOVER_ROWS',
     data: {
@@ -69,7 +75,10 @@ export const hoverTable = (isInDanger, isSelected) => createCommand(state => {
   if (!cells) {
     return false;
   }
-  const decorations = createControlsHoverDecoration(cells, 'table', state.tr, isInDanger, isSelected);
+  const {
+    isDragAndDropEnabled
+  } = getPluginState(state);
+  const decorations = createControlsHoverDecoration(cells, 'table', state.tr, isDragAndDropEnabled, [], isInDanger, isSelected);
   return {
     type: 'HOVER_TABLE',
     data: {

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/commands.js

@@ -71,18 +71,31 @@ export const moveSource = (sourceType, sourceIndex, targetIndex) => createComman
 export const toggleDragMenu = (isDragMenuOpen, direction, index) => createCommand(state => {
   let {
     isDragMenuOpen: previousOpenState,
-    dragMenuDirection,
-    dragMenuIndex
+    dragMenuDirection: previousDragMenuDirection,
+    dragMenuIndex: previousDragMenuIndex
   } = getPluginState(state);
-  if (previousOpenState === isDragMenuOpen) {
+  if (previousOpenState === isDragMenuOpen && previousDragMenuDirection === direction && previousDragMenuIndex === index) {
     return false;
   }
+  let updatedMenuOpenState;
+  if (isDragMenuOpen !== undefined) {
+    updatedMenuOpenState = isDragMenuOpen;
+  } else {
+    // menu open but menu direction changed, means user clicked on drag handle of different row/column
+    // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
+    // 2 scenarios above , menu should remain open.
+    if (previousOpenState === true && previousDragMenuDirection !== direction || previousOpenState === true && previousDragMenuDirection === direction && previousDragMenuIndex !== index) {
+      updatedMenuOpenState = true;
+    } else {
+      updatedMenuOpenState = !previousOpenState;
+    }
+  }
   return {
     type: DragAndDropActionType.TOGGLE_DRAG_MENU,
     data: {
-      isDragMenuOpen: isDragMenuOpen === undefined ? !previousOpenState : isDragMenuOpen,
-      direction: direction !== null && direction !== void 0 ? direction : dragMenuDirection,
-      index: index !== null && index !== void 0 ? index : dragMenuIndex
+      isDragMenuOpen: updatedMenuOpenState,
+      direction: direction !== null && direction !== void 0 ? direction : previousDragMenuDirection,
+      index: index !== null && index !== void 0 ? index : previousDragMenuIndex
     }
   };
 }, tr => {

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -1,5 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
@@ -49,7 +50,11 @@ export const createPlugin = (dispatch, eventDispatcher) => {
           };
           if (newTargetCellPosition !== undefined) {
             const cells = getCellsInRow(dragMenuIndex)(tr.selection);
-            if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition)) {
+            // ED-20673 check if it is a cell selection,
+            // when true, a drag handle is clicked and isDragMenuOpen is true here
+            // should not close the drag menu.
+            const isCellSelection = tr.selection instanceof CellSelection;
+            if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition) && !isCellSelection) {
               return tr.setMeta(pluginKey, action);
             } // else NOP
           } else {

package/dist/es2019/plugins/table/types.js

@@ -90,6 +90,8 @@ export const TableCssClassName = {
   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`,
+  /** disabled classes */
+  DRAG_HANDLE_DISABLED: `${tablePrefixSelector}-drag-handle-disabled`,
   /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
   NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,
@@ -98,6 +100,7 @@ export const TableCssClassName = {
   HOVERED_ROW: `${tablePrefixSelector}-hovered-row`,
   HOVERED_TABLE: `${tablePrefixSelector}-hovered-table`,
   HOVERED_CELL: `${tablePrefixSelector}-hovered-cell`,
+  HOVERED_DISABLED_CELL: `${tablePrefixSelector}-hovered-disabled`,
   HOVERED_CELL_IN_DANGER: 'danger',
   HOVERED_CELL_ACTIVE: 'active',
   HOVERED_CELL_WARNING: `${tablePrefixSelector}-hovered-cell__warning`,

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

@@ -1,11 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
+import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
-import { DragHandleIcon } from '../icons';
+import { DragHandleDisabledIcon, DragHandleIcon } from '../icons';
 export const DragHandle = ({
   tableLocalId,
   direction = 'row',
@@ -16,15 +18,26 @@ export const DragHandle = ({
   onMouseOver,
   onMouseOut,
   onMouseUp,
-  onClick
+  onClick,
+  editorView
 }) => {
   const dragHandleDivRef = useRef(null);
   const [previewContainer, setPreviewContainer] = useState(null);
+  const {
+    isDragAndDropEnabled
+  } = getPluginState(editorView.state);
+  const {
+    selection
+  } = editorView.state;
+  const hasMergedCells = useMemo(() => direction === 'row' ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection), [indexes, direction, selection]);
   useEffect(() => {
     const dragHandleDivRefCurrent = dragHandleDivRef.current;
     if (dragHandleDivRefCurrent) {
       return draggable({
         element: dragHandleDivRefCurrent,
+        canDrag: () => {
+          return !hasMergedCells;
+        },
         getInitialData() {
           return {
             localId: tableLocalId,
@@ -63,9 +76,9 @@ export const DragHandle = ({
         }
       });
     }
-  }, [tableLocalId, direction, indexes]);
+  }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells]);
   return /*#__PURE__*/React.createElement("button", {
-    className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance),
+    className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, isDragAndDropEnabled && hasMergedCells && ClassName.DRAG_HANDLE_DISABLED),
     ref: dragHandleDivRef,
     style: {
       transform: direction === 'column' ? 'none' : 'rotate(90deg)',
@@ -76,7 +89,7 @@ export const DragHandle = ({
     onMouseOut: onMouseOut,
     onMouseUp: onMouseUp,
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(DragHandleIcon, null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+  }, hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight

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

@@ -6,6 +6,7 @@ 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 { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
@@ -76,12 +77,37 @@ export const DragMenu = ({
     menuItems,
     menuCallback
   } = convertToDropdownItems(dragMenuConfig);
+
+  /**
+   * This function is to check if the menu should be closed or not.
+   * As when continously clicking on drag handle on different rows/columns,
+   * should open the menu corresponding to the position of the drag handle.
+   * @returns true when the menu should be closed, false otherwise
+   */
+  const shouldCloseMenu = state => {
+    let {
+      isDragMenuOpen: previousOpenState,
+      dragMenuDirection: previousDragMenuDirection,
+      dragMenuIndex: previousDragMenuIndex
+    } = getPluginState(state);
+
+    // menu open but menu direction changed, means user clicked on drag handle of different row/column
+    // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
+    // 2 scenarios above , menu should not be closed.
+    if (previousOpenState === true && previousDragMenuDirection !== direction || previousOpenState === true && previousDragMenuDirection === direction && previousDragMenuIndex !== index) {
+      return false;
+    } else {
+      return true;
+    }
+  };
   const closeMenu = () => {
     const {
       state,
       dispatch
     } = editorView;
-    toggleDragMenu(false)(state, dispatch);
+    if (shouldCloseMenu(state)) {
+      toggleDragMenu(false, direction, index)(state, dispatch);
+    }
   };
   const handleMenuItemActivated = ({
     item

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

@@ -121,7 +121,8 @@ export const ColumnControls = ({
     onClick: handleClick,
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
-    onMouseUp: handleMouseUp
+    onMouseUp: handleMouseUp,
+    editorView: editorView
   }))));
 };
 export default ColumnControls;

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

@@ -110,7 +110,8 @@ const DragControlsComponent = ({
     onClick: handleClick,
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
-    onMouseUp: onMouseUp
+    onMouseUp: onMouseUp,
+    editorView: editorView
   })));
 };
 export const DragControls = injectIntl(DragControlsComponent);

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, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
+import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, disabledCell, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 
 /*
@@ -226,6 +226,7 @@ export const tableStyles = props => {
     ${columnControlsLineMarker()};
     ${hoveredDeleteButton(props)};
     ${hoveredCell(props)};
+    ${disabledCell(props)};
     ${hoveredWarningCell};
     ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props)};
     ${resizeHandle(props)};
@@ -673,55 +674,46 @@ export const tableStyles = props => {
       align-items: center;
       outline: none !important;
 
-      svg {
-        rect {
-          fill: ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
-        }
-        g {
-          fill: ${"var(--ds-icon-subtle, #626F86)"};
-        }
-      }
-
-      &:hover {
-        svg {
+      &:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
+        & > svg {
           rect {
-            fill: ${"var(--ds-background-accent-blue-subtle, #579DFF)"};
+            fill: ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
           }
           g {
-            fill: ${"var(--ds-icon-inverse, #FFF)"};
+            fill: ${"var(--ds-icon-subtle, #626F86)"};
           }
         }
-      }
 
-      &.selected {
-        svg {
-          rect {
-            fill: ${"var(--ds-background-accent-blue-subtle, #579DFF)"};
-          }
-          g {
-            fill: ${"var(--ds-icon-inverse, #FFF)"};
+        &:hover {
+          svg {
+            rect {
+              fill: ${"var(--ds-background-accent-blue-subtle, #579DFF)"};
+            }
+            g {
+              fill: ${"var(--ds-icon-inverse, #FFF)"};
+            }
           }
         }
-      }
 
-      &.danger {
-        svg {
-          rect {
-            fill: ${"var(--ds-background-accent-red-subtler-pressed, #F87462)"};
-          }
-          g {
-            fill: ${"var(--ds-border-inverse, #FFF)"};
+        &.selected {
+          svg {
+            rect {
+              fill: ${"var(--ds-background-accent-blue-subtle, #579dff)"};
+            }
+            g {
+              fill: ${"var(--ds-icon-inverse, #fff)"};
+            }
           }
         }
-      }
 
-      &.disabled {
-        svg {
-          rect {
-            fill: ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
-          }
-          g {
-            fill: ${"var(--ds-border-inverse, #FFF)"};
+        &.danger {
+          svg {
+            rect {
+              fill: ${"var(--ds-background-accent-red-subtler-pressed, #F87462)"};
+            }
+            g {
+              fill: ${"var(--ds-border-inverse, #FFF)"};
+            }
           }
         }
       }

package/dist/es2019/plugins/table/ui/consts.js

@@ -56,6 +56,7 @@ export const tableCellDeleteColor = themed({
   light: `var(--ds-blanket-danger, ${akEditorTableCellBlanketDeleted})`,
   dark: `var(--ds-blanket-danger, ${akEditorTableCellBlanketDeleted})`
 });
+export const tableCellDisabledColor = "var(--ds-background-accent-gray-subtler-hovered, #C1C7D0)";
 export const tableBorderDeleteColor = themed({
   light: `var(--ds-border-danger, ${R400})`,
   dark: `var(--ds-border-danger, ${R400})`

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

@@ -0,0 +1,37 @@
+import React from 'react';
+export const DragHandleDisabledIcon = ({
+  style
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "16",
+  viewBox: "0 0 24 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  style: style
+}, /*#__PURE__*/React.createElement("rect", {
+  width: "24",
+  height: "16",
+  rx: "4",
+  fill: "var(--ds-background-accent-gray-subtlest, Neutral200)"
+}), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("rect", {
+  x: "7",
+  y: "4",
+  width: "2",
+  height: "8",
+  rx: "1",
+  fill: "var(--ds-icon-disabled, #091E424F)"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "11",
+  y: "4",
+  width: "2",
+  height: "8",
+  rx: "1",
+  fill: "var(--ds-icon-disabled, #091E424F)"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "15",
+  y: "4",
+  width: "2",
+  height: "8",
+  rx: "1",
+  fill: "var(--ds-icon-disabled, #091E424F)"
+})));

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

@@ -1,5 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
+export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

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

@@ -5,7 +5,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellDisabledColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 const InsertLine = (props, cssString) => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
     background: ${tableBorderSelectedColor(props)};
@@ -597,6 +597,18 @@ export const hoveredDeleteButton = props => css`
     }
   }
 `;
+export const disabledCell = props => css`
+  :not(.${ClassName.IS_RESIZING})
+    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
+    .${ClassName.HOVERED_CELL}.${ClassName.HOVERED_DISABLED_CELL} {
+      position: relative;
+      border: 1px solid ${tableCellDisabledColor};
+    }
+    .${ClassName.HOVERED_CELL}.${ClassName.HOVERED_DISABLED_CELL}::after {
+      border: 1px solid ${tableCellDisabledColor};
+    }
+  }
+`;
 export const hoveredCell = props => css`
   :not(.${ClassName.IS_RESIZING})
     .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {

package/dist/es2019/plugins/table/utils/decoration.js

@@ -11,6 +11,7 @@ import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tab
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
+import { hasMergedCellsInColumn, hasMergedCellsInRow } from './merged-cells';
 const filterDecorationByKey = (key, decorationSet) => decorationSet.find(undefined, undefined, spec => spec.key.indexOf(key) > -1);
 export const findColumnControlSelectedDecoration = decorationSet => filterDecorationByKey(TableDecorations.COLUMN_SELECTED, decorationSet);
 export const findControlsHoverDecoration = decorationSet => filterDecorationByKey(TableDecorations.ALL_CONTROLS_HOVER, decorationSet);
@@ -19,7 +20,7 @@ export const createCellHoverDecoration = cells => cells.map(cell => Decoration.n
 }, {
   key: TableDecorations.CELL_CONTROLS_HOVER
 }));
-export const createControlsHoverDecoration = (cells, type, tr, danger, selected) => {
+export const createControlsHoverDecoration = (cells, type, tr, isDragAndDropEnable, hoveredIndexes, danger, selected) => {
   const table = findTable(tr.selection);
   if (!table) {
     return [];
@@ -38,6 +39,8 @@ export const createControlsHoverDecoration = (cells, type, tr, danger, selected)
     return [];
   }
   let updatedCells = cells.map(x => x.pos);
+  const hasMergedCells = type === 'row' ? hasMergedCellsInRow(hoveredIndexes[0])(tr.selection) : hasMergedCellsInColumn(hoveredIndexes[0])(tr.selection);
+  let disabled = hasMergedCells;
 
   // ED-15246 fixed trello card table overflow issue
   // If columns / rows have been merged the hovered selection is different to the actual selection
@@ -88,6 +91,9 @@ export const createControlsHoverDecoration = (cells, type, tr, danger, selected)
     if (selected) {
       classes.push(ClassName.SELECTED_CELL);
     }
+    if (isDragAndDropEnable && disabled) {
+      classes.push(ClassName.HOVERED_DISABLED_CELL);
+    }
     classes.push(type === 'column' ? ClassName.HOVERED_COLUMN : type === 'row' ? ClassName.HOVERED_ROW : ClassName.HOVERED_TABLE);
     let key;
     switch (type) {