@atlaskit/editor-plugin-table 11.0.2 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-table
 
+## 11.1.0
+
+### Minor Changes
+
+- [#184563](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/184563)
+  [`d5b7a19b7e9ad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d5b7a19b7e9ad) -
+  Adds UFO holds to the table component on load
+
+### Patch Changes
+
+- [#183428](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/183428)
+  [`acba3dd7b2daa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/acba3dd7b2daa) -
+  Migrate table to useSharedPluginStateWithSelector
+- Updated dependencies
+
+## 11.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.0.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -83,6 +83,9 @@
         {
             "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../react-ufo/atlaskit/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/theme/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -83,6 +83,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../react-ufo/atlaskit/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/theme/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -83,6 +83,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../react-ufo/atlaskit/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/theme/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/nodeviews/TableComponent.js

@@ -4,7 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports._reset_tableComponentCount = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -28,6 +29,8 @@ 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 _loadHold = _interopRequireDefault(require("@atlaskit/react-ufo/load-hold"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../pm-plugins/commands");
 var _autoscrollers = require("../pm-plugins/drag-and-drop/utils/autoscrollers");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -73,6 +76,14 @@ var isOverflowAnalyticsEnabled = false;
 // Prevent unnecessary parentWidth updates when table is nested inside of a node that is nested itself.
 var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
 var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
+var _tableComponentCount = 1;
+/**
+ * Exported for test purposes only
+ */
+var _reset_tableComponentCount = exports._reset_tableComponentCount = function _reset_tableComponentCount() {
+  return _tableComponentCount = 0;
+};
+
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var TableComponent = /*#__PURE__*/function (_React$Component) {
@@ -84,6 +95,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       scroll: 0,
       parentWidth: undefined
     }, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), _types.ShadowEvent.SHOW_AFTER_SHADOW, false), "tableWrapperWidth", undefined), "tableWrapperHeight", undefined));
+    (0, _defineProperty3.default)(_this, "holdCompleted", false);
+    (0, _defineProperty3.default)(_this, "dispatchEventName", "tableResized-".concat(_tableComponentCount++));
     (0, _defineProperty3.default)(_this, "handleMouseOut", function (event) {
       if (!(0, _eventHandlers.isTableInFocus)(_this.props.view)) {
         return false;
@@ -706,6 +719,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             _this4.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
+            if ((0, _expValEquals.expValEquals)('cc_editor_ufo_hold_table_till_resize_complete', 'isEnabled', true)) {
+              // Mark table as updated for TableHold component (if no table exists yet, the colgroup update will not have done anything)
+              if (_this4.table && !_this4.holdCompleted) {
+                var customTableResizedEvent = new CustomEvent(_this4.dispatchEventName);
+                document.dispatchEvent(customTableResizedEvent);
+                _this4.holdCompleted = true;
+              }
+            }
           });
         }
       }
@@ -1000,7 +1021,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
         isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
         isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _expValEquals.expValEquals)('cc_editor_ufo_hold_table_till_resize_complete', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(TableHold, {
+        dispatchEventName: this.dispatchEventName
+      }) : null, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
@@ -1136,4 +1159,35 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }]);
 }(_react.default.Component);
 (0, _defineProperty3.default)(TableComponent, "displayName", 'TableComponent');
-var _default = exports.default = (0, _reactIntlNext.injectIntl)(TableComponent);
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(TableComponent);
+/**
+ * This is needed because of how currently the table is resized post client boot up with code that exists outside react
+ *
+ * This can be deleted once https://home.atlassian.com/o/2346a038-3c8c-498b-a79b-e7847859868d/s/a436116f-02ce-4520-8fbb-7301462a1674/project/ATLAS-97756/updates
+ * is rolled out (and doesn't need to be used in the test arm of that change).
+ */
+var TableHold = /*#__PURE__*/_react.default.memo(function TableHold(_ref) {
+  var dispatchEventName = _ref.dispatchEventName;
+  var _React$useState = _react.default.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    tableUpdateConfirmed = _React$useState2[0],
+    setTableUpdateConfirmed = _React$useState2[1];
+  _react.default.useEffect(function () {
+    var customEventListener = function customEventListener() {
+      setTableUpdateConfirmed(true);
+    };
+
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    document.addEventListener(dispatchEventName, customEventListener);
+    return function () {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      document.removeEventListener(dispatchEventName, customEventListener);
+    };
+  }, [dispatchEventName]);
+  if (tableUpdateConfirmed === false) {
+    return /*#__PURE__*/_react.default.createElement(_loadHold.default, {
+      name: "editor_table_resize"
+    });
+  }
+  return null;
+});

package/dist/cjs/nodeviews/TableComponentWithSharedState.js

@@ -7,44 +7,58 @@ Object.defineProperty(exports, "__esModule", {
 exports.TableComponentWithSharedState = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorTables = require("@atlaskit/editor-tables");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _useInternalTablePluginStateSelector = require("../ui/hooks/useInternalTablePluginStateSelector");
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  // tableState
-  var isTableResizing = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isTableResizing');
-  var isHeaderColumnEnabled = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isHeaderColumnEnabled');
-  var isHeaderRowEnabled = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isHeaderRowEnabled');
-  var ordering = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'ordering');
-  var isResizing = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isResizing');
-  var isInDanger = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isInDanger');
-  var hoveredCell = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'hoveredCell');
-  var hoveredRows = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'hoveredRows');
-  var isTableHovered = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isTableHovered');
-  var isWholeTableInDanger = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isWholeTableInDanger');
-  // Required so that table controls re-renders
-  (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'targetCellPosition');
-
-  // mediaState
-  var isFullscreen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.isFullscreen');
-
-  // selectionState
-  var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
-
-  // editorViewModeState
-  var mode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode');
-
-  // widthState
-  var width = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'width.width');
-  var lineLength = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'width.lineLength');
-
-  // interactionState
-  var interaction = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'interaction.interactionState');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['table', 'width', 'media', 'selection', 'editorViewMode', 'interaction'], function (states) {
+      var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$mediaState, _states$selectionStat, _states$editorViewMod, _states$widthState, _states$widthState2, _states$interactionSt;
+      return {
+        // tableState
+        isTableResizing: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.isTableResizing,
+        isHeaderColumnEnabled: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.isHeaderColumnEnabled,
+        isHeaderRowEnabled: (_states$tableState3 = states.tableState) === null || _states$tableState3 === void 0 ? void 0 : _states$tableState3.isHeaderRowEnabled,
+        ordering: (_states$tableState4 = states.tableState) === null || _states$tableState4 === void 0 ? void 0 : _states$tableState4.ordering,
+        isResizing: (_states$tableState5 = states.tableState) === null || _states$tableState5 === void 0 ? void 0 : _states$tableState5.isResizing,
+        isInDanger: (_states$tableState6 = states.tableState) === null || _states$tableState6 === void 0 ? void 0 : _states$tableState6.isInDanger,
+        hoveredCell: (_states$tableState7 = states.tableState) === null || _states$tableState7 === void 0 ? void 0 : _states$tableState7.hoveredCell,
+        hoveredRows: (_states$tableState8 = states.tableState) === null || _states$tableState8 === void 0 ? void 0 : _states$tableState8.hoveredRows,
+        isTableHovered: (_states$tableState9 = states.tableState) === null || _states$tableState9 === void 0 ? void 0 : _states$tableState9.isTableHovered,
+        isWholeTableInDanger: (_states$tableState0 = states.tableState) === null || _states$tableState0 === void 0 ? void 0 : _states$tableState0.isWholeTableInDanger,
+        // Required so that table control re-renders
+        targetCellPosition: (_states$tableState1 = states.tableState) === null || _states$tableState1 === void 0 ? void 0 : _states$tableState1.targetCellPosition,
+        // mediaState
+        isFullscreen: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.isFullscreen,
+        // selectionState
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
+        // editorViewModeState
+        mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode,
+        // widthState
+        width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width,
+        lineLength: (_states$widthState2 = states.widthState) === null || _states$widthState2 === void 0 ? void 0 : _states$widthState2.lineLength,
+        // interactionState
+        interaction: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState
+      };
+    }),
+    isTableResizing = _useSharedPluginState.isTableResizing,
+    isHeaderColumnEnabled = _useSharedPluginState.isHeaderColumnEnabled,
+    isHeaderRowEnabled = _useSharedPluginState.isHeaderRowEnabled,
+    ordering = _useSharedPluginState.ordering,
+    isResizing = _useSharedPluginState.isResizing,
+    isInDanger = _useSharedPluginState.isInDanger,
+    hoveredCell = _useSharedPluginState.hoveredCell,
+    hoveredRows = _useSharedPluginState.hoveredRows,
+    isTableHovered = _useSharedPluginState.isTableHovered,
+    isWholeTableInDanger = _useSharedPluginState.isWholeTableInDanger,
+    interaction = _useSharedPluginState.interaction,
+    isFullscreen = _useSharedPluginState.isFullscreen,
+    lineLength = _useSharedPluginState.lineLength,
+    mode = _useSharedPluginState.mode,
+    selection = _useSharedPluginState.selection,
+    width = _useSharedPluginState.width;
   return {
     tableState: undefined,
     widthState: undefined,
@@ -66,13 +80,13 @@ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (
     interaction: interaction
   };
 }, function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection', 'editorViewMode', 'interaction']),
-    widthState = _useSharedPluginState.widthState,
-    tableState = _useSharedPluginState.tableState,
-    mediaState = _useSharedPluginState.mediaState,
-    selectionState = _useSharedPluginState.selectionState,
-    editorViewModeState = _useSharedPluginState.editorViewModeState,
-    interactionState = _useSharedPluginState.interactionState;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection', 'editorViewMode', 'interaction']),
+    widthState = _useSharedPluginState2.widthState,
+    tableState = _useSharedPluginState2.tableState,
+    mediaState = _useSharedPluginState2.mediaState,
+    selectionState = _useSharedPluginState2.selectionState,
+    editorViewModeState = _useSharedPluginState2.editorViewModeState,
+    interactionState = _useSharedPluginState2.interactionState;
   var tableStateInternal = tableState;
   return {
     tableState: tableState,

package/dist/cjs/nodeviews/TableContainer.js

@@ -13,7 +13,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -43,17 +42,24 @@ var InnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "data-testid": "table-container"
   }, children);
 });
-var useAlignmentStableContainerSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
-  var isFullWidthModeEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'table.isFullWidthModeEnabled');
-  var wasFullWidthModeEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'table.wasFullWidthModeEnabled');
+var useAlignmentTableContainerSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['table'], function (states) {
+      var _states$tableState, _states$tableState2;
+      return {
+        isFullWidthModeEnabled: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.isFullWidthModeEnabled,
+        wasFullWidthModeEnabled: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.wasFullWidthModeEnabled
+      };
+    }),
+    isFullWidthModeEnabled = _useSharedPluginState.isFullWidthModeEnabled,
+    wasFullWidthModeEnabled = _useSharedPluginState.wasFullWidthModeEnabled;
   return {
     tableState: undefined,
     isFullWidthModeEnabled: isFullWidthModeEnabled,
     wasFullWidthModeEnabled: wasFullWidthModeEnabled
   };
 }, function (pluginInjectionApi) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table']),
-    tableState = _useSharedPluginState.tableState;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState2.tableState;
   return {
     tableState: tableState,
     isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
@@ -67,10 +73,10 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
     getPos = _ref2.getPos,
     editorView = _ref2.editorView;
   var alignment = node.attrs.layout !== _alignment.ALIGN_START ? _alignment.ALIGN_CENTER : _alignment.ALIGN_START;
-  var _useAlignmentStableCo = useAlignmentStableContainerSharedState(pluginInjectionApi),
-    tableState = _useAlignmentStableCo.tableState,
-    isFullWidthModeEnabled = _useAlignmentStableCo.isFullWidthModeEnabled,
-    wasFullWidthModeEnabled = _useAlignmentStableCo.wasFullWidthModeEnabled;
+  var _useAlignmentTableCon = useAlignmentTableContainerSharedState(pluginInjectionApi),
+    tableState = _useAlignmentTableCon.tableState,
+    isFullWidthModeEnabled = _useAlignmentTableCon.isFullWidthModeEnabled,
+    wasFullWidthModeEnabled = _useAlignmentTableCon.wasFullWidthModeEnabled;
   (0, _react.useEffect)(function () {
     if (!tableState && (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)) {
       return;
@@ -129,20 +135,27 @@ var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_re
     editorView: editorView
   }, children);
 };
-var useResizeableTableContainerSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
-  var isFullWidthModeEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'table.isFullWidthModeEnabled');
-  var mode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
+var selector = function selector(states) {
   return {
-    isFullWidthModeEnabled: isFullWidthModeEnabled,
-    mode: mode
+    tableState: states.tableState,
+    editorViewModeState: states.editorViewModeState
   };
-}, function (pluginInjectionApi) {
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table', 'editorViewMode']),
-    tableState = _useSharedPluginState2.tableState,
-    editorViewModeState = _useSharedPluginState2.editorViewModeState;
+};
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var _useSharedPluginState3 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['table', 'editorViewMode'], selector),
+    tableState = _useSharedPluginState3.tableState,
+    editorViewModeState = _useSharedPluginState3.editorViewModeState;
   return {
-    isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
-    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+    tableState: tableState,
+    editorViewModeState: editorViewModeState
+  };
+}, function (api) {
+  var _useSharedPluginState4 = (0, _hooks.useSharedPluginState)(api, ['table', 'editorViewMode']),
+    tableState = _useSharedPluginState4.tableState,
+    editorViewModeState = _useSharedPluginState4.editorViewModeState;
+  return {
+    tableState: tableState,
+    editorViewModeState: editorViewModeState
   };
 });
 var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_react.default.memo(function (_ref4) {
@@ -169,9 +182,11 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     resizing = _useState2[0],
     setIsResizing = _useState2[1];
-  var _useResizeableTableCo = useResizeableTableContainerSharedState(pluginInjectionApi),
-    isFullWidthModeEnabled = _useResizeableTableCo.isFullWidthModeEnabled,
-    mode = _useResizeableTableCo.mode;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    tableState = _useSharedState.tableState,
+    editorViewModeState = _useSharedState.editorViewModeState;
+  var isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
+  var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   var updateContainerHeight = (0, _react.useCallback)(function (height) {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.

package/dist/cjs/nodeviews/TableResizer.js

@@ -36,7 +36,6 @@ var _analytics2 = require("../pm-plugins/utils/analytics");
 var _guidelines = require("../pm-plugins/utils/guidelines");
 var _snapping = require("../pm-plugins/utils/snapping");
 var _consts2 = require("../ui/consts");
-var _useInternalTablePluginStateSelector = require("../ui/hooks/useInternalTablePluginStateSelector");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -105,17 +104,23 @@ var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWi
     return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < width + guidelineVisibleAdjustment;
   });
 };
-var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
-  var widthToWidest = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(pluginInjectionApi, 'widthToWidest');
+var selector = function selector(states) {
+  var _states$tableState;
+  return {
+    widthToWidest: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.widthToWidest
+  };
+};
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['table'], selector),
+    widthToWidest = _useSharedPluginState.widthToWidest;
   return {
     widthToWidest: widthToWidest
   };
-}, function (pluginInjectionApi) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table']),
-    tableState = _useSharedPluginState.tableState;
-  var tableStateInternal = tableState;
+}, function (api) {
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['table']),
+    tableState = _useSharedPluginState2.tableState;
   return {
-    widthToWidest: tableStateInternal.widthToWidest
+    widthToWidest: tableState === null || tableState === void 0 ? void 0 : tableState.widthToWidest
   };
 });
 var TableResizer = exports.TableResizer = function TableResizer(_ref) {

package/dist/cjs/tablePlugin.js

@@ -21,7 +21,6 @@ var _nesting = require("@atlaskit/editor-common/nesting");
 var _preset = require("@atlaskit/editor-common/preset");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -74,13 +73,19 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
 var useTableSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  var mode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['editorViewMode'], function (states) {
+      var _states$editorViewMod;
+      return {
+        mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+      };
+    }),
+    mode = _useSharedPluginState.mode;
   return {
     mode: mode
   };
 }, function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState2.editorViewModeState;
   return {
     mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
   };

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

@@ -25,7 +25,6 @@ var _mergedCells = require("../../pm-plugins/utils/merged-cells");
 var _types = require("../../types");
 var _consts = require("../consts");
 var _DragPreview = require("../DragPreview");
-var _useInternalTablePluginStateSelector = require("../hooks/useInternalTablePluginStateSelector");
 var _HandleIconComponent = require("./HandleIconComponent");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @atlaskit/design-system/no-html-button */
@@ -254,15 +253,22 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }), previewContainer));
 };
 var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  var hoveredColumns = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'hoveredColumns');
-  var hoveredRows = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'hoveredRows');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['table'], function (states) {
+      var _states$tableState, _states$tableState2;
+      return {
+        hoveredColumns: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.hoveredColumns,
+        hoveredRows: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.hoveredRows
+      };
+    }),
+    hoveredColumns = _useSharedPluginState.hoveredColumns,
+    hoveredRows = _useSharedPluginState.hoveredRows;
   return {
     hoveredColumns: hoveredColumns,
     hoveredRows: hoveredRows
   };
 }, function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['table']),
-    tableState = _useSharedPluginState.tableState;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['table']),
+    tableState = _useSharedPluginState2.tableState;
   var tableStateInternal = tableState;
   return {
     hoveredColumns: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredColumns,

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

@@ -8,7 +8,6 @@ exports.ColumnControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
@@ -33,13 +32,19 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
+      var _states$selectionStat;
+      return {
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+      };
+    }),
+    selection = _useSharedPluginState.selection;
   return {
     selection: selection
   };
 }, function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
-    selectionState = _useSharedPluginState.selectionState;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['selection']),
+    selectionState = _useSharedPluginState2.selectionState;
   return {
     selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
   };

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

@@ -11,7 +11,6 @@ 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 _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _commands = require("../../../pm-plugins/commands");
 var _types = require("../../../types");
@@ -60,13 +59,19 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
   }));
 };
 var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  var selectionsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
+      var _states$selectionStat;
+      return {
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+      };
+    }),
+    selection = _useSharedPluginState.selection;
   return {
-    selection: selectionsSelector
+    selection: selection
   };
 }, function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
-    selectionState = _useSharedPluginState.selectionState;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['selection']),
+    selectionState = _useSharedPluginState2.selectionState;
   return {
     selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
   };

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

@@ -7,17 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.FloatingControlsWithSelection = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _ClassicCornerControls = require("./CornerControls/ClassicCornerControls");
 var _ClassicControls = require("./RowControls/ClassicControls");
 var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  var selectionsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
+      var _states$selectionStat;
+      return {
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+      };
+    }),
+    selection = _useSharedPluginState.selection;
   return {
-    selection: selectionsSelector
+    selection: selection
   };
 }, function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
-    selectionState = _useSharedPluginState.selectionState;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['selection']),
+    selectionState = _useSharedPluginState2.selectionState;
   return {
     selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
   };

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

@@ -9,7 +9,6 @@ exports.DragControlsWithSelection = exports.DragControls = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -288,13 +287,19 @@ var DragControls = exports.DragControls = function DragControls(_ref) {
   );
 };
 var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  var selectionsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
+      var _states$selectionStat;
+      return {
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+      };
+    }),
+    selection = _useSharedPluginState.selection;
   return {
-    selection: selectionsSelector
+    selection: selection
   };
 }, function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
-    selectionState = _useSharedPluginState.selectionState;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['selection']),
+    selectionState = _useSharedPluginState2.selectionState;
   return {
     selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
   };