@atlaskit/editor-plugin-table 22.4.7 → 22.4.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 22.4.8
+
+### Patch Changes
+
+- [`98ee7ca379f42`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98ee7ca379f42) -
+  Add experiment-gated table menu updates for cell menu
+- Updated dependencies
+
 ## 22.4.7
 
 ### Patch Changes

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

@@ -57,6 +57,11 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   var handleClick = function handleClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;
+    if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+      (0, _commands.toggleContextualMenu)()(state, dispatch);
+      return;
+    }
+
     // Clicking outside the dropdown handles toggling the menu closed
     // (otherwise these two toggles combat each other).
     // In the event a user clicks the chevron button again

package/dist/cjs/ui/FloatingContextualMenu/CellMenuPopup.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CellMenuPopup = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _userIntent = require("@atlaskit/editor-common/user-intent");
+var _commands = require("../../pm-plugins/commands");
+var _types = require("../../types");
+var _keys = require("../TableMenu/cell/keys");
+var _TableMenu = require("../TableMenu/shared/TableMenu");
+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); }
+var CellMenuPopup = exports.CellMenuPopup = function CellMenuPopup(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard,
+    isOpen = _ref.isOpen,
+    targetCellRef = _ref.targetCellRef;
+  var tableMenuRef = (0, _react.useRef)(null);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['userIntent'], function (states) {
+      var _states$userIntentSta;
+      return {
+        currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
+      };
+    }),
+    currentUserIntent = _useSharedPluginState.currentUserIntent;
+  var closeCellMenu = (0, _react.useCallback)(function () {
+    var state = editorView.state,
+      dispatch = editorView.dispatch,
+      dom = editorView.dom;
+    (0, _commands.toggleContextualMenu)()(state, dispatch);
+    if (isCellMenuOpenByKeyboard) {
+      (0, _commands.setFocusToCellMenu)(false)(state, dispatch);
+      dom.focus();
+    }
+  }, [editorView, isCellMenuOpenByKeyboard]);
+  (0, _react.useEffect)(function () {
+    if (!isOpen || currentUserIntent !== 'tableDragMenuPopupOpen') {
+      return;
+    }
+    closeCellMenu();
+  }, [closeCellMenu, currentUserIntent, isOpen]);
+  (0, _react.useEffect)(function () {
+    if (!isOpen) {
+      return;
+    }
+    if (!(targetCellRef instanceof HTMLElement)) {
+      return;
+    }
+    var ownerDocument = targetCellRef.ownerDocument;
+    var handlePointerDown = function handlePointerDown(event) {
+      var _tableMenuRef$current;
+      var target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if ((_tableMenuRef$current = tableMenuRef.current) !== null && _tableMenuRef$current !== void 0 && _tableMenuRef$current.contains(target)) {
+        return;
+      }
+      var cellMenuButton = ownerDocument.querySelector(".".concat(_types.TableCssClassName.CONTEXTUAL_MENU_BUTTON));
+      if (cellMenuButton !== null && cellMenuButton !== void 0 && cellMenuButton.contains(target)) {
+        return;
+      }
+      closeCellMenu();
+    };
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Escape') {
+        closeCellMenu();
+      }
+    };
+    var unbindPointerDown = (0, _bindEventListener.bind)(ownerDocument, {
+      type: 'pointerdown',
+      listener: handlePointerDown,
+      options: {
+        capture: true
+      }
+    });
+    var unbindKeyDown = (0, _bindEventListener.bind)(ownerDocument, {
+      type: 'keydown',
+      listener: handleKeyDown,
+      options: {
+        capture: true
+      }
+    });
+    return function () {
+      unbindPointerDown();
+      unbindKeyDown();
+    };
+  }, [closeCellMenu, isOpen, targetCellRef]);
+  return /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
+    api: api,
+    userIntent: "tableContextualMenuPopupOpen"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: tableMenuRef
+  }, /*#__PURE__*/_react.default.createElement(_TableMenu.TableMenu, {
+    api: api,
+    surface: _keys.CELL_MENU
+  })));
+};

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

@@ -10,8 +10,11 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _consts = require("../consts");
+var _consts2 = require("../TableMenu/shared/consts");
+var _CellMenuPopup = require("./CellMenuPopup");
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
 var _styles = require("./styles");
 /**
@@ -72,7 +75,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     fitHeight: _consts.tablePopupMenuFitHeight,
-    fitWidth: _consts.contextualMenuDropdownWidthDnD
+    fitWidth: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? _consts2.TABLE_MENU_WIDTH : _consts.contextualMenuDropdownWidthDnD
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     ,
@@ -82,7 +85,15 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     ,
     offset: [-7, 0],
     stick: true
-  }, (0, _react.jsx)("div", {
+  }, (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? (0, _react.jsx)(_CellMenuPopup.CellMenuPopup, {
+    api: api,
+    editorView: editorView,
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
+    isOpen: isOpen,
+    targetCellRef: targetCellRef
+  }) :
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  (0, _react.jsx)("div", {
     css: (0, _styles.tablePopupStyles)()
   }, (0, _react.jsx)(_ContextualMenu.default, {
     editorView: editorView

package/dist/cjs/ui/TableMenu/cell/getCellMenuComponents.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCellMenuComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _MergeCellsItem = require("./items/MergeCellsItem");
+var _SplitCellItem = require("./items/SplitCellItem");
+var _keys = require("./keys");
+/**
+ * Returns the RegisterComponent[] array defining the cell contextual menu surface.
+ *
+ * This is a **UI-only stub** — all items are always visible with no conditional
+ * logic and no wired actions. Functional behaviour (actions, conditional visibility)
+ * will be connected in follow-up tickets.
+ */
+var getCellMenuComponents = exports.getCellMenuComponents = function getCellMenuComponents() {
+  return [
+  // --- Menu surface ---
+  {
+    type: _keys.CELL_MENU.type,
+    key: _keys.CELL_MENU.key
+  },
+  // --- Main action section (Background color, Merge cells, Split cell) ---
+  {
+    type: _keys.CELL_ACTION_SECTION.type,
+    key: _keys.CELL_ACTION_SECTION.key,
+    parents: [{
+      type: _keys.CELL_MENU.type,
+      key: _keys.CELL_MENU.key,
+      rank: _keys.CELL_MENU_SECTION_RANK[_keys.CELL_ACTION_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, props.children);
+    }
+  }, {
+    type: _keys.MERGE_CELLS_ITEM.type,
+    key: _keys.MERGE_CELLS_ITEM.key,
+    parents: [{
+      type: _keys.CELL_ACTION_SECTION.type,
+      key: _keys.CELL_ACTION_SECTION.key,
+      rank: _keys.CELL_ACTION_SECTION_RANK[_keys.MERGE_CELLS_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_MergeCellsItem.MergeCellsItem, null);
+    }
+  }, {
+    type: _keys.SPLIT_CELL_ITEM.type,
+    key: _keys.SPLIT_CELL_ITEM.key,
+    parents: [{
+      type: _keys.CELL_ACTION_SECTION.type,
+      key: _keys.CELL_ACTION_SECTION.key,
+      rank: _keys.CELL_ACTION_SECTION_RANK[_keys.SPLIT_CELL_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_SplitCellItem.SplitCellItem, null);
+    }
+  },
+  // --- Danger section (Clear cell) ---
+  {
+    type: _keys.CELL_DANGER_SECTION.type,
+    key: _keys.CELL_DANGER_SECTION.key,
+    parents: [{
+      type: _keys.CELL_MENU.type,
+      key: _keys.CELL_MENU.key,
+      rank: _keys.CELL_MENU_SECTION_RANK[_keys.CELL_DANGER_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }];
+};

package/dist/cjs/ui/TableMenu/cell/items/MergeCellsItem.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MergeCellsItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var MergeCellsItem = exports.MergeCellsItem = function MergeCellsItem() {
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableCellMergeIcon, {
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(_messages.tableMessages.mergeCells));
+};

package/dist/cjs/ui/TableMenu/cell/items/SplitCellItem.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitCellItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var SplitCellItem = exports.SplitCellItem = function SplitCellItem() {
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableCellSplitIcon, {
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(_messages.tableMessages.splitCell));
+};

package/dist/cjs/ui/TableMenu/cell/keys.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SPLIT_CELL_ITEM = exports.MERGE_CELLS_ITEM = exports.CELL_MENU_SECTION_RANK = exports.CELL_MENU = exports.CELL_DANGER_SECTION_RANK = exports.CELL_DANGER_SECTION = exports.CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _keys = require("../shared/keys");
+// --- Menu surface ---
+
+var CELL_MENU = exports.CELL_MENU = {
+  type: 'menu',
+  key: 'cell-contextual-menu'
+};
+
+// --- Sections ---
+
+var CELL_ACTION_SECTION = exports.CELL_ACTION_SECTION = {
+  type: 'menu-section',
+  key: 'cell-action-section'
+};
+var CELL_DANGER_SECTION = exports.CELL_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'cell-danger-section'
+};
+var CELL_MENU_SECTION_RANK = exports.CELL_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, CELL_ACTION_SECTION.key, 100), CELL_DANGER_SECTION.key, 200);
+var MERGE_CELLS_ITEM = exports.MERGE_CELLS_ITEM = {
+  type: 'menu-item',
+  key: 'merge-cells'
+};
+var SPLIT_CELL_ITEM = exports.SPLIT_CELL_ITEM = {
+  type: 'menu-item',
+  key: 'split-cell'
+};
+
+// --- Item ranks within their sections ---
+
+var CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keys.BACKGROUND_COLOR_ITEM.key, 100), MERGE_CELLS_ITEM.key, 200), SPLIT_CELL_ITEM.key, 300);
+var CELL_DANGER_SECTION_RANK = exports.CELL_DANGER_SECTION_RANK = (0, _defineProperty2.default)({}, _keys.CLEAR_CELLS_ITEM.key, 100);

package/dist/cjs/ui/TableMenu/column/items/MoveColumnRightItem.js

@@ -10,12 +10,8 @@ var _reactIntl = require("react-intl");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var getMoveColumnRightShortcut = function getMoveColumnRightShortcut() {
-  return (0, _keymaps.tooltip)((0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? _keymaps.moveColumnRight : _keymaps.moveColumnRightOld);
-};
 var MoveColumnRightItem = exports.MoveColumnRightItem = function MoveColumnRightItem() {
-  var _getMoveColumnRightSh;
+  var _tooltip;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
@@ -25,7 +21,7 @@ var MoveColumnRightItem = exports.MoveColumnRightItem = function MoveColumnRight
       size: "small"
     }),
     elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
-      shortcut: (_getMoveColumnRightSh = getMoveColumnRightShortcut()) !== null && _getMoveColumnRightSh !== void 0 ? _getMoveColumnRightSh : ''
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.moveColumnRight)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(_messages.tableMessages.moveColumnRight, {
     0: 1

package/dist/cjs/ui/TableMenu/shared/TableMenu.js

@@ -32,4 +32,5 @@ var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref
     surface: surface,
     components: components
   }));
-});
+});
+TableMenu.displayName = 'TableMenu';

package/dist/cjs/ui/TableMenu/shared/getSharedItems.js

@@ -6,38 +6,47 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getSharedItems = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _keys = require("../column/keys");
-var _keys2 = require("../row/keys");
+var _keys = require("../cell/keys");
+var _keys2 = require("../column/keys");
+var _keys3 = require("../row/keys");
 var _BackgroundColorItem = require("./items/BackgroundColorItem");
 var _ClearCellsItem = require("./items/ClearCellsItem");
-var _keys3 = require("./keys");
+var _keys4 = require("./keys");
 var getSharedItems = exports.getSharedItems = function getSharedItems() {
   return [{
-    type: _keys3.BACKGROUND_COLOR_ITEM.type,
-    key: _keys3.BACKGROUND_COLOR_ITEM.key,
+    type: _keys4.BACKGROUND_COLOR_ITEM.type,
+    key: _keys4.BACKGROUND_COLOR_ITEM.key,
     parents: [{
-      type: _keys2.ROW_BACKGROUND_SECTION.type,
-      key: _keys2.ROW_BACKGROUND_SECTION.key,
-      rank: _keys2.ROW_BACKGROUND_SECTION_RANK[_keys3.BACKGROUND_COLOR_ITEM.key]
+      type: _keys3.ROW_BACKGROUND_SECTION.type,
+      key: _keys3.ROW_BACKGROUND_SECTION.key,
+      rank: _keys3.ROW_BACKGROUND_SECTION_RANK[_keys4.BACKGROUND_COLOR_ITEM.key]
     }, {
-      type: _keys.COLUMN_BACKGROUND_SECTION.type,
-      key: _keys.COLUMN_BACKGROUND_SECTION.key,
-      rank: _keys.COLUMN_BACKGROUND_SECTION_RANK[_keys3.BACKGROUND_COLOR_ITEM.key]
+      type: _keys2.COLUMN_BACKGROUND_SECTION.type,
+      key: _keys2.COLUMN_BACKGROUND_SECTION.key,
+      rank: _keys2.COLUMN_BACKGROUND_SECTION_RANK[_keys4.BACKGROUND_COLOR_ITEM.key]
+    }, {
+      type: _keys.CELL_ACTION_SECTION.type,
+      key: _keys.CELL_ACTION_SECTION.key,
+      rank: _keys.CELL_ACTION_SECTION_RANK[_keys4.BACKGROUND_COLOR_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/_react.default.createElement(_BackgroundColorItem.BackgroundColorItem, null);
     }
   }, {
-    type: _keys3.CLEAR_CELLS_ITEM.type,
-    key: _keys3.CLEAR_CELLS_ITEM.key,
+    type: _keys4.CLEAR_CELLS_ITEM.type,
+    key: _keys4.CLEAR_CELLS_ITEM.key,
     parents: [{
-      type: _keys2.ROW_DANGER_SECTION.type,
-      key: _keys2.ROW_DANGER_SECTION.key,
-      rank: _keys2.ROW_DANGER_SECTION_RANK[_keys3.CLEAR_CELLS_ITEM.key]
+      type: _keys3.ROW_DANGER_SECTION.type,
+      key: _keys3.ROW_DANGER_SECTION.key,
+      rank: _keys3.ROW_DANGER_SECTION_RANK[_keys4.CLEAR_CELLS_ITEM.key]
+    }, {
+      type: _keys2.COLUMN_DANGER_SECTION.type,
+      key: _keys2.COLUMN_DANGER_SECTION.key,
+      rank: _keys2.COLUMN_DANGER_SECTION_RANK[_keys4.CLEAR_CELLS_ITEM.key]
     }, {
-      type: _keys.COLUMN_DANGER_SECTION.type,
-      key: _keys.COLUMN_DANGER_SECTION.key,
-      rank: _keys.COLUMN_DANGER_SECTION_RANK[_keys3.CLEAR_CELLS_ITEM.key]
+      type: _keys.CELL_DANGER_SECTION.type,
+      key: _keys.CELL_DANGER_SECTION.key,
+      rank: _keys.CELL_DANGER_SECTION_RANK[_keys4.CLEAR_CELLS_ITEM.key]
     }],
     component: function component() {
       return /*#__PURE__*/_react.default.createElement(_ClearCellsItem.ClearCellsItem, null);

package/dist/cjs/ui/TableMenu/shared/getTableMenuComponents.js

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTableMenuComponents = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _getCellMenuComponents = require("../cell/getCellMenuComponents");
 var _getColumnMenuComponents = require("../column/getColumnMenuComponents");
 var _getRowMenuComponents = require("../row/getRowMenuComponents");
 var _getSharedItems = require("./getSharedItems");
 var getTableMenuComponents = exports.getTableMenuComponents = function getTableMenuComponents() {
-  return [].concat((0, _toConsumableArray2.default)((0, _getRowMenuComponents.getRowMenuComponents)()), (0, _toConsumableArray2.default)((0, _getColumnMenuComponents.getColumnMenuComponents)()), (0, _toConsumableArray2.default)((0, _getSharedItems.getSharedItems)()));
+  return [].concat((0, _toConsumableArray2.default)((0, _getRowMenuComponents.getRowMenuComponents)()), (0, _toConsumableArray2.default)((0, _getColumnMenuComponents.getColumnMenuComponents)()), (0, _toConsumableArray2.default)((0, _getCellMenuComponents.getCellMenuComponents)()), (0, _toConsumableArray2.default)((0, _getSharedItems.getSharedItems)()));
 };

package/dist/es2019/ui/FloatingContextualButton/index.js

@@ -52,6 +52,11 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       state,
       dispatch
     } = editorView;
+    if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+      toggleContextualMenu()(state, dispatch);
+      return;
+    }
+
     // Clicking outside the dropdown handles toggling the menu closed
     // (otherwise these two toggles combat each other).
     // In the event a user clicks the chevron button again

package/dist/es2019/ui/FloatingContextualMenu/CellMenuPopup.js

@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
+import { setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';
+import { TableCssClassName as ClassName } from '../../types';
+import { CELL_MENU } from '../TableMenu/cell/keys';
+import { TableMenu } from '../TableMenu/shared/TableMenu';
+export const CellMenuPopup = ({
+  api,
+  editorView,
+  isCellMenuOpenByKeyboard,
+  isOpen,
+  targetCellRef
+}) => {
+  const tableMenuRef = useRef(null);
+  const {
+    currentUserIntent
+  } = useSharedPluginStateWithSelector(api, ['userIntent'], states => {
+    var _states$userIntentSta;
+    return {
+      currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
+    };
+  });
+  const closeCellMenu = useCallback(() => {
+    const {
+      state,
+      dispatch,
+      dom
+    } = editorView;
+    toggleContextualMenu()(state, dispatch);
+    if (isCellMenuOpenByKeyboard) {
+      setFocusToCellMenu(false)(state, dispatch);
+      dom.focus();
+    }
+  }, [editorView, isCellMenuOpenByKeyboard]);
+  useEffect(() => {
+    if (!isOpen || currentUserIntent !== 'tableDragMenuPopupOpen') {
+      return;
+    }
+    closeCellMenu();
+  }, [closeCellMenu, currentUserIntent, isOpen]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    if (!(targetCellRef instanceof HTMLElement)) {
+      return;
+    }
+    const ownerDocument = targetCellRef.ownerDocument;
+    const handlePointerDown = event => {
+      var _tableMenuRef$current;
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if ((_tableMenuRef$current = tableMenuRef.current) !== null && _tableMenuRef$current !== void 0 && _tableMenuRef$current.contains(target)) {
+        return;
+      }
+      const cellMenuButton = ownerDocument.querySelector(`.${ClassName.CONTEXTUAL_MENU_BUTTON}`);
+      if (cellMenuButton !== null && cellMenuButton !== void 0 && cellMenuButton.contains(target)) {
+        return;
+      }
+      closeCellMenu();
+    };
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        closeCellMenu();
+      }
+    };
+    const unbindPointerDown = bind(ownerDocument, {
+      type: 'pointerdown',
+      listener: handlePointerDown,
+      options: {
+        capture: true
+      }
+    });
+    const unbindKeyDown = bind(ownerDocument, {
+      type: 'keydown',
+      listener: handleKeyDown,
+      options: {
+        capture: true
+      }
+    });
+    return () => {
+      unbindPointerDown();
+      unbindKeyDown();
+    };
+  }, [closeCellMenu, isOpen, targetCellRef]);
+  return /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
+    api: api,
+    userIntent: "tableContextualMenuPopupOpen"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: tableMenuRef
+  }, /*#__PURE__*/React.createElement(TableMenu, {
+    api: api,
+    surface: CELL_MENU
+  })));
+};

package/dist/es2019/ui/FloatingContextualMenu/index.js

@@ -8,9 +8,11 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
-
+import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
+import { CellMenuPopup } from './CellMenuPopup';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ContextualMenu from './ContextualMenu';
@@ -68,7 +70,7 @@ const FloatingContextualMenu = ({
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     fitHeight: tablePopupMenuFitHeight,
-    fitWidth: contextualMenuDropdownWidthDnD
+    fitWidth: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? TABLE_MENU_WIDTH : contextualMenuDropdownWidthDnD
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     ,
@@ -78,7 +80,15 @@ const FloatingContextualMenu = ({
     ,
     offset: [-7, 0],
     stick: true
-  }, jsx("div", {
+  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? jsx(CellMenuPopup, {
+    api: api,
+    editorView: editorView,
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
+    isOpen: isOpen,
+    targetCellRef: targetCellRef
+  }) :
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  jsx("div", {
     css: tablePopupStyles()
   }, jsx(ContextualMenu, {
     editorView: editorView

package/dist/es2019/ui/TableMenu/cell/getCellMenuComponents.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { MergeCellsItem } from './items/MergeCellsItem';
+import { SplitCellItem } from './items/SplitCellItem';
+import { CELL_MENU, CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_MENU_SECTION_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK } from './keys';
+
+/**
+ * Returns the RegisterComponent[] array defining the cell contextual menu surface.
+ *
+ * This is a **UI-only stub** — all items are always visible with no conditional
+ * logic and no wired actions. Functional behaviour (actions, conditional visibility)
+ * will be connected in follow-up tickets.
+ */
+export const getCellMenuComponents = () => [
+// --- Menu surface ---
+{
+  type: CELL_MENU.type,
+  key: CELL_MENU.key
+},
+// --- Main action section (Background color, Merge cells, Split cell) ---
+{
+  type: CELL_ACTION_SECTION.type,
+  key: CELL_ACTION_SECTION.key,
+  parents: [{
+    type: CELL_MENU.type,
+    key: CELL_MENU.key,
+    rank: CELL_MENU_SECTION_RANK[CELL_ACTION_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children)
+}, {
+  type: MERGE_CELLS_ITEM.type,
+  key: MERGE_CELLS_ITEM.key,
+  parents: [{
+    type: CELL_ACTION_SECTION.type,
+    key: CELL_ACTION_SECTION.key,
+    rank: CELL_ACTION_SECTION_RANK[MERGE_CELLS_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(MergeCellsItem, null)
+}, {
+  type: SPLIT_CELL_ITEM.type,
+  key: SPLIT_CELL_ITEM.key,
+  parents: [{
+    type: CELL_ACTION_SECTION.type,
+    key: CELL_ACTION_SECTION.key,
+    rank: CELL_ACTION_SECTION_RANK[SPLIT_CELL_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(SplitCellItem, null)
+},
+// --- Danger section (Clear cell) ---
+{
+  type: CELL_DANGER_SECTION.type,
+  key: CELL_DANGER_SECTION.key,
+  parents: [{
+    type: CELL_MENU.type,
+    key: CELL_MENU.key,
+    rank: CELL_MENU_SECTION_RANK[CELL_DANGER_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+}];