@atlaskit/editor-plugin-table 11.0.2 → 11.1.0

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GlobalStylesWrapper = void 0;
 var _react = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _commonStyles = require("./common-styles");
 /**
  * @jsxRuntime classic
@@ -15,13 +14,19 @@ var _commonStyles = require("./common-styles");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var useSharedState = (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/icons/SortingIconWrapper.js

@@ -8,15 +8,20 @@ exports.SortingIconWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _table = require("@atlaskit/editor-common/table");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var useSharedState = (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/es2019/nodeviews/TableComponent.js

@@ -15,6 +15,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';
@@ -54,6 +56,12 @@ const isOverflowAnalyticsEnabled = false;
 // Prevent unnecessary parentWidth updates when table is nested inside of a node that is nested itself.
 const NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
 const NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
+let _tableComponentCount = 1;
+/**
+ * Exported for test purposes only
+ */
+export const _reset_tableComponentCount = () => _tableComponentCount = 0;
+
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class TableComponent extends React.Component {
@@ -67,6 +75,8 @@ class TableComponent extends React.Component {
       tableWrapperWidth: undefined,
       tableWrapperHeight: undefined
     });
+    _defineProperty(this, "holdCompleted", false);
+    _defineProperty(this, "dispatchEventName", `tableResized-${_tableComponentCount++}`);
     _defineProperty(this, "handleMouseOut", event => {
       if (!isTableInFocus(this.props.view)) {
         return false;
@@ -674,6 +684,14 @@ class TableComponent extends React.Component {
           // Ignored via go/ees005
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           this.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 (this.table && !this.holdCompleted) {
+              const customTableResizedEvent = new CustomEvent(this.dispatchEventName);
+              document.dispatchEvent(customTableResizedEvent);
+              this.holdCompleted = true;
+            }
+          }
         });
       }
     }
@@ -974,7 +992,9 @@ class TableComponent extends 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"
@@ -1109,4 +1129,34 @@ class TableComponent extends 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).
+ */
+const TableHold = /*#__PURE__*/React.memo(function TableHold({
+  dispatchEventName
+}) {
+  const [tableUpdateConfirmed, setTableUpdateConfirmed] = React.useState(false);
+  React.useEffect(() => {
+    const customEventListener = () => {
+      setTableUpdateConfirmed(true);
+    };
+
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    document.addEventListener(dispatchEventName, customEventListener);
+    return () => {
+      // 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/es2019/nodeviews/TableComponentWithSharedState.js

@@ -1,44 +1,59 @@
 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
 
 const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  // tableState
-  const isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing');
-  const isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled');
-  const isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled');
-  const ordering = useInternalTablePluginStateSelector(api, 'ordering');
-  const isResizing = useInternalTablePluginStateSelector(api, 'isResizing');
-  const isInDanger = useInternalTablePluginStateSelector(api, 'isInDanger');
-  const hoveredCell = useInternalTablePluginStateSelector(api, 'hoveredCell');
-  const hoveredRows = useInternalTablePluginStateSelector(api, 'hoveredRows');
-  const isTableHovered = useInternalTablePluginStateSelector(api, 'isTableHovered');
-  const isWholeTableInDanger = useInternalTablePluginStateSelector(api, 'isWholeTableInDanger');
-  // Required so that table controls re-renders
-  useInternalTablePluginStateSelector(api, 'targetCellPosition');
-
-  // mediaState
-  const isFullscreen = useSharedPluginStateSelector(api, 'media.isFullscreen');
-
-  // selectionState
-  const selection = useSharedPluginStateSelector(api, 'selection.selection');
-
-  // editorViewModeState
-  const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
-
-  // widthState
-  const width = useSharedPluginStateSelector(api, 'width.width');
-  const lineLength = useSharedPluginStateSelector(api, 'width.lineLength');
-
-  // interactionState
-  const interaction = useSharedPluginStateSelector(api, 'interaction.interactionState');
+  const {
+    isTableResizing,
+    isHeaderColumnEnabled,
+    isHeaderRowEnabled,
+    ordering,
+    isResizing,
+    isInDanger,
+    hoveredCell,
+    hoveredRows,
+    isTableHovered,
+    isWholeTableInDanger,
+    interaction,
+    isFullscreen,
+    lineLength,
+    mode,
+    selection,
+    width
+  } = useSharedPluginStateWithSelector(api, ['table', 'width', 'media', 'selection', 'editorViewMode', 'interaction'], 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
+    };
+  });
   return {
     tableState: undefined,
     widthState: undefined,

package/dist/es2019/nodeviews/TableContainer.js

@@ -2,9 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 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,9 +33,17 @@ const InnerContainer = /*#__PURE__*/forwardRef(({
     "data-testid": "table-container"
   }, children);
 });
-const useAlignmentStableContainerSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
-  const isFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled');
-  const wasFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.wasFullWidthModeEnabled');
+const useAlignmentTableContainerSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const {
+    isFullWidthModeEnabled,
+    wasFullWidthModeEnabled
+  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['table'], 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
+    };
+  });
   return {
     tableState: undefined,
     isFullWidthModeEnabled,
@@ -64,7 +71,7 @@ const AlignmentTableContainer = ({
     tableState,
     isFullWidthModeEnabled,
     wasFullWidthModeEnabled
-  } = useAlignmentStableContainerSharedState(pluginInjectionApi);
+  } = useAlignmentTableContainerSharedState(pluginInjectionApi);
   useEffect(() => {
     if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
       return;
@@ -126,21 +133,27 @@ const AlignmentTableContainerWrapper = ({
     editorView: editorView
   }, children);
 };
-const useResizeableTableContainerSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
-  const isFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled');
-  const mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+const selector = states => ({
+  tableState: states.tableState,
+  editorViewModeState: states.editorViewModeState
+});
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const {
+    tableState,
+    editorViewModeState
+  } = useSharedPluginStateWithSelector(api, ['table', 'editorViewMode'], selector);
   return {
-    isFullWidthModeEnabled,
-    mode
+    tableState,
+    editorViewModeState
   };
-}, pluginInjectionApi => {
+}, api => {
   const {
     tableState,
     editorViewModeState
-  } = useSharedPluginState(pluginInjectionApi, ['table', 'editorViewMode']);
+  } = useSharedPluginState(api, ['table', 'editorViewMode']);
   return {
-    isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
-    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+    tableState,
+    editorViewModeState
   };
 });
 export const ResizableTableContainer = /*#__PURE__*/React.memo(({
@@ -166,9 +179,11 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const [resizing, setIsResizing] = useState(false);
   const {
-    isFullWidthModeEnabled,
-    mode
-  } = useResizeableTableContainerSharedState(pluginInjectionApi);
+    tableState,
+    editorViewModeState
+  } = useSharedState(pluginInjectionApi);
+  const isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
+  const mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   const updateContainerHeight = useCallback(height => {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.

package/dist/es2019/nodeviews/TableResizer.js

@@ -4,7 +4,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';
@@ -26,7 +26,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';
 const RESIZE_STEP_VALUE = 10;
 const handles = {
   right: true
@@ -92,18 +91,25 @@ const getVisibleGuidelines = (guidelines, containerWidth, lineLength, isTableSca
     return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < width + guidelineVisibleAdjustment;
   });
 };
-const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
-  const widthToWidest = useInternalTablePluginStateSelector(pluginInjectionApi, 'widthToWidest');
+const selector = states => {
+  var _states$tableState;
+  return {
+    widthToWidest: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.widthToWidest
+  };
+};
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const {
+    widthToWidest
+  } = useSharedPluginStateWithSelector(api, ['table'], selector);
   return {
     widthToWidest
   };
-}, pluginInjectionApi => {
+}, api => {
   const {
     tableState
-  } = useSharedPluginState(pluginInjectionApi, ['table']);
-  const tableStateInternal = tableState;
+  } = useSharedPluginState(api, ['table']);
   return {
-    widthToWidest: tableStateInternal.widthToWidest
+    widthToWidest: tableState === null || tableState === void 0 ? void 0 : tableState.widthToWidest
   };
 });
 export const TableResizer = ({

package/dist/es2019/tablePlugin.js

@@ -4,7 +4,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';
@@ -12,7 +12,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';
@@ -61,7 +60,14 @@ import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getToolbarConfig } from './ui/toolbar';
 const defaultGetEditorFeatureFlags = () => ({});
 const useTableSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  const {
+    mode
+  } = useSharedPluginStateWithSelector(api, ['editorViewMode'], states => {
+    var _states$editorViewMod;
+    return {
+      mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+    };
+  });
   return {
     mode
   };

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

@@ -5,7 +5,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';
@@ -17,7 +17,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';
 const DragHandleComponent = ({
   isDragMenuTarget,
@@ -250,8 +249,16 @@ const DragHandleComponent = ({
   }), previewContainer));
 };
 const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const hoveredColumns = useInternalTablePluginStateSelector(api, 'hoveredColumns');
-  const hoveredRows = useInternalTablePluginStateSelector(api, 'hoveredRows');
+  const {
+    hoveredColumns,
+    hoveredRows
+  } = useSharedPluginStateWithSelector(api, ['table'], 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
+    };
+  });
   return {
     hoveredColumns,
     hoveredRows

package/dist/es2019/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,7 +24,14 @@ const getSelectedColumns = selection => {
   return [];
 };
 const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const selection = useSharedPluginStateSelector(api, 'selection.selection');
+  const {
+    selection
+  } = useSharedPluginStateWithSelector(api, ['selection'], states => {
+    var _states$selectionStat;
+    return {
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+    };
+  });
   return {
     selection
   };

package/dist/es2019/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';
@@ -60,9 +59,16 @@ const DragCornerControlsComponent = ({
   }));
 };
 const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  const {
+    selection
+  } = useSharedPluginStateWithSelector(api, ['selection'], states => {
+    var _states$selectionStat;
+    return {
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+    };
+  });
   return {
-    selection: selectionsSelector
+    selection
   };
 }, api => {
   const {

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

@@ -1,12 +1,18 @@
 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';
 const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  const {
+    selection
+  } = useSharedPluginStateWithSelector(api, ['selection'], states => {
+    var _states$selectionStat;
+    return {
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+    };
+  });
   return {
-    selection: selectionsSelector
+    selection
   };
 }, api => {
   const {

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

@@ -1,8 +1,7 @@
 /* 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';
@@ -277,9 +276,16 @@ export const DragControls = ({
   );
 };
 const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  const {
+    selection
+  } = useSharedPluginStateWithSelector(api, ['selection'], states => {
+    var _states$selectionStat;
+    return {
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+    };
+  });
   return {
-    selection: selectionsSelector
+    selection
   };
 }, api => {
   const {

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

@@ -4,11 +4,17 @@
  */
 // 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';
 const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  const {
+    mode
+  } = useSharedPluginStateWithSelector(api, ['editorViewMode'], states => {
+    var _states$editorViewMod;
+    return {
+      mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+    };
+  });
   return {
     mode
   };

package/dist/es2019/ui/icons/SortingIconWrapper.js

@@ -1,9 +1,15 @@
 import React from 'react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { SortingIcon } from '@atlaskit/editor-common/table';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  const {
+    mode
+  } = useSharedPluginStateWithSelector(api, ['editorViewMode'], states => {
+    var _states$editorViewMod;
+    return {
+      mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+    };
+  });
   return {
     mode
   };