@atlaskit/editor-plugin-media 10.0.9 → 10.0.11

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-media
 
+## 10.0.11
+
+### Patch Changes
+
+- [`0d04e250bdf4b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d04e250bdf4b) -
+  [ux] Making submenus for media (color/size) and table (background color) consistent with ADS and
+  fixing incorrect gate mocking in editor-plugin-ai-tests
+- Updated dependencies
+
+## 10.0.10
+
+### Patch Changes
+
+- [`46ff42199054d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/46ff42199054d) -
+  Cleans up experiment platform_editor_eslint_suppression_fix
+- Updated dependencies
+
 ## 10.0.9
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingleNext.js

@@ -448,9 +448,6 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     (_captionPlaceHolderRe = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe === void 0 || _captionPlaceHolderRe.click();
   }, [mediaSingleWrapperRef, captionPlaceHolderRef]);
   var onMediaSingleKeyDown = _react.default.useCallback(function (event) {
-    if (!(0, _expValEquals.expValEquals)('platform_editor_eslint_suppression_fix', 'isEnabled', true)) {
-      return;
-    }
     if (mediaSingleWrapperRef.current !== event.target) {
       return;
     }
@@ -479,7 +476,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: _styles.MediaSingleNodeSelector,
-    onClick: notIos && (0, _expValEquals.expValEquals)('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : onMediaSingleClicked,
+    onClick: notIos ? undefined : onMediaSingleClicked,
     onKeyDown: notIos ? undefined : onMediaSingleKeyDown
   }, (0, _react2.jsx)(_mediaSingle.MediaBadges, {
     mediaElement: currentMediaElement(),

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

@@ -97,12 +97,20 @@ var ImageBorder = function ImageBorder(_ref) {
       ref.style.left = "-".concat(rect.width, "px");
     }
   };
-  var handleTriggerByKeyboard = function handleTriggerByKeyboard(event, callback) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      callback();
-      setIsOpenedByKeyboard(true);
+  var handleTriggerByKeyboard = function handleTriggerByKeyboard(event, allowedKeys, callback) {
+    if (!allowedKeys.includes(event.key)) {
+      return;
     }
+    event.preventDefault();
+    callback();
+    setIsOpenedByKeyboard(true);
+  };
+  var handleTriggerToolbarByKeyboard = function handleTriggerToolbarByKeyboard(event, callback) {
+    handleTriggerByKeyboard(event, ['Enter', ' '], callback);
+  };
+  var handleTriggerSubmenuByKeyboard = function handleTriggerSubmenuByKeyboard(event, callback) {
+    var keys = (0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['Enter', 'ArrowRight'] : ['Enter', ' '];
+    handleTriggerByKeyboard(event, keys, callback);
   };
   (0, _react.useEffect)(function () {
     var focusFirstOption = function focusFirstOption(submenuRef, isOpen) {
@@ -149,8 +157,18 @@ var ImageBorder = function ImageBorder(_ref) {
       _styles2.dropdownOptionButton,
       "aria-expanded": isColorSubmenuOpen,
       onKeyDown: function onKeyDown(e) {
-        return handleTriggerByKeyboard(e, function () {
-          return setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        return handleTriggerSubmenuByKeyboard(e, function () {
+          if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+            setIsColorSubmenuOpen(function (prev) {
+              var next = !prev;
+              if (next) {
+                setIsSizeSubmenuOpen(false);
+              }
+              return next;
+            });
+          } else {
+            setIsColorSubmenuOpen(!isColorSubmenuOpen);
+          }
         });
       }
     }, (0, _react2.jsx)(_compiled.Text, null, formatMessage(_media.imageBorderMessages.borderColor)), (0, _react2.jsx)("div", {
@@ -216,8 +234,18 @@ var ImageBorder = function ImageBorder(_ref) {
       "aria-expanded": isSizeSubmenuOpen,
       ref: dropDownSizeOptionButton,
       onKeyDown: function onKeyDown(e) {
-        return handleTriggerByKeyboard(e, function () {
-          return setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        return handleTriggerSubmenuByKeyboard(e, function () {
+          if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+            setIsSizeSubmenuOpen(function (prev) {
+              var next = !prev;
+              if (next) {
+                setIsColorSubmenuOpen(false);
+              }
+              return next;
+            });
+          } else {
+            setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+          }
         });
       }
     }, (0, _react2.jsx)(_compiled.Text, null, formatMessage(_media.imageBorderMessages.borderSize)), (0, _react2.jsx)("div", {
@@ -346,7 +374,7 @@ var ImageBorder = function ImageBorder(_ref) {
       setIsOpenedByKeyboard(false);
     },
     onKeyDown: function onKeyDown(e) {
-      return handleTriggerByKeyboard(e, function () {
+      return handleTriggerToolbarByKeyboard(e, function () {
         return setIsOpen(!isOpen);
       });
     }
@@ -357,7 +385,7 @@ var ImageBorder = function ImageBorder(_ref) {
     forcePlacement: true,
     stick: true
   }, (0, _react2.jsx)("div", {
-    onMouseLeave: (0, _expValEquals.expValEquals)('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : function () {
+    onMouseLeave: (0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? undefined : function () {
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
     }
@@ -395,30 +423,54 @@ var ImageBorder = function ImageBorder(_ref) {
     onItemActivated: function onItemActivated(_ref3) {
       var item = _ref3.item;
       if (item.value.name === 'color') {
-        setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+          setIsColorSubmenuOpen(function (prev) {
+            var next = !prev;
+            if (next) {
+              setIsSizeSubmenuOpen(false);
+            }
+            return next;
+          });
+        } else {
+          setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        }
       }
       if (item.value.name === 'size') {
-        setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+          setIsSizeSubmenuOpen(function (prev) {
+            var next = !prev;
+            if (next) {
+              setIsColorSubmenuOpen(false);
+            }
+            return next;
+          });
+        } else {
+          setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        }
       }
     },
     onMouseEnter: function onMouseEnter(_ref4) {
       var item = _ref4.item;
-      if (item.value.name === 'color') {
-        setIsColorSubmenuOpen(true);
-        setIsOpenedByKeyboard(false);
-      }
-      if (item.value.name === 'size') {
-        setIsSizeSubmenuOpen(true);
-        setIsOpenedByKeyboard(false);
+      if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'color') {
+          setIsColorSubmenuOpen(true);
+          setIsOpenedByKeyboard(false);
+        }
+        if (item.value.name === 'size') {
+          setIsSizeSubmenuOpen(true);
+          setIsOpenedByKeyboard(false);
+        }
       }
     },
     onMouseLeave: function onMouseLeave(_ref5) {
       var item = _ref5.item;
-      if (item.value.name === 'color') {
-        setIsColorSubmenuOpen(false);
-      }
-      if (item.value.name === 'size') {
-        setIsSizeSubmenuOpen(false);
+      if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'color') {
+          setIsColorSubmenuOpen(false);
+        }
+        if (item.value.name === 'size') {
+          setIsSizeSubmenuOpen(false);
+        }
       }
     },
     fitWidth: fitWidth + fitTolerance,

package/dist/cjs/ui/MediaViewer/MediaViewerContainer.js

@@ -9,7 +9,6 @@ exports.MediaViewerContainer = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _isType = require("../../pm-plugins/utils/is-type");
 var _utils = require("../../ui/toolbar/utils");
@@ -54,22 +53,16 @@ var MediaViewerContainer = exports.MediaViewerContainer = function MediaViewerCo
   };
   var isVideoMedia = (0, _isType.isVideo)((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
   var shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && (0, _experiments.editorExperiment)('platform_editor_controls', 'control');
-  return (0, _react2.jsx)(_react.Fragment, null, isEditorViewMode ? (0, _react2.jsx)(_react.Fragment, null, isInline ?
-  // remove eslint disable when platform_editor_eslint_suppression_fix has been cleaned up
-  // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
-  (0, _react2.jsx)("span", {
+  return (0, _react2.jsx)(_react.Fragment, null, isEditorViewMode ? (0, _react2.jsx)(_react.Fragment, null, isInline ? (0, _react2.jsx)("span", {
     onClick: showMediaViewer,
     css: interactiveStyles,
     "data-testid": mediaViewerContainerTestID,
-    role: (0, _expValEquals.expValEquals)('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? 'none' : undefined
-  }, children) :
-  // remove eslint disable when platform_editor_eslint_suppression_fix has been cleaned up
-  // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
-  (0, _react2.jsx)("div", {
+    role: "none"
+  }, children) : (0, _react2.jsx)("div", {
     onClick: showMediaViewer,
     css: interactiveStyles,
     "data-testid": mediaViewerContainerTestID,
-    role: (0, _expValEquals.expValEquals)('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? 'none' : undefined
+    role: "none"
   }, children), shouldShowViewer && (0, _react2.jsx)(_PortalWrapper.RenderMediaViewer, {
     selectedNodeAttrs: selectedNodeAttrs,
     mediaClientConfig: mediaClientConfig,

package/dist/es2019/nodeviews/mediaSingleNext.js

@@ -408,9 +408,6 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     (_captionPlaceHolderRe = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe === void 0 ? void 0 : _captionPlaceHolderRe.click();
   }, [mediaSingleWrapperRef, captionPlaceHolderRef]);
   const onMediaSingleKeyDown = React.useCallback(event => {
-    if (!expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true)) {
-      return;
-    }
     if (mediaSingleWrapperRef.current !== event.target) {
       return;
     }
@@ -439,7 +436,7 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: MediaSingleNodeSelector,
-    onClick: notIos && expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : onMediaSingleClicked,
+    onClick: notIos ? undefined : onMediaSingleClicked,
     onKeyDown: notIos ? undefined : onMediaSingleKeyDown
   }, jsx(MediaBadges, {
     mediaElement: currentMediaElement(),

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

@@ -79,12 +79,20 @@ const ImageBorder = ({
       ref.style.left = `-${rect.width}px`;
     }
   };
-  const handleTriggerByKeyboard = (event, callback) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      callback();
-      setIsOpenedByKeyboard(true);
+  const handleTriggerByKeyboard = (event, allowedKeys, callback) => {
+    if (!allowedKeys.includes(event.key)) {
+      return;
     }
+    event.preventDefault();
+    callback();
+    setIsOpenedByKeyboard(true);
+  };
+  const handleTriggerToolbarByKeyboard = (event, callback) => {
+    handleTriggerByKeyboard(event, ['Enter', ' '], callback);
+  };
+  const handleTriggerSubmenuByKeyboard = (event, callback) => {
+    const keys = expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['Enter', 'ArrowRight'] : ['Enter', ' '];
+    handleTriggerByKeyboard(event, keys, callback);
   };
   useEffect(() => {
     const focusFirstOption = (submenuRef, isOpen) => {
@@ -130,7 +138,19 @@ const ImageBorder = ({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       dropdownOptionButton,
       "aria-expanded": isColorSubmenuOpen,
-      onKeyDown: e => handleTriggerByKeyboard(e, () => setIsColorSubmenuOpen(!isColorSubmenuOpen))
+      onKeyDown: e => handleTriggerSubmenuByKeyboard(e, () => {
+        if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+          setIsColorSubmenuOpen(prev => {
+            const next = !prev;
+            if (next) {
+              setIsSizeSubmenuOpen(false);
+            }
+            return next;
+          });
+        } else {
+          setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        }
+      })
     }, jsx(Text, null, formatMessage(messages.borderColor)), jsx("div", {
       css: contextualMenuArrow
     })), jsx("div", {
@@ -193,7 +213,19 @@ const ImageBorder = ({
       dropdownOptionButton,
       "aria-expanded": isSizeSubmenuOpen,
       ref: dropDownSizeOptionButton,
-      onKeyDown: e => handleTriggerByKeyboard(e, () => setIsSizeSubmenuOpen(!isSizeSubmenuOpen))
+      onKeyDown: e => handleTriggerSubmenuByKeyboard(e, () => {
+        if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+          setIsSizeSubmenuOpen(prev => {
+            const next = !prev;
+            if (next) {
+              setIsColorSubmenuOpen(false);
+            }
+            return next;
+          });
+        } else {
+          setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        }
+      })
     }, jsx(Text, null, formatMessage(messages.borderSize)), jsx("div", {
       css: contextualMenuArrow
     })), jsx("div", {
@@ -320,7 +352,7 @@ const ImageBorder = ({
       setIsOpen(!isOpen);
       setIsOpenedByKeyboard(false);
     },
-    onKeyDown: e => handleTriggerByKeyboard(e, () => setIsOpen(!isOpen))
+    onKeyDown: e => handleTriggerToolbarByKeyboard(e, () => setIsOpen(!isOpen))
   }))), jsx(Popup, {
     target: popupTarget.current ? popupTarget.current : undefined,
     fitWidth: fitWidth + fitTolerance,
@@ -328,7 +360,7 @@ const ImageBorder = ({
     forcePlacement: true,
     stick: true
   }, jsx("div", {
-    onMouseLeave: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : () => {
+    onMouseLeave: expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? undefined : () => {
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
     }
@@ -365,32 +397,56 @@ const ImageBorder = ({
       item
     }) => {
       if (item.value.name === 'color') {
-        setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+          setIsColorSubmenuOpen(prev => {
+            const next = !prev;
+            if (next) {
+              setIsSizeSubmenuOpen(false);
+            }
+            return next;
+          });
+        } else {
+          setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        }
       }
       if (item.value.name === 'size') {
-        setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+          setIsSizeSubmenuOpen(prev => {
+            const next = !prev;
+            if (next) {
+              setIsColorSubmenuOpen(false);
+            }
+            return next;
+          });
+        } else {
+          setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        }
       }
     },
     onMouseEnter: ({
       item
     }) => {
-      if (item.value.name === 'color') {
-        setIsColorSubmenuOpen(true);
-        setIsOpenedByKeyboard(false);
-      }
-      if (item.value.name === 'size') {
-        setIsSizeSubmenuOpen(true);
-        setIsOpenedByKeyboard(false);
+      if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'color') {
+          setIsColorSubmenuOpen(true);
+          setIsOpenedByKeyboard(false);
+        }
+        if (item.value.name === 'size') {
+          setIsSizeSubmenuOpen(true);
+          setIsOpenedByKeyboard(false);
+        }
       }
     },
     onMouseLeave: ({
       item
     }) => {
-      if (item.value.name === 'color') {
-        setIsColorSubmenuOpen(false);
-      }
-      if (item.value.name === 'size') {
-        setIsSizeSubmenuOpen(false);
+      if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'color') {
+          setIsColorSubmenuOpen(false);
+        }
+        if (item.value.name === 'size') {
+          setIsSizeSubmenuOpen(false);
+        }
       }
     },
     fitWidth: fitWidth + fitTolerance,

package/dist/es2019/ui/MediaViewer/MediaViewerContainer.js

@@ -6,7 +6,6 @@ import React, { Fragment, useEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isVideo } from '../../pm-plugins/utils/is-type';
 import { getSelectedNearestMediaContainerNodeAttrsFunction } from '../../ui/toolbar/utils';
@@ -38,22 +37,16 @@ export const MediaViewerContainer = ({
   };
   const isVideoMedia = isVideo((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
   const shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && editorExperiment('platform_editor_controls', 'control');
-  return jsx(Fragment, null, isEditorViewMode ? jsx(Fragment, null, isInline ?
-  // remove eslint disable when platform_editor_eslint_suppression_fix has been cleaned up
-  // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
-  jsx("span", {
+  return jsx(Fragment, null, isEditorViewMode ? jsx(Fragment, null, isInline ? jsx("span", {
     onClick: showMediaViewer,
     css: interactiveStyles,
     "data-testid": mediaViewerContainerTestID,
-    role: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? 'none' : undefined
-  }, children) :
-  // remove eslint disable when platform_editor_eslint_suppression_fix has been cleaned up
-  // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
-  jsx("div", {
+    role: "none"
+  }, children) : jsx("div", {
     onClick: showMediaViewer,
     css: interactiveStyles,
     "data-testid": mediaViewerContainerTestID,
-    role: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? 'none' : undefined
+    role: "none"
   }, children), shouldShowViewer && jsx(RenderMediaViewer, {
     selectedNodeAttrs: selectedNodeAttrs,
     mediaClientConfig: mediaClientConfig,

package/dist/esm/nodeviews/mediaSingleNext.js

@@ -442,9 +442,6 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     (_captionPlaceHolderRe = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe === void 0 || _captionPlaceHolderRe.click();
   }, [mediaSingleWrapperRef, captionPlaceHolderRef]);
   var onMediaSingleKeyDown = React.useCallback(function (event) {
-    if (!expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true)) {
-      return;
-    }
     if (mediaSingleWrapperRef.current !== event.target) {
       return;
     }
@@ -473,7 +470,7 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: MediaSingleNodeSelector,
-    onClick: notIos && expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : onMediaSingleClicked,
+    onClick: notIos ? undefined : onMediaSingleClicked,
     onKeyDown: notIos ? undefined : onMediaSingleKeyDown
   }, jsx(MediaBadges, {
     mediaElement: currentMediaElement(),

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

@@ -89,12 +89,20 @@ var ImageBorder = function ImageBorder(_ref) {
       ref.style.left = "-".concat(rect.width, "px");
     }
   };
-  var handleTriggerByKeyboard = function handleTriggerByKeyboard(event, callback) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      callback();
-      setIsOpenedByKeyboard(true);
+  var handleTriggerByKeyboard = function handleTriggerByKeyboard(event, allowedKeys, callback) {
+    if (!allowedKeys.includes(event.key)) {
+      return;
     }
+    event.preventDefault();
+    callback();
+    setIsOpenedByKeyboard(true);
+  };
+  var handleTriggerToolbarByKeyboard = function handleTriggerToolbarByKeyboard(event, callback) {
+    handleTriggerByKeyboard(event, ['Enter', ' '], callback);
+  };
+  var handleTriggerSubmenuByKeyboard = function handleTriggerSubmenuByKeyboard(event, callback) {
+    var keys = expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['Enter', 'ArrowRight'] : ['Enter', ' '];
+    handleTriggerByKeyboard(event, keys, callback);
   };
   useEffect(function () {
     var focusFirstOption = function focusFirstOption(submenuRef, isOpen) {
@@ -141,8 +149,18 @@ var ImageBorder = function ImageBorder(_ref) {
       dropdownOptionButton,
       "aria-expanded": isColorSubmenuOpen,
       onKeyDown: function onKeyDown(e) {
-        return handleTriggerByKeyboard(e, function () {
-          return setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        return handleTriggerSubmenuByKeyboard(e, function () {
+          if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+            setIsColorSubmenuOpen(function (prev) {
+              var next = !prev;
+              if (next) {
+                setIsSizeSubmenuOpen(false);
+              }
+              return next;
+            });
+          } else {
+            setIsColorSubmenuOpen(!isColorSubmenuOpen);
+          }
         });
       }
     }, jsx(Text, null, formatMessage(messages.borderColor)), jsx("div", {
@@ -208,8 +226,18 @@ var ImageBorder = function ImageBorder(_ref) {
       "aria-expanded": isSizeSubmenuOpen,
       ref: dropDownSizeOptionButton,
       onKeyDown: function onKeyDown(e) {
-        return handleTriggerByKeyboard(e, function () {
-          return setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        return handleTriggerSubmenuByKeyboard(e, function () {
+          if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+            setIsSizeSubmenuOpen(function (prev) {
+              var next = !prev;
+              if (next) {
+                setIsColorSubmenuOpen(false);
+              }
+              return next;
+            });
+          } else {
+            setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+          }
         });
       }
     }, jsx(Text, null, formatMessage(messages.borderSize)), jsx("div", {
@@ -338,7 +366,7 @@ var ImageBorder = function ImageBorder(_ref) {
       setIsOpenedByKeyboard(false);
     },
     onKeyDown: function onKeyDown(e) {
-      return handleTriggerByKeyboard(e, function () {
+      return handleTriggerToolbarByKeyboard(e, function () {
         return setIsOpen(!isOpen);
       });
     }
@@ -349,7 +377,7 @@ var ImageBorder = function ImageBorder(_ref) {
     forcePlacement: true,
     stick: true
   }, jsx("div", {
-    onMouseLeave: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : function () {
+    onMouseLeave: expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? undefined : function () {
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
     }
@@ -387,30 +415,54 @@ var ImageBorder = function ImageBorder(_ref) {
     onItemActivated: function onItemActivated(_ref3) {
       var item = _ref3.item;
       if (item.value.name === 'color') {
-        setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+          setIsColorSubmenuOpen(function (prev) {
+            var next = !prev;
+            if (next) {
+              setIsSizeSubmenuOpen(false);
+            }
+            return next;
+          });
+        } else {
+          setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        }
       }
       if (item.value.name === 'size') {
-        setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+          setIsSizeSubmenuOpen(function (prev) {
+            var next = !prev;
+            if (next) {
+              setIsColorSubmenuOpen(false);
+            }
+            return next;
+          });
+        } else {
+          setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        }
       }
     },
     onMouseEnter: function onMouseEnter(_ref4) {
       var item = _ref4.item;
-      if (item.value.name === 'color') {
-        setIsColorSubmenuOpen(true);
-        setIsOpenedByKeyboard(false);
-      }
-      if (item.value.name === 'size') {
-        setIsSizeSubmenuOpen(true);
-        setIsOpenedByKeyboard(false);
+      if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'color') {
+          setIsColorSubmenuOpen(true);
+          setIsOpenedByKeyboard(false);
+        }
+        if (item.value.name === 'size') {
+          setIsSizeSubmenuOpen(true);
+          setIsOpenedByKeyboard(false);
+        }
       }
     },
     onMouseLeave: function onMouseLeave(_ref5) {
       var item = _ref5.item;
-      if (item.value.name === 'color') {
-        setIsColorSubmenuOpen(false);
-      }
-      if (item.value.name === 'size') {
-        setIsSizeSubmenuOpen(false);
+      if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'color') {
+          setIsColorSubmenuOpen(false);
+        }
+        if (item.value.name === 'size') {
+          setIsSizeSubmenuOpen(false);
+        }
       }
     },
     fitWidth: fitWidth + fitTolerance,

package/dist/esm/ui/MediaViewer/MediaViewerContainer.js

@@ -7,7 +7,6 @@ import React, { Fragment, useEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isVideo } from '../../pm-plugins/utils/is-type';
 import { getSelectedNearestMediaContainerNodeAttrsFunction } from '../../ui/toolbar/utils';
@@ -44,22 +43,16 @@ export var MediaViewerContainer = function MediaViewerContainer(_ref) {
   };
   var isVideoMedia = isVideo((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
   var shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && editorExperiment('platform_editor_controls', 'control');
-  return jsx(Fragment, null, isEditorViewMode ? jsx(Fragment, null, isInline ?
-  // remove eslint disable when platform_editor_eslint_suppression_fix has been cleaned up
-  // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
-  jsx("span", {
+  return jsx(Fragment, null, isEditorViewMode ? jsx(Fragment, null, isInline ? jsx("span", {
     onClick: showMediaViewer,
     css: interactiveStyles,
     "data-testid": mediaViewerContainerTestID,
-    role: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? 'none' : undefined
-  }, children) :
-  // remove eslint disable when platform_editor_eslint_suppression_fix has been cleaned up
-  // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
-  jsx("div", {
+    role: "none"
+  }, children) : jsx("div", {
     onClick: showMediaViewer,
     css: interactiveStyles,
     "data-testid": mediaViewerContainerTestID,
-    role: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? 'none' : undefined
+    role: "none"
   }, children), shouldShowViewer && jsx(RenderMediaViewer, {
     selectedNodeAttrs: selectedNodeAttrs,
     mediaClientConfig: mediaClientConfig,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "10.0.9",
+	"version": "10.0.11",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^41.0.0",
+		"@atlaskit/tmp-editor-statsig": "^43.0.0",
 		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -78,7 +78,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.6.0",
+		"@atlaskit/editor-common": "^112.7.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",