@atlaskit/editor-plugin-table 7.29.4 → 7.29.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 7.29.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#155668](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155668)
8
+ [`f948f63ced742`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f948f63ced742) -
9
+ We are testing replacing findDOMNode with an explicit ref behind a feature flag. If this fix is
10
+ successful it will be available in a later release.
11
+ - Updated dependencies
12
+
13
+ ## 7.29.5
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
3
19
  ## 7.29.4
4
20
 
5
21
  ### Patch Changes
@@ -8,14 +8,12 @@ exports.pluginKey = exports.createPlugin = void 0;
8
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _steps = require("@atlaskit/adf-schema/steps");
11
- var _analytics = require("@atlaskit/editor-common/analytics");
12
11
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
13
12
  var _state = require("@atlaskit/editor-prosemirror/state");
14
13
  var _transform = require("@atlaskit/editor-prosemirror/transform");
15
14
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
16
- var _utils = require("@atlaskit/editor-tables/utils");
17
15
  var _alignment = require("../utils/alignment");
18
- var _utils2 = require("./table-resizing/utils");
16
+ var _utils = require("./table-resizing/utils");
19
17
  var _excluded = ["width"];
20
18
  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; }
21
19
  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; } /**
@@ -52,27 +50,6 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
52
50
  }
53
51
  },
54
52
  appendTransaction: function appendTransaction(transactions, oldState, newState) {
55
- // do not fire select table analytics events when a table is being created or deleted
56
- var selectedTableOldState = (0, _utils.findTable)(oldState.selection);
57
- var selectedTableNewState = (0, _utils.findTable)(newState.selection);
58
-
59
- /**
60
- * Select table event
61
- * condition: 1
62
- * When users selection changes to table
63
- */
64
- if (!selectedTableOldState && selectedTableNewState) {
65
- dispatchAnalyticsEvent({
66
- action: _analytics.ACTION.SELECTED,
67
- actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
68
- actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
69
- eventType: _analytics.EVENT_TYPE.TRACK,
70
- attributes: {
71
- localId: selectedTableNewState.node.attrs.localId || ''
72
- }
73
- });
74
- }
75
-
76
53
  // When document first load in Confluence, initially it is an empty document
77
54
  // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
78
55
  // what we need to do is to add width attr to all tables in the real document
@@ -104,23 +81,6 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
104
81
  }
105
82
  var table = newState.schema.nodes.table;
106
83
  var tr = newState.tr;
107
-
108
- /**
109
- * Select table event
110
- * condition: 2
111
- * Users selection defaults to table, if first node
112
- */
113
- if (selectedTableOldState) {
114
- dispatchAnalyticsEvent({
115
- action: _analytics.ACTION.SELECTED,
116
- actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
117
- actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
118
- eventType: _analytics.EVENT_TYPE.TRACK,
119
- attributes: {
120
- localId: selectedTableOldState.node.attrs.localId || ''
121
- }
122
- });
123
- }
124
84
  if (isReplaceDocumentOperation && !isCommentEditor) {
125
85
  newState.doc.forEach(function (node, offset) {
126
86
  if (node.type === table) {
@@ -162,8 +122,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
162
122
  step.getMap().forEach(function (_, __, newStart, newEnd) {
163
123
  newState.doc.nodesBetween(newStart, newEnd, function (node, pos) {
164
124
  if (node.type === table) {
165
- if (shouldPatchTableWidth && node.attrs.width !== _utils2.TABLE_MAX_WIDTH) {
166
- tr.setNodeAttribute(pos, 'width', _utils2.TABLE_MAX_WIDTH);
125
+ if (shouldPatchTableWidth && node.attrs.width !== _utils.TABLE_MAX_WIDTH) {
126
+ tr.setNodeAttribute(pos, 'width', _utils.TABLE_MAX_WIDTH);
167
127
  }
168
128
  if (shouldPatchTableAlignment) {
169
129
  tr.setNodeAttribute(pos, 'layout', _alignment.ALIGN_START);
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.DropdownMenu = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
11
  var _react = _interopRequireWildcard(require("react"));
11
12
  var _ui = require("@atlaskit/editor-common/ui");
12
13
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
@@ -18,7 +19,13 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
18
19
  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; }
19
20
  /* eslint-disable @atlaskit/design-system/prefer-primitives */
20
21
 
21
- var DropListWithOutsideListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.DropList);
22
+ var DropListWithOutsideClickTargetRef = function DropListWithOutsideClickTargetRef(props) {
23
+ var setOutsideClickTargetRef = _react.default.useContext(_uiReact.OutsideClickTargetRefContext);
24
+ return /*#__PURE__*/_react.default.createElement(_ui.DropList, (0, _extends2.default)({
25
+ onDroplistRef: setOutsideClickTargetRef
26
+ }, props));
27
+ };
28
+ var DropListWithOutsideListeners = (0, _uiReact.withReactEditorViewOuterListeners)(DropListWithOutsideClickTargetRef);
22
29
  var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
23
30
  var items = _ref.items,
24
31
  section = _ref.section,
@@ -5,12 +5,10 @@
5
5
  */
6
6
 
7
7
  import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
8
- import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
9
8
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
10
9
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
11
10
  import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
12
11
  import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
13
- import { findTable } from '@atlaskit/editor-tables/utils';
14
12
  import { ALIGN_START } from '../utils/alignment';
15
13
  import { TABLE_MAX_WIDTH } from './table-resizing/utils';
16
14
  export const pluginKey = new PluginKey('tableWidthPlugin');
@@ -45,27 +43,6 @@ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTabl
45
43
  }
46
44
  },
47
45
  appendTransaction: (transactions, oldState, newState) => {
48
- // do not fire select table analytics events when a table is being created or deleted
49
- const selectedTableOldState = findTable(oldState.selection);
50
- const selectedTableNewState = findTable(newState.selection);
51
-
52
- /**
53
- * Select table event
54
- * condition: 1
55
- * When users selection changes to table
56
- */
57
- if (!selectedTableOldState && selectedTableNewState) {
58
- dispatchAnalyticsEvent({
59
- action: ACTION.SELECTED,
60
- actionSubject: ACTION_SUBJECT.DOCUMENT,
61
- actionSubjectId: ACTION_SUBJECT_ID.TABLE,
62
- eventType: EVENT_TYPE.TRACK,
63
- attributes: {
64
- localId: selectedTableNewState.node.attrs.localId || ''
65
- }
66
- });
67
- }
68
-
69
46
  // When document first load in Confluence, initially it is an empty document
70
47
  // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
71
48
  // what we need to do is to add width attr to all tables in the real document
@@ -97,23 +74,6 @@ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTabl
97
74
  table
98
75
  } = newState.schema.nodes;
99
76
  const tr = newState.tr;
100
-
101
- /**
102
- * Select table event
103
- * condition: 2
104
- * Users selection defaults to table, if first node
105
- */
106
- if (selectedTableOldState) {
107
- dispatchAnalyticsEvent({
108
- action: ACTION.SELECTED,
109
- actionSubject: ACTION_SUBJECT.DOCUMENT,
110
- actionSubjectId: ACTION_SUBJECT_ID.TABLE,
111
- eventType: EVENT_TYPE.TRACK,
112
- attributes: {
113
- localId: selectedTableOldState.node.attrs.localId || ''
114
- }
115
- });
116
- }
117
77
  if (isReplaceDocumentOperation && !isCommentEditor) {
118
78
  newState.doc.forEach((node, offset) => {
119
79
  if (node.type === table) {
@@ -1,12 +1,19 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  /* eslint-disable @atlaskit/design-system/prefer-primitives */
2
3
  import React, { useState } from 'react';
3
4
  import { DropList, Popup } from '@atlaskit/editor-common/ui';
4
5
  import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem } from '@atlaskit/editor-common/ui-menu';
5
- import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
6
+ import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
6
7
  import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
7
8
  import { MenuGroup, Section } from '@atlaskit/menu';
8
9
  import { dragMenuDropdownWidth } from '../consts';
9
- const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
10
+ const DropListWithOutsideClickTargetRef = props => {
11
+ const setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
12
+ return /*#__PURE__*/React.createElement(DropList, _extends({
13
+ onDroplistRef: setOutsideClickTargetRef
14
+ }, props));
15
+ };
16
+ const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropListWithOutsideClickTargetRef);
10
17
  export const DropdownMenu = ({
11
18
  items,
12
19
  section,
@@ -10,12 +10,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
10
10
  */
11
11
 
12
12
  import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
13
- import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
14
13
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
15
14
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
16
15
  import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
17
16
  import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
18
- import { findTable } from '@atlaskit/editor-tables/utils';
19
17
  import { ALIGN_START } from '../utils/alignment';
20
18
  import { TABLE_MAX_WIDTH } from './table-resizing/utils';
21
19
  export var pluginKey = new PluginKey('tableWidthPlugin');
@@ -47,27 +45,6 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullW
47
45
  }
48
46
  },
49
47
  appendTransaction: function appendTransaction(transactions, oldState, newState) {
50
- // do not fire select table analytics events when a table is being created or deleted
51
- var selectedTableOldState = findTable(oldState.selection);
52
- var selectedTableNewState = findTable(newState.selection);
53
-
54
- /**
55
- * Select table event
56
- * condition: 1
57
- * When users selection changes to table
58
- */
59
- if (!selectedTableOldState && selectedTableNewState) {
60
- dispatchAnalyticsEvent({
61
- action: ACTION.SELECTED,
62
- actionSubject: ACTION_SUBJECT.DOCUMENT,
63
- actionSubjectId: ACTION_SUBJECT_ID.TABLE,
64
- eventType: EVENT_TYPE.TRACK,
65
- attributes: {
66
- localId: selectedTableNewState.node.attrs.localId || ''
67
- }
68
- });
69
- }
70
-
71
48
  // When document first load in Confluence, initially it is an empty document
72
49
  // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
73
50
  // what we need to do is to add width attr to all tables in the real document
@@ -99,23 +76,6 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullW
99
76
  }
100
77
  var table = newState.schema.nodes.table;
101
78
  var tr = newState.tr;
102
-
103
- /**
104
- * Select table event
105
- * condition: 2
106
- * Users selection defaults to table, if first node
107
- */
108
- if (selectedTableOldState) {
109
- dispatchAnalyticsEvent({
110
- action: ACTION.SELECTED,
111
- actionSubject: ACTION_SUBJECT.DOCUMENT,
112
- actionSubjectId: ACTION_SUBJECT_ID.TABLE,
113
- eventType: EVENT_TYPE.TRACK,
114
- attributes: {
115
- localId: selectedTableOldState.node.attrs.localId || ''
116
- }
117
- });
118
- }
119
79
  if (isReplaceDocumentOperation && !isCommentEditor) {
120
80
  newState.doc.forEach(function (node, offset) {
121
81
  if (node.type === table) {
@@ -1,13 +1,20 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ import _extends from "@babel/runtime/helpers/extends";
2
3
  /* eslint-disable @atlaskit/design-system/prefer-primitives */
3
4
  import React, { useState } from 'react';
4
5
  import { DropList, Popup } from '@atlaskit/editor-common/ui';
5
6
  import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem } from '@atlaskit/editor-common/ui-menu';
6
- import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
7
+ import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
7
8
  import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
8
9
  import { MenuGroup, Section } from '@atlaskit/menu';
9
10
  import { dragMenuDropdownWidth } from '../consts';
10
- var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
11
+ var DropListWithOutsideClickTargetRef = function DropListWithOutsideClickTargetRef(props) {
12
+ var setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
13
+ return /*#__PURE__*/React.createElement(DropList, _extends({
14
+ onDroplistRef: setOutsideClickTargetRef
15
+ }, props));
16
+ };
17
+ var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropListWithOutsideClickTargetRef);
11
18
  export var DropdownMenu = function DropdownMenu(_ref) {
12
19
  var items = _ref.items,
13
20
  section = _ref.section,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "7.29.4",
3
+ "version": "7.29.6",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,22 +28,22 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@atlaskit/adf-schema": "^42.3.1",
31
- "@atlaskit/button": "^20.2.0",
31
+ "@atlaskit/button": "^20.3.0",
32
32
  "@atlaskit/custom-steps": "^0.8.0",
33
- "@atlaskit/editor-common": "^94.0.0",
34
- "@atlaskit/editor-palette": "1.6.1",
33
+ "@atlaskit/editor-common": "^94.5.0",
34
+ "@atlaskit/editor-palette": "1.6.3",
35
35
  "@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.10.0",
37
- "@atlaskit/editor-plugin-batch-attribute-updates": "1.1.2",
37
+ "@atlaskit/editor-plugin-batch-attribute-updates": "1.1.3",
38
38
  "@atlaskit/editor-plugin-content-insertion": "^1.9.0",
39
39
  "@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
40
40
  "@atlaskit/editor-plugin-guideline": "^1.2.0",
41
41
  "@atlaskit/editor-plugin-selection": "^1.5.0",
42
42
  "@atlaskit/editor-plugin-width": "^1.3.0",
43
43
  "@atlaskit/editor-prosemirror": "6.0.0",
44
- "@atlaskit/editor-shared-styles": "^3.0.0",
44
+ "@atlaskit/editor-shared-styles": "^3.1.0",
45
45
  "@atlaskit/editor-tables": "^2.8.0",
46
- "@atlaskit/icon": "^22.23.0",
46
+ "@atlaskit/icon": "^22.24.0",
47
47
  "@atlaskit/menu": "^2.13.0",
48
48
  "@atlaskit/platform-feature-flags": "^0.3.0",
49
49
  "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
@@ -51,7 +51,7 @@
51
51
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
52
52
  "@atlaskit/primitives": "^12.2.0",
53
53
  "@atlaskit/theme": "^14.0.0",
54
- "@atlaskit/tmp-editor-statsig": "^2.7.0",
54
+ "@atlaskit/tmp-editor-statsig": "^2.10.0",
55
55
  "@atlaskit/toggle": "^13.4.0",
56
56
  "@atlaskit/tokens": "^2.0.0",
57
57
  "@atlaskit/tooltip": "^18.8.0",
@@ -5,12 +5,6 @@
5
5
  */
6
6
 
7
7
  import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
8
- import {
9
- ACTION,
10
- ACTION_SUBJECT,
11
- ACTION_SUBJECT_ID,
12
- EVENT_TYPE,
13
- } from '@atlaskit/editor-common/analytics';
14
8
  import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
15
9
  import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
16
10
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
@@ -21,7 +15,6 @@ import {
21
15
  akEditorFullWidthLayoutWidth,
22
16
  akEditorWideLayoutWidth,
23
17
  } from '@atlaskit/editor-shared-styles';
24
- import { findTable } from '@atlaskit/editor-tables/utils';
25
18
 
26
19
  import { ALIGN_START } from '../utils/alignment';
27
20
 
@@ -79,27 +72,6 @@ const createPlugin = (
79
72
  },
80
73
  },
81
74
  appendTransaction: (transactions, oldState, newState) => {
82
- // do not fire select table analytics events when a table is being created or deleted
83
- const selectedTableOldState = findTable(oldState.selection);
84
- const selectedTableNewState = findTable(newState.selection);
85
-
86
- /**
87
- * Select table event
88
- * condition: 1
89
- * When users selection changes to table
90
- */
91
- if (!selectedTableOldState && selectedTableNewState) {
92
- dispatchAnalyticsEvent({
93
- action: ACTION.SELECTED,
94
- actionSubject: ACTION_SUBJECT.DOCUMENT,
95
- actionSubjectId: ACTION_SUBJECT_ID.TABLE,
96
- eventType: EVENT_TYPE.TRACK,
97
- attributes: {
98
- localId: selectedTableNewState.node.attrs.localId || '',
99
- },
100
- });
101
- }
102
-
103
75
  // When document first load in Confluence, initially it is an empty document
104
76
  // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
105
77
  // what we need to do is to add width attr to all tables in the real document
@@ -142,23 +114,6 @@ const createPlugin = (
142
114
  const { table } = newState.schema.nodes;
143
115
  const tr = newState.tr;
144
116
 
145
- /**
146
- * Select table event
147
- * condition: 2
148
- * Users selection defaults to table, if first node
149
- */
150
- if (selectedTableOldState) {
151
- dispatchAnalyticsEvent({
152
- action: ACTION.SELECTED,
153
- actionSubject: ACTION_SUBJECT.DOCUMENT,
154
- actionSubjectId: ACTION_SUBJECT_ID.TABLE,
155
- eventType: EVENT_TYPE.TRACK,
156
- attributes: {
157
- localId: selectedTableOldState.node.attrs.localId || '',
158
- },
159
- });
160
- }
161
-
162
117
  if (isReplaceDocumentOperation && !isCommentEditor) {
163
118
  newState.doc.forEach((node, offset) => {
164
119
  if (node.type === table) {
@@ -1,20 +1,29 @@
1
1
  /* eslint-disable @atlaskit/design-system/prefer-primitives */
2
2
  import React, { useState } from 'react';
3
3
 
4
- import { DropList, Popup } from '@atlaskit/editor-common/ui';
4
+ import { DropList, type DropListProps, Popup } from '@atlaskit/editor-common/ui';
5
5
  import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
6
6
  import {
7
7
  ArrowKeyNavigationProvider,
8
8
  ArrowKeyNavigationType,
9
9
  DropdownMenuItem,
10
10
  } from '@atlaskit/editor-common/ui-menu';
11
- import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
11
+ import {
12
+ OutsideClickTargetRefContext,
13
+ withReactEditorViewOuterListeners,
14
+ } from '@atlaskit/editor-common/ui-react';
12
15
  import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
13
16
  import { MenuGroup, Section } from '@atlaskit/menu';
14
17
 
15
18
  import { dragMenuDropdownWidth } from '../consts';
16
19
 
17
- const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
20
+ const DropListWithOutsideClickTargetRef = (props: DropListProps) => {
21
+ const setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
22
+ return <DropList onDroplistRef={setOutsideClickTargetRef} {...props} />;
23
+ };
24
+ const DropListWithOutsideListeners = withReactEditorViewOuterListeners(
25
+ DropListWithOutsideClickTargetRef,
26
+ );
18
27
 
19
28
  type DropdownMenuProps = {
20
29
  items: Array<{