@atlaskit/editor-plugin-table 12.1.3 → 12.1.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-table
 
+## 12.1.5
+
+### Patch Changes
+
+- [#190588](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190588)
+  [`b22e308cfd320`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b22e308cfd320) -
+  Replace experiment key platform_editor_useSharedPluginStateSelector with
+  platform_editor_useSharedPluginStateWithSelector
+- Updated dependencies
+
+## 12.1.4
+
+### Patch Changes
+
+- [#190680](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190680)
+  [`c27708467595b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c27708467595b) -
+  [ux] ENGHEALTH-32145 A11y violation detected for rule "label" for "@af/editor-plugin-table-tests"
+  from "Editor: Jenga"
+- Updated dependencies
+
 ## 12.1.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponentWithSharedState.js

@@ -8,6 +8,7 @@ exports.TableComponentWithSharedState = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _editorTables = require("@atlaskit/editor-tables");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
 // Ignored via go/ees005
@@ -147,7 +148,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     width = _useSharedState.width,
     interaction = _useSharedState.interaction;
   var isLivePageViewMode = mode === 'view';
-  if ((0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false) && !tableState) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false) && !tableState) {
     return null;
   }
 
@@ -183,7 +184,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     ordering: ordering,
     isResizing: isResizing,
     getNode: getNode,
-    containerWidth: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? {
+    containerWidth: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstatewithselector', true) ? {
       width: width !== null && width !== void 0 ? width : 0,
       lineLength: lineLength
     } :

package/dist/cjs/nodeviews/TableContainer.js

@@ -16,7 +16,6 @@ var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
@@ -79,7 +78,7 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
     isFullWidthModeEnabled = _useAlignmentTableCon.isFullWidthModeEnabled,
     wasFullWidthModeEnabled = _useAlignmentTableCon.wasFullWidthModeEnabled;
   (0, _react.useEffect)(function () {
-    if (!tableState && (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)) {
+    if (!tableState && (0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
       return;
     }
     if (editorView && getPos) {

package/dist/cjs/tablePlugin.js

@@ -472,7 +472,7 @@ var tablePlugin = function tablePlugin(_ref) {
         popupsBoundariesElement = _ref18.popupsBoundariesElement,
         popupsScrollableElement = _ref18.popupsScrollableElement,
         dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
-      if ((0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
+      if ((0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
         return /*#__PURE__*/_react.default.createElement(_ContentComponent.ContentComponent, {
           api: api,
           editorView: editorView,

package/dist/cjs/ui/ContentComponent.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-selection");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -19,12 +20,43 @@ var _FloatingDragMenu = _interopRequireDefault(require("./FloatingDragMenu"));
 var _FloatingInsertButton = _interopRequireDefault(require("./FloatingInsertButton"));
 var _FloatingToolbarLabel = require("./FloatingToolbarLabel/FloatingToolbarLabel");
 var _globalStyles = require("./global-styles");
-var _useInternalTablePluginStateSelector = require("./hooks/useInternalTablePluginStateSelector");
 var _SizeSelector = require("./SizeSelector");
 var _TableFullWidthLabel = require("./TableFullWidthLabel");
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 
+var selector = function selector(states) {
+  var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$tableState10, _states$tableState11, _states$tableState12, _states$tableState13, _states$tableState14, _states$tableState15, _states$tableState16, _states$tableState17, _states$tableState18, _states$tableState19, _states$tableState20, _states$tableState21, _states$tableState22, _states$tableState23, _states$tableState24;
+  return {
+    resizingTableLocalId: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.resizingTableLocalId,
+    resizingTableRef: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.resizingTableRef,
+    isTableResizing: (_states$tableState3 = states.tableState) === null || _states$tableState3 === void 0 ? void 0 : _states$tableState3.isTableResizing,
+    isResizing: (_states$tableState4 = states.tableState) === null || _states$tableState4 === void 0 ? void 0 : _states$tableState4.isResizing,
+    widthToWidest: (_states$tableState5 = states.tableState) === null || _states$tableState5 === void 0 ? void 0 : _states$tableState5.widthToWidest,
+    tableNode: (_states$tableState6 = states.tableState) === null || _states$tableState6 === void 0 ? void 0 : _states$tableState6.tableNode,
+    targetCellPosition: (_states$tableState7 = states.tableState) === null || _states$tableState7 === void 0 ? void 0 : _states$tableState7.targetCellPosition,
+    isContextualMenuOpen: (_states$tableState8 = states.tableState) === null || _states$tableState8 === void 0 ? void 0 : _states$tableState8.isContextualMenuOpen,
+    tableRef: (_states$tableState9 = states.tableState) === null || _states$tableState9 === void 0 ? void 0 : _states$tableState9.tableRef,
+    pluginConfig: (_states$tableState0 = states.tableState) === null || _states$tableState0 === void 0 ? void 0 : _states$tableState0.pluginConfig,
+    insertColumnButtonIndex: (_states$tableState1 = states.tableState) === null || _states$tableState1 === void 0 ? void 0 : _states$tableState1.insertColumnButtonIndex,
+    insertRowButtonIndex: (_states$tableState10 = states.tableState) === null || _states$tableState10 === void 0 ? void 0 : _states$tableState10.insertRowButtonIndex,
+    isHeaderColumnEnabled: (_states$tableState11 = states.tableState) === null || _states$tableState11 === void 0 ? void 0 : _states$tableState11.isHeaderColumnEnabled,
+    isHeaderRowEnabled: (_states$tableState12 = states.tableState) === null || _states$tableState12 === void 0 ? void 0 : _states$tableState12.isHeaderRowEnabled,
+    isDragAndDropEnabled: (_states$tableState13 = states.tableState) === null || _states$tableState13 === void 0 ? void 0 : _states$tableState13.isDragAndDropEnabled,
+    tableWrapperTarget: (_states$tableState14 = states.tableState) === null || _states$tableState14 === void 0 ? void 0 : _states$tableState14.tableWrapperTarget,
+    isCellMenuOpenByKeyboard: (_states$tableState15 = states.tableState) === null || _states$tableState15 === void 0 ? void 0 : _states$tableState15.isCellMenuOpenByKeyboard,
+    stickyHeader: (_states$tableState16 = states.tableState) === null || _states$tableState16 === void 0 ? void 0 : _states$tableState16.stickyHeader,
+    dragMenuDirection: (_states$tableState17 = states.tableState) === null || _states$tableState17 === void 0 ? void 0 : _states$tableState17.dragMenuDirection,
+    dragMenuIndex: (_states$tableState18 = states.tableState) === null || _states$tableState18 === void 0 ? void 0 : _states$tableState18.dragMenuIndex,
+    isDragMenuOpen: (_states$tableState19 = states.tableState) === null || _states$tableState19 === void 0 ? void 0 : _states$tableState19.isDragMenuOpen,
+    isSizeSelectorOpen: (_states$tableState20 = states.tableState) === null || _states$tableState20 === void 0 ? void 0 : _states$tableState20.isSizeSelectorOpen,
+    sizeSelectorTargetRef: (_states$tableState21 = states.tableState) === null || _states$tableState21 === void 0 ? void 0 : _states$tableState21.sizeSelectorTargetRef,
+    // IMPORTANT: hovered states are used by FloatingDragMenu component to render popup in the correct location
+    hoveredRows: (_states$tableState22 = states.tableState) === null || _states$tableState22 === void 0 ? void 0 : _states$tableState22.hoveredRows,
+    hoveredColumns: (_states$tableState23 = states.tableState) === null || _states$tableState23 === void 0 ? void 0 : _states$tableState23.hoveredColumns,
+    hoveredCell: (_states$tableState24 = states.tableState) === null || _states$tableState24 === void 0 ? void 0 : _states$tableState24.hoveredCell
+  };
+};
 var ContentComponentInternal = function ContentComponentInternal(_ref) {
   var _api$analytics, _api$accessibilityUti, _api$analytics2;
   var api = _ref.api,
@@ -39,31 +71,32 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   var ariaNotifyPlugin = api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
-  var resizingTableLocalId = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'resizingTableLocalId');
-  var resizingTableRef = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'resizingTableRef');
-  var isTableResizing = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isTableResizing');
-  var isResizing = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isResizing');
-  var widthToWidest = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'widthToWidest');
-  var tableNode = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'tableNode');
-  var targetCellPosition = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'targetCellPosition');
-  var isContextualMenuOpen = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isContextualMenuOpen');
-  var tableRef = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'tableRef');
-  var pluginConfig = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'pluginConfig');
-  var insertColumnButtonIndex = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'insertColumnButtonIndex');
-  var insertRowButtonIndex = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'insertRowButtonIndex');
-  var isHeaderColumnEnabled = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isHeaderColumnEnabled');
-  var isHeaderRowEnabled = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isHeaderRowEnabled');
-  var isDragAndDropEnabled = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isDragAndDropEnabled');
-  var tableWrapperTarget = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'tableWrapperTarget');
-  var isCellMenuOpenByKeyboard = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isCellMenuOpenByKeyboard');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['table'], selector),
+    resizingTableLocalId = _useSharedPluginState.resizingTableLocalId,
+    resizingTableRef = _useSharedPluginState.resizingTableRef,
+    isTableResizing = _useSharedPluginState.isTableResizing,
+    isResizing = _useSharedPluginState.isResizing,
+    widthToWidest = _useSharedPluginState.widthToWidest,
+    tableNode = _useSharedPluginState.tableNode,
+    targetCellPosition = _useSharedPluginState.targetCellPosition,
+    isContextualMenuOpen = _useSharedPluginState.isContextualMenuOpen,
+    tableRef = _useSharedPluginState.tableRef,
+    pluginConfig = _useSharedPluginState.pluginConfig,
+    insertColumnButtonIndex = _useSharedPluginState.insertColumnButtonIndex,
+    insertRowButtonIndex = _useSharedPluginState.insertRowButtonIndex,
+    isHeaderColumnEnabled = _useSharedPluginState.isHeaderColumnEnabled,
+    isHeaderRowEnabled = _useSharedPluginState.isHeaderRowEnabled,
+    isDragAndDropEnabled = _useSharedPluginState.isDragAndDropEnabled,
+    tableWrapperTarget = _useSharedPluginState.tableWrapperTarget,
+    isCellMenuOpenByKeyboard = _useSharedPluginState.isCellMenuOpenByKeyboard,
+    stickyHeader = _useSharedPluginState.stickyHeader,
+    dragMenuDirection = _useSharedPluginState.dragMenuDirection,
+    dragMenuIndex = _useSharedPluginState.dragMenuIndex,
+    isDragMenuOpen = _useSharedPluginState.isDragMenuOpen,
+    isSizeSelectorOpen = _useSharedPluginState.isSizeSelectorOpen,
+    sizeSelectorTargetRef = _useSharedPluginState.sizeSelectorTargetRef;
   var _ref2 = pluginConfig !== null && pluginConfig !== void 0 ? pluginConfig : {},
     allowControls = _ref2.allowControls;
-  var stickyHeader = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'stickyHeader');
-  var dragMenuDirection = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'dragMenuDirection');
-  var dragMenuIndex = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'dragMenuIndex');
-  var isDragMenuOpen = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isDragMenuOpen');
-  var isSizeSelectorOpen = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isSizeSelectorOpen');
-  var sizeSelectorTargetRef = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'sizeSelectorTargetRef');
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
     isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
     editorView: editorView,

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

@@ -19,6 +19,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorTables = require("@atlaskit/editor-tables");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
 var _pluginFactory2 = require("../../pm-plugins/plugin-factory");
 var _mergedCells = require("../../pm-plugins/utils/merged-cells");
@@ -196,7 +197,8 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
         toggleDragMenu && toggleDragMenu('mouse', e);
       }
     },
-    onClick: onClick
+    onClick: onClick,
+    "aria-label": (0, _expValEquals.expValEquals)('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(_messages.tableMessages.dragHandleZone) : undefined
   }), /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     id: isDragMenuTarget ? showDragMenuAnchorId : undefined

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -23,6 +23,7 @@ var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _paintBucketEditorBackgroundColor = _interopRequireDefault(require("@atlaskit/icon/core/migration/paint-bucket--editor-background-color"));
 var _primitives = require("@atlaskit/primitives");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
 var _commands = require("../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../pm-plugins/commands/commands-with-analytics");
@@ -349,6 +350,7 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
         css: _styles2.toggleStyles
       }, (0, _react2.jsx)(_toggle.default, {
         id: "toggle-header-column",
+        label: (0, _expValEquals.expValEquals)('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(_messages.tableMessages.headerColumn) : undefined,
         onChange: toggleHeaderColumn,
         isChecked: (0, _nodes.checkIfHeaderColumnEnabled)(selection)
       }))
@@ -364,6 +366,7 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
         css: _styles2.toggleStyles
       }, (0, _react2.jsx)(_toggle.default, {
         id: "toggle-header-row",
+        label: (0, _expValEquals.expValEquals)('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(_messages.tableMessages.headerRow) : undefined,
         onChange: toggleHeaderRow,
         isChecked: (0, _nodes.checkIfHeaderRowEnabled)(selection)
       }))
@@ -382,6 +385,7 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
         css: _styles2.toggleStyles
       }, (0, _react2.jsx)(_toggle.default, {
         id: "toggle-row-numbers",
+        label: (0, _expValEquals.expValEquals)('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(_messages.tableMessages.numberedColumn) : undefined,
         onChange: toggleRowNumbers,
         isChecked: (0, _nodes.checkIfNumberColumnEnabled)(selection)
       }))

package/dist/es2019/nodeviews/TableComponentWithSharedState.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { findTable } from '@atlaskit/editor-tables';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import TableComponent from './TableComponent';
 
@@ -145,7 +146,7 @@ export const TableComponentWithSharedState = ({
     interaction
   } = useSharedState(api);
   const isLivePageViewMode = mode === 'view';
-  if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
+  if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false) && !tableState) {
     return null;
   }
 
@@ -181,7 +182,7 @@ export const TableComponentWithSharedState = ({
     ordering: ordering,
     isResizing: isResizing,
     getNode: getNode,
-    containerWidth: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? {
+    containerWidth: editorExperiment('platform_editor_usesharedpluginstatewithselector', true) ? {
       width: width !== null && width !== void 0 ? width : 0,
       lineLength
     } :

package/dist/es2019/nodeviews/TableContainer.js

@@ -7,7 +7,6 @@ import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
@@ -74,7 +73,7 @@ const AlignmentTableContainer = ({
     wasFullWidthModeEnabled
   } = useAlignmentTableContainerSharedState(pluginInjectionApi);
   useEffect(() => {
-    if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
+    if (!tableState && expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
       return;
     }
     if (editorView && getPos) {

package/dist/es2019/tablePlugin.js

@@ -463,7 +463,7 @@ const tablePlugin = ({
       dispatchAnalyticsEvent
     }) {
       var _api$featureFlags;
-      if (expValEquals('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
+      if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
         return /*#__PURE__*/React.createElement(ContentComponent, {
           api: api,
           editorView: editorView,

package/dist/es2019/ui/ContentComponent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -14,9 +15,40 @@ import FloatingDragMenu from './FloatingDragMenu';
 import FloatingInsertButton from './FloatingInsertButton';
 import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './global-styles';
-import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
 import { SizeSelector } from './SizeSelector';
 import { FullWidthDisplay } from './TableFullWidthLabel';
+const selector = states => {
+  var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$tableState10, _states$tableState11, _states$tableState12, _states$tableState13, _states$tableState14, _states$tableState15, _states$tableState16, _states$tableState17, _states$tableState18, _states$tableState19, _states$tableState20, _states$tableState21, _states$tableState22, _states$tableState23, _states$tableState24;
+  return {
+    resizingTableLocalId: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.resizingTableLocalId,
+    resizingTableRef: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.resizingTableRef,
+    isTableResizing: (_states$tableState3 = states.tableState) === null || _states$tableState3 === void 0 ? void 0 : _states$tableState3.isTableResizing,
+    isResizing: (_states$tableState4 = states.tableState) === null || _states$tableState4 === void 0 ? void 0 : _states$tableState4.isResizing,
+    widthToWidest: (_states$tableState5 = states.tableState) === null || _states$tableState5 === void 0 ? void 0 : _states$tableState5.widthToWidest,
+    tableNode: (_states$tableState6 = states.tableState) === null || _states$tableState6 === void 0 ? void 0 : _states$tableState6.tableNode,
+    targetCellPosition: (_states$tableState7 = states.tableState) === null || _states$tableState7 === void 0 ? void 0 : _states$tableState7.targetCellPosition,
+    isContextualMenuOpen: (_states$tableState8 = states.tableState) === null || _states$tableState8 === void 0 ? void 0 : _states$tableState8.isContextualMenuOpen,
+    tableRef: (_states$tableState9 = states.tableState) === null || _states$tableState9 === void 0 ? void 0 : _states$tableState9.tableRef,
+    pluginConfig: (_states$tableState0 = states.tableState) === null || _states$tableState0 === void 0 ? void 0 : _states$tableState0.pluginConfig,
+    insertColumnButtonIndex: (_states$tableState1 = states.tableState) === null || _states$tableState1 === void 0 ? void 0 : _states$tableState1.insertColumnButtonIndex,
+    insertRowButtonIndex: (_states$tableState10 = states.tableState) === null || _states$tableState10 === void 0 ? void 0 : _states$tableState10.insertRowButtonIndex,
+    isHeaderColumnEnabled: (_states$tableState11 = states.tableState) === null || _states$tableState11 === void 0 ? void 0 : _states$tableState11.isHeaderColumnEnabled,
+    isHeaderRowEnabled: (_states$tableState12 = states.tableState) === null || _states$tableState12 === void 0 ? void 0 : _states$tableState12.isHeaderRowEnabled,
+    isDragAndDropEnabled: (_states$tableState13 = states.tableState) === null || _states$tableState13 === void 0 ? void 0 : _states$tableState13.isDragAndDropEnabled,
+    tableWrapperTarget: (_states$tableState14 = states.tableState) === null || _states$tableState14 === void 0 ? void 0 : _states$tableState14.tableWrapperTarget,
+    isCellMenuOpenByKeyboard: (_states$tableState15 = states.tableState) === null || _states$tableState15 === void 0 ? void 0 : _states$tableState15.isCellMenuOpenByKeyboard,
+    stickyHeader: (_states$tableState16 = states.tableState) === null || _states$tableState16 === void 0 ? void 0 : _states$tableState16.stickyHeader,
+    dragMenuDirection: (_states$tableState17 = states.tableState) === null || _states$tableState17 === void 0 ? void 0 : _states$tableState17.dragMenuDirection,
+    dragMenuIndex: (_states$tableState18 = states.tableState) === null || _states$tableState18 === void 0 ? void 0 : _states$tableState18.dragMenuIndex,
+    isDragMenuOpen: (_states$tableState19 = states.tableState) === null || _states$tableState19 === void 0 ? void 0 : _states$tableState19.isDragMenuOpen,
+    isSizeSelectorOpen: (_states$tableState20 = states.tableState) === null || _states$tableState20 === void 0 ? void 0 : _states$tableState20.isSizeSelectorOpen,
+    sizeSelectorTargetRef: (_states$tableState21 = states.tableState) === null || _states$tableState21 === void 0 ? void 0 : _states$tableState21.sizeSelectorTargetRef,
+    // IMPORTANT: hovered states are used by FloatingDragMenu component to render popup in the correct location
+    hoveredRows: (_states$tableState22 = states.tableState) === null || _states$tableState22 === void 0 ? void 0 : _states$tableState22.hoveredRows,
+    hoveredColumns: (_states$tableState23 = states.tableState) === null || _states$tableState23 === void 0 ? void 0 : _states$tableState23.hoveredColumns,
+    hoveredCell: (_states$tableState24 = states.tableState) === null || _states$tableState24 === void 0 ? void 0 : _states$tableState24.hoveredCell
+  };
+};
 const ContentComponentInternal = ({
   api,
   editorView,
@@ -32,32 +64,34 @@ const ContentComponentInternal = ({
   var _api$analytics, _api$accessibilityUti, _api$analytics2;
   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');
-  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 {
+    resizingTableLocalId,
+    resizingTableRef,
+    isTableResizing,
+    isResizing,
+    widthToWidest,
+    tableNode,
+    targetCellPosition,
+    isContextualMenuOpen,
+    tableRef,
+    pluginConfig,
+    insertColumnButtonIndex,
+    insertRowButtonIndex,
+    isHeaderColumnEnabled,
+    isHeaderRowEnabled,
+    isDragAndDropEnabled,
+    tableWrapperTarget,
+    isCellMenuOpenByKeyboard,
+    stickyHeader,
+    dragMenuDirection,
+    dragMenuIndex,
+    isDragMenuOpen,
+    isSizeSelectorOpen,
+    sizeSelectorTargetRef
+  } = useSharedPluginStateWithSelector(api, ['table'], selector);
   const {
     allowControls
   } = pluginConfig !== null && pluginConfig !== void 0 ? pluginConfig : {};
-  const stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader');
-  const dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection');
-  const dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
-  const isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
-  const isSizeSelectorOpen = useInternalTablePluginStateSelector(api, 'isSizeSelectorOpen');
-  const sizeSelectorTargetRef = useInternalTablePluginStateSelector(api, 'sizeSelectorTargetRef');
   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

@@ -11,6 +11,7 @@ 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 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';
@@ -190,7 +191,8 @@ const DragHandleComponent = ({
         toggleDragMenu && toggleDragMenu('mouse', e);
       }
     },
-    onClick: onClick
+    onClick: onClick,
+    "aria-label": expValEquals('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(messages.dragHandleZone) : undefined
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
     id: isDragMenuTarget ? showDragMenuAnchorId : undefined

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -22,6 +22,7 @@ import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@at
 import PaintBucketIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Toggle from '@atlaskit/toggle';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../pm-plugins/commands';
 import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
@@ -343,6 +344,7 @@ const DragMenu = /*#__PURE__*/React.memo(({
         css: toggleStyles
       }, jsx(Toggle, {
         id: "toggle-header-column",
+        label: expValEquals('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(messages.headerColumn) : undefined,
         onChange: toggleHeaderColumn,
         isChecked: checkIfHeaderColumnEnabled(selection)
       }))
@@ -358,6 +360,7 @@ const DragMenu = /*#__PURE__*/React.memo(({
         css: toggleStyles
       }, jsx(Toggle, {
         id: "toggle-header-row",
+        label: expValEquals('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(messages.headerRow) : undefined,
         onChange: toggleHeaderRow,
         isChecked: checkIfHeaderRowEnabled(selection)
       }))
@@ -376,6 +379,7 @@ const DragMenu = /*#__PURE__*/React.memo(({
         css: toggleStyles
       }, jsx(Toggle, {
         id: "toggle-row-numbers",
+        label: expValEquals('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(messages.numberedColumn) : undefined,
         onChange: toggleRowNumbers,
         isChecked: checkIfNumberColumnEnabled(selection)
       }))

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { findTable } from '@atlaskit/editor-tables';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import TableComponent from './TableComponent';
 
@@ -141,7 +142,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     width = _useSharedState.width,
     interaction = _useSharedState.interaction;
   var isLivePageViewMode = mode === 'view';
-  if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
+  if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false) && !tableState) {
     return null;
   }
 
@@ -177,7 +178,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     ordering: ordering,
     isResizing: isResizing,
     getNode: getNode,
-    containerWidth: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? {
+    containerWidth: editorExperiment('platform_editor_usesharedpluginstatewithselector', true) ? {
       width: width !== null && width !== void 0 ? width : 0,
       lineLength: lineLength
     } :

package/dist/esm/nodeviews/TableContainer.js

@@ -8,7 +8,6 @@ import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
@@ -70,7 +69,7 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
     isFullWidthModeEnabled = _useAlignmentTableCon.isFullWidthModeEnabled,
     wasFullWidthModeEnabled = _useAlignmentTableCon.wasFullWidthModeEnabled;
   useEffect(function () {
-    if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
+    if (!tableState && expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
       return;
     }
     if (editorView && getPos) {

package/dist/esm/tablePlugin.js

@@ -464,7 +464,7 @@ var tablePlugin = function tablePlugin(_ref) {
         popupsBoundariesElement = _ref18.popupsBoundariesElement,
         popupsScrollableElement = _ref18.popupsScrollableElement,
         dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
-      if (expValEquals('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
+      if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
         return /*#__PURE__*/React.createElement(ContentComponent, {
           api: api,
           editorView: editorView,

package/dist/esm/ui/ContentComponent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -14,9 +15,40 @@ import FloatingDragMenu from './FloatingDragMenu';
 import FloatingInsertButton from './FloatingInsertButton';
 import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './global-styles';
-import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
 import { SizeSelector } from './SizeSelector';
 import { FullWidthDisplay } from './TableFullWidthLabel';
+var selector = function selector(states) {
+  var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$tableState10, _states$tableState11, _states$tableState12, _states$tableState13, _states$tableState14, _states$tableState15, _states$tableState16, _states$tableState17, _states$tableState18, _states$tableState19, _states$tableState20, _states$tableState21, _states$tableState22, _states$tableState23, _states$tableState24;
+  return {
+    resizingTableLocalId: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.resizingTableLocalId,
+    resizingTableRef: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.resizingTableRef,
+    isTableResizing: (_states$tableState3 = states.tableState) === null || _states$tableState3 === void 0 ? void 0 : _states$tableState3.isTableResizing,
+    isResizing: (_states$tableState4 = states.tableState) === null || _states$tableState4 === void 0 ? void 0 : _states$tableState4.isResizing,
+    widthToWidest: (_states$tableState5 = states.tableState) === null || _states$tableState5 === void 0 ? void 0 : _states$tableState5.widthToWidest,
+    tableNode: (_states$tableState6 = states.tableState) === null || _states$tableState6 === void 0 ? void 0 : _states$tableState6.tableNode,
+    targetCellPosition: (_states$tableState7 = states.tableState) === null || _states$tableState7 === void 0 ? void 0 : _states$tableState7.targetCellPosition,
+    isContextualMenuOpen: (_states$tableState8 = states.tableState) === null || _states$tableState8 === void 0 ? void 0 : _states$tableState8.isContextualMenuOpen,
+    tableRef: (_states$tableState9 = states.tableState) === null || _states$tableState9 === void 0 ? void 0 : _states$tableState9.tableRef,
+    pluginConfig: (_states$tableState0 = states.tableState) === null || _states$tableState0 === void 0 ? void 0 : _states$tableState0.pluginConfig,
+    insertColumnButtonIndex: (_states$tableState1 = states.tableState) === null || _states$tableState1 === void 0 ? void 0 : _states$tableState1.insertColumnButtonIndex,
+    insertRowButtonIndex: (_states$tableState10 = states.tableState) === null || _states$tableState10 === void 0 ? void 0 : _states$tableState10.insertRowButtonIndex,
+    isHeaderColumnEnabled: (_states$tableState11 = states.tableState) === null || _states$tableState11 === void 0 ? void 0 : _states$tableState11.isHeaderColumnEnabled,
+    isHeaderRowEnabled: (_states$tableState12 = states.tableState) === null || _states$tableState12 === void 0 ? void 0 : _states$tableState12.isHeaderRowEnabled,
+    isDragAndDropEnabled: (_states$tableState13 = states.tableState) === null || _states$tableState13 === void 0 ? void 0 : _states$tableState13.isDragAndDropEnabled,
+    tableWrapperTarget: (_states$tableState14 = states.tableState) === null || _states$tableState14 === void 0 ? void 0 : _states$tableState14.tableWrapperTarget,
+    isCellMenuOpenByKeyboard: (_states$tableState15 = states.tableState) === null || _states$tableState15 === void 0 ? void 0 : _states$tableState15.isCellMenuOpenByKeyboard,
+    stickyHeader: (_states$tableState16 = states.tableState) === null || _states$tableState16 === void 0 ? void 0 : _states$tableState16.stickyHeader,
+    dragMenuDirection: (_states$tableState17 = states.tableState) === null || _states$tableState17 === void 0 ? void 0 : _states$tableState17.dragMenuDirection,
+    dragMenuIndex: (_states$tableState18 = states.tableState) === null || _states$tableState18 === void 0 ? void 0 : _states$tableState18.dragMenuIndex,
+    isDragMenuOpen: (_states$tableState19 = states.tableState) === null || _states$tableState19 === void 0 ? void 0 : _states$tableState19.isDragMenuOpen,
+    isSizeSelectorOpen: (_states$tableState20 = states.tableState) === null || _states$tableState20 === void 0 ? void 0 : _states$tableState20.isSizeSelectorOpen,
+    sizeSelectorTargetRef: (_states$tableState21 = states.tableState) === null || _states$tableState21 === void 0 ? void 0 : _states$tableState21.sizeSelectorTargetRef,
+    // IMPORTANT: hovered states are used by FloatingDragMenu component to render popup in the correct location
+    hoveredRows: (_states$tableState22 = states.tableState) === null || _states$tableState22 === void 0 ? void 0 : _states$tableState22.hoveredRows,
+    hoveredColumns: (_states$tableState23 = states.tableState) === null || _states$tableState23 === void 0 ? void 0 : _states$tableState23.hoveredColumns,
+    hoveredCell: (_states$tableState24 = states.tableState) === null || _states$tableState24 === void 0 ? void 0 : _states$tableState24.hoveredCell
+  };
+};
 var ContentComponentInternal = function ContentComponentInternal(_ref) {
   var _api$analytics, _api$accessibilityUti, _api$analytics2;
   var api = _ref.api,
@@ -31,31 +63,32 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   var ariaNotifyPlugin = api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
-  var resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId');
-  var resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef');
-  var isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing');
-  var isResizing = useInternalTablePluginStateSelector(api, 'isResizing');
-  var widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest');
-  var tableNode = useInternalTablePluginStateSelector(api, 'tableNode');
-  var targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition');
-  var isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen');
-  var tableRef = useInternalTablePluginStateSelector(api, 'tableRef');
-  var pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig');
-  var insertColumnButtonIndex = useInternalTablePluginStateSelector(api, 'insertColumnButtonIndex');
-  var insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex');
-  var isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled');
-  var isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled');
-  var isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled');
-  var tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget');
-  var isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table'], selector),
+    resizingTableLocalId = _useSharedPluginState.resizingTableLocalId,
+    resizingTableRef = _useSharedPluginState.resizingTableRef,
+    isTableResizing = _useSharedPluginState.isTableResizing,
+    isResizing = _useSharedPluginState.isResizing,
+    widthToWidest = _useSharedPluginState.widthToWidest,
+    tableNode = _useSharedPluginState.tableNode,
+    targetCellPosition = _useSharedPluginState.targetCellPosition,
+    isContextualMenuOpen = _useSharedPluginState.isContextualMenuOpen,
+    tableRef = _useSharedPluginState.tableRef,
+    pluginConfig = _useSharedPluginState.pluginConfig,
+    insertColumnButtonIndex = _useSharedPluginState.insertColumnButtonIndex,
+    insertRowButtonIndex = _useSharedPluginState.insertRowButtonIndex,
+    isHeaderColumnEnabled = _useSharedPluginState.isHeaderColumnEnabled,
+    isHeaderRowEnabled = _useSharedPluginState.isHeaderRowEnabled,
+    isDragAndDropEnabled = _useSharedPluginState.isDragAndDropEnabled,
+    tableWrapperTarget = _useSharedPluginState.tableWrapperTarget,
+    isCellMenuOpenByKeyboard = _useSharedPluginState.isCellMenuOpenByKeyboard,
+    stickyHeader = _useSharedPluginState.stickyHeader,
+    dragMenuDirection = _useSharedPluginState.dragMenuDirection,
+    dragMenuIndex = _useSharedPluginState.dragMenuIndex,
+    isDragMenuOpen = _useSharedPluginState.isDragMenuOpen,
+    isSizeSelectorOpen = _useSharedPluginState.isSizeSelectorOpen,
+    sizeSelectorTargetRef = _useSharedPluginState.sizeSelectorTargetRef;
   var _ref2 = pluginConfig !== null && pluginConfig !== void 0 ? pluginConfig : {},
     allowControls = _ref2.allowControls;
-  var stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader');
-  var dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection');
-  var dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
-  var isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
-  var isSizeSelectorOpen = useInternalTablePluginStateSelector(api, 'isSizeSelectorOpen');
-  var sizeSelectorTargetRef = useInternalTablePluginStateSelector(api, 'sizeSelectorTargetRef');
   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/esm/ui/DragHandle/index.js

@@ -13,6 +13,7 @@ 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 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';
@@ -187,7 +188,8 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
         toggleDragMenu && toggleDragMenu('mouse', e);
       }
     },
-    onClick: onClick
+    onClick: onClick,
+    "aria-label": expValEquals('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(messages.dragHandleZone) : undefined
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
     id: isDragMenuTarget ? showDragMenuAnchorId : undefined

package/dist/esm/ui/FloatingDragMenu/DragMenu.js

@@ -24,6 +24,7 @@ import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@at
 import PaintBucketIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Toggle from '@atlaskit/toggle';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../pm-plugins/commands';
 import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
@@ -338,6 +339,7 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
         css: toggleStyles
       }, jsx(Toggle, {
         id: "toggle-header-column",
+        label: expValEquals('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(messages.headerColumn) : undefined,
         onChange: toggleHeaderColumn,
         isChecked: checkIfHeaderColumnEnabled(selection)
       }))
@@ -353,6 +355,7 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
         css: toggleStyles
       }, jsx(Toggle, {
         id: "toggle-header-row",
+        label: expValEquals('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(messages.headerRow) : undefined,
         onChange: toggleHeaderRow,
         isChecked: checkIfHeaderRowEnabled(selection)
       }))
@@ -371,6 +374,7 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
         css: toggleStyles
       }, jsx(Toggle, {
         id: "toggle-row-numbers",
+        label: expValEquals('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(messages.numberedColumn) : undefined,
         onChange: toggleRowNumbers,
         isChecked: checkIfNumberColumnEnabled(selection)
       }))

package/dist/types/ui/hooks/useInternalTablePluginStateSelector.d.ts

@@ -18,5 +18,5 @@ type Options = {
  * @returns
  * @example
  */
-export declare const useInternalTablePluginStateSelector: <K extends "isFullWidthModeEnabled" | "wasFullWidthModeEnabled" | "isHeaderRowEnabled" | "isHeaderColumnEnabled" | "ordering" | "isInDanger" | "hoveredRows" | "hoveredColumns" | "hoveredCell" | "isTableHovered" | "tableNode" | "widthToWidest" | "tableRef" | "tablePos" | "targetCellPosition" | "isContextualMenuOpen" | "pluginConfig" | "insertColumnButtonIndex" | "insertRowButtonIndex" | "isDragAndDropEnabled" | "tableWrapperTarget" | "isCellMenuOpenByKeyboard" | "isWholeTableInDanger" | "isDragMenuOpen" | "dragMenuDirection" | "dragMenuIndex" | "isResizing" | "stickyHeader" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "isSizeSelectorOpen" | "sizeSelectorTargetRef">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
+export declare const useInternalTablePluginStateSelector: <K extends "isFullWidthModeEnabled" | "wasFullWidthModeEnabled" | "isHeaderRowEnabled" | "isHeaderColumnEnabled" | "ordering" | "isInDanger" | "hoveredRows" | "hoveredColumns" | "hoveredCell" | "isTableHovered" | "tableNode" | "widthToWidest" | "tableRef" | "tablePos" | "targetCellPosition" | "isContextualMenuOpen" | "pluginConfig" | "insertColumnButtonIndex" | "insertRowButtonIndex" | "isDragAndDropEnabled" | "tableWrapperTarget" | "isCellMenuOpenByKeyboard" | "isWholeTableInDanger" | "isDragMenuOpen" | "dragMenuDirection" | "dragMenuIndex" | "isResizing" | "stickyHeader" | "isTableResizing" | "resizingTableLocalId" | "resizingTableRef" | "isSizeSelectorOpen" | "sizeSelectorTargetRef">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
 export {};

package/dist/types-ts4.5/ui/hooks/useInternalTablePluginStateSelector.d.ts

@@ -18,5 +18,5 @@ type Options = {
  * @returns
  * @example
  */
-export declare const useInternalTablePluginStateSelector: <K extends "isFullWidthModeEnabled" | "wasFullWidthModeEnabled" | "isHeaderRowEnabled" | "isHeaderColumnEnabled" | "ordering" | "isInDanger" | "hoveredRows" | "hoveredColumns" | "hoveredCell" | "isTableHovered" | "tableNode" | "widthToWidest" | "tableRef" | "tablePos" | "targetCellPosition" | "isContextualMenuOpen" | "pluginConfig" | "insertColumnButtonIndex" | "insertRowButtonIndex" | "isDragAndDropEnabled" | "tableWrapperTarget" | "isCellMenuOpenByKeyboard" | "isWholeTableInDanger" | "isDragMenuOpen" | "dragMenuDirection" | "dragMenuIndex" | "isResizing" | "stickyHeader" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "isSizeSelectorOpen" | "sizeSelectorTargetRef">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
+export declare const useInternalTablePluginStateSelector: <K extends "isFullWidthModeEnabled" | "wasFullWidthModeEnabled" | "isHeaderRowEnabled" | "isHeaderColumnEnabled" | "ordering" | "isInDanger" | "hoveredRows" | "hoveredColumns" | "hoveredCell" | "isTableHovered" | "tableNode" | "widthToWidest" | "tableRef" | "tablePos" | "targetCellPosition" | "isContextualMenuOpen" | "pluginConfig" | "insertColumnButtonIndex" | "insertRowButtonIndex" | "isDragAndDropEnabled" | "tableWrapperTarget" | "isCellMenuOpenByKeyboard" | "isWholeTableInDanger" | "isDragMenuOpen" | "dragMenuDirection" | "dragMenuIndex" | "isResizing" | "stickyHeader" | "isTableResizing" | "resizingTableLocalId" | "resizingTableRef" | "isSizeSelectorOpen" | "sizeSelectorTargetRef">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "12.1.3",
+	"version": "12.1.5",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.5.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^27.6.0",
+		"@atlaskit/icon": "^27.7.0",
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/react-ufo": "^4.1.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.10.0",
+		"@atlaskit/tmp-editor-statsig": "^9.14.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^5.6.0",
 		"@atlaskit/tooltip": "^20.3.0",

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -16,6 +16,7 @@ import type {
 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type tablePlugin from '../tablePlugin';
@@ -204,7 +205,10 @@ export const TableComponentWithSharedState = ({
 
 	const isLivePageViewMode = mode === 'view';
 
-	if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
+	if (
+		expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false) &&
+		!tableState
+	) {
 		return null;
 	}
 
@@ -250,7 +254,7 @@ export const TableComponentWithSharedState = ({
 			isResizing={isResizing}
 			getNode={getNode}
 			containerWidth={
-				editorExperiment('platform_editor_usesharedpluginstateselector', true)
+				editorExperiment('platform_editor_usesharedpluginstatewithselector', true)
 					? {
 							width: width ?? 0,
 							lineLength,

package/src/nodeviews/TableContainer.tsx

@@ -28,7 +28,6 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -117,7 +116,10 @@ const AlignmentTableContainer = ({
 		useAlignmentTableContainerSharedState(pluginInjectionApi);
 
 	useEffect(() => {
-		if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
+		if (
+			!tableState &&
+			expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)
+		) {
 			return;
 		}
 

package/src/tablePlugin.tsx

@@ -582,7 +582,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 			popupsScrollableElement,
 			dispatchAnalyticsEvent,
 		}) {
-			if (expValEquals('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
+			if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
 				return (
 					<ContentComponent
 						api={api}

package/src/ui/ContentComponent.tsx

@@ -7,6 +7,10 @@ import {
 } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
+import {
+	type NamedPluginStatesFromInjectionAPI,
+	useSharedPluginStateWithSelector,
+} from '@atlaskit/editor-common/hooks';
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import {
 	type ExtractInjectionAPI,
@@ -17,7 +21,9 @@ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
+import type tablePlugin from '../tablePlugin';
 import { type TablePlugin, type TablePluginOptions } from '../tablePluginType';
+import { type TableSharedStateInternal } from '../types';
 
 import FloatingContextualButton from './FloatingContextualButton';
 import FloatingContextualMenu from './FloatingContextualMenu';
@@ -28,7 +34,6 @@ import FloatingDragMenu from './FloatingDragMenu';
 import FloatingInsertButton from './FloatingInsertButton';
 import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './global-styles';
-import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
 import { SizeSelector } from './SizeSelector';
 import { FullWidthDisplay } from './TableFullWidthLabel';
 
@@ -45,6 +50,41 @@ export type ContentComponentProps = {
 	defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
 };
 
+const selector = (
+	states: NamedPluginStatesFromInjectionAPI<ExtractInjectionAPI<typeof tablePlugin>, ''> & {
+		tableState: TableSharedStateInternal | undefined;
+	},
+) => ({
+	resizingTableLocalId: states.tableState?.resizingTableLocalId,
+	resizingTableRef: states.tableState?.resizingTableRef,
+	isTableResizing: states.tableState?.isTableResizing,
+	isResizing: states.tableState?.isResizing,
+	widthToWidest: states.tableState?.widthToWidest,
+	tableNode: states.tableState?.tableNode,
+	targetCellPosition: states.tableState?.targetCellPosition,
+	isContextualMenuOpen: states.tableState?.isContextualMenuOpen,
+	tableRef: states.tableState?.tableRef,
+	pluginConfig: states.tableState?.pluginConfig,
+	insertColumnButtonIndex: states.tableState?.insertColumnButtonIndex,
+	insertRowButtonIndex: states.tableState?.insertRowButtonIndex,
+	isHeaderColumnEnabled: states.tableState?.isHeaderColumnEnabled,
+	isHeaderRowEnabled: states.tableState?.isHeaderRowEnabled,
+	isDragAndDropEnabled: states.tableState?.isDragAndDropEnabled,
+	tableWrapperTarget: states.tableState?.tableWrapperTarget,
+	isCellMenuOpenByKeyboard: states.tableState?.isCellMenuOpenByKeyboard,
+	stickyHeader: states.tableState?.stickyHeader,
+	dragMenuDirection: states.tableState?.dragMenuDirection,
+	dragMenuIndex: states.tableState?.dragMenuIndex,
+	isDragMenuOpen: states.tableState?.isDragMenuOpen,
+	isSizeSelectorOpen: states.tableState?.isSizeSelectorOpen,
+	sizeSelectorTargetRef: states.tableState?.sizeSelectorTargetRef,
+
+	// IMPORTANT: hovered states are used by FloatingDragMenu component to render popup in the correct location
+	hoveredRows: states.tableState?.hoveredRows,
+	hoveredColumns: states.tableState?.hoveredColumns,
+	hoveredCell: states.tableState?.hoveredCell,
+});
+
 const ContentComponentInternal = ({
 	api,
 	editorView,
@@ -60,42 +100,34 @@ const ContentComponentInternal = ({
 	const editorAnalyticsAPI = api?.analytics?.actions;
 	const ariaNotifyPlugin = api?.accessibilityUtils?.actions.ariaNotify;
 
-	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 {
+		resizingTableLocalId,
+		resizingTableRef,
+		isTableResizing,
+		isResizing,
+		widthToWidest,
+		tableNode,
+		targetCellPosition,
+		isContextualMenuOpen,
+		tableRef,
+		pluginConfig,
+		insertColumnButtonIndex,
+		insertRowButtonIndex,
+		isHeaderColumnEnabled,
+		isHeaderRowEnabled,
+		isDragAndDropEnabled,
+		tableWrapperTarget,
+		isCellMenuOpenByKeyboard,
+		stickyHeader,
+		dragMenuDirection,
+		dragMenuIndex,
+		isDragMenuOpen,
+		isSizeSelectorOpen,
+		sizeSelectorTargetRef,
+	} = useSharedPluginStateWithSelector(api, ['table'], selector);
 
 	const { allowControls } = pluginConfig ?? {};
 
-	const stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader');
-
-	const dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection');
-	const dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
-	const isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
-
-	const isSizeSelectorOpen = useInternalTablePluginStateSelector(api, 'isSizeSelectorOpen');
-	const sizeSelectorTargetRef = useInternalTablePluginStateSelector(api, 'sizeSelectorTargetRef');
-
 	return (
 		<>
 			{targetCellPosition &&

package/src/ui/DragHandle/index.tsx

@@ -20,6 +20,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { token } from '@atlaskit/tokens';
 
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
@@ -250,6 +251,11 @@ const DragHandleComponent = ({
 					}
 				}}
 				onClick={onClick}
+				aria-label={
+					expValEquals('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true)
+						? formatMessage(messages.dragHandleZone)
+						: undefined
+				}
 			/>
 			<button
 				type="button"

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -44,6 +44,7 @@ import {
 import PaintBucketIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Toggle from '@atlaskit/toggle';
 
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../pm-plugins/commands';
@@ -447,6 +448,15 @@ const DragMenu = React.memo(
 							<div css={toggleStyles}>
 								<Toggle
 									id="toggle-header-column"
+									label={
+										expValEquals(
+											'platform_editor_enghealth_table_plugin_lable_rule',
+											'isEnabled',
+											true,
+										)
+											? formatMessage(messages.headerColumn)
+											: undefined
+									}
 									onChange={toggleHeaderColumn}
 									isChecked={checkIfHeaderColumnEnabled(selection)}
 								/>
@@ -462,6 +472,15 @@ const DragMenu = React.memo(
 							<div css={toggleStyles}>
 								<Toggle
 									id="toggle-header-row"
+									label={
+										expValEquals(
+											'platform_editor_enghealth_table_plugin_lable_rule',
+											'isEnabled',
+											true,
+										)
+											? formatMessage(messages.headerRow)
+											: undefined
+									}
 									onChange={toggleHeaderRow}
 									isChecked={checkIfHeaderRowEnabled(selection)}
 								/>
@@ -480,6 +499,11 @@ const DragMenu = React.memo(
 					<div css={toggleStyles}>
 						<Toggle
 							id="toggle-row-numbers"
+							label={
+								expValEquals('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true)
+									? formatMessage(messages.numberedColumn)
+									: undefined
+							}
 							onChange={toggleRowNumbers}
 							isChecked={checkIfNumberColumnEnabled(selection)}
 						/>