@atlaskit/editor-plugin-table 22.2.24 → 22.3.1

package/dist/esm/pm-plugins/main.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { bind } from 'bind-event-listener';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { insideTable } from '@atlaskit/editor-common/core-utils';
+import { insideTable, isSSR } from '@atlaskit/editor-common/core-utils';
 import { isNestedTablesSupported } from '@atlaskit/editor-common/nesting';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension, transformSliceToRemoveOpenNestedExpand } from '@atlaskit/editor-common/transforms';
@@ -59,7 +59,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
     return editorView.state;
   };
   var getNodeView = function getNodeView() {
-    return {
+    return _objectSpread(_objectSpread({}, expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true) && isSSR() ? {} : {
       table: tableView({
         portalProviderAPI: portalProviderAPI,
         eventDispatcher: eventDispatcher,
@@ -70,7 +70,8 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         isCommentEditor: isCommentEditor,
         isChromelessEditor: isChromelessEditor,
         allowFixedColumnWidthOption: allowFixedColumnWidthOption
-      }),
+      })
+    }), {}, {
       tableRow: tableRowView({
         eventDispatcher: eventDispatcher,
         pluginInjectionApi: pluginInjectionApi
@@ -83,7 +84,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         eventDispatcher: eventDispatcher,
         pluginInjectionApi: pluginInjectionApi
       })
-    };
+    });
   };
   var nodeViews = getNodeView();
   return new SafePlugin({

package/dist/esm/tablePlugin.js

@@ -46,6 +46,7 @@ import { getHeightInfoPayload, getWidthInfoPayload } from './pm-plugins/utils/an
 import { createTableWithWidth } from './pm-plugins/utils/create';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { ContentComponent } from './ui/ContentComponent';
+import { getRowMenuComponents } from './ui/TableMenu/row/getRowMenuComponents';
 import { getToolbarConfig } from './ui/toolbar';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
@@ -82,6 +83,10 @@ var tablePlugin = function tablePlugin(_ref) {
   var isTableSelectorEnabled =
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
   !(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 || (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableSelector) && editorExperiment('platform_editor_controls', 'variant1');
+  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getRowMenuComponents());
+  }
   return {
     name: 'table',
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access

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

@@ -3,9 +3,13 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../../types';
-import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
+import { dragMenuDropdownWidth, dragTableInsertColumnButtonSize, tablePopupMenuFitHeight } from '../consts';
+import { RowMenu } from '../TableMenu/row/RowMenu';
+import { newMenuWidth } from '../TableMenu/shared/consts';
 import DragMenu from './DragMenu';
+var rowMenuOffset = dragTableInsertColumnButtonSize + 4;
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var _getEditorFeatureFlag;
   var mountPoint = _ref.mountPoint,
@@ -32,7 +36,6 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   }
   var inStickyMode = (stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky) || (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW)) && fg('platform_editor_table_sticky_header_patch_7');
   var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
-  var offset = direction === 'row' ? [-9, 0] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
@@ -50,7 +53,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: dragMenuDropdownWidth,
+    fitWidth: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? newMenuWidth : dragMenuDropdownWidth,
     fitHeight: tablePopupMenuFitHeight
     // 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.
@@ -58,9 +61,11 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     ,
     zIndex: inStickyMode ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: offset,
+    offset: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [rowMenuOffset, 0] : direction === 'row' ? [-9, 0] : [0, -7],
     stick: true
-  }, /*#__PURE__*/React.createElement(DragMenu, {
+  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(RowMenu, {
+    api: api
+  }) : /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,
     isOpen: isOpen,
     tableNode: tableNode,

package/dist/esm/ui/TableMenu/row/RowMenu.compiled.css

@@ -0,0 +1,6 @@
+
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._18m915vq{overflow-y:hidden}
+._1bsb1178{width:280px}
+._1reo15vq{overflow-x:hidden}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

package/dist/esm/ui/TableMenu/row/RowMenu.js

@@ -0,0 +1,28 @@
+/* RowMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./RowMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
+import { Box } from '@atlaskit/primitives/compiled';
+import { ROW_MENU } from './keys';
+var rowMenuContainerStyles = {
+  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+};
+export var RowMenu = function RowMenu(_ref) {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
+  var api = _ref.api;
+  var rowMenuComponents = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(ROW_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  var surface = rowMenuComponents.find(function (c) {
+    return c.type === ROW_MENU.type;
+  });
+  if (!surface) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: rowMenuContainerStyles.container,
+    testId: "row-handle-menu"
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    surface: surface,
+    components: rowMenuComponents
+  }));
+};

package/dist/esm/ui/TableMenu/row/RowMenuItems.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { addRowAfter, addRowBefore, deleteRow, moveRowDown, moveRowDownOld, moveRowUp, moveRowUpOld, tooltip } from '@atlaskit/editor-common/keymaps';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { DeleteIcon, TableRowAddAboveIcon, TableRowAddBelowIcon, TableRowMoveDownIcon, TableRowMoveUpIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import Toggle from '@atlaskit/toggle';
+export var HeaderRowToggleItem = function HeaderRowToggleItem() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-header-row-toggle",
+    elemAfter: /*#__PURE__*/React.createElement(Toggle, {
+      id: "row-menu-toggle-header-row",
+      label: formatMessage(messages.headerRow),
+      isChecked: false
+    })
+  }, formatMessage(messages.headerRow));
+};
+export var NumberedRowsToggleItem = function NumberedRowsToggleItem() {
+  var _useIntl2 = useIntl(),
+    formatMessage = _useIntl2.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-numbered-rows-toggle",
+    elemAfter: /*#__PURE__*/React.createElement(Toggle, {
+      id: "row-menu-toggle-numbered-rows",
+      label: formatMessage(messages.numberedRows),
+      isChecked: false
+    })
+  }, formatMessage(messages.numberedRows));
+};
+var getMoveRowUpShortcut = function getMoveRowUpShortcut() {
+  return tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowUp : moveRowUpOld);
+};
+var getMoveRowDownShortcut = function getMoveRowDownShortcut() {
+  return tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowDown : moveRowDownOld);
+};
+export var AddRowAboveItem = function AddRowAboveItem() {
+  var _tooltip;
+  var _useIntl3 = useIntl(),
+    formatMessage = _useIntl3.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-add-row-above",
+    elemBefore: /*#__PURE__*/React.createElement(TableRowAddAboveIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(addRowBefore)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(messages.addRowAbove));
+};
+export var AddRowBelowItem = function AddRowBelowItem() {
+  var _tooltip2;
+  var _useIntl4 = useIntl(),
+    formatMessage = _useIntl4.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-add-row-below",
+    elemBefore: /*#__PURE__*/React.createElement(TableRowAddBelowIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip2 = tooltip(addRowAfter)) !== null && _tooltip2 !== void 0 ? _tooltip2 : ''
+    })
+  }, formatMessage(messages.addRowBelow));
+};
+export var MoveRowUpItem = function MoveRowUpItem() {
+  var _getMoveRowUpShortcut;
+  var _useIntl5 = useIntl(),
+    formatMessage = _useIntl5.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-move-row-up",
+    elemBefore: /*#__PURE__*/React.createElement(TableRowMoveUpIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_getMoveRowUpShortcut = getMoveRowUpShortcut()) !== null && _getMoveRowUpShortcut !== void 0 ? _getMoveRowUpShortcut : ''
+    })
+  }, formatMessage(messages.moveRowUp, {
+    0: 1
+  }));
+};
+export var MoveRowDownItem = function MoveRowDownItem() {
+  var _getMoveRowDownShortc;
+  var _useIntl6 = useIntl(),
+    formatMessage = _useIntl6.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-move-row-down",
+    elemBefore: /*#__PURE__*/React.createElement(TableRowMoveDownIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_getMoveRowDownShortc = getMoveRowDownShortcut()) !== null && _getMoveRowDownShortc !== void 0 ? _getMoveRowDownShortc : ''
+    })
+  }, formatMessage(messages.moveRowDown, {
+    0: 1
+  }));
+};
+export var DeleteRowItem = function DeleteRowItem() {
+  var _tooltip3;
+  var _useIntl7 = useIntl(),
+    formatMessage = _useIntl7.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: "row-menu-delete-row",
+    elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip3 = tooltip(deleteRow)) !== null && _tooltip3 !== void 0 ? _tooltip3 : ''
+    })
+  }, formatMessage(messages.removeRows, {
+    0: 1
+  }));
+};

package/dist/esm/ui/TableMenu/row/getRowMenuComponents.js

@@ -0,0 +1,183 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { BackgroundColorItem } from '../shared/items/BackgroundColorItem';
+import { ClearCellsItem } from '../shared/items/ClearCellsItem';
+import { ROW_MENU, ROW_TOGGLE_SECTION, ROW_BACKGROUND_SECTION, ROW_ADD_SECTION, ROW_DANGER_SECTION, ROW_SECTION_RANK, HEADER_ROW_TOGGLE_ITEM, NUMBERED_ROWS_TOGGLE_ITEM, BACKGROUND_COLOR_ITEM, ADD_ROW_ABOVE_ITEM, ADD_ROW_BELOW_ITEM, MOVE_ROW_UP_ITEM, MOVE_ROW_DOWN_ITEM, CLEAR_CELLS_ITEM, DELETE_ROW_ITEM, TOGGLE_SECTION_ITEM_RANK, BACKGROUND_SECTION_ITEM_RANK, ADD_SECTION_ITEM_RANK, DANGER_SECTION_ITEM_RANK } from './keys';
+import { HeaderRowToggleItem, NumberedRowsToggleItem, AddRowAboveItem, AddRowBelowItem, MoveRowUpItem, MoveRowDownItem, DeleteRowItem } from './RowMenuItems';
+
+/**
+ * Returns the RegisterComponent[] array defining the row 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 var getRowMenuComponents = function getRowMenuComponents() {
+  return [
+  // --- Menu surface ---
+  {
+    type: ROW_MENU.type,
+    key: ROW_MENU.key
+  },
+  // --- Toggle section (Header row, Numbered rows) ---
+  {
+    type: ROW_TOGGLE_SECTION.type,
+    key: ROW_TOGGLE_SECTION.key,
+    parents: [{
+      type: ROW_MENU.type,
+      key: ROW_MENU.key,
+      rank: ROW_SECTION_RANK[ROW_TOGGLE_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children);
+    }
+  }, {
+    type: HEADER_ROW_TOGGLE_ITEM.type,
+    key: HEADER_ROW_TOGGLE_ITEM.key,
+    parents: [{
+      type: ROW_TOGGLE_SECTION.type,
+      key: ROW_TOGGLE_SECTION.key,
+      rank: TOGGLE_SECTION_ITEM_RANK[HEADER_ROW_TOGGLE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(HeaderRowToggleItem, null);
+    }
+  }, {
+    type: NUMBERED_ROWS_TOGGLE_ITEM.type,
+    key: NUMBERED_ROWS_TOGGLE_ITEM.key,
+    parents: [{
+      type: ROW_TOGGLE_SECTION.type,
+      key: ROW_TOGGLE_SECTION.key,
+      rank: TOGGLE_SECTION_ITEM_RANK[NUMBERED_ROWS_TOGGLE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(NumberedRowsToggleItem, null);
+    }
+  },
+  // --- Background color section ---
+  {
+    type: ROW_BACKGROUND_SECTION.type,
+    key: ROW_BACKGROUND_SECTION.key,
+    parents: [{
+      type: ROW_MENU.type,
+      key: ROW_MENU.key,
+      rank: ROW_SECTION_RANK[ROW_BACKGROUND_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: BACKGROUND_COLOR_ITEM.type,
+    key: BACKGROUND_COLOR_ITEM.key,
+    parents: [{
+      type: ROW_BACKGROUND_SECTION.type,
+      key: ROW_BACKGROUND_SECTION.key,
+      rank: BACKGROUND_SECTION_ITEM_RANK[BACKGROUND_COLOR_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(BackgroundColorItem, {
+        testId: "row-menu-background-color"
+      });
+    }
+  },
+  // --- Add / Move section ---
+  {
+    type: ROW_ADD_SECTION.type,
+    key: ROW_ADD_SECTION.key,
+    parents: [{
+      type: ROW_MENU.type,
+      key: ROW_MENU.key,
+      rank: ROW_SECTION_RANK[ROW_ADD_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: ADD_ROW_ABOVE_ITEM.type,
+    key: ADD_ROW_ABOVE_ITEM.key,
+    parents: [{
+      type: ROW_ADD_SECTION.type,
+      key: ROW_ADD_SECTION.key,
+      rank: ADD_SECTION_ITEM_RANK[ADD_ROW_ABOVE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(AddRowAboveItem, null);
+    }
+  }, {
+    type: ADD_ROW_BELOW_ITEM.type,
+    key: ADD_ROW_BELOW_ITEM.key,
+    parents: [{
+      type: ROW_ADD_SECTION.type,
+      key: ROW_ADD_SECTION.key,
+      rank: ADD_SECTION_ITEM_RANK[ADD_ROW_BELOW_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(AddRowBelowItem, null);
+    }
+  }, {
+    type: MOVE_ROW_UP_ITEM.type,
+    key: MOVE_ROW_UP_ITEM.key,
+    parents: [{
+      type: ROW_ADD_SECTION.type,
+      key: ROW_ADD_SECTION.key,
+      rank: ADD_SECTION_ITEM_RANK[MOVE_ROW_UP_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(MoveRowUpItem, null);
+    }
+  }, {
+    type: MOVE_ROW_DOWN_ITEM.type,
+    key: MOVE_ROW_DOWN_ITEM.key,
+    parents: [{
+      type: ROW_ADD_SECTION.type,
+      key: ROW_ADD_SECTION.key,
+      rank: ADD_SECTION_ITEM_RANK[MOVE_ROW_DOWN_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(MoveRowDownItem, null);
+    }
+  },
+  // --- Danger section (Clear cells, Delete row) ---
+  {
+    type: ROW_DANGER_SECTION.type,
+    key: ROW_DANGER_SECTION.key,
+    parents: [{
+      type: ROW_MENU.type,
+      key: ROW_MENU.key,
+      rank: ROW_SECTION_RANK[ROW_DANGER_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: CLEAR_CELLS_ITEM.type,
+    key: CLEAR_CELLS_ITEM.key,
+    parents: [{
+      type: ROW_DANGER_SECTION.type,
+      key: ROW_DANGER_SECTION.key,
+      rank: DANGER_SECTION_ITEM_RANK[CLEAR_CELLS_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(ClearCellsItem, {
+        testId: "row-menu-clear-cells"
+      });
+    }
+  }, {
+    type: DELETE_ROW_ITEM.type,
+    key: DELETE_ROW_ITEM.key,
+    parents: [{
+      type: ROW_DANGER_SECTION.type,
+      key: ROW_DANGER_SECTION.key,
+      rank: DANGER_SECTION_ITEM_RANK[DELETE_ROW_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(DeleteRowItem, null);
+    }
+  }];
+};

package/dist/esm/ui/TableMenu/row/keys.js

@@ -0,0 +1,70 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+// --- Menu surface ---
+
+export var ROW_MENU = {
+  type: 'menu',
+  key: 'row-handle-menu'
+};
+
+// --- Sections ---
+
+export var ROW_TOGGLE_SECTION = {
+  type: 'menu-section',
+  key: 'row-toggle-section'
+};
+export var ROW_BACKGROUND_SECTION = {
+  type: 'menu-section',
+  key: 'row-background-section'
+};
+export var ROW_ADD_SECTION = {
+  type: 'menu-section',
+  key: 'row-add-section'
+};
+export var ROW_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'row-danger-section'
+};
+export var ROW_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ROW_TOGGLE_SECTION.key, 100), ROW_BACKGROUND_SECTION.key, 200), ROW_ADD_SECTION.key, 300), ROW_DANGER_SECTION.key, 400);
+export var HEADER_ROW_TOGGLE_ITEM = {
+  type: 'menu-item',
+  key: 'header-row-toggle'
+};
+export var NUMBERED_ROWS_TOGGLE_ITEM = {
+  type: 'menu-item',
+  key: 'numbered-rows-toggle'
+};
+export var BACKGROUND_COLOR_ITEM = {
+  type: 'menu-item',
+  key: 'background-color'
+};
+export var ADD_ROW_ABOVE_ITEM = {
+  type: 'menu-item',
+  key: 'add-row-above'
+};
+export var ADD_ROW_BELOW_ITEM = {
+  type: 'menu-item',
+  key: 'add-row-below'
+};
+export var MOVE_ROW_UP_ITEM = {
+  type: 'menu-item',
+  key: 'move-row-up'
+};
+export var MOVE_ROW_DOWN_ITEM = {
+  type: 'menu-item',
+  key: 'move-row-down'
+};
+export var CLEAR_CELLS_ITEM = {
+  type: 'menu-item',
+  key: 'clear-cells'
+};
+export var DELETE_ROW_ITEM = {
+  type: 'menu-item',
+  key: 'delete-row'
+};
+
+// --- Item ranks within their sections ---
+
+export var TOGGLE_SECTION_ITEM_RANK = _defineProperty(_defineProperty({}, HEADER_ROW_TOGGLE_ITEM.key, 100), NUMBERED_ROWS_TOGGLE_ITEM.key, 200);
+export var BACKGROUND_SECTION_ITEM_RANK = _defineProperty({}, BACKGROUND_COLOR_ITEM.key, 100);
+export var ADD_SECTION_ITEM_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ADD_ROW_ABOVE_ITEM.key, 100), ADD_ROW_BELOW_ITEM.key, 200), MOVE_ROW_UP_ITEM.key, 300), MOVE_ROW_DOWN_ITEM.key, 400);
+export var DANGER_SECTION_ITEM_RANK = _defineProperty(_defineProperty({}, CLEAR_CELLS_ITEM.key, 100), DELETE_ROW_ITEM.key, 200);

package/dist/esm/ui/TableMenu/shared/consts.js

@@ -0,0 +1 @@
+export var newMenuWidth = 280;

package/dist/esm/ui/TableMenu/shared/items/BackgroundColorItem.compiled.css

@@ -0,0 +1,11 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._zulp1b66{gap:var(--ds-space-050,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._1bsbdlk8{width:14px}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._4cvr1h6o{align-items:center}
+._4t3idlk8{height:14px}

package/dist/esm/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -0,0 +1,60 @@
+/* BackgroundColorItem.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./BackgroundColorItem.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import { NestedDropdownRightIcon, PaintBucketIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import { Box } from '@atlaskit/primitives/compiled';
+var colorPaletteColumns = 7;
+var colorPaletteStyles = {
+  container: "_1rjcu2gc",
+  elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
+  colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
+};
+export var BackgroundColorItem = function BackgroundColorItem(_ref) {
+  var testId = _ref.testId;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var selectedColor = '#ffffff';
+  var onClick = useCallback(function () {}, []);
+  var colorPreviewStyle = useMemo(function () {
+    return {
+      backgroundColor: selectedColor
+    };
+  }, [selectedColor]);
+  var paletteOptions = useMemo(function () {
+    return {
+      palette: cellBackgroundColorPalette,
+      paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
+      hexToPaletteColor: hexToEditorBackgroundPaletteColor
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    testId: testId,
+    elemBefore: /*#__PURE__*/React.createElement(PaintBucketIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(Box, {
+      xcss: colorPaletteStyles.elemAfter
+    }, /*#__PURE__*/React.createElement("div", {
+      style: colorPreviewStyle,
+      className: ax([colorPaletteStyles.colorPreview])
+    }), /*#__PURE__*/React.createElement(NestedDropdownRightIcon, {
+      label: "",
+      size: "small"
+    })),
+    text: formatMessage(messages.backgroundColor)
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: colorPaletteStyles.container
+  }, /*#__PURE__*/React.createElement(ColorPalette, {
+    cols: colorPaletteColumns,
+    onClick: onClick,
+    selectedColor: selectedColor,
+    paletteOptions: paletteOptions
+  })));
+};

package/dist/esm/ui/TableMenu/shared/items/ClearCellsItem.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { backspace, tooltip } from '@atlaskit/editor-common/keymaps';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { CrossIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+export var ClearCellsItem = function ClearCellsItem(_ref) {
+  var _tooltip;
+  var testId = _ref.testId;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    testId: testId,
+    elemBefore: /*#__PURE__*/React.createElement(CrossIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(backspace)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(messages.clearCells, {
+    0: 1
+  }));
+};

package/dist/types/tablePluginType.d.ts

@@ -12,6 +12,7 @@ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { LimitedModePlugin } from '@atlaskit/editor-plugin-limited-mode';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { PluginConfig, TableSharedState } from './types';
@@ -67,7 +68,8 @@ export type TablePluginDependencies = [
     OptionalPlugin<ExtensionPlugin>,
     OptionalPlugin<InteractionPlugin>,
     OptionalPlugin<UserIntentPlugin>,
-    OptionalPlugin<ToolbarPlugin>
+    OptionalPlugin<ToolbarPlugin>,
+    OptionalPlugin<UiControlRegistryPlugin>
 ];
 export type TablePlugin = NextEditorPlugin<'table', {
     actions: TablePluginActions;

package/dist/types/ui/TableMenu/row/RowMenu.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { PluginInjectionAPI } from '../../../types';
+type RowMenuProps = {
+    api: PluginInjectionAPI | undefined | null;
+};
+export declare const RowMenu: ({ api }: RowMenuProps) => React.ReactNode;
+export {};

package/dist/types/ui/TableMenu/row/RowMenuItems.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const HeaderRowToggleItem: () => React.JSX.Element;
+export declare const NumberedRowsToggleItem: () => React.JSX.Element;
+export declare const AddRowAboveItem: () => React.JSX.Element;
+export declare const AddRowBelowItem: () => React.JSX.Element;
+export declare const MoveRowUpItem: () => React.JSX.Element;
+export declare const MoveRowDownItem: () => React.JSX.Element;
+export declare const DeleteRowItem: () => React.JSX.Element;

package/dist/types/ui/TableMenu/row/getRowMenuComponents.d.ts

@@ -0,0 +1,9 @@
+import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
+/**
+ * Returns the RegisterComponent[] array defining the row 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 declare const getRowMenuComponents: () => RegisterComponent[];