@atlaskit/editor-plugin-table 10.11.6 → 10.11.7
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,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 10.11.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#164047](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164047)
|
|
8
|
+
[`823d00b1d1429`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/823d00b1d1429) -
|
|
9
|
+
ED-27604: Fixed table drag menu flickers when hover background color menu
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 10.11.6
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -14,6 +14,7 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
|
|
|
14
14
|
var _uiReact = require("@atlaskit/editor-common/ui-react");
|
|
15
15
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
16
16
|
var _menu = require("@atlaskit/menu");
|
|
17
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
18
|
var _consts = require("../consts");
|
|
18
19
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
19
20
|
/* eslint-disable @atlaskit/design-system/prefer-primitives */
|
|
@@ -32,7 +33,7 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
|
|
|
32
33
|
section = _ref.section,
|
|
33
34
|
disableKeyboardHandling = _ref.disableKeyboardHandling,
|
|
34
35
|
onItemActivated = _ref.onItemActivated,
|
|
35
|
-
|
|
36
|
+
handleClose = _ref.handleClose,
|
|
36
37
|
onMouseEnter = _ref.onMouseEnter,
|
|
37
38
|
onMouseLeave = _ref.onMouseLeave,
|
|
38
39
|
fitWidth = _ref.fitWidth,
|
|
@@ -62,11 +63,11 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
|
|
|
62
63
|
shouldFitContainer: true,
|
|
63
64
|
position: popupPlacement.join(' '),
|
|
64
65
|
handleClickOutside: function handleClickOutside() {
|
|
65
|
-
return
|
|
66
|
+
return handleClose('editor');
|
|
66
67
|
},
|
|
67
68
|
handleEscapeKeydown: function handleEscapeKeydown() {
|
|
68
69
|
if (!disableKeyboardHandling) {
|
|
69
|
-
|
|
70
|
+
handleClose('handle');
|
|
70
71
|
}
|
|
71
72
|
},
|
|
72
73
|
handleEnterKeydown: function handleEnterKeydown(e) {
|
|
@@ -104,6 +105,51 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
|
|
|
104
105
|
}));
|
|
105
106
|
})));
|
|
106
107
|
};
|
|
108
|
+
var onClose = (0, _react.useCallback)(function () {
|
|
109
|
+
return handleClose('handle');
|
|
110
|
+
}, [handleClose]);
|
|
111
|
+
var onSelection = (0, _react.useCallback)(function (index) {
|
|
112
|
+
var results = items.flatMap(function (item) {
|
|
113
|
+
return 'items' in item ? item.items : item;
|
|
114
|
+
});
|
|
115
|
+
|
|
116
|
+
// onSelection is called when any focusable element is 'activated'
|
|
117
|
+
// this is an issue as some menu items have toggles, which cause the index value
|
|
118
|
+
// in the callback to be outside of array length.
|
|
119
|
+
// The logic below normalises the index value based on the number
|
|
120
|
+
// of menu items with 2 focusable elements, and adjusts the index to ensure
|
|
121
|
+
// the correct menu item is sent in onItemActivated callback
|
|
122
|
+
var keys = ['row_numbers', 'header_row', 'header_column'];
|
|
123
|
+
var doubleItemCount = 0;
|
|
124
|
+
var firstIndex = results.findIndex(function (value) {
|
|
125
|
+
var key = value.key;
|
|
126
|
+
return key !== undefined && keys.includes(key);
|
|
127
|
+
});
|
|
128
|
+
if (firstIndex === -1 || index <= firstIndex) {
|
|
129
|
+
onItemActivated && onItemActivated({
|
|
130
|
+
item: results[index]
|
|
131
|
+
});
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
for (var i = firstIndex; i < results.length; i += 1) {
|
|
135
|
+
var key = results[i].key;
|
|
136
|
+
if (key !== undefined && keys.includes(key)) {
|
|
137
|
+
doubleItemCount += 1;
|
|
138
|
+
}
|
|
139
|
+
if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
|
|
140
|
+
onItemActivated && onItemActivated({
|
|
141
|
+
item: results[i]
|
|
142
|
+
});
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
|
|
146
|
+
onItemActivated && onItemActivated({
|
|
147
|
+
item: results[i]
|
|
148
|
+
});
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}, [items, onItemActivated]);
|
|
107
153
|
return (
|
|
108
154
|
/*#__PURE__*/
|
|
109
155
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -128,57 +174,23 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
|
|
|
128
174
|
zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
|
|
129
175
|
offset: [offsetX, offsetY],
|
|
130
176
|
allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
|
|
131
|
-
},
|
|
177
|
+
}, (0, _platformFeatureFlags.fg)('platform_editor_table_drag_menu_flickers_fix') ? /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
|
|
178
|
+
closeOnTab: !disableKeyboardHandling,
|
|
179
|
+
type: _uiMenu.ArrowKeyNavigationType.MENU,
|
|
180
|
+
handleClose: onClose,
|
|
181
|
+
onSelection: onSelection
|
|
182
|
+
// disableKeyboardHandling is linked with isSubmenuOpen in DragMenu
|
|
183
|
+
// When isSubmenuOpen is true, the background color picker palette is open, and the picker is a ColorPaletteArrowKeyNavigationProvider
|
|
184
|
+
// At the same time the MenuArrowKeyNavigationProvider are renderer too, as it is the wrapper for all other DragMenu items
|
|
185
|
+
// In this case we want the ColorPaletteArrowKeyNavigationProvider to handle the keyboard event, not the MenuArrowKeyNavigationProvider
|
|
186
|
+
// Hence set disableArrowKeyNavigation to true when disableKeyboardHandling is true
|
|
187
|
+
,
|
|
188
|
+
disableArrowKeyNavigation: disableKeyboardHandling
|
|
189
|
+
}, innerMenu()) : disableKeyboardHandling ? innerMenu() : /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
|
|
132
190
|
closeOnTab: true,
|
|
133
191
|
type: _uiMenu.ArrowKeyNavigationType.MENU,
|
|
134
|
-
handleClose:
|
|
135
|
-
|
|
136
|
-
},
|
|
137
|
-
onSelection: function onSelection(index) {
|
|
138
|
-
var results = items.flatMap(function (item) {
|
|
139
|
-
return 'items' in item ? item.items : item;
|
|
140
|
-
});
|
|
141
|
-
|
|
142
|
-
// onSelection is called when any focusable element is 'activated'
|
|
143
|
-
// this is an issue as some menu items have toggles, which cause the index value
|
|
144
|
-
// in the callback to be outside of array length.
|
|
145
|
-
// The logic below normalises the index value based on the number
|
|
146
|
-
// of menu items with 2 focusable elements, and adjusts the index to ensure
|
|
147
|
-
// the correct menu item is sent in onItemActivated callback
|
|
148
|
-
var keys = ['row_numbers', 'header_row', 'header_column'];
|
|
149
|
-
var doubleItemCount = 0;
|
|
150
|
-
|
|
151
|
-
// Ignored via go/ees005
|
|
152
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
153
|
-
var firstIndex = results.findIndex(function (value) {
|
|
154
|
-
return keys.includes(value.key);
|
|
155
|
-
});
|
|
156
|
-
if (firstIndex === -1 || index <= firstIndex) {
|
|
157
|
-
onItemActivated && onItemActivated({
|
|
158
|
-
item: results[index]
|
|
159
|
-
});
|
|
160
|
-
return;
|
|
161
|
-
}
|
|
162
|
-
for (var i = firstIndex; i < results.length; i += 1) {
|
|
163
|
-
// Ignored via go/ees005
|
|
164
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
165
|
-
if (keys.includes(results[i].key)) {
|
|
166
|
-
doubleItemCount += 1;
|
|
167
|
-
}
|
|
168
|
-
if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
|
|
169
|
-
onItemActivated && onItemActivated({
|
|
170
|
-
item: results[i]
|
|
171
|
-
});
|
|
172
|
-
return;
|
|
173
|
-
}
|
|
174
|
-
if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
|
|
175
|
-
onItemActivated && onItemActivated({
|
|
176
|
-
item: results[i]
|
|
177
|
-
});
|
|
178
|
-
return;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
}
|
|
192
|
+
handleClose: onClose,
|
|
193
|
+
onSelection: onSelection
|
|
182
194
|
}, innerMenu())))
|
|
183
195
|
);
|
|
184
196
|
};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
/* eslint-disable @atlaskit/design-system/prefer-primitives */
|
|
3
|
-
import React, { useState } from 'react';
|
|
3
|
+
import React, { useCallback, useState } from 'react';
|
|
4
4
|
import { DropList, Popup } from '@atlaskit/editor-common/ui';
|
|
5
5
|
import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem } from '@atlaskit/editor-common/ui-menu';
|
|
6
6
|
import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
|
|
7
7
|
import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
|
|
8
8
|
import { MenuGroup, Section } from '@atlaskit/menu';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
10
|
import { dragMenuDropdownWidth } from '../consts';
|
|
10
11
|
const DropListWithOutsideClickTargetRef = props => {
|
|
11
12
|
const setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
|
|
@@ -84,6 +85,47 @@ export const DropdownMenu = ({
|
|
|
84
85
|
});
|
|
85
86
|
})))));
|
|
86
87
|
};
|
|
88
|
+
const onClose = useCallback(() => handleClose('handle'), [handleClose]);
|
|
89
|
+
const onSelection = useCallback(index => {
|
|
90
|
+
const results = items.flatMap(item => 'items' in item ? item.items : item);
|
|
91
|
+
|
|
92
|
+
// onSelection is called when any focusable element is 'activated'
|
|
93
|
+
// this is an issue as some menu items have toggles, which cause the index value
|
|
94
|
+
// in the callback to be outside of array length.
|
|
95
|
+
// The logic below normalises the index value based on the number
|
|
96
|
+
// of menu items with 2 focusable elements, and adjusts the index to ensure
|
|
97
|
+
// the correct menu item is sent in onItemActivated callback
|
|
98
|
+
const keys = ['row_numbers', 'header_row', 'header_column'];
|
|
99
|
+
let doubleItemCount = 0;
|
|
100
|
+
const firstIndex = results.findIndex(value => {
|
|
101
|
+
const key = value.key;
|
|
102
|
+
return key !== undefined && keys.includes(key);
|
|
103
|
+
});
|
|
104
|
+
if (firstIndex === -1 || index <= firstIndex) {
|
|
105
|
+
onItemActivated && onItemActivated({
|
|
106
|
+
item: results[index]
|
|
107
|
+
});
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
for (let i = firstIndex; i < results.length; i += 1) {
|
|
111
|
+
const key = results[i].key;
|
|
112
|
+
if (key !== undefined && keys.includes(key)) {
|
|
113
|
+
doubleItemCount += 1;
|
|
114
|
+
}
|
|
115
|
+
if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
|
|
116
|
+
onItemActivated && onItemActivated({
|
|
117
|
+
item: results[i]
|
|
118
|
+
});
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
|
|
122
|
+
onItemActivated && onItemActivated({
|
|
123
|
+
item: results[i]
|
|
124
|
+
});
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}, [items, onItemActivated]);
|
|
87
129
|
return (
|
|
88
130
|
/*#__PURE__*/
|
|
89
131
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -108,51 +150,23 @@ export const DropdownMenu = ({
|
|
|
108
150
|
zIndex: akEditorFloatingPanelZIndex,
|
|
109
151
|
offset: [offsetX, offsetY],
|
|
110
152
|
allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
|
|
111
|
-
},
|
|
153
|
+
}, fg('platform_editor_table_drag_menu_flickers_fix') ? /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
|
|
154
|
+
closeOnTab: !disableKeyboardHandling,
|
|
155
|
+
type: ArrowKeyNavigationType.MENU,
|
|
156
|
+
handleClose: onClose,
|
|
157
|
+
onSelection: onSelection
|
|
158
|
+
// disableKeyboardHandling is linked with isSubmenuOpen in DragMenu
|
|
159
|
+
// When isSubmenuOpen is true, the background color picker palette is open, and the picker is a ColorPaletteArrowKeyNavigationProvider
|
|
160
|
+
// At the same time the MenuArrowKeyNavigationProvider are renderer too, as it is the wrapper for all other DragMenu items
|
|
161
|
+
// In this case we want the ColorPaletteArrowKeyNavigationProvider to handle the keyboard event, not the MenuArrowKeyNavigationProvider
|
|
162
|
+
// Hence set disableArrowKeyNavigation to true when disableKeyboardHandling is true
|
|
163
|
+
,
|
|
164
|
+
disableArrowKeyNavigation: disableKeyboardHandling
|
|
165
|
+
}, innerMenu()) : disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
|
|
112
166
|
closeOnTab: true,
|
|
113
167
|
type: ArrowKeyNavigationType.MENU,
|
|
114
|
-
handleClose:
|
|
115
|
-
onSelection:
|
|
116
|
-
const results = items.flatMap(item => 'items' in item ? item.items : item);
|
|
117
|
-
|
|
118
|
-
// onSelection is called when any focusable element is 'activated'
|
|
119
|
-
// this is an issue as some menu items have toggles, which cause the index value
|
|
120
|
-
// in the callback to be outside of array length.
|
|
121
|
-
// The logic below normalises the index value based on the number
|
|
122
|
-
// of menu items with 2 focusable elements, and adjusts the index to ensure
|
|
123
|
-
// the correct menu item is sent in onItemActivated callback
|
|
124
|
-
const keys = ['row_numbers', 'header_row', 'header_column'];
|
|
125
|
-
let doubleItemCount = 0;
|
|
126
|
-
|
|
127
|
-
// Ignored via go/ees005
|
|
128
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
129
|
-
const firstIndex = results.findIndex(value => keys.includes(value.key));
|
|
130
|
-
if (firstIndex === -1 || index <= firstIndex) {
|
|
131
|
-
onItemActivated && onItemActivated({
|
|
132
|
-
item: results[index]
|
|
133
|
-
});
|
|
134
|
-
return;
|
|
135
|
-
}
|
|
136
|
-
for (let i = firstIndex; i < results.length; i += 1) {
|
|
137
|
-
// Ignored via go/ees005
|
|
138
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
139
|
-
if (keys.includes(results[i].key)) {
|
|
140
|
-
doubleItemCount += 1;
|
|
141
|
-
}
|
|
142
|
-
if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
|
|
143
|
-
onItemActivated && onItemActivated({
|
|
144
|
-
item: results[i]
|
|
145
|
-
});
|
|
146
|
-
return;
|
|
147
|
-
}
|
|
148
|
-
if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
|
|
149
|
-
onItemActivated && onItemActivated({
|
|
150
|
-
item: results[i]
|
|
151
|
-
});
|
|
152
|
-
return;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
}
|
|
168
|
+
handleClose: onClose,
|
|
169
|
+
onSelection: onSelection
|
|
156
170
|
}, innerMenu())))
|
|
157
171
|
);
|
|
158
172
|
};
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
/* eslint-disable @atlaskit/design-system/prefer-primitives */
|
|
4
|
-
import React, { useState } from 'react';
|
|
4
|
+
import React, { useCallback, useState } from 'react';
|
|
5
5
|
import { DropList, Popup } from '@atlaskit/editor-common/ui';
|
|
6
6
|
import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem } from '@atlaskit/editor-common/ui-menu';
|
|
7
7
|
import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
|
|
8
8
|
import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
|
|
9
9
|
import { MenuGroup, Section } from '@atlaskit/menu';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { dragMenuDropdownWidth } from '../consts';
|
|
11
12
|
var DropListWithOutsideClickTargetRef = function DropListWithOutsideClickTargetRef(props) {
|
|
12
13
|
var setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
|
|
@@ -22,7 +23,7 @@ export var DropdownMenu = function DropdownMenu(_ref) {
|
|
|
22
23
|
section = _ref.section,
|
|
23
24
|
disableKeyboardHandling = _ref.disableKeyboardHandling,
|
|
24
25
|
onItemActivated = _ref.onItemActivated,
|
|
25
|
-
|
|
26
|
+
handleClose = _ref.handleClose,
|
|
26
27
|
onMouseEnter = _ref.onMouseEnter,
|
|
27
28
|
onMouseLeave = _ref.onMouseLeave,
|
|
28
29
|
fitWidth = _ref.fitWidth,
|
|
@@ -52,11 +53,11 @@ export var DropdownMenu = function DropdownMenu(_ref) {
|
|
|
52
53
|
shouldFitContainer: true,
|
|
53
54
|
position: popupPlacement.join(' '),
|
|
54
55
|
handleClickOutside: function handleClickOutside() {
|
|
55
|
-
return
|
|
56
|
+
return handleClose('editor');
|
|
56
57
|
},
|
|
57
58
|
handleEscapeKeydown: function handleEscapeKeydown() {
|
|
58
59
|
if (!disableKeyboardHandling) {
|
|
59
|
-
|
|
60
|
+
handleClose('handle');
|
|
60
61
|
}
|
|
61
62
|
},
|
|
62
63
|
handleEnterKeydown: function handleEnterKeydown(e) {
|
|
@@ -94,6 +95,51 @@ export var DropdownMenu = function DropdownMenu(_ref) {
|
|
|
94
95
|
}));
|
|
95
96
|
})));
|
|
96
97
|
};
|
|
98
|
+
var onClose = useCallback(function () {
|
|
99
|
+
return handleClose('handle');
|
|
100
|
+
}, [handleClose]);
|
|
101
|
+
var onSelection = useCallback(function (index) {
|
|
102
|
+
var results = items.flatMap(function (item) {
|
|
103
|
+
return 'items' in item ? item.items : item;
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
// onSelection is called when any focusable element is 'activated'
|
|
107
|
+
// this is an issue as some menu items have toggles, which cause the index value
|
|
108
|
+
// in the callback to be outside of array length.
|
|
109
|
+
// The logic below normalises the index value based on the number
|
|
110
|
+
// of menu items with 2 focusable elements, and adjusts the index to ensure
|
|
111
|
+
// the correct menu item is sent in onItemActivated callback
|
|
112
|
+
var keys = ['row_numbers', 'header_row', 'header_column'];
|
|
113
|
+
var doubleItemCount = 0;
|
|
114
|
+
var firstIndex = results.findIndex(function (value) {
|
|
115
|
+
var key = value.key;
|
|
116
|
+
return key !== undefined && keys.includes(key);
|
|
117
|
+
});
|
|
118
|
+
if (firstIndex === -1 || index <= firstIndex) {
|
|
119
|
+
onItemActivated && onItemActivated({
|
|
120
|
+
item: results[index]
|
|
121
|
+
});
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
for (var i = firstIndex; i < results.length; i += 1) {
|
|
125
|
+
var key = results[i].key;
|
|
126
|
+
if (key !== undefined && keys.includes(key)) {
|
|
127
|
+
doubleItemCount += 1;
|
|
128
|
+
}
|
|
129
|
+
if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
|
|
130
|
+
onItemActivated && onItemActivated({
|
|
131
|
+
item: results[i]
|
|
132
|
+
});
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
|
|
136
|
+
onItemActivated && onItemActivated({
|
|
137
|
+
item: results[i]
|
|
138
|
+
});
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}, [items, onItemActivated]);
|
|
97
143
|
return (
|
|
98
144
|
/*#__PURE__*/
|
|
99
145
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -118,57 +164,23 @@ export var DropdownMenu = function DropdownMenu(_ref) {
|
|
|
118
164
|
zIndex: akEditorFloatingPanelZIndex,
|
|
119
165
|
offset: [offsetX, offsetY],
|
|
120
166
|
allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
|
|
121
|
-
},
|
|
167
|
+
}, fg('platform_editor_table_drag_menu_flickers_fix') ? /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
|
|
168
|
+
closeOnTab: !disableKeyboardHandling,
|
|
169
|
+
type: ArrowKeyNavigationType.MENU,
|
|
170
|
+
handleClose: onClose,
|
|
171
|
+
onSelection: onSelection
|
|
172
|
+
// disableKeyboardHandling is linked with isSubmenuOpen in DragMenu
|
|
173
|
+
// When isSubmenuOpen is true, the background color picker palette is open, and the picker is a ColorPaletteArrowKeyNavigationProvider
|
|
174
|
+
// At the same time the MenuArrowKeyNavigationProvider are renderer too, as it is the wrapper for all other DragMenu items
|
|
175
|
+
// In this case we want the ColorPaletteArrowKeyNavigationProvider to handle the keyboard event, not the MenuArrowKeyNavigationProvider
|
|
176
|
+
// Hence set disableArrowKeyNavigation to true when disableKeyboardHandling is true
|
|
177
|
+
,
|
|
178
|
+
disableArrowKeyNavigation: disableKeyboardHandling
|
|
179
|
+
}, innerMenu()) : disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
|
|
122
180
|
closeOnTab: true,
|
|
123
181
|
type: ArrowKeyNavigationType.MENU,
|
|
124
|
-
handleClose:
|
|
125
|
-
|
|
126
|
-
},
|
|
127
|
-
onSelection: function onSelection(index) {
|
|
128
|
-
var results = items.flatMap(function (item) {
|
|
129
|
-
return 'items' in item ? item.items : item;
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
// onSelection is called when any focusable element is 'activated'
|
|
133
|
-
// this is an issue as some menu items have toggles, which cause the index value
|
|
134
|
-
// in the callback to be outside of array length.
|
|
135
|
-
// The logic below normalises the index value based on the number
|
|
136
|
-
// of menu items with 2 focusable elements, and adjusts the index to ensure
|
|
137
|
-
// the correct menu item is sent in onItemActivated callback
|
|
138
|
-
var keys = ['row_numbers', 'header_row', 'header_column'];
|
|
139
|
-
var doubleItemCount = 0;
|
|
140
|
-
|
|
141
|
-
// Ignored via go/ees005
|
|
142
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
143
|
-
var firstIndex = results.findIndex(function (value) {
|
|
144
|
-
return keys.includes(value.key);
|
|
145
|
-
});
|
|
146
|
-
if (firstIndex === -1 || index <= firstIndex) {
|
|
147
|
-
onItemActivated && onItemActivated({
|
|
148
|
-
item: results[index]
|
|
149
|
-
});
|
|
150
|
-
return;
|
|
151
|
-
}
|
|
152
|
-
for (var i = firstIndex; i < results.length; i += 1) {
|
|
153
|
-
// Ignored via go/ees005
|
|
154
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
155
|
-
if (keys.includes(results[i].key)) {
|
|
156
|
-
doubleItemCount += 1;
|
|
157
|
-
}
|
|
158
|
-
if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
|
|
159
|
-
onItemActivated && onItemActivated({
|
|
160
|
-
item: results[i]
|
|
161
|
-
});
|
|
162
|
-
return;
|
|
163
|
-
}
|
|
164
|
-
if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
|
|
165
|
-
onItemActivated && onItemActivated({
|
|
166
|
-
item: results[i]
|
|
167
|
-
});
|
|
168
|
-
return;
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
}
|
|
182
|
+
handleClose: onClose,
|
|
183
|
+
onSelection: onSelection
|
|
172
184
|
}, innerMenu())))
|
|
173
185
|
);
|
|
174
186
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "10.11.
|
|
3
|
+
"version": "10.11.7",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
|
|
40
40
|
"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
|
|
41
41
|
"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
|
|
42
|
-
"@atlaskit/editor-plugin-extension": "5.5.
|
|
42
|
+
"@atlaskit/editor-plugin-extension": "5.5.2",
|
|
43
43
|
"@atlaskit/editor-plugin-guideline": "^2.0.0",
|
|
44
|
-
"@atlaskit/editor-plugin-interaction": "^
|
|
44
|
+
"@atlaskit/editor-plugin-interaction": "^2.0.0",
|
|
45
45
|
"@atlaskit/editor-plugin-selection": "^2.2.0",
|
|
46
46
|
"@atlaskit/editor-plugin-width": "^3.0.0",
|
|
47
47
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"@atlaskit/theme": "^18.0.0",
|
|
58
58
|
"@atlaskit/tmp-editor-statsig": "^5.7.0",
|
|
59
59
|
"@atlaskit/toggle": "^15.0.0",
|
|
60
|
-
"@atlaskit/tokens": "^
|
|
60
|
+
"@atlaskit/tokens": "^5.0.0",
|
|
61
61
|
"@atlaskit/tooltip": "^20.2.0",
|
|
62
62
|
"@babel/runtime": "^7.0.0",
|
|
63
63
|
"@emotion/react": "^11.7.1",
|
|
@@ -202,6 +202,9 @@
|
|
|
202
202
|
"platform_editor_fix_table_resizing_undo": {
|
|
203
203
|
"type": "boolean"
|
|
204
204
|
},
|
|
205
|
+
"platform_editor_table_drag_menu_flickers_fix": {
|
|
206
|
+
"type": "boolean"
|
|
207
|
+
},
|
|
205
208
|
"platform_editor_table_last_col_drag_handle_fix": {
|
|
206
209
|
"type": "boolean"
|
|
207
210
|
},
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* eslint-disable @atlaskit/design-system/prefer-primitives */
|
|
2
|
-
import React, { useState } from 'react';
|
|
2
|
+
import React, { useCallback, useState } from 'react';
|
|
3
3
|
|
|
4
4
|
import { DropList, type DropListProps, Popup } from '@atlaskit/editor-common/ui';
|
|
5
5
|
import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
|
|
@@ -14,6 +14,7 @@ import {
|
|
|
14
14
|
} from '@atlaskit/editor-common/ui-react';
|
|
15
15
|
import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
|
|
16
16
|
import { MenuGroup, Section } from '@atlaskit/menu';
|
|
17
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
18
|
|
|
18
19
|
import { dragMenuDropdownWidth } from '../consts';
|
|
19
20
|
|
|
@@ -123,6 +124,49 @@ export const DropdownMenu = ({
|
|
|
123
124
|
);
|
|
124
125
|
};
|
|
125
126
|
|
|
127
|
+
const onClose = useCallback(() => handleClose('handle'), [handleClose]);
|
|
128
|
+
const onSelection = useCallback(
|
|
129
|
+
(index: number) => {
|
|
130
|
+
const results = items.flatMap((item) => ('items' in item ? item.items : item));
|
|
131
|
+
|
|
132
|
+
// onSelection is called when any focusable element is 'activated'
|
|
133
|
+
// this is an issue as some menu items have toggles, which cause the index value
|
|
134
|
+
// in the callback to be outside of array length.
|
|
135
|
+
// The logic below normalises the index value based on the number
|
|
136
|
+
// of menu items with 2 focusable elements, and adjusts the index to ensure
|
|
137
|
+
// the correct menu item is sent in onItemActivated callback
|
|
138
|
+
const keys = ['row_numbers', 'header_row', 'header_column'];
|
|
139
|
+
let doubleItemCount = 0;
|
|
140
|
+
|
|
141
|
+
const firstIndex = results.findIndex((value) => {
|
|
142
|
+
const key = value.key;
|
|
143
|
+
return key !== undefined && keys.includes(key);
|
|
144
|
+
});
|
|
145
|
+
|
|
146
|
+
if (firstIndex === -1 || index <= firstIndex) {
|
|
147
|
+
onItemActivated && onItemActivated({ item: results[index] });
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
for (let i = firstIndex; i < results.length; i += 1) {
|
|
152
|
+
const key = results[i].key;
|
|
153
|
+
if (key !== undefined && keys.includes(key)) {
|
|
154
|
+
doubleItemCount += 1;
|
|
155
|
+
}
|
|
156
|
+
if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
|
|
157
|
+
onItemActivated && onItemActivated({ item: results[i] });
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
|
|
162
|
+
onItemActivated && onItemActivated({ item: results[i] });
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
[items, onItemActivated],
|
|
168
|
+
);
|
|
169
|
+
|
|
126
170
|
return (
|
|
127
171
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
128
172
|
<div className="drag-dropdown-menu-wrapper">
|
|
@@ -144,51 +188,29 @@ export const DropdownMenu = ({
|
|
|
144
188
|
offset={[offsetX, offsetY]}
|
|
145
189
|
allowOutOfBounds // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
|
|
146
190
|
>
|
|
147
|
-
{
|
|
191
|
+
{fg('platform_editor_table_drag_menu_flickers_fix') ? (
|
|
192
|
+
<ArrowKeyNavigationProvider
|
|
193
|
+
closeOnTab={!disableKeyboardHandling}
|
|
194
|
+
type={ArrowKeyNavigationType.MENU}
|
|
195
|
+
handleClose={onClose}
|
|
196
|
+
onSelection={onSelection}
|
|
197
|
+
// disableKeyboardHandling is linked with isSubmenuOpen in DragMenu
|
|
198
|
+
// When isSubmenuOpen is true, the background color picker palette is open, and the picker is a ColorPaletteArrowKeyNavigationProvider
|
|
199
|
+
// At the same time the MenuArrowKeyNavigationProvider are renderer too, as it is the wrapper for all other DragMenu items
|
|
200
|
+
// In this case we want the ColorPaletteArrowKeyNavigationProvider to handle the keyboard event, not the MenuArrowKeyNavigationProvider
|
|
201
|
+
// Hence set disableArrowKeyNavigation to true when disableKeyboardHandling is true
|
|
202
|
+
disableArrowKeyNavigation={disableKeyboardHandling}
|
|
203
|
+
>
|
|
204
|
+
{innerMenu()}
|
|
205
|
+
</ArrowKeyNavigationProvider>
|
|
206
|
+
) : disableKeyboardHandling ? (
|
|
148
207
|
innerMenu()
|
|
149
208
|
) : (
|
|
150
209
|
<ArrowKeyNavigationProvider
|
|
151
210
|
closeOnTab
|
|
152
211
|
type={ArrowKeyNavigationType.MENU}
|
|
153
|
-
handleClose={
|
|
154
|
-
onSelection={
|
|
155
|
-
const results = items.flatMap((item) => ('items' in item ? item.items : item));
|
|
156
|
-
|
|
157
|
-
// onSelection is called when any focusable element is 'activated'
|
|
158
|
-
// this is an issue as some menu items have toggles, which cause the index value
|
|
159
|
-
// in the callback to be outside of array length.
|
|
160
|
-
// The logic below normalises the index value based on the number
|
|
161
|
-
// of menu items with 2 focusable elements, and adjusts the index to ensure
|
|
162
|
-
// the correct menu item is sent in onItemActivated callback
|
|
163
|
-
const keys = ['row_numbers', 'header_row', 'header_column'];
|
|
164
|
-
let doubleItemCount = 0;
|
|
165
|
-
|
|
166
|
-
// Ignored via go/ees005
|
|
167
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
168
|
-
const firstIndex = results.findIndex((value) => keys.includes(value.key!));
|
|
169
|
-
|
|
170
|
-
if (firstIndex === -1 || index <= firstIndex) {
|
|
171
|
-
onItemActivated && onItemActivated({ item: results[index] });
|
|
172
|
-
return;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
for (let i = firstIndex; i < results.length; i += 1) {
|
|
176
|
-
// Ignored via go/ees005
|
|
177
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
178
|
-
if (keys.includes(results[i].key!)) {
|
|
179
|
-
doubleItemCount += 1;
|
|
180
|
-
}
|
|
181
|
-
if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
|
|
182
|
-
onItemActivated && onItemActivated({ item: results[i] });
|
|
183
|
-
return;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
|
|
187
|
-
onItemActivated && onItemActivated({ item: results[i] });
|
|
188
|
-
return;
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
}}
|
|
212
|
+
handleClose={onClose}
|
|
213
|
+
onSelection={onSelection}
|
|
192
214
|
>
|
|
193
215
|
{innerMenu()}
|
|
194
216
|
</ArrowKeyNavigationProvider>
|