@atlaskit/editor-common 94.4.0 → 94.5.1

package/dist/es2019/styles/shared/paragraph.js

@@ -5,12 +5,12 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorLineHeight, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { fg } from '@atlaskit/platform-feature-flags';
 import editorUGCToken from '../../ugc-tokens/get-editor-ugc-token';
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 export const paragraphSharedStyles = typographyTheme => {
-  return editorExperiment('typography_migration_ugc', true) ? css({
+  return fg('platform_editor_typography_ugc') ? css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '& p': {
       font: editorUGCToken('editor.font.body', typographyTheme),

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "94.4.0";
+const packageVersion = "94.5.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {
@@ -117,6 +117,10 @@ class DropList extends Component {
         ref.focus();
       }
     });
+    _defineProperty(this, "handleDroplistRef", ref => {
+      var _this$props$onDroplis, _this$props;
+      (_this$props$onDroplis = (_this$props = this.props).onDroplistRef) === null || _this$props$onDroplis === void 0 ? void 0 : _this$props$onDroplis.call(_this$props, ref);
+    });
     _defineProperty(this, "handleTriggerRef", ref => {
       this.triggerRef = ref;
     });
@@ -140,7 +144,8 @@ class DropList extends Component {
       role: "presentation"
     }, children) : null;
     return jsx("div", {
-      css: this.wrapperStyles
+      css: this.wrapperStyles,
+      ref: this.handleDroplistRef
     }, jsx(Layer, {
       content: layerContent,
       offset: dropOffset,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 const EmojiNodeFunctional = props => {
   var _resourceConfig$optim;
@@ -12,6 +12,12 @@ const EmojiNodeFunctional = props => {
     resourceConfig,
     emojiProvider
   } = props;
+  const emojiId = useMemo(() => ({
+    shortName,
+    id,
+    fallback
+  }), [shortName, id, fallback]);
+  const emojiProviderResolver = useMemo(() => Promise.resolve(emojiProvider), [emojiProvider]);
   if (allowTextFallback && !emojiProvider) {
     return /*#__PURE__*/React.createElement("span", {
       "data-emoji-id": id,
@@ -23,12 +29,8 @@ const EmojiNodeFunctional = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement(ResourcedEmoji, {
-    emojiId: {
-      id,
-      fallback,
-      shortName
-    },
-    emojiProvider: Promise.resolve(emojiProvider),
+    emojiId: emojiId,
+    emojiProvider: emojiProviderResolver,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     optimistic: true,
@@ -43,4 +45,4 @@ const EmojiNodeFunctional = props => {
 const EmojiNode = props => {
   return /*#__PURE__*/React.createElement(EmojiNodeFunctional, props);
 };
-export default EmojiNode;
+export default /*#__PURE__*/React.memo(EmojiNode);

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
-import { withReactEditorViewOuterListeners } from '../../ui-react';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '../../ui-react';
 import DropdownList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
 import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
@@ -14,7 +14,8 @@ import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
 export class Dropdown extends PureComponent {
   constructor(props) {
     super(props);
-    _defineProperty(this, "handleRef", target => {
+    _defineProperty(this, "handleRef", setOutsideClickTargetRef => target => {
+      setOutsideClickTargetRef(target);
       this.setState({
         target: target || undefined
       });
@@ -90,9 +91,9 @@ export class Dropdown extends PureComponent {
       trigger,
       isOpen
     } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      ref: this.handleRef
-    }, trigger), isOpen ? this.renderDropdown() : null);
+    return /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, setOutsideClickTargetRef => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      ref: this.handleRef(setOutsideClickTargetRef)
+    }, trigger), isOpen ? this.renderDropdown() : null));
   }
 }
 const DropdownWithOuterListeners = withReactEditorViewOuterListeners(Dropdown);

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

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -9,11 +9,10 @@ import React, { PureComponent, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup, Section } from '@atlaskit/menu';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { DropdownMenuSharedCssClassName } from '../../styles';
 import { KeyDownHandlerContext } from '../../ui-menu/ToolbarArrowKeyNavigationProvider';
-import { withReactEditorViewOuterListeners } from '../../ui-react';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '../../ui-react';
 import DropList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
 import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
@@ -74,7 +73,13 @@ const buttonStyles = (isActive, submenuActive) => {
 		`; // The default focus-visible style is removed to ensure consistency across browsers
   }
 };
-const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
+const DropListWithOutsideClickTargetRef = props => {
+  const setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
+  return jsx(DropList, _extends({
+    onDroplistRef: setOutsideClickTargetRef
+  }, props));
+};
+const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropListWithOutsideClickTargetRef);
 
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
@@ -108,27 +113,17 @@ export default class DropdownMenuWrapper extends PureComponent {
     _defineProperty(this, "handleCloseAndFocus", event => {
       var _this$state$target, _this$state$target$qu;
       (_this$state$target = this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
-      if (fg('platform_editor_a11y_table_context_menu')) {
-        this.handleClose(event);
-      } else {
-        this.handleClose();
-      }
+      this.handleClose(event);
     });
     _defineProperty(this, "handleClose", event => {
       const {
         onOpenChange
       } = this.props;
       if (onOpenChange) {
-        if (fg('platform_editor_a11y_table_context_menu')) {
-          onOpenChange({
-            isOpen: false,
-            event: event
-          });
-        } else {
-          onOpenChange({
-            isOpen: false
-          });
-        }
+        onOpenChange({
+          isOpen: false,
+          event: event
+        });
       }
     });
   }
@@ -197,11 +192,7 @@ export default class DropdownMenuWrapper extends PureComponent {
       handleClickOutside: this.handleClose,
       handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
       handleEnterKeydown: e => {
-        if (fg('platform_editor_a11y_table_context_menu')) {
-          if (!allowEnterDefaultBehavior) {
-            e.preventDefault();
-          }
-        } else {
+        if (!allowEnterDefaultBehavior) {
           e.preventDefault();
         }
         e.stopPropagation();
@@ -311,7 +302,9 @@ export function DropdownMenuItem({
   // From time to time we don't want to have any tabIndex on item wrapper
   // especially when we pass any interactive element as a item.content
   const tabIndex = item.wrapperTabIndex === null ? undefined : item.wrapperTabIndex || -1;
-  const dropListItem = jsx("div", {
+  const dropListItem =
+  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+  jsx("div", {
     css: () => buttonStyles(item.isActive, submenuActive),
     tabIndex: tabIndex,
     "aria-disabled": item.isDisabled ? 'true' : 'false',
@@ -340,7 +333,7 @@ export function DropdownMenuItem({
     onMouseLeave: () => onMouseLeave && onMouseLeave({
       item
     }),
-    "aria-expanded": fg('platform_editor_a11y_table_context_menu') ? item['aria-expanded'] : undefined
+    "aria-expanded": item['aria-expanded']
   }, item.content));
   if (item.tooltipDescription) {
     var _item$key3;

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

@@ -9,7 +9,6 @@ import React, { useCallback } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { FabricChannel } from '@atlaskit/analytics-listeners/types';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
 import { ToolTipContent } from '../../keymaps';
@@ -106,10 +105,10 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   if (!title) {
     return button;
   }
-  const tooltipContent = hideTooltip ? null : fg('platform_editor_a11y_table_context_menu') ? jsx(ToolTipContent, {
+  const tooltipContent = hideTooltip ? null : jsx(ToolTipContent, {
     description: title,
     keymap: keymap
-  }) : title;
+  });
   return jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: true,

package/dist/es2019/ui-react/index.js

@@ -1,2 +1,2 @@
 export { default as ReactEditorViewContext } from './ReactEditorViewContext';
-export { default as withReactEditorViewOuterListeners } from './with-react-editor-view-outer-listeners';
+export { default as withReactEditorViewOuterListeners, OutsideClickTargetRefContext } from './with-react-editor-view-outer-listeners';

package/dist/es2019/ui-react/with-react-editor-view-outer-listeners.js

@@ -1,27 +1,29 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { PureComponent, useEffect, useState } from 'react';
+import React, { PureComponent, useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { fg } from '@atlaskit/platform-feature-flags';
 import ReactEditorViewContext from './ReactEditorViewContext';
+// Use this context to pass in the reference of the element that should be considered as the outside click target
+// The outside click target is the element that should be clicked outside of to trigger the `handleClickOutside` event
+export const OutsideClickTargetRefContext = /*#__PURE__*/React.createContext(() => {});
 
-// This needs exporting to be used alongisde `withReactEditorViewOuterListeners`
+// This needs exporting to be used alongside `withReactEditorViewOuterListeners`
 
 class WithOutsideClick extends PureComponent {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "handleClick", evt => {
-      if (!this.props.isActiveComponent) {
+      if (!this.props.isActiveComponent || !this.props.handleClickOutside) {
         return;
       }
-      const domNode = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
+      const domNode = fg('platform_editor_replace_finddomnode_in_common') ? this.props.outsideClickTargetRef.current : ReactDOM.findDOMNode(this);
       if (!domNode || evt.target instanceof Node && !domNode.contains(evt.target)) {
-        if (this.props.handleClickOutside) {
-          var _this$props$editorVie;
-          this.props.handleClickOutside(evt);
-          // When the menus are closed by clicking outside the focus is set on editor.
-          if (!((_this$props$editorVie = this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
-            var _this$props$editorVie2;
-            (_this$props$editorVie2 = this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
-          }
+        var _this$props$editorVie;
+        this.props.handleClickOutside(evt);
+        // When the menus are closed by clicking outside the focus is set on editor.
+        if (!((_this$props$editorVie = this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
+          var _this$props$editorVie2;
+          (_this$props$editorVie2 = this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
         }
       }
     });
@@ -79,6 +81,10 @@ export default function withReactEditorViewOuterListeners(Component) {
   }) => {
     const isActiveProp = hasIsOpen(props) ? props.isOpen : true;
     const [isActiveComponent, setActiveComponent] = useState(false);
+    const outsideClickTargetRef = useRef(null);
+    const setOutsideClickTargetRef = useCallback(el => {
+      outsideClickTargetRef.current = el;
+    }, [outsideClickTargetRef]);
     useEffect(() => {
       requestAnimationFrame(() => {
         setActiveComponent(isActiveProp);
@@ -88,16 +94,19 @@ export default function withReactEditorViewOuterListeners(Component) {
       editorView,
       popupsMountPoint,
       editorRef
-    }) => /*#__PURE__*/React.createElement(WithOutsideClick, {
+    }) => /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Provider, {
+      value: setOutsideClickTargetRef
+    }, /*#__PURE__*/React.createElement(WithOutsideClick, {
       editorView: editorView,
       editorRef: editorRef,
       targetRef: props.targetRef,
+      outsideClickTargetRef: outsideClickTargetRef,
       popupsMountPoint: popupsMountPoint,
       isActiveComponent: isActiveComponent,
       handleClickOutside: handleClickOutside,
       handleEnterKeydown: handleEnterKeydown,
       handleEscapeKeydown: handleEscapeKeydown,
       closeOnTab: closeOnTab
-    }, /*#__PURE__*/React.createElement(Component, props)));
+    }, /*#__PURE__*/React.createElement(Component, props))));
   };
 }

package/dist/esm/analytics/types/enums.js

@@ -35,6 +35,7 @@ export var ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["DISMISSED"] = "dismissed";
   ACTION["DISPATCHED_INVALID_TRANSACTION"] = "dispatchedInvalidTransaction";
   ACTION["DISPATCHED_VALID_TRANSACTION"] = "dispatchedValidTransaction";
+  ACTION["DOUBLE_CLICKED"] = "doubleClicked";
   ACTION["DRAGGED"] = "dragged";
   ACTION["EDITED"] = "edited";
   ACTION["EDITOR_CRASHED"] = "unhandledErrorCaught";
@@ -180,6 +181,7 @@ export var INPUT_METHOD = /*#__PURE__*/function (INPUT_METHOD) {
   INPUT_METHOD["TABLE_CONTEXT_MENU"] = "tableContextMenu";
   INPUT_METHOD["MOUSE"] = "mouse";
   INPUT_METHOD["BROWSER"] = "browser";
+  INPUT_METHOD["DOUBLE_CLICK"] = "doubleClick";
   return INPUT_METHOD;
 }({});
 export var INSERT_MEDIA_VIA = /*#__PURE__*/function (INSERT_MEDIA_VIA) {
@@ -257,6 +259,7 @@ export var ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJECT) {
   ACTION_SUBJECT["CONTEXT_MENU"] = "contextMenu";
   ACTION_SUBJECT["INLINE_DIALOG"] = "inlineDialog";
   ACTION_SUBJECT["ENGAGEMENT_PLATFORM"] = "engagementPlatform";
+  ACTION_SUBJECT["MEDIA_VIEWER"] = "mediaViewer";
   return ACTION_SUBJECT;
 }({});
 export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {

package/dist/esm/element-browser/components/ElementList/ElementList.js

@@ -17,8 +17,8 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { ButtonItem } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Stack, Text } from '@atlaskit/primitives';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../../analytics';
 import { IconFallback } from '../../../quick-insert';
@@ -291,7 +291,7 @@ var ItemContent = /*#__PURE__*/memo(function (_ref7) {
   var title = _ref7.title,
     description = _ref7.description,
     keyshortcut = _ref7.keyshortcut;
-  if (editorExperiment('typography_migration_ugc', true)) {
+  if (fg('platform_editor_typography_ugc')) {
     return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       jsx("div", {

package/dist/esm/media/messages/caption.js

@@ -4,5 +4,10 @@ export var captionMessages = defineMessages({
     id: 'fabric.editor.captionPlaceholder',
     defaultMessage: 'Add a caption',
     description: 'Placeholder description for an empty (new) caption in the editor'
+  },
+  placeholderWithDoubleClickPrompt: {
+    id: 'fabric.editor.captionPlaceholderWithDoubleClickPrompt',
+    defaultMessage: 'Add a caption - double-click to preview',
+    description: 'Placeholder description to prompt users to add a caption and double click media to preview'
   }
 });

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 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 = "94.4.0";
+var packageVersion = "94.5.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/styles/shared/headings.js

@@ -9,7 +9,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import editorUGCToken from '../../ugc-tokens/get-editor-ugc-token';
 var headingWithAlignmentStyles = function headingWithAlignmentStyles() {
   return (
@@ -48,7 +47,7 @@ var headingWithAlignmentStyles = function headingWithAlignmentStyles() {
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 // text sizing prototype: http://proto/fabricrender/
 export var headingsSharedStyles = function headingsSharedStyles(typographyTheme) {
-  var isADSTokenMigrationEnabled = editorExperiment('typography_migration_ugc', true);
+  var isADSTokenMigrationEnabled = fg('platform_editor_typography_ugc');
   if (isADSTokenMigrationEnabled) {
     return css(_objectSpread({
       '& h1': {
@@ -72,6 +71,7 @@ export var headingsSharedStyles = function headingsSharedStyles(typographyTheme)
       },
       '& h5': {
         font: editorUGCToken('editor.font.heading.h5', typographyTheme),
+        marginTop: '1.667em',
         textTransform: 'none'
       },
       '& h6': {

package/dist/esm/styles/shared/paragraph.js

@@ -5,12 +5,12 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorLineHeight, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { fg } from '@atlaskit/platform-feature-flags';
 import editorUGCToken from '../../ugc-tokens/get-editor-ugc-token';
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 export var paragraphSharedStyles = function paragraphSharedStyles(typographyTheme) {
-  return editorExperiment('typography_migration_ugc', true) ? css({
+  return fg('platform_editor_typography_ugc') ? css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '& p': {
       font: editorUGCToken('editor.font.body', typographyTheme),

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

@@ -21,7 +21,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "94.4.0";
+var packageVersion = "94.5.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {
@@ -129,6 +129,10 @@ var DropList = /*#__PURE__*/function (_Component) {
         ref.focus();
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "handleDroplistRef", function (ref) {
+      var _this$props$onDroplis, _this$props;
+      (_this$props$onDroplis = (_this$props = _this.props).onDroplistRef) === null || _this$props$onDroplis === void 0 || _this$props$onDroplis.call(_this$props, ref);
+    });
     _defineProperty(_assertThisInitialized(_this), "handleTriggerRef", function (ref) {
       _this.triggerRef = ref;
     });
@@ -137,14 +141,14 @@ var DropList = /*#__PURE__*/function (_Component) {
   _createClass(DropList, [{
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-        children = _this$props.children,
-        isOpen = _this$props.isOpen,
-        position = _this$props.position,
-        trigger = _this$props.trigger,
-        onPositioned = _this$props.onPositioned,
-        testId = _this$props.testId,
-        id = _this$props.id;
+      var _this$props2 = this.props,
+        children = _this$props2.children,
+        isOpen = _this$props2.isOpen,
+        position = _this$props2.position,
+        trigger = _this$props2.trigger,
+        onPositioned = _this$props2.onPositioned,
+        testId = _this$props2.testId,
+        id = _this$props2.id;
       var layerContent = isOpen ? jsx("div", {
         css: this.menuWrapper,
         "data-role": "droplistContent",
@@ -154,7 +158,8 @@ var DropList = /*#__PURE__*/function (_Component) {
         role: "presentation"
       }, children) : null;
       return jsx("div", {
-        css: this.wrapperStyles
+        css: this.wrapperStyles,
+        ref: this.handleDroplistRef
       }, jsx(Layer, {
         content: layerContent,
         offset: dropOffset,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 var EmojiNodeFunctional = function EmojiNodeFunctional(props) {
   var _resourceConfig$optim;
@@ -10,6 +10,16 @@ var EmojiNodeFunctional = function EmojiNodeFunctional(props) {
     showTooltip = props.showTooltip,
     resourceConfig = props.resourceConfig,
     emojiProvider = props.emojiProvider;
+  var emojiId = useMemo(function () {
+    return {
+      shortName: shortName,
+      id: id,
+      fallback: fallback
+    };
+  }, [shortName, id, fallback]);
+  var emojiProviderResolver = useMemo(function () {
+    return Promise.resolve(emojiProvider);
+  }, [emojiProvider]);
   if (allowTextFallback && !emojiProvider) {
     return /*#__PURE__*/React.createElement("span", {
       "data-emoji-id": id,
@@ -21,12 +31,8 @@ var EmojiNodeFunctional = function EmojiNodeFunctional(props) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ResourcedEmoji, {
-    emojiId: {
-      id: id,
-      fallback: fallback,
-      shortName: shortName
-    },
-    emojiProvider: Promise.resolve(emojiProvider),
+    emojiId: emojiId,
+    emojiProvider: emojiProviderResolver,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     optimistic: true,
@@ -41,4 +47,4 @@ var EmojiNodeFunctional = function EmojiNodeFunctional(props) {
 var EmojiNode = function EmojiNode(props) {
   return /*#__PURE__*/React.createElement(EmojiNodeFunctional, props);
 };
-export default EmojiNode;
+export default /*#__PURE__*/React.memo(EmojiNode);

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

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { PureComponent } from 'react';
-import { withReactEditorViewOuterListeners } from '../../ui-react';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '../../ui-react';
 import DropdownList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
 import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
@@ -26,10 +26,13 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
     var _this;
     _classCallCheck(this, Dropdown);
     _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "handleRef", function (target) {
-      _this.setState({
-        target: target || undefined
-      });
+    _defineProperty(_assertThisInitialized(_this), "handleRef", function (setOutsideClickTargetRef) {
+      return function (target) {
+        setOutsideClickTargetRef(target);
+        _this.setState({
+          target: target || undefined
+        });
+      };
     });
     _defineProperty(_assertThisInitialized(_this), "updatePopupPlacement", function (placement) {
       _this.setState({
@@ -101,12 +104,15 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
       var _this$props2 = this.props,
         trigger = _this$props2.trigger,
         isOpen = _this$props2.isOpen;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        ref: this.handleRef
-      }, trigger), isOpen ? this.renderDropdown() : null);
+      return /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+          ref: _this2.handleRef(setOutsideClickTargetRef)
+        }, trigger), isOpen ? _this2.renderDropdown() : null);
+      });
     }
   }]);
   return Dropdown;