@atlaskit/editor-plugin-insert-block 2.4.1 → 2.4.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 2.4.3
+
+### Patch Changes
+
+- [#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.
+- Updated dependencies
+
+## 2.4.2
+
+### Patch Changes
+
+- [#156556](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156556)
+  [`fa4db989cfa70`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fa4db989cfa70) -
+  [HOT-112603] Reduce memory leak footage by using WeakRef to store HTML element
+
 ## 2.4.1
 
 ### Patch Changes

package/dist/cjs/ui/ElementBrowser/InsertMenu.js

@@ -230,9 +230,11 @@ var flexWrapperStyles = (0, _react2.css)({
   overflow: 'hidden'
 });
 var FlexWrapper = function FlexWrapper(props) {
+  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
   var children = props.children,
     divProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    ref: setOutsideClickTargetRef,
     css: flexWrapperStyles
   }, divProps), children);
 };

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

@@ -15,6 +15,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
@@ -53,13 +54,19 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var isDetachedElement = function isDetachedElement(el) {
   return !document.body.contains(el);
 };
-var EmojiPickerWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_picker.EmojiPicker);
 var TABLE_SELECTOR_STRING = 'table selector';
 
 // TODO: Jenga team will create a component for a split button using this css
 var getHoverStyles = function getHoverStyles(selector) {
   return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n    }\n  }");
 };
+var EmojiPicker = function EmojiPicker(props) {
+  var setOutsideClickTargetRef = _react.default.useContext(_uiReact.OutsideClickTargetRefContext);
+  return (0, _react2.jsx)(_picker.EmojiPicker, (0, _extends2.default)({
+    onPickerRef: setOutsideClickTargetRef
+  }, props));
+};
+var EmojiPickerWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(EmojiPicker);
 var tableButtonWrapper = exports.tableButtonWrapper = function tableButtonWrapper(_ref) {
   var isTableSelectorOpen = _ref.isTableSelectorOpen,
     isButtonDisabled = _ref.isButtonDisabled;
@@ -125,7 +132,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       });
       if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
         var _ref2;
-        (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || _ref2.focus();
+        (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || (_ref2 = _ref2.deref()) === null || _ref2 === void 0 || _ref2.focus();
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleEmojiPicker", function () {
@@ -154,7 +161,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEmojiPressEscape", function () {
       var _this$emojiButtonRef;
       _this.toggleEmojiPicker(_analytics.INPUT_METHOD.KEYBOARD);
-      (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
+      (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || (_this$emojiButtonRef = _this$emojiButtonRef.deref()) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEmojiClickOutside", function (e) {
       // Ignore click events for detached elements.
@@ -172,22 +179,22 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         }
         switch (buttonName) {
           case 'emoji':
-            _this.emojiButtonRef = ref;
+            _this.emojiButtonRef = new WeakRef(ref);
             break;
           case 'media':
-            _this.mediaButtonRef = ref;
+            _this.mediaButtonRef = new WeakRef(ref);
             break;
         }
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handlePlusButtonRef", function (ref) {
       if (ref) {
-        _this.plusButtonRef = ref;
+        _this.plusButtonRef = new WeakRef(ref);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDropDownButtonRef", function (ref) {
       if (ref) {
-        _this.dropdownButtonRef = ref;
+        _this.dropdownButtonRef = new WeakRef(ref);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleTableSelector", function () {
@@ -365,10 +372,11 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         onShowMediaPicker = _this$props5.onShowMediaPicker,
         dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
       if (onShowMediaPicker) {
-        var _this$props$popupsMou;
-        var args = _this.mediaButtonRef ? {
-          ref: _this.mediaButtonRef,
-          mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : _this.mediaButtonRef
+        var _this$mediaButtonRef, _this$props$popupsMou;
+        var ref = (_this$mediaButtonRef = _this.mediaButtonRef) === null || _this$mediaButtonRef === void 0 ? void 0 : _this$mediaButtonRef.deref();
+        var args = ref ? {
+          ref: ref,
+          mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : ref
         } : undefined;
         onShowMediaPicker(args);
         if (dispatchAnalyticsEvent) {
@@ -555,7 +563,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           bubbles: true,
           key: 'ArrowDown'
         });
-        (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
+        (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || (_this$dropdownButtonR = _this$dropdownButtonR.deref()) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
         this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
           isOpenedByKeyboard: false
         }));
@@ -598,7 +606,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         });
       };
       return (0, _react2.jsx)(_ui.Popup, {
-        target: ref,
+        target: ref.deref(),
         fitHeight: 350,
         fitWidth: 350,
         offset: [0, 3],
@@ -671,6 +679,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _tableSelectorButton5,
         _tableSelectorButton6,
         _this$props$isDisable,
+        _this$plusButtonRef,
         _this$props$pluginInj3;
       var _this$state2 = this.state,
         buttons = _this$state2.buttons,
@@ -788,7 +797,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           spacing: this.props.isReducedSpacing ? 'none' : 'default',
           label: this.props.intl.formatMessage(_messages.messages.insertMenu),
           open: (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
-          plusButtonRef: this.plusButtonRef,
+          plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
           items: this.state.dropdownItems,
           onRef: this.handleDropDownButtonRef,
           onPlusButtonRef: this.handlePlusButtonRef,

package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup.js

@@ -8,6 +8,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 /**
@@ -115,7 +116,10 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
   var buttons = (0, _react.useMemo)(function () {
     return createArray(maxCols, maxRows);
   }, [maxCols, maxRows]);
-  return (0, _react2.jsx)(_primitives.Stack, null, (0, _react2.jsx)("div", {
+  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
+  return (0, _react2.jsx)(_primitives.Stack, {
+    ref: setOutsideClickTargetRef
+  }, (0, _react2.jsx)("div", {
     "aria-label": "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorPopup)),
     css:
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -4,14 +4,14 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 
-import { useCallback, useState } from 'react';
+import { useCallback, useContext, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ELEMENT_ITEM_HEIGHT, ElementBrowser } from '@atlaskit/editor-common/element-browser';
 import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
-import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { borderRadius } from '@atlaskit/theme';
@@ -217,11 +217,13 @@ const flexWrapperStyles = css({
   overflow: 'hidden'
 });
 const FlexWrapper = props => {
+  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
   const {
     children,
     ...divProps
   } = props;
   return jsx("div", _extends({
+    ref: setOutsideClickTargetRef,
     css: flexWrapperStyles
   }, divProps), children);
 };

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -12,7 +13,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { buttonGroupStyle, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
-import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 import * as colors from '@atlaskit/theme/colors';
@@ -26,7 +27,6 @@ import TableSelectorPopup from './table-selector-popup-with-listeners';
  * Checks if an element is detached (i.e. not in the current document)
  */
 const isDetachedElement = el => !document.body.contains(el);
-const EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
 const TABLE_SELECTOR_STRING = 'table selector';
 
 // TODO: Jenga team will create a component for a split button using this css
@@ -37,6 +37,13 @@ const getHoverStyles = selector => `&:hover ${selector} {
       background: ${`var(--ds-background-neutral-hovered, ${colors.N30A})`};
     }
   }`;
+const EmojiPicker = props => {
+  const setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
+  return jsx(AkEmojiPicker, _extends({
+    onPickerRef: setOutsideClickTargetRef
+  }, props));
+};
+const EmojiPickerWithListeners = withOuterListeners(EmojiPicker);
 export const tableButtonWrapper = ({
   isTableSelectorOpen,
   isButtonDisabled
@@ -126,8 +133,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
         isPlusMenuOpen: !isPlusMenuOpen
       });
       if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
-        var _ref;
-        (_ref = this.plusButtonRef || this.dropdownButtonRef) === null || _ref === void 0 ? void 0 : _ref.focus();
+        var _ref, _ref$deref;
+        (_ref = this.plusButtonRef || this.dropdownButtonRef) === null || _ref === void 0 ? void 0 : (_ref$deref = _ref.deref()) === null || _ref$deref === void 0 ? void 0 : _ref$deref.focus();
       }
     });
     _defineProperty(this, "toggleEmojiPicker", (inputMethod = INPUT_METHOD.TOOLBAR) => {
@@ -153,9 +160,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
       });
     });
     _defineProperty(this, "handleEmojiPressEscape", () => {
-      var _this$emojiButtonRef;
+      var _this$emojiButtonRef, _this$emojiButtonRef$;
       this.toggleEmojiPicker(INPUT_METHOD.KEYBOARD);
-      (_this$emojiButtonRef = this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 ? void 0 : _this$emojiButtonRef.focus();
+      (_this$emojiButtonRef = this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 ? void 0 : (_this$emojiButtonRef$ = _this$emojiButtonRef.deref()) === null || _this$emojiButtonRef$ === void 0 ? void 0 : _this$emojiButtonRef$.focus();
     });
     _defineProperty(this, "handleEmojiClickOutside", e => {
       // Ignore click events for detached elements.
@@ -172,21 +179,21 @@ export class ToolbarInsertBlock extends React.PureComponent {
       }
       switch (buttonName) {
         case 'emoji':
-          this.emojiButtonRef = ref;
+          this.emojiButtonRef = new WeakRef(ref);
           break;
         case 'media':
-          this.mediaButtonRef = ref;
+          this.mediaButtonRef = new WeakRef(ref);
           break;
       }
     });
     _defineProperty(this, "handlePlusButtonRef", ref => {
       if (ref) {
-        this.plusButtonRef = ref;
+        this.plusButtonRef = new WeakRef(ref);
       }
     });
     _defineProperty(this, "handleDropDownButtonRef", ref => {
       if (ref) {
-        this.dropdownButtonRef = ref;
+        this.dropdownButtonRef = new WeakRef(ref);
       }
     });
     _defineProperty(this, "toggleTableSelector", (inputMethod = INPUT_METHOD.TOOLBAR) => {
@@ -379,10 +386,11 @@ export class ToolbarInsertBlock extends React.PureComponent {
         dispatchAnalyticsEvent
       } = this.props;
       if (onShowMediaPicker) {
-        var _this$props$popupsMou;
-        const args = this.mediaButtonRef ? {
-          ref: this.mediaButtonRef,
-          mountPoint: (_this$props$popupsMou = this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : this.mediaButtonRef
+        var _this$mediaButtonRef, _this$props$popupsMou;
+        const ref = (_this$mediaButtonRef = this.mediaButtonRef) === null || _this$mediaButtonRef === void 0 ? void 0 : _this$mediaButtonRef.deref();
+        const args = ref ? {
+          ref,
+          mountPoint: (_this$props$popupsMou = this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : ref
         } : undefined;
         onShowMediaPicker(args);
         if (dispatchAnalyticsEvent) {
@@ -607,12 +615,12 @@ export class ToolbarInsertBlock extends React.PureComponent {
       });
     }
     if (this.state.isOpenedByKeyboard) {
-      var _this$dropdownButtonR;
+      var _this$dropdownButtonR, _this$dropdownButtonR2;
       const downArrowEvent = new KeyboardEvent('keydown', {
         bubbles: true,
         key: 'ArrowDown'
       });
-      (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 ? void 0 : _this$dropdownButtonR.dispatchEvent(downArrowEvent);
+      (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 ? void 0 : (_this$dropdownButtonR2 = _this$dropdownButtonR.deref()) === null || _this$dropdownButtonR2 === void 0 ? void 0 : _this$dropdownButtonR2.dispatchEvent(downArrowEvent);
       this.setState({
         ...this.state,
         isOpenedByKeyboard: false
@@ -658,7 +666,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       });
     };
     return jsx(Popup, {
-      target: ref,
+      target: ref.deref(),
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 3],
@@ -714,7 +722,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
     });
   }
   render() {
-    var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$pluginInj7;
+    var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$plusButtonRef, _this$props$pluginInj7;
     const {
       buttons,
       dropdownItems,
@@ -822,7 +830,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
         spacing: this.props.isReducedSpacing ? 'none' : 'default',
         label: this.props.intl.formatMessage(messages.insertMenu),
         open: editorExperiment('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
-        plusButtonRef: this.plusButtonRef,
+        plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
         items: this.state.dropdownItems,
         onRef: this.handleDropDownButtonRef,
         onPlusButtonRef: this.handlePlusButtonRef,

package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup.js

@@ -2,11 +2,12 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useEffect, useMemo, useRef } from 'react';
+import { useContext, useEffect, useMemo, useRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
 import { Stack } from '@atlaskit/primitives';
 import { B100 } from '@atlaskit/theme/colors';
 export const TABLE_SELECTOR_BUTTON_GAP = 2;
@@ -106,7 +107,10 @@ const TableSelectorPopup = ({
   const buttons = useMemo(() => {
     return createArray(maxCols, maxRows);
   }, [maxCols, maxRows]);
-  return jsx(Stack, null, jsx("div", {
+  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  return jsx(Stack, {
+    ref: setOutsideClickTargetRef
+  }, jsx("div", {
     "aria-label": `${formatMessage(messages.tableSizeSelectorPopup)}`,
     css:
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/esm/ui/ElementBrowser/InsertMenu.js

@@ -8,14 +8,14 @@ var _excluded = ["children"];
  * @jsx jsx
  */
 
-import { useCallback, useState } from 'react';
+import { useCallback, useContext, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ELEMENT_ITEM_HEIGHT, ElementBrowser } from '@atlaskit/editor-common/element-browser';
 import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
-import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { borderRadius } from '@atlaskit/theme';
@@ -225,9 +225,11 @@ var flexWrapperStyles = css({
   overflow: 'hidden'
 });
 var FlexWrapper = function FlexWrapper(props) {
+  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
   var children = props.children,
     divProps = _objectWithoutProperties(props, _excluded);
   return jsx("div", _extends({
+    ref: setOutsideClickTargetRef,
     css: flexWrapperStyles
   }, divProps), children);
 };

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

@@ -7,6 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
 var _templateObject;
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -28,7 +29,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { buttonGroupStyle, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
-import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 import * as colors from '@atlaskit/theme/colors';
@@ -44,13 +45,19 @@ import TableSelectorPopup from './table-selector-popup-with-listeners';
 var isDetachedElement = function isDetachedElement(el) {
   return !document.body.contains(el);
 };
-var EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
 var TABLE_SELECTOR_STRING = 'table selector';
 
 // TODO: Jenga team will create a component for a split button using this css
 var getHoverStyles = function getHoverStyles(selector) {
   return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n    }\n  }");
 };
+var EmojiPicker = function EmojiPicker(props) {
+  var setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
+  return jsx(AkEmojiPicker, _extends({
+    onPickerRef: setOutsideClickTargetRef
+  }, props));
+};
+var EmojiPickerWithListeners = withOuterListeners(EmojiPicker);
 export var tableButtonWrapper = function tableButtonWrapper(_ref) {
   var isTableSelectorOpen = _ref.isTableSelectorOpen,
     isButtonDisabled = _ref.isButtonDisabled;
@@ -116,7 +123,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       });
       if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
         var _ref2;
-        (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || _ref2.focus();
+        (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || (_ref2 = _ref2.deref()) === null || _ref2 === void 0 || _ref2.focus();
       }
     });
     _defineProperty(_assertThisInitialized(_this), "toggleEmojiPicker", function () {
@@ -145,7 +152,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "handleEmojiPressEscape", function () {
       var _this$emojiButtonRef;
       _this.toggleEmojiPicker(INPUT_METHOD.KEYBOARD);
-      (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
+      (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || (_this$emojiButtonRef = _this$emojiButtonRef.deref()) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
     });
     _defineProperty(_assertThisInitialized(_this), "handleEmojiClickOutside", function (e) {
       // Ignore click events for detached elements.
@@ -163,22 +170,22 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         }
         switch (buttonName) {
           case 'emoji':
-            _this.emojiButtonRef = ref;
+            _this.emojiButtonRef = new WeakRef(ref);
             break;
           case 'media':
-            _this.mediaButtonRef = ref;
+            _this.mediaButtonRef = new WeakRef(ref);
             break;
         }
       };
     });
     _defineProperty(_assertThisInitialized(_this), "handlePlusButtonRef", function (ref) {
       if (ref) {
-        _this.plusButtonRef = ref;
+        _this.plusButtonRef = new WeakRef(ref);
       }
     });
     _defineProperty(_assertThisInitialized(_this), "handleDropDownButtonRef", function (ref) {
       if (ref) {
-        _this.dropdownButtonRef = ref;
+        _this.dropdownButtonRef = new WeakRef(ref);
       }
     });
     _defineProperty(_assertThisInitialized(_this), "toggleTableSelector", function () {
@@ -356,10 +363,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         onShowMediaPicker = _this$props5.onShowMediaPicker,
         dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
       if (onShowMediaPicker) {
-        var _this$props$popupsMou;
-        var args = _this.mediaButtonRef ? {
-          ref: _this.mediaButtonRef,
-          mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : _this.mediaButtonRef
+        var _this$mediaButtonRef, _this$props$popupsMou;
+        var ref = (_this$mediaButtonRef = _this.mediaButtonRef) === null || _this$mediaButtonRef === void 0 ? void 0 : _this$mediaButtonRef.deref();
+        var args = ref ? {
+          ref: ref,
+          mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : ref
         } : undefined;
         onShowMediaPicker(args);
         if (dispatchAnalyticsEvent) {
@@ -546,7 +554,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           bubbles: true,
           key: 'ArrowDown'
         });
-        (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
+        (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || (_this$dropdownButtonR = _this$dropdownButtonR.deref()) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
         this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
           isOpenedByKeyboard: false
         }));
@@ -589,7 +597,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         });
       };
       return jsx(Popup, {
-        target: ref,
+        target: ref.deref(),
         fitHeight: 350,
         fitWidth: 350,
         offset: [0, 3],
@@ -662,6 +670,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         _tableSelectorButton5,
         _tableSelectorButton6,
         _this$props$isDisable,
+        _this$plusButtonRef,
         _this$props$pluginInj3;
       var _this$state2 = this.state,
         buttons = _this$state2.buttons,
@@ -779,7 +788,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           spacing: this.props.isReducedSpacing ? 'none' : 'default',
           label: this.props.intl.formatMessage(messages.insertMenu),
           open: editorExperiment('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
-          plusButtonRef: this.plusButtonRef,
+          plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
           items: this.state.dropdownItems,
           onRef: this.handleDropDownButtonRef,
           onPlusButtonRef: this.handlePlusButtonRef,

package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup.js

@@ -2,11 +2,12 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useEffect, useMemo, useRef } from 'react';
+import { useContext, useEffect, useMemo, useRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
 import { Stack } from '@atlaskit/primitives';
 import { B100 } from '@atlaskit/theme/colors';
 export var TABLE_SELECTOR_BUTTON_GAP = 2;
@@ -107,7 +108,10 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
   var buttons = useMemo(function () {
     return createArray(maxCols, maxRows);
   }, [maxCols, maxRows]);
-  return jsx(Stack, null, jsx("div", {
+  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  return jsx(Stack, {
+    ref: setOutsideClickTargetRef
+  }, jsx("div", {
     "aria-label": "".concat(formatMessage(messages.tableSizeSelectorPopup)),
     css:
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "2.4.1",
+	"version": "2.4.3",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.3.0",
-		"@atlaskit/editor-common": "^94.2.0",
+		"@atlaskit/editor-common": "^94.5.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-block-type": "^3.16.0",
 		"@atlaskit/editor-plugin-code-block": "^3.5.0",
@@ -44,7 +44,7 @@
 		"@atlaskit/editor-plugin-hyperlink": "^3.1.0",
 		"@atlaskit/editor-plugin-image-upload": "^1.2.0",
 		"@atlaskit/editor-plugin-layout": "^1.9.0",
-		"@atlaskit/editor-plugin-media": "^1.37.0",
+		"@atlaskit/editor-plugin-media": "^1.38.0",
 		"@atlaskit/editor-plugin-media-insert": "^3.2.0",
 		"@atlaskit/editor-plugin-mentions": "^2.10.0",
 		"@atlaskit/editor-plugin-panel": "^2.6.0",
@@ -57,7 +57,7 @@
 		"@atlaskit/editor-plugin-tasks-and-decisions": "^2.11.0",
 		"@atlaskit/editor-plugin-type-ahead": "^1.10.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/editor-shared-styles": "^3.0.0",
+		"@atlaskit/editor-shared-styles": "^3.1.0",
 		"@atlaskit/emoji": "^67.8.0",
 		"@atlaskit/heading": "2.4.6",
 		"@atlaskit/icon": "^22.24.0",
@@ -65,7 +65,7 @@
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.8.0",
+		"@atlaskit/tmp-editor-statsig": "^2.10.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "18.8.5",
 		"@babel/runtime": "^7.0.0",