@atlaskit/editor-plugin-table 10.11.6 → 10.11.8

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-table
 
+## 10.11.8
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.11.7
+
+### Patch Changes
+
+- [#164047](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164047)
+  [`823d00b1d1429`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/823d00b1d1429) -
+  ED-27604: Fixed table drag menu flickers when hover background color menu
+- Updated dependencies
+
 ## 10.11.6
 
 ### Patch Changes

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

@@ -14,6 +14,7 @@ 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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
@@ -32,7 +33,7 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
     section = _ref.section,
     disableKeyboardHandling = _ref.disableKeyboardHandling,
     onItemActivated = _ref.onItemActivated,
-    _handleClose = _ref.handleClose,
+    handleClose = _ref.handleClose,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
     fitWidth = _ref.fitWidth,
@@ -62,11 +63,11 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
       shouldFitContainer: true,
       position: popupPlacement.join(' '),
       handleClickOutside: function handleClickOutside() {
-        return _handleClose('editor');
+        return handleClose('editor');
       },
       handleEscapeKeydown: function handleEscapeKeydown() {
         if (!disableKeyboardHandling) {
-          _handleClose('handle');
+          handleClose('handle');
         }
       },
       handleEnterKeydown: function handleEnterKeydown(e) {
@@ -104,6 +105,51 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
       }));
     })));
   };
+  var onClose = (0, _react.useCallback)(function () {
+    return handleClose('handle');
+  }, [handleClose]);
+  var onSelection = (0, _react.useCallback)(function (index) {
+    var results = items.flatMap(function (item) {
+      return '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
+    var keys = ['row_numbers', 'header_row', 'header_column'];
+    var doubleItemCount = 0;
+    var firstIndex = results.findIndex(function (value) {
+      var key = value.key;
+      return key !== undefined && keys.includes(key);
+    });
+    if (firstIndex === -1 || index <= firstIndex) {
+      onItemActivated && onItemActivated({
+        item: results[index]
+      });
+      return;
+    }
+    for (var i = firstIndex; i < results.length; i += 1) {
+      var key = results[i].key;
+      if (key !== undefined && keys.includes(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;
+      }
+    }
+  }, [items, onItemActivated]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -128,57 +174,23 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
       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
-    }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+    }, (0, _platformFeatureFlags.fg)('platform_editor_table_drag_menu_flickers_fix') ? /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+      closeOnTab: !disableKeyboardHandling,
+      type: _uiMenu.ArrowKeyNavigationType.MENU,
+      handleClose: onClose,
+      onSelection: onSelection
+      // disableKeyboardHandling is linked with isSubmenuOpen in DragMenu
+      // When isSubmenuOpen is true, the background color picker palette is open, and the picker is a ColorPaletteArrowKeyNavigationProvider
+      // At the same time the MenuArrowKeyNavigationProvider are renderer too, as it is the wrapper for all other DragMenu items
+      // In this case we want the ColorPaletteArrowKeyNavigationProvider to handle the keyboard event, not the MenuArrowKeyNavigationProvider
+      // Hence set disableArrowKeyNavigation to true when disableKeyboardHandling is true
+      ,
+      disableArrowKeyNavigation: disableKeyboardHandling
+    }, innerMenu()) : disableKeyboardHandling ? innerMenu() : /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
       closeOnTab: true,
       type: _uiMenu.ArrowKeyNavigationType.MENU,
-      handleClose: function handleClose() {
-        return _handleClose('handle');
-      },
-      onSelection: function onSelection(index) {
-        var results = items.flatMap(function (item) {
-          return '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
-        var keys = ['row_numbers', 'header_row', 'header_column'];
-        var doubleItemCount = 0;
-
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        var firstIndex = results.findIndex(function (value) {
-          return keys.includes(value.key);
-        });
-        if (firstIndex === -1 || index <= firstIndex) {
-          onItemActivated && onItemActivated({
-            item: results[index]
-          });
-          return;
-        }
-        for (var i = firstIndex; i < results.length; i += 1) {
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          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;
-          }
-        }
-      }
+      handleClose: onClose,
+      onSelection: onSelection
     }, innerMenu())))
   );
 };

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

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem } from '@atlaskit/editor-common/ui-menu';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 const DropListWithOutsideClickTargetRef = props => {
   const setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
@@ -84,6 +85,47 @@ export const DropdownMenu = ({
       });
     })))));
   };
+  const onClose = useCallback(() => handleClose('handle'), [handleClose]);
+  const onSelection = useCallback(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
+    const keys = ['row_numbers', 'header_row', 'header_column'];
+    let doubleItemCount = 0;
+    const firstIndex = results.findIndex(value => {
+      const key = value.key;
+      return key !== undefined && keys.includes(key);
+    });
+    if (firstIndex === -1 || index <= firstIndex) {
+      onItemActivated && onItemActivated({
+        item: results[index]
+      });
+      return;
+    }
+    for (let i = firstIndex; i < results.length; i += 1) {
+      const key = results[i].key;
+      if (key !== undefined && keys.includes(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;
+      }
+    }
+  }, [items, onItemActivated]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -108,51 +150,23 @@ export const DropdownMenu = ({
       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
-    }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    }, fg('platform_editor_table_drag_menu_flickers_fix') ? /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+      closeOnTab: !disableKeyboardHandling,
+      type: ArrowKeyNavigationType.MENU,
+      handleClose: onClose,
+      onSelection: onSelection
+      // disableKeyboardHandling is linked with isSubmenuOpen in DragMenu
+      // When isSubmenuOpen is true, the background color picker palette is open, and the picker is a ColorPaletteArrowKeyNavigationProvider
+      // At the same time the MenuArrowKeyNavigationProvider are renderer too, as it is the wrapper for all other DragMenu items
+      // In this case we want the ColorPaletteArrowKeyNavigationProvider to handle the keyboard event, not the MenuArrowKeyNavigationProvider
+      // Hence set disableArrowKeyNavigation to true when disableKeyboardHandling is true
+      ,
+      disableArrowKeyNavigation: disableKeyboardHandling
+    }, innerMenu()) : disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
       closeOnTab: true,
       type: ArrowKeyNavigationType.MENU,
-      handleClose: () => handleClose('handle'),
-      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
-        const keys = ['row_numbers', 'header_row', 'header_column'];
-        let doubleItemCount = 0;
-
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const firstIndex = results.findIndex(value => keys.includes(value.key));
-        if (firstIndex === -1 || index <= firstIndex) {
-          onItemActivated && onItemActivated({
-            item: results[index]
-          });
-          return;
-        }
-        for (let i = firstIndex; i < results.length; i += 1) {
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          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;
-          }
-        }
-      }
+      handleClose: onClose,
+      onSelection: onSelection
     }, innerMenu())))
   );
 };

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

@@ -1,12 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem } from '@atlaskit/editor-common/ui-menu';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 var DropListWithOutsideClickTargetRef = function DropListWithOutsideClickTargetRef(props) {
   var setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
@@ -22,7 +23,7 @@ export var DropdownMenu = function DropdownMenu(_ref) {
     section = _ref.section,
     disableKeyboardHandling = _ref.disableKeyboardHandling,
     onItemActivated = _ref.onItemActivated,
-    _handleClose = _ref.handleClose,
+    handleClose = _ref.handleClose,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
     fitWidth = _ref.fitWidth,
@@ -52,11 +53,11 @@ export var DropdownMenu = function DropdownMenu(_ref) {
       shouldFitContainer: true,
       position: popupPlacement.join(' '),
       handleClickOutside: function handleClickOutside() {
-        return _handleClose('editor');
+        return handleClose('editor');
       },
       handleEscapeKeydown: function handleEscapeKeydown() {
         if (!disableKeyboardHandling) {
-          _handleClose('handle');
+          handleClose('handle');
         }
       },
       handleEnterKeydown: function handleEnterKeydown(e) {
@@ -94,6 +95,51 @@ export var DropdownMenu = function DropdownMenu(_ref) {
       }));
     })));
   };
+  var onClose = useCallback(function () {
+    return handleClose('handle');
+  }, [handleClose]);
+  var onSelection = useCallback(function (index) {
+    var results = items.flatMap(function (item) {
+      return '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
+    var keys = ['row_numbers', 'header_row', 'header_column'];
+    var doubleItemCount = 0;
+    var firstIndex = results.findIndex(function (value) {
+      var key = value.key;
+      return key !== undefined && keys.includes(key);
+    });
+    if (firstIndex === -1 || index <= firstIndex) {
+      onItemActivated && onItemActivated({
+        item: results[index]
+      });
+      return;
+    }
+    for (var i = firstIndex; i < results.length; i += 1) {
+      var key = results[i].key;
+      if (key !== undefined && keys.includes(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;
+      }
+    }
+  }, [items, onItemActivated]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -118,57 +164,23 @@ export var DropdownMenu = function DropdownMenu(_ref) {
       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
-    }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    }, fg('platform_editor_table_drag_menu_flickers_fix') ? /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+      closeOnTab: !disableKeyboardHandling,
+      type: ArrowKeyNavigationType.MENU,
+      handleClose: onClose,
+      onSelection: onSelection
+      // disableKeyboardHandling is linked with isSubmenuOpen in DragMenu
+      // When isSubmenuOpen is true, the background color picker palette is open, and the picker is a ColorPaletteArrowKeyNavigationProvider
+      // At the same time the MenuArrowKeyNavigationProvider are renderer too, as it is the wrapper for all other DragMenu items
+      // In this case we want the ColorPaletteArrowKeyNavigationProvider to handle the keyboard event, not the MenuArrowKeyNavigationProvider
+      // Hence set disableArrowKeyNavigation to true when disableKeyboardHandling is true
+      ,
+      disableArrowKeyNavigation: disableKeyboardHandling
+    }, innerMenu()) : disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
       closeOnTab: true,
       type: ArrowKeyNavigationType.MENU,
-      handleClose: function handleClose() {
-        return _handleClose('handle');
-      },
-      onSelection: function onSelection(index) {
-        var results = items.flatMap(function (item) {
-          return '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
-        var keys = ['row_numbers', 'header_row', 'header_column'];
-        var doubleItemCount = 0;
-
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        var firstIndex = results.findIndex(function (value) {
-          return keys.includes(value.key);
-        });
-        if (firstIndex === -1 || index <= firstIndex) {
-          onItemActivated && onItemActivated({
-            item: results[index]
-          });
-          return;
-        }
-        for (var i = firstIndex; i < results.length; i += 1) {
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          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;
-          }
-        }
-      }
+      handleClose: onClose,
+      onSelection: onSelection
     }, innerMenu())))
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.11.6",
+	"version": "10.11.8",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,9 +39,9 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
-		"@atlaskit/editor-plugin-extension": "5.5.1",
+		"@atlaskit/editor-plugin-extension": "5.5.3",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
-		"@atlaskit/editor-plugin-interaction": "^1.1.0",
+		"@atlaskit/editor-plugin-interaction": "^2.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.2.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -55,9 +55,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.7.0",
+		"@atlaskit/tmp-editor-statsig": "^5.8.0",
 		"@atlaskit/toggle": "^15.0.0",
-		"@atlaskit/tokens": "^4.9.0",
+		"@atlaskit/tokens": "^5.0.0",
 		"@atlaskit/tooltip": "^20.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -202,6 +202,9 @@
 		"platform_editor_fix_table_resizing_undo": {
 			"type": "boolean"
 		},
+		"platform_editor_table_drag_menu_flickers_fix": {
+			"type": "boolean"
+		},
 		"platform_editor_table_last_col_drag_handle_fix": {
 			"type": "boolean"
 		},

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { DropList, type DropListProps, Popup } from '@atlaskit/editor-common/ui';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
@@ -14,6 +14,7 @@ import {
 } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { dragMenuDropdownWidth } from '../consts';
 
@@ -123,6 +124,49 @@ export const DropdownMenu = ({
 		);
 	};
 
+	const onClose = useCallback(() => handleClose('handle'), [handleClose]);
+	const onSelection = useCallback(
+		(index: number) => {
+			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
+			const keys = ['row_numbers', 'header_row', 'header_column'];
+			let doubleItemCount = 0;
+
+			const firstIndex = results.findIndex((value) => {
+				const key = value.key;
+				return key !== undefined && keys.includes(key);
+			});
+
+			if (firstIndex === -1 || index <= firstIndex) {
+				onItemActivated && onItemActivated({ item: results[index] });
+				return;
+			}
+
+			for (let i = firstIndex; i < results.length; i += 1) {
+				const key = results[i].key;
+				if (key !== undefined && keys.includes(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;
+				}
+			}
+		},
+		[items, onItemActivated],
+	);
+
 	return (
 		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 		<div className="drag-dropdown-menu-wrapper">
@@ -144,51 +188,29 @@ export const DropdownMenu = ({
 				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
 			>
-				{disableKeyboardHandling ? (
+				{fg('platform_editor_table_drag_menu_flickers_fix') ? (
+					<ArrowKeyNavigationProvider
+						closeOnTab={!disableKeyboardHandling}
+						type={ArrowKeyNavigationType.MENU}
+						handleClose={onClose}
+						onSelection={onSelection}
+						// disableKeyboardHandling is linked with isSubmenuOpen in DragMenu
+						// When isSubmenuOpen is true, the background color picker palette is open, and the picker is a ColorPaletteArrowKeyNavigationProvider
+						// At the same time the MenuArrowKeyNavigationProvider are renderer too, as it is the wrapper for all other DragMenu items
+						// In this case we want the ColorPaletteArrowKeyNavigationProvider to handle the keyboard event, not the MenuArrowKeyNavigationProvider
+						// Hence set disableArrowKeyNavigation to true when disableKeyboardHandling is true
+						disableArrowKeyNavigation={disableKeyboardHandling}
+					>
+						{innerMenu()}
+					</ArrowKeyNavigationProvider>
+				) : disableKeyboardHandling ? (
 					innerMenu()
 				) : (
 					<ArrowKeyNavigationProvider
 						closeOnTab
 						type={ArrowKeyNavigationType.MENU}
-						handleClose={() => handleClose('handle')}
-						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
-							const keys = ['row_numbers', 'header_row', 'header_column'];
-							let doubleItemCount = 0;
-
-							// Ignored via go/ees005
-							// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-							const firstIndex = results.findIndex((value) => keys.includes(value.key!));
-
-							if (firstIndex === -1 || index <= firstIndex) {
-								onItemActivated && onItemActivated({ item: results[index] });
-								return;
-							}
-
-							for (let i = firstIndex; i < results.length; i += 1) {
-								// Ignored via go/ees005
-								// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-								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;
-								}
-							}
-						}}
+						handleClose={onClose}
+						onSelection={onSelection}
 					>
 						{innerMenu()}
 					</ArrowKeyNavigationProvider>