@atlaskit/editor-plugin-table 10.9.20 → 10.9.22

package/dist/esm/ui/ContentComponent.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+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 { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import FloatingContextualButton from './FloatingContextualButton';
@@ -13,9 +15,10 @@ 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 ContentComponentInternal = function ContentComponentInternal(_ref) {
-  var _api$analytics, _api$accessibilityUti;
+  var _api$analytics, _api$accessibilityUti, _api$analytics2;
   var api = _ref.api,
     editorView = _ref.editorView,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
@@ -23,75 +26,36 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsScrollableElement = _ref.popupsScrollableElement,
+    isTableSelectorEnabled = _ref.isTableSelectorEnabled,
     defaultGetEditorContainerWidth = _ref.defaultGetEditorContainerWidth,
     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', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isResizing = useInternalTablePluginStateSelector(api, 'isResizing', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var tableNode = useInternalTablePluginStateSelector(api, 'tableNode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var tableRef = useInternalTablePluginStateSelector(api, 'tableRef', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var insertColumnButtonIndex = useInternalTablePluginStateSelector(api, 'insertColumnButtonIndex', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
+  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 _ref2 = pluginConfig !== null && pluginConfig !== void 0 ? pluginConfig : {},
     allowControls = _ref2.allowControls;
-  var stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
+  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,
@@ -170,13 +134,22 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     api: api
   }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
     target: resizingTableRef,
-    content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
+    content: editorExperiment('single_column_layouts', true) ? /*#__PURE__*/React.createElement(ResizerBreakoutModeLabel, {
+      layout: "full-width"
+    }) : /*#__PURE__*/React.createElement(FullWidthDisplay, null),
     alignX: 'center',
     alignY: 'bottom',
     stick: true,
     forcePlacement: true,
     zIndex: akEditorFloatingPanelZIndex,
     offset: [0, 10]
+  }), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/React.createElement(SizeSelector, {
+    api: api,
+    isOpenedByKeyboard: false,
+    popupsMountPoint: popupsMountPoint,
+    target: sizeSelectorTargetRef !== null && sizeSelectorTargetRef !== void 0 ? sizeSelectorTargetRef : getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions),
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement
   }));
 };
 export var ContentComponent = function ContentComponent(_ref3) {
@@ -188,6 +161,7 @@ export var ContentComponent = function ContentComponent(_ref3) {
     popupsMountPoint = _ref3.popupsMountPoint,
     popupsBoundariesElement = _ref3.popupsBoundariesElement,
     popupsScrollableElement = _ref3.popupsScrollableElement,
+    isTableSelectorEnabled = _ref3.isTableSelectorEnabled,
     defaultGetEditorContainerWidth = _ref3.defaultGetEditorContainerWidth,
     defaultGetEditorFeatureFlags = _ref3.defaultGetEditorFeatureFlags;
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
@@ -206,6 +180,7 @@ export var ContentComponent = function ContentComponent(_ref3) {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,
+    isTableSelectorEnabled: isTableSelectorEnabled,
     defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
     defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
   }));

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

@@ -7,13 +7,12 @@ import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/browser';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugins/utils/merged-cells';
@@ -245,6 +244,22 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     height: previewHeight
   }), previewContainer));
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var hoveredColumns = useInternalTablePluginStateSelector(api, 'hoveredColumns');
+  var hoveredRows = useInternalTablePluginStateSelector(api, 'hoveredRows');
+  return {
+    hoveredColumns: hoveredColumns,
+    hoveredRows: hoveredRows
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['table']),
+    tableState = _useSharedPluginState.tableState;
+  var tableStateInternal = tableState;
+  return {
+    hoveredColumns: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredColumns,
+    hoveredRows: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredRows
+  };
+});
 var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedState(_ref5) {
   var isDragMenuTarget = _ref5.isDragMenuTarget,
     tableLocalId = _ref5.tableLocalId,
@@ -262,22 +277,9 @@ var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedS
     editorView = _ref5.editorView,
     intl = _ref5.intl,
     api = _ref5.api;
-  var _ref6 = useSharedPluginState(api, ['table'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    tableState = _ref6.tableState;
-
-  // hoveredColumns
-  var hoveredColumnsSelector = useInternalTablePluginStateSelector(api, 'hoveredColumns', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var hoveredColumns = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredColumnsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns;
-
-  // hoveredRows
-  var hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows;
+  var _useSharedState = useSharedState(api),
+    hoveredColumns = _useSharedState.hoveredColumns,
+    hoveredRows = _useSharedState.hoveredRows;
   return /*#__PURE__*/React.createElement(DragHandleComponent, {
     isDragMenuTarget: isDragMenuTarget,
     tableLocalId: tableLocalId,

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

@@ -1,14 +1,13 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { useCallback, useMemo, useRef } from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../pm-plugins/commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
@@ -25,6 +24,18 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   }
   return [];
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var selection = useSharedPluginStateSelector(api, 'selection.selection');
+  return {
+    selection: selection
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 export var ColumnControls = function ColumnControls(_ref) {
   var _colWidths$map$join;
   var editorView = _ref.editorView,
@@ -43,16 +54,8 @@ export var ColumnControls = function ColumnControls(_ref) {
     getScrollOffset = _ref.getScrollOffset,
     api = _ref.api;
   var columnControlsRef = useRef(null);
-
-  // selection
-  var _useSharedPluginState = useSharedPluginState(api, ['selection'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    selectionState = _useSharedPluginState.selectionState;
-  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+  var _useSharedState = useSharedState(api),
+    selection = _useSharedState.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

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

@@ -1,11 +1,10 @@
 import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { TableCssClassName as ClassName } from '../../../types';
 var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
@@ -51,21 +50,26 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     className: ClassName.DRAG_CORNER_BUTTON_INNER
   }));
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  return {
+    selection: selectionsSelector
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 var DragCornerControlsComponentWithSelection = function DragCornerControlsComponentWithSelection(_ref2) {
   var editorView = _ref2.editorView,
     isInDanger = _ref2.isInDanger,
     isResizing = _ref2.isResizing,
     formatMessage = _ref2.intl.formatMessage,
     api = _ref2.api;
-  // selection
-  var _useSharedPluginState = useSharedPluginState(api, ['selection'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    selectionState = _useSharedPluginState.selectionState;
-  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+  var _useSharedState = useSharedState(api),
+    selection = _useSharedState.selection;
   var handleOnClick = function handleOnClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;

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

@@ -1,9 +1,20 @@
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CornerControls } from './CornerControls/ClassicCornerControls';
 import { RowControls } from './RowControls/ClassicControls';
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  return {
+    selection: selectionsSelector
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 export var FloatingControlsWithSelection = function FloatingControlsWithSelection(_ref) {
   var editorView = _ref.editorView,
     tableRef = _ref.tableRef,
@@ -17,15 +28,8 @@ export var FloatingControlsWithSelection = function FloatingControlsWithSelectio
     selectRow = _ref.selectRow,
     tableActive = _ref.tableActive,
     api = _ref.api;
-  // selection
-  var _useSharedPluginState = useSharedPluginState(api, ['selection'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    selectionState = _useSharedPluginState.selectionState;
-  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+  var _useSharedState = useSharedState(api),
+    selection = _useSharedState.selection;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
     editorView: editorView,
     tableRef: tableRef,

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

@@ -2,13 +2,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
@@ -279,6 +278,18 @@ export var DragControls = function DragControls(_ref) {
     }), rowHandles())
   );
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  return {
+    selection: selectionsSelector
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 export var DragControlsWithSelection = function DragControlsWithSelection(_ref5) {
   var editorView = _ref5.editorView,
     tableRef = _ref5.tableRef,
@@ -294,15 +305,8 @@ export var DragControlsWithSelection = function DragControlsWithSelection(_ref5)
     selectRows = _ref5.selectRows,
     updateCellHoverLocation = _ref5.updateCellHoverLocation,
     api = _ref5.api;
-  // selection
-  var _useSharedPluginState = useSharedPluginState(api, ['selection'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    selectionState = _useSharedPluginState.selectionState;
-  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+  var _useSharedState = useSharedState(api),
+    selection = _useSharedState.selection;
   return /*#__PURE__*/React.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,

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

@@ -4,23 +4,27 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { Global, jsx } from '@emotion/react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { tableStyles } from './common-styles';
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  return {
+    mode: mode
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
   var featureFlags = _ref.featureFlags,
     isDragAndDropEnabledOption = _ref.isDragAndDropEnabledOption,
     api = _ref.api;
-  // mode
-  var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
-  var modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  var _useSharedState = useSharedState(api),
+    mode = _useSharedState.mode;
   var isLivePageViewMode = mode === 'view';
   return jsx(Global, {
     styles: tableStyles({

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

@@ -1,19 +1,22 @@
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { SortingIcon } from '@atlaskit/editor-common/table';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-export var SortingIconWrapper = function SortingIconWrapper(props) {
-  var _useSharedPluginState = useSharedPluginState(props.api, ['editorViewMode'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  return {
+    mode: mode
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode']),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
-
-  // mode
-  var modeSelector = useSharedPluginStateSelector(props.api, 'editorViewMode.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
+export var SortingIconWrapper = function SortingIconWrapper(props) {
+  var _useSharedState = useSharedState(props.api),
+    mode = _useSharedState.mode;
   if (mode === 'edit') {
     return null;
   }

package/dist/types/types/index.d.ts

@@ -44,6 +44,8 @@ export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEn
     dragMenuDirection?: TableDirection;
     dragMenuIndex?: number;
     isDragMenuOpen?: boolean;
+    isSizeSelectorOpen?: boolean;
+    sizeSelectorTargetRef?: HTMLElement;
 };
 export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'>;
 export type AlignmentOptions = 'center' | 'align-start';

package/dist/types/ui/ContentComponent.d.ts

@@ -11,7 +11,8 @@ export type ContentComponentProps = {
     popupsMountPoint?: HTMLElement;
     popupsBoundariesElement?: HTMLElement;
     popupsScrollableElement?: HTMLElement;
+    isTableSelectorEnabled: boolean | undefined;
     defaultGetEditorContainerWidth: GetEditorContainerWidth;
     defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
 };
-export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;
+export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, isTableSelectorEnabled, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;

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

@@ -16,5 +16,5 @@ type Options = {
  * @param key Key of TableSharedStateInternal to select
  * @returns
  */
-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" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "stickyHeader">(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" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "stickyHeader" | "isSizeSelectorOpen" | "sizeSelectorTargetRef">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
 export {};

package/dist/types-ts4.5/types/index.d.ts

@@ -44,6 +44,8 @@ export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEn
     dragMenuDirection?: TableDirection;
     dragMenuIndex?: number;
     isDragMenuOpen?: boolean;
+    isSizeSelectorOpen?: boolean;
+    sizeSelectorTargetRef?: HTMLElement;
 };
 export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'>;
 export type AlignmentOptions = 'center' | 'align-start';

package/dist/types-ts4.5/ui/ContentComponent.d.ts

@@ -11,7 +11,8 @@ export type ContentComponentProps = {
     popupsMountPoint?: HTMLElement;
     popupsBoundariesElement?: HTMLElement;
     popupsScrollableElement?: HTMLElement;
+    isTableSelectorEnabled: boolean | undefined;
     defaultGetEditorContainerWidth: GetEditorContainerWidth;
     defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
 };
-export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;
+export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, isTableSelectorEnabled, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;

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

@@ -16,5 +16,5 @@ type Options = {
  * @param key Key of TableSharedStateInternal to select
  * @returns
  */
-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" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "stickyHeader">(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" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "stickyHeader" | "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": "10.9.20",
+	"version": "10.9.22",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,10 +32,10 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^105.0.0",
+		"@atlaskit/editor-common": "^105.2.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
-		"@atlaskit/editor-plugin-analytics": "^2.2.0",
+		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^14.7.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.19.0",
+		"@atlaskit/tmp-editor-statsig": "^4.21.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
@@ -144,9 +144,6 @@
 		"platform_editor_nested_tables_view_mode_sort": {
 			"type": "boolean"
 		},
-		"platform_editor_nested_tables_bodied_extension_fix": {
-			"type": "boolean"
-		},
 		"platform_editor_nested_table_drag_controls": {
 			"type": "boolean"
 		},