@atlaskit/editor-common 94.3.1 → 94.5.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @atlaskit/editor-common
 
+## 94.5.0
+
+### Minor Changes
+
+- [#156303](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156303)
+  [`dd9e4eaa8e65b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dd9e4eaa8e65b) -
+  [ux] ED-25493 Support caption onboarding, comment notification visual refresh and live view double
+  click support
+- [#155668](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155668)
+  [`f948f63ced742`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f948f63ced742) -
+  We are testing replacing findDOMNode with an explicit ref behind a feature flag. If this fix is
+  successful it will be available in a later release.
+
+### Patch Changes
+
+- [#156904](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156904)
+  [`be03c594d7304`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be03c594d7304) -
+  add missing margin top back to h5
+- [#157011](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157011)
+  [`4ff0cc01def2d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4ff0cc01def2d) -
+  ED-25301: prevent excessive emoji re-renders
+- [#157011](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157011)
+  [`dcdfd1e83ce5a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dcdfd1e83ce5a) -
+  change ugc typography experiment to a gate
+- Updated dependencies
+
+## 94.4.0
+
+### Minor Changes
+
+- [#156360](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156360)
+  [`482dbb03dbf68`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/482dbb03dbf68) -
+  [ux] Update mediaSingle and embedCard to set wrap layout z-index under FG
+
+### Patch Changes
+
+- [#156974](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156974)
+  [`e23605a60e753`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e23605a60e753) -
+  Add four and five column support for layout sections
+- Updated dependencies
+
 ## 94.3.1
 
 ### Patch Changes

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

@@ -41,6 +41,7 @@ var ACTION = exports.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";
@@ -186,6 +187,7 @@ var INPUT_METHOD = exports.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;
 }({});
 var INSERT_MEDIA_VIA = exports.INSERT_MEDIA_VIA = /*#__PURE__*/function (INSERT_MEDIA_VIA) {
@@ -263,6 +265,7 @@ var ACTION_SUBJECT = exports.ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJ
   ACTION_SUBJECT["CONTEXT_MENU"] = "contextMenu";
   ACTION_SUBJECT["INLINE_DIALOG"] = "inlineDialog";
   ACTION_SUBJECT["ENGAGEMENT_PLATFORM"] = "engagementPlatform";
+  ACTION_SUBJECT["MEDIA_VIEWER"] = "mediaViewer";
   return ACTION_SUBJECT;
 }({});
 var ACTION_SUBJECT_ID = exports.ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {

package/dist/cjs/analytics/types/node-events.js

@@ -11,6 +11,8 @@ var LAYOUT_TYPE = exports.LAYOUT_TYPE = /*#__PURE__*/function (LAYOUT_TYPE) {
   LAYOUT_TYPE["LEFT_SIDEBAR"] = "twoColumnsLeftSidebar";
   LAYOUT_TYPE["RIGHT_SIDEBAR"] = "twoColumnsRightSidebar";
   LAYOUT_TYPE["THREE_WITH_SIDEBARS"] = "threeColumnsWithSidebars ";
+  LAYOUT_TYPE["FOUR_COLS_EQUAL"] = "fourColumnsEqual";
+  LAYOUT_TYPE["FIVE_COLS_EQUAL"] = "fiveColumnsEqual";
   return LAYOUT_TYPE;
 }({});
 var SMART_LINK_TYPE = exports.SMART_LINK_TYPE = /*#__PURE__*/function (SMART_LINK_TYPE) {

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

@@ -19,8 +19,8 @@ var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../../analytics");
 var _quickInsert = require("../../../quick-insert");
@@ -301,7 +301,7 @@ var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref7) {
   var title = _ref7.title,
     description = _ref7.description,
     keyshortcut = _ref7.keyshortcut;
-  if ((0, _experiments.editorExperiment)('typography_migration_ugc', true)) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_typography_ugc')) {
     return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       (0, _react2.jsx)("div", {

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

@@ -10,5 +10,10 @@ var captionMessages = exports.captionMessages = (0, _reactIntlNext.defineMessage
     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/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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.3.1";
+var packageVersion = "94.5.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/styles/index.js

@@ -273,6 +273,12 @@ Object.defineProperty(exports, "mediaSingleSharedStyle", {
     return _mediaSingle.mediaSingleSharedStyle;
   }
 });
+Object.defineProperty(exports, "mediaSingleSharedStyleNew", {
+  enumerable: true,
+  get: function get() {
+    return _mediaSingle.mediaSingleSharedStyleNew;
+  }
+});
 Object.defineProperty(exports, "paragraphSharedStyles", {
   enumerable: true,
   get: function get() {

package/dist/cjs/styles/shared/embedCard.js

@@ -5,30 +5,57 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.embedSpacingStyles = exports.embedCardStyles = void 0;
 var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var embedCardStyles = exports.embedCardStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror': {
+var embedCardStyles = exports.embedCardStyles = function embedCardStyles() {
+  return (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    ".embedCardView-content-wrap[layout^='wrap-']": {
-      maxWidth: '100%'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    ".embedCardView-content-wrap[layout='wrap-left']": {
-      float: 'left'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    ".embedCardView-content-wrap[layout='wrap-right']": {
-      float: 'right'
-    },
+    '.ProseMirror': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout^='wrap-']": {
+        maxWidth: '100%',
+        position: 'relative',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        zIndex: _editorSharedStyles.akEditorWrappedNodeZIndex
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout='wrap-left']": {
+        float: 'left'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout='wrap-right']": {
+        float: 'right'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout='wrap-right'] + .embedCardView-content-wrap[layout='wrap-left']": {
+        clear: 'both'
+      }
+    }
+  }) : (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    ".embedCardView-content-wrap[layout='wrap-right'] + .embedCardView-content-wrap[layout='wrap-left']": {
-      clear: 'both'
+    '.ProseMirror': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout^='wrap-']": {
+        maxWidth: '100%'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout='wrap-left']": {
+        float: 'left'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout='wrap-right']": {
+        float: 'right'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      ".embedCardView-content-wrap[layout='wrap-right'] + .embedCardView-content-wrap[layout='wrap-left']": {
+        clear: 'both'
+      }
     }
-  }
-});
+  });
+};
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var embedSpacingStyles = exports.embedSpacingStyles = (0, _react.css)({

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

@@ -8,7 +8,6 @@ exports.headingsSharedStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _getEditorUgcToken = _interopRequireDefault(require("../../ugc-tokens/get-editor-ugc-token"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */ /* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */ /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */ /* eslint-disable @atlaskit/design-system/use-tokens-space */ /* eslint-disable @atlaskit/design-system/use-tokens-typography */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -49,7 +48,7 @@ var headingWithAlignmentStyles = function headingWithAlignmentStyles() {
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 // text sizing prototype: http://proto/fabricrender/
 var headingsSharedStyles = exports.headingsSharedStyles = function headingsSharedStyles(typographyTheme) {
-  var isADSTokenMigrationEnabled = (0, _experiments.editorExperiment)('typography_migration_ugc', true);
+  var isADSTokenMigrationEnabled = (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc');
   if (isADSTokenMigrationEnabled) {
     return (0, _react.css)(_objectSpread({
       '& h1': {
@@ -73,6 +72,7 @@ var headingsSharedStyles = exports.headingsSharedStyles = function headingsShare
       },
       '& h5': {
         font: (0, _getEditorUgcToken.default)('editor.font.heading.h5', typographyTheme),
+        marginTop: '1.667em',
         textTransform: 'none'
       },
       '& h6': {

package/dist/cjs/styles/shared/media-single.js

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.richMediaClassName = exports.mediaSingleSharedStyle = void 0;
+exports.richMediaClassName = exports.mediaSingleSharedStyleNew = exports.mediaSingleSharedStyle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _css; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _css, _css2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var richMediaClassName = exports.richMediaClassName = 'rich-media-item';
 var wrappedMediaBreakoutPoint = 410;
 var mediaSingleSharedStyle = exports.mediaSingleSharedStyle = (0, _react.css)((_css = {}, (0, _defineProperty2.default)(_css, "li .".concat(richMediaClassName), {
@@ -52,5 +53,51 @@ var mediaSingleSharedStyle = exports.mediaSingleSharedStyle = (0, _react.css)((_
     margin: "var(--ds-space-150, 12px)".concat(" 0")
   }
 }), _css));
+var mediaSingleSharedStyleNew = exports.mediaSingleSharedStyleNew = (0, _react.css)((_css2 = {}, (0, _defineProperty2.default)(_css2, "li .".concat(richMediaClassName), {
+  margin: 0
+}), (0, _defineProperty2.default)(_css2, '&.ua-chrome li > .mediaSingleView-content-wrap::before', {
+  content: "''",
+  display: 'block',
+  height: 0
+}), (0, _defineProperty2.default)(_css2, '&.ua-firefox', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.mediaSingleView-content-wrap': {
+    userSelect: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.captionView-content-wrap': {
+    userSelect: 'text'
+  }
+}), (0, _defineProperty2.default)(_css2, ".mediaSingleView-content-wrap[layout^='wrap-']", {
+  position: 'relative',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  zIndex: _editorSharedStyles.akEditorWrappedNodeZIndex
+}), (0, _defineProperty2.default)(_css2, ".mediaSingleView-content-wrap[layout='center']", {
+  clear: 'both'
+}), (0, _defineProperty2.default)(_css2, "table .".concat(richMediaClassName), {
+  marginTop: "var(--ds-space-150, 12px)",
+  marginBottom: "var(--ds-space-150, 12px)",
+  clear: 'both',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.image-wrap-left[data-layout], &.image-wrap-right[data-layout]': {
+    clear: 'none',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&:first-child': {
+      marginTop: "var(--ds-space-150, 12px)"
+    }
+  }
+}), (0, _defineProperty2.default)(_css2, ".".concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left"), {
+  clear: 'both'
+}), (0, _defineProperty2.default)(_css2, ".".concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-right, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-right"), {
+  marginRight: 0,
+  marginLeft: 0
+}), (0, _defineProperty2.default)(_css2, "@media all and (max-width: ".concat(wrappedMediaBreakoutPoint, "px)"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  "div.mediaSingleView-content-wrap[layout='wrap-left'], div.mediaSingleView-content-wrap[data-layout='wrap-left'], div.mediaSingleView-content-wrap[layout='wrap-right'], div.mediaSingleView-content-wrap[data-layout='wrap-right']": {
+    float: 'none',
+    overflow: 'auto',
+    margin: "var(--ds-space-150, 12px)".concat(" 0")
+  }
+}), _css2));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.paragraphSharedStyles = void 0;
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _getEditorUgcToken = _interopRequireDefault(require("../../ugc-tokens/get-editor-ugc-token"));
 /* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles */
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
@@ -17,7 +17,7 @@ var _getEditorUgcToken = _interopRequireDefault(require("../../ugc-tokens/get-ed
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 var paragraphSharedStyles = exports.paragraphSharedStyles = function paragraphSharedStyles(typographyTheme) {
-  return (0, _experiments.editorExperiment)('typography_migration_ugc', true) ? (0, _react.css)({
+  return (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '& p': {
       font: (0, _getEditorUgcToken.default)('editor.font.body', typographyTheme),

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 = "94.3.1";
+var packageVersion = "94.5.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {
@@ -132,6 +132,10 @@ var DropList = /*#__PURE__*/function (_Component) {
         ref.focus();
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTriggerRef", function (ref) {
       _this.triggerRef = ref;
     });
@@ -140,14 +144,14 @@ var DropList = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(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 ? (0, _react2.jsx)("div", {
         css: this.menuWrapper,
         "data-role": "droplistContent",
@@ -157,7 +161,8 @@ var DropList = /*#__PURE__*/function (_Component) {
         role: "presentation"
       }, children) : null;
       return (0, _react2.jsx)("div", {
-        css: this.wrapperStyles
+        css: this.wrapperStyles,
+        ref: this.handleDroplistRef
       }, (0, _react2.jsx)(_Layer.default, {
         content: layerContent,
         offset: dropOffset,

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

@@ -1,12 +1,14 @@
 "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 _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _element = require("@atlaskit/emoji/element");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var EmojiNodeFunctional = function EmojiNodeFunctional(props) {
   var _resourceConfig$optim;
   var allowTextFallback = props.allowTextFallback,
@@ -17,6 +19,16 @@ var EmojiNodeFunctional = function EmojiNodeFunctional(props) {
     showTooltip = props.showTooltip,
     resourceConfig = props.resourceConfig,
     emojiProvider = props.emojiProvider;
+  var emojiId = (0, _react.useMemo)(function () {
+    return {
+      shortName: shortName,
+      id: id,
+      fallback: fallback
+    };
+  }, [shortName, id, fallback]);
+  var emojiProviderResolver = (0, _react.useMemo)(function () {
+    return Promise.resolve(emojiProvider);
+  }, [emojiProvider]);
   if (allowTextFallback && !emojiProvider) {
     return /*#__PURE__*/_react.default.createElement("span", {
       "data-emoji-id": id,
@@ -28,12 +40,8 @@ var EmojiNodeFunctional = function EmojiNodeFunctional(props) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_element.ResourcedEmoji, {
-    emojiId: {
-      id: id,
-      fallback: fallback,
-      shortName: shortName
-    },
-    emojiProvider: Promise.resolve(emojiProvider),
+    emojiId: emojiId,
+    emojiProvider: emojiProviderResolver,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     optimistic: true,
@@ -48,4 +56,4 @@ var EmojiNodeFunctional = function EmojiNodeFunctional(props) {
 var EmojiNode = function EmojiNode(props) {
   return /*#__PURE__*/_react.default.createElement(EmojiNodeFunctional, props);
 };
-var _default = exports.default = EmojiNode;
+var _default = exports.default = /*#__PURE__*/_react.default.memo(EmojiNode);

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

@@ -36,10 +36,13 @@ var Dropdown = exports.Dropdown = /*#__PURE__*/function (_PureComponent) {
     var _this;
     (0, _classCallCheck2.default)(this, Dropdown);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRef", function (target) {
-      _this.setState({
-        target: target || undefined
-      });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRef", function (setOutsideClickTargetRef) {
+      return function (target) {
+        setOutsideClickTargetRef(target);
+        _this.setState({
+          target: target || undefined
+        });
+      };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updatePopupPlacement", function (placement) {
       _this.setState({
@@ -111,12 +114,15 @@ var Dropdown = exports.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-        ref: this.handleRef
-      }, trigger), isOpen ? this.renderDropdown() : null);
+      return /*#__PURE__*/_react.default.createElement(_uiReact.OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+          ref: _this2.handleRef(setOutsideClickTargetRef)
+        }, trigger), isOpen ? _this2.renderDropdown() : null);
+      });
     }
   }]);
   return Dropdown;

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

@@ -10,7 +10,6 @@ exports.default = exports.DropdownMenuWithKeyboardNavigation = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -18,6 +17,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
@@ -68,7 +68,13 @@ var buttonStyles = function buttonStyles(isActive, submenuActive) {
     return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t> span:hover[aria-disabled='false'] {\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\t", "\n\t\t\t> span[aria-disabled='true'] {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-text, #172B4D)", "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n\t\t\t\t\t> span:active[aria-disabled='false'] {\n\t\t\t\t\t\tbackground-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n\t\t\t\t\t}"), "var(--ds-text-disabled, #091E424F)", focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
   }
 };
-var DropListWithOutsideListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_DropList.default);
+var DropListWithOutsideClickTargetRef = function DropListWithOutsideClickTargetRef(props) {
+  var setOutsideClickTargetRef = _react.default.useContext(_uiReact.OutsideClickTargetRefContext);
+  return (0, _react2.jsx)(_DropList.default, (0, _extends2.default)({
+    onDroplistRef: setOutsideClickTargetRef
+  }, props));
+};
+var DropListWithOutsideListeners = (0, _uiReact.withReactEditorViewOuterListeners)(DropListWithOutsideClickTargetRef);
 
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
@@ -315,7 +321,9 @@ function DropdownMenuItem(_ref) {
   // 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
   var tabIndex = item.wrapperTabIndex === null ? undefined : item.wrapperTabIndex || -1;
-  var dropListItem = (0, _react2.jsx)("div", {
+  var dropListItem =
+  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+  (0, _react2.jsx)("div", {
     css: function css() {
       return buttonStyles(item.isActive, submenuActive);
     },

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

@@ -1,9 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "OutsideClickTargetRefContext", {
+  enumerable: true,
+  get: function get() {
+    return _withReactEditorViewOuterListeners.OutsideClickTargetRefContext;
+  }
+});
 Object.defineProperty(exports, "ReactEditorViewContext", {
   enumerable: true,
   get: function get() {
@@ -17,4 +24,6 @@ Object.defineProperty(exports, "withReactEditorViewOuterListeners", {
   }
 });
 var _ReactEditorViewContext = _interopRequireDefault(require("./ReactEditorViewContext"));
-var _withReactEditorViewOuterListeners = _interopRequireDefault(require("./with-react-editor-view-outer-listeners"));
+var _withReactEditorViewOuterListeners = _interopRequireWildcard(require("./with-react-editor-view-outer-listeners"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }