@atlaskit/editor-plugin-table 7.11.5 → 7.11.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.11.6
+
+### Patch Changes
+
+-   [#94875](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94875)
+    [`df9008092ea1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/df9008092ea1) -
+    remove ff for color picker position fix in table
+
 ## 7.11.5
 
 ### Patch Changes

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

@@ -13,7 +13,6 @@ 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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -94,32 +93,6 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
       }));
     })));
   };
-  if (disableKeyboardHandling) {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.background-color-flicker-in-drag-menu')) {
-      // This part need be refactor when clean up the ff, to reuse the wrapper
-      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
-      }, innerMenu()));
-    } else {
-      return innerMenu();
-    }
-  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "drag-dropdown-menu-wrapper"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -138,7 +111,7 @@ 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
-  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+  }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: _uiMenu.ArrowKeyNavigationType.MENU,
     handleClose: function handleClose() {

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

@@ -5,7 +5,6 @@ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem }
 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 = ({
@@ -73,32 +72,6 @@ export const DropdownMenu = ({
       });
     })))));
   };
-  if (disableKeyboardHandling) {
-    if (getBooleanFF('platform.editor.table.background-color-flicker-in-drag-menu')) {
-      // This part need be refactor when clean up the ff, to reuse the wrapper
-      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
-      }, innerMenu()));
-    } else {
-      return innerMenu();
-    }
-  }
   return /*#__PURE__*/React.createElement("div", {
     className: "drag-dropdown-menu-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
@@ -117,7 +90,7 @@ 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
-  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+  }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: ArrowKeyNavigationType.MENU,
     handleClose: () => handleClose('handle'),

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

@@ -6,7 +6,6 @@ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem }
 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) {
@@ -83,32 +82,6 @@ export var DropdownMenu = function DropdownMenu(_ref) {
       }));
     })));
   };
-  if (disableKeyboardHandling) {
-    if (getBooleanFF('platform.editor.table.background-color-flicker-in-drag-menu')) {
-      // This part need be refactor when clean up the ff, to reuse the wrapper
-      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
-      }, innerMenu()));
-    } else {
-      return innerMenu();
-    }
-  }
   return /*#__PURE__*/React.createElement("div", {
     className: "drag-dropdown-menu-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
@@ -127,7 +100,7 @@ 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
-  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+  }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: ArrowKeyNavigationType.MENU,
     handleClose: function handleClose() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.11.5",
+  "version": "7.11.6",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -118,9 +118,6 @@
     "platform.editor.transform-slice-for-nested-expand": {
       "type": "boolean"
     },
-    "platform.editor.table.background-color-flicker-in-drag-menu": {
-      "type": "boolean"
-    },
     "platform.editor.table.cmd-a-select-table": {
       "type": "boolean"
     },

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -11,7 +11,6 @@ import {
 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';
 
@@ -116,39 +115,6 @@ export const DropdownMenu = ({
     );
   };
 
-  if (disableKeyboardHandling) {
-    if (
-      getBooleanFF(
-        'platform.editor.table.background-color-flicker-in-drag-menu',
-      )
-    ) {
-      // This part need be refactor when clean up the ff, to reuse the wrapper
-      return (
-        <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
-          >
-            {innerMenu()}
-          </Popup>
-        </div>
-      );
-    } else {
-      return innerMenu();
-    }
-  }
-
   return (
     <div className="drag-dropdown-menu-wrapper">
       <div className="drag-dropdown-menu-popup-ref" ref={handleRef}></div>
@@ -166,51 +132,55 @@ 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
       >
-        <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;
+        {disableKeyboardHandling ? (
+          innerMenu()
+        ) : (
+          <ArrowKeyNavigationProvider
+            closeOnTab
+            type={ArrowKeyNavigationType.MENU}
+            handleClose={() => handleClose('handle')}
+            onSelection={(index) => {
+              const results = items.flatMap((item) =>
+                'items' in item ? item.items : item,
+              );
 
-            const firstIndex = results.findIndex((value) =>
-              keys.includes(value.key!),
-            );
+              // 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;
 
-            if (firstIndex === -1 || index <= firstIndex) {
-              onItemActivated && onItemActivated({ item: results[index] });
-              return;
-            }
+              const firstIndex = results.findIndex((value) =>
+                keys.includes(value.key!),
+              );
 
-            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] });
+              if (firstIndex === -1 || index <= firstIndex) {
+                onItemActivated && onItemActivated({ item: results[index] });
                 return;
               }
 
-              if (firstIndex % 2 === 1 && 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;
+                }
               }
-            }
-          }}
-        >
-          {innerMenu()}
-        </ArrowKeyNavigationProvider>
+            }}
+          >
+            {innerMenu()}
+          </ArrowKeyNavigationProvider>
+        )}
       </Popup>
     </div>
   );