@atlaskit/editor-plugin-table 11.0.2 → 11.1.0

package/dist/esm/nodeviews/TableComponent.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -28,6 +29,8 @@ import { akEditorTableNumberColumnWidth, akEditorTableToolbarSize as tableToolba
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import UFOLoadHold from '@atlaskit/react-ufo/load-hold';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { autoSizeTable, clearHoverSelection } from '../pm-plugins/commands';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils/autoscrollers';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -67,6 +70,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
+ */
+export var _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) {
@@ -78,6 +89,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       scroll: 0,
       parentWidth: undefined
     }, ShadowEvent.SHOW_BEFORE_SHADOW, false), ShadowEvent.SHOW_AFTER_SHADOW, false), "tableWrapperWidth", undefined), "tableWrapperHeight", undefined));
+    _defineProperty(_this, "holdCompleted", false);
+    _defineProperty(_this, "dispatchEventName", "tableResized-".concat(_tableComponentCount++));
     _defineProperty(_this, "handleMouseOut", function (event) {
       if (!isTableInFocus(_this.props.view)) {
         return false;
@@ -700,6 +713,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 (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;
+              }
+            }
           });
         }
       }
@@ -994,7 +1015,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.createElement("div", {
+      }, expValEquals('cc_editor_ufo_hold_table_till_resize_complete', 'isEnabled', true) ? /*#__PURE__*/React.createElement(TableHold, {
+        dispatchEventName: this.dispatchEventName
+      }) : null, /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
@@ -1130,4 +1153,36 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }]);
 }(React.Component);
 _defineProperty(TableComponent, "displayName", 'TableComponent');
-export default injectIntl(TableComponent);
+export default 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.memo(function TableHold(_ref) {
+  var dispatchEventName = _ref.dispatchEventName;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    tableUpdateConfirmed = _React$useState2[0],
+    setTableUpdateConfirmed = _React$useState2[1];
+  React.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.createElement(UFOLoadHold, {
+      name: "editor_table_resize"
+    });
+  }
+  return null;
+});

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -1,44 +1,58 @@
 import React from 'react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { findTable } from '@atlaskit/editor-tables';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 import TableComponent from './TableComponent';
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  // tableState
-  var isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing');
-  var isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled');
-  var isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled');
-  var ordering = useInternalTablePluginStateSelector(api, 'ordering');
-  var isResizing = useInternalTablePluginStateSelector(api, 'isResizing');
-  var isInDanger = useInternalTablePluginStateSelector(api, 'isInDanger');
-  var hoveredCell = useInternalTablePluginStateSelector(api, 'hoveredCell');
-  var hoveredRows = useInternalTablePluginStateSelector(api, 'hoveredRows');
-  var isTableHovered = useInternalTablePluginStateSelector(api, 'isTableHovered');
-  var isWholeTableInDanger = useInternalTablePluginStateSelector(api, 'isWholeTableInDanger');
-  // Required so that table controls re-renders
-  useInternalTablePluginStateSelector(api, 'targetCellPosition');
-
-  // mediaState
-  var isFullscreen = useSharedPluginStateSelector(api, 'media.isFullscreen');
-
-  // selectionState
-  var selection = useSharedPluginStateSelector(api, 'selection.selection');
-
-  // editorViewModeState
-  var mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
-
-  // widthState
-  var width = useSharedPluginStateSelector(api, 'width.width');
-  var lineLength = useSharedPluginStateSelector(api, 'width.lineLength');
-
-  // interactionState
-  var interaction = useSharedPluginStateSelector(api, 'interaction.interactionState');
+  var _useSharedPluginState = 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,
@@ -60,13 +74,13 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
     interaction: interaction
   };
 }, function (api) {
-  var _useSharedPluginState = 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 = 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/esm/nodeviews/TableContainer.js

@@ -3,9 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -34,17 +33,24 @@ var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": "table-container"
   }, children);
 });
-var useAlignmentStableContainerSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
-  var isFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled');
-  var wasFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.wasFullWidthModeEnabled');
+var useAlignmentTableContainerSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var _useSharedPluginState = 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 = useSharedPluginState(pluginInjectionApi, ['table']),
-    tableState = _useSharedPluginState.tableState;
+  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState2.tableState;
   return {
     tableState: tableState,
     isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
@@ -58,10 +64,10 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
     getPos = _ref2.getPos,
     editorView = _ref2.editorView;
   var alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : 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;
   useEffect(function () {
     if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
       return;
@@ -120,20 +126,27 @@ var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_re
     editorView: editorView
   }, children);
 };
-var useResizeableTableContainerSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
-  var isFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled');
-  var mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+var selector = function selector(states) {
   return {
-    isFullWidthModeEnabled: isFullWidthModeEnabled,
-    mode: mode
+    tableState: states.tableState,
+    editorViewModeState: states.editorViewModeState
   };
-}, function (pluginInjectionApi) {
-  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['table', 'editorViewMode']),
-    tableState = _useSharedPluginState2.tableState,
-    editorViewModeState = _useSharedPluginState2.editorViewModeState;
+};
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var _useSharedPluginState3 = 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 = useSharedPluginState(api, ['table', 'editorViewMode']),
+    tableState = _useSharedPluginState4.tableState,
+    editorViewModeState = _useSharedPluginState4.editorViewModeState;
+  return {
+    tableState: tableState,
+    editorViewModeState: editorViewModeState
   };
 });
 export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
@@ -160,9 +173,11 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     _useState2 = _slicedToArray(_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 = useCallback(function (height) {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.

package/dist/esm/nodeviews/TableResizer.js

@@ -8,7 +8,7 @@ import { useIntl } from 'react-intl-next';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
@@ -30,7 +30,6 @@ import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFram
 import { defaultGuidelines, defaultGuidelinesForPreserveTable, PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET } from '../pm-plugins/utils/guidelines';
 import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap, PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET } from '../pm-plugins/utils/snapping';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
-import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 var RESIZE_STEP_VALUE = 10;
 var handles = {
   right: true
@@ -96,17 +95,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 = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
-  var widthToWidest = 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 = sharedPluginStateHookMigratorFactory(function (api) {
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table'], selector),
+    widthToWidest = _useSharedPluginState.widthToWidest;
   return {
     widthToWidest: widthToWidest
   };
-}, function (pluginInjectionApi) {
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table']),
-    tableState = _useSharedPluginState.tableState;
-  var tableStateInternal = tableState;
+}, function (api) {
+  var _useSharedPluginState2 = useSharedPluginState(api, ['table']),
+    tableState = _useSharedPluginState2.tableState;
   return {
-    widthToWidest: tableStateInternal.widthToWidest
+    widthToWidest: tableState === null || tableState === void 0 ? void 0 : tableState.widthToWidest
   };
 });
 export var TableResizer = function TableResizer(_ref) {

package/dist/esm/tablePlugin.js

@@ -7,7 +7,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TA
 import { browser } from '@atlaskit/editor-common/browser';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
@@ -15,7 +15,6 @@ import { getParentOfTypeCount, getPositionAfterTopParentNodeOfType } from '@atla
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -66,13 +65,19 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
 var useTableSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  var _useSharedPluginState = 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 = useSharedPluginState(api, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var _useSharedPluginState2 = useSharedPluginState(api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState2.editorViewModeState;
   return {
     mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
   };

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

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/browser';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
@@ -19,7 +19,6 @@ import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugi
 import { TableCssClassName as ClassName } from '../../types';
 import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
-import { useInternalTablePluginStateSelector } from '../hooks/useInternalTablePluginStateSelector';
 import { HandleIconComponent } from './HandleIconComponent';
 var DragHandleComponent = function DragHandleComponent(_ref) {
   var isDragMenuTarget = _ref.isDragMenuTarget,
@@ -245,15 +244,22 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }), previewContainer));
 };
 var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var hoveredColumns = useInternalTablePluginStateSelector(api, 'hoveredColumns');
-  var hoveredRows = useInternalTablePluginStateSelector(api, 'hoveredRows');
+  var _useSharedPluginState = 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 = useSharedPluginState(api, ['table']),
-    tableState = _useSharedPluginState.tableState;
+  var _useSharedPluginState2 = useSharedPluginState(api, ['table']),
+    tableState = _useSharedPluginState2.tableState;
   var tableStateInternal = tableState;
   return {
     hoveredColumns: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredColumns,

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

@@ -1,9 +1,8 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { useCallback, useMemo, useRef } from 'react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
@@ -25,13 +24,19 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var selection = useSharedPluginStateSelector(api, 'selection.selection');
+  var _useSharedPluginState = 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 = useSharedPluginState(api, ['selection']),
-    selectionState = _useSharedPluginState.selectionState;
+  var _useSharedPluginState2 = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState2.selectionState;
   return {
     selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
   };

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

@@ -1,9 +1,8 @@
 import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -51,13 +50,19 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
   }));
 };
 var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  var _useSharedPluginState = 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 = useSharedPluginState(api, ['selection']),
-    selectionState = _useSharedPluginState.selectionState;
+  var _useSharedPluginState2 = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState2.selectionState;
   return {
     selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
   };

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

@@ -1,16 +1,21 @@
 import React from 'react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { CornerControls } from './CornerControls/ClassicCornerControls';
 import { RowControls } from './RowControls/ClassicControls';
 var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  var _useSharedPluginState = 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 = useSharedPluginState(api, ['selection']),
-    selectionState = _useSharedPluginState.selectionState;
+  var _useSharedPluginState2 = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState2.selectionState;
   return {
     selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
   };

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

@@ -2,8 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -279,13 +278,19 @@ export var DragControls = function DragControls(_ref) {
   );
 };
 var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  var _useSharedPluginState = 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 = useSharedPluginState(api, ['selection']),
-    selectionState = _useSharedPluginState.selectionState;
+  var _useSharedPluginState2 = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState2.selectionState;
   return {
     selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
   };

package/dist/esm/ui/global-styles.js

@@ -4,17 +4,22 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { Global, jsx } from '@emotion/react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableStyles } from './common-styles';
 var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  var _useSharedPluginState = 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 = useSharedPluginState(api, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var _useSharedPluginState2 = useSharedPluginState(api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState2.editorViewModeState;
   return {
     mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
   };