@atlaskit/editor-plugin-table 10.9.19 → 10.9.21

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,

package/dist/es2019/ui/ContentComponent.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import FloatingContextualButton from './FloatingContextualButton';
 import FloatingContextualMenu from './FloatingContextualMenu';
 import FloatingDeleteButton from './FloatingDeleteButton';
@@ -28,72 +27,30 @@ const ContentComponentInternal = ({
   var _api$analytics, _api$accessibilityUti;
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   const ariaNotifyPlugin = api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
-  const resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isResizing = useInternalTablePluginStateSelector(api, 'isResizing', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const tableNode = useInternalTablePluginStateSelector(api, 'tableNode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const tableRef = useInternalTablePluginStateSelector(api, 'tableRef', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const insertColumnButtonIndex = useInternalTablePluginStateSelector(api, 'insertColumnButtonIndex', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
+  const resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId');
+  const resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef');
+  const isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing');
+  const isResizing = useInternalTablePluginStateSelector(api, 'isResizing');
+  const widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest');
+  const tableNode = useInternalTablePluginStateSelector(api, 'tableNode');
+  const targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition');
+  const isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen');
+  const tableRef = useInternalTablePluginStateSelector(api, 'tableRef');
+  const pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig');
+  const insertColumnButtonIndex = useInternalTablePluginStateSelector(api, 'insertColumnButtonIndex');
+  const insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex');
+  const isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled');
+  const isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled');
+  const isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled');
+  const tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget');
+  const isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
   const {
     allowControls
   } = pluginConfig !== null && pluginConfig !== void 0 ? pluginConfig : {};
-  const stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
+  const stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader');
+  const dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection');
+  const dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
+  const isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
   return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
     isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
     editorView: editorView,

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

@@ -5,13 +5,12 @@ import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/browser';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } 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';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugins/utils/merged-cells';
@@ -250,6 +249,23 @@ const DragHandleComponent = ({
     height: previewHeight
   }), previewContainer));
 };
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const hoveredColumns = useInternalTablePluginStateSelector(api, 'hoveredColumns');
+  const hoveredRows = useInternalTablePluginStateSelector(api, 'hoveredRows');
+  return {
+    hoveredColumns,
+    hoveredRows
+  };
+}, api => {
+  const {
+    tableState
+  } = useSharedPluginState(api, ['table']);
+  const tableStateInternal = tableState;
+  return {
+    hoveredColumns: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredColumns,
+    hoveredRows: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredRows
+  };
+});
 const DragHandleComponentWithSharedState = ({
   isDragMenuTarget,
   tableLocalId,
@@ -269,22 +285,9 @@ const DragHandleComponentWithSharedState = ({
   api
 }) => {
   const {
-    tableState
-  } = useSharedPluginState(api, ['table'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-
-  // hoveredColumns
-  const hoveredColumnsSelector = useInternalTablePluginStateSelector(api, 'hoveredColumns', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const hoveredColumns = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredColumnsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns;
-
-  // hoveredRows
-  const hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows;
+    hoveredColumns,
+    hoveredRows
+  } = useSharedState(api);
   return /*#__PURE__*/React.createElement(DragHandleComponent, {
     isDragMenuTarget: isDragMenuTarget,
     tableLocalId: tableLocalId,

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

@@ -1,14 +1,13 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { useCallback, useMemo, useRef } from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } 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';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../pm-plugins/commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
@@ -25,6 +24,19 @@ const getSelectedColumns = selection => {
   }
   return [];
 };
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const selection = useSharedPluginStateSelector(api, 'selection.selection');
+  return {
+    selection
+  };
+}, api => {
+  const {
+    selectionState
+  } = useSharedPluginState(api, ['selection']);
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 export const ColumnControls = ({
   editorView,
   tableActive,
@@ -44,17 +56,9 @@ export const ColumnControls = ({
 }) => {
   var _colWidths$map$join;
   const columnControlsRef = useRef(null);
-
-  // selection
   const {
-    selectionState
-  } = useSharedPluginState(api, ['selection'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+    selection
+  } = useSharedState(api);
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width =>
   // when there is sticky header, a `margin-right: -1px` applied to `tr.sticky th` so it causes colWidths to be 1px wider
   // we need to reduce the width by 1px to avoid misalignment of column controls.

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

@@ -1,11 +1,10 @@
 import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { TableCssClassName as ClassName } from '../../../types';
 const DragCornerControlsComponent = ({
@@ -60,6 +59,19 @@ const DragCornerControlsComponent = ({
     className: ClassName.DRAG_CORNER_BUTTON_INNER
   }));
 };
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  return {
+    selection: selectionsSelector
+  };
+}, api => {
+  const {
+    selectionState
+  } = useSharedPluginState(api, ['selection']);
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 const DragCornerControlsComponentWithSelection = ({
   editorView,
   isInDanger,
@@ -69,16 +81,9 @@ const DragCornerControlsComponentWithSelection = ({
   },
   api
 }) => {
-  // selection
   const {
-    selectionState
-  } = useSharedPluginState(api, ['selection'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+    selection
+  } = useSharedState(api);
   const handleOnClick = () => {
     const {
       state,

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

@@ -1,9 +1,21 @@
 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CornerControls } from './CornerControls/ClassicCornerControls';
 import { RowControls } from './RowControls/ClassicControls';
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  return {
+    selection: selectionsSelector
+  };
+}, api => {
+  const {
+    selectionState
+  } = useSharedPluginState(api, ['selection']);
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 export const FloatingControlsWithSelection = ({
   editorView,
   tableRef,
@@ -18,16 +30,9 @@ export const FloatingControlsWithSelection = ({
   tableActive,
   api
 }) => {
-  // selection
   const {
-    selectionState
-  } = useSharedPluginState(api, ['selection'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+    selection
+  } = useSharedState(api);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
     editorView: editorView,
     tableRef: tableRef,

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

@@ -1,13 +1,12 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } 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 { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
@@ -277,6 +276,19 @@ export const DragControls = ({
     }))), rowHandles())
   );
 };
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  return {
+    selection: selectionsSelector
+  };
+}, api => {
+  const {
+    selectionState
+  } = useSharedPluginState(api, ['selection']);
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 export const DragControlsWithSelection = ({
   editorView,
   tableRef,
@@ -293,16 +305,9 @@ export const DragControlsWithSelection = ({
   updateCellHoverLocation,
   api
 }) => {
-  // selection
   const {
-    selectionState
-  } = useSharedPluginState(api, ['selection'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+    selection
+  } = useSharedState(api);
   return /*#__PURE__*/React.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,

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

@@ -4,25 +4,30 @@
  */
 // 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 { 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { tableStyles } from './common-styles';
+const useSharedState = 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
+  };
+});
 export const GlobalStylesWrapper = ({
   featureFlags,
   isDragAndDropEnabledOption,
   api
 }) => {
-  // mode
   const {
-    editorViewModeState
-  } = useSharedPluginState(api, ['editorViewMode'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  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
+  } = useSharedState(api);
   const isLivePageViewMode = mode === 'view';
   return jsx(Global, {
     styles: tableStyles({

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

@@ -1,20 +1,24 @@
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { SortingIcon } from '@atlaskit/editor-common/table';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-export const SortingIconWrapper = props => {
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  return {
+    mode
+  };
+}, api => {
   const {
     editorViewModeState
-  } = useSharedPluginState(props.api, ['editorViewMode'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-
-  // mode
-  const modeSelector = useSharedPluginStateSelector(props.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;
+  } = useSharedPluginState(api, ['editorViewMode']);
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
+export const SortingIconWrapper = props => {
+  const {
+    mode
+  } = useSharedState(props.api);
   if (mode === 'edit') {
     return null;
   }

package/dist/es2019/ui/toolbar.js

@@ -464,6 +464,10 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
       onBlur: clearHoverSelection()
     });
     const shouldGroupWithoutSeparators = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6');
+
+    // testId is required to show focus on trigger button on ESC key press
+    // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
+    const overflowDropdownTestId = fg('platform_editor_controls_patch_8') ? 'table-overflow-dropdown-trigger' : undefined;
     return {
       title: toolbarTitle,
       getDomRef,
@@ -484,6 +488,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
         fullHeight: true
       }, {
         type: 'overflow-dropdown',
+        testId: overflowDropdownTestId,
         dropdownWidth: 220,
         options: [{
           type: 'custom',