@atlaskit/editor-plugin-table 10.9.20 → 10.9.21

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

@@ -13,7 +13,6 @@ 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../../pm-plugins/commands");
 var _types = require("../../../types");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -61,21 +60,26 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     className: _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER
   }));
 };
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var selectionsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
+  return {
+    selection: selectionsSelector
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 var DragCornerControlsComponentWithSelection = function DragCornerControlsComponentWithSelection(_ref2) {
   var editorView = _ref2.editorView,
     isInDanger = _ref2.isInDanger,
     isResizing = _ref2.isResizing,
     formatMessage = _ref2.intl.formatMessage,
     api = _ref2.api;
-  // selection
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    selectionState = _useSharedPluginState.selectionState;
-  var selectionsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selection = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+  var _useSharedState = useSharedState(api),
+    selection = _useSharedState.selection;
   var handleOnClick = function handleOnClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;

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

@@ -8,9 +8,20 @@ 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 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');
+  return {
+    selection: selectionsSelector
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 var FloatingControlsWithSelection = exports.FloatingControlsWithSelection = function FloatingControlsWithSelection(_ref) {
   var editorView = _ref.editorView,
     tableRef = _ref.tableRef,
@@ -24,15 +35,8 @@ var FloatingControlsWithSelection = exports.FloatingControlsWithSelection = func
     selectRow = _ref.selectRow,
     tableActive = _ref.tableActive,
     api = _ref.api;
-  // selection
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    selectionState = _useSharedPluginState.selectionState;
-  var selectionsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selection = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+  var _useSharedState = useSharedState(api),
+    selection = _useSharedState.selection;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ClassicCornerControls.CornerControls, {
     editorView: editorView,
     tableRef: tableRef,

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

@@ -14,7 +14,6 @@ var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../../pm-plugins/commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
 var _pluginFactory = require("../../../pm-plugins/plugin-factory");
@@ -289,6 +288,18 @@ var DragControls = exports.DragControls = function DragControls(_ref) {
     }), rowHandles())
   );
 };
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var selectionsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
+  return {
+    selection: selectionsSelector
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 var DragControlsWithSelection = exports.DragControlsWithSelection = function DragControlsWithSelection(_ref5) {
   var editorView = _ref5.editorView,
     tableRef = _ref5.tableRef,
@@ -304,15 +315,8 @@ var DragControlsWithSelection = exports.DragControlsWithSelection = function Dra
     selectRows = _ref5.selectRows,
     updateCellHoverLocation = _ref5.updateCellHoverLocation,
     api = _ref5.api;
-  // selection
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    selectionState = _useSharedPluginState.selectionState;
-  var selectionsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selection = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+  var _useSharedState = useSharedState(api),
+    selection = _useSharedState.selection;
   return /*#__PURE__*/_react.default.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,

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

@@ -7,7 +7,6 @@ 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commonStyles = require("./common-styles");
 /**
  * @jsxRuntime classic
@@ -15,19 +14,24 @@ 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');
+  return {
+    mode: mode
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
   var featureFlags = _ref.featureFlags,
     isDragAndDropEnabledOption = _ref.isDragAndDropEnabledOption,
     api = _ref.api;
-  // mode
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
-  var modeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  var _useSharedState = useSharedState(api),
+    mode = _useSharedState.mode;
   var isLivePageViewMode = mode === 'view';
   return (0, _react.jsx)(_react.Global, {
     styles: (0, _commonStyles.tableStyles)({

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

@@ -9,18 +9,21 @@ 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var SortingIconWrapper = exports.SortingIconWrapper = function SortingIconWrapper(props) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.api, ['editorViewMode'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var mode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode');
+  return {
+    mode: mode
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode']),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
-
-  // mode
-  var modeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(props.api, 'editorViewMode.mode', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
+var SortingIconWrapper = exports.SortingIconWrapper = function SortingIconWrapper(props) {
+  var _useSharedState = useSharedState(props.api),
+    mode = _useSharedState.mode;
   if (mode === 'edit') {
     return null;
   }

package/dist/es2019/nodeviews/TableComponentWithSharedState.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { findTable } from '@atlaskit/editor-tables';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -9,6 +9,80 @@ 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');
+
+  // 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');
+  return {
+    tableState: undefined,
+    widthState: undefined,
+    isTableResizing,
+    isHeaderColumnEnabled,
+    isHeaderRowEnabled,
+    ordering,
+    isResizing,
+    isInDanger,
+    hoveredCell,
+    hoveredRows,
+    isTableHovered,
+    isWholeTableInDanger,
+    isFullscreen,
+    selection,
+    mode,
+    width,
+    lineLength
+  };
+}, api => {
+  const {
+    widthState,
+    tableState,
+    mediaState,
+    selectionState,
+    editorViewModeState
+  } = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']);
+  const tableStateInternal = tableState;
+  return {
+    tableState,
+    widthState,
+    isTableResizing: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isTableResizing,
+    isHeaderColumnEnabled: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isHeaderColumnEnabled,
+    isHeaderRowEnabled: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isHeaderRowEnabled,
+    ordering: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.ordering,
+    isResizing: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isResizing,
+    isInDanger: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isInDanger,
+    hoveredCell: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredCell,
+    hoveredRows: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredRows,
+    isTableHovered: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isTableHovered,
+    isWholeTableInDanger: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isWholeTableInDanger,
+    isFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+    width: widthState === null || widthState === void 0 ? void 0 : widthState.width,
+    lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength
+  };
+});
+
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
@@ -28,89 +102,29 @@ export const TableComponentWithSharedState = ({
   allowTableResizing
 }) => {
   const {
-    widthState,
     tableState,
-    mediaState,
-    selectionState,
-    editorViewModeState
-  } = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const isTableResizingSelector = useInternalTablePluginStateSelector(api, 'isTableResizing', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isHeaderColumnEnabledSelector = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isHeaderRowEnabledSelector = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const orderingSelector = useInternalTablePluginStateSelector(api, 'ordering', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isResizingSelector = useInternalTablePluginStateSelector(api, 'isResizing', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isInDangerSelector = useInternalTablePluginStateSelector(api, 'isInDanger', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const hoveredCellSelector = useInternalTablePluginStateSelector(api, 'hoveredCell', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isTableHoveredSelector = useInternalTablePluginStateSelector(api, 'isTableHovered', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isWholeTableInDangerSelector = useInternalTablePluginStateSelector(api, 'isWholeTableInDanger', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-
-  // mediaState
-  const isFullscreenSelector = useSharedPluginStateSelector(api, 'media.isFullscreen', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isFullscreen = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isFullscreenSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen;
-
-  // selectionState
-  const selectionSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
-
-  // editorViewModeState
-  const editorViewModeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+    widthState,
+    mode,
+    hoveredCell,
+    hoveredRows,
+    isFullscreen,
+    isHeaderColumnEnabled,
+    isHeaderRowEnabled,
+    isInDanger,
+    isResizing,
+    isTableHovered,
+    isTableResizing,
+    isWholeTableInDanger,
+    lineLength,
+    ordering,
+    selection,
+    width
+  } = useSharedState(api);
   const isLivePageViewMode = mode === 'view';
-
-  // widthState
-  const widthSelector = useSharedPluginStateSelector(api, 'width.width', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const width = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
-  const lineLengthSelector = useSharedPluginStateSelector(api, 'width.lineLength', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
   if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
     return null;
   }
 
-  // tableState
-  const isTableResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableResizingSelector : tableState.isTableResizing;
-  const isHeaderColumnEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isHeaderColumnEnabledSelector : tableState.isHeaderColumnEnabled;
-  const isHeaderRowEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isHeaderRowEnabledSelector : tableState.isHeaderRowEnabled;
-  const ordering = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? orderingSelector : tableState.ordering;
-  const isResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isResizingSelector : tableState.isResizing;
-  const isInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInDangerSelector : tableState.isInDanger;
-  const hoveredCell = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredCellSelector : tableState.hoveredCell;
-  const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState.hoveredRows;
-  const isTableHovered = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableHoveredSelector : tableState.isTableHovered;
-  const isWholeTableInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isWholeTableInDangerSelector : tableState.isWholeTableInDanger;
-
   /**
    *  ED-19810
    *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch

package/dist/es2019/nodeviews/TableContainer.js

@@ -2,7 +2,7 @@ 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 { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } 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';
@@ -34,6 +34,24 @@ 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');
+  return {
+    tableState: undefined,
+    isFullWidthModeEnabled,
+    wasFullWidthModeEnabled
+  };
+}, pluginInjectionApi => {
+  const {
+    tableState
+  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  return {
+    tableState,
+    isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
+    wasFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled
+  };
+});
 const AlignmentTableContainer = ({
   node,
   children,
@@ -43,22 +61,10 @@ const AlignmentTableContainer = ({
 }) => {
   const alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
   const {
-    tableState
-  } = useSharedPluginState(pluginInjectionApi, ['table'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-
-  // isFullWidthModeEnabled
-  const isTableFullWidthModeEnabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
-
-  // wasFullWidthModeEnabled
-  const wasFullWidthModeEnabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.wasFullWidthModeEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const wasFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? wasFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled;
+    tableState,
+    isFullWidthModeEnabled,
+    wasFullWidthModeEnabled
+  } = useAlignmentStableContainerSharedState(pluginInjectionApi);
   useEffect(() => {
     if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
       return;
@@ -120,6 +126,23 @@ const AlignmentTableContainerWrapper = ({
     editorView: editorView
   }, children);
 };
+const useResizeableTableContainerSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const isFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled');
+  const mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    isFullWidthModeEnabled,
+    mode
+  };
+}, pluginInjectionApi => {
+  const {
+    tableState,
+    editorViewModeState
+  } = useSharedPluginState(pluginInjectionApi, ['table', 'editorViewMode']);
+  return {
+    isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   children,
   className,
@@ -143,16 +166,9 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const [resizing, setIsResizing] = useState(false);
   const {
-    tableState
-  } = useSharedPluginState(pluginInjectionApi, ['table'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-
-  // isFullWidthModeEnabled
-  const isFullWidthModeEnabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
+    isFullWidthModeEnabled,
+    mode
+  } = useResizeableTableContainerSharedState(pluginInjectionApi);
   const updateContainerHeight = useCallback(height => {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -206,17 +222,6 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
   const tableWidth = getTableContainerWidth(node);
-  const {
-    editorViewModeState
-  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-
-  // mode
-  const modeSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   let responsiveContainerWidth = 0;
   const resizeHandleSpacing = 12;
   // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
@@ -267,7 +272,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     onResizeStop,
     isCommentEditor
   };
-  const isLivePageViewMode = (editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  const isLivePageViewMode = mode === 'view';
   return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
     isTableAlignmentEnabled: isTableAlignmentEnabled,
     node: node,

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 { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } 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';
@@ -13,7 +13,6 @@ import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { updateWidthToWidest } from '../pm-plugins/commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -92,6 +91,20 @@ 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');
+  return {
+    widthToWidest
+  };
+}, pluginInjectionApi => {
+  const {
+    tableState
+  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  const tableStateInternal = tableState;
+  return {
+    widthToWidest: tableStateInternal.widthToWidest
+  };
+});
 export const TableResizer = ({
   children,
   width,
@@ -125,16 +138,8 @@ export const TableResizer = ({
   const areResizeMetaKeysPressed = useRef(false);
   const resizerRef = useRef(null);
   const {
-    tableState
-  } = useSharedPluginState(pluginInjectionApi, ['table'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-
-  // widthToWidest
-  const widthToWidestSelector = useInternalTablePluginStateSelector(pluginInjectionApi, 'widthToWidest', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const widthToWidest = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthToWidestSelector : tableState.widthToWidest;
+    widthToWidest
+  } = useSharedState(pluginInjectionApi);
 
   // used to reposition tooltip when table is resizing via keyboard
   const updateTooltip = React.useRef();

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 { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } 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';
@@ -59,6 +59,19 @@ import { SizeSelector } from './ui/SizeSelector';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getToolbarConfig } from './ui/toolbar';
 const defaultGetEditorFeatureFlags = () => ({});
+const useTableSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  return {
+    mode
+  };
+}, api => {
+  const {
+    editorViewModeState
+  } = useSharedPluginState(api, ['editorViewMode']);
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
@@ -681,16 +694,8 @@ const tablePlugin = ({
       editorView
     }) {
       const {
-        editorViewModeState
-      } = useSharedPluginState(api, ['editorViewMode'], {
-        disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-      });
-
-      // mode
-      const modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
-        disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-      });
-      const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+        mode
+      } = useTableSharedState(api);
       useEffect(() => {
         const {
           state,