@atlaskit/editor-plugin-table 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-table
 
+## 0.2.3
+
+### Patch Changes
+
+- [`c472a1eed2f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c472a1eed2f) - DSP-3443 Updates tokens used for floating buttons; updated appearances only visible in applications configured to use the new Tokens API (currently in alpha).
+- [`47f1f76cb80`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f1f76cb80) - Fix table delete button hover bug
+- [`8a11811caca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a11811caca) - ED-15298 clean up table cell optimisation
+- [`2c992c530da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2c992c530da) - DSP-5929 - Adds design tokens to table column and row button background color. Updated appearances only visible in applications configured to use the new Tokens API (currently in alpha).
+- [`dc699dd58ce`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc699dd58ce) - DSP-4461 - Updates the selected, hover and danger state colors for table row and column buttons to subtler color versions. Updated appearances only visible in applications configured to use the new Tokens API (currently in alpha).
+- [`0a781873466`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0a781873466) - ED-15702: Add check on distribute columns option when table resizing
+- [`7bf4281949a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7bf4281949a) - ED-15704 - Fix missing hover inducators on Delete column and Delete row under table floating toolbar context menu
+- [`de571f84591`](https://bitbucket.org/atlassian/atlassian-frontend/commits/de571f84591) - [ux] ED-15705: added tooltip for sorting back in when table contains merged cell
+- [`28e25520771`](https://bitbucket.org/atlassian/atlassian-frontend/commits/28e25520771) - [ED-16264] changes made to fix a regression caused in ED-15483 and ED-15497 , The arrow key navigation in 'Edit Link' 'Alt Text' popup and 'cell options' popup of table is hijacked incorrectly. post this fix the arrow key navigation behaviour should be deafult in these two popups
+- [`359c6e79403`](https://bitbucket.org/atlassian/atlassian-frontend/commits/359c6e79403) - [ux] Fixed regression where last column of a table was unable to be resized to recover from an overflow state.
+- [`47dfcc04652`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47dfcc04652) - ED-15703 - Minor change on floating toolbar to allow z-index value to be passed as parameter
+- [`92547defc70`](https://bitbucket.org/atlassian/atlassian-frontend/commits/92547defc70) - [ux] ED-15795 Fixed an issue where table cells would retain table header design after a split operation. This occurs when tableCellOptimization and stickyHeaders are enabled on for tables
+- [`66783618ce5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/66783618ce5) - DSP-7200 - Adds design tokens to background color for non-custom color cell. Updated appearances only visible in applications configured to use the new Tokens API (currently in alpha).
+- [`95c94af3911`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95c94af3911) - [ux] Fix table danger styles persisting when table in not in selection
+- Updated dependencies
+
 ## 0.2.2
 
 ### Patch Changes

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

@@ -147,7 +147,8 @@ var clearHoverSelection = function clearHoverSelection() {
     return {
       type: 'CLEAR_HOVER_SELECTION',
       data: {
-        decorationSet: (0, _utils2.updatePluginStateDecorations)(state, [], _types.TableDecorations.ALL_CONTROLS_HOVER)
+        decorationSet: (0, _utils2.updatePluginStateDecorations)(state, [], _types.TableDecorations.ALL_CONTROLS_HOVER),
+        isInDanger: false
       }
     };
   });

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

@@ -251,7 +251,7 @@ var handleMouseLeave = function handleMouseLeave(view, event) {
 exports.handleMouseLeave = handleMouseLeave;
 
 var handleMouseMove = function handleMouseMove(getEditorFeatureFlags) {
-  return function (view, event, tableCellOptimization, elementContentRects) {
+  return function (view, event, elementContentRects) {
     if (!(event.target instanceof HTMLElement)) {
       return false;
     }
@@ -270,7 +270,7 @@ var handleMouseMove = function handleMouseMove(getEditorFeatureFlags) {
           startIndex = _getColumnOrRowIndex10[0],
           endIndex = _getColumnOrRowIndex10[1];
 
-      var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, tableCellOptimization, elementContentRects) === 'right' ? endIndex : startIndex;
+      var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, false, elementContentRects) === 'right' ? endIndex : startIndex;
 
       if (positionColumn !== insertColumnButtonIndex) {
         return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
@@ -297,14 +297,10 @@ var handleMouseMove = function handleMouseMove(getEditorFeatureFlags) {
     }
 
     var _getEditorFeatureFlag = getEditorFeatureFlags(),
-        mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization; // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
-    // because it relies on tableCell node view that is added  via tableCellOptimization
-
-
-    var useMouseMoveOptimisation = tableCellOptimization && mouseMoveOptimization;
+        mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization;
 
     if (!(0, _utils3.isResizeHandleDecoration)(element) && (0, _utils3.isCell)(element)) {
-      var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, useMouseMoveOptimisation, elementContentRects, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
+      var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, mouseMoveOptimization, elementContentRects, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
 
       if (positionColumn !== null) {
         var _state4 = view.state,
@@ -421,19 +417,16 @@ exports.handleCut = handleCut;
 
 var whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
-    var _tablePluginState$plu;
-
     var tableResizePluginState = (0, _pluginFactory2.getPluginState)(view.state);
     var tablePluginState = (0, _pluginFactory.getPluginState)(view.state);
     var isDragging = tableResizePluginState && !!tableResizePluginState.dragging;
     var hasTableNode = tablePluginState && tablePluginState.tableNode;
-    var 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/cjs/plugins/table/index.js

@@ -386,7 +386,9 @@ var tablesPlugin = function tablesPlugin(options) {
           }
         }];
       },
-      floatingToolbar: (0, _toolbar.getToolbarConfig)(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: (0, _toolbar.getToolbarConfig)(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, function () {
+        return editorViewRef.current;
+      })((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

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

@@ -423,10 +423,20 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this$props8 = this.props,
+          view = _this$props8.view,
           getNode = _this$props8.getNode,
           isMediaFullscreen = _this$props8.isMediaFullscreen,
           allowColumnResizing = _this$props8.allowColumnResizing;
 
+      var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
+          isInDanger = _getPluginState.isInDanger;
+
+      var table = (0, _utils.findTable)(view.state.selection);
+
+      if (isInDanger && !table) {
+        (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
+      }
+
       var _this$props$getEditor3 = this.props.getEditorFeatureFlags(),
           tableOverflowShadowsOptimization = _this$props$getEditor3.tableOverflowShadowsOptimization;
 
@@ -459,9 +469,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var previousTable = this.node;
 
         if ((0, _utils4.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils4.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
-          var view = this.props.view;
+          var _view = this.props.view;
           (0, _utils3.insertColgroupFromNode)(this.table, currentTable);
-          (0, _dom.updateControls)(this.props.getEditorFeatureFlags)(view.state);
+          (0, _dom.updateControls)(this.props.getEditorFeatureFlags)(_view.state);
         }
 
         this.handleTableResizingDebounced();
@@ -504,9 +514,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           showAfterShadow = _this$state.showAfterShadow;
       var node = getNode(); // doesn't work well with WithPluginState
 
-      var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
-          isInDanger = _getPluginState.isInDanger,
-          hoveredRows = _getPluginState.hoveredRows;
+      var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
+          isInDanger = _getPluginState2.isInDanger,
+          hoveredRows = _getPluginState2.hoveredRows;
 
       var _this$props$getEditor4 = this.props.getEditorFeatureFlags(),
           stickyHeadersOptimization = _this$props$getEditor4.stickyHeadersOptimization,

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultTableSelection = void 0;
 var defaultTableSelection = {
   hoveredColumns: [],
-  hoveredRows: [],
-  isInDanger: false
+  hoveredRows: []
 };
 exports.defaultTableSelection = defaultTableSelection;

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

@@ -81,14 +81,14 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
       elementContentRects[entry.target.id] = entry.contentRect;
     });
   }) : undefined;
-  var tableCellNodeview = pluginConfig.tableCellOptimization ? {
+  var tableCellNodeview = {
     tableCell: function tableCell(node, view, getPos) {
       return new _tableCell.default(node, view, getPos, getEditorFeatureFlags, observer);
     },
     tableHeader: function tableHeader(node, view, getPos) {
       return new _tableCell.default(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
 
   var invalidTableIds = [];
   var editorViewRef = null;

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

@@ -35,19 +35,49 @@ var _throttle = _interopRequireDefault(require("lodash/throttle"));
 
 // limit scroll event calls
 var 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.
 
 var HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 
-var supportedHeaderRow = function supportedHeaderRow(node) {
-  var allHeaders = (0, _utils.mapChildren)(node, function (child) {
-    return child.type.name === 'tableHeader';
-  }).every(Boolean);
-  var someMerged = (0, _utils.mapChildren)(node, function (child) {
+var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
+  return (0, _utils.mapChildren)(node, function (child) {
     return child.attrs.rowspan || 0;
   }).some(function (rowspan) {
     return 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
+ */
+
+
+var rowHasDifferentMergedCells = function rowHasDifferentMergedCells(prevNode, incomingNode) {
+  var incomingNodeChildrenRowSpan = (0, _utils.mapChildren)(prevNode, function (child) {
+    return child.attrs.rowspan || 0;
+  });
+  var currentNodeChildrenRowSpan = (0, _utils.mapChildren)(incomingNode, function (child) {
+    return child.attrs.rowspan || 0;
+  });
+  return incomingNodeChildrenRowSpan.length !== currentNodeChildrenRowSpan.length || currentNodeChildrenRowSpan.some(function (child, index) {
+    return 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
+ */
+
+
+var supportedHeaderRow = function supportedHeaderRow(node) {
+  var allHeaders = (0, _utils.mapChildren)(node, function (child) {
+    return child.type.name === 'tableHeader';
+  }).every(Boolean);
+  var someMerged = anyChildCellMergedAcrossRow(node);
   return allHeaders && !someMerged;
 };
 
@@ -523,10 +553,14 @@ var TableRowNodeView = /*#__PURE__*/function () {
       // changing away from one
 
 
-      var newNodeisHeaderRow = supportedHeaderRow(node);
+      var 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/cjs/plugins/table/pm-plugins/table-resizing/utils/resize-logic.js

@@ -48,7 +48,7 @@ exports.growColumn = growColumn;
 
 var shrinkColumn = function 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/cjs/plugins/table/toolbar.js

@@ -55,6 +55,8 @@ var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
 /** @jsx jsx */
 var messages = (0, _reactIntlNext.defineMessages)({
   tableOptions: {
@@ -129,7 +131,7 @@ var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, ed
 
 exports.getToolbarMenuConfig = getToolbarMenuConfig;
 
-var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, initialSelectionRect, _ref2, getEditorContainerWidth, editorAnalyticsAPI) {
+var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, editorView, initialSelectionRect, _ref2, getEditorContainerWidth, editorAnalyticsAPI) {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
 
   var formatMessage = _ref2.formatMessage;
@@ -193,6 +195,17 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
 
       return true;
     },
+    onMouseOver: function onMouseOver(state, dispatch) {
+      var selectionRect = getClosestSelectionRect(state);
+
+      if (selectionRect) {
+        (0, _commands.hoverColumns)((0, _utils.getSelectedColumnIndexes)(selectionRect), true)(state, dispatch);
+        return true;
+      }
+
+      return false;
+    },
+    onMouseLeave: (0, _commands.clearHoverSelection)(),
     selected: false,
     disabled: false
   }, {
@@ -209,6 +222,17 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
 
       return true;
     },
+    onMouseOver: function onMouseOver(state, dispatch) {
+      var selectionRect = getClosestSelectionRect(state);
+
+      if (selectionRect) {
+        (0, _commands.hoverRows)((0, _utils.getSelectedRowIndexes)(selectionRect), true)(state, dispatch);
+        return true;
+      }
+
+      return false;
+    },
+    onMouseLeave: (0, _commands.clearHoverSelection)(),
     selected: false,
     disabled: false
   }, {
@@ -226,9 +250,12 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
   }];
 
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
-    var distributeColumnWidths = function distributeColumnWidths(state, dispatch, view) {
-      var newResizeStateWithAnalytics = view ? (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, editorState, view.domAtPos.bind(view), getEditorContainerWidth) : undefined;
+    var _newResizeStateWithAn;
+
+    var newResizeStateWithAnalytics = editorView ? (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth) : undefined;
+    var wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
 
+    var distributeColumnWidths = function distributeColumnWidths(state, dispatch) {
       if (newResizeStateWithAnalytics) {
         (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
         return true;
@@ -242,12 +269,13 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
       title: formatMessage(_ContextualMenu.messages.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) {
     var hasMergedCellsInTable = (0, _utils.getMergedCellsPositions)(editorState.tr).length > 0;
+    var warning = hasMergedCellsInTable ? formatMessage(_ContextualMenu.messages.canNotSortTable) : undefined;
     options.push({
       id: 'editor.table.sortColumnAsc',
       title: formatMessage(_ContextualMenu.messages.sortColumnASC),
@@ -256,7 +284,8 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
         return true;
       },
       selected: false,
-      disabled: hasMergedCellsInTable
+      disabled: hasMergedCellsInTable,
+      tooltip: warning
     });
     options.push({
       id: 'editor.table.sortColumnDesc',
@@ -266,7 +295,8 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
         return true;
       },
       selected: false,
-      disabled: hasMergedCellsInTable
+      disabled: hasMergedCellsInTable,
+      tooltip: warning
     });
   }
 
@@ -306,7 +336,7 @@ var getClosestSelectionRect = function getClosestSelectionRect(state) {
   return (0, _utils2.isSelectionType)(selection, 'cell') ? (0, _utils2.getSelectionRect)(selection) : (0, _utils2.findCellRectClosestToPos)(selection.$from);
 };
 
-var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags) {
+var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
   return function (config) {
     return function (state, intl) {
       var tableObject = (0, _utils2.findTable)(state.selection);
@@ -321,7 +351,7 @@ var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editor
         var _ref3 = getEditorFeatureFlags() || {},
             tableCellOptionsInFloatingToolbar = _ref3.tableCellOptionsInFloatingToolbar;
 
-        var cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
+        var cellItems = getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
         var colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
 
         var confirmDialog;
@@ -355,6 +385,8 @@ var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editor
           getDomRef: getDomRef,
           nodeType: nodeType,
           offset: [0, 3],
+          zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex + 1,
+          // Place the context menu slightly above the others
           items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(colorPicker), [{
             type: 'extensions-placeholder',
             separator: 'end'
@@ -399,14 +431,14 @@ var separator = function separator(hidden) {
   };
 };
 
-var getCellItems = function getCellItems(pluginConfig, state, _ref4, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
+var getCellItems = function getCellItems(pluginConfig, state, view, _ref4, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
   var formatMessage = _ref4.formatMessage;
 
   if (pluginConfig.allowCellOptionsInFloatingToolbar || tableCellOptionsInFloatingToolbar) {
     var initialSelectionRect = getClosestSelectionRect(state);
 
     if (initialSelectionRect) {
-      var cellOptions = getToolbarCellOptionsConfig(state, initialSelectionRect, {
+      var cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
         formatMessage: formatMessage
       }, getEditorContainerWidth, editorAnalyticsAPI);
       return [cellOptions, separator(cellOptions.hidden)];

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

@@ -133,7 +133,13 @@ var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {
       var tableWrapper = (0, _utils.closestElement)(targetCellRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
       var labelCellOptions = formatMessage(_messages.default.cellOptions);
       var button = (0, _react2.jsx)("div", {
-        css: _styles.tableFloatingCellButtonStyles
+        css: function css(theme) {
+          return [(0, _styles.tableFloatingCellButtonStyles)({
+            theme: theme
+          }), isContextualMenuOpen && (0, _styles.tableFloatingCellButtonSelectedStyles)({
+            theme: theme
+          })];
+        }
       }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
         className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON,
         selected: isContextualMenuOpen,

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableFloatingCellButtonStyles = void 0;
+exports.tableFloatingCellButtonStyles = exports.tableFloatingCellButtonSelectedStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,8 +19,36 @@ var _consts = require("../consts");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _templateObject;
-
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4462
-var tableFloatingCellButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > div {\n    background: ", ";\n    border-radius: ", "px;\n    border: 2px solid ", ";\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    flex-direction: column;\n    padding: 0;\n    height: 100%;\n    display: flex;\n  }\n  && button > span {\n    margin: 0px -4px;\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), (0, _tokens.token)('color.background.neutral', _colors.N20), (0, _constants.borderRadius)(), (0, _tokens.token)('color.border.inverse', _colors.N0), _consts.contextualMenuTriggerSize - 2);
-exports.tableFloatingCellButtonStyles = tableFloatingCellButtonStyles;
+var _components = require("@atlaskit/theme/components");
+
+var _templateObject, _templateObject2;
+
+var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > div {\n    // Sits behind button to provide surface-color background\n    background: ", ";\n    border-radius: ", "px;\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    background: ", ";\n    flex-direction: column;\n    margin: 2px;\n    outline: 2px solid ", ";\n    border-radius: 1px;\n    padding: 0;\n    height: calc(100% - 4px);\n    display: flex;\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n  && button > span {\n    margin: 0px -4px;\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), (0, _tokens.token)('elevation.surface', _colors.N20), (0, _constants.borderRadius)(), _consts.contextualMenuTriggerSize + 2, (0, _components.themed)({
+    light: (0, _tokens.token)('color.background.neutral', 'none'),
+    dark: (0, _tokens.token)('color.background.neutral', 'none')
+  })(props), (0, _tokens.token)('color.border', _colors.N0), (0, _components.themed)({
+    light: (0, _tokens.token)('color.background.neutral.hovered', _colors.N30A),
+    dark: (0, _tokens.token)('color.background.neutral.hovered', _colors.DN60)
+  })(props), (0, _components.themed)({
+    light: (0, _tokens.token)('color.background.neutral.pressed', 'rgba(179, 212, 255, 0.6)'),
+    dark: (0, _tokens.token)('color.background.neutral.pressed', _colors.B75)
+  })(props));
+};
+
+exports.tableFloatingCellButtonStyles = tableFloatingCellButtonStyles;
+
+var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles(props) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  && button {\n    background: ", ";\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n"])), (0, _components.themed)({
+    light: (0, _tokens.token)('color.background.selected', _colors.N700),
+    dark: (0, _tokens.token)('color.background.selected', _colors.DN0)
+  })(props), (0, _components.themed)({
+    light: (0, _tokens.token)('color.background.selected.hovered', _colors.N700),
+    dark: (0, _tokens.token)('color.background.selected.hovered', _colors.DN0)
+  })(props), (0, _components.themed)({
+    light: (0, _tokens.token)('color.background.selected.pressed', _colors.N700),
+    dark: (0, _tokens.token)('color.background.selected.pressed', _colors.DN0)
+  })(props));
+};
+
+exports.tableFloatingCellButtonSelectedStyles = tableFloatingCellButtonSelectedStyles;

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

@@ -500,7 +500,10 @@ var ContextualMenu = /*#__PURE__*/function (_Component) {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
       }, (0, _react2.jsx)(_uiMenu.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/cjs/plugins/table/ui/common-styles.js

@@ -45,7 +45,7 @@ var sentinelStyles = ".".concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n
 var tableStyles = function tableStyles(props) {
   var _props$featureFlags;
 
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n\n        // ED-15246: Trello card is visible through a border of a table border\n        // This fixes a border issue caused by relative positioned table cells\n        &::after {\n          height: 100%;\n          content: '';\n          border-left: 1px solid ", ";\n          border-bottom: 1px solid ", ";\n          position: absolute;\n          right: 0px;\n          top: 0px;\n          bottom: 0;\n          width: 100%;\n          display: inline-block;\n          pointer-events: none;\n        }\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-of-type {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n      box-shadow: 0px -", "px ", ";\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: ", ";\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid\n        ", ";\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid ", ";\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: ", ";\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-of-type {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: ", "px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-of-type {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid\n        ", ";\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n      white-space: normal;\n      border-top: none;\n\n      > tbody > tr {\n        white-space: pre-wrap;\n      }\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-of-type,\n        > h2:first-of-type,\n        > h3:first-of-type,\n        > h4:first-of-type,\n        > h5:first-of-type,\n        > h6:first-of-type {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      // ED-15246: Trello card is visible through a border of a table border\n      td.", ", td.", " {\n        &::after {\n          height: 100%;\n          width: 100%;\n          border: 1px solid ", ";\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          bottom: 0;\n          z-index: ", ";\n          display: inline-block;\n          pointer-events: none;\n        }\n        &.", "::after {\n          border: 1px solid ", ";\n          z-index: ", ";\n        }\n      }\n    }\n    .", " {\n      position: absolute;\n      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n      top: ", "px;\n    }\n    .", ".", " {\n      z-index: ", ";\n    }\n    .", " {\n      left: -", "px;\n    }\n    .", " {\n      padding-right: ", "px;\n      margin-right: -", "px;\n      padding-bottom: ", "px;\n      margin-bottom: -", "px;\n      /* fixes gap cursor height */\n      overflow: auto;\n      position: relative;\n    }\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n    padding-left: revert;\n  }\n"])), _types.TableCssClassName.LAYOUT_BUTTON, (0, _tokens.token)('color.background.neutral', _colors.N20A), (0, _tokens.token)('color.icon', _colors.N300), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, (0, _tokens.token)('color.background.neutral.hovered', _colors.B300), (0, _tokens.token)('color.icon', 'white'), (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, (0, _tokens.token)('elevation.surface', 'white'), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, (0, _tokens.token)('elevation.surface', 'white'), _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, (0, _tokens.token)('elevation.surface', 'white'), _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, (0, _tokens.token)('elevation.surface', 'green'), _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, (0, _tokens.token)('elevation.surface', 'white'), (0, _tokens.token)('elevation.shadow.overflow', "0 6px 4px -4px ".concat(_colors.N40A)), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, (0, _tokens.token)('elevation.surface', 'white'), (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          left: -11px;\n          top: 9px;\n        "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableToolbarColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _consts.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n        bottom: -1px;\n        left: -11px;\n      "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n        border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts.tableToolbarSize, "px;\n\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableToolbarColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, (0, _tokens.token)('color.text.inverse', _colors.N0), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, (0, _tokens.token)('color.text.inverse', _colors.N0), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, (0, _tokens.token)('color.text.inverse', _colors.R500), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, _consts.tableScrollbarOffset, _consts.tableScrollbarOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n\n        // ED-15246: Trello card is visible through a border of a table border\n        // This fixes a border issue caused by relative positioned table cells\n        &::after {\n          height: 100%;\n          content: '';\n          border-left: 1px solid ", ";\n          border-bottom: 1px solid ", ";\n          position: absolute;\n          right: 0px;\n          top: 0px;\n          bottom: 0;\n          width: 100%;\n          display: inline-block;\n          pointer-events: none;\n        }\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-of-type {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n      box-shadow: 0px -", "px ", ";\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: ", ";\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid\n        ", ";\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid ", ";\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: ", ";\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-of-type {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: ", "px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-of-type {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid\n        ", ";\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n      white-space: normal;\n      border-top: none;\n\n      > tbody > tr {\n        white-space: pre-wrap;\n      }\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-of-type,\n        > h2:first-of-type,\n        > h3:first-of-type,\n        > h4:first-of-type,\n        > h5:first-of-type,\n        > h6:first-of-type {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      // ED-15246: Trello card is visible through a border of a table border\n      td.", ", td.", " {\n        &::after {\n          height: 100%;\n          width: 100%;\n          border: 1px solid ", ";\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          bottom: 0;\n          z-index: ", ";\n          display: inline-block;\n          pointer-events: none;\n        }\n        &.", "::after {\n          border: 1px solid ", ";\n          z-index: ", ";\n        }\n      }\n    }\n    .", " {\n      position: absolute;\n      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n      top: ", "px;\n    }\n    .", ".", " {\n      z-index: ", ";\n    }\n    .", " {\n      left: -", "px;\n    }\n    .", " {\n      padding-right: ", "px;\n      margin-right: -", "px;\n      padding-bottom: ", "px;\n      margin-bottom: -", "px;\n      /* fixes gap cursor height */\n      overflow: auto;\n      position: relative;\n    }\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n    padding-left: revert;\n  }\n"])), _types.TableCssClassName.LAYOUT_BUTTON, (0, _tokens.token)('color.background.neutral', _colors.N20A), (0, _tokens.token)('color.icon', _colors.N300), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, (0, _tokens.token)('color.background.neutral.hovered', _colors.B300), (0, _tokens.token)('color.icon', 'white'), (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, (0, _tokens.token)('elevation.surface', 'white'), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, (0, _tokens.token)('elevation.surface', 'white'), _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, (0, _tokens.token)('elevation.surface', 'white'), _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, (0, _tokens.token)('elevation.surface', 'green'), _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, (0, _tokens.token)('elevation.surface', 'white'), (0, _tokens.token)('elevation.shadow.overflow', "0 6px 4px -4px ".concat(_colors.N40A)), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, (0, _tokens.token)('elevation.surface', 'white'), (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          left: -11px;\n          top: 9px;\n        "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableToolbarColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, (0, _tokens.token)('color.background.danger', _consts.tableToolbarDeleteColor), _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n        bottom: -1px;\n        left: -11px;\n      "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n        border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts.tableToolbarSize, "px;\n\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableToolbarColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _editorSharedStyles.akEditorUnitZIndex, (0, _tokens.token)('color.text.selected', _colors.N0), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _editorSharedStyles.akEditorUnitZIndex, (0, _tokens.token)('color.text.selected', _colors.N0), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _tokens.token)('color.background.danger', _consts.tableToolbarDeleteColor), _consts.tableBorderDeleteColor, (0, _tokens.token)('color.text.danger', _colors.R500), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, _consts.tableScrollbarOffset, _consts.tableScrollbarOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR);
 };
 
 exports.tableStyles = tableStyles;