@atlaskit/editor-plugin-table 10.9.3 → 10.9.5

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

@@ -2,10 +2,12 @@
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { 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';
@@ -291,9 +293,16 @@ export const DragControlsWithSelection = ({
   updateCellHoverLocation,
   api
 }) => {
+  // selection
   const {
     selectionState
-  } = useSharedPluginState(api, ['selection']);
+  } = 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;
   return /*#__PURE__*/React.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,
@@ -309,6 +318,6 @@ export const DragControlsWithSelection = ({
     selectRows: selectRows,
     updateCellHoverLocation: updateCellHoverLocation,
     api: api,
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+    selection: selection
   });
 };

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

@@ -1,11 +1,21 @@
 import React from 'react';
 import { 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 {
     editorViewModeState
-  } = useSharedPluginState(props.api, ['editorViewMode']);
-  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+  } = 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;
+  if (mode === 'edit') {
     return null;
   }
   // Ignored via go/ees005

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import { 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';
 import TableComponent from './TableComponent';
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
+var useSharedTablePluginStateSelector = function useSharedTablePluginStateSelector(api, key) {
+  var value = useSharedPluginStateSelector(api, "table.".concat(key), {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  return value;
+};
+
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
@@ -23,27 +32,68 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     forwardRef = _ref.forwardRef,
     allowTableAlignment = _ref.allowTableAlignment,
     allowTableResizing = _ref.allowTableResizing;
-  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']),
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     widthState = _useSharedPluginState.widthState,
     tableState = _useSharedPluginState.tableState,
     mediaState = _useSharedPluginState.mediaState,
     selectionState = _useSharedPluginState.selectionState,
     editorViewModeState = _useSharedPluginState.editorViewModeState;
-  var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  if (!tableState) {
+  var isTableResizingSelector = useSharedTablePluginStateSelector(api, 'isTableResizing');
+  var isHeaderColumnEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
+  var isHeaderRowEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
+  var orderingSelector = useSharedTablePluginStateSelector(api, 'ordering');
+  var isResizingSelector = useSharedTablePluginStateSelector(api, 'isResizing');
+  var isInDangerSelector = useSharedTablePluginStateSelector(api, 'isInDanger');
+  var hoveredCellSelector = useSharedTablePluginStateSelector(api, 'hoveredCell');
+  var hoveredRowsSelector = useSharedTablePluginStateSelector(api, 'hoveredRows');
+  var isTableHoveredSelector = useSharedTablePluginStateSelector(api, 'isTableHovered');
+  var isWholeTableInDangerSelector = useSharedTablePluginStateSelector(api, 'isWholeTableInDanger');
+
+  // mediaState
+  var isFullscreenSelector = useSharedPluginStateSelector(api, 'media.isFullscreen', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isFullscreen = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isFullscreenSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen;
+
+  // selectionState
+  var selectionSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+
+  // editorViewModeState
+  var editorViewModeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  var isLivePageViewMode = mode === 'view';
+
+  // widthState
+  var widthSelector = useSharedPluginStateSelector(api, 'width.width', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var width = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
+  var lineLengthSelector = useSharedPluginStateSelector(api, 'width.lineLength', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var 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;
   }
-  var _ref2 = tableState,
-    isTableResizing = _ref2.isTableResizing,
-    isHeaderColumnEnabled = _ref2.isHeaderColumnEnabled,
-    isHeaderRowEnabled = _ref2.isHeaderRowEnabled,
-    ordering = _ref2.ordering,
-    isResizing = _ref2.isResizing,
-    isInDanger = _ref2.isInDanger,
-    hoveredCell = _ref2.hoveredCell,
-    hoveredRows = _ref2.hoveredRows,
-    isTableHovered = _ref2.isTableHovered,
-    isWholeTableInDanger = _ref2.isWholeTableInDanger;
+
+  // tableState
+  var isTableResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableResizingSelector : tableState.isTableResizing;
+  var isHeaderColumnEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isHeaderColumnEnabledSelector : tableState.isHeaderColumnEnabled;
+  var isHeaderRowEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isHeaderRowEnabledSelector : tableState.isHeaderRowEnabled;
+  var ordering = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? orderingSelector : tableState.ordering;
+  var isResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isResizingSelector : tableState.isResizing;
+  var isInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInDangerSelector : tableState.isInDanger;
+  var hoveredCell = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredCellSelector : tableState.hoveredCell;
+  var hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState.hoveredRows;
+  var isTableHovered = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableHoveredSelector : tableState.isTableHovered;
+  var isWholeTableInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isWholeTableInDangerSelector : tableState.isWholeTableInDanger;
 
   /**
    *  ED-19810
@@ -64,7 +114,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     allowColumnResizing: allowColumnResizing,
     eventDispatcher: eventDispatcher,
     getPos: getPos,
-    isMediaFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
+    isMediaFullscreen: isFullscreen,
     options: options,
     allowControls: allowControls,
     isHeaderRowEnabled: isHeaderRowEnabled,
@@ -76,11 +126,14 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     tableActive: tableActive && !isLivePageViewMode,
     ordering: ordering,
     isResizing: isResizing,
-    getNode: getNode
+    getNode: getNode,
+    containerWidth: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? {
+      width: width !== null && width !== void 0 ? width : 0,
+      lineLength: lineLength
+    } :
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    containerWidth: widthState,
+    widthState,
     contentDOM: forwardRef,
     getEditorFeatureFlags: getEditorFeatureFlags,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -90,6 +143,6 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     hoveredCell: hoveredCell,
     isTableHovered: isTableHovered,
     isWholeTableInDanger: isWholeTableInDanger,
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+    selection: selection
   });
 };

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

@@ -3,10 +3,12 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { 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';
@@ -41,8 +43,16 @@ export var ColumnControls = function ColumnControls(_ref) {
     getScrollOffset = _ref.getScrollOffset,
     api = _ref.api;
   var columnControlsRef = useRef(null);
-  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+
+  // selection
+  var _useSharedPluginState = useSharedPluginState(api, ['selection'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     selectionState = _useSharedPluginState.selectionState;
+  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return (
       // when there is sticky header, a `margin-right: -1px` applied to `tr.sticky th` so it causes colWidths to be 1px wider
@@ -53,7 +63,7 @@ export var ColumnControls = function ColumnControls(_ref) {
   // TODO: ED-26961 - reusing getRowsParams here because it's generic enough to work for columns -> rename
   var columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
-  var selectedColIndexes = getSelectedColumns((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) || editorView.state.selection);
+  var selectedColIndexes = getSelectedColumns(selection || editorView.state.selection);
   var firstRow = tableRef.querySelector('tr');
   var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   var rowControlStickyTop = 45;

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

@@ -3,7 +3,9 @@ import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 import { 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';
 var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
@@ -55,8 +57,15 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     isResizing = _ref2.isResizing,
     formatMessage = _ref2.intl.formatMessage,
     api = _ref2.api;
-  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+  // selection
+  var _useSharedPluginState = useSharedPluginState(api, ['selection'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     selectionState = _useSharedPluginState.selectionState;
+  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
   var handleOnClick = function handleOnClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;
@@ -68,15 +77,15 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     clearHoverSelection()(state, dispatch);
   };
   var isActive = useMemo(function () {
-    if (!(selectionState !== null && selectionState !== void 0 && selectionState.selection)) {
+    if (!selection) {
       return;
     }
-    var table = findTable(selectionState.selection);
+    var table = findTable(selection);
     if (!table) {
       return false;
     }
-    return isTableSelected(selectionState.selection);
-  }, [selectionState]);
+    return isTableSelected(selection);
+  }, [selection]);
   if (isResizing) {
     return null;
   }

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import { 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';
 export var FloatingControlsWithSelection = function FloatingControlsWithSelection(_ref) {
@@ -15,8 +17,15 @@ export var FloatingControlsWithSelection = function FloatingControlsWithSelectio
     selectRow = _ref.selectRow,
     tableActive = _ref.tableActive,
     api = _ref.api;
-  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+  // selection
+  var _useSharedPluginState = useSharedPluginState(api, ['selection'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     selectionState = _useSharedPluginState.selectionState;
+  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
     editorView: editorView,
     tableRef: tableRef,
@@ -27,7 +36,7 @@ export var FloatingControlsWithSelection = function FloatingControlsWithSelectio
     hoveredRows: hoveredRows,
     stickyTop: tableActive ? stickyTop : undefined
   }), /*#__PURE__*/React.createElement(RowControls, {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
+    selection: selection,
     editorView: editorView,
     tableRef: tableRef,
     hoverRows: hoverRows,

package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js

@@ -138,7 +138,7 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
           }
         }, hasHeaderRow ? index > 0 ? index : null : index + 1) :
         /*#__PURE__*/
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
         React.createElement("div", {
           // Ignored via go/ees005
           // eslint-disable-next-line react/no-array-index-key

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

@@ -3,10 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { 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';
@@ -292,8 +294,15 @@ export var DragControlsWithSelection = function DragControlsWithSelection(_ref5)
     selectRows = _ref5.selectRows,
     updateCellHoverLocation = _ref5.updateCellHoverLocation,
     api = _ref5.api;
-  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+  // selection
+  var _useSharedPluginState = useSharedPluginState(api, ['selection'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     selectionState = _useSharedPluginState.selectionState;
+  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
   return /*#__PURE__*/React.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,
@@ -309,6 +318,6 @@ export var DragControlsWithSelection = function DragControlsWithSelection(_ref5)
     selectRows: selectRows,
     updateCellHoverLocation: updateCellHoverLocation,
     api: api,
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+    selection: selection
   });
 };

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

@@ -1,10 +1,20 @@
 import React from 'react';
 import { 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 var SortingIconWrapper = function SortingIconWrapper(props) {
-  var _useSharedPluginState = useSharedPluginState(props.api, ['editorViewMode']),
+  var _useSharedPluginState = useSharedPluginState(props.api, ['editorViewMode'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
-  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+
+  // mode
+  var modeSelector = useSharedPluginStateSelector(props.api, 'editorViewMode.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  if (mode === 'edit') {
     return null;
   }
   // Ignored via go/ees005

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.9.3",
+	"version": "10.9.5",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -3,11 +3,18 @@ import React from 'react';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import type { GetEditorFeatureFlags, getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type {
+	ExtractInjectionAPI,
+	GetEditorFeatureFlags,
+	getPosHandlerNode,
+} from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
+import { TablePlugin } from '../tablePluginType';
 import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
 
 import TableComponent from './TableComponent';
@@ -33,6 +40,16 @@ type TableComponentWithSharedStateProps = {
 	allowTableResizing?: boolean;
 };
 
+const useSharedTablePluginStateSelector = <K extends keyof TableSharedStateInternal>(
+	api: ExtractInjectionAPI<TablePlugin> | undefined,
+	key: K,
+) => {
+	const value = useSharedPluginStateSelector(api, `table.${key}` as never, {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	}) as TableSharedStateInternal[K];
+	return value;
+};
+
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
@@ -52,26 +69,108 @@ export const TableComponentWithSharedState = ({
 	allowTableResizing,
 }: TableComponentWithSharedStateProps) => {
 	const { widthState, tableState, mediaState, selectionState, editorViewModeState } =
-		useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']);
+		useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode'], {
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+		});
+
+	const isTableResizingSelector = useSharedTablePluginStateSelector(api, 'isTableResizing');
+	const isHeaderColumnEnabledSelector = useSharedTablePluginStateSelector(
+		api,
+		'isHeaderColumnEnabled',
+	);
+	const isHeaderRowEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
+	const orderingSelector = useSharedTablePluginStateSelector(api, 'ordering');
+	const isResizingSelector = useSharedTablePluginStateSelector(api, 'isResizing');
+	const isInDangerSelector = useSharedTablePluginStateSelector(api, 'isInDanger');
+	const hoveredCellSelector = useSharedTablePluginStateSelector(api, 'hoveredCell');
+	const hoveredRowsSelector = useSharedTablePluginStateSelector(api, 'hoveredRows');
+	const isTableHoveredSelector = useSharedTablePluginStateSelector(api, 'isTableHovered');
+	const isWholeTableInDangerSelector = useSharedTablePluginStateSelector(
+		api,
+		'isWholeTableInDanger',
+	);
+
+	// mediaState
+	const isFullscreenSelector = useSharedPluginStateSelector(api, 'media.isFullscreen', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isFullscreen = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? isFullscreenSelector
+		: mediaState?.isFullscreen;
+
+	// selectionState
+	const selectionSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? selectionSelector
+		: selectionState?.selection;
+
+	// editorViewModeState
+	const editorViewModeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? editorViewModeSelector
+		: editorViewModeState?.mode;
+	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?.width;
 
-	const isLivePageViewMode = editorViewModeState?.mode === 'view';
+	const lineLengthSelector = useSharedPluginStateSelector(api, 'width.lineLength', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? lineLengthSelector
+		: widthState?.lineLength;
 
-	if (!tableState) {
+	if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
 		return null;
 	}
 
-	const {
-		isTableResizing,
-		isHeaderColumnEnabled,
-		isHeaderRowEnabled,
-		ordering,
-		isResizing,
-		isInDanger,
-		hoveredCell,
-		hoveredRows,
-		isTableHovered,
-		isWholeTableInDanger,
-	} = tableState as TableSharedStateInternal;
+	// tableState
+	const isTableResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? isTableResizingSelector
+		: (tableState as TableSharedStateInternal).isTableResizing;
+	const isHeaderColumnEnabled = editorExperiment(
+		'platform_editor_usesharedpluginstateselector',
+		true,
+	)
+		? isHeaderColumnEnabledSelector
+		: (tableState as TableSharedStateInternal).isHeaderColumnEnabled;
+	const isHeaderRowEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? isHeaderRowEnabledSelector
+		: (tableState as TableSharedStateInternal).isHeaderRowEnabled;
+	const ordering = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? orderingSelector
+		: (tableState as TableSharedStateInternal).ordering;
+	const isResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? isResizingSelector
+		: (tableState as TableSharedStateInternal).isResizing;
+	const isInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? isInDangerSelector
+		: (tableState as TableSharedStateInternal).isInDanger;
+	const hoveredCell = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? hoveredCellSelector
+		: (tableState as TableSharedStateInternal).hoveredCell;
+	const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? hoveredRowsSelector
+		: (tableState as TableSharedStateInternal).hoveredRows;
+	const isTableHovered = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? isTableHoveredSelector
+		: (tableState as TableSharedStateInternal).isTableHovered;
+	const isWholeTableInDanger = editorExperiment(
+		'platform_editor_usesharedpluginstateselector',
+		true,
+	)
+		? isWholeTableInDangerSelector
+		: (tableState as TableSharedStateInternal).isWholeTableInDanger;
 
 	/**
 	 *  ED-19810
@@ -101,7 +200,7 @@ export const TableComponentWithSharedState = ({
 			allowColumnResizing={allowColumnResizing}
 			eventDispatcher={eventDispatcher}
 			getPos={getPos}
-			isMediaFullscreen={mediaState?.isFullscreen}
+			isMediaFullscreen={isFullscreen}
 			options={options}
 			allowControls={allowControls}
 			isHeaderRowEnabled={isHeaderRowEnabled}
@@ -114,9 +213,16 @@ export const TableComponentWithSharedState = ({
 			ordering={ordering}
 			isResizing={isResizing}
 			getNode={getNode}
-			// Ignored via go/ees005
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			containerWidth={widthState!}
+			containerWidth={
+				editorExperiment('platform_editor_usesharedpluginstateselector', true)
+					? {
+							width: width ?? 0,
+							lineLength,
+						}
+					: // Ignored via go/ees005
+						// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+						widthState!
+			}
 			contentDOM={forwardRef}
 			getEditorFeatureFlags={getEditorFeatureFlags}
 			dispatchAnalyticsEvent={dispatchAnalyticsEvent}
@@ -126,7 +232,7 @@ export const TableComponentWithSharedState = ({
 			hoveredCell={hoveredCell}
 			isTableHovered={isTableHovered}
 			isWholeTableInDanger={isWholeTableInDanger}
-			selection={selectionState?.selection}
+			selection={selection}
 		/>
 	);
 };