@atlaskit/editor-plugin-table 23.0.0 → 23.0.1

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 (19) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/pm-plugins/handlers.js +78 -19
  3. package/dist/cjs/ui/FloatingContextualMenu/CellMenuPopup.js +29 -8
  4. package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +13 -0
  5. package/dist/cjs/ui/FloatingContextualMenu/index.js +5 -5
  6. package/dist/cjs/ui/FloatingDragMenu/index.js +1 -0
  7. package/dist/es2019/pm-plugins/handlers.js +70 -7
  8. package/dist/es2019/ui/FloatingContextualMenu/CellMenuPopup.js +23 -8
  9. package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +13 -0
  10. package/dist/es2019/ui/FloatingContextualMenu/index.js +5 -5
  11. package/dist/es2019/ui/FloatingDragMenu/index.js +1 -0
  12. package/dist/esm/pm-plugins/handlers.js +78 -19
  13. package/dist/esm/ui/FloatingContextualMenu/CellMenuPopup.js +28 -8
  14. package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +13 -0
  15. package/dist/esm/ui/FloatingContextualMenu/index.js +5 -5
  16. package/dist/esm/ui/FloatingDragMenu/index.js +1 -0
  17. package/dist/types/ui/FloatingContextualMenu/CellMenuPopup.d.ts +2 -2
  18. package/dist/types-ts4.5/ui/FloatingContextualMenu/CellMenuPopup.d.ts +2 -2
  19. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 23.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`f53b4391ccd54`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f53b4391ccd54) -
8
+ Fix table menu popup placement near viewport edges
9
+
10
+ Add new editor experiment platform_editor_table_close_cell_menu_on_move_exp to fix legacy menu
11
+ staying open when changing cells.
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 23.0.0
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/pm-plugins/handlers.js CHANGED
@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
9
9
  var _customSteps = require("@atlaskit/custom-steps");
10
10
  var _utils = require("@atlaskit/editor-common/utils");
11
11
  var _utils2 = require("@atlaskit/editor-prosemirror/utils");
12
+ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
12
13
  var _utils3 = require("@atlaskit/editor-tables/utils");
13
14
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
14
15
  var _defaultTableSelection = require("./default-table-selection");
@@ -30,38 +31,83 @@ var nextResizeHandleColumnIndex = function nextResizeHandleColumnIndex(tr, resiz
30
31
  }
31
32
  return resizeHandleColumnIndex;
32
33
  };
33
- var updateTargetCellPosition = function updateTargetCellPosition(_ref) {
34
- var tr = _ref.tr,
35
- table = _ref.table;
34
+ var shouldCloseLegacyContextualMenu = function shouldCloseLegacyContextualMenu(_ref) {
35
+ var pluginState = _ref.pluginState,
36
+ targetCellPositionChanged = _ref.targetCellPositionChanged,
37
+ tr = _ref.tr;
38
+ return Boolean(pluginState.isContextualMenuOpen && (targetCellPositionChanged || tr.selectionSet && !(tr.selection instanceof _cellSelection.CellSelection)));
39
+ };
40
+ var updateTargetCellPosition = function updateTargetCellPosition(_ref2) {
41
+ var tr = _ref2.tr,
42
+ table = _ref2.table;
36
43
  return function (pluginState) {
37
44
  var tableNode = table && table.node;
45
+ if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
46
+ var _targetCellPosition;
47
+ if (tableNode) {
48
+ var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
49
+ _tableCell = _tr$doc$type$schema$n.tableCell,
50
+ _tableHeader = _tr$doc$type$schema$n.tableHeader;
51
+ var _cell = (0, _utils2.findParentNodeOfType)([_tableCell, _tableHeader])(tr.selection);
52
+ _targetCellPosition = _cell ? _cell.pos : undefined;
53
+ }
54
+ var hasTargetCellChanged = pluginState.targetCellPosition !== _targetCellPosition;
55
+ var hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
56
+ var shouldCloseMenu = hasActiveTableMenu && (!tableNode || hasTargetCellChanged || !(tr.selection instanceof _cellSelection.CellSelection));
57
+ if (!hasTargetCellChanged && !shouldCloseMenu) {
58
+ return pluginState;
59
+ }
60
+
61
+ // The updated table menu is anchored to a table selection. When selection moves
62
+ // to another cell, leaves the table, or changes from a CellSelection to a text cursor,
63
+ // close the active menu so render state cannot point at a stale anchor.
64
+ return _objectSpread(_objectSpread({}, pluginState), {}, {
65
+ targetCellPosition: _targetCellPosition,
66
+ activeTableMenu: shouldCloseMenu ? {
67
+ type: 'none'
68
+ } : pluginState.activeTableMenu
69
+ });
70
+ }
38
71
  if (!tableNode) {
39
72
  return _objectSpread(_objectSpread({}, pluginState), {}, {
40
73
  targetCellPosition: undefined
41
74
  });
42
75
  }
43
- var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
44
- tableCell = _tr$doc$type$schema$n.tableCell,
45
- tableHeader = _tr$doc$type$schema$n.tableHeader;
76
+ var _tr$doc$type$schema$n2 = tr.doc.type.schema.nodes,
77
+ tableCell = _tr$doc$type$schema$n2.tableCell,
78
+ tableHeader = _tr$doc$type$schema$n2.tableHeader;
46
79
  var cell = (0, _utils2.findParentNodeOfType)([tableCell, tableHeader])(tr.selection);
47
80
  var targetCellPosition = cell ? cell.pos : undefined;
81
+ if ((0, _expValEquals.expValEquals)('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
82
+ var targetCellPositionChanged = pluginState.targetCellPosition !== targetCellPosition;
83
+ var closeContextualMenu = shouldCloseLegacyContextualMenu({
84
+ pluginState: pluginState,
85
+ targetCellPositionChanged: targetCellPositionChanged,
86
+ tr: tr
87
+ });
88
+ if (!targetCellPositionChanged && !closeContextualMenu) {
89
+ return pluginState;
90
+ }
91
+
92
+ // Close the legacy contextual menu when moving cells because the cell background
93
+ // color submenu can otherwise remain open against the previous cell selection.
94
+ return _objectSpread(_objectSpread(_objectSpread({}, pluginState), closeContextualMenu ? {
95
+ isContextualMenuOpen: false
96
+ } : {}), {}, {
97
+ targetCellPosition: targetCellPosition
98
+ });
99
+ }
48
100
  if (pluginState.targetCellPosition === targetCellPosition) {
49
101
  return pluginState;
50
102
  }
51
-
52
- // The updated table menu is anchored to the current target cell. When selection moves
53
- // to another cell, close the active menu so render state cannot point at a stale anchor.
54
103
  return _objectSpread(_objectSpread({}, pluginState), {}, {
55
- targetCellPosition: targetCellPosition,
56
- activeTableMenu: pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none' && (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? {
57
- type: 'none'
58
- } : pluginState.activeTableMenu
104
+ targetCellPosition: targetCellPosition
59
105
  });
60
106
  };
61
107
  };
62
- var updateTableNodePluginState = function updateTableNodePluginState(_ref2) {
63
- var tr = _ref2.tr,
64
- table = _ref2.table;
108
+ var updateTableNodePluginState = function updateTableNodePluginState(_ref3) {
109
+ var tr = _ref3.tr,
110
+ table = _ref3.table;
65
111
  return function (pluginState) {
66
112
  var tableNode = table && table.node;
67
113
  if (!tableNode || (0, _utils.isTextInput)(tr)) {
@@ -77,9 +123,9 @@ var updateTableNodePluginState = function updateTableNodePluginState(_ref2) {
77
123
  });
78
124
  };
79
125
  };
80
- var updateCollapseHandler = function updateCollapseHandler(_ref3) {
81
- var tr = _ref3.tr,
82
- table = _ref3.table;
126
+ var updateCollapseHandler = function updateCollapseHandler(_ref4) {
127
+ var tr = _ref4.tr,
128
+ table = _ref4.table;
83
129
  return function (pluginState) {
84
130
  var tableNode = table && table.node;
85
131
  var schema = tr.doc.type.schema;
@@ -115,6 +161,19 @@ var buildPluginState = function buildPluginState(builders) {
115
161
  return function (props) {
116
162
  return function (pluginState) {
117
163
  if (!props.table) {
164
+ if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
165
+ var shouldClearTargetCellPosition = pluginState.targetCellPosition !== undefined;
166
+ var hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
167
+ if (!shouldClearTargetCellPosition && !hasActiveTableMenu) {
168
+ return pluginState;
169
+ }
170
+ return _objectSpread(_objectSpread({}, pluginState), {}, {
171
+ targetCellPosition: undefined,
172
+ activeTableMenu: hasActiveTableMenu ? {
173
+ type: 'none'
174
+ } : pluginState.activeTableMenu
175
+ });
176
+ }
118
177
  return pluginState.targetCellPosition ? _objectSpread(_objectSpread({}, pluginState), {}, {
119
178
  targetCellPosition: undefined
120
179
  }) : pluginState;
package/dist/cjs/ui/FloatingContextualMenu/CellMenuPopup.js CHANGED
@@ -1,10 +1,13 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.CellMenuPopup = void 0;
9
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
8
11
  var _react = _interopRequireWildcard(require("react"));
9
12
  var _ui = require("@atlaskit/editor-common/ui");
10
13
  var _uiReact = require("@atlaskit/editor-common/ui-react");
@@ -17,16 +20,19 @@ var _keys = require("../TableMenu/cell/keys");
17
20
  var _consts2 = require("../TableMenu/shared/consts");
18
21
  var _TableMenu = require("../TableMenu/shared/TableMenu");
19
22
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
23
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
24
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
20
25
  var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
21
26
  var NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
22
27
  var CELL_MENU_TRIGGER_SELECTOR = ".".concat(_types.TableCssClassName.CONTEXTUAL_MENU_BUTTON);
28
+ var CELL_MENU_TRIGGER_CLEARANCE = [6, 0];
23
29
  var CellMenuPopup = exports.CellMenuPopup = function CellMenuPopup(_ref) {
24
30
  var api = _ref.api,
25
31
  boundariesElement = _ref.boundariesElement,
26
32
  editorView = _ref.editorView,
27
33
  mountPoint = _ref.mountPoint,
28
34
  scrollableElement = _ref.scrollableElement,
29
- targetCellRef = _ref.targetCellRef,
35
+ target = _ref.target,
30
36
  zIndex = _ref.zIndex;
31
37
  var popupContentRef = (0, _react.useRef)(null);
32
38
  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
@@ -53,6 +59,20 @@ var CellMenuPopup = exports.CellMenuPopup = function CellMenuPopup(_ref) {
53
59
  }
54
60
  return target instanceof Element && Boolean(target.closest(NESTED_DROPDOWN_SELECTOR) || target.closest(CELL_MENU_TRIGGER_SELECTOR));
55
61
  }, []);
62
+ var horizontalPlacementRef = (0, _react.useRef)(undefined);
63
+ var handlePlacementChanged = (0, _react.useCallback)(function (_ref2) {
64
+ var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
65
+ horizontalPlacement = _ref3[1];
66
+ horizontalPlacementRef.current = horizontalPlacement;
67
+ }, []);
68
+ var handlePositionCalculated = (0, _react.useCallback)(function (position) {
69
+ if (horizontalPlacementRef.current !== 'left' || position.left === undefined) {
70
+ return position;
71
+ }
72
+ return _objectSpread(_objectSpread({}, position), {}, {
73
+ left: position.left + target.getBoundingClientRect().width
74
+ });
75
+ }, [target]);
56
76
  var handleCellMenuClickOutside = (0, _react.useCallback)(function (event) {
57
77
  if (isEventInsideCellMenu(event)) {
58
78
  return;
@@ -60,19 +80,20 @@ var CellMenuPopup = exports.CellMenuPopup = function CellMenuPopup(_ref) {
60
80
  closeCellMenu();
61
81
  }, [closeCellMenu, isEventInsideCellMenu]);
62
82
  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
63
- alignX: "right",
64
- alignY: "top",
65
- target: targetCellRef,
83
+ alignX: "end",
84
+ alignY: "start",
85
+ target: target,
66
86
  mountTo: mountPoint,
67
87
  boundariesElement: boundariesElement,
68
88
  scrollableElement: scrollableElement,
69
89
  fitHeight: _consts.tablePopupMenuFitHeight,
70
90
  fitWidth: _consts2.TABLE_MENU_WIDTH,
71
91
  zIndex: zIndex,
72
- forcePlacement: true
73
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
74
- ,
75
- offset: [-7, 0],
92
+ forcePlacement: true,
93
+ preventOverflow: true,
94
+ onPlacementChanged: handlePlacementChanged,
95
+ onPositionCalculated: handlePositionCalculated,
96
+ offset: CELL_MENU_TRIGGER_CLEARANCE,
76
97
  stick: true,
77
98
  handleClickOutside: handleCellMenuClickOutside,
78
99
  handleEscapeKeydown: closeCellMenu
package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js CHANGED
@@ -544,6 +544,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
544
544
  _this$props8$editorVi = _this$props8.editorView,
545
545
  state = _this$props8$editorVi.state,
546
546
  dispatch = _this$props8$editorVi.dispatch;
547
+ if ((0, _expValEquals.expValEquals)('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
548
+ if ((0, _pluginFactory.getPluginState)(state).isContextualMenuOpen) {
549
+ (0, _commands.toggleContextualMenu)()(state, dispatch);
550
+ }
551
+ _this.closeSubmenu();
552
+ return;
553
+ }
547
554
  (0, _commands.toggleContextualMenu)()(state, dispatch);
548
555
  if (!isOpen) {
549
556
  _this.setState({
@@ -654,6 +661,12 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
654
661
  (0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
655
662
  if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
656
663
  _this.toggleOpen();
664
+ } else if ((0, _expValEquals.expValEquals)('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
665
+ _this.toggleOpen();
666
+ if (isCellMenuOpenByKeyboard) {
667
+ (0, _commands.setFocusToCellMenu)(false)(editorView.state, dispatch);
668
+ dom.focus();
669
+ }
657
670
  } else {
658
671
  (0, _commands.toggleContextualMenu)()(state, dispatch);
659
672
  _this.setState({
package/dist/cjs/ui/FloatingContextualMenu/index.js CHANGED
@@ -73,16 +73,16 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
73
73
  }
74
74
  var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
75
75
  if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
76
+ if (!(targetCellRef instanceof HTMLElement)) {
77
+ return null;
78
+ }
76
79
  return (0, _react.jsx)(_CellMenuPopup.CellMenuPopup, {
77
80
  api: api,
78
81
  boundariesElement: boundariesElement,
79
82
  editorView: editorView,
80
83
  mountPoint: mountPoint,
81
- scrollableElement: scrollableElement
82
- // Ignored via go/ees005
83
- // eslint-disable-next-line @atlaskit/editor/no-as-casting
84
- ,
85
- targetCellRef: targetCellRef,
84
+ scrollableElement: scrollableElement,
85
+ target: targetCellRef,
86
86
  zIndex: parentSticky ? _editorSharedStyles.akEditorFloatingDialogZIndex : _editorSharedStyles.akEditorFloatingOverlapPanelZIndex
87
87
  });
88
88
  }
package/dist/cjs/ui/FloatingDragMenu/index.js CHANGED
@@ -84,6 +84,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
84
84
  ,
85
85
  zIndex: inStickyMode ? _editorSharedStyles.akEditorFloatingDialogZIndex : _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
86
86
  forcePlacement: true,
87
+ preventOverflow: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? dragMenuDirection === 'row' : undefined,
87
88
  offset: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
88
89
  stick: true
89
90
  }, (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
package/dist/es2019/pm-plugins/handlers.js CHANGED
@@ -5,6 +5,7 @@ import { isTextInput } from '@atlaskit/editor-common/utils';
5
5
  // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
6
6
 
7
7
  import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
8
+ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
8
9
  import { findTable } from '@atlaskit/editor-tables/utils';
9
10
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
11
  import { defaultTableSelection } from './default-table-selection';
@@ -21,11 +22,44 @@ const nextResizeHandleColumnIndex = (tr, resizeHandleColumnIndex) => {
21
22
  }
22
23
  return resizeHandleColumnIndex;
23
24
  };
25
+ const shouldCloseLegacyContextualMenu = ({
26
+ pluginState,
27
+ targetCellPositionChanged,
28
+ tr
29
+ }) => Boolean(pluginState.isContextualMenuOpen && (targetCellPositionChanged || tr.selectionSet && !(tr.selection instanceof CellSelection)));
24
30
  const updateTargetCellPosition = ({
25
31
  tr,
26
32
  table
27
33
  }) => pluginState => {
28
34
  const tableNode = table && table.node;
35
+ if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
36
+ let targetCellPosition;
37
+ if (tableNode) {
38
+ const {
39
+ tableCell,
40
+ tableHeader
41
+ } = tr.doc.type.schema.nodes;
42
+ const cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
43
+ targetCellPosition = cell ? cell.pos : undefined;
44
+ }
45
+ const hasTargetCellChanged = pluginState.targetCellPosition !== targetCellPosition;
46
+ const hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
47
+ const shouldCloseMenu = hasActiveTableMenu && (!tableNode || hasTargetCellChanged || !(tr.selection instanceof CellSelection));
48
+ if (!hasTargetCellChanged && !shouldCloseMenu) {
49
+ return pluginState;
50
+ }
51
+
52
+ // The updated table menu is anchored to a table selection. When selection moves
53
+ // to another cell, leaves the table, or changes from a CellSelection to a text cursor,
54
+ // close the active menu so render state cannot point at a stale anchor.
55
+ return {
56
+ ...pluginState,
57
+ targetCellPosition,
58
+ activeTableMenu: shouldCloseMenu ? {
59
+ type: 'none'
60
+ } : pluginState.activeTableMenu
61
+ };
62
+ }
29
63
  if (!tableNode) {
30
64
  return {
31
65
  ...pluginState,
@@ -38,18 +72,33 @@ const updateTargetCellPosition = ({
38
72
  } = tr.doc.type.schema.nodes;
39
73
  const cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
40
74
  const targetCellPosition = cell ? cell.pos : undefined;
75
+ if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
76
+ const targetCellPositionChanged = pluginState.targetCellPosition !== targetCellPosition;
77
+ const closeContextualMenu = shouldCloseLegacyContextualMenu({
78
+ pluginState,
79
+ targetCellPositionChanged,
80
+ tr
81
+ });
82
+ if (!targetCellPositionChanged && !closeContextualMenu) {
83
+ return pluginState;
84
+ }
85
+
86
+ // Close the legacy contextual menu when moving cells because the cell background
87
+ // color submenu can otherwise remain open against the previous cell selection.
88
+ return {
89
+ ...pluginState,
90
+ ...(closeContextualMenu ? {
91
+ isContextualMenuOpen: false
92
+ } : {}),
93
+ targetCellPosition
94
+ };
95
+ }
41
96
  if (pluginState.targetCellPosition === targetCellPosition) {
42
97
  return pluginState;
43
98
  }
44
-
45
- // The updated table menu is anchored to the current target cell. When selection moves
46
- // to another cell, close the active menu so render state cannot point at a stale anchor.
47
99
  return {
48
100
  ...pluginState,
49
- targetCellPosition,
50
- activeTableMenu: pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? {
51
- type: 'none'
52
- } : pluginState.activeTableMenu
101
+ targetCellPosition
53
102
  };
54
103
  };
55
104
  const updateTableNodePluginState = ({
@@ -107,6 +156,20 @@ const updateCollapseHandler = ({
107
156
  };
108
157
  const buildPluginState = builders => props => pluginState => {
109
158
  if (!props.table) {
159
+ if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
160
+ const shouldClearTargetCellPosition = pluginState.targetCellPosition !== undefined;
161
+ const hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
162
+ if (!shouldClearTargetCellPosition && !hasActiveTableMenu) {
163
+ return pluginState;
164
+ }
165
+ return {
166
+ ...pluginState,
167
+ targetCellPosition: undefined,
168
+ activeTableMenu: hasActiveTableMenu ? {
169
+ type: 'none'
170
+ } : pluginState.activeTableMenu
171
+ };
172
+ }
110
173
  return pluginState.targetCellPosition ? {
111
174
  ...pluginState,
112
175
  targetCellPosition: undefined
package/dist/es2019/ui/FloatingContextualMenu/CellMenuPopup.js CHANGED
@@ -12,13 +12,14 @@ import { TableMenu } from '../TableMenu/shared/TableMenu';
12
12
  const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
13
13
  const NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
14
14
  const CELL_MENU_TRIGGER_SELECTOR = `.${ClassName.CONTEXTUAL_MENU_BUTTON}`;
15
+ const CELL_MENU_TRIGGER_CLEARANCE = [6, 0];
15
16
  export const CellMenuPopup = ({
16
17
  api,
17
18
  boundariesElement,
18
19
  editorView,
19
20
  mountPoint,
20
21
  scrollableElement,
21
- targetCellRef,
22
+ target,
22
23
  zIndex
23
24
  }) => {
24
25
  const popupContentRef = useRef(null);
@@ -47,6 +48,19 @@ export const CellMenuPopup = ({
47
48
  }
48
49
  return target instanceof Element && Boolean(target.closest(NESTED_DROPDOWN_SELECTOR) || target.closest(CELL_MENU_TRIGGER_SELECTOR));
49
50
  }, []);
51
+ const horizontalPlacementRef = useRef(undefined);
52
+ const handlePlacementChanged = useCallback(([, horizontalPlacement]) => {
53
+ horizontalPlacementRef.current = horizontalPlacement;
54
+ }, []);
55
+ const handlePositionCalculated = useCallback(position => {
56
+ if (horizontalPlacementRef.current !== 'left' || position.left === undefined) {
57
+ return position;
58
+ }
59
+ return {
60
+ ...position,
61
+ left: position.left + target.getBoundingClientRect().width
62
+ };
63
+ }, [target]);
50
64
  const handleCellMenuClickOutside = useCallback(event => {
51
65
  if (isEventInsideCellMenu(event)) {
52
66
  return;
@@ -54,19 +68,20 @@ export const CellMenuPopup = ({
54
68
  closeCellMenu();
55
69
  }, [closeCellMenu, isEventInsideCellMenu]);
56
70
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
57
- alignX: "right",
58
- alignY: "top",
59
- target: targetCellRef,
71
+ alignX: "end",
72
+ alignY: "start",
73
+ target: target,
60
74
  mountTo: mountPoint,
61
75
  boundariesElement: boundariesElement,
62
76
  scrollableElement: scrollableElement,
63
77
  fitHeight: tablePopupMenuFitHeight,
64
78
  fitWidth: TABLE_MENU_WIDTH,
65
79
  zIndex: zIndex,
66
- forcePlacement: true
67
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
68
- ,
69
- offset: [-7, 0],
80
+ forcePlacement: true,
81
+ preventOverflow: true,
82
+ onPlacementChanged: handlePlacementChanged,
83
+ onPositionCalculated: handlePositionCalculated,
84
+ offset: CELL_MENU_TRIGGER_CLEARANCE,
70
85
  stick: true,
71
86
  handleClickOutside: handleCellMenuClickOutside,
72
87
  handleEscapeKeydown: closeCellMenu
package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js CHANGED
@@ -576,6 +576,13 @@ export class ContextualMenu extends Component {
576
576
  dispatch
577
577
  }
578
578
  } = this.props;
579
+ if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
580
+ if (getPluginState(state).isContextualMenuOpen) {
581
+ toggleContextualMenu()(state, dispatch);
582
+ }
583
+ this.closeSubmenu();
584
+ return;
585
+ }
579
586
  toggleContextualMenu()(state, dispatch);
580
587
  if (!isOpen) {
581
588
  this.setState({
@@ -698,6 +705,12 @@ export class ContextualMenu extends Component {
698
705
  setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
699
706
  if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
700
707
  this.toggleOpen();
708
+ } else if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
709
+ this.toggleOpen();
710
+ if (isCellMenuOpenByKeyboard) {
711
+ setFocusToCellMenu(false)(editorView.state, dispatch);
712
+ dom.focus();
713
+ }
701
714
  } else {
702
715
  toggleContextualMenu()(state, dispatch);
703
716
  this.setState({
package/dist/es2019/ui/FloatingContextualMenu/index.js CHANGED
@@ -69,16 +69,16 @@ const FloatingContextualMenu = ({
69
69
  }
70
70
  const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
71
71
  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
72
+ if (!(targetCellRef instanceof HTMLElement)) {
73
+ return null;
74
+ }
72
75
  return jsx(CellMenuPopup, {
73
76
  api: api,
74
77
  boundariesElement: boundariesElement,
75
78
  editorView: editorView,
76
79
  mountPoint: mountPoint,
77
- scrollableElement: scrollableElement
78
- // Ignored via go/ees005
79
- // eslint-disable-next-line @atlaskit/editor/no-as-casting
80
- ,
81
- targetCellRef: targetCellRef,
80
+ scrollableElement: scrollableElement,
81
+ target: targetCellRef,
82
82
  zIndex: parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex
83
83
  });
84
84
  }
package/dist/es2019/ui/FloatingDragMenu/index.js CHANGED
@@ -79,6 +79,7 @@ const FloatingDragMenu = ({
79
79
  ,
80
80
  zIndex: inStickyMode ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
81
81
  forcePlacement: true,
82
+ preventOverflow: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? dragMenuDirection === 'row' : undefined,
82
83
  offset: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
83
84
  stick: true
84
85
  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
package/dist/esm/pm-plugins/handlers.js CHANGED
@@ -8,6 +8,7 @@ import { isTextInput } from '@atlaskit/editor-common/utils';
8
8
  // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
9
9
 
10
10
  import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
11
+ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
11
12
  import { findTable } from '@atlaskit/editor-tables/utils';
12
13
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
13
14
  import { defaultTableSelection } from './default-table-selection';
@@ -26,38 +27,83 @@ var nextResizeHandleColumnIndex = function nextResizeHandleColumnIndex(tr, resiz
26
27
  }
27
28
  return resizeHandleColumnIndex;
28
29
  };
29
- var updateTargetCellPosition = function updateTargetCellPosition(_ref) {
30
- var tr = _ref.tr,
31
- table = _ref.table;
30
+ var shouldCloseLegacyContextualMenu = function shouldCloseLegacyContextualMenu(_ref) {
31
+ var pluginState = _ref.pluginState,
32
+ targetCellPositionChanged = _ref.targetCellPositionChanged,
33
+ tr = _ref.tr;
34
+ return Boolean(pluginState.isContextualMenuOpen && (targetCellPositionChanged || tr.selectionSet && !(tr.selection instanceof CellSelection)));
35
+ };
36
+ var updateTargetCellPosition = function updateTargetCellPosition(_ref2) {
37
+ var tr = _ref2.tr,
38
+ table = _ref2.table;
32
39
  return function (pluginState) {
33
40
  var tableNode = table && table.node;
41
+ if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
42
+ var _targetCellPosition;
43
+ if (tableNode) {
44
+ var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
45
+ _tableCell = _tr$doc$type$schema$n.tableCell,
46
+ _tableHeader = _tr$doc$type$schema$n.tableHeader;
47
+ var _cell = findParentNodeOfType([_tableCell, _tableHeader])(tr.selection);
48
+ _targetCellPosition = _cell ? _cell.pos : undefined;
49
+ }
50
+ var hasTargetCellChanged = pluginState.targetCellPosition !== _targetCellPosition;
51
+ var hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
52
+ var shouldCloseMenu = hasActiveTableMenu && (!tableNode || hasTargetCellChanged || !(tr.selection instanceof CellSelection));
53
+ if (!hasTargetCellChanged && !shouldCloseMenu) {
54
+ return pluginState;
55
+ }
56
+
57
+ // The updated table menu is anchored to a table selection. When selection moves
58
+ // to another cell, leaves the table, or changes from a CellSelection to a text cursor,
59
+ // close the active menu so render state cannot point at a stale anchor.
60
+ return _objectSpread(_objectSpread({}, pluginState), {}, {
61
+ targetCellPosition: _targetCellPosition,
62
+ activeTableMenu: shouldCloseMenu ? {
63
+ type: 'none'
64
+ } : pluginState.activeTableMenu
65
+ });
66
+ }
34
67
  if (!tableNode) {
35
68
  return _objectSpread(_objectSpread({}, pluginState), {}, {
36
69
  targetCellPosition: undefined
37
70
  });
38
71
  }
39
- var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
40
- tableCell = _tr$doc$type$schema$n.tableCell,
41
- tableHeader = _tr$doc$type$schema$n.tableHeader;
72
+ var _tr$doc$type$schema$n2 = tr.doc.type.schema.nodes,
73
+ tableCell = _tr$doc$type$schema$n2.tableCell,
74
+ tableHeader = _tr$doc$type$schema$n2.tableHeader;
42
75
  var cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
43
76
  var targetCellPosition = cell ? cell.pos : undefined;
77
+ if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
78
+ var targetCellPositionChanged = pluginState.targetCellPosition !== targetCellPosition;
79
+ var closeContextualMenu = shouldCloseLegacyContextualMenu({
80
+ pluginState: pluginState,
81
+ targetCellPositionChanged: targetCellPositionChanged,
82
+ tr: tr
83
+ });
84
+ if (!targetCellPositionChanged && !closeContextualMenu) {
85
+ return pluginState;
86
+ }
87
+
88
+ // Close the legacy contextual menu when moving cells because the cell background
89
+ // color submenu can otherwise remain open against the previous cell selection.
90
+ return _objectSpread(_objectSpread(_objectSpread({}, pluginState), closeContextualMenu ? {
91
+ isContextualMenuOpen: false
92
+ } : {}), {}, {
93
+ targetCellPosition: targetCellPosition
94
+ });
95
+ }
44
96
  if (pluginState.targetCellPosition === targetCellPosition) {
45
97
  return pluginState;
46
98
  }
47
-
48
- // The updated table menu is anchored to the current target cell. When selection moves
49
- // to another cell, close the active menu so render state cannot point at a stale anchor.
50
99
  return _objectSpread(_objectSpread({}, pluginState), {}, {
51
- targetCellPosition: targetCellPosition,
52
- activeTableMenu: pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? {
53
- type: 'none'
54
- } : pluginState.activeTableMenu
100
+ targetCellPosition: targetCellPosition
55
101
  });
56
102
  };
57
103
  };
58
- var updateTableNodePluginState = function updateTableNodePluginState(_ref2) {
59
- var tr = _ref2.tr,
60
- table = _ref2.table;
104
+ var updateTableNodePluginState = function updateTableNodePluginState(_ref3) {
105
+ var tr = _ref3.tr,
106
+ table = _ref3.table;
61
107
  return function (pluginState) {
62
108
  var tableNode = table && table.node;
63
109
  if (!tableNode || isTextInput(tr)) {
@@ -73,9 +119,9 @@ var updateTableNodePluginState = function updateTableNodePluginState(_ref2) {
73
119
  });
74
120
  };
75
121
  };
76
- var updateCollapseHandler = function updateCollapseHandler(_ref3) {
77
- var tr = _ref3.tr,
78
- table = _ref3.table;
122
+ var updateCollapseHandler = function updateCollapseHandler(_ref4) {
123
+ var tr = _ref4.tr,
124
+ table = _ref4.table;
79
125
  return function (pluginState) {
80
126
  var tableNode = table && table.node;
81
127
  var schema = tr.doc.type.schema;
@@ -111,6 +157,19 @@ var buildPluginState = function buildPluginState(builders) {
111
157
  return function (props) {
112
158
  return function (pluginState) {
113
159
  if (!props.table) {
160
+ if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
161
+ var shouldClearTargetCellPosition = pluginState.targetCellPosition !== undefined;
162
+ var hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
163
+ if (!shouldClearTargetCellPosition && !hasActiveTableMenu) {
164
+ return pluginState;
165
+ }
166
+ return _objectSpread(_objectSpread({}, pluginState), {}, {
167
+ targetCellPosition: undefined,
168
+ activeTableMenu: hasActiveTableMenu ? {
169
+ type: 'none'
170
+ } : pluginState.activeTableMenu
171
+ });
172
+ }
114
173
  return pluginState.targetCellPosition ? _objectSpread(_objectSpread({}, pluginState), {}, {
115
174
  targetCellPosition: undefined
116
175
  }) : pluginState;
package/dist/esm/ui/FloatingContextualMenu/CellMenuPopup.js CHANGED
@@ -1,3 +1,7 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1
5
  import React, { useCallback, useContext, useRef } from 'react';
2
6
  import { Popup } from '@atlaskit/editor-common/ui';
3
7
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
@@ -12,13 +16,14 @@ import { TableMenu } from '../TableMenu/shared/TableMenu';
12
16
  var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
13
17
  var NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
14
18
  var CELL_MENU_TRIGGER_SELECTOR = ".".concat(ClassName.CONTEXTUAL_MENU_BUTTON);
19
+ var CELL_MENU_TRIGGER_CLEARANCE = [6, 0];
15
20
  export var CellMenuPopup = function CellMenuPopup(_ref) {
16
21
  var api = _ref.api,
17
22
  boundariesElement = _ref.boundariesElement,
18
23
  editorView = _ref.editorView,
19
24
  mountPoint = _ref.mountPoint,
20
25
  scrollableElement = _ref.scrollableElement,
21
- targetCellRef = _ref.targetCellRef,
26
+ target = _ref.target,
22
27
  zIndex = _ref.zIndex;
23
28
  var popupContentRef = useRef(null);
24
29
  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
@@ -45,6 +50,20 @@ export var CellMenuPopup = function CellMenuPopup(_ref) {
45
50
  }
46
51
  return target instanceof Element && Boolean(target.closest(NESTED_DROPDOWN_SELECTOR) || target.closest(CELL_MENU_TRIGGER_SELECTOR));
47
52
  }, []);
53
+ var horizontalPlacementRef = useRef(undefined);
54
+ var handlePlacementChanged = useCallback(function (_ref2) {
55
+ var _ref3 = _slicedToArray(_ref2, 2),
56
+ horizontalPlacement = _ref3[1];
57
+ horizontalPlacementRef.current = horizontalPlacement;
58
+ }, []);
59
+ var handlePositionCalculated = useCallback(function (position) {
60
+ if (horizontalPlacementRef.current !== 'left' || position.left === undefined) {
61
+ return position;
62
+ }
63
+ return _objectSpread(_objectSpread({}, position), {}, {
64
+ left: position.left + target.getBoundingClientRect().width
65
+ });
66
+ }, [target]);
48
67
  var handleCellMenuClickOutside = useCallback(function (event) {
49
68
  if (isEventInsideCellMenu(event)) {
50
69
  return;
@@ -52,19 +71,20 @@ export var CellMenuPopup = function CellMenuPopup(_ref) {
52
71
  closeCellMenu();
53
72
  }, [closeCellMenu, isEventInsideCellMenu]);
54
73
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
55
- alignX: "right",
56
- alignY: "top",
57
- target: targetCellRef,
74
+ alignX: "end",
75
+ alignY: "start",
76
+ target: target,
58
77
  mountTo: mountPoint,
59
78
  boundariesElement: boundariesElement,
60
79
  scrollableElement: scrollableElement,
61
80
  fitHeight: tablePopupMenuFitHeight,
62
81
  fitWidth: TABLE_MENU_WIDTH,
63
82
  zIndex: zIndex,
64
- forcePlacement: true
65
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
66
- ,
67
- offset: [-7, 0],
83
+ forcePlacement: true,
84
+ preventOverflow: true,
85
+ onPlacementChanged: handlePlacementChanged,
86
+ onPositionCalculated: handlePositionCalculated,
87
+ offset: CELL_MENU_TRIGGER_CLEARANCE,
68
88
  stick: true,
69
89
  handleClickOutside: handleCellMenuClickOutside,
70
90
  handleEscapeKeydown: closeCellMenu
package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js CHANGED
@@ -539,6 +539,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
539
539
  _this$props8$editorVi = _this$props8.editorView,
540
540
  state = _this$props8$editorVi.state,
541
541
  dispatch = _this$props8$editorVi.dispatch;
542
+ if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
543
+ if (getPluginState(state).isContextualMenuOpen) {
544
+ toggleContextualMenu()(state, dispatch);
545
+ }
546
+ _this.closeSubmenu();
547
+ return;
548
+ }
542
549
  toggleContextualMenu()(state, dispatch);
543
550
  if (!isOpen) {
544
551
  _this.setState({
@@ -649,6 +656,12 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
649
656
  setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
650
657
  if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
651
658
  _this.toggleOpen();
659
+ } else if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
660
+ _this.toggleOpen();
661
+ if (isCellMenuOpenByKeyboard) {
662
+ setFocusToCellMenu(false)(editorView.state, dispatch);
663
+ dom.focus();
664
+ }
652
665
  } else {
653
666
  toggleContextualMenu()(state, dispatch);
654
667
  _this.setState({
package/dist/esm/ui/FloatingContextualMenu/index.js CHANGED
@@ -64,16 +64,16 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
64
64
  }
65
65
  var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
66
66
  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
67
+ if (!(targetCellRef instanceof HTMLElement)) {
68
+ return null;
69
+ }
67
70
  return jsx(CellMenuPopup, {
68
71
  api: api,
69
72
  boundariesElement: boundariesElement,
70
73
  editorView: editorView,
71
74
  mountPoint: mountPoint,
72
- scrollableElement: scrollableElement
73
- // Ignored via go/ees005
74
- // eslint-disable-next-line @atlaskit/editor/no-as-casting
75
- ,
76
- targetCellRef: targetCellRef,
75
+ scrollableElement: scrollableElement,
76
+ target: targetCellRef,
77
77
  zIndex: parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex
78
78
  });
79
79
  }
package/dist/esm/ui/FloatingDragMenu/index.js CHANGED
@@ -77,6 +77,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
77
77
  ,
78
78
  zIndex: inStickyMode ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
79
79
  forcePlacement: true,
80
+ preventOverflow: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? dragMenuDirection === 'row' : undefined,
80
81
  offset: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
81
82
  stick: true
82
83
  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
package/dist/types/ui/FloatingContextualMenu/CellMenuPopup.d.ts CHANGED
@@ -7,8 +7,8 @@ type CellMenuPopupProps = {
7
7
  editorView: EditorView;
8
8
  mountPoint?: HTMLElement;
9
9
  scrollableElement?: HTMLElement;
10
- targetCellRef: HTMLElement;
10
+ target: HTMLElement;
11
11
  zIndex: number;
12
12
  };
13
- export declare const CellMenuPopup: ({ api, boundariesElement, editorView, mountPoint, scrollableElement, targetCellRef, zIndex, }: CellMenuPopupProps) => React.JSX.Element;
13
+ export declare const CellMenuPopup: ({ api, boundariesElement, editorView, mountPoint, scrollableElement, target, zIndex, }: CellMenuPopupProps) => React.JSX.Element;
14
14
  export {};
package/dist/types-ts4.5/ui/FloatingContextualMenu/CellMenuPopup.d.ts CHANGED
@@ -7,8 +7,8 @@ type CellMenuPopupProps = {
7
7
  editorView: EditorView;
8
8
  mountPoint?: HTMLElement;
9
9
  scrollableElement?: HTMLElement;
10
- targetCellRef: HTMLElement;
10
+ target: HTMLElement;
11
11
  zIndex: number;
12
12
  };
13
- export declare const CellMenuPopup: ({ api, boundariesElement, editorView, mountPoint, scrollableElement, targetCellRef, zIndex, }: CellMenuPopupProps) => React.JSX.Element;
13
+ export declare const CellMenuPopup: ({ api, boundariesElement, editorView, mountPoint, scrollableElement, target, zIndex, }: CellMenuPopupProps) => React.JSX.Element;
14
14
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "23.0.0",
3
+ "version": "23.0.1",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
28
28
  "singleton": true
29
29
  },
30
30
  "dependencies": {
31
- "@atlaskit/adf-schema": "^52.15.0",
31
+ "@atlaskit/adf-schema": "^52.16.0",
32
32
  "@atlaskit/button": "^23.11.0",
33
33
  "@atlaskit/custom-steps": "^0.17.0",
34
34
  "@atlaskit/editor-palette": "^2.2.0",
@@ -51,19 +51,19 @@
51
51
  "@atlaskit/editor-tables": "^2.10.0",
52
52
  "@atlaskit/editor-toolbar": "^1.9.0",
53
53
  "@atlaskit/editor-ui-control-model": "^1.2.0",
54
- "@atlaskit/icon": "^35.3.0",
55
- "@atlaskit/icon-lab": "^6.12.0",
54
+ "@atlaskit/icon": "^35.4.0",
55
+ "@atlaskit/icon-lab": "^6.13.0",
56
56
  "@atlaskit/insm": "^0.4.0",
57
57
  "@atlaskit/menu": "^8.5.0",
58
58
  "@atlaskit/platform-feature-flags": "^1.1.0",
59
59
  "@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
60
60
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
61
- "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
61
+ "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.2.0",
62
62
  "@atlaskit/primitives": "^19.0.0",
63
- "@atlaskit/tmp-editor-statsig": "^88.0.0",
63
+ "@atlaskit/tmp-editor-statsig": "^88.4.0",
64
64
  "@atlaskit/toggle": "^16.1.0",
65
65
  "@atlaskit/tokens": "^13.1.0",
66
- "@atlaskit/tooltip": "^22.5.0",
66
+ "@atlaskit/tooltip": "^22.6.0",
67
67
  "@babel/runtime": "^7.0.0",
68
68
  "@compiled/react": "^0.20.0",
69
69
  "@emotion/react": "^11.7.1",