@atlaskit/editor-plugin-table 7.4.8 → 7.4.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 7.4.9
+
+### Patch Changes
+
+- [#78202](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78202) [`287432cbca17`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/287432cbca17) - [ux] ED-22099: Fixed drag menu position when close to edge of view port.
+
 ## 7.4.8
 
 ### Patch Changes

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

@@ -50,7 +50,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitHeight: 188,
+    fitHeight: _consts.tablePopupMenuFitHeight,
     fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth
     // 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.

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -185,7 +185,12 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     pluginConfig = _ref.pluginConfig,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    fitHeight = _ref.fitHeight,
+    fitWidth = _ref.fitWidth,
+    mountPoint = _ref.mountPoint,
+    scrollableElement = _ref.scrollableElement,
+    boundariesElement = _ref.boundariesElement;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -457,12 +462,17 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     section: {
       hasSeparator: true
     },
-    target: target,
     items: menuItems,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
-    handleClose: closeMenu
+    handleClose: closeMenu,
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    direction: direction,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   });
 });
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(DragMenu);

package/dist/cjs/ui/FloatingDragMenu/DropdownMenu.js

@@ -1,32 +1,55 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DropdownMenu = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../consts");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 var DropListWithOutsideListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.DropList);
 var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
-  var target = _ref.target,
-    items = _ref.items,
+  var items = _ref.items,
     section = _ref.section,
     disableKeyboardHandling = _ref.disableKeyboardHandling,
     onItemActivated = _ref.onItemActivated,
     handleClose = _ref.handleClose,
     onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave;
+    onMouseLeave = _ref.onMouseLeave,
+    fitWidth = _ref.fitWidth,
+    fitHeight = _ref.fitHeight,
+    direction = _ref.direction,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement;
+  var _useState = (0, _react.useState)(['bottom', 'left']),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    popupPlacement = _useState2[0],
+    setPopupPlacement = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    targetRefDiv = _useState4[0],
+    setTargetRefDiv = _useState4[1];
+  var handleRef = function handleRef(ref) {
+    setTargetRefDiv(ref);
+  };
   var innerMenu = function innerMenu() {
     return /*#__PURE__*/_react.default.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
-      position: ['bottom', 'left'].join(' '),
+      position: popupPlacement.join(' '),
       handleClickOutside: function handleClickOutside() {
         return handleClose('editor');
       },
@@ -41,7 +64,7 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
           e.stopPropagation();
         }
       },
-      targetRef: target
+      targetRef: targetRefDiv
     }, /*#__PURE__*/_react.default.createElement("div", {
       style: {
         height: 0,
@@ -70,7 +93,29 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
   if (disableKeyboardHandling) {
     return innerMenu();
   }
-  return /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  var offsetY = direction === 'row' ? popupPlacement[0] === 'bottom' ? -8 : -34 : 0;
+  var offsetX = direction === 'column' ? popupPlacement[1] === 'left' ? 0 : -7 : 0;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "drag-dropdown-menu-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "drag-dropdown-menu-popup-ref",
+    ref: handleRef
+  }), /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    target: targetRefDiv,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    onPlacementChanged: function onPlacementChanged(placement) {
+      setPopupPlacement(placement);
+    },
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
+    offset: [offsetX, offsetY],
+    allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: _uiMenu.ArrowKeyNavigationType.MENU,
     onSelection: function onSelection(index) {
@@ -119,5 +164,5 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
         });
       }
     }
-  }, innerMenu());
+  }, innerMenu())));
 };

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

@@ -30,12 +30,10 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   }
   var inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
   var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
-  var offset = direction === 'row' ? [-9, 6] : [0, -7];
+  var offset = direction === 'row' ? [-9, 0] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
   }
-
-  // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -43,7 +41,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: _consts.dragMenuDropdownWidth
+    fitWidth: _consts.dragMenuDropdownWidth,
+    fitHeight: _consts.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.
     // In sticky mode, we want to show the menu above the sticky header
@@ -62,7 +61,12 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    pluginConfig: pluginConfig
+    pluginConfig: pluginConfig,
+    fitWidth: _consts.dragMenuDropdownWidth,
+    fitHeight: _consts.tablePopupMenuFitHeight,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/cjs/ui/consts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
+exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePopupMenuFitHeight = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
@@ -61,6 +61,7 @@ var stickyRowOffsetTop = exports.stickyRowOffsetTop = 8;
 var stickyHeaderBorderBottomWidth = exports.stickyHeaderBorderBottomWidth = 1;
 var tableOverflowShadowWidth = exports.tableOverflowShadowWidth = 8;
 var tableOverflowShadowWidthWide = exports.tableOverflowShadowWidthWide = 32;
+var tablePopupMenuFitHeight = exports.tablePopupMenuFitHeight = 188;
 var dropTargetsZIndex = exports.dropTargetsZIndex = 14;
 var TABLE_SNAP_GAP = exports.TABLE_SNAP_GAP = 9;
 var TABLE_HIGHLIGHT_GAP = exports.TABLE_HIGHLIGHT_GAP = 10;

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

@@ -5,7 +5,7 @@ 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 { getPluginState } from '../../pm-plugins/plugin-factory';
-import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize } from '../consts';
+import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
 import ContextualMenu from './ContextualMenu';
 import { tablePopupStyles } from './styles';
 const FloatingContextualMenu = ({
@@ -46,7 +46,7 @@ const FloatingContextualMenu = ({
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitHeight: 188,
+    fitHeight: tablePopupMenuFitHeight,
     fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
     // 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.

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -170,7 +170,12 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   pluginConfig,
   intl: {
     formatMessage
-  }
+  },
+  fitHeight,
+  fitWidth,
+  mountPoint,
+  scrollableElement,
+  boundariesElement
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -457,12 +462,17 @@ export const DragMenu = /*#__PURE__*/React.memo(({
     section: {
       hasSeparator: true
     },
-    target: target,
     items: menuItems,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
-    handleClose: closeMenu
+    handleClose: closeMenu,
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    direction: direction,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   });
 });
 export default injectIntl(DragMenu);

package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js

@@ -1,26 +1,38 @@
-import React from 'react';
-import { DropList } from '@atlaskit/editor-common/ui';
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+import React, { useState } from 'react';
+import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem } from '@atlaskit/editor-common/ui-menu';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export const DropdownMenu = ({
-  target,
   items,
   section,
   disableKeyboardHandling,
   onItemActivated,
   handleClose,
   onMouseEnter,
-  onMouseLeave
+  onMouseLeave,
+  fitWidth,
+  fitHeight,
+  direction,
+  mountPoint,
+  boundariesElement,
+  scrollableElement
 }) => {
+  const [popupPlacement, setPopupPlacement] = useState(['bottom', 'left']);
+  const [targetRefDiv, setTargetRefDiv] = useState(null);
+  const handleRef = ref => {
+    setTargetRefDiv(ref);
+  };
   const innerMenu = () => {
     return /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
-      position: ['bottom', 'left'].join(' '),
+      position: popupPlacement.join(' '),
       handleClickOutside: () => handleClose('editor'),
       handleEscapeKeydown: () => {
         if (!disableKeyboardHandling) {
@@ -33,7 +45,7 @@ export const DropdownMenu = ({
           e.stopPropagation();
         }
       },
-      targetRef: target
+      targetRef: targetRefDiv
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         height: 0,
@@ -60,7 +72,29 @@ export const DropdownMenu = ({
   if (disableKeyboardHandling) {
     return innerMenu();
   }
-  return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  let offsetY = direction === 'row' ? popupPlacement[0] === 'bottom' ? -8 : -34 : 0;
+  let offsetX = direction === 'column' ? popupPlacement[1] === 'left' ? 0 : -7 : 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "drag-dropdown-menu-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "drag-dropdown-menu-popup-ref",
+    ref: handleRef
+  }), /*#__PURE__*/React.createElement(Popup, {
+    target: targetRefDiv,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    onPlacementChanged: placement => {
+      setPopupPlacement(placement);
+    },
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    zIndex: akEditorFloatingPanelZIndex,
+    offset: [offsetX, offsetY],
+    allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: ArrowKeyNavigationType.MENU,
     onSelection: index => {
@@ -105,5 +139,5 @@ export const DropdownMenu = ({
         });
       }
     }
-  }, innerMenu());
+  }, innerMenu())));
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { dragMenuDropdownWidth } from '../consts';
+import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 import DragMenu from './DragMenu';
 const FloatingDragMenu = ({
   mountPoint,
@@ -24,12 +24,10 @@ const FloatingDragMenu = ({
   }
   const inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
   const targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
-  const offset = direction === 'row' ? [-9, 6] : [0, -7];
+  const offset = direction === 'row' ? [-9, 0] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
-
-  // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -37,7 +35,8 @@ const FloatingDragMenu = ({
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: dragMenuDropdownWidth
+    fitWidth: 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.
     // In sticky mode, we want to show the menu above the sticky header
@@ -56,7 +55,12 @@ const FloatingDragMenu = ({
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    pluginConfig: pluginConfig
+    pluginConfig: pluginConfig,
+    fitWidth: dragMenuDropdownWidth,
+    fitHeight: tablePopupMenuFitHeight,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/es2019/ui/consts.js

@@ -56,6 +56,7 @@ export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;
 export const tableOverflowShadowWidth = 8;
 export const tableOverflowShadowWidthWide = 32;
+export const tablePopupMenuFitHeight = 188;
 export const dropTargetsZIndex = 14;
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;

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

@@ -5,7 +5,7 @@ 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 { getPluginState } from '../../pm-plugins/plugin-factory';
-import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize } from '../consts';
+import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
 import ContextualMenu from './ContextualMenu';
 import { tablePopupStyles } from './styles';
 var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
@@ -42,7 +42,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitHeight: 188,
+    fitHeight: tablePopupMenuFitHeight,
     fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
     // 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.

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

@@ -174,7 +174,12 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     pluginConfig = _ref.pluginConfig,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    fitHeight = _ref.fitHeight,
+    fitWidth = _ref.fitWidth,
+    mountPoint = _ref.mountPoint,
+    scrollableElement = _ref.scrollableElement,
+    boundariesElement = _ref.boundariesElement;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -446,12 +451,17 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     section: {
       hasSeparator: true
     },
-    target: target,
     items: menuItems,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
-    handleClose: closeMenu
+    handleClose: closeMenu,
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    direction: direction,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   });
 });
 export default injectIntl(DragMenu);

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

@@ -1,25 +1,44 @@
-import React from 'react';
-import { DropList } from '@atlaskit/editor-common/ui';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+import React, { useState } from 'react';
+import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem } from '@atlaskit/editor-common/ui-menu';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export var DropdownMenu = function DropdownMenu(_ref) {
-  var target = _ref.target,
-    items = _ref.items,
+  var items = _ref.items,
     section = _ref.section,
     disableKeyboardHandling = _ref.disableKeyboardHandling,
     onItemActivated = _ref.onItemActivated,
     handleClose = _ref.handleClose,
     onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave;
+    onMouseLeave = _ref.onMouseLeave,
+    fitWidth = _ref.fitWidth,
+    fitHeight = _ref.fitHeight,
+    direction = _ref.direction,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement;
+  var _useState = useState(['bottom', 'left']),
+    _useState2 = _slicedToArray(_useState, 2),
+    popupPlacement = _useState2[0],
+    setPopupPlacement = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    targetRefDiv = _useState4[0],
+    setTargetRefDiv = _useState4[1];
+  var handleRef = function handleRef(ref) {
+    setTargetRefDiv(ref);
+  };
   var innerMenu = function innerMenu() {
     return /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
-      position: ['bottom', 'left'].join(' '),
+      position: popupPlacement.join(' '),
       handleClickOutside: function handleClickOutside() {
         return handleClose('editor');
       },
@@ -34,7 +53,7 @@ export var DropdownMenu = function DropdownMenu(_ref) {
           e.stopPropagation();
         }
       },
-      targetRef: target
+      targetRef: targetRefDiv
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         height: 0,
@@ -63,7 +82,29 @@ export var DropdownMenu = function DropdownMenu(_ref) {
   if (disableKeyboardHandling) {
     return innerMenu();
   }
-  return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  var offsetY = direction === 'row' ? popupPlacement[0] === 'bottom' ? -8 : -34 : 0;
+  var offsetX = direction === 'column' ? popupPlacement[1] === 'left' ? 0 : -7 : 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "drag-dropdown-menu-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "drag-dropdown-menu-popup-ref",
+    ref: handleRef
+  }), /*#__PURE__*/React.createElement(Popup, {
+    target: targetRefDiv,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    onPlacementChanged: function onPlacementChanged(placement) {
+      setPopupPlacement(placement);
+    },
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    zIndex: akEditorFloatingPanelZIndex,
+    offset: [offsetX, offsetY],
+    allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: ArrowKeyNavigationType.MENU,
     onSelection: function onSelection(index) {
@@ -112,5 +153,5 @@ export var DropdownMenu = function DropdownMenu(_ref) {
         });
       }
     }
-  }, innerMenu());
+  }, innerMenu())));
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { dragMenuDropdownWidth } from '../consts';
+import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 import DragMenu from './DragMenu';
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var mountPoint = _ref.mountPoint,
@@ -23,12 +23,10 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   }
   var inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
   var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
-  var offset = direction === 'row' ? [-9, 6] : [0, -7];
+  var offset = direction === 'row' ? [-9, 0] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
-
-  // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -36,7 +34,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: dragMenuDropdownWidth
+    fitWidth: 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.
     // In sticky mode, we want to show the menu above the sticky header
@@ -55,7 +54,12 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    pluginConfig: pluginConfig
+    pluginConfig: pluginConfig,
+    fitWidth: dragMenuDropdownWidth,
+    fitHeight: tablePopupMenuFitHeight,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/esm/ui/consts.js

@@ -56,6 +56,7 @@ export var stickyRowOffsetTop = 8;
 export var stickyHeaderBorderBottomWidth = 1;
 export var tableOverflowShadowWidth = 8;
 export var tableOverflowShadowWidthWide = 32;
+export var tablePopupMenuFitHeight = 188;
 export var dropTargetsZIndex = 14;
 export var TABLE_SNAP_GAP = 9;
 export var TABLE_HIGHLIGHT_GAP = 10;

package/dist/types/ui/FloatingDragMenu/DragMenu.d.ts

@@ -19,8 +19,13 @@ type DragMenuProps = {
     pluginConfig?: PluginConfig;
     getEditorContainerWidth: GetEditorContainerWidth;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
+    fitWidth?: number;
+    fitHeight?: number;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
 };
-export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
+export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps<"intl">>;
 };

package/dist/types/ui/FloatingDragMenu/DropdownMenu.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 type DropdownMenuProps = {
-    target?: HTMLElement;
     items: Array<{
         items: MenuItem[];
     }>;
@@ -25,6 +24,13 @@ type DropdownMenuProps = {
     onMouseLeave: (attrs: {
         item: MenuItem;
     }) => void;
+    fitWidth?: number;
+    fitHeight?: number;
+    direction?: string;
+    offset?: Array<number>;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
 };
-export declare const DropdownMenu: ({ target, items, section, disableKeyboardHandling, onItemActivated, handleClose, onMouseEnter, onMouseLeave, }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ items, section, disableKeyboardHandling, onItemActivated, handleClose, onMouseEnter, onMouseLeave, fitWidth, fitHeight, direction, mountPoint, boundariesElement, scrollableElement, }: DropdownMenuProps) => JSX.Element;
 export {};

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

@@ -47,6 +47,7 @@ export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;
 export declare const tableOverflowShadowWidth = 8;
 export declare const tableOverflowShadowWidthWide = 32;
+export declare const tablePopupMenuFitHeight = 188;
 export declare const dropTargetsZIndex = 14;
 export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;

package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts

@@ -19,8 +19,13 @@ type DragMenuProps = {
     pluginConfig?: PluginConfig;
     getEditorContainerWidth: GetEditorContainerWidth;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
+    fitWidth?: number;
+    fitHeight?: number;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
 };
-export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
+export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps<"intl">>;
 };

package/dist/types-ts4.5/ui/FloatingDragMenu/DropdownMenu.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 type DropdownMenuProps = {
-    target?: HTMLElement;
     items: Array<{
         items: MenuItem[];
     }>;
@@ -25,6 +24,13 @@ type DropdownMenuProps = {
     onMouseLeave: (attrs: {
         item: MenuItem;
     }) => void;
+    fitWidth?: number;
+    fitHeight?: number;
+    direction?: string;
+    offset?: Array<number>;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
 };
-export declare const DropdownMenu: ({ target, items, section, disableKeyboardHandling, onItemActivated, handleClose, onMouseEnter, onMouseLeave, }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ items, section, disableKeyboardHandling, onItemActivated, handleClose, onMouseEnter, onMouseLeave, fitWidth, fitHeight, direction, mountPoint, boundariesElement, scrollableElement, }: DropdownMenuProps) => JSX.Element;
 export {};

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

@@ -47,6 +47,7 @@ export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;
 export declare const tableOverflowShadowWidth = 8;
 export declare const tableOverflowShadowWidthWide = 32;
+export declare const tablePopupMenuFitHeight = 188;
 export declare const dropTargetsZIndex = 14;
 export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.4.8",
+  "version": "7.4.9",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.5.2",
     "@atlaskit/custom-steps": "^0.0.14",
-    "@atlaskit/editor-common": "^78.10.0",
+    "@atlaskit/editor-common": "^78.11.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",

package/src/ui/FloatingContextualMenu/index.tsx

@@ -25,6 +25,7 @@ import {
   contextualMenuDropdownWidth,
   contextualMenuDropdownWidthDnD,
   contextualMenuTriggerSize,
+  tablePopupMenuFitHeight,
 } from '../consts';
 
 import ContextualMenu from './ContextualMenu';
@@ -91,7 +92,7 @@ const FloatingContextualMenu = ({
       mountTo={mountPoint}
       boundariesElement={boundariesElement}
       scrollableElement={scrollableElement}
-      fitHeight={188}
+      fitHeight={tablePopupMenuFitHeight}
       fitWidth={
         isDragAndDropEnabled
           ? contextualMenuDropdownWidthDnD

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -96,6 +96,11 @@ type DragMenuProps = {
   pluginConfig?: PluginConfig;
   getEditorContainerWidth: GetEditorContainerWidth;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
+  fitWidth?: number;
+  fitHeight?: number;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -269,6 +274,11 @@ export const DragMenu = React.memo(
     editorAnalyticsAPI,
     pluginConfig,
     intl: { formatMessage },
+    fitHeight,
+    fitWidth,
+    mountPoint,
+    scrollableElement,
+    boundariesElement,
   }: DragMenuProps & WrappedComponentProps) => {
     const { state, dispatch } = editorView;
     const { selection } = state;
@@ -627,12 +637,17 @@ export const DragMenu = React.memo(
       <DropdownMenu
         disableKeyboardHandling={isSubmenuOpen}
         section={{ hasSeparator: true }}
-        target={target as HTMLElement | undefined}
         items={menuItems}
         onItemActivated={handleMenuItemActivated}
         onMouseEnter={handleItemMouseEnter}
         onMouseLeave={handleItemMouseLeave}
         handleClose={closeMenu}
+        fitHeight={fitHeight}
+        fitWidth={fitWidth}
+        direction={direction}
+        mountPoint={mountPoint}
+        boundariesElement={boundariesElement}
+        scrollableElement={scrollableElement}
       />
     );
   },

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+import React, { useState } from 'react';
 
-import { DropList } from '@atlaskit/editor-common/ui';
+import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import {
   ArrowKeyNavigationProvider,
@@ -8,6 +9,7 @@ import {
   DropdownMenuItem,
 } from '@atlaskit/editor-common/ui-menu';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
@@ -17,7 +19,6 @@ const DropListWithOutsideListeners =
   withReactEditorViewOuterListeners(DropList);
 
 type DropdownMenuProps = {
-  target?: HTMLElement;
   items: Array<{
     items: MenuItem[];
   }>;
@@ -34,10 +35,16 @@ type DropdownMenuProps = {
   handleClose: (focusTarget: 'editor' | 'handle') => void;
   onMouseEnter: (attrs: { item: MenuItem }) => void;
   onMouseLeave: (attrs: { item: MenuItem }) => void;
+  fitWidth?: number;
+  fitHeight?: number;
+  direction?: string;
+  offset?: Array<number>;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
 };
 
 export const DropdownMenu = ({
-  target,
   items,
   section,
   disableKeyboardHandling,
@@ -45,13 +52,24 @@ export const DropdownMenu = ({
   handleClose,
   onMouseEnter,
   onMouseLeave,
+  fitWidth,
+  fitHeight,
+  direction,
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
 }: DropdownMenuProps) => {
+  const [popupPlacement, setPopupPlacement] = useState(['bottom', 'left']);
+  const [targetRefDiv, setTargetRefDiv] = useState<HTMLDivElement | null>(null);
+  const handleRef = (ref: HTMLDivElement | null) => {
+    setTargetRefDiv(ref);
+  };
   const innerMenu = () => {
     return (
       <DropListWithOutsideListeners
         isOpen
         shouldFitContainer
-        position={['bottom', 'left'].join(' ')}
+        position={popupPlacement.join(' ')}
         handleClickOutside={() => handleClose('editor')}
         handleEscapeKeydown={() => {
           if (!disableKeyboardHandling) {
@@ -64,7 +82,7 @@ export const DropdownMenu = ({
             e.stopPropagation();
           }
         }}
-        targetRef={target}
+        targetRef={targetRefDiv}
       >
         <div style={{ height: 0, minWidth: dragMenuDropdownWidth }} />
         <MenuGroup role="menu">
@@ -95,56 +113,82 @@ export const DropdownMenu = ({
     return innerMenu();
   }
 
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  let offsetY =
+    direction === 'row' ? (popupPlacement[0] === 'bottom' ? -8 : -34) : 0;
+  let offsetX =
+    direction === 'column' ? (popupPlacement[1] === 'left' ? 0 : -7) : 0;
+
   return (
-    <ArrowKeyNavigationProvider
-      closeOnTab
-      type={ArrowKeyNavigationType.MENU}
-      onSelection={(index) => {
-        const results = items.flatMap((item) =>
-          'items' in item ? item.items : item,
-        );
+    <div className="drag-dropdown-menu-wrapper">
+      <div className="drag-dropdown-menu-popup-ref" ref={handleRef}></div>
+      <Popup
+        target={targetRefDiv as HTMLElement}
+        mountTo={mountPoint}
+        boundariesElement={boundariesElement}
+        scrollableElement={scrollableElement}
+        onPlacementChanged={(placement: [string, string]) => {
+          setPopupPlacement(placement);
+        }}
+        fitHeight={fitHeight}
+        fitWidth={fitWidth}
+        zIndex={akEditorFloatingPanelZIndex}
+        offset={[offsetX, offsetY]}
+        allowOutOfBounds // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+      >
+        <ArrowKeyNavigationProvider
+          closeOnTab
+          type={ArrowKeyNavigationType.MENU}
+          onSelection={(index) => {
+            const results = items.flatMap((item) =>
+              'items' in item ? item.items : item,
+            );
 
-        // onSelection is called when any focusable element is 'activated'
-        // this is an issue as some menu items have toggles, which cause the index value
-        // in the callback to be outside of array length.
-        // The logic below normalises the index value based on the number
-        // of menu items with 2 focusable elements, and adjusts the index to ensure
-        // the correct menu item is sent in onItemActivated callback
-        if (
-          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-        ) {
-          const keys = ['row_numbers', 'header_row', 'header_column'];
-          let doubleItemCount = 0;
+            // onSelection is called when any focusable element is 'activated'
+            // this is an issue as some menu items have toggles, which cause the index value
+            // in the callback to be outside of array length.
+            // The logic below normalises the index value based on the number
+            // of menu items with 2 focusable elements, and adjusts the index to ensure
+            // the correct menu item is sent in onItemActivated callback
+            if (
+              getBooleanFF(
+                'platform.editor.table.new-cell-context-menu-styling',
+              )
+            ) {
+              const keys = ['row_numbers', 'header_row', 'header_column'];
+              let doubleItemCount = 0;
 
-          const firstIndex = results.findIndex((value) =>
-            keys.includes(value.key!),
-          );
+              const firstIndex = results.findIndex((value) =>
+                keys.includes(value.key!),
+              );
 
-          if (firstIndex === -1 || index <= firstIndex) {
-            onItemActivated && onItemActivated({ item: results[index] });
-            return;
-          }
+              if (firstIndex === -1 || index <= firstIndex) {
+                onItemActivated && onItemActivated({ item: results[index] });
+                return;
+              }
 
-          for (let i = firstIndex; i < results.length; i += 1) {
-            if (keys.includes(results[i].key!)) {
-              doubleItemCount += 1;
-            }
-            if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
-              onItemActivated && onItemActivated({ item: results[i] });
-              return;
-            }
+              for (let i = firstIndex; i < results.length; i += 1) {
+                if (keys.includes(results[i].key!)) {
+                  doubleItemCount += 1;
+                }
+                if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
+                  onItemActivated && onItemActivated({ item: results[i] });
+                  return;
+                }
 
-            if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
-              onItemActivated && onItemActivated({ item: results[i] });
-              return;
+                if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+                  onItemActivated && onItemActivated({ item: results[i] });
+                  return;
+                }
+              }
+            } else {
+              onItemActivated && onItemActivated({ item: results[index] });
             }
-          }
-        } else {
-          onItemActivated && onItemActivated({ item: results[index] });
-        }
-      }}
-    >
-      {innerMenu()}
-    </ArrowKeyNavigationProvider>
+          }}
+        >
+          {innerMenu()}
+        </ArrowKeyNavigationProvider>
+      </Popup>
+    </div>
   );
 };

package/src/ui/FloatingDragMenu/index.tsx

@@ -13,7 +13,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { PluginConfig, TableDirection } from '../../types';
-import { dragMenuDropdownWidth } from '../consts';
+import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 
 import DragMenu from './DragMenu';
 
@@ -63,7 +63,7 @@ const FloatingDragMenu = ({
       ? document.querySelector('#drag-handle-button-row')
       : document.querySelector('#drag-handle-button-column');
 
-  const offset = direction === 'row' ? [-9, 6] : [0, -7];
+  const offset = direction === 'row' ? [-9, 0] : [0, -7];
 
   if (
     !targetHandleRef ||
@@ -72,7 +72,6 @@ const FloatingDragMenu = ({
     return null;
   }
 
-  // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return (
     <Popup
       alignX={direction === 'row' ? 'right' : undefined}
@@ -82,6 +81,7 @@ const FloatingDragMenu = ({
       boundariesElement={boundariesElement}
       scrollableElement={scrollableElement}
       fitWidth={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.
       // In sticky mode, we want to show the menu above the sticky header
@@ -105,6 +105,11 @@ const FloatingDragMenu = ({
         getEditorContainerWidth={getEditorContainerWidth}
         editorAnalyticsAPI={editorAnalyticsAPI}
         pluginConfig={pluginConfig}
+        fitWidth={dragMenuDropdownWidth}
+        fitHeight={tablePopupMenuFitHeight}
+        mountPoint={mountPoint}
+        boundariesElement={boundariesElement}
+        scrollableElement={scrollableElement}
       />
     </Popup>
   );

package/src/ui/consts.ts

@@ -125,6 +125,7 @@ export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;
 export const tableOverflowShadowWidth = 8;
 export const tableOverflowShadowWidthWide = 32;
+export const tablePopupMenuFitHeight = 188;
 
 export const dropTargetsZIndex = 14;