@atlaskit/editor-plugin-table 15.3.3 → 15.3.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 15.3.4
+
+### Patch Changes
+
+- [`135fb050129cb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/135fb050129cb) -
+  [ux] [ED-25852] Fixes table menus rendering outside their container in Jira
+
 ## 15.3.3
 
 ### Patch Changes

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

@@ -38,6 +38,7 @@ var _tableRowAddBelow = _interopRequireDefault(require("@atlaskit/icon/core/tabl
 var _tableRowDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-row-delete"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../pm-plugins/commands");
@@ -88,13 +89,44 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       _this.props.editorView.dom, '.fabric-editor-popup-scroll-parent');
+      if (!parent && (0, _platformFeatureFlags.fg)('platform_editor_fix_table_menus_jira')) {
+        parent = (0, _utils.closestElement)(
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        _this.props.editorView.dom, '.ak-editor-content-area');
+      }
       if (!(parent && ref)) {
         return;
       }
       var boundariesRect = parent.getBoundingClientRect();
       var rect = ref.getBoundingClientRect();
-      if (rect.left + rect.width > boundariesRect.width) {
-        ref.style.left = "-".concat(rect.width, "px");
+      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_table_menus_jira')) {
+        if (!!_this.props.mountPoint) {
+          return;
+        }
+        var offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
+        if (!offsetParent) {
+          return;
+        }
+        var offsetParentRect = offsetParent.getBoundingClientRect();
+        var rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
+        var leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
+        if (rightOverflow > leftOverflow) {
+          ref.style.left = "-".concat(rect.width, "px");
+        }
+
+        // if it overflows regardless of side, let it overlap with the parent menu
+        if (leftOverflow > 0 && rightOverflow > 0) {
+          if (rightOverflow < leftOverflow) {
+            ref.style.left = "".concat(offsetParentRect.width - rightOverflow, "px");
+          } else {
+            ref.style.left = "-".concat(rect.width - leftOverflow, "px");
+          }
+        }
+      } else {
+        if (rect.left + rect.width > boundariesRect.width) {
+          ref.style.left = "-".concat(rect.width, "px");
+        }
       }
     });
     (0, _defineProperty2.default)(_this, "createBackgroundColorItem", function () {
@@ -738,7 +770,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           onMouseLeave: this.closeSubmenu,
           ref: this.dropdownMenuRef
         }, (0, _react2.jsx)(_uiMenu.DropdownMenu, {
-          mountTo: mountPoint
+          mountTo: (0, _platformFeatureFlags.fg)('platform_editor_fix_table_menus_jira') ? undefined : mountPoint
           //This needs be removed when the a11y is completely handled
           //Disabling key navigation now as it works only partially
           ,

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

@@ -10,6 +10,7 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _consts = require("../consts");
@@ -110,6 +111,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     ,
     allowBackgroundColor: pluginConfig.allowBackgroundColor,
     selectionRect: selectionRect,
+    mountPoint: (0, _platformFeatureFlags.fg)('platform_editor_fix_table_menus_jira') ? mountPoint : undefined,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
     getEditorContainerWidth: getEditorContainerWidth,

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

@@ -23,6 +23,7 @@ var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _paintBucketEditorBackgroundColor = _interopRequireDefault(require("@atlaskit/icon/core/migration/paint-bucket--editor-background-color"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
@@ -244,13 +245,44 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     editorView.dom, '.fabric-editor-popup-scroll-parent');
+    if (!parent && (0, _platformFeatureFlags.fg)('platform_editor_fix_table_menus_jira')) {
+      parent = (0, _utils.closestElement)(
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      editorView.dom, '.ak-editor-content-area');
+    }
     if (!(parent && ref)) {
       return;
     }
     var boundariesRect = parent.getBoundingClientRect();
     var rect = ref.getBoundingClientRect();
-    if (rect.left + rect.width > boundariesRect.width) {
-      ref.style.left = "-".concat(rect.width, "px");
+    if ((0, _platformFeatureFlags.fg)('platform_editor_fix_table_menus_jira')) {
+      if (!!mountPoint) {
+        return;
+      }
+      var offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
+      if (!offsetParent) {
+        return;
+      }
+      var offsetParentRect = offsetParent.getBoundingClientRect();
+      var rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
+      var leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
+      if (rightOverflow > leftOverflow) {
+        ref.style.left = "-".concat(rect.width, "px");
+      }
+
+      // if it overflows regardless of side, let it overlap with the parent menu
+      if (leftOverflow > 0 && rightOverflow > 0) {
+        if (rightOverflow < leftOverflow) {
+          ref.style.left = "".concat(offsetParentRect.width - rightOverflow, "px");
+        } else {
+          ref.style.left = "-".concat(rect.width - leftOverflow, "px");
+        }
+      }
+    } else {
+      if (rect.left + rect.width > boundariesRect.width) {
+        ref.style.left = "-".concat(rect.width, "px");
+      }
     }
   };
   var setColor = function setColor(color) {

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

@@ -30,6 +30,7 @@ import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
 import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -63,17 +64,48 @@ export class ContextualMenu extends Component {
     });
     _defineProperty(this, "dropdownMenuRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "handleSubMenuRef", ref => {
-      const parent = closestElement(
+      let parent = closestElement(
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       this.props.editorView.dom, '.fabric-editor-popup-scroll-parent');
+      if (!parent && fg('platform_editor_fix_table_menus_jira')) {
+        parent = closestElement(
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        this.props.editorView.dom, '.ak-editor-content-area');
+      }
       if (!(parent && ref)) {
         return;
       }
       const boundariesRect = parent.getBoundingClientRect();
       const rect = ref.getBoundingClientRect();
-      if (rect.left + rect.width > boundariesRect.width) {
-        ref.style.left = `-${rect.width}px`;
+      if (fg('platform_editor_fix_table_menus_jira')) {
+        if (!!this.props.mountPoint) {
+          return;
+        }
+        const offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
+        if (!offsetParent) {
+          return;
+        }
+        const offsetParentRect = offsetParent.getBoundingClientRect();
+        const rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
+        const leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
+        if (rightOverflow > leftOverflow) {
+          ref.style.left = `-${rect.width}px`;
+        }
+
+        // if it overflows regardless of side, let it overlap with the parent menu
+        if (leftOverflow > 0 && rightOverflow > 0) {
+          if (rightOverflow < leftOverflow) {
+            ref.style.left = `${offsetParentRect.width - rightOverflow}px`;
+          } else {
+            ref.style.left = `-${rect.width - leftOverflow}px`;
+          }
+        }
+      } else {
+        if (rect.left + rect.width > boundariesRect.width) {
+          ref.style.left = `-${rect.width}px`;
+        }
       }
     });
     _defineProperty(this, "createBackgroundColorItem", () => {
@@ -797,7 +829,7 @@ export class ContextualMenu extends Component {
         onMouseLeave: this.closeSubmenu,
         ref: this.dropdownMenuRef
       }, jsx(DropdownMenu, {
-        mountTo: mountPoint
+        mountTo: fg('platform_editor_fix_table_menus_jira') ? undefined : mountPoint
         //This needs be removed when the a11y is completely handled
         //Disabling key navigation now as it works only partially
         ,

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

@@ -8,6 +8,7 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
@@ -106,6 +107,7 @@ const FloatingContextualMenu = ({
     ,
     allowBackgroundColor: pluginConfig.allowBackgroundColor,
     selectionRect: selectionRect,
+    mountPoint: fg('platform_editor_fix_table_menus_jira') ? mountPoint : undefined,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
     getEditorContainerWidth: getEditorContainerWidth,

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

@@ -21,6 +21,7 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import PaintBucketIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -230,17 +231,48 @@ const DragMenu = /*#__PURE__*/React.memo(({
   } = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect);
   const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
   const handleSubMenuRef = ref => {
-    const parent = closestElement(
+    let parent = closestElement(
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     editorView.dom, '.fabric-editor-popup-scroll-parent');
+    if (!parent && fg('platform_editor_fix_table_menus_jira')) {
+      parent = closestElement(
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      editorView.dom, '.ak-editor-content-area');
+    }
     if (!(parent && ref)) {
       return;
     }
     const boundariesRect = parent.getBoundingClientRect();
     const rect = ref.getBoundingClientRect();
-    if (rect.left + rect.width > boundariesRect.width) {
-      ref.style.left = `-${rect.width}px`;
+    if (fg('platform_editor_fix_table_menus_jira')) {
+      if (!!mountPoint) {
+        return;
+      }
+      const offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
+      if (!offsetParent) {
+        return;
+      }
+      const offsetParentRect = offsetParent.getBoundingClientRect();
+      const rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
+      const leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
+      if (rightOverflow > leftOverflow) {
+        ref.style.left = `-${rect.width}px`;
+      }
+
+      // if it overflows regardless of side, let it overlap with the parent menu
+      if (leftOverflow > 0 && rightOverflow > 0) {
+        if (rightOverflow < leftOverflow) {
+          ref.style.left = `${offsetParentRect.width - rightOverflow}px`;
+        } else {
+          ref.style.left = `-${rect.width - leftOverflow}px`;
+        }
+      }
+    } else {
+      if (rect.left + rect.width > boundariesRect.width) {
+        ref.style.left = `-${rect.width}px`;
+      }
     }
   };
   const setColor = color => {

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

@@ -40,6 +40,7 @@ import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
 import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -82,13 +83,44 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       _this.props.editorView.dom, '.fabric-editor-popup-scroll-parent');
+      if (!parent && fg('platform_editor_fix_table_menus_jira')) {
+        parent = closestElement(
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        _this.props.editorView.dom, '.ak-editor-content-area');
+      }
       if (!(parent && ref)) {
         return;
       }
       var boundariesRect = parent.getBoundingClientRect();
       var rect = ref.getBoundingClientRect();
-      if (rect.left + rect.width > boundariesRect.width) {
-        ref.style.left = "-".concat(rect.width, "px");
+      if (fg('platform_editor_fix_table_menus_jira')) {
+        if (!!_this.props.mountPoint) {
+          return;
+        }
+        var offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
+        if (!offsetParent) {
+          return;
+        }
+        var offsetParentRect = offsetParent.getBoundingClientRect();
+        var rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
+        var leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
+        if (rightOverflow > leftOverflow) {
+          ref.style.left = "-".concat(rect.width, "px");
+        }
+
+        // if it overflows regardless of side, let it overlap with the parent menu
+        if (leftOverflow > 0 && rightOverflow > 0) {
+          if (rightOverflow < leftOverflow) {
+            ref.style.left = "".concat(offsetParentRect.width - rightOverflow, "px");
+          } else {
+            ref.style.left = "-".concat(rect.width - leftOverflow, "px");
+          }
+        }
+      } else {
+        if (rect.left + rect.width > boundariesRect.width) {
+          ref.style.left = "-".concat(rect.width, "px");
+        }
       }
     });
     _defineProperty(_this, "createBackgroundColorItem", function () {
@@ -732,7 +764,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           onMouseLeave: this.closeSubmenu,
           ref: this.dropdownMenuRef
         }, jsx(DropdownMenu, {
-          mountTo: mountPoint
+          mountTo: fg('platform_editor_fix_table_menus_jira') ? undefined : mountPoint
           //This needs be removed when the a11y is completely handled
           //Disabling key navigation now as it works only partially
           ,

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

@@ -8,6 +8,7 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
@@ -102,6 +103,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     ,
     allowBackgroundColor: pluginConfig.allowBackgroundColor,
     selectionRect: selectionRect,
+    mountPoint: fg('platform_editor_fix_table_menus_jira') ? mountPoint : undefined,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
     getEditorContainerWidth: getEditorContainerWidth,

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

@@ -23,6 +23,7 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import PaintBucketIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -233,13 +234,44 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     editorView.dom, '.fabric-editor-popup-scroll-parent');
+    if (!parent && fg('platform_editor_fix_table_menus_jira')) {
+      parent = closestElement(
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      editorView.dom, '.ak-editor-content-area');
+    }
     if (!(parent && ref)) {
       return;
     }
     var boundariesRect = parent.getBoundingClientRect();
     var rect = ref.getBoundingClientRect();
-    if (rect.left + rect.width > boundariesRect.width) {
-      ref.style.left = "-".concat(rect.width, "px");
+    if (fg('platform_editor_fix_table_menus_jira')) {
+      if (!!mountPoint) {
+        return;
+      }
+      var offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
+      if (!offsetParent) {
+        return;
+      }
+      var offsetParentRect = offsetParent.getBoundingClientRect();
+      var rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
+      var leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
+      if (rightOverflow > leftOverflow) {
+        ref.style.left = "-".concat(rect.width, "px");
+      }
+
+      // if it overflows regardless of side, let it overlap with the parent menu
+      if (leftOverflow > 0 && rightOverflow > 0) {
+        if (rightOverflow < leftOverflow) {
+          ref.style.left = "".concat(offsetParentRect.width - rightOverflow, "px");
+        } else {
+          ref.style.left = "-".concat(rect.width - leftOverflow, "px");
+        }
+      }
+    } else {
+      if (rect.left + rect.width > boundariesRect.width) {
+        ref.style.left = "-".concat(rect.width, "px");
+      }
     }
   };
   var setColor = function setColor(color) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "15.3.3",
+	"version": "15.3.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -157,6 +157,9 @@
 		"platform_editor_fix_confirm_table_removal": {
 			"type": "boolean"
 		},
+		"platform_editor_fix_table_menus_jira": {
+			"type": "boolean"
+		},
 		"platform_editor_content_mode_button_mvp": {
 			"type": "boolean"
 		}