@atlaskit/editor-plugin-table 9.1.2 → 9.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-table
 
+## 9.2.0
+
+### Minor Changes
+
+- [#103042](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103042)
+  [`a3bcf71666e0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a3bcf71666e0d) -
+  Replace platform_editor_table_use_shared_state_hook with FG and fix remaining selection bugs
+  caused by lack of re-renders
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.1.3
+
+### Patch Changes
+
+- [#102547](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102547)
+  [`b76cc60ba170b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b76cc60ba170b) -
+  Internal changes to remove deprecated typography imports.
+
 ## 9.1.2
 
 ### Patch Changes

package/afm-post-office/tsconfig.json

@@ -0,0 +1,99 @@
+{
+	"extends": "../../../../tsconfig.entry-points.post-office.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../post-office/tsDist/@atlaskit__editor-plugin-table/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../../design-system/button/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../custom-steps/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-palette/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-accessibility-utils/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-analytics/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-batch-attribute-updates/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-content-insertion/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-editor-viewmode/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-guideline/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-width/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-shared-styles/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-tables/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/menu/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/auto-scroll/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/hitbox/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/theme/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../tmp-editor-statsig/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/toggle/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-post-office/tsconfig.json"
+		}
+	]
+}

package/dist/cjs/nodeviews/TableComponent.js

@@ -26,7 +26,6 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../pm-plugins/commands");
 var _autoscrollers = require("../pm-plugins/drag-and-drop/utils/autoscrollers");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -699,7 +698,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getEditorFeatureFlags = _this$props11.getEditorFeatureFlags;
       var isInDanger = this.props.isInDanger;
       var table = (0, _utils2.findTable)(view.state.selection);
-      if ((0, _experiments.editorExperiment)('platform_editor_table_use_shared_state_hook', false)) {
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg')) {
         var pluginState = (0, _pluginFactory.getPluginState)(view.state);
         isInDanger = pluginState.isInDanger;
       }
@@ -835,7 +834,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getEditorFeatureFlags = _this$props12.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props12.isTableScalingEnabled,
         allowTableResizing = _this$props12.allowTableResizing,
-        allowTableAlignment = _this$props12.allowTableAlignment;
+        allowTableAlignment = _this$props12.allowTableAlignment,
+        selection = _this$props12.selection;
       var _this$props13 = this.props,
         isInDanger = _this$props13.isInDanger,
         hoveredRows = _this$props13.hoveredRows,
@@ -846,7 +846,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
       var node = getNode();
-      if ((0, _experiments.editorExperiment)('platform_editor_table_use_shared_state_hook', false)) {
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg')) {
         var pluginState = (0, _pluginFactory.getPluginState)(view.state);
         isInDanger = pluginState.isInDanger;
         hoveredRows = pluginState.hoveredRows;
@@ -940,7 +940,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
-        className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)({}, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(view.state.selection))),
+        className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)({}, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(selection !== null && selection !== void 0 ? selection : view.state.selection))),
         editorView: view,
         getPos: getPos,
         node: node

package/dist/cjs/nodeviews/TableComponentWithSharedState.js

@@ -29,10 +29,11 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     forwardRef = _ref.forwardRef,
     allowTableAlignment = _ref.allowTableAlignment,
     allowTableResizing = _ref.allowTableResizing;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection']),
     widthState = _useSharedPluginState.widthState,
     tableState = _useSharedPluginState.tableState,
-    mediaState = _useSharedPluginState.mediaState;
+    mediaState = _useSharedPluginState.mediaState,
+    selectionState = _useSharedPluginState.selectionState;
   if (!tableState) {
     return null;
   }
@@ -69,7 +70,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     getPos: getPos,
     isMediaFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
     options: options,
-    allowControls: !!allowControls,
+    allowControls: allowControls,
     isHeaderRowEnabled: isHeaderRowEnabled,
     isHeaderColumnEnabled: isHeaderColumnEnabled,
     isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
@@ -92,6 +93,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     hoveredRows: hoveredRows,
     hoveredCell: hoveredCell,
     isTableHovered: isTableHovered,
-    isWholeTableInDanger: isWholeTableInDanger
+    isWholeTableInDanger: isWholeTableInDanger,
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
   });
 };

package/dist/cjs/nodeviews/table.js

@@ -22,7 +22,6 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _createPluginConfig = require("../pm-plugins/create-plugin-config");
 var _pluginKey = require("../pm-plugins/drag-and-drop/plugin-key");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -141,7 +140,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render(props, forwardRef) {
       var _this3 = this;
-      if ((0, _experiments.editorExperiment)('platform_editor_table_use_shared_state_hook', true)) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg')) {
         return /*#__PURE__*/_react.default.createElement(_TableComponentWithSharedState.TableComponentWithSharedState, {
           forwardRef: forwardRef,
           getNode: this.getNode,

package/dist/cjs/tablePlugin.js

@@ -108,6 +108,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
         isTableResizing: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.resizing,
         isInDanger: tablePluginState.isInDanger,
         hoveredRows: tablePluginState.hoveredRows,
+        hoveredColumns: tablePluginState.hoveredColumns,
         hoveredCell: tablePluginState.hoveredCell,
         isTableHovered: tablePluginState.isTableHovered,
         isWholeTableInDanger: tablePluginState.isWholeTableInDanger,

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DragHandle = void 0;
+exports.DragHandleWithSharedState = exports.DragHandle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -13,6 +13,7 @@ var _classnames2 = _interopRequireDefault(require("classnames"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _browser = require("@atlaskit/editor-common/browser");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorTables = require("@atlaskit/editor-tables");
@@ -27,6 +28,8 @@ var _DragPreview = require("../DragPreview");
 var _HandleIconComponent = require("./HandleIconComponent");
 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 && {}.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; }
+/* eslint-disable @atlaskit/design-system/no-html-button */
+
 var DragHandleComponent = function DragHandleComponent(_ref) {
   var isDragMenuTarget = _ref.isDragMenuTarget,
     tableLocalId = _ref.tableLocalId,
@@ -45,7 +48,9 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     hoveredCell = _ref.hoveredCell,
     onClick = _ref.onClick,
     editorView = _ref.editorView,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    hoveredColumns = _ref.hoveredColumns,
+    hoveredRows = _ref.hoveredRows;
   var dragHandleDivRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -53,9 +58,13 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     setPreviewContainer = _useState2[1];
   var state = editorView.state,
     selection = editorView.state.selection;
-  var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
-    hoveredColumns = _getPluginState.hoveredColumns,
-    hoveredRows = _getPluginState.hoveredRows;
+  if (hoveredColumns === undefined || hoveredRows === undefined) {
+    var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
+      hoveredColumnsState = _getPluginState.hoveredColumns,
+      hoveredRowsState = _getPluginState.hoveredRows;
+    hoveredColumns = hoveredColumnsState;
+    hoveredRows = hoveredRowsState;
+  }
   var _getDnDPluginState = (0, _pluginFactory.getPluginState)(state),
     _getDnDPluginState$is = _getDnDPluginState.isDragMenuOpen,
     isDragMenuOpen = _getDnDPluginState$is === void 0 ? false : _getDnDPluginState$is;
@@ -244,4 +253,44 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     height: previewHeight
   }), previewContainer));
 };
-var DragHandle = exports.DragHandle = (0, _reactIntlNext.injectIntl)(DragHandleComponent);
+var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedState(_ref5) {
+  var isDragMenuTarget = _ref5.isDragMenuTarget,
+    tableLocalId = _ref5.tableLocalId,
+    direction = _ref5.direction,
+    appearance = _ref5.appearance,
+    indexes = _ref5.indexes,
+    forceDefaultHandle = _ref5.forceDefaultHandle,
+    previewHeight = _ref5.previewHeight,
+    previewWidth = _ref5.previewWidth,
+    onMouseOver = _ref5.onMouseOver,
+    onMouseOut = _ref5.onMouseOut,
+    toggleDragMenu = _ref5.toggleDragMenu,
+    hoveredCell = _ref5.hoveredCell,
+    onClick = _ref5.onClick,
+    editorView = _ref5.editorView,
+    intl = _ref5.intl,
+    api = _ref5.api;
+  var _ref6 = (0, _hooks.useSharedPluginState)(api, ['table']),
+    tableState = _ref6.tableState;
+  return /*#__PURE__*/_react.default.createElement(DragHandleComponent, {
+    isDragMenuTarget: isDragMenuTarget,
+    tableLocalId: tableLocalId,
+    direction: direction,
+    appearance: appearance,
+    indexes: indexes,
+    forceDefaultHandle: forceDefaultHandle,
+    previewWidth: previewWidth,
+    previewHeight: previewHeight,
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut,
+    toggleDragMenu: toggleDragMenu,
+    hoveredCell: hoveredCell,
+    onClick: onClick,
+    editorView: editorView,
+    intl: intl,
+    hoveredColumns: tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns,
+    hoveredRows: tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows
+  });
+};
+var DragHandle = exports.DragHandle = (0, _reactIntlNext.injectIntl)(DragHandleComponent);
+var DragHandleWithSharedState = exports.DragHandleWithSharedState = (0, _reactIntlNext.injectIntl)(DragHandleComponentWithSharedState);

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

@@ -43,7 +43,6 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     isInDanger = _ref.isInDanger,
     rowHeights = _ref.rowHeights,
     colWidths = _ref.colWidths,
-    hasHeaderColumn = _ref.hasHeaderColumn,
     isTableHovered = _ref.isTableHovered,
     tableContainerWidth = _ref.tableContainerWidth,
     isNumberColumnEnabled = _ref.isNumberColumnEnabled,
@@ -176,7 +175,23 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         position: 'relative'
       },
       "data-testid": "table-floating-column-".concat(isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0], "-drag-handle")
-    }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+    }, (0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandleWithSharedState, {
+      isDragMenuTarget: !isHover,
+      direction: "column",
+      tableLocalId: localId || '',
+      indexes: indexes,
+      hoveredCell: hoveredCell,
+      previewWidth: previewWidth,
+      forceDefaultHandle: !isHover,
+      previewHeight: previewHeight,
+      appearance: appearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      toggleDragMenu: toggleDragMenuHandler,
+      editorView: editorView,
+      api: api
+    }) : /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',

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

@@ -10,7 +10,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _columnControls = require("../../pm-plugins/utils/column-controls");
 var _nodes = require("../../pm-plugins/utils/nodes");
 var _rowControls = require("../../pm-plugins/utils/row-controls");
@@ -109,7 +108,7 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     isNumberColumnEnabled: isNumberColumnEnabled,
     isDragging: isDragging,
     getScrollOffset: getScrollOffset,
-    api: (0, _experiments.editorExperiment)('platform_editor_table_use_shared_state_hook', true) ? api : undefined
+    api: (0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg') ? 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/RowControls/DragControls.js

@@ -5,12 +5,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DragControls = void 0;
+exports.DragControlsWithSelection = exports.DragControls = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _commands = require("../../../pm-plugins/commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
@@ -35,7 +36,7 @@ var getSelectedRows = function getSelectedRows(selection) {
   }
   return [];
 };
-var DragControlsComponent = function DragControlsComponent(_ref) {
+var DragControls = exports.DragControls = function DragControls(_ref) {
   var _tableNode$attrs$loca, _tableNode$attrs;
   var tableRef = _ref.tableRef,
     tableNode = _ref.tableNode,
@@ -49,7 +50,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     hoverRows = _ref.hoverRows,
     selectRow = _ref.selectRow,
     selectRows = _ref.selectRows,
-    updateCellHoverLocation = _ref.updateCellHoverLocation;
+    updateCellHoverLocation = _ref.updateCellHoverLocation,
+    api = _ref.api,
+    selection = _ref.selection;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDragging = _useState2[0],
@@ -59,7 +62,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
   var heights = rowHeights.map(function (height) {
     return "".concat(height - 1, "px");
   }).join(' ');
-  var selectedRowIndexes = getSelectedRows(editorView.state.selection);
+  var selectedRowIndexes = getSelectedRows(selection !== null && selection !== void 0 ? selection : editorView.state.selection);
   var currentNodeLocalId = (_tableNode$attrs$loca = tableNode === null || tableNode === void 0 || (_tableNode$attrs = tableNode.attrs) === null || _tableNode$attrs === void 0 ? void 0 : _tableNode$attrs.localId) !== null && _tableNode$attrs$loca !== void 0 ? _tableNode$attrs$loca : '';
   (0, _react.useEffect)(function () {
     return (0, _adapter.monitorForElements)({
@@ -167,7 +170,23 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         pointerEvents: 'none'
       },
       "data-testid": "table-floating-row-".concat(isHover ? rowIndex : selectedRowIndexes[0], "-drag-handle")
-    }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+    }, (0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandleWithSharedState, {
+      isDragMenuTarget: !isHover,
+      direction: "row",
+      tableLocalId: currentNodeLocalId,
+      indexes: indexes,
+      forceDefaultHandle: !isHover,
+      previewWidth: tableWidth,
+      previewHeight: previewHeight,
+      appearance: appearance,
+      hoveredCell: hoveredCell,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      toggleDragMenu: toggleDragMenuHandler,
+      editorView: editorView,
+      api: api
+    }) : /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
@@ -271,4 +290,38 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     }), rowHandles())
   );
 };
-var DragControls = exports.DragControls = (0, _reactIntlNext.injectIntl)(DragControlsComponent);
+var DragControlsWithSelection = exports.DragControlsWithSelection = function DragControlsWithSelection(_ref5) {
+  var editorView = _ref5.editorView,
+    tableRef = _ref5.tableRef,
+    tableNode = _ref5.tableNode,
+    tableWidth = _ref5.tableWidth,
+    tableActive = _ref5.tableActive,
+    hoveredCell = _ref5.hoveredCell,
+    isInDanger = _ref5.isInDanger,
+    isTableHovered = _ref5.isTableHovered,
+    isResizing = _ref5.isResizing,
+    hoverRows = _ref5.hoverRows,
+    selectRow = _ref5.selectRow,
+    selectRows = _ref5.selectRows,
+    updateCellHoverLocation = _ref5.updateCellHoverLocation,
+    api = _ref5.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return /*#__PURE__*/_react.default.createElement(DragControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    tableNode: tableNode,
+    tableWidth: tableWidth,
+    tableActive: tableActive,
+    hoveredCell: hoveredCell,
+    isInDanger: isInDanger,
+    isTableHovered: isTableHovered,
+    isResizing: isResizing,
+    hoverRows: hoverRows,
+    selectRow: selectRow,
+    selectRows: selectRows,
+    updateCellHoverLocation: updateCellHoverLocation,
+    api: api,
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  });
+};

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

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../pm-plugins/commands");
 var _nodes = require("../../pm-plugins/utils/nodes");
@@ -22,6 +23,7 @@ var _ClassicControls = require("./RowControls/ClassicControls");
 var _DragControls = require("./RowControls/DragControls");
 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 && {}.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; }
+// Row controls
 var TableFloatingControls = exports.TableFloatingControls = function TableFloatingControls(_ref) {
   var _findTable;
   var editorView = _ref.editorView,
@@ -116,18 +118,36 @@ 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, shouldShowCornerControls && ((0, _experiments.editorExperiment)('platform_editor_table_use_shared_state_hook', true) ? /*#__PURE__*/_react.default.createElement(_DragCornerControls.DragCornerControlsWithSelection, {
+    }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldShowCornerControls && /*#__PURE__*/_react.default.createElement(_DragCornerControls.DragCornerControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
       isResizing: isResizing,
       api: api
-    }) : /*#__PURE__*/_react.default.createElement(_DragCornerControls.DragCornerControls, {
+    }), /*#__PURE__*/_react.default.createElement(_DragControls.DragControlsWithSelection, {
+      tableRef: tableRef,
+      tableNode: tableNode,
+      hoveredCell: hoveredCell,
+      isTableHovered: isTableHovered,
+      editorView: editorView,
+      tableActive: tableActive,
+      isInDanger: isInDanger,
+      isResizing: isResizing
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      ,
+      tableWidth: tableWrapperWidth,
+      hoverRows: _hoverRows,
+      selectRow: _selectRow,
+      selectRows: _selectRows,
+      updateCellHoverLocation: updateCellHoverLocation,
+      api: api
+    })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldShowCornerControls && /*#__PURE__*/_react.default.createElement(_DragCornerControls.DragCornerControls, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
       isResizing: isResizing
-    })), /*#__PURE__*/_react.default.createElement(_DragControls.DragControls, {
+    }), /*#__PURE__*/_react.default.createElement(_DragControls.DragControls, {
       tableRef: tableRef,
       tableNode: tableNode,
       hoveredCell: hoveredCell,
@@ -144,7 +164,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
       selectRow: _selectRow,
       selectRows: _selectRows,
       updateCellHoverLocation: updateCellHoverLocation
-    })) : (0, _experiments.editorExperiment)('platform_editor_table_use_shared_state_hook', true) ? /*#__PURE__*/_react.default.createElement(_FloatingControlsWithSelection.FloatingControlsWithSelection, {
+    }))) : (0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/_react.default.createElement(_FloatingControlsWithSelection.FloatingControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,