@atlaskit/editor-common 114.5.1 → 114.6.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-common
 
+## 114.6.0
+
+### Minor Changes
+
+- [`d482d7a660905`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d482d7a660905) -
+  Perf-linting cleanup: fix performance linting violations in editor-common, gated behind
+  platform_editor_perf_lint_cleanup experiment
+
 ## 114.5.1
 
 ### Patch Changes

package/dist/cjs/monitoring/error.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "114.5.0";
+var packageVersion = "114.5.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "114.5.0";
+var packageVersion = "114.5.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/cjs/ui-menu/ColorPickerButton/index.js

@@ -1,12 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntl = require("react-intl");
 var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
@@ -15,6 +16,7 @@ var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../analytics");
@@ -24,6 +26,7 @@ var _uiReact = require("../../ui-react");
 var _Popup = _interopRequireDefault(require("../../ui/Popup"));
 var _ArrowKeyNavigationProvider = require("../ArrowKeyNavigationProvider");
 var _types = require("../ArrowKeyNavigationProvider/types");
+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); }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -68,6 +71,7 @@ var colorPickerWrapper = function colorPickerWrapper() {
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 var ColorPaletteWithReactViewListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_uiColor.ColorPalette);
+var COLOR_PICKER_POPUP_OFFSET = [0, 10];
 var ColorPickerButton = function ColorPickerButton(props) {
   var buttonRef = _react.default.useRef(null);
   var _React$useState = _react.default.useState(false),
@@ -84,13 +88,54 @@ var ColorPickerButton = function ColorPickerButton(props) {
     setIsOpenedByKeyboard = _React$useState6[1];
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var togglePopup = function togglePopup() {
+  var memoizedHandleClose = (0, _react.useCallback)(function () {
+    return setIsPopupOpen(false);
+  }, [setIsPopupOpen]);
+  var handleClose = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedHandleClose : function () {
+    return setIsPopupOpen(false);
+  };
+  var memoizedTogglePopup = (0, _react.useCallback)(function () {
+    setIsPopupOpen(function (prevIsOpen) {
+      if (!prevIsOpen) {
+        setIsOpenedByKeyboard(false);
+        setIsPopupPositioned(false);
+      }
+      return !prevIsOpen;
+    });
+  }, []);
+  var togglePopup = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedTogglePopup : function () {
     setIsPopupOpen(!isPopupOpen);
     if (!isPopupOpen) {
       setIsOpenedByKeyboard(false);
       setIsPopupPositioned(false);
     }
   };
+  var memoizedOnKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      memoizedTogglePopup();
+      setIsOpenedByKeyboard(true);
+    }
+  }, [memoizedTogglePopup]);
+  var onKeyDown = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnKeyDown : function (event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      togglePopup();
+      setIsOpenedByKeyboard(true);
+    }
+  };
+  var memoizedPaletteOptions = (0, _react.useMemo)(function () {
+    return {
+      palette: props.colorPalette,
+      hexToPaletteColor: props.hexToPaletteColor,
+      paletteColorTooltipMessages: props.paletteColorTooltipMessages
+    };
+  }, [props.colorPalette, props.hexToPaletteColor, props.paletteColorTooltipMessages]);
+  var paletteOptions = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedPaletteOptions : {
+    palette: props.colorPalette,
+    hexToPaletteColor: props.hexToPaletteColor,
+    paletteColorTooltipMessages: props.paletteColorTooltipMessages
+  };
   _react.default.useEffect(function () {
     if (props.setDisableParentScroll) {
       props.setDisableParentScroll(isPopupOpen);
@@ -156,10 +201,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
     return (0, _react2.jsx)(_Popup.default, {
       target: buttonRef.current,
       fitHeight: 350,
-      fitWidth: 350
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-      ,
-      offset: [0, 10],
+      fitWidth: 350,
+      offset: (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? COLOR_PICKER_POPUP_OFFSET : [0, 10],
       alignX: props.alignX,
       mountTo: props.setDisableParentScroll ? props.mountPoint : undefined,
       absoluteOffset: props.absoluteOffset
@@ -177,12 +220,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
       type: _types.ArrowKeyNavigationType.COLOR,
       selectedRowIndex: selectedRowIndex,
       selectedColumnIndex: selectedColumnIndex,
-      closeOnTab: true
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-      ,
-      handleClose: function handleClose() {
-        return setIsPopupOpen(false);
-      },
+      closeOnTab: true,
+      handleClose: handleClose,
       isOpenedByKeyboard: isOpenedByKeyboard,
       isPopupPositioned: isPopupPositioned,
       ignoreEscapeKey: props.returnEscToButton
@@ -191,14 +230,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
       selectedColor: selectedColor,
       onClick: onColorSelected,
       handleClickOutside: togglePopup,
-      handleEscapeKeydown: handleEsc
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-      ,
-      paletteOptions: {
-        palette: props.colorPalette,
-        hexToPaletteColor: props.hexToPaletteColor,
-        paletteColorTooltipMessages: props.paletteColorTooltipMessages
-      }
+      handleEscapeKeydown: handleEsc,
+      paletteOptions: paletteOptions
     }))));
   };
   var title = props.title || '';
@@ -241,16 +274,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
     "aria-label": title,
     "aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
     spacing: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 'default' : 'compact',
-    onClick: togglePopup
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onKeyDown: function onKeyDown(event) {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        togglePopup();
-        setIsOpenedByKeyboard(true);
-      }
-    },
+    onClick: togglePopup,
+    onKeyDown: onKeyDown,
     "data-selected-color": props.currentColor,
     isSelected: isPopupOpen
   }, (0, _react2.jsx)(_primitives.Inline, {

package/dist/cjs/ui-menu/DropdownMenu/index.js

@@ -133,6 +133,12 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
         });
       }
     });
+    (0, _defineProperty2.default)(_this, "handleEnterKeydown", function (e) {
+      if (!_this.props.allowEnterDefaultBehavior) {
+        e.preventDefault();
+      }
+      e.stopPropagation();
+    });
     return _this;
   }
   (0, _inherits2.default)(DropdownMenuWrapper, _PureComponent);
@@ -157,7 +163,6 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
         onItemActivated = _this$props.onItemActivated,
         arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
         section = _this$props.section,
-        allowEnterDefaultBehavior = _this$props.allowEnterDefaultBehavior,
         handleEscapeKeydown = _this$props.handleEscapeKeydown;
       // Note that this onSelection function can't be refactored to useMemo for
       // performance gains as it is being used as a dependency in a useEffect in
@@ -198,15 +203,8 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
         position: popupPlacement.join(' '),
         shouldFitContainer: true,
         handleClickOutside: this.handleClose,
-        handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus
-        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-        ,
-        handleEnterKeydown: function handleEnterKeydown(e) {
-          if (!allowEnterDefaultBehavior) {
-            e.preventDefault();
-          }
-          e.stopPropagation();
-        },
+        handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
+        handleEnterKeydown: this.handleEnterKeydown,
         targetRef: this.state.target
       }, (0, _react2.jsx)("div", {
         style: {
@@ -298,12 +296,48 @@ function DropdownMenuItem(_ref) {
   var item = _ref.item,
     onItemActivated = _ref.onItemActivated,
     shouldUseDefaultRole = _ref.shouldUseDefaultRole,
-    _onMouseEnter = _ref.onMouseEnter,
-    _onMouseLeave = _ref.onMouseLeave;
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
   var _React$useState = _react.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     submenuActive = _React$useState2[0],
     setSubmenuActive = _React$useState2[1];
+  var memoizedOnClick = (0, _react.useCallback)(function () {
+    return onItemActivated && onItemActivated({
+      item: item
+    });
+  }, [onItemActivated, item]);
+  var onClick = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnClick : function () {
+    return onItemActivated && onItemActivated({
+      item: item
+    });
+  };
+  var memoizedOnMouseDown = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+  }, []);
+  var onMouseDown = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseDown : function (e) {
+    e.preventDefault();
+  };
+  var memoizedOnMouseEnter = (0, _react.useCallback)(function () {
+    return onMouseEnter && onMouseEnter({
+      item: item
+    });
+  }, [onMouseEnter, item]);
+  var onMouseEnterHandler = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseEnter : function () {
+    return onMouseEnter && onMouseEnter({
+      item: item
+    });
+  };
+  var memoizedOnMouseLeave = (0, _react.useCallback)(function () {
+    return onMouseLeave && onMouseLeave({
+      item: item
+    });
+  }, [onMouseLeave, item]);
+  var onMouseLeaveHandler = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseLeave : function () {
+    return onMouseLeave && onMouseLeave({
+      item: item
+    });
+  };
 
   // onClick and value.name are the action indicators in the handlers
   // If neither are present, don't wrap in an Item.
@@ -337,37 +371,15 @@ function DropdownMenuItem(_ref) {
     role: shouldUseDefaultRole ? 'button' : (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? undefined : 'menuitem',
     iconBefore: item.elemBefore,
     iconAfter: item.elemAfter,
-    isDisabled: item.isDisabled
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onClick: function onClick() {
-      return onItemActivated && onItemActivated({
-        item: item
-      });
-    },
+    isDisabled: item.isDisabled,
+    onClick: onClick,
     "aria-label": ariaLabel,
     "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
-    "aria-keyshortcuts": item['aria-keyshortcuts']
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onMouseDown: function onMouseDown(e) {
-      e.preventDefault();
-    },
-    component: DropdownMenuItemCustomComponent
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onMouseEnter: function onMouseEnter() {
-      return _onMouseEnter && _onMouseEnter({
-        item: item
-      });
-    }
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onMouseLeave: function onMouseLeave() {
-      return _onMouseLeave && _onMouseLeave({
-        item: item
-      });
-    },
+    "aria-keyshortcuts": item['aria-keyshortcuts'],
+    onMouseDown: onMouseDown,
+    component: DropdownMenuItemCustomComponent,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
     "aria-expanded": (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? undefined : item['aria-expanded']
   }, item.content));
   if (item.tooltipDescription) {
@@ -389,12 +401,16 @@ function (_ref2) {
 
   // This context is to handle the tab, Arrow Right/Left key events for dropdown.
   // Default context has the void callbacks for above key events
-  return (0, _react2.jsx)(DropdownMenuWrapper
-  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  , (0, _extends2.default)({
-    arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
+  var memoizedArrowKeyNavOptions = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
       keyDownHandlerContext: keyDownHandlerContext
-    })
+    });
+  }, [props.arrowKeyNavigationProviderOptions, keyDownHandlerContext]);
+  var arrowKeyNavOptions = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedArrowKeyNavOptions : _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
+    keyDownHandlerContext: keyDownHandlerContext
+  });
+  return (0, _react2.jsx)(DropdownMenuWrapper, (0, _extends2.default)({
+    arrowKeyNavigationProviderOptions: arrowKeyNavOptions
     // eslint-disable-next-line react/jsx-props-no-spreading -- Spreading props to pass through dynamic component props
   }, props));
 });

package/dist/cjs/ui-menu/ToolbarButton/styles.js

@@ -8,9 +8,13 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 // If you make any change here, copy it to above file as well
 //  and notify about the change in #team-fc-editor-ai-dev channel.
 
+var toolbarButtonStyle = {
+  alignItems: 'center'
+};
 var _default_1 = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({
     ref: ref
@@ -20,8 +24,8 @@ var _default_1 = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     // Ignored via go/ees007
     // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
     // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    style: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    style: (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? toolbarButtonStyle : {
       alignItems: 'center'
     }
   }));

package/dist/es2019/monitoring/error.js

@@ -4,7 +4,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "114.5.0";
+const packageVersion = "114.5.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "114.5.0";
+const packageVersion = "114.5.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/es2019/ui-menu/ColorPickerButton/index.js

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -14,6 +14,7 @@ import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 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, Inline } from '@atlaskit/primitives';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
@@ -57,6 +58,7 @@ const colorPickerWrapper = () => css({
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 const ColorPaletteWithReactViewListeners = withReactEditorViewOuterListeners(ColorPalette);
+const COLOR_PICKER_POPUP_OFFSET = [0, 10];
 const ColorPickerButton = props => {
   const buttonRef = React.useRef(null);
   const [isPopupOpen, setIsPopupOpen] = React.useState(false);
@@ -65,13 +67,48 @@ const ColorPickerButton = props => {
   const {
     formatMessage
   } = useIntl();
-  const togglePopup = () => {
+  const memoizedHandleClose = useCallback(() => setIsPopupOpen(false), [setIsPopupOpen]);
+  const handleClose = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedHandleClose : () => setIsPopupOpen(false);
+  const memoizedTogglePopup = useCallback(() => {
+    setIsPopupOpen(prevIsOpen => {
+      if (!prevIsOpen) {
+        setIsOpenedByKeyboard(false);
+        setIsPopupPositioned(false);
+      }
+      return !prevIsOpen;
+    });
+  }, []);
+  const togglePopup = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedTogglePopup : () => {
     setIsPopupOpen(!isPopupOpen);
     if (!isPopupOpen) {
       setIsOpenedByKeyboard(false);
       setIsPopupPositioned(false);
     }
   };
+  const memoizedOnKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      memoizedTogglePopup();
+      setIsOpenedByKeyboard(true);
+    }
+  }, [memoizedTogglePopup]);
+  const onKeyDown = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnKeyDown : event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      togglePopup();
+      setIsOpenedByKeyboard(true);
+    }
+  };
+  const memoizedPaletteOptions = useMemo(() => ({
+    palette: props.colorPalette,
+    hexToPaletteColor: props.hexToPaletteColor,
+    paletteColorTooltipMessages: props.paletteColorTooltipMessages
+  }), [props.colorPalette, props.hexToPaletteColor, props.paletteColorTooltipMessages]);
+  const paletteOptions = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedPaletteOptions : {
+    palette: props.colorPalette,
+    hexToPaletteColor: props.hexToPaletteColor,
+    paletteColorTooltipMessages: props.paletteColorTooltipMessages
+  };
   React.useEffect(() => {
     if (props.setDisableParentScroll) {
       props.setDisableParentScroll(isPopupOpen);
@@ -138,10 +175,8 @@ const ColorPickerButton = props => {
     return jsx(Popup, {
       target: buttonRef.current,
       fitHeight: 350,
-      fitWidth: 350
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-      ,
-      offset: [0, 10],
+      fitWidth: 350,
+      offset: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? COLOR_PICKER_POPUP_OFFSET : [0, 10],
       alignX: props.alignX,
       mountTo: props.setDisableParentScroll ? props.mountPoint : undefined,
       absoluteOffset: props.absoluteOffset
@@ -159,10 +194,8 @@ const ColorPickerButton = props => {
       type: ArrowKeyNavigationType.COLOR,
       selectedRowIndex: selectedRowIndex,
       selectedColumnIndex: selectedColumnIndex,
-      closeOnTab: true
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-      ,
-      handleClose: () => setIsPopupOpen(false),
+      closeOnTab: true,
+      handleClose: handleClose,
       isOpenedByKeyboard: isOpenedByKeyboard,
       isPopupPositioned: isPopupPositioned,
       ignoreEscapeKey: props.returnEscToButton
@@ -171,14 +204,8 @@ const ColorPickerButton = props => {
       selectedColor: selectedColor,
       onClick: onColorSelected,
       handleClickOutside: togglePopup,
-      handleEscapeKeydown: handleEsc
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-      ,
-      paletteOptions: {
-        palette: props.colorPalette,
-        hexToPaletteColor: props.hexToPaletteColor,
-        paletteColorTooltipMessages: props.paletteColorTooltipMessages
-      }
+      handleEscapeKeydown: handleEsc,
+      paletteOptions: paletteOptions
     }))));
   };
   const title = props.title || '';
@@ -221,16 +248,8 @@ const ColorPickerButton = props => {
     "aria-label": title,
     "aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
     spacing: editorExperiment('platform_editor_controls', 'variant1') ? 'default' : 'compact',
-    onClick: togglePopup
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onKeyDown: event => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        togglePopup();
-        setIsOpenedByKeyboard(true);
-      }
-    },
+    onClick: togglePopup,
+    onKeyDown: onKeyDown,
     "data-selected-color": props.currentColor,
     isSelected: isPopupOpen
   }, jsx(Inline, {

package/dist/es2019/ui-menu/DropdownMenu/index.js

@@ -6,7 +6,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 
-import React, { PureComponent, useContext } from 'react';
+import React, { PureComponent, useCallback, useContext, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
 import { css, jsx } from '@emotion/react';
@@ -167,6 +167,12 @@ export default class DropdownMenuWrapper extends PureComponent {
         });
       }
     });
+    _defineProperty(this, "handleEnterKeydown", e => {
+      if (!this.props.allowEnterDefaultBehavior) {
+        e.preventDefault();
+      }
+      e.stopPropagation();
+    });
   }
   renderDropdownMenu() {
     const {
@@ -187,7 +193,6 @@ export default class DropdownMenuWrapper extends PureComponent {
       onItemActivated,
       arrowKeyNavigationProviderOptions,
       section,
-      allowEnterDefaultBehavior,
       handleEscapeKeydown
     } = this.props;
     // Note that this onSelection function can't be refactored to useMemo for
@@ -230,15 +235,8 @@ export default class DropdownMenuWrapper extends PureComponent {
       position: popupPlacement.join(' '),
       shouldFitContainer: true,
       handleClickOutside: this.handleClose,
-      handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-      ,
-      handleEnterKeydown: e => {
-        if (!allowEnterDefaultBehavior) {
-          e.preventDefault();
-        }
-        e.stopPropagation();
-      },
+      handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
+      handleEnterKeydown: this.handleEnterKeydown,
       targetRef: this.state.target
     }, jsx("div", {
       style: {
@@ -331,6 +329,30 @@ export function DropdownMenuItem({
 }) {
   var _item$key2;
   const [submenuActive, setSubmenuActive] = React.useState(false);
+  const memoizedOnClick = useCallback(() => onItemActivated && onItemActivated({
+    item
+  }), [onItemActivated, item]);
+  const onClick = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnClick : () => onItemActivated && onItemActivated({
+    item
+  });
+  const memoizedOnMouseDown = useCallback(e => {
+    e.preventDefault();
+  }, []);
+  const onMouseDown = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseDown : e => {
+    e.preventDefault();
+  };
+  const memoizedOnMouseEnter = useCallback(() => onMouseEnter && onMouseEnter({
+    item
+  }), [onMouseEnter, item]);
+  const onMouseEnterHandler = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseEnter : () => onMouseEnter && onMouseEnter({
+    item
+  });
+  const memoizedOnMouseLeave = useCallback(() => onMouseLeave && onMouseLeave({
+    item
+  }), [onMouseLeave, item]);
+  const onMouseLeaveHandler = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseLeave : () => onMouseLeave && onMouseLeave({
+    item
+  });
 
   // onClick and value.name are the action indicators in the handlers
   // If neither are present, don't wrap in an Item.
@@ -362,31 +384,15 @@ export function DropdownMenuItem({
     role: shouldUseDefaultRole ? 'button' : expValEquals('platform_editor_august_a11y', 'isEnabled', true) ? undefined : 'menuitem',
     iconBefore: item.elemBefore,
     iconAfter: item.elemAfter,
-    isDisabled: item.isDisabled
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onClick: () => onItemActivated && onItemActivated({
-      item
-    }),
+    isDisabled: item.isDisabled,
+    onClick: onClick,
     "aria-label": ariaLabel,
     "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
-    "aria-keyshortcuts": item['aria-keyshortcuts']
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onMouseDown: e => {
-      e.preventDefault();
-    },
-    component: DropdownMenuItemCustomComponent
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onMouseEnter: () => onMouseEnter && onMouseEnter({
-      item
-    })
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onMouseLeave: () => onMouseLeave && onMouseLeave({
-      item
-    }),
+    "aria-keyshortcuts": item['aria-keyshortcuts'],
+    onMouseDown: onMouseDown,
+    component: DropdownMenuItemCustomComponent,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
     "aria-expanded": expValEquals('platform_editor_august_a11y', 'isEnabled', true) ? undefined : item['aria-expanded']
   }, item.content));
   if (item.tooltipDescription) {
@@ -409,13 +415,16 @@ export const DropdownMenuWithKeyboardNavigation = /*#__PURE__*/React.memo(
 
   // This context is to handle the tab, Arrow Right/Left key events for dropdown.
   // Default context has the void callbacks for above key events
-  return jsx(DropdownMenuWrapper
-  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  , _extends({
-    arrowKeyNavigationProviderOptions: {
-      ...props.arrowKeyNavigationProviderOptions,
-      keyDownHandlerContext
-    }
+  const memoizedArrowKeyNavOptions = useMemo(() => ({
+    ...props.arrowKeyNavigationProviderOptions,
+    keyDownHandlerContext
+  }), [props.arrowKeyNavigationProviderOptions, keyDownHandlerContext]);
+  const arrowKeyNavOptions = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedArrowKeyNavOptions : {
+    ...props.arrowKeyNavigationProviderOptions,
+    keyDownHandlerContext
+  };
+  return jsx(DropdownMenuWrapper, _extends({
+    arrowKeyNavigationProviderOptions: arrowKeyNavOptions
     // eslint-disable-next-line react/jsx-props-no-spreading -- Spreading props to pass through dynamic component props
   }, props));
 });

package/dist/es2019/ui-menu/ToolbarButton/styles.js

@@ -3,6 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
 //  and notify about the change in #team-fc-editor-ai-dev channel.
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+const toolbarButtonStyle = {
+  alignItems: 'center'
+};
 const _default_1 = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Button, _extends({
     ref: ref
@@ -12,8 +16,8 @@ const _default_1 = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Ignored via go/ees007
     // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
     // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    style: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    style: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? toolbarButtonStyle : {
       alignItems: 'center'
     }
   }));

package/dist/esm/monitoring/error.js

@@ -10,7 +10,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "114.5.0";
+var packageVersion = "114.5.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "114.5.0";
+var packageVersion = "114.5.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/dist/esm/ui-menu/ColorPickerButton/index.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -15,6 +15,7 @@ import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 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, Inline } from '@atlaskit/primitives';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
@@ -60,6 +61,7 @@ var colorPickerWrapper = function colorPickerWrapper() {
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 var ColorPaletteWithReactViewListeners = withReactEditorViewOuterListeners(ColorPalette);
+var COLOR_PICKER_POPUP_OFFSET = [0, 10];
 var ColorPickerButton = function ColorPickerButton(props) {
   var buttonRef = React.useRef(null);
   var _React$useState = React.useState(false),
@@ -76,13 +78,54 @@ var ColorPickerButton = function ColorPickerButton(props) {
     setIsOpenedByKeyboard = _React$useState6[1];
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var togglePopup = function togglePopup() {
+  var memoizedHandleClose = useCallback(function () {
+    return setIsPopupOpen(false);
+  }, [setIsPopupOpen]);
+  var handleClose = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedHandleClose : function () {
+    return setIsPopupOpen(false);
+  };
+  var memoizedTogglePopup = useCallback(function () {
+    setIsPopupOpen(function (prevIsOpen) {
+      if (!prevIsOpen) {
+        setIsOpenedByKeyboard(false);
+        setIsPopupPositioned(false);
+      }
+      return !prevIsOpen;
+    });
+  }, []);
+  var togglePopup = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedTogglePopup : function () {
     setIsPopupOpen(!isPopupOpen);
     if (!isPopupOpen) {
       setIsOpenedByKeyboard(false);
       setIsPopupPositioned(false);
     }
   };
+  var memoizedOnKeyDown = useCallback(function (event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      memoizedTogglePopup();
+      setIsOpenedByKeyboard(true);
+    }
+  }, [memoizedTogglePopup]);
+  var onKeyDown = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnKeyDown : function (event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      togglePopup();
+      setIsOpenedByKeyboard(true);
+    }
+  };
+  var memoizedPaletteOptions = useMemo(function () {
+    return {
+      palette: props.colorPalette,
+      hexToPaletteColor: props.hexToPaletteColor,
+      paletteColorTooltipMessages: props.paletteColorTooltipMessages
+    };
+  }, [props.colorPalette, props.hexToPaletteColor, props.paletteColorTooltipMessages]);
+  var paletteOptions = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedPaletteOptions : {
+    palette: props.colorPalette,
+    hexToPaletteColor: props.hexToPaletteColor,
+    paletteColorTooltipMessages: props.paletteColorTooltipMessages
+  };
   React.useEffect(function () {
     if (props.setDisableParentScroll) {
       props.setDisableParentScroll(isPopupOpen);
@@ -148,10 +191,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
     return jsx(Popup, {
       target: buttonRef.current,
       fitHeight: 350,
-      fitWidth: 350
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-      ,
-      offset: [0, 10],
+      fitWidth: 350,
+      offset: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? COLOR_PICKER_POPUP_OFFSET : [0, 10],
       alignX: props.alignX,
       mountTo: props.setDisableParentScroll ? props.mountPoint : undefined,
       absoluteOffset: props.absoluteOffset
@@ -169,12 +210,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
       type: ArrowKeyNavigationType.COLOR,
       selectedRowIndex: selectedRowIndex,
       selectedColumnIndex: selectedColumnIndex,
-      closeOnTab: true
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-      ,
-      handleClose: function handleClose() {
-        return setIsPopupOpen(false);
-      },
+      closeOnTab: true,
+      handleClose: handleClose,
       isOpenedByKeyboard: isOpenedByKeyboard,
       isPopupPositioned: isPopupPositioned,
       ignoreEscapeKey: props.returnEscToButton
@@ -183,14 +220,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
       selectedColor: selectedColor,
       onClick: onColorSelected,
       handleClickOutside: togglePopup,
-      handleEscapeKeydown: handleEsc
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-      ,
-      paletteOptions: {
-        palette: props.colorPalette,
-        hexToPaletteColor: props.hexToPaletteColor,
-        paletteColorTooltipMessages: props.paletteColorTooltipMessages
-      }
+      handleEscapeKeydown: handleEsc,
+      paletteOptions: paletteOptions
     }))));
   };
   var title = props.title || '';
@@ -233,16 +264,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
     "aria-label": title,
     "aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
     spacing: editorExperiment('platform_editor_controls', 'variant1') ? 'default' : 'compact',
-    onClick: togglePopup
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onKeyDown: function onKeyDown(event) {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        togglePopup();
-        setIsOpenedByKeyboard(true);
-      }
-    },
+    onClick: togglePopup,
+    onKeyDown: onKeyDown,
     "data-selected-color": props.currentColor,
     isSelected: isPopupOpen
   }, jsx(Inline, {

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -21,7 +21,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */
 
-import React, { PureComponent, useContext } from 'react';
+import React, { PureComponent, useCallback, useContext, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
 import { css, jsx } from '@emotion/react';
@@ -125,6 +125,12 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         });
       }
     });
+    _defineProperty(_this, "handleEnterKeydown", function (e) {
+      if (!_this.props.allowEnterDefaultBehavior) {
+        e.preventDefault();
+      }
+      e.stopPropagation();
+    });
     return _this;
   }
   _inherits(DropdownMenuWrapper, _PureComponent);
@@ -149,7 +155,6 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         onItemActivated = _this$props.onItemActivated,
         arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
         section = _this$props.section,
-        allowEnterDefaultBehavior = _this$props.allowEnterDefaultBehavior,
         handleEscapeKeydown = _this$props.handleEscapeKeydown;
       // Note that this onSelection function can't be refactored to useMemo for
       // performance gains as it is being used as a dependency in a useEffect in
@@ -190,15 +195,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         position: popupPlacement.join(' '),
         shouldFitContainer: true,
         handleClickOutside: this.handleClose,
-        handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus
-        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-        ,
-        handleEnterKeydown: function handleEnterKeydown(e) {
-          if (!allowEnterDefaultBehavior) {
-            e.preventDefault();
-          }
-          e.stopPropagation();
-        },
+        handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
+        handleEnterKeydown: this.handleEnterKeydown,
         targetRef: this.state.target
       }, jsx("div", {
         style: {
@@ -291,12 +289,48 @@ export function DropdownMenuItem(_ref) {
   var item = _ref.item,
     onItemActivated = _ref.onItemActivated,
     shouldUseDefaultRole = _ref.shouldUseDefaultRole,
-    _onMouseEnter = _ref.onMouseEnter,
-    _onMouseLeave = _ref.onMouseLeave;
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     submenuActive = _React$useState2[0],
     setSubmenuActive = _React$useState2[1];
+  var memoizedOnClick = useCallback(function () {
+    return onItemActivated && onItemActivated({
+      item: item
+    });
+  }, [onItemActivated, item]);
+  var onClick = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnClick : function () {
+    return onItemActivated && onItemActivated({
+      item: item
+    });
+  };
+  var memoizedOnMouseDown = useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  var onMouseDown = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseDown : function (e) {
+    e.preventDefault();
+  };
+  var memoizedOnMouseEnter = useCallback(function () {
+    return onMouseEnter && onMouseEnter({
+      item: item
+    });
+  }, [onMouseEnter, item]);
+  var onMouseEnterHandler = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseEnter : function () {
+    return onMouseEnter && onMouseEnter({
+      item: item
+    });
+  };
+  var memoizedOnMouseLeave = useCallback(function () {
+    return onMouseLeave && onMouseLeave({
+      item: item
+    });
+  }, [onMouseLeave, item]);
+  var onMouseLeaveHandler = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseLeave : function () {
+    return onMouseLeave && onMouseLeave({
+      item: item
+    });
+  };
 
   // onClick and value.name are the action indicators in the handlers
   // If neither are present, don't wrap in an Item.
@@ -330,37 +364,15 @@ export function DropdownMenuItem(_ref) {
     role: shouldUseDefaultRole ? 'button' : expValEquals('platform_editor_august_a11y', 'isEnabled', true) ? undefined : 'menuitem',
     iconBefore: item.elemBefore,
     iconAfter: item.elemAfter,
-    isDisabled: item.isDisabled
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onClick: function onClick() {
-      return onItemActivated && onItemActivated({
-        item: item
-      });
-    },
+    isDisabled: item.isDisabled,
+    onClick: onClick,
     "aria-label": ariaLabel,
     "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
-    "aria-keyshortcuts": item['aria-keyshortcuts']
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onMouseDown: function onMouseDown(e) {
-      e.preventDefault();
-    },
-    component: DropdownMenuItemCustomComponent
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onMouseEnter: function onMouseEnter() {
-      return _onMouseEnter && _onMouseEnter({
-        item: item
-      });
-    }
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onMouseLeave: function onMouseLeave() {
-      return _onMouseLeave && _onMouseLeave({
-        item: item
-      });
-    },
+    "aria-keyshortcuts": item['aria-keyshortcuts'],
+    onMouseDown: onMouseDown,
+    component: DropdownMenuItemCustomComponent,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
     "aria-expanded": expValEquals('platform_editor_august_a11y', 'isEnabled', true) ? undefined : item['aria-expanded']
   }, item.content));
   if (item.tooltipDescription) {
@@ -382,12 +394,16 @@ function (_ref2) {
 
   // This context is to handle the tab, Arrow Right/Left key events for dropdown.
   // Default context has the void callbacks for above key events
-  return jsx(DropdownMenuWrapper
-  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  , _extends({
-    arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
+  var memoizedArrowKeyNavOptions = useMemo(function () {
+    return _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
       keyDownHandlerContext: keyDownHandlerContext
-    })
+    });
+  }, [props.arrowKeyNavigationProviderOptions, keyDownHandlerContext]);
+  var arrowKeyNavOptions = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedArrowKeyNavOptions : _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
+    keyDownHandlerContext: keyDownHandlerContext
+  });
+  return jsx(DropdownMenuWrapper, _extends({
+    arrowKeyNavigationProviderOptions: arrowKeyNavOptions
     // eslint-disable-next-line react/jsx-props-no-spreading -- Spreading props to pass through dynamic component props
   }, props));
 });

package/dist/esm/ui-menu/ToolbarButton/styles.js

@@ -3,6 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
 //  and notify about the change in #team-fc-editor-ai-dev channel.
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+var toolbarButtonStyle = {
+  alignItems: 'center'
+};
 var _default_1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Button, _extends({
     ref: ref
@@ -12,8 +16,8 @@ var _default_1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // Ignored via go/ees007
     // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
     // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    style: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    style: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? toolbarButtonStyle : {
       alignItems: 'center'
     }
   }));

package/dist/types/ui-menu/DropdownMenu/index.d.ts

@@ -14,6 +14,7 @@ export default class DropdownMenuWrapper extends PureComponent<Props, State> {
     private updatePopupPlacement;
     private handleCloseAndFocus;
     private handleClose;
+    private handleEnterKeydown;
     private renderDropdownMenu;
     render(): jsx.JSX.Element;
     componentDidUpdate(previousProps: Props): void;

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

@@ -14,6 +14,7 @@ export default class DropdownMenuWrapper extends PureComponent<Props, State> {
     private updatePopupPlacement;
     private handleCloseAndFocus;
     private handleClose;
+    private handleEnterKeydown;
     private renderDropdownMenu;
     render(): jsx.JSX.Element;
     componentDidUpdate(previousProps: Props): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "114.5.1",
+	"version": "114.6.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"