@atlaskit/editor-plugin-table 7.6.2 → 7.6.4

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

@@ -85,11 +85,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         var background = (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
         return {
-          content: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? formatMessage(_messages.tableMessages.backgroundColor) : formatMessage(_messages.tableMessages.cellBackground),
+          content: isDragAndDropEnabled ? formatMessage(_messages.tableMessages.backgroundColor) : formatMessage(_messages.tableMessages.cellBackground),
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
             css: _styles2.elementBeforeIconStyles
           }, (0, _react2.jsx)(_backgroundColor.default, {
             label: formatMessage(_messages.tableMessages.backgroundColor),
@@ -99,7 +99,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             className: _styles.DropdownMenuSharedCssClassName.SUBMENU
           }, (0, _react2.jsx)("div", {
             css: (0, _styles2.cellColourPreviewStyles)(background),
-            className: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
+            className: isDragAndDropEnabled ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && (0, _react2.jsx)("div", {
             className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
@@ -131,7 +131,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             name: 'merge'
           },
           isDisabled: !(0, _transforms.canMergeCells)(state.tr),
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
             css: _styles2.elementBeforeIconStyles
           }, (0, _react2.jsx)(_icons.MergeCellsIcon, null)) : undefined
         }, {
@@ -140,7 +140,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             name: 'split'
           },
           isDisabled: !(0, _utils2.splitCell)(state),
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
             css: _styles2.elementBeforeIconStyles
           }, (0, _react2.jsx)(_icons.SplitCellIcon, null)) : undefined
         }];
@@ -154,14 +154,14 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState3 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
       return {
-        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addColumnRight : _messages.tableMessages.insertColumn),
+        content: formatMessage(isDragAndDropEnabled ? _messages.tableMessages.addColumnRight : _messages.tableMessages.insertColumn),
         value: {
           name: 'insert_column'
         },
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_icons.AddColRightIcon, null)) : undefined
       };
@@ -173,14 +173,14 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState4 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
       return {
-        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addRowBelow : _messages.tableMessages.insertRow),
+        content: formatMessage(isDragAndDropEnabled ? _messages.tableMessages.addRowBelow : _messages.tableMessages.insertRow),
         value: {
           name: 'insert_row'
         },
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addRowAfter)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_icons.AddRowBelowIcon, null)) : undefined
       };
@@ -208,7 +208,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.backspace)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_crossCircle.default, {
           label: formatMessage(_messages.tableMessages.clearCells, {
@@ -234,7 +234,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_remove.default, {
           label: formatMessage(_messages.tableMessages.removeColumns, {
@@ -260,7 +260,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_remove.default, {
           label: formatMessage(_messages.tableMessages.removeRows, {
@@ -278,7 +278,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState8 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState8.isDragAndDropEnabled,
         allowDistributeColumns = _getPluginState8.pluginConfig.allowDistributeColumns;
-      if (allowDistributeColumns && (!isDragAndDropEnabled || !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowDistributeColumns && !isDragAndDropEnabled) {
         var _newResizeState$chang;
         var _getPluginState9 = (0, _pluginFactory.getPluginState)(editorView.state),
           _getPluginState9$isTa = _getPluginState9.isTableScalingEnabled,
@@ -302,7 +302,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         allowColumnSorting = _this$props9.allowColumnSorting;
       var _getPluginState10 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState10.isDragAndDropEnabled;
-      if (allowColumnSorting && (!isDragAndDropEnabled || !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowColumnSorting && !isDragAndDropEnabled) {
         var hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(editorView.state.tr).length > 0;
         var warning = hasMergedCellsInTable ? {
           tooltipDescription: formatMessage(_messages.tableMessages.canNotSortTable),
@@ -520,7 +520,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         editorView = _this$props14.editorView;
       var _getPluginState14 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState14.isDragAndDropEnabled;
-      var items = isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+      var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
       return (0, _react2.jsx)("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
@@ -543,7 +543,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth,
         boundariesElement: boundariesElement,
         offset: offset,
-        section: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.menu.group-items') ? {
+        section: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.menu.group-items') ? {
           hasSeparator: true
         } : undefined
       }));

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -448,20 +448,20 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
   if (!menuItems) {
     return null;
   }
-  if (allowBackgroundColor && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling')) {
+  if (allowBackgroundColor) {
     menuItems[0].items.unshift(createBackgroundColorMenuItem());
   }
 
   // If first row, add toggle for Header row, default is true
   // If first column, add toggle for Header column, default is false
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') && index === 0) {
+  if (index === 0) {
     menuItems.push({
       items: [createHeaderRowColumnMenuItem(direction)]
     });
   }
 
   // All rows, add toggle for numbered rows, default is false
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') && direction === 'row') {
+  if (direction === 'row') {
     index === 0 ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem()) : menuItems.push({
       items: [createRowNumbersMenuItem()]
     });

package/dist/cjs/ui/FloatingDragMenu/DropdownMenu.js

@@ -13,7 +13,6 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _menu = require("@atlaskit/menu");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../consts");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -129,39 +128,33 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
       // The logic below normalises the index value based on the number
       // of menu items with 2 focusable elements, and adjusts the index to ensure
       // the correct menu item is sent in onItemActivated callback
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling')) {
-        var keys = ['row_numbers', 'header_row', 'header_column'];
-        var doubleItemCount = 0;
-        var firstIndex = results.findIndex(function (value) {
-          return keys.includes(value.key);
+      var keys = ['row_numbers', 'header_row', 'header_column'];
+      var doubleItemCount = 0;
+      var firstIndex = results.findIndex(function (value) {
+        return keys.includes(value.key);
+      });
+      if (firstIndex === -1 || index <= firstIndex) {
+        onItemActivated && onItemActivated({
+          item: results[index]
         });
-        if (firstIndex === -1 || index <= firstIndex) {
+        return;
+      }
+      for (var i = firstIndex; i < results.length; i += 1) {
+        if (keys.includes(results[i].key)) {
+          doubleItemCount += 1;
+        }
+        if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
           onItemActivated && onItemActivated({
-            item: results[index]
+            item: results[i]
           });
           return;
         }
-        for (var i = firstIndex; i < results.length; i += 1) {
-          if (keys.includes(results[i].key)) {
-            doubleItemCount += 1;
-          }
-          if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
-            onItemActivated && onItemActivated({
-              item: results[i]
-            });
-            return;
-          }
-          if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
-            onItemActivated && onItemActivated({
-              item: results[i]
-            });
-            return;
-          }
+        if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+          onItemActivated && onItemActivated({
+            item: results[i]
+          });
+          return;
         }
-      } else {
-        onItemActivated && onItemActivated({
-          item: results[index]
-        });
       }
     }
   }, innerMenu())));

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ColumnControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorTables = require("@atlaskit/editor-tables");
@@ -45,8 +46,11 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     tableContainerWidth = _ref.tableContainerWidth,
     isNumberColumnEnabled = _ref.isNumberColumnEnabled,
     isDragging = _ref.isDragging,
-    getScrollOffset = _ref.getScrollOffset;
+    getScrollOffset = _ref.getScrollOffset,
+    api = _ref.api;
   var columnControlsRef = (0, _react.useRef)(null);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return (
       // when there is sticky header, a `margin-right: -1px` applied to `tr.sticky th` so it causes colWidths to be 1px wider
@@ -57,7 +61,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
   var columnParams = (0, _utils2.getRowsParams)(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
-  var selectedColIndexes = getSelectedColumns(editorView.state.selection);
+  var selectedColIndexes = getSelectedColumns((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) || editorView.state.selection);
   var firstRow = tableRef.querySelector('tr');
   var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   var marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;

package/dist/cjs/ui/TableFloatingColumnControls/index.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TableFloatingColumnControls = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _types = require("../../types");
 var _utils = require("../../utils");
@@ -30,7 +31,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     tableContainerWidth = _ref.tableContainerWidth,
     isNumberColumnEnabled = _ref.isNumberColumnEnabled,
     getScrollOffset = _ref.getScrollOffset,
-    tableWrapperHeight = _ref.tableWrapperHeight;
+    tableWrapperHeight = _ref.tableWrapperHeight,
+    api = _ref.api;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDragging = _useState2[0],
@@ -97,7 +99,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     tableContainerWidth: tableContainerWidth,
     isNumberColumnEnabled: isNumberColumnEnabled,
     isDragging: isDragging,
-    getScrollOffset: getScrollOffset
+    getScrollOffset: getScrollOffset,
+    api: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook') ? api : undefined
   }), isDragging && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,

package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -5,10 +5,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DragCornerControls = void 0;
+exports.DragCornerControlsWithSelection = exports.DragCornerControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _commands = require("../../../commands");
@@ -55,4 +56,50 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     className: _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER
   }));
 };
+var DragCornerControlsComponentWithSelection = function DragCornerControlsComponentWithSelection(_ref2) {
+  var editorView = _ref2.editorView,
+    isInDanger = _ref2.isInDanger,
+    isResizing = _ref2.isResizing,
+    formatMessage = _ref2.intl.formatMessage,
+    api = _ref2.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  var handleOnClick = function handleOnClick() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    dispatch((0, _utils.selectTable)(state.tr).setMeta('addToHistory', false));
+  };
+  var handleMouseOut = function handleMouseOut() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    (0, _commands.clearHoverSelection)()(state, dispatch);
+  };
+  var isActive = (0, _react.useMemo)(function () {
+    if (!(selectionState !== null && selectionState !== void 0 && selectionState.selection)) {
+      return;
+    }
+    var table = (0, _utils.findTable)(selectionState.selection);
+    if (!table) {
+      return false;
+    }
+    return (0, _utils.isTableSelected)(selectionState.selection);
+  }, [selectionState]);
+  if (isResizing) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("button", {
+    className: (0, _classnames.default)(_types.TableCssClassName.DRAG_CORNER_BUTTON, {
+      active: isActive,
+      danger: isActive && isInDanger
+    }),
+    "aria-label": formatMessage(_messages.tableMessages.cornerControl),
+    type: "button",
+    onClick: handleOnClick,
+    onMouseOut: handleMouseOut,
+    contentEditable: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER
+  }));
+};
+var DragCornerControlsWithSelection = exports.DragCornerControlsWithSelection = (0, _reactIntlNext.injectIntl)(DragCornerControlsComponentWithSelection);
 var DragCornerControls = exports.DragCornerControls = (0, _reactIntlNext.injectIntl)(DragCornerControlsComponent);

package/dist/cjs/ui/TableFloatingControls/CornerControls/index.js

@@ -15,5 +15,11 @@ Object.defineProperty(exports, "DragCornerControls", {
     return _DragCornerControls.DragCornerControls;
   }
 });
+Object.defineProperty(exports, "DragCornerControlsWithSelection", {
+  enumerable: true,
+  get: function get() {
+    return _DragCornerControls.DragCornerControlsWithSelection;
+  }
+});
 var _ClassicCornerControls = require("./ClassicCornerControls");
 var _DragCornerControls = require("./DragCornerControls");

package/dist/cjs/ui/TableFloatingControls/FloatingControlsWithSelection.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingControlsWithSelection = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _CornerControls = require("./CornerControls");
+var _RowControls = require("./RowControls");
+var FloatingControlsWithSelection = exports.FloatingControlsWithSelection = function FloatingControlsWithSelection(_ref) {
+  var editorView = _ref.editorView,
+    tableRef = _ref.tableRef,
+    isInDanger = _ref.isInDanger,
+    isResizing = _ref.isResizing,
+    isHeaderRowEnabled = _ref.isHeaderRowEnabled,
+    isHeaderColumnEnabled = _ref.isHeaderColumnEnabled,
+    hoveredRows = _ref.hoveredRows,
+    stickyTop = _ref.stickyTop,
+    hoverRows = _ref.hoverRows,
+    selectRow = _ref.selectRow,
+    tableActive = _ref.tableActive,
+    api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    hoveredRows: hoveredRows,
+    stickyTop: tableActive ? stickyTop : undefined
+  }), /*#__PURE__*/_react.default.createElement(_RowControls.RowControls, {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
+    editorView: editorView,
+    tableRef: tableRef,
+    hoverRows: hoverRows,
+    hoveredRows: hoveredRows,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    selectRow: selectRow,
+    stickyTop: tableActive ? stickyTop : undefined
+  }));
+};

package/dist/cjs/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -52,7 +52,8 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
         hoveredRows = _this$props.hoveredRows,
         isInDanger = _this$props.isInDanger,
         isResizing = _this$props.isResizing,
-        formatMessage = _this$props.intl.formatMessage;
+        formatMessage = _this$props.intl.formatMessage,
+        selectionState = _this$props.selection;
       if (!tableRef) {
         return null;
       }
@@ -76,7 +77,7 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
         }
         var thisRowSticky = _this2.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
         return /*#__PURE__*/_react.default.createElement("div", {
-          className: "".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat((0, _utils.getRowClassNames)(startIndex, selection, hoveredRows, isInDanger, isResizing), " ").concat(thisRowSticky ? 'sticky' : ''),
+          className: "".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat((0, _utils.getRowClassNames)(startIndex, selectionState || selection, hoveredRows, isInDanger, isResizing), " ").concat(thisRowSticky ? 'sticky' : ''),
           key: startIndex,
           style: {
             height: height,

package/dist/cjs/ui/TableFloatingControls/index.js

@@ -8,9 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TableFloatingControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../commands");
 var _types = require("../../types");
 var _CornerControls = require("./CornerControls");
+var _FloatingControlsWithSelection = require("./FloatingControlsWithSelection");
 var _NumberColumn = _interopRequireDefault(require("./NumberColumn"));
 var _RowControls = require("./RowControls");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -31,7 +33,8 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
     isDragAndDropEnabled = _ref.isDragAndDropEnabled,
     hoveredCell = _ref.hoveredCell,
     isTableHovered = _ref.isTableHovered,
-    tableWrapperWidth = _ref.tableWrapperWidth;
+    tableWrapperWidth = _ref.tableWrapperWidth,
+    api = _ref.api;
   var _selectRow = (0, _react.useCallback)(function (row, expand) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
@@ -92,7 +95,13 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
     updateCellHoverLocation: updateCellHoverLocation,
     stickyTop: stickyTop,
     isDragAndDropEnabled: isDragAndDropEnabled
-  }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.DragCornerControls, {
+  }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/_react.default.createElement(_CornerControls.DragCornerControlsWithSelection, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    api: api
+  }) : /*#__PURE__*/_react.default.createElement(_CornerControls.DragCornerControls, {
     editorView: editorView,
     tableRef: tableRef,
     isInDanger: isInDanger,
@@ -111,7 +120,20 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
     selectRow: _selectRow,
     selectRows: _selectRows,
     updateCellHoverLocation: updateCellHoverLocation
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
+  })) : (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/_react.default.createElement(_FloatingControlsWithSelection.FloatingControlsWithSelection, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    hoveredRows: hoveredRows,
+    stickyTop: tableActive ? stickyTop : undefined,
+    tableActive: tableActive,
+    hoverRows: _hoverRows,
+    selectRow: _selectRow,
+    api: api
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
     editorView: editorView,
     tableRef: tableRef,
     isInDanger: isInDanger,