@atlaskit/editor-plugin-table 10.9.3 → 10.9.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 10.9.5
+
+### Patch Changes
+
+- [#145710](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145710)
+  [`0cccd72c0228f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0cccd72c0228f) -
+  ED-27559 Enable useSharedPluginStateSelector in Table
+
+## 10.9.4
+
+### Patch Changes
+
+- [#145762](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145762)
+  [`e6f1c6c538e39`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e6f1c6c538e39) -
+  Enable useSharedPluginStateSelector in Table
+
 ## 10.9.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponentWithSharedState.js

@@ -7,11 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.TableComponentWithSharedState = 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 _editorTables = require("@atlaskit/editor-tables");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
+var useSharedTablePluginStateSelector = function useSharedTablePluginStateSelector(api, key) {
+  var value = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, "table.".concat(key), {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  return value;
+};
+
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
@@ -29,27 +38,68 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     forwardRef = _ref.forwardRef,
     allowTableAlignment = _ref.allowTableAlignment,
     allowTableResizing = _ref.allowTableResizing;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection', 'editorViewMode']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection', 'editorViewMode'], {
+      disabled: (0, _experiments.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 = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.isFullscreen', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isFullscreen = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isFullscreenSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen;
+
+  // selectionState
+  var selectionSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selection = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectionSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+
+  // editorViewModeState
+  var editorViewModeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  var isLivePageViewMode = mode === 'view';
+
+  // widthState
+  var widthSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'width.width', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var width = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
+  var lineLengthSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'width.lineLength', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var lineLength = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
+  if ((0, _experiments.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 = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isTableResizingSelector : tableState.isTableResizing;
+  var isHeaderColumnEnabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isHeaderColumnEnabledSelector : tableState.isHeaderColumnEnabled;
+  var isHeaderRowEnabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isHeaderRowEnabledSelector : tableState.isHeaderRowEnabled;
+  var ordering = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? orderingSelector : tableState.ordering;
+  var isResizing = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isResizingSelector : tableState.isResizing;
+  var isInDanger = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isInDangerSelector : tableState.isInDanger;
+  var hoveredCell = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? hoveredCellSelector : tableState.hoveredCell;
+  var hoveredRows = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState.hoveredRows;
+  var isTableHovered = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isTableHoveredSelector : tableState.isTableHovered;
+  var isWholeTableInDanger = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isWholeTableInDangerSelector : tableState.isWholeTableInDanger;
 
   /**
    *  ED-19810
@@ -70,7 +120,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     allowColumnResizing: allowColumnResizing,
     eventDispatcher: eventDispatcher,
     getPos: getPos,
-    isMediaFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
+    isMediaFullscreen: isFullscreen,
     options: options,
     allowControls: allowControls,
     isHeaderRowEnabled: isHeaderRowEnabled,
@@ -82,11 +132,14 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     tableActive: tableActive && !isLivePageViewMode,
     ordering: ordering,
     isResizing: isResizing,
-    getNode: getNode
+    getNode: getNode,
+    containerWidth: (0, _experiments.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,
@@ -96,6 +149,6 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     hoveredCell: hoveredCell,
     isTableHovered: isTableHovered,
     isWholeTableInDanger: isWholeTableInDanger,
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+    selection: selection
   });
 };

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

@@ -8,10 +8,12 @@ exports.ColumnControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../../pm-plugins/commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
@@ -50,8 +52,16 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     getScrollOffset = _ref.getScrollOffset,
     api = _ref.api;
   var columnControlsRef = (0, _react.useRef)(null);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+
+  // 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 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
@@ -62,7 +72,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   // TODO: ED-26961 - reusing getRowsParams here because it's generic enough to work for columns -> rename
   var columnParams = (0, _rowControls.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/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -11,7 +11,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _reactIntlNext = require("react-intl-next");
 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); }
@@ -65,8 +67,15 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     isResizing = _ref2.isResizing,
     formatMessage = _ref2.intl.formatMessage,
     api = _ref2.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+  // 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 handleOnClick = function handleOnClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;
@@ -78,15 +87,15 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     (0, _commands.clearHoverSelection)()(state, dispatch);
   };
   var isActive = (0, _react.useMemo)(function () {
-    if (!(selectionState !== null && selectionState !== void 0 && selectionState.selection)) {
+    if (!selection) {
       return;
     }
-    var table = (0, _utils.findTable)(selectionState.selection);
+    var table = (0, _utils.findTable)(selection);
     if (!table) {
       return false;
     }
-    return (0, _utils.isTableSelected)(selectionState.selection);
-  }, [selectionState]);
+    return (0, _utils.isTableSelected)(selection);
+  }, [selection]);
   if (isResizing) {
     return null;
   }

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 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 FloatingControlsWithSelection = exports.FloatingControlsWithSelection = function FloatingControlsWithSelection(_ref) {
@@ -22,8 +24,15 @@ var FloatingControlsWithSelection = exports.FloatingControlsWithSelection = func
     selectRow = _ref.selectRow,
     tableActive = _ref.tableActive,
     api = _ref.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+  // 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;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ClassicCornerControls.CornerControls, {
     editorView: editorView,
     tableRef: tableRef,
@@ -34,7 +43,7 @@ var FloatingControlsWithSelection = exports.FloatingControlsWithSelection = func
     hoveredRows: hoveredRows,
     stickyTop: tableActive ? stickyTop : undefined
   }), /*#__PURE__*/_react.default.createElement(_ClassicControls.RowControls, {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
+    selection: selection,
     editorView: editorView,
     tableRef: tableRef,
     hoverRows: hoverRows,

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

@@ -148,7 +148,7 @@ var NumberColumn = exports.default = /*#__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.default.createElement("div", {
           // Ignored via go/ees005
           // eslint-disable-next-line react/no-array-index-key

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

@@ -9,10 +9,12 @@ exports.DragControlsWithSelection = exports.DragControls = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 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");
@@ -302,8 +304,15 @@ var DragControlsWithSelection = exports.DragControlsWithSelection = function Dra
     selectRows = _ref5.selectRows,
     updateCellHoverLocation = _ref5.updateCellHoverLocation,
     api = _ref5.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+  // 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;
   return /*#__PURE__*/_react.default.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,
@@ -319,6 +328,6 @@ var DragControlsWithSelection = exports.DragControlsWithSelection = function Dra
     selectRows: selectRows,
     updateCellHoverLocation: updateCellHoverLocation,
     api: api,
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+    selection: selection
   });
 };

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

@@ -8,10 +8,20 @@ exports.SortingIconWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _table = require("@atlaskit/editor-common/table");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var SortingIconWrapper = exports.SortingIconWrapper = function SortingIconWrapper(props) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.api, ['editorViewMode']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.api, ['editorViewMode'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
-  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+
+  // 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;
+  if (mode === 'edit') {
     return null;
   }
   // Ignored via go/ees005

package/dist/es2019/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
 
+const useSharedTablePluginStateSelector = (api, key) => {
+  const value = useSharedPluginStateSelector(api, `table.${key}`, {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  return value;
+};
+
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
@@ -30,23 +39,63 @@ export const TableComponentWithSharedState = ({
     mediaState,
     selectionState,
     editorViewModeState
-  } = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']);
-  const isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  if (!tableState) {
+  } = 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 === 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;
+  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;
   }
-  const {
-    isTableResizing,
-    isHeaderColumnEnabled,
-    isHeaderRowEnabled,
-    ordering,
-    isResizing,
-    isInDanger,
-    hoveredCell,
-    hoveredRows,
-    isTableHovered,
-    isWholeTableInDanger
-  } = tableState;
+
+  // 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
@@ -67,7 +116,7 @@ export const TableComponentWithSharedState = ({
     allowColumnResizing: allowColumnResizing,
     eventDispatcher: eventDispatcher,
     getPos: getPos,
-    isMediaFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
+    isMediaFullscreen: isFullscreen,
     options: options,
     allowControls: allowControls,
     isHeaderRowEnabled: isHeaderRowEnabled,
@@ -79,11 +128,14 @@ export const TableComponentWithSharedState = ({
     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
+    } :
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    containerWidth: widthState,
+    widthState,
     contentDOM: forwardRef,
     getEditorFeatureFlags: getEditorFeatureFlags,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -93,6 +145,6 @@ export const TableComponentWithSharedState = ({
     hoveredCell: hoveredCell,
     isTableHovered: isTableHovered,
     isWholeTableInDanger: isWholeTableInDanger,
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+    selection: selection
   });
 };

package/dist/es2019/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';
@@ -42,9 +44,17 @@ export const ColumnControls = ({
 }) => {
   var _colWidths$map$join;
   const columnControlsRef = useRef(null);
+
+  // 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;
   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.
@@ -52,7 +62,7 @@ export const ColumnControls = ({
   // TODO: ED-26961 - reusing getRowsParams here because it's generic enough to work for columns -> rename
   const columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   const colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
-  const selectedColIndexes = getSelectedColumns((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) || editorView.state.selection);
+  const selectedColIndexes = getSelectedColumns(selection || editorView.state.selection);
   const firstRow = tableRef.querySelector('tr');
   const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   const rowControlStickyTop = 45;

package/dist/es2019/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';
 const DragCornerControlsComponent = ({
@@ -67,9 +69,16 @@ const DragCornerControlsComponentWithSelection = ({
   },
   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;
   const handleOnClick = () => {
     const {
       state,
@@ -85,15 +94,15 @@ const DragCornerControlsComponentWithSelection = ({
     clearHoverSelection()(state, dispatch);
   };
   const isActive = useMemo(() => {
-    if (!(selectionState !== null && selectionState !== void 0 && selectionState.selection)) {
+    if (!selection) {
       return;
     }
-    const table = findTable(selectionState.selection);
+    const table = findTable(selection);
     if (!table) {
       return false;
     }
-    return isTableSelected(selectionState.selection);
-  }, [selectionState]);
+    return isTableSelected(selection);
+  }, [selection]);
   if (isResizing) {
     return null;
   }

package/dist/es2019/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 const FloatingControlsWithSelection = ({
@@ -16,9 +18,16 @@ export const FloatingControlsWithSelection = ({
   tableActive,
   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(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
     editorView: editorView,
     tableRef: tableRef,
@@ -29,7 +38,7 @@ export const FloatingControlsWithSelection = ({
     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/es2019/ui/TableFloatingControls/NumberColumn/index.js

@@ -133,7 +133,7 @@ export default class NumberColumn extends Component {
       onMouseOver: () => updateCellHoverLocation(index)
     }, 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