@atlaskit/editor-plugin-table 12.1.4 → 12.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/nodeviews/TableComponentWithSharedState.js +3 -2
  3. package/dist/cjs/nodeviews/TableContainer.js +1 -2
  4. package/dist/cjs/tablePlugin.js +1 -1
  5. package/dist/cjs/ui/ContentComponent.js +57 -24
  6. package/dist/es2019/nodeviews/TableComponentWithSharedState.js +3 -2
  7. package/dist/es2019/nodeviews/TableContainer.js +1 -2
  8. package/dist/es2019/tablePlugin.js +1 -1
  9. package/dist/es2019/ui/ContentComponent.js +58 -24
  10. package/dist/esm/nodeviews/TableComponentWithSharedState.js +3 -2
  11. package/dist/esm/nodeviews/TableContainer.js +1 -2
  12. package/dist/esm/tablePlugin.js +1 -1
  13. package/dist/esm/ui/ContentComponent.js +57 -24
  14. package/dist/types/ui/hooks/useInternalTablePluginStateSelector.d.ts +1 -1
  15. package/dist/types-ts4.5/ui/hooks/useInternalTablePluginStateSelector.d.ts +1 -1
  16. package/package.json +3 -3
  17. package/src/nodeviews/TableComponentWithSharedState.tsx +6 -2
  18. package/src/nodeviews/TableContainer.tsx +4 -2
  19. package/src/tablePlugin.tsx +1 -1
  20. package/src/ui/ContentComponent.tsx +66 -34
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 12.1.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#190588](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190588)
8
+ [`b22e308cfd320`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b22e308cfd320) -
9
+ Replace experiment key platform_editor_useSharedPluginStateSelector with
10
+ platform_editor_useSharedPluginStateWithSelector
11
+ - Updated dependencies
12
+
3
13
  ## 12.1.4
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/nodeviews/TableComponentWithSharedState.js CHANGED
@@ -8,6 +8,7 @@ exports.TableComponentWithSharedState = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _hooks = require("@atlaskit/editor-common/hooks");
10
10
  var _editorTables = require("@atlaskit/editor-tables");
11
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
11
12
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
12
13
  var _TableComponent = _interopRequireDefault(require("./TableComponent"));
13
14
  // Ignored via go/ees005
@@ -147,7 +148,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
147
148
  width = _useSharedState.width,
148
149
  interaction = _useSharedState.interaction;
149
150
  var isLivePageViewMode = mode === 'view';
150
- if ((0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false) && !tableState) {
151
+ if ((0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false) && !tableState) {
151
152
  return null;
152
153
  }
153
154
 
@@ -183,7 +184,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
183
184
  ordering: ordering,
184
185
  isResizing: isResizing,
185
186
  getNode: getNode,
186
- containerWidth: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? {
187
+ containerWidth: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstatewithselector', true) ? {
187
188
  width: width !== null && width !== void 0 ? width : 0,
188
189
  lineLength: lineLength
189
190
  } :
package/dist/cjs/nodeviews/TableContainer.js CHANGED
@@ -16,7 +16,6 @@ var _nodeWidth = require("@atlaskit/editor-common/node-width");
16
16
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
17
17
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
18
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
19
- var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
20
19
  var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
21
20
  var _pluginFactory = require("../pm-plugins/plugin-factory");
22
21
  var _consts = require("../pm-plugins/table-resizing/utils/consts");
@@ -79,7 +78,7 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
79
78
  isFullWidthModeEnabled = _useAlignmentTableCon.isFullWidthModeEnabled,
80
79
  wasFullWidthModeEnabled = _useAlignmentTableCon.wasFullWidthModeEnabled;
81
80
  (0, _react.useEffect)(function () {
82
- if (!tableState && (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)) {
81
+ if (!tableState && (0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
83
82
  return;
84
83
  }
85
84
  if (editorView && getPos) {
package/dist/cjs/tablePlugin.js CHANGED
@@ -472,7 +472,7 @@ var tablePlugin = function tablePlugin(_ref) {
472
472
  popupsBoundariesElement = _ref18.popupsBoundariesElement,
473
473
  popupsScrollableElement = _ref18.popupsScrollableElement,
474
474
  dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
475
- if ((0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
475
+ if ((0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
476
476
  return /*#__PURE__*/_react.default.createElement(_ContentComponent.ContentComponent, {
477
477
  api: api,
478
478
  editorView: editorView,
package/dist/cjs/ui/ContentComponent.js CHANGED
@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
9
9
  var _analytics = require("@atlaskit/editor-common/analytics");
10
10
  var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
11
11
  var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-selection");
12
+ var _hooks = require("@atlaskit/editor-common/hooks");
12
13
  var _resizer = require("@atlaskit/editor-common/resizer");
13
14
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
14
15
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -19,12 +20,43 @@ var _FloatingDragMenu = _interopRequireDefault(require("./FloatingDragMenu"));
19
20
  var _FloatingInsertButton = _interopRequireDefault(require("./FloatingInsertButton"));
20
21
  var _FloatingToolbarLabel = require("./FloatingToolbarLabel/FloatingToolbarLabel");
21
22
  var _globalStyles = require("./global-styles");
22
- var _useInternalTablePluginStateSelector = require("./hooks/useInternalTablePluginStateSelector");
23
23
  var _SizeSelector = require("./SizeSelector");
24
24
  var _TableFullWidthLabel = require("./TableFullWidthLabel");
25
25
  // Ignored via go/ees005
26
26
  // eslint-disable-next-line import/no-named-as-default
27
27
 
28
+ var selector = function selector(states) {
29
+ 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;
30
+ return {
31
+ resizingTableLocalId: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.resizingTableLocalId,
32
+ resizingTableRef: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.resizingTableRef,
33
+ isTableResizing: (_states$tableState3 = states.tableState) === null || _states$tableState3 === void 0 ? void 0 : _states$tableState3.isTableResizing,
34
+ isResizing: (_states$tableState4 = states.tableState) === null || _states$tableState4 === void 0 ? void 0 : _states$tableState4.isResizing,
35
+ widthToWidest: (_states$tableState5 = states.tableState) === null || _states$tableState5 === void 0 ? void 0 : _states$tableState5.widthToWidest,
36
+ tableNode: (_states$tableState6 = states.tableState) === null || _states$tableState6 === void 0 ? void 0 : _states$tableState6.tableNode,
37
+ targetCellPosition: (_states$tableState7 = states.tableState) === null || _states$tableState7 === void 0 ? void 0 : _states$tableState7.targetCellPosition,
38
+ isContextualMenuOpen: (_states$tableState8 = states.tableState) === null || _states$tableState8 === void 0 ? void 0 : _states$tableState8.isContextualMenuOpen,
39
+ tableRef: (_states$tableState9 = states.tableState) === null || _states$tableState9 === void 0 ? void 0 : _states$tableState9.tableRef,
40
+ pluginConfig: (_states$tableState0 = states.tableState) === null || _states$tableState0 === void 0 ? void 0 : _states$tableState0.pluginConfig,
41
+ insertColumnButtonIndex: (_states$tableState1 = states.tableState) === null || _states$tableState1 === void 0 ? void 0 : _states$tableState1.insertColumnButtonIndex,
42
+ insertRowButtonIndex: (_states$tableState10 = states.tableState) === null || _states$tableState10 === void 0 ? void 0 : _states$tableState10.insertRowButtonIndex,
43
+ isHeaderColumnEnabled: (_states$tableState11 = states.tableState) === null || _states$tableState11 === void 0 ? void 0 : _states$tableState11.isHeaderColumnEnabled,
44
+ isHeaderRowEnabled: (_states$tableState12 = states.tableState) === null || _states$tableState12 === void 0 ? void 0 : _states$tableState12.isHeaderRowEnabled,
45
+ isDragAndDropEnabled: (_states$tableState13 = states.tableState) === null || _states$tableState13 === void 0 ? void 0 : _states$tableState13.isDragAndDropEnabled,
46
+ tableWrapperTarget: (_states$tableState14 = states.tableState) === null || _states$tableState14 === void 0 ? void 0 : _states$tableState14.tableWrapperTarget,
47
+ isCellMenuOpenByKeyboard: (_states$tableState15 = states.tableState) === null || _states$tableState15 === void 0 ? void 0 : _states$tableState15.isCellMenuOpenByKeyboard,
48
+ stickyHeader: (_states$tableState16 = states.tableState) === null || _states$tableState16 === void 0 ? void 0 : _states$tableState16.stickyHeader,
49
+ dragMenuDirection: (_states$tableState17 = states.tableState) === null || _states$tableState17 === void 0 ? void 0 : _states$tableState17.dragMenuDirection,
50
+ dragMenuIndex: (_states$tableState18 = states.tableState) === null || _states$tableState18 === void 0 ? void 0 : _states$tableState18.dragMenuIndex,
51
+ isDragMenuOpen: (_states$tableState19 = states.tableState) === null || _states$tableState19 === void 0 ? void 0 : _states$tableState19.isDragMenuOpen,
52
+ isSizeSelectorOpen: (_states$tableState20 = states.tableState) === null || _states$tableState20 === void 0 ? void 0 : _states$tableState20.isSizeSelectorOpen,
53
+ sizeSelectorTargetRef: (_states$tableState21 = states.tableState) === null || _states$tableState21 === void 0 ? void 0 : _states$tableState21.sizeSelectorTargetRef,
54
+ // IMPORTANT: hovered states are used by FloatingDragMenu component to render popup in the correct location
55
+ hoveredRows: (_states$tableState22 = states.tableState) === null || _states$tableState22 === void 0 ? void 0 : _states$tableState22.hoveredRows,
56
+ hoveredColumns: (_states$tableState23 = states.tableState) === null || _states$tableState23 === void 0 ? void 0 : _states$tableState23.hoveredColumns,
57
+ hoveredCell: (_states$tableState24 = states.tableState) === null || _states$tableState24 === void 0 ? void 0 : _states$tableState24.hoveredCell
58
+ };
59
+ };
28
60
  var ContentComponentInternal = function ContentComponentInternal(_ref) {
29
61
  var _api$analytics, _api$accessibilityUti, _api$analytics2;
30
62
  var api = _ref.api,
@@ -39,31 +71,32 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
39
71
  defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
40
72
  var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
41
73
  var ariaNotifyPlugin = api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
42
- var resizingTableLocalId = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'resizingTableLocalId');
43
- var resizingTableRef = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'resizingTableRef');
44
- var isTableResizing = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isTableResizing');
45
- var isResizing = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isResizing');
46
- var widthToWidest = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'widthToWidest');
47
- var tableNode = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'tableNode');
48
- var targetCellPosition = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'targetCellPosition');
49
- var isContextualMenuOpen = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isContextualMenuOpen');
50
- var tableRef = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'tableRef');
51
- var pluginConfig = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'pluginConfig');
52
- var insertColumnButtonIndex = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'insertColumnButtonIndex');
53
- var insertRowButtonIndex = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'insertRowButtonIndex');
54
- var isHeaderColumnEnabled = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isHeaderColumnEnabled');
55
- var isHeaderRowEnabled = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isHeaderRowEnabled');
56
- var isDragAndDropEnabled = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isDragAndDropEnabled');
57
- var tableWrapperTarget = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'tableWrapperTarget');
58
- var isCellMenuOpenByKeyboard = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isCellMenuOpenByKeyboard');
74
+ var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['table'], selector),
75
+ resizingTableLocalId = _useSharedPluginState.resizingTableLocalId,
76
+ resizingTableRef = _useSharedPluginState.resizingTableRef,
77
+ isTableResizing = _useSharedPluginState.isTableResizing,
78
+ isResizing = _useSharedPluginState.isResizing,
79
+ widthToWidest = _useSharedPluginState.widthToWidest,
80
+ tableNode = _useSharedPluginState.tableNode,
81
+ targetCellPosition = _useSharedPluginState.targetCellPosition,
82
+ isContextualMenuOpen = _useSharedPluginState.isContextualMenuOpen,
83
+ tableRef = _useSharedPluginState.tableRef,
84
+ pluginConfig = _useSharedPluginState.pluginConfig,
85
+ insertColumnButtonIndex = _useSharedPluginState.insertColumnButtonIndex,
86
+ insertRowButtonIndex = _useSharedPluginState.insertRowButtonIndex,
87
+ isHeaderColumnEnabled = _useSharedPluginState.isHeaderColumnEnabled,
88
+ isHeaderRowEnabled = _useSharedPluginState.isHeaderRowEnabled,
89
+ isDragAndDropEnabled = _useSharedPluginState.isDragAndDropEnabled,
90
+ tableWrapperTarget = _useSharedPluginState.tableWrapperTarget,
91
+ isCellMenuOpenByKeyboard = _useSharedPluginState.isCellMenuOpenByKeyboard,
92
+ stickyHeader = _useSharedPluginState.stickyHeader,
93
+ dragMenuDirection = _useSharedPluginState.dragMenuDirection,
94
+ dragMenuIndex = _useSharedPluginState.dragMenuIndex,
95
+ isDragMenuOpen = _useSharedPluginState.isDragMenuOpen,
96
+ isSizeSelectorOpen = _useSharedPluginState.isSizeSelectorOpen,
97
+ sizeSelectorTargetRef = _useSharedPluginState.sizeSelectorTargetRef;
59
98
  var _ref2 = pluginConfig !== null && pluginConfig !== void 0 ? pluginConfig : {},
60
99
  allowControls = _ref2.allowControls;
61
- var stickyHeader = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'stickyHeader');
62
- var dragMenuDirection = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'dragMenuDirection');
63
- var dragMenuIndex = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'dragMenuIndex');
64
- var isDragMenuOpen = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isDragMenuOpen');
65
- var isSizeSelectorOpen = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isSizeSelectorOpen');
66
- var sizeSelectorTargetRef = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'sizeSelectorTargetRef');
67
100
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
68
101
  isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
69
102
  editorView: editorView,
package/dist/es2019/nodeviews/TableComponentWithSharedState.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
3
  import { findTable } from '@atlaskit/editor-tables';
4
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
5
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
5
6
  import TableComponent from './TableComponent';
6
7
 
@@ -145,7 +146,7 @@ export const TableComponentWithSharedState = ({
145
146
  interaction
146
147
  } = useSharedState(api);
147
148
  const isLivePageViewMode = mode === 'view';
148
- if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
149
+ if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false) && !tableState) {
149
150
  return null;
150
151
  }
151
152
 
@@ -181,7 +182,7 @@ export const TableComponentWithSharedState = ({
181
182
  ordering: ordering,
182
183
  isResizing: isResizing,
183
184
  getNode: getNode,
184
- containerWidth: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? {
185
+ containerWidth: editorExperiment('platform_editor_usesharedpluginstatewithselector', true) ? {
185
186
  width: width !== null && width !== void 0 ? width : 0,
186
187
  lineLength
187
188
  } :
package/dist/es2019/nodeviews/TableContainer.js CHANGED
@@ -7,7 +7,6 @@ import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
7
7
  import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
8
8
  import { fg } from '@atlaskit/platform-feature-flags';
9
9
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
11
10
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
12
11
  import { getPluginState } from '../pm-plugins/plugin-factory';
13
12
  import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
@@ -74,7 +73,7 @@ const AlignmentTableContainer = ({
74
73
  wasFullWidthModeEnabled
75
74
  } = useAlignmentTableContainerSharedState(pluginInjectionApi);
76
75
  useEffect(() => {
77
- if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
76
+ if (!tableState && expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
78
77
  return;
79
78
  }
80
79
  if (editorView && getPos) {
package/dist/es2019/tablePlugin.js CHANGED
@@ -463,7 +463,7 @@ const tablePlugin = ({
463
463
  dispatchAnalyticsEvent
464
464
  }) {
465
465
  var _api$featureFlags;
466
- if (expValEquals('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
466
+ if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
467
467
  return /*#__PURE__*/React.createElement(ContentComponent, {
468
468
  api: api,
469
469
  editorView: editorView,
package/dist/es2019/ui/ContentComponent.js CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
3
3
  import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
4
4
  import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
5
+ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
5
6
  import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
6
7
  import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
7
8
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -14,9 +15,40 @@ import FloatingDragMenu from './FloatingDragMenu';
14
15
  import FloatingInsertButton from './FloatingInsertButton';
15
16
  import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
16
17
  import { GlobalStylesWrapper } from './global-styles';
17
- import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
18
18
  import { SizeSelector } from './SizeSelector';
19
19
  import { FullWidthDisplay } from './TableFullWidthLabel';
20
+ const selector = states => {
21
+ 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;
22
+ return {
23
+ resizingTableLocalId: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.resizingTableLocalId,
24
+ resizingTableRef: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.resizingTableRef,
25
+ isTableResizing: (_states$tableState3 = states.tableState) === null || _states$tableState3 === void 0 ? void 0 : _states$tableState3.isTableResizing,
26
+ isResizing: (_states$tableState4 = states.tableState) === null || _states$tableState4 === void 0 ? void 0 : _states$tableState4.isResizing,
27
+ widthToWidest: (_states$tableState5 = states.tableState) === null || _states$tableState5 === void 0 ? void 0 : _states$tableState5.widthToWidest,
28
+ tableNode: (_states$tableState6 = states.tableState) === null || _states$tableState6 === void 0 ? void 0 : _states$tableState6.tableNode,
29
+ targetCellPosition: (_states$tableState7 = states.tableState) === null || _states$tableState7 === void 0 ? void 0 : _states$tableState7.targetCellPosition,
30
+ isContextualMenuOpen: (_states$tableState8 = states.tableState) === null || _states$tableState8 === void 0 ? void 0 : _states$tableState8.isContextualMenuOpen,
31
+ tableRef: (_states$tableState9 = states.tableState) === null || _states$tableState9 === void 0 ? void 0 : _states$tableState9.tableRef,
32
+ pluginConfig: (_states$tableState0 = states.tableState) === null || _states$tableState0 === void 0 ? void 0 : _states$tableState0.pluginConfig,
33
+ insertColumnButtonIndex: (_states$tableState1 = states.tableState) === null || _states$tableState1 === void 0 ? void 0 : _states$tableState1.insertColumnButtonIndex,
34
+ insertRowButtonIndex: (_states$tableState10 = states.tableState) === null || _states$tableState10 === void 0 ? void 0 : _states$tableState10.insertRowButtonIndex,
35
+ isHeaderColumnEnabled: (_states$tableState11 = states.tableState) === null || _states$tableState11 === void 0 ? void 0 : _states$tableState11.isHeaderColumnEnabled,
36
+ isHeaderRowEnabled: (_states$tableState12 = states.tableState) === null || _states$tableState12 === void 0 ? void 0 : _states$tableState12.isHeaderRowEnabled,
37
+ isDragAndDropEnabled: (_states$tableState13 = states.tableState) === null || _states$tableState13 === void 0 ? void 0 : _states$tableState13.isDragAndDropEnabled,
38
+ tableWrapperTarget: (_states$tableState14 = states.tableState) === null || _states$tableState14 === void 0 ? void 0 : _states$tableState14.tableWrapperTarget,
39
+ isCellMenuOpenByKeyboard: (_states$tableState15 = states.tableState) === null || _states$tableState15 === void 0 ? void 0 : _states$tableState15.isCellMenuOpenByKeyboard,
40
+ stickyHeader: (_states$tableState16 = states.tableState) === null || _states$tableState16 === void 0 ? void 0 : _states$tableState16.stickyHeader,
41
+ dragMenuDirection: (_states$tableState17 = states.tableState) === null || _states$tableState17 === void 0 ? void 0 : _states$tableState17.dragMenuDirection,
42
+ dragMenuIndex: (_states$tableState18 = states.tableState) === null || _states$tableState18 === void 0 ? void 0 : _states$tableState18.dragMenuIndex,
43
+ isDragMenuOpen: (_states$tableState19 = states.tableState) === null || _states$tableState19 === void 0 ? void 0 : _states$tableState19.isDragMenuOpen,
44
+ isSizeSelectorOpen: (_states$tableState20 = states.tableState) === null || _states$tableState20 === void 0 ? void 0 : _states$tableState20.isSizeSelectorOpen,
45
+ sizeSelectorTargetRef: (_states$tableState21 = states.tableState) === null || _states$tableState21 === void 0 ? void 0 : _states$tableState21.sizeSelectorTargetRef,
46
+ // IMPORTANT: hovered states are used by FloatingDragMenu component to render popup in the correct location
47
+ hoveredRows: (_states$tableState22 = states.tableState) === null || _states$tableState22 === void 0 ? void 0 : _states$tableState22.hoveredRows,
48
+ hoveredColumns: (_states$tableState23 = states.tableState) === null || _states$tableState23 === void 0 ? void 0 : _states$tableState23.hoveredColumns,
49
+ hoveredCell: (_states$tableState24 = states.tableState) === null || _states$tableState24 === void 0 ? void 0 : _states$tableState24.hoveredCell
50
+ };
51
+ };
20
52
  const ContentComponentInternal = ({
21
53
  api,
22
54
  editorView,
@@ -32,32 +64,34 @@ const ContentComponentInternal = ({
32
64
  var _api$analytics, _api$accessibilityUti, _api$analytics2;
33
65
  const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
34
66
  const ariaNotifyPlugin = api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
35
- const resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId');
36
- const resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef');
37
- const isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing');
38
- const isResizing = useInternalTablePluginStateSelector(api, 'isResizing');
39
- const widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest');
40
- const tableNode = useInternalTablePluginStateSelector(api, 'tableNode');
41
- const targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition');
42
- const isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen');
43
- const tableRef = useInternalTablePluginStateSelector(api, 'tableRef');
44
- const pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig');
45
- const insertColumnButtonIndex = useInternalTablePluginStateSelector(api, 'insertColumnButtonIndex');
46
- const insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex');
47
- const isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled');
48
- const isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled');
49
- const isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled');
50
- const tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget');
51
- const isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
67
+ const {
68
+ resizingTableLocalId,
69
+ resizingTableRef,
70
+ isTableResizing,
71
+ isResizing,
72
+ widthToWidest,
73
+ tableNode,
74
+ targetCellPosition,
75
+ isContextualMenuOpen,
76
+ tableRef,
77
+ pluginConfig,
78
+ insertColumnButtonIndex,
79
+ insertRowButtonIndex,
80
+ isHeaderColumnEnabled,
81
+ isHeaderRowEnabled,
82
+ isDragAndDropEnabled,
83
+ tableWrapperTarget,
84
+ isCellMenuOpenByKeyboard,
85
+ stickyHeader,
86
+ dragMenuDirection,
87
+ dragMenuIndex,
88
+ isDragMenuOpen,
89
+ isSizeSelectorOpen,
90
+ sizeSelectorTargetRef
91
+ } = useSharedPluginStateWithSelector(api, ['table'], selector);
52
92
  const {
53
93
  allowControls
54
94
  } = pluginConfig !== null && pluginConfig !== void 0 ? pluginConfig : {};
55
- const stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader');
56
- const dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection');
57
- const dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
58
- const isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
59
- const isSizeSelectorOpen = useInternalTablePluginStateSelector(api, 'isSizeSelectorOpen');
60
- const sizeSelectorTargetRef = useInternalTablePluginStateSelector(api, 'sizeSelectorTargetRef');
61
95
  return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
62
96
  isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
63
97
  editorView: editorView,
package/dist/esm/nodeviews/TableComponentWithSharedState.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
3
  import { findTable } from '@atlaskit/editor-tables';
4
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
5
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
5
6
  import TableComponent from './TableComponent';
6
7
 
@@ -141,7 +142,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
141
142
  width = _useSharedState.width,
142
143
  interaction = _useSharedState.interaction;
143
144
  var isLivePageViewMode = mode === 'view';
144
- if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
145
+ if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false) && !tableState) {
145
146
  return null;
146
147
  }
147
148
 
@@ -177,7 +178,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
177
178
  ordering: ordering,
178
179
  isResizing: isResizing,
179
180
  getNode: getNode,
180
- containerWidth: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? {
181
+ containerWidth: editorExperiment('platform_editor_usesharedpluginstatewithselector', true) ? {
181
182
  width: width !== null && width !== void 0 ? width : 0,
182
183
  lineLength: lineLength
183
184
  } :
package/dist/esm/nodeviews/TableContainer.js CHANGED
@@ -8,7 +8,6 @@ import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
8
8
  import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
9
9
  import { fg } from '@atlaskit/platform-feature-flags';
10
10
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
11
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
12
11
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
13
12
  import { getPluginState } from '../pm-plugins/plugin-factory';
14
13
  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) {
70
69
  isFullWidthModeEnabled = _useAlignmentTableCon.isFullWidthModeEnabled,
71
70
  wasFullWidthModeEnabled = _useAlignmentTableCon.wasFullWidthModeEnabled;
72
71
  useEffect(function () {
73
- if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
72
+ if (!tableState && expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
74
73
  return;
75
74
  }
76
75
  if (editorView && getPos) {
package/dist/esm/tablePlugin.js CHANGED
@@ -464,7 +464,7 @@ var tablePlugin = function tablePlugin(_ref) {
464
464
  popupsBoundariesElement = _ref18.popupsBoundariesElement,
465
465
  popupsScrollableElement = _ref18.popupsScrollableElement,
466
466
  dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
467
- if (expValEquals('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
467
+ if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
468
468
  return /*#__PURE__*/React.createElement(ContentComponent, {
469
469
  api: api,
470
470
  editorView: editorView,
package/dist/esm/ui/ContentComponent.js CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
3
3
  import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
4
4
  import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
5
+ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
5
6
  import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
6
7
  import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
7
8
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -14,9 +15,40 @@ import FloatingDragMenu from './FloatingDragMenu';
14
15
  import FloatingInsertButton from './FloatingInsertButton';
15
16
  import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
16
17
  import { GlobalStylesWrapper } from './global-styles';
17
- import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
18
18
  import { SizeSelector } from './SizeSelector';
19
19
  import { FullWidthDisplay } from './TableFullWidthLabel';
20
+ var selector = function selector(states) {
21
+ 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;
22
+ return {
23
+ resizingTableLocalId: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.resizingTableLocalId,
24
+ resizingTableRef: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.resizingTableRef,
25
+ isTableResizing: (_states$tableState3 = states.tableState) === null || _states$tableState3 === void 0 ? void 0 : _states$tableState3.isTableResizing,
26
+ isResizing: (_states$tableState4 = states.tableState) === null || _states$tableState4 === void 0 ? void 0 : _states$tableState4.isResizing,
27
+ widthToWidest: (_states$tableState5 = states.tableState) === null || _states$tableState5 === void 0 ? void 0 : _states$tableState5.widthToWidest,
28
+ tableNode: (_states$tableState6 = states.tableState) === null || _states$tableState6 === void 0 ? void 0 : _states$tableState6.tableNode,
29
+ targetCellPosition: (_states$tableState7 = states.tableState) === null || _states$tableState7 === void 0 ? void 0 : _states$tableState7.targetCellPosition,
30
+ isContextualMenuOpen: (_states$tableState8 = states.tableState) === null || _states$tableState8 === void 0 ? void 0 : _states$tableState8.isContextualMenuOpen,
31
+ tableRef: (_states$tableState9 = states.tableState) === null || _states$tableState9 === void 0 ? void 0 : _states$tableState9.tableRef,
32
+ pluginConfig: (_states$tableState0 = states.tableState) === null || _states$tableState0 === void 0 ? void 0 : _states$tableState0.pluginConfig,
33
+ insertColumnButtonIndex: (_states$tableState1 = states.tableState) === null || _states$tableState1 === void 0 ? void 0 : _states$tableState1.insertColumnButtonIndex,
34
+ insertRowButtonIndex: (_states$tableState10 = states.tableState) === null || _states$tableState10 === void 0 ? void 0 : _states$tableState10.insertRowButtonIndex,
35
+ isHeaderColumnEnabled: (_states$tableState11 = states.tableState) === null || _states$tableState11 === void 0 ? void 0 : _states$tableState11.isHeaderColumnEnabled,
36
+ isHeaderRowEnabled: (_states$tableState12 = states.tableState) === null || _states$tableState12 === void 0 ? void 0 : _states$tableState12.isHeaderRowEnabled,
37
+ isDragAndDropEnabled: (_states$tableState13 = states.tableState) === null || _states$tableState13 === void 0 ? void 0 : _states$tableState13.isDragAndDropEnabled,
38
+ tableWrapperTarget: (_states$tableState14 = states.tableState) === null || _states$tableState14 === void 0 ? void 0 : _states$tableState14.tableWrapperTarget,
39
+ isCellMenuOpenByKeyboard: (_states$tableState15 = states.tableState) === null || _states$tableState15 === void 0 ? void 0 : _states$tableState15.isCellMenuOpenByKeyboard,
40
+ stickyHeader: (_states$tableState16 = states.tableState) === null || _states$tableState16 === void 0 ? void 0 : _states$tableState16.stickyHeader,
41
+ dragMenuDirection: (_states$tableState17 = states.tableState) === null || _states$tableState17 === void 0 ? void 0 : _states$tableState17.dragMenuDirection,
42
+ dragMenuIndex: (_states$tableState18 = states.tableState) === null || _states$tableState18 === void 0 ? void 0 : _states$tableState18.dragMenuIndex,
43
+ isDragMenuOpen: (_states$tableState19 = states.tableState) === null || _states$tableState19 === void 0 ? void 0 : _states$tableState19.isDragMenuOpen,
44
+ isSizeSelectorOpen: (_states$tableState20 = states.tableState) === null || _states$tableState20 === void 0 ? void 0 : _states$tableState20.isSizeSelectorOpen,
45
+ sizeSelectorTargetRef: (_states$tableState21 = states.tableState) === null || _states$tableState21 === void 0 ? void 0 : _states$tableState21.sizeSelectorTargetRef,
46
+ // IMPORTANT: hovered states are used by FloatingDragMenu component to render popup in the correct location
47
+ hoveredRows: (_states$tableState22 = states.tableState) === null || _states$tableState22 === void 0 ? void 0 : _states$tableState22.hoveredRows,
48
+ hoveredColumns: (_states$tableState23 = states.tableState) === null || _states$tableState23 === void 0 ? void 0 : _states$tableState23.hoveredColumns,
49
+ hoveredCell: (_states$tableState24 = states.tableState) === null || _states$tableState24 === void 0 ? void 0 : _states$tableState24.hoveredCell
50
+ };
51
+ };
20
52
  var ContentComponentInternal = function ContentComponentInternal(_ref) {
21
53
  var _api$analytics, _api$accessibilityUti, _api$analytics2;
22
54
  var api = _ref.api,
@@ -31,31 +63,32 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
31
63
  defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
32
64
  var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
33
65
  var ariaNotifyPlugin = api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
34
- var resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId');
35
- var resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef');
36
- var isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing');
37
- var isResizing = useInternalTablePluginStateSelector(api, 'isResizing');
38
- var widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest');
39
- var tableNode = useInternalTablePluginStateSelector(api, 'tableNode');
40
- var targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition');
41
- var isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen');
42
- var tableRef = useInternalTablePluginStateSelector(api, 'tableRef');
43
- var pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig');
44
- var insertColumnButtonIndex = useInternalTablePluginStateSelector(api, 'insertColumnButtonIndex');
45
- var insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex');
46
- var isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled');
47
- var isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled');
48
- var isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled');
49
- var tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget');
50
- var isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
66
+ var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table'], selector),
67
+ resizingTableLocalId = _useSharedPluginState.resizingTableLocalId,
68
+ resizingTableRef = _useSharedPluginState.resizingTableRef,
69
+ isTableResizing = _useSharedPluginState.isTableResizing,
70
+ isResizing = _useSharedPluginState.isResizing,
71
+ widthToWidest = _useSharedPluginState.widthToWidest,
72
+ tableNode = _useSharedPluginState.tableNode,
73
+ targetCellPosition = _useSharedPluginState.targetCellPosition,
74
+ isContextualMenuOpen = _useSharedPluginState.isContextualMenuOpen,
75
+ tableRef = _useSharedPluginState.tableRef,
76
+ pluginConfig = _useSharedPluginState.pluginConfig,
77
+ insertColumnButtonIndex = _useSharedPluginState.insertColumnButtonIndex,
78
+ insertRowButtonIndex = _useSharedPluginState.insertRowButtonIndex,
79
+ isHeaderColumnEnabled = _useSharedPluginState.isHeaderColumnEnabled,
80
+ isHeaderRowEnabled = _useSharedPluginState.isHeaderRowEnabled,
81
+ isDragAndDropEnabled = _useSharedPluginState.isDragAndDropEnabled,
82
+ tableWrapperTarget = _useSharedPluginState.tableWrapperTarget,
83
+ isCellMenuOpenByKeyboard = _useSharedPluginState.isCellMenuOpenByKeyboard,
84
+ stickyHeader = _useSharedPluginState.stickyHeader,
85
+ dragMenuDirection = _useSharedPluginState.dragMenuDirection,
86
+ dragMenuIndex = _useSharedPluginState.dragMenuIndex,
87
+ isDragMenuOpen = _useSharedPluginState.isDragMenuOpen,
88
+ isSizeSelectorOpen = _useSharedPluginState.isSizeSelectorOpen,
89
+ sizeSelectorTargetRef = _useSharedPluginState.sizeSelectorTargetRef;
51
90
  var _ref2 = pluginConfig !== null && pluginConfig !== void 0 ? pluginConfig : {},
52
91
  allowControls = _ref2.allowControls;
53
- var stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader');
54
- var dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection');
55
- var dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
56
- var isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
57
- var isSizeSelectorOpen = useInternalTablePluginStateSelector(api, 'isSizeSelectorOpen');
58
- var sizeSelectorTargetRef = useInternalTablePluginStateSelector(api, 'sizeSelectorTargetRef');
59
92
  return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
60
93
  isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
61
94
  editorView: editorView,
package/dist/types/ui/hooks/useInternalTablePluginStateSelector.d.ts CHANGED
@@ -18,5 +18,5 @@ type Options = {
18
18
  * @returns
19
19
  * @example
20
20
  */
21
- 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;
21
+ 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;
22
22
  export {};
package/dist/types-ts4.5/ui/hooks/useInternalTablePluginStateSelector.d.ts CHANGED
@@ -18,5 +18,5 @@ type Options = {
18
18
  * @returns
19
19
  * @example
20
20
  */
21
- 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;
21
+ 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;
22
22
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "12.1.4",
3
+ "version": "12.1.5",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
45
45
  "@atlaskit/editor-prosemirror": "7.0.0",
46
46
  "@atlaskit/editor-shared-styles": "^3.5.0",
47
47
  "@atlaskit/editor-tables": "^2.9.0",
48
- "@atlaskit/icon": "^27.6.0",
48
+ "@atlaskit/icon": "^27.7.0",
49
49
  "@atlaskit/menu": "^8.0.0",
50
50
  "@atlaskit/platform-feature-flags": "^1.1.0",
51
51
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -54,7 +54,7 @@
54
54
  "@atlaskit/primitives": "^14.10.0",
55
55
  "@atlaskit/react-ufo": "^4.1.0",
56
56
  "@atlaskit/theme": "^19.0.0",
57
- "@atlaskit/tmp-editor-statsig": "^9.11.0",
57
+ "@atlaskit/tmp-editor-statsig": "^9.14.0",
58
58
  "@atlaskit/toggle": "^15.0.0",
59
59
  "@atlaskit/tokens": "^5.6.0",
60
60
  "@atlaskit/tooltip": "^20.3.0",
package/src/nodeviews/TableComponentWithSharedState.tsx CHANGED
@@ -16,6 +16,7 @@ import type {
16
16
  import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
17
17
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
18
18
  import { findTable } from '@atlaskit/editor-tables';
19
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
19
20
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
20
21
 
21
22
  import type tablePlugin from '../tablePlugin';
@@ -204,7 +205,10 @@ export const TableComponentWithSharedState = ({
204
205
 
205
206
  const isLivePageViewMode = mode === 'view';
206
207
 
207
- if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
208
+ if (
209
+ expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false) &&
210
+ !tableState
211
+ ) {
208
212
  return null;
209
213
  }
210
214
 
@@ -250,7 +254,7 @@ export const TableComponentWithSharedState = ({
250
254
  isResizing={isResizing}
251
255
  getNode={getNode}
252
256
  containerWidth={
253
- editorExperiment('platform_editor_usesharedpluginstateselector', true)
257
+ editorExperiment('platform_editor_usesharedpluginstatewithselector', true)
254
258
  ? {
255
259
  width: width ?? 0,
256
260
  lineLength,
package/src/nodeviews/TableContainer.tsx CHANGED
@@ -28,7 +28,6 @@ import {
28
28
  } from '@atlaskit/editor-shared-styles';
29
29
  import { fg } from '@atlaskit/platform-feature-flags';
30
30
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
31
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
32
31
 
33
32
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
34
33
  import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -117,7 +116,10 @@ const AlignmentTableContainer = ({
117
116
  useAlignmentTableContainerSharedState(pluginInjectionApi);
118
117
 
119
118
  useEffect(() => {
120
- if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
119
+ if (
120
+ !tableState &&
121
+ expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)
122
+ ) {
121
123
  return;
122
124
  }
123
125
 
package/src/tablePlugin.tsx CHANGED
@@ -582,7 +582,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
582
582
  popupsScrollableElement,
583
583
  dispatchAnalyticsEvent,
584
584
  }) {
585
- if (expValEquals('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
585
+ if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
586
586
  return (
587
587
  <ContentComponent
588
588
  api={api}
package/src/ui/ContentComponent.tsx CHANGED
@@ -7,6 +7,10 @@ import {
7
7
  } from '@atlaskit/editor-common/analytics';
8
8
  import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
9
9
  import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
10
+ import {
11
+ type NamedPluginStatesFromInjectionAPI,
12
+ useSharedPluginStateWithSelector,
13
+ } from '@atlaskit/editor-common/hooks';
10
14
  import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
11
15
  import {
12
16
  type ExtractInjectionAPI,
@@ -17,7 +21,9 @@ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
17
21
  import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
18
22
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
19
23
 
24
+ import type tablePlugin from '../tablePlugin';
20
25
  import { type TablePlugin, type TablePluginOptions } from '../tablePluginType';
26
+ import { type TableSharedStateInternal } from '../types';
21
27
 
22
28
  import FloatingContextualButton from './FloatingContextualButton';
23
29
  import FloatingContextualMenu from './FloatingContextualMenu';
@@ -28,7 +34,6 @@ import FloatingDragMenu from './FloatingDragMenu';
28
34
  import FloatingInsertButton from './FloatingInsertButton';
29
35
  import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
30
36
  import { GlobalStylesWrapper } from './global-styles';
31
- import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
32
37
  import { SizeSelector } from './SizeSelector';
33
38
  import { FullWidthDisplay } from './TableFullWidthLabel';
34
39
 
@@ -45,6 +50,41 @@ export type ContentComponentProps = {
45
50
  defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
46
51
  };
47
52
 
53
+ const selector = (
54
+ states: NamedPluginStatesFromInjectionAPI<ExtractInjectionAPI<typeof tablePlugin>, ''> & {
55
+ tableState: TableSharedStateInternal | undefined;
56
+ },
57
+ ) => ({
58
+ resizingTableLocalId: states.tableState?.resizingTableLocalId,
59
+ resizingTableRef: states.tableState?.resizingTableRef,
60
+ isTableResizing: states.tableState?.isTableResizing,
61
+ isResizing: states.tableState?.isResizing,
62
+ widthToWidest: states.tableState?.widthToWidest,
63
+ tableNode: states.tableState?.tableNode,
64
+ targetCellPosition: states.tableState?.targetCellPosition,
65
+ isContextualMenuOpen: states.tableState?.isContextualMenuOpen,
66
+ tableRef: states.tableState?.tableRef,
67
+ pluginConfig: states.tableState?.pluginConfig,
68
+ insertColumnButtonIndex: states.tableState?.insertColumnButtonIndex,
69
+ insertRowButtonIndex: states.tableState?.insertRowButtonIndex,
70
+ isHeaderColumnEnabled: states.tableState?.isHeaderColumnEnabled,
71
+ isHeaderRowEnabled: states.tableState?.isHeaderRowEnabled,
72
+ isDragAndDropEnabled: states.tableState?.isDragAndDropEnabled,
73
+ tableWrapperTarget: states.tableState?.tableWrapperTarget,
74
+ isCellMenuOpenByKeyboard: states.tableState?.isCellMenuOpenByKeyboard,
75
+ stickyHeader: states.tableState?.stickyHeader,
76
+ dragMenuDirection: states.tableState?.dragMenuDirection,
77
+ dragMenuIndex: states.tableState?.dragMenuIndex,
78
+ isDragMenuOpen: states.tableState?.isDragMenuOpen,
79
+ isSizeSelectorOpen: states.tableState?.isSizeSelectorOpen,
80
+ sizeSelectorTargetRef: states.tableState?.sizeSelectorTargetRef,
81
+
82
+ // IMPORTANT: hovered states are used by FloatingDragMenu component to render popup in the correct location
83
+ hoveredRows: states.tableState?.hoveredRows,
84
+ hoveredColumns: states.tableState?.hoveredColumns,
85
+ hoveredCell: states.tableState?.hoveredCell,
86
+ });
87
+
48
88
  const ContentComponentInternal = ({
49
89
  api,
50
90
  editorView,
@@ -60,42 +100,34 @@ const ContentComponentInternal = ({
60
100
  const editorAnalyticsAPI = api?.analytics?.actions;
61
101
  const ariaNotifyPlugin = api?.accessibilityUtils?.actions.ariaNotify;
62
102
 
63
- const resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId');
64
- const resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef');
65
- const isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing');
66
- const isResizing = useInternalTablePluginStateSelector(api, 'isResizing');
67
- const widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest');
68
-
69
- const tableNode = useInternalTablePluginStateSelector(api, 'tableNode');
70
- const targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition');
71
- const isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen');
72
- const tableRef = useInternalTablePluginStateSelector(api, 'tableRef');
73
- const pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig');
74
- const insertColumnButtonIndex = useInternalTablePluginStateSelector(
75
- api,
76
- 'insertColumnButtonIndex',
77
- );
78
- const insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex');
79
- const isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled');
80
- const isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled');
81
- const isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled');
82
- const tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget');
83
- const isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(
84
- api,
85
- 'isCellMenuOpenByKeyboard',
86
- );
103
+ const {
104
+ resizingTableLocalId,
105
+ resizingTableRef,
106
+ isTableResizing,
107
+ isResizing,
108
+ widthToWidest,
109
+ tableNode,
110
+ targetCellPosition,
111
+ isContextualMenuOpen,
112
+ tableRef,
113
+ pluginConfig,
114
+ insertColumnButtonIndex,
115
+ insertRowButtonIndex,
116
+ isHeaderColumnEnabled,
117
+ isHeaderRowEnabled,
118
+ isDragAndDropEnabled,
119
+ tableWrapperTarget,
120
+ isCellMenuOpenByKeyboard,
121
+ stickyHeader,
122
+ dragMenuDirection,
123
+ dragMenuIndex,
124
+ isDragMenuOpen,
125
+ isSizeSelectorOpen,
126
+ sizeSelectorTargetRef,
127
+ } = useSharedPluginStateWithSelector(api, ['table'], selector);
87
128
 
88
129
  const { allowControls } = pluginConfig ?? {};
89
130
 
90
- const stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader');
91
-
92
- const dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection');
93
- const dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
94
- const isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
95
-
96
- const isSizeSelectorOpen = useInternalTablePluginStateSelector(api, 'isSizeSelectorOpen');
97
- const sizeSelectorTargetRef = useInternalTablePluginStateSelector(api, 'sizeSelectorTargetRef');
98
-
99
131
  return (
100
132
  <>
101
133
  {targetCellPosition &&