@atlaskit/editor-plugin-table 0.2.2 → 0.2.4

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

@@ -23,13 +23,13 @@ var _components = require("@atlaskit/theme/components");
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4135
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 var tableCellBackgroundColor = (0, _components.themed)({
-  light: _colors.N0,
-  dark: _colors.DN30
+  light: (0, _tokens.token)('elevation.surface', _colors.N0),
+  dark: (0, _tokens.token)('elevation.surface', _colors.DN30)
 });
 exports.tableCellBackgroundColor = tableCellBackgroundColor;
 var tableToolbarColor = (0, _components.themed)({
-  light: _editorSharedStyles.akEditorTableToolbar,
-  dark: _editorSharedStyles.akEditorTableToolbarDark
+  light: (0, _tokens.token)('color.background.neutral.subtle', _editorSharedStyles.akEditorTableToolbar),
+  dark: (0, _tokens.token)('color.background.neutral.subtle', _editorSharedStyles.akEditorTableToolbarDark)
 });
 exports.tableToolbarColor = tableToolbarColor;
 var tableTextColor = (0, _components.themed)({

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

@@ -46,19 +46,19 @@ var Button = function Button(cssString) {
 };
 
 var HeaderButton = function HeaderButton(props, cssString) {
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\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\n  .", "::after {\n    content: ' ';\n    background-color: transparent;\n    left: -15px;\n    top: 0;\n    position: absolute;\n    width: 15px;\n    height: 100%;\n    z-index: 1;\n  }\n\n  .active .", " {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, (0, _consts.tableToolbarColor)(props), (0, _consts.tableBorderColor)(props), cssString, _types.TableCssClassName.ROW_CONTROLS_BUTTON, _types.TableCssClassName.CONTROLS_BUTTON, (0, _tokens.token)('color.icon.inverse', _colors.N0), _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\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\n  .", "::after {\n    content: ' ';\n    background-color: transparent;\n    left: -15px;\n    top: 0;\n    position: absolute;\n    width: 15px;\n    height: 100%;\n    z-index: 1;\n  }\n\n  .active .", " {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, (0, _consts.tableToolbarColor)(props), (0, _consts.tableBorderColor)(props), cssString, _types.TableCssClassName.ROW_CONTROLS_BUTTON, _types.TableCssClassName.CONTROLS_BUTTON, (0, _tokens.token)('color.icon.inverse', _colors.N0), (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _consts.tableBorderSelectedColor);
 };
 
 exports.HeaderButton = HeaderButton;
 
 var HeaderButtonHover = function HeaderButtonHover() {
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  .", ":hover {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, (0, _tokens.token)('color.icon.inverse', _colors.N0), _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  .", ":hover {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, (0, _tokens.token)('color.icon.inverse', _colors.N0), (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _consts.tableBorderSelectedColor);
 };
 
 exports.HeaderButtonHover = HeaderButtonHover;
 
 var HeaderButtonDanger = function HeaderButtonDanger() {
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  .", " .", " {\n    background-color: ", ";\n    border-color: ", ";\n    position: relative;\n    z-index: ", ";\n  }\n"])), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.CONTROLS_BUTTON, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex);
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  .", " .", " {\n    background-color: ", ";\n    border-color: ", ";\n    position: relative;\n    z-index: ", ";\n  }\n"])), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.CONTROLS_BUTTON, (0, _tokens.token)('color.background.danger', _consts.tableToolbarDeleteColor), _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex);
 };
 
 exports.HeaderButtonDanger = HeaderButtonDanger;
@@ -99,10 +99,10 @@ var columnHeaderButton = function columnHeaderButton(props, cssString) {
   return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _consts.tableToolbarColor)(props), (0, _consts.tableBorderColor)(props), cssString);
 };
 
-var columnHeaderButtonSelected = (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), (0, _tokens.token)('color.text.inverse', _colors.N0), _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor, _consts.columnControlsSelectedZIndex);
+var columnHeaderButtonSelected = (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), (0, _tokens.token)('color.text.inverse', _colors.N0), (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _consts.tableBorderSelectedColor, _consts.columnControlsSelectedZIndex);
 
 var columnControlsDecoration = function columnControlsDecoration(props) {
-  return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\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\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  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"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: none;\n        height: ").concat(_consts.tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
+  return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\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\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  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"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: none;\n        height: ").concat(_consts.tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _tokens.token)('color.background.danger', _consts.tableToolbarDeleteColor), _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
 };
 
 exports.columnControlsDecoration = columnControlsDecoration;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.2.2",
+	"version": "0.2.4",
 	"sideEffects": false
 }

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

@@ -100,7 +100,8 @@ export const hoverTable = (isInDanger, isSelected) => createCommand(state => {
 export const clearHoverSelection = () => createCommand(state => ({
   type: 'CLEAR_HOVER_SELECTION',
   data: {
-    decorationSet: updatePluginStateDecorations(state, [], TableDecorations.ALL_CONTROLS_HOVER)
+    decorationSet: updatePluginStateDecorations(state, [], TableDecorations.ALL_CONTROLS_HOVER),
+    isInDanger: false
   }
 }));
 export const showResizeHandleLine = cellColumnPositioning => createCommand(state => ({

package/dist/es2019/plugins/table/event-handlers.js

@@ -11,7 +11,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
-import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, isCell, isColumnControlsDecorations, isCornerButton, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableControlsButton, isTableContainerOrWrapper } from './utils';
+import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, isCell, isColumnControlsDecorations, isCornerButton, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableControlsButton, isTableContainerOrWrapper, hasResizeHandler } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 
 const isFocusingCalendar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
@@ -209,7 +209,7 @@ export const handleMouseLeave = (view, event) => {
 
   return false;
 };
-export const handleMouseMove = getEditorFeatureFlags => (view, event, tableCellOptimization, elementContentRects) => {
+export const handleMouseMove = getEditorFeatureFlags => (view, event, elementContentRects) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
@@ -225,7 +225,7 @@ export const handleMouseMove = getEditorFeatureFlags => (view, event, tableCellO
       insertColumnButtonIndex
     } = getPluginState(state);
     const [startIndex, endIndex] = getColumnOrRowIndex(element);
-    const positionColumn = getMousePositionHorizontalRelativeByElement(event, tableCellOptimization, elementContentRects) === 'right' ? endIndex : startIndex;
+    const positionColumn = getMousePositionHorizontalRelativeByElement(event, false, elementContentRects) === 'right' ? endIndex : startIndex;
 
     if (positionColumn !== insertColumnButtonIndex) {
       return showInsertColumnButton(positionColumn)(state, dispatch);
@@ -250,13 +250,10 @@ export const handleMouseMove = getEditorFeatureFlags => (view, event, tableCellO
 
   const {
     mouseMoveOptimization
-  } = getEditorFeatureFlags(); // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
-  // because it relies on tableCell node view that is added  via tableCellOptimization
-
-  const useMouseMoveOptimisation = tableCellOptimization && mouseMoveOptimization;
+  } = getEditorFeatureFlags();
 
   if (!isResizeHandleDecoration(element) && isCell(element)) {
-    const positionColumn = getMousePositionHorizontalRelativeByElement(event, useMouseMoveOptimisation, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
+    const positionColumn = getMousePositionHorizontalRelativeByElement(event, mouseMoveOptimization, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
 
     if (positionColumn !== null) {
       const {
@@ -275,7 +272,10 @@ export const handleMouseMove = getEditorFeatureFlags => (view, event, tableCellO
         const columnEndIndexTarget = positionColumn === 'left' ? rect.left : rect.right;
         const rowIndexTarget = rect.top;
 
-        if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex) {
+        if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
+          target: element,
+          columnEndIndexTarget
+        })) {
           return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget)(state, dispatch);
         }
       }
@@ -370,17 +370,14 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI) => {
   return tr;
 };
 export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mouseEvent) => {
-  var _tablePluginState$plu;
-
   const tableResizePluginState = getResizePluginState(view.state);
   const tablePluginState = getPluginState(view.state);
   const isDragging = tableResizePluginState && !!tableResizePluginState.dragging;
   const hasTableNode = tablePluginState && tablePluginState.tableNode;
-  const tableCellOptimization = tablePluginState === null || tablePluginState === void 0 ? void 0 : (_tablePluginState$plu = tablePluginState.pluginConfig) === null || _tablePluginState$plu === void 0 ? void 0 : _tablePluginState$plu.tableCellOptimization;
 
   if (!hasTableNode || isDragging) {
     return false;
   }
 
-  return eventHandler(view, mouseEvent, tableCellOptimization, elementContentRects);
+  return eventHandler(view, mouseEvent, elementContentRects);
 };

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

@@ -349,7 +349,7 @@ const tablesPlugin = options => {
         }
 
       }],
-      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -3,12 +3,13 @@ import React from 'react';
 import classnames from 'classnames';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import rafSchedule from 'raf-schd';
+import { findTable } from '@atlaskit/editor-tables/utils';
 import { calcTableWidth, tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorMobileBreakoutPoint, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { parsePx } from '@atlaskit/editor-common/utils';
-import { autoSizeTable } from '../commands';
+import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
 import { scaleTable } from '../pm-plugins/table-resizing';
@@ -392,10 +393,20 @@ class TableComponent extends React.Component {
 
   componentDidUpdate(prevProps) {
     const {
+      view,
       getNode,
       isMediaFullscreen,
       allowColumnResizing
     } = this.props;
+    const {
+      isInDanger
+    } = getPluginState(view.state);
+    const table = findTable(view.state.selection);
+
+    if (isInDanger && !table) {
+      clearHoverSelection()(view.state, view.dispatch);
+    }
+
     const {
       tableOverflowShadowsOptimization
     } = this.props.getEditorFeatureFlags();

package/dist/es2019/plugins/table/pm-plugins/default-table-selection.js

@@ -1,5 +1,4 @@
 export const defaultTableSelection = {
   hoveredColumns: [],
-  hoveredRows: [],
-  isInDanger: false
+  hoveredRows: []
 };

package/dist/es2019/plugins/table/pm-plugins/main.js

@@ -49,10 +49,10 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       elementContentRects[entry.target.id] = entry.contentRect;
     });
   }) : undefined;
-  const tableCellNodeview = pluginConfig.tableCellOptimization ? {
+  const tableCellNodeview = {
     tableCell: (node, view, getPos) => new TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer),
     tableHeader: (node, view, getPos) => new TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer)
-  } : {}; // Used to prevent invalid table cell spans being reported more than once per editor/document
+  }; // Used to prevent invalid table cell spans being reported more than once per editor/document
 
   const invalidTableIds = [];
   let editorViewRef = null;

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -11,12 +11,35 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle'; // limit scroll event calls
 
 const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200; // timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
-// if too short it would trigger too many dom udpates.
+// if too short it would trigger too many dom updates.
 
 const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
+
+const anyChildCellMergedAcrossRow = node => mapChildren(node, child => child.attrs.rowspan || 0).some(rowspan => rowspan > 1);
+/**
+ * Compare two table row nodes and return true if the two table rows have a
+ * different number of table cells or if table cell row spans are different
+ */
+
+
+const rowHasDifferentMergedCells = (prevNode, incomingNode) => {
+  const incomingNodeChildrenRowSpan = mapChildren(prevNode, child => child.attrs.rowspan || 0);
+  const currentNodeChildrenRowSpan = mapChildren(incomingNode, child => child.attrs.rowspan || 0);
+  return incomingNodeChildrenRowSpan.length !== currentNodeChildrenRowSpan.length || currentNodeChildrenRowSpan.some((child, index) => child !== incomingNodeChildrenRowSpan[index]);
+};
+/**
+ * Check if a given node is a header row with this definition:
+ *  - all children are tableHeader cells
+ *  - no table cells have been have merged with other table row cells
+ *
+ * @param node ProseMirror node
+ * @return boolean if it meets definition
+ */
+
+
 export const supportedHeaderRow = node => {
   const allHeaders = mapChildren(node, child => child.type.name === 'tableHeader').every(Boolean);
-  const someMerged = mapChildren(node, child => child.attrs.rowspan || 0).some(rowspan => rowspan > 1);
+  const someMerged = anyChildCellMergedAcrossRow(node);
   return allHeaders && !someMerged;
 };
 export class TableRowNodeView {
@@ -484,10 +507,14 @@ export class TableRowNodeView {
     // changing away from one
 
 
-    const newNodeisHeaderRow = supportedHeaderRow(node);
+    const newNodeIsHeaderRow = supportedHeaderRow(node);
 
-    if (this.isHeaderRow !== newNodeisHeaderRow) {
+    if (this.isHeaderRow !== newNodeIsHeaderRow) {
       return false; // re-create nodeview
+    }
+
+    if (rowHasDifferentMergedCells(this.node, node)) {
+      return false;
     } // node is different but no need to re-create nodeview
 
 

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/resize-logic.js

@@ -22,7 +22,7 @@ export const growColumn = (state, colIndex, amount, selectedColumns) => {
 };
 export const shrinkColumn = (state, colIndex, amount, selectedColumns) => {
   // can't shrink if columns don't exist
-  if (!state.cols[colIndex] || !state.cols[colIndex + 1]) {
+  if (!state.cols[colIndex]) {
     return state;
   } // try to shrink dragging column by giving from the column to the right first
 

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

@@ -3,12 +3,12 @@ import { jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import commonMessages from '@atlaskit/editor-common/messages';
-import { clearHoverSelection, hoverTable } from './commands';
+import { clearHoverSelection, hoverTable, hoverColumns, hoverRows } from './commands';
 import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics, sortColumnWithAnalytics, setColorWithAnalytics, distributeColumnsWidthsWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { TableCssClassName } from './types';
-import { getMergedCellsPositions } from './utils';
+import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from './utils';
 import { isReferencedSource } from './utils/referentiality';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
@@ -23,6 +23,7 @@ import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizin
 import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 export const messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',
@@ -90,7 +91,7 @@ export const getToolbarMenuConfig = (config, state, {
 // relay it to the native mobile. Native mobile displays the menu
 // with native widgets. It's enabled via a plugin config.
 
-export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
+export const getToolbarCellOptionsConfig = (editorState, editorView, initialSelectionRect, {
   formatMessage
 }, getEditorContainerWidth, editorAnalyticsAPI) => {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
@@ -157,6 +158,17 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
 
       return true;
     },
+    onMouseOver: (state, dispatch) => {
+      const selectionRect = getClosestSelectionRect(state);
+
+      if (selectionRect) {
+        hoverColumns(getSelectedColumnIndexes(selectionRect), true)(state, dispatch);
+        return true;
+      }
+
+      return false;
+    },
+    onMouseLeave: clearHoverSelection(),
     selected: false,
     disabled: false
   }, {
@@ -173,6 +185,17 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
 
       return true;
     },
+    onMouseOver: (state, dispatch) => {
+      const selectionRect = getClosestSelectionRect(state);
+
+      if (selectionRect) {
+        hoverRows(getSelectedRowIndexes(selectionRect), true)(state, dispatch);
+        return true;
+      }
+
+      return false;
+    },
+    onMouseLeave: clearHoverSelection(),
     selected: false,
     disabled: false
   }, {
@@ -190,9 +213,12 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
   }];
 
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
-    const distributeColumnWidths = (state, dispatch, view) => {
-      const newResizeStateWithAnalytics = view ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, view.domAtPos.bind(view), getEditorContainerWidth) : undefined;
+    var _newResizeStateWithAn;
+
+    const newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth) : undefined;
+    const wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
 
+    const distributeColumnWidths = (state, dispatch) => {
       if (newResizeStateWithAnalytics) {
         distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
         return true;
@@ -206,12 +232,13 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
       title: formatMessage(ContextualMenuMessages.distributeColumns),
       onClick: distributeColumnWidths,
       selected: false,
-      disabled: numberOfColumns <= 1
+      disabled: !wouldChange
     });
   }
 
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo2 = pluginState.pluginConfig) !== null && _pluginState$pluginCo2 !== void 0 && _pluginState$pluginCo2.allowColumnSorting) {
     const hasMergedCellsInTable = getMergedCellsPositions(editorState.tr).length > 0;
+    const warning = hasMergedCellsInTable ? formatMessage(ContextualMenuMessages.canNotSortTable) : undefined;
     options.push({
       id: 'editor.table.sortColumnAsc',
       title: formatMessage(ContextualMenuMessages.sortColumnASC),
@@ -220,7 +247,8 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
         return true;
       },
       selected: false,
-      disabled: hasMergedCellsInTable
+      disabled: hasMergedCellsInTable,
+      tooltip: warning
     });
     options.push({
       id: 'editor.table.sortColumnDesc',
@@ -230,7 +258,8 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
         return true;
       },
       selected: false,
-      disabled: hasMergedCellsInTable
+      disabled: hasMergedCellsInTable,
+      tooltip: warning
     });
   }
 
@@ -268,7 +297,7 @@ const getClosestSelectionRect = state => {
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };
 
-export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags) => config => (state, intl) => {
+export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) => config => (state, intl) => {
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
@@ -279,7 +308,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     const {
       tableCellOptionsInFloatingToolbar
     } = getEditorFeatureFlags() || {};
-    const cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
+    const cellItems = getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
     const colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
 
     let confirmDialog;
@@ -313,6 +342,8 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
       getDomRef,
       nodeType,
       offset: [0, 3],
+      zIndex: akEditorFloatingPanelZIndex + 1,
+      // Place the context menu slightly above the others
       items: [menu, separator(menu.hidden), ...cellItems, ...colorPicker, {
         type: 'extensions-placeholder',
         separator: 'end'
@@ -353,14 +384,14 @@ const separator = hidden => {
   };
 };
 
-const getCellItems = (pluginConfig, state, {
+const getCellItems = (pluginConfig, state, view, {
   formatMessage
 }, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) => {
   if (pluginConfig.allowCellOptionsInFloatingToolbar || tableCellOptionsInFloatingToolbar) {
     const initialSelectionRect = getClosestSelectionRect(state);
 
     if (initialSelectionRect) {
-      const cellOptions = getToolbarCellOptionsConfig(state, initialSelectionRect, {
+      const cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
         formatMessage
       }, getEditorContainerWidth, editorAnalyticsAPI);
       return [cellOptions, separator(cellOptions.hidden)];

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

@@ -15,7 +15,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import messages from '../../ui/messages';
 import { CONTENT_COMPONENT } from '@atlaskit/editor-common/analytics';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { tableFloatingCellButtonStyles } from './styles';
+import { tableFloatingCellButtonStyles, tableFloatingCellButtonSelectedStyles } from './styles';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 export class FloatingContextualButtonInner extends React.Component {
   constructor(...args) {
@@ -84,7 +84,11 @@ export class FloatingContextualButtonInner extends React.Component {
     const tableWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
     const labelCellOptions = formatMessage(messages.cellOptions);
     const button = jsx("div", {
-      css: tableFloatingCellButtonStyles
+      css: theme => [tableFloatingCellButtonStyles({
+        theme
+      }), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles({
+        theme
+      })]
     }, jsx(ToolbarButton, {
       className: ClassName.CONTEXTUAL_MENU_BUTTON,
       selected: isContextualMenuOpen,

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

@@ -1,28 +1,67 @@
 import { css } from '@emotion/react';
-import { N0, N20 } from '@atlaskit/theme/colors';
+import { B75, DN0, DN60, N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { contextualMenuTriggerSize } from '../consts';
-import { token } from '@atlaskit/tokens'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4462
-
-export const tableFloatingCellButtonStyles = css`
+import { token } from '@atlaskit/tokens';
+import { themed } from '@atlaskit/theme/components';
+export const tableFloatingCellButtonStyles = props => css`
   > div {
-    background: ${token('color.background.neutral', N20)};
+    // Sits behind button to provide surface-color background
+    background: ${token('elevation.surface', N20)};
     border-radius: ${borderRadius()}px;
-    border: 2px solid ${token('color.border.inverse', N0)};
     display: flex;
-    height: ${contextualMenuTriggerSize - 2}px;
+    height: ${contextualMenuTriggerSize + 2}px;
     flex-direction: column;
   }
   && button {
+    background: ${themed({
+  light: token('color.background.neutral', 'none'),
+  dark: token('color.background.neutral', 'none')
+})(props)};
     flex-direction: column;
+    margin: 2px;
+    outline: 2px solid ${token('color.border', N0)};
+    border-radius: 1px;
     padding: 0;
-    height: 100%;
+    height: calc(100% - 4px);
     display: flex;
   }
+  && button:hover {
+    background: ${themed({
+  light: token('color.background.neutral.hovered', N30A),
+  dark: token('color.background.neutral.hovered', DN60)
+})(props)};
+  }
+  && button:active {
+    background: ${themed({
+  light: token('color.background.neutral.pressed', 'rgba(179, 212, 255, 0.6)'),
+  dark: token('color.background.neutral.pressed', B75)
+})(props)};
+  }
   && button > span {
     margin: 0px -4px;
   }
   && span {
     pointer-events: none;
   }
+`;
+export const tableFloatingCellButtonSelectedStyles = props => css`
+  && button {
+    background: ${themed({
+  light: token('color.background.selected', N700),
+  dark: token('color.background.selected', DN0)
+})(props)};
+  }
+  && button:hover {
+    background: ${themed({
+  light: token('color.background.selected.hovered', N700),
+  dark: token('color.background.selected.hovered', DN0)
+})(props)};
+  }
+  && button:active {
+    background: ${themed({
+  light: token('color.background.selected.pressed', N700),
+  dark: token('color.background.selected.pressed', DN0)
+})(props)};
+  }
 `;

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -457,7 +457,10 @@ export class ContextualMenu extends Component {
       "data-testid": "table-cell-contextual-menu",
       onMouseLeave: this.closeSubmenu
     }, jsx(DropdownMenu, {
-      mountTo: mountPoint,
+      mountTo: mountPoint //This needs be removed when the a11y is completely handled
+      //Disabling key navigation now as it works only partially
+      ,
+      disableArrowKeyNavigation: true,
       items: items,
       isOpen: isOpen,
       onOpenChange: this.handleOpenChange,

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

@@ -360,7 +360,7 @@ export const tableStyles = props => {
     }
     .active .${ClassName.CONTROLS_CORNER_BUTTON} {
       border-color: ${tableBorderSelectedColor};
-      background: ${tableToolbarSelectedColor};
+      background: ${token('color.background.selected', tableToolbarSelectedColor)};
     }
 
     .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
@@ -374,14 +374,14 @@ export const tableStyles = props => {
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
       border-color: ${tableBorderSelectedColor};
-      background: ${tableToolbarSelectedColor};
+      background: ${token('color.background.selected', tableToolbarSelectedColor)};
       cursor: pointer;
     }
 
     :not(.${ClassName.IS_RESIZING})
       .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
       border-color: ${tableBorderDeleteColor};
-      background: ${tableToolbarDeleteColor};
+      background: ${token('color.background.danger', tableToolbarDeleteColor)};
     }
 
     /* Row controls */
@@ -482,10 +482,10 @@ export const tableStyles = props => {
         .${ClassName.NUMBERED_COLUMN_BUTTON}.active {
           border-bottom: 1px solid ${tableBorderSelectedColor};
           border-color: ${tableBorderSelectedColor};
-          background-color: ${tableToolbarSelectedColor};
+          background-color: ${token('color.background.selected', tableToolbarSelectedColor)};
           position: relative;
           z-index: ${akEditorUnitZIndex};
-          color: ${token('color.text.inverse', N0)};
+          color: ${token('color.text.selected', N0)};
         }
       }
     }
@@ -496,16 +496,16 @@ export const tableStyles = props => {
       .${ClassName.NUMBERED_COLUMN_BUTTON}:hover {
         border-bottom: 1px solid ${tableBorderSelectedColor};
         border-color: ${tableBorderSelectedColor};
-        background-color: ${tableToolbarSelectedColor};
+        background-color: ${token('color.background.selected', tableToolbarSelectedColor)};
         position: relative;
         z-index: ${akEditorUnitZIndex};
-        color: ${token('color.text.inverse', N0)};
+        color: ${token('color.text.selected', N0)};
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-        background-color: ${tableToolbarDeleteColor};
+        background-color: ${token('color.background.danger', tableToolbarDeleteColor)};
         border: 1px solid ${tableBorderDeleteColor};
         border-left: 0;
-        color: ${token('color.text.inverse', R500)};
+        color: ${token('color.text.danger', R500)};
         position: relative;
         z-index: ${akEditorUnitZIndex};
       }