@atlaskit/editor-common 114.5.0 → 114.6.0
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 +14 -0
- package/dist/cjs/analytics/types/contextual-typeahead-events.js +5 -0
- package/dist/cjs/analytics/types/enums.js +1 -0
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/ui-menu/ColorPickerButton/index.js +55 -30
- package/dist/cjs/ui-menu/DropdownMenu/index.js +62 -46
- package/dist/cjs/ui-menu/ToolbarButton/styles.js +6 -2
- package/dist/es2019/analytics/types/contextual-typeahead-events.js +1 -0
- package/dist/es2019/analytics/types/enums.js +1 -0
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/ui-menu/ColorPickerButton/index.js +47 -28
- package/dist/es2019/ui-menu/DropdownMenu/index.js +50 -41
- package/dist/es2019/ui-menu/ToolbarButton/styles.js +6 -2
- package/dist/esm/analytics/types/contextual-typeahead-events.js +1 -0
- package/dist/esm/analytics/types/enums.js +1 -0
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/ui-menu/ColorPickerButton/index.js +53 -30
- package/dist/esm/ui-menu/DropdownMenu/index.js +63 -47
- package/dist/esm/ui-menu/ToolbarButton/styles.js +6 -2
- package/dist/types/analytics/types/contextual-typeahead-events.d.ts +6 -0
- package/dist/types/analytics/types/enums.d.ts +1 -0
- package/dist/types/analytics/types/events.d.ts +2 -1
- package/dist/types/ui-menu/DropdownMenu/index.d.ts +1 -0
- package/dist/types-ts4.5/analytics/types/contextual-typeahead-events.d.ts +6 -0
- package/dist/types-ts4.5/analytics/types/enums.d.ts +1 -0
- package/dist/types-ts4.5/analytics/types/events.d.ts +2 -1
- package/dist/types-ts4.5/ui-menu/DropdownMenu/index.d.ts +1 -0
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-common
|
|
2
2
|
|
|
3
|
+
## 114.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`d482d7a660905`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d482d7a660905) -
|
|
8
|
+
Perf-linting cleanup: fix performance linting violations in editor-common, gated behind
|
|
9
|
+
platform_editor_perf_lint_cleanup experiment
|
|
10
|
+
|
|
11
|
+
## 114.5.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 114.5.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
|
@@ -365,6 +365,7 @@ var ACTION_SUBJECT = exports.ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJ
|
|
|
365
365
|
ACTION_SUBJECT["AI_DEFINITIONS"] = "aiDefinitions";
|
|
366
366
|
ACTION_SUBJECT["AI_QUICK_PROMPT"] = "aiQuickPrompt";
|
|
367
367
|
ACTION_SUBJECT["AI_AUTOCOMPLETE"] = "aiAutocomplete";
|
|
368
|
+
ACTION_SUBJECT["CONTEXTUAL_TYPEAHEAD"] = "contextualTypeahead";
|
|
368
369
|
ACTION_SUBJECT["USER_PREFERENCES"] = "userPreferences";
|
|
369
370
|
ACTION_SUBJECT["ALIGNMENT"] = "alignment";
|
|
370
371
|
ACTION_SUBJECT["OFFLINE_EDITING"] = "offlineEditing";
|
|
@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
19
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); }
|
|
20
20
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
21
21
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
22
|
-
var packageVersion = "114.
|
|
22
|
+
var packageVersion = "114.5.1";
|
|
23
23
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
24
24
|
// Remove URL as it has UGC
|
|
25
25
|
// Ignored via go/ees007
|
|
@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
24
24
|
* @jsx jsx
|
|
25
25
|
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
26
26
|
var packageName = "@atlaskit/editor-common";
|
|
27
|
-
var packageVersion = "114.
|
|
27
|
+
var packageVersion = "114.5.1";
|
|
28
28
|
var halfFocusRing = 1;
|
|
29
29
|
var dropOffset = '0, 8';
|
|
30
30
|
var fadeIn = (0, _react2.keyframes)({
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.default = void 0;
|
|
8
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
-
var _react =
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
11
|
var _react2 = require("@emotion/react");
|
|
11
12
|
var _reactIntl = require("react-intl");
|
|
12
13
|
var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
|
|
@@ -15,6 +16,7 @@ var _new = _interopRequireDefault(require("@atlaskit/button/new"));
|
|
|
15
16
|
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
|
|
16
17
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
18
|
var _primitives = require("@atlaskit/primitives");
|
|
19
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
18
20
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
19
21
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
20
22
|
var _analytics = require("../../analytics");
|
|
@@ -24,6 +26,7 @@ var _uiReact = require("../../ui-react");
|
|
|
24
26
|
var _Popup = _interopRequireDefault(require("../../ui/Popup"));
|
|
25
27
|
var _ArrowKeyNavigationProvider = require("../ArrowKeyNavigationProvider");
|
|
26
28
|
var _types = require("../ArrowKeyNavigationProvider/types");
|
|
29
|
+
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); }
|
|
27
30
|
/**
|
|
28
31
|
* @jsxRuntime classic
|
|
29
32
|
* @jsx jsx
|
|
@@ -68,6 +71,7 @@ var colorPickerWrapper = function colorPickerWrapper() {
|
|
|
68
71
|
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
|
|
69
72
|
|
|
70
73
|
var ColorPaletteWithReactViewListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_uiColor.ColorPalette);
|
|
74
|
+
var COLOR_PICKER_POPUP_OFFSET = [0, 10];
|
|
71
75
|
var ColorPickerButton = function ColorPickerButton(props) {
|
|
72
76
|
var buttonRef = _react.default.useRef(null);
|
|
73
77
|
var _React$useState = _react.default.useState(false),
|
|
@@ -84,13 +88,54 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
84
88
|
setIsOpenedByKeyboard = _React$useState6[1];
|
|
85
89
|
var _useIntl = (0, _reactIntl.useIntl)(),
|
|
86
90
|
formatMessage = _useIntl.formatMessage;
|
|
87
|
-
var
|
|
91
|
+
var memoizedHandleClose = (0, _react.useCallback)(function () {
|
|
92
|
+
return setIsPopupOpen(false);
|
|
93
|
+
}, [setIsPopupOpen]);
|
|
94
|
+
var handleClose = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedHandleClose : function () {
|
|
95
|
+
return setIsPopupOpen(false);
|
|
96
|
+
};
|
|
97
|
+
var memoizedTogglePopup = (0, _react.useCallback)(function () {
|
|
98
|
+
setIsPopupOpen(function (prevIsOpen) {
|
|
99
|
+
if (!prevIsOpen) {
|
|
100
|
+
setIsOpenedByKeyboard(false);
|
|
101
|
+
setIsPopupPositioned(false);
|
|
102
|
+
}
|
|
103
|
+
return !prevIsOpen;
|
|
104
|
+
});
|
|
105
|
+
}, []);
|
|
106
|
+
var togglePopup = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedTogglePopup : function () {
|
|
88
107
|
setIsPopupOpen(!isPopupOpen);
|
|
89
108
|
if (!isPopupOpen) {
|
|
90
109
|
setIsOpenedByKeyboard(false);
|
|
91
110
|
setIsPopupPositioned(false);
|
|
92
111
|
}
|
|
93
112
|
};
|
|
113
|
+
var memoizedOnKeyDown = (0, _react.useCallback)(function (event) {
|
|
114
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
115
|
+
event.preventDefault();
|
|
116
|
+
memoizedTogglePopup();
|
|
117
|
+
setIsOpenedByKeyboard(true);
|
|
118
|
+
}
|
|
119
|
+
}, [memoizedTogglePopup]);
|
|
120
|
+
var onKeyDown = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnKeyDown : function (event) {
|
|
121
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
122
|
+
event.preventDefault();
|
|
123
|
+
togglePopup();
|
|
124
|
+
setIsOpenedByKeyboard(true);
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
var memoizedPaletteOptions = (0, _react.useMemo)(function () {
|
|
128
|
+
return {
|
|
129
|
+
palette: props.colorPalette,
|
|
130
|
+
hexToPaletteColor: props.hexToPaletteColor,
|
|
131
|
+
paletteColorTooltipMessages: props.paletteColorTooltipMessages
|
|
132
|
+
};
|
|
133
|
+
}, [props.colorPalette, props.hexToPaletteColor, props.paletteColorTooltipMessages]);
|
|
134
|
+
var paletteOptions = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedPaletteOptions : {
|
|
135
|
+
palette: props.colorPalette,
|
|
136
|
+
hexToPaletteColor: props.hexToPaletteColor,
|
|
137
|
+
paletteColorTooltipMessages: props.paletteColorTooltipMessages
|
|
138
|
+
};
|
|
94
139
|
_react.default.useEffect(function () {
|
|
95
140
|
if (props.setDisableParentScroll) {
|
|
96
141
|
props.setDisableParentScroll(isPopupOpen);
|
|
@@ -156,10 +201,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
156
201
|
return (0, _react2.jsx)(_Popup.default, {
|
|
157
202
|
target: buttonRef.current,
|
|
158
203
|
fitHeight: 350,
|
|
159
|
-
fitWidth: 350
|
|
160
|
-
|
|
161
|
-
,
|
|
162
|
-
offset: [0, 10],
|
|
204
|
+
fitWidth: 350,
|
|
205
|
+
offset: (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? COLOR_PICKER_POPUP_OFFSET : [0, 10],
|
|
163
206
|
alignX: props.alignX,
|
|
164
207
|
mountTo: props.setDisableParentScroll ? props.mountPoint : undefined,
|
|
165
208
|
absoluteOffset: props.absoluteOffset
|
|
@@ -177,12 +220,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
177
220
|
type: _types.ArrowKeyNavigationType.COLOR,
|
|
178
221
|
selectedRowIndex: selectedRowIndex,
|
|
179
222
|
selectedColumnIndex: selectedColumnIndex,
|
|
180
|
-
closeOnTab: true
|
|
181
|
-
|
|
182
|
-
,
|
|
183
|
-
handleClose: function handleClose() {
|
|
184
|
-
return setIsPopupOpen(false);
|
|
185
|
-
},
|
|
223
|
+
closeOnTab: true,
|
|
224
|
+
handleClose: handleClose,
|
|
186
225
|
isOpenedByKeyboard: isOpenedByKeyboard,
|
|
187
226
|
isPopupPositioned: isPopupPositioned,
|
|
188
227
|
ignoreEscapeKey: props.returnEscToButton
|
|
@@ -191,14 +230,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
191
230
|
selectedColor: selectedColor,
|
|
192
231
|
onClick: onColorSelected,
|
|
193
232
|
handleClickOutside: togglePopup,
|
|
194
|
-
handleEscapeKeydown: handleEsc
|
|
195
|
-
|
|
196
|
-
,
|
|
197
|
-
paletteOptions: {
|
|
198
|
-
palette: props.colorPalette,
|
|
199
|
-
hexToPaletteColor: props.hexToPaletteColor,
|
|
200
|
-
paletteColorTooltipMessages: props.paletteColorTooltipMessages
|
|
201
|
-
}
|
|
233
|
+
handleEscapeKeydown: handleEsc,
|
|
234
|
+
paletteOptions: paletteOptions
|
|
202
235
|
}))));
|
|
203
236
|
};
|
|
204
237
|
var title = props.title || '';
|
|
@@ -241,16 +274,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
241
274
|
"aria-label": title,
|
|
242
275
|
"aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
|
|
243
276
|
spacing: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 'default' : 'compact',
|
|
244
|
-
onClick: togglePopup
|
|
245
|
-
|
|
246
|
-
,
|
|
247
|
-
onKeyDown: function onKeyDown(event) {
|
|
248
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
249
|
-
event.preventDefault();
|
|
250
|
-
togglePopup();
|
|
251
|
-
setIsOpenedByKeyboard(true);
|
|
252
|
-
}
|
|
253
|
-
},
|
|
277
|
+
onClick: togglePopup,
|
|
278
|
+
onKeyDown: onKeyDown,
|
|
254
279
|
"data-selected-color": props.currentColor,
|
|
255
280
|
isSelected: isPopupOpen
|
|
256
281
|
}, (0, _react2.jsx)(_primitives.Inline, {
|
|
@@ -133,6 +133,12 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
|
|
|
133
133
|
});
|
|
134
134
|
}
|
|
135
135
|
});
|
|
136
|
+
(0, _defineProperty2.default)(_this, "handleEnterKeydown", function (e) {
|
|
137
|
+
if (!_this.props.allowEnterDefaultBehavior) {
|
|
138
|
+
e.preventDefault();
|
|
139
|
+
}
|
|
140
|
+
e.stopPropagation();
|
|
141
|
+
});
|
|
136
142
|
return _this;
|
|
137
143
|
}
|
|
138
144
|
(0, _inherits2.default)(DropdownMenuWrapper, _PureComponent);
|
|
@@ -157,7 +163,6 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
|
|
|
157
163
|
onItemActivated = _this$props.onItemActivated,
|
|
158
164
|
arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
|
|
159
165
|
section = _this$props.section,
|
|
160
|
-
allowEnterDefaultBehavior = _this$props.allowEnterDefaultBehavior,
|
|
161
166
|
handleEscapeKeydown = _this$props.handleEscapeKeydown;
|
|
162
167
|
// Note that this onSelection function can't be refactored to useMemo for
|
|
163
168
|
// performance gains as it is being used as a dependency in a useEffect in
|
|
@@ -198,15 +203,8 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
|
|
|
198
203
|
position: popupPlacement.join(' '),
|
|
199
204
|
shouldFitContainer: true,
|
|
200
205
|
handleClickOutside: this.handleClose,
|
|
201
|
-
handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus
|
|
202
|
-
|
|
203
|
-
,
|
|
204
|
-
handleEnterKeydown: function handleEnterKeydown(e) {
|
|
205
|
-
if (!allowEnterDefaultBehavior) {
|
|
206
|
-
e.preventDefault();
|
|
207
|
-
}
|
|
208
|
-
e.stopPropagation();
|
|
209
|
-
},
|
|
206
|
+
handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
|
|
207
|
+
handleEnterKeydown: this.handleEnterKeydown,
|
|
210
208
|
targetRef: this.state.target
|
|
211
209
|
}, (0, _react2.jsx)("div", {
|
|
212
210
|
style: {
|
|
@@ -298,12 +296,48 @@ function DropdownMenuItem(_ref) {
|
|
|
298
296
|
var item = _ref.item,
|
|
299
297
|
onItemActivated = _ref.onItemActivated,
|
|
300
298
|
shouldUseDefaultRole = _ref.shouldUseDefaultRole,
|
|
301
|
-
|
|
302
|
-
|
|
299
|
+
onMouseEnter = _ref.onMouseEnter,
|
|
300
|
+
onMouseLeave = _ref.onMouseLeave;
|
|
303
301
|
var _React$useState = _react.default.useState(false),
|
|
304
302
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
305
303
|
submenuActive = _React$useState2[0],
|
|
306
304
|
setSubmenuActive = _React$useState2[1];
|
|
305
|
+
var memoizedOnClick = (0, _react.useCallback)(function () {
|
|
306
|
+
return onItemActivated && onItemActivated({
|
|
307
|
+
item: item
|
|
308
|
+
});
|
|
309
|
+
}, [onItemActivated, item]);
|
|
310
|
+
var onClick = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnClick : function () {
|
|
311
|
+
return onItemActivated && onItemActivated({
|
|
312
|
+
item: item
|
|
313
|
+
});
|
|
314
|
+
};
|
|
315
|
+
var memoizedOnMouseDown = (0, _react.useCallback)(function (e) {
|
|
316
|
+
e.preventDefault();
|
|
317
|
+
}, []);
|
|
318
|
+
var onMouseDown = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseDown : function (e) {
|
|
319
|
+
e.preventDefault();
|
|
320
|
+
};
|
|
321
|
+
var memoizedOnMouseEnter = (0, _react.useCallback)(function () {
|
|
322
|
+
return onMouseEnter && onMouseEnter({
|
|
323
|
+
item: item
|
|
324
|
+
});
|
|
325
|
+
}, [onMouseEnter, item]);
|
|
326
|
+
var onMouseEnterHandler = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseEnter : function () {
|
|
327
|
+
return onMouseEnter && onMouseEnter({
|
|
328
|
+
item: item
|
|
329
|
+
});
|
|
330
|
+
};
|
|
331
|
+
var memoizedOnMouseLeave = (0, _react.useCallback)(function () {
|
|
332
|
+
return onMouseLeave && onMouseLeave({
|
|
333
|
+
item: item
|
|
334
|
+
});
|
|
335
|
+
}, [onMouseLeave, item]);
|
|
336
|
+
var onMouseLeaveHandler = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseLeave : function () {
|
|
337
|
+
return onMouseLeave && onMouseLeave({
|
|
338
|
+
item: item
|
|
339
|
+
});
|
|
340
|
+
};
|
|
307
341
|
|
|
308
342
|
// onClick and value.name are the action indicators in the handlers
|
|
309
343
|
// If neither are present, don't wrap in an Item.
|
|
@@ -337,37 +371,15 @@ function DropdownMenuItem(_ref) {
|
|
|
337
371
|
role: shouldUseDefaultRole ? 'button' : (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? undefined : 'menuitem',
|
|
338
372
|
iconBefore: item.elemBefore,
|
|
339
373
|
iconAfter: item.elemAfter,
|
|
340
|
-
isDisabled: item.isDisabled
|
|
341
|
-
|
|
342
|
-
,
|
|
343
|
-
onClick: function onClick() {
|
|
344
|
-
return onItemActivated && onItemActivated({
|
|
345
|
-
item: item
|
|
346
|
-
});
|
|
347
|
-
},
|
|
374
|
+
isDisabled: item.isDisabled,
|
|
375
|
+
onClick: onClick,
|
|
348
376
|
"aria-label": ariaLabel,
|
|
349
377
|
"aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
|
|
350
|
-
"aria-keyshortcuts": item['aria-keyshortcuts']
|
|
351
|
-
|
|
352
|
-
,
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
},
|
|
356
|
-
component: DropdownMenuItemCustomComponent
|
|
357
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
358
|
-
,
|
|
359
|
-
onMouseEnter: function onMouseEnter() {
|
|
360
|
-
return _onMouseEnter && _onMouseEnter({
|
|
361
|
-
item: item
|
|
362
|
-
});
|
|
363
|
-
}
|
|
364
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
365
|
-
,
|
|
366
|
-
onMouseLeave: function onMouseLeave() {
|
|
367
|
-
return _onMouseLeave && _onMouseLeave({
|
|
368
|
-
item: item
|
|
369
|
-
});
|
|
370
|
-
},
|
|
378
|
+
"aria-keyshortcuts": item['aria-keyshortcuts'],
|
|
379
|
+
onMouseDown: onMouseDown,
|
|
380
|
+
component: DropdownMenuItemCustomComponent,
|
|
381
|
+
onMouseEnter: onMouseEnterHandler,
|
|
382
|
+
onMouseLeave: onMouseLeaveHandler,
|
|
371
383
|
"aria-expanded": (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? undefined : item['aria-expanded']
|
|
372
384
|
}, item.content));
|
|
373
385
|
if (item.tooltipDescription) {
|
|
@@ -389,12 +401,16 @@ function (_ref2) {
|
|
|
389
401
|
|
|
390
402
|
// This context is to handle the tab, Arrow Right/Left key events for dropdown.
|
|
391
403
|
// Default context has the void callbacks for above key events
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
, (0, _extends2.default)({
|
|
395
|
-
arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
|
|
404
|
+
var memoizedArrowKeyNavOptions = (0, _react.useMemo)(function () {
|
|
405
|
+
return _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
|
|
396
406
|
keyDownHandlerContext: keyDownHandlerContext
|
|
397
|
-
})
|
|
407
|
+
});
|
|
408
|
+
}, [props.arrowKeyNavigationProviderOptions, keyDownHandlerContext]);
|
|
409
|
+
var arrowKeyNavOptions = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedArrowKeyNavOptions : _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
|
|
410
|
+
keyDownHandlerContext: keyDownHandlerContext
|
|
411
|
+
});
|
|
412
|
+
return (0, _react2.jsx)(DropdownMenuWrapper, (0, _extends2.default)({
|
|
413
|
+
arrowKeyNavigationProviderOptions: arrowKeyNavOptions
|
|
398
414
|
// eslint-disable-next-line react/jsx-props-no-spreading -- Spreading props to pass through dynamic component props
|
|
399
415
|
}, props));
|
|
400
416
|
});
|
|
@@ -8,9 +8,13 @@ exports.default = void 0;
|
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
|
|
11
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
11
12
|
// If you make any change here, copy it to above file as well
|
|
12
13
|
// and notify about the change in #team-fc-editor-ai-dev channel.
|
|
13
14
|
|
|
15
|
+
var toolbarButtonStyle = {
|
|
16
|
+
alignItems: 'center'
|
|
17
|
+
};
|
|
14
18
|
var _default_1 = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
15
19
|
return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({
|
|
16
20
|
ref: ref
|
|
@@ -20,8 +24,8 @@ var _default_1 = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
20
24
|
// Ignored via go/ees007
|
|
21
25
|
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
|
|
22
26
|
// TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
|
|
23
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
24
|
-
style: {
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
28
|
+
style: (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? toolbarButtonStyle : {
|
|
25
29
|
alignItems: 'center'
|
|
26
30
|
}
|
|
27
31
|
}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -359,6 +359,7 @@ export let ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJECT) {
|
|
|
359
359
|
ACTION_SUBJECT["AI_DEFINITIONS"] = "aiDefinitions";
|
|
360
360
|
ACTION_SUBJECT["AI_QUICK_PROMPT"] = "aiQuickPrompt";
|
|
361
361
|
ACTION_SUBJECT["AI_AUTOCOMPLETE"] = "aiAutocomplete";
|
|
362
|
+
ACTION_SUBJECT["CONTEXTUAL_TYPEAHEAD"] = "contextualTypeahead";
|
|
362
363
|
ACTION_SUBJECT["USER_PREFERENCES"] = "userPreferences";
|
|
363
364
|
ACTION_SUBJECT["ALIGNMENT"] = "alignment";
|
|
364
365
|
ACTION_SUBJECT["OFFLINE_EDITING"] = "offlineEditing";
|
|
@@ -4,7 +4,7 @@ import { isFedRamp } from './environment';
|
|
|
4
4
|
import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
|
|
5
5
|
const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
6
6
|
const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
7
|
-
const packageVersion = "114.
|
|
7
|
+
const packageVersion = "114.5.1";
|
|
8
8
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
9
9
|
// Remove URL as it has UGC
|
|
10
10
|
// Ignored via go/ees007
|
|
@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
|
14
14
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
15
|
import Layer from '../Layer';
|
|
16
16
|
const packageName = "@atlaskit/editor-common";
|
|
17
|
-
const packageVersion = "114.
|
|
17
|
+
const packageVersion = "114.5.1";
|
|
18
18
|
const halfFocusRing = 1;
|
|
19
19
|
const dropOffset = '0, 8';
|
|
20
20
|
const fadeIn = keyframes({
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @jsxRuntime classic
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
|
-
import React from 'react';
|
|
5
|
+
import React, { useCallback, useMemo } from 'react';
|
|
6
6
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
@@ -14,6 +14,7 @@ import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
|
|
|
14
14
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
15
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
16
16
|
import { Box, xcss, Inline } from '@atlaskit/primitives';
|
|
17
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
17
18
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
18
19
|
import Tooltip from '@atlaskit/tooltip';
|
|
19
20
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
|
|
@@ -57,6 +58,7 @@ const colorPickerWrapper = () => css({
|
|
|
57
58
|
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
|
|
58
59
|
|
|
59
60
|
const ColorPaletteWithReactViewListeners = withReactEditorViewOuterListeners(ColorPalette);
|
|
61
|
+
const COLOR_PICKER_POPUP_OFFSET = [0, 10];
|
|
60
62
|
const ColorPickerButton = props => {
|
|
61
63
|
const buttonRef = React.useRef(null);
|
|
62
64
|
const [isPopupOpen, setIsPopupOpen] = React.useState(false);
|
|
@@ -65,13 +67,48 @@ const ColorPickerButton = props => {
|
|
|
65
67
|
const {
|
|
66
68
|
formatMessage
|
|
67
69
|
} = useIntl();
|
|
68
|
-
const
|
|
70
|
+
const memoizedHandleClose = useCallback(() => setIsPopupOpen(false), [setIsPopupOpen]);
|
|
71
|
+
const handleClose = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedHandleClose : () => setIsPopupOpen(false);
|
|
72
|
+
const memoizedTogglePopup = useCallback(() => {
|
|
73
|
+
setIsPopupOpen(prevIsOpen => {
|
|
74
|
+
if (!prevIsOpen) {
|
|
75
|
+
setIsOpenedByKeyboard(false);
|
|
76
|
+
setIsPopupPositioned(false);
|
|
77
|
+
}
|
|
78
|
+
return !prevIsOpen;
|
|
79
|
+
});
|
|
80
|
+
}, []);
|
|
81
|
+
const togglePopup = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedTogglePopup : () => {
|
|
69
82
|
setIsPopupOpen(!isPopupOpen);
|
|
70
83
|
if (!isPopupOpen) {
|
|
71
84
|
setIsOpenedByKeyboard(false);
|
|
72
85
|
setIsPopupPositioned(false);
|
|
73
86
|
}
|
|
74
87
|
};
|
|
88
|
+
const memoizedOnKeyDown = useCallback(event => {
|
|
89
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
90
|
+
event.preventDefault();
|
|
91
|
+
memoizedTogglePopup();
|
|
92
|
+
setIsOpenedByKeyboard(true);
|
|
93
|
+
}
|
|
94
|
+
}, [memoizedTogglePopup]);
|
|
95
|
+
const onKeyDown = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnKeyDown : event => {
|
|
96
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
97
|
+
event.preventDefault();
|
|
98
|
+
togglePopup();
|
|
99
|
+
setIsOpenedByKeyboard(true);
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
const memoizedPaletteOptions = useMemo(() => ({
|
|
103
|
+
palette: props.colorPalette,
|
|
104
|
+
hexToPaletteColor: props.hexToPaletteColor,
|
|
105
|
+
paletteColorTooltipMessages: props.paletteColorTooltipMessages
|
|
106
|
+
}), [props.colorPalette, props.hexToPaletteColor, props.paletteColorTooltipMessages]);
|
|
107
|
+
const paletteOptions = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedPaletteOptions : {
|
|
108
|
+
palette: props.colorPalette,
|
|
109
|
+
hexToPaletteColor: props.hexToPaletteColor,
|
|
110
|
+
paletteColorTooltipMessages: props.paletteColorTooltipMessages
|
|
111
|
+
};
|
|
75
112
|
React.useEffect(() => {
|
|
76
113
|
if (props.setDisableParentScroll) {
|
|
77
114
|
props.setDisableParentScroll(isPopupOpen);
|
|
@@ -138,10 +175,8 @@ const ColorPickerButton = props => {
|
|
|
138
175
|
return jsx(Popup, {
|
|
139
176
|
target: buttonRef.current,
|
|
140
177
|
fitHeight: 350,
|
|
141
|
-
fitWidth: 350
|
|
142
|
-
|
|
143
|
-
,
|
|
144
|
-
offset: [0, 10],
|
|
178
|
+
fitWidth: 350,
|
|
179
|
+
offset: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? COLOR_PICKER_POPUP_OFFSET : [0, 10],
|
|
145
180
|
alignX: props.alignX,
|
|
146
181
|
mountTo: props.setDisableParentScroll ? props.mountPoint : undefined,
|
|
147
182
|
absoluteOffset: props.absoluteOffset
|
|
@@ -159,10 +194,8 @@ const ColorPickerButton = props => {
|
|
|
159
194
|
type: ArrowKeyNavigationType.COLOR,
|
|
160
195
|
selectedRowIndex: selectedRowIndex,
|
|
161
196
|
selectedColumnIndex: selectedColumnIndex,
|
|
162
|
-
closeOnTab: true
|
|
163
|
-
|
|
164
|
-
,
|
|
165
|
-
handleClose: () => setIsPopupOpen(false),
|
|
197
|
+
closeOnTab: true,
|
|
198
|
+
handleClose: handleClose,
|
|
166
199
|
isOpenedByKeyboard: isOpenedByKeyboard,
|
|
167
200
|
isPopupPositioned: isPopupPositioned,
|
|
168
201
|
ignoreEscapeKey: props.returnEscToButton
|
|
@@ -171,14 +204,8 @@ const ColorPickerButton = props => {
|
|
|
171
204
|
selectedColor: selectedColor,
|
|
172
205
|
onClick: onColorSelected,
|
|
173
206
|
handleClickOutside: togglePopup,
|
|
174
|
-
handleEscapeKeydown: handleEsc
|
|
175
|
-
|
|
176
|
-
,
|
|
177
|
-
paletteOptions: {
|
|
178
|
-
palette: props.colorPalette,
|
|
179
|
-
hexToPaletteColor: props.hexToPaletteColor,
|
|
180
|
-
paletteColorTooltipMessages: props.paletteColorTooltipMessages
|
|
181
|
-
}
|
|
207
|
+
handleEscapeKeydown: handleEsc,
|
|
208
|
+
paletteOptions: paletteOptions
|
|
182
209
|
}))));
|
|
183
210
|
};
|
|
184
211
|
const title = props.title || '';
|
|
@@ -221,16 +248,8 @@ const ColorPickerButton = props => {
|
|
|
221
248
|
"aria-label": title,
|
|
222
249
|
"aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
|
|
223
250
|
spacing: editorExperiment('platform_editor_controls', 'variant1') ? 'default' : 'compact',
|
|
224
|
-
onClick: togglePopup
|
|
225
|
-
|
|
226
|
-
,
|
|
227
|
-
onKeyDown: event => {
|
|
228
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
229
|
-
event.preventDefault();
|
|
230
|
-
togglePopup();
|
|
231
|
-
setIsOpenedByKeyboard(true);
|
|
232
|
-
}
|
|
233
|
-
},
|
|
251
|
+
onClick: togglePopup,
|
|
252
|
+
onKeyDown: onKeyDown,
|
|
234
253
|
"data-selected-color": props.currentColor,
|
|
235
254
|
isSelected: isPopupOpen
|
|
236
255
|
}, jsx(Inline, {
|
|
@@ -6,7 +6,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
6
6
|
* @jsx jsx
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import React, { PureComponent, useContext } from 'react';
|
|
9
|
+
import React, { PureComponent, useCallback, useContext, useMemo } from 'react';
|
|
10
10
|
|
|
11
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
|
|
12
12
|
import { css, jsx } from '@emotion/react';
|
|
@@ -167,6 +167,12 @@ export default class DropdownMenuWrapper extends PureComponent {
|
|
|
167
167
|
});
|
|
168
168
|
}
|
|
169
169
|
});
|
|
170
|
+
_defineProperty(this, "handleEnterKeydown", e => {
|
|
171
|
+
if (!this.props.allowEnterDefaultBehavior) {
|
|
172
|
+
e.preventDefault();
|
|
173
|
+
}
|
|
174
|
+
e.stopPropagation();
|
|
175
|
+
});
|
|
170
176
|
}
|
|
171
177
|
renderDropdownMenu() {
|
|
172
178
|
const {
|
|
@@ -187,7 +193,6 @@ export default class DropdownMenuWrapper extends PureComponent {
|
|
|
187
193
|
onItemActivated,
|
|
188
194
|
arrowKeyNavigationProviderOptions,
|
|
189
195
|
section,
|
|
190
|
-
allowEnterDefaultBehavior,
|
|
191
196
|
handleEscapeKeydown
|
|
192
197
|
} = this.props;
|
|
193
198
|
// Note that this onSelection function can't be refactored to useMemo for
|
|
@@ -230,15 +235,8 @@ export default class DropdownMenuWrapper extends PureComponent {
|
|
|
230
235
|
position: popupPlacement.join(' '),
|
|
231
236
|
shouldFitContainer: true,
|
|
232
237
|
handleClickOutside: this.handleClose,
|
|
233
|
-
handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus
|
|
234
|
-
|
|
235
|
-
,
|
|
236
|
-
handleEnterKeydown: e => {
|
|
237
|
-
if (!allowEnterDefaultBehavior) {
|
|
238
|
-
e.preventDefault();
|
|
239
|
-
}
|
|
240
|
-
e.stopPropagation();
|
|
241
|
-
},
|
|
238
|
+
handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
|
|
239
|
+
handleEnterKeydown: this.handleEnterKeydown,
|
|
242
240
|
targetRef: this.state.target
|
|
243
241
|
}, jsx("div", {
|
|
244
242
|
style: {
|
|
@@ -331,6 +329,30 @@ export function DropdownMenuItem({
|
|
|
331
329
|
}) {
|
|
332
330
|
var _item$key2;
|
|
333
331
|
const [submenuActive, setSubmenuActive] = React.useState(false);
|
|
332
|
+
const memoizedOnClick = useCallback(() => onItemActivated && onItemActivated({
|
|
333
|
+
item
|
|
334
|
+
}), [onItemActivated, item]);
|
|
335
|
+
const onClick = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnClick : () => onItemActivated && onItemActivated({
|
|
336
|
+
item
|
|
337
|
+
});
|
|
338
|
+
const memoizedOnMouseDown = useCallback(e => {
|
|
339
|
+
e.preventDefault();
|
|
340
|
+
}, []);
|
|
341
|
+
const onMouseDown = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseDown : e => {
|
|
342
|
+
e.preventDefault();
|
|
343
|
+
};
|
|
344
|
+
const memoizedOnMouseEnter = useCallback(() => onMouseEnter && onMouseEnter({
|
|
345
|
+
item
|
|
346
|
+
}), [onMouseEnter, item]);
|
|
347
|
+
const onMouseEnterHandler = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseEnter : () => onMouseEnter && onMouseEnter({
|
|
348
|
+
item
|
|
349
|
+
});
|
|
350
|
+
const memoizedOnMouseLeave = useCallback(() => onMouseLeave && onMouseLeave({
|
|
351
|
+
item
|
|
352
|
+
}), [onMouseLeave, item]);
|
|
353
|
+
const onMouseLeaveHandler = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseLeave : () => onMouseLeave && onMouseLeave({
|
|
354
|
+
item
|
|
355
|
+
});
|
|
334
356
|
|
|
335
357
|
// onClick and value.name are the action indicators in the handlers
|
|
336
358
|
// If neither are present, don't wrap in an Item.
|
|
@@ -362,31 +384,15 @@ export function DropdownMenuItem({
|
|
|
362
384
|
role: shouldUseDefaultRole ? 'button' : expValEquals('platform_editor_august_a11y', 'isEnabled', true) ? undefined : 'menuitem',
|
|
363
385
|
iconBefore: item.elemBefore,
|
|
364
386
|
iconAfter: item.elemAfter,
|
|
365
|
-
isDisabled: item.isDisabled
|
|
366
|
-
|
|
367
|
-
,
|
|
368
|
-
onClick: () => onItemActivated && onItemActivated({
|
|
369
|
-
item
|
|
370
|
-
}),
|
|
387
|
+
isDisabled: item.isDisabled,
|
|
388
|
+
onClick: onClick,
|
|
371
389
|
"aria-label": ariaLabel,
|
|
372
390
|
"aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
|
|
373
|
-
"aria-keyshortcuts": item['aria-keyshortcuts']
|
|
374
|
-
|
|
375
|
-
,
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
},
|
|
379
|
-
component: DropdownMenuItemCustomComponent
|
|
380
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
381
|
-
,
|
|
382
|
-
onMouseEnter: () => onMouseEnter && onMouseEnter({
|
|
383
|
-
item
|
|
384
|
-
})
|
|
385
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
386
|
-
,
|
|
387
|
-
onMouseLeave: () => onMouseLeave && onMouseLeave({
|
|
388
|
-
item
|
|
389
|
-
}),
|
|
391
|
+
"aria-keyshortcuts": item['aria-keyshortcuts'],
|
|
392
|
+
onMouseDown: onMouseDown,
|
|
393
|
+
component: DropdownMenuItemCustomComponent,
|
|
394
|
+
onMouseEnter: onMouseEnterHandler,
|
|
395
|
+
onMouseLeave: onMouseLeaveHandler,
|
|
390
396
|
"aria-expanded": expValEquals('platform_editor_august_a11y', 'isEnabled', true) ? undefined : item['aria-expanded']
|
|
391
397
|
}, item.content));
|
|
392
398
|
if (item.tooltipDescription) {
|
|
@@ -409,13 +415,16 @@ export const DropdownMenuWithKeyboardNavigation = /*#__PURE__*/React.memo(
|
|
|
409
415
|
|
|
410
416
|
// This context is to handle the tab, Arrow Right/Left key events for dropdown.
|
|
411
417
|
// Default context has the void callbacks for above key events
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
418
|
+
const memoizedArrowKeyNavOptions = useMemo(() => ({
|
|
419
|
+
...props.arrowKeyNavigationProviderOptions,
|
|
420
|
+
keyDownHandlerContext
|
|
421
|
+
}), [props.arrowKeyNavigationProviderOptions, keyDownHandlerContext]);
|
|
422
|
+
const arrowKeyNavOptions = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedArrowKeyNavOptions : {
|
|
423
|
+
...props.arrowKeyNavigationProviderOptions,
|
|
424
|
+
keyDownHandlerContext
|
|
425
|
+
};
|
|
426
|
+
return jsx(DropdownMenuWrapper, _extends({
|
|
427
|
+
arrowKeyNavigationProviderOptions: arrowKeyNavOptions
|
|
419
428
|
// eslint-disable-next-line react/jsx-props-no-spreading -- Spreading props to pass through dynamic component props
|
|
420
429
|
}, props));
|
|
421
430
|
});
|
|
@@ -3,6 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
3
3
|
// and notify about the change in #team-fc-editor-ai-dev channel.
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import Button from '@atlaskit/button/standard-button';
|
|
6
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
|
+
const toolbarButtonStyle = {
|
|
8
|
+
alignItems: 'center'
|
|
9
|
+
};
|
|
6
10
|
const _default_1 = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
7
11
|
return /*#__PURE__*/React.createElement(Button, _extends({
|
|
8
12
|
ref: ref
|
|
@@ -12,8 +16,8 @@ const _default_1 = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
12
16
|
// Ignored via go/ees007
|
|
13
17
|
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
|
|
14
18
|
// TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
|
|
15
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
16
|
-
style: {
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
20
|
+
style: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? toolbarButtonStyle : {
|
|
17
21
|
alignItems: 'center'
|
|
18
22
|
}
|
|
19
23
|
}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -359,6 +359,7 @@ export var ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJECT) {
|
|
|
359
359
|
ACTION_SUBJECT["AI_DEFINITIONS"] = "aiDefinitions";
|
|
360
360
|
ACTION_SUBJECT["AI_QUICK_PROMPT"] = "aiQuickPrompt";
|
|
361
361
|
ACTION_SUBJECT["AI_AUTOCOMPLETE"] = "aiAutocomplete";
|
|
362
|
+
ACTION_SUBJECT["CONTEXTUAL_TYPEAHEAD"] = "contextualTypeahead";
|
|
362
363
|
ACTION_SUBJECT["USER_PREFERENCES"] = "userPreferences";
|
|
363
364
|
ACTION_SUBJECT["ALIGNMENT"] = "alignment";
|
|
364
365
|
ACTION_SUBJECT["OFFLINE_EDITING"] = "offlineEditing";
|
|
@@ -10,7 +10,7 @@ import { isFedRamp } from './environment';
|
|
|
10
10
|
import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
|
|
11
11
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
12
12
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
13
|
-
var packageVersion = "114.
|
|
13
|
+
var packageVersion = "114.5.1";
|
|
14
14
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
15
15
|
// Remove URL as it has UGC
|
|
16
16
|
// Ignored via go/ees007
|
|
@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
|
21
21
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
22
22
|
import Layer from '../Layer';
|
|
23
23
|
var packageName = "@atlaskit/editor-common";
|
|
24
|
-
var packageVersion = "114.
|
|
24
|
+
var packageVersion = "114.5.1";
|
|
25
25
|
var halfFocusRing = 1;
|
|
26
26
|
var dropOffset = '0, 8';
|
|
27
27
|
var fadeIn = keyframes({
|
|
@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
3
3
|
* @jsxRuntime classic
|
|
4
4
|
* @jsx jsx
|
|
5
5
|
*/
|
|
6
|
-
import React from 'react';
|
|
6
|
+
import React, { useCallback, useMemo } from 'react';
|
|
7
7
|
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
9
|
import { css, jsx } from '@emotion/react';
|
|
@@ -15,6 +15,7 @@ import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
|
|
|
15
15
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
16
16
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
17
17
|
import { Box, xcss, Inline } from '@atlaskit/primitives';
|
|
18
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
18
19
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
19
20
|
import Tooltip from '@atlaskit/tooltip';
|
|
20
21
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
|
|
@@ -60,6 +61,7 @@ var colorPickerWrapper = function colorPickerWrapper() {
|
|
|
60
61
|
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
|
|
61
62
|
|
|
62
63
|
var ColorPaletteWithReactViewListeners = withReactEditorViewOuterListeners(ColorPalette);
|
|
64
|
+
var COLOR_PICKER_POPUP_OFFSET = [0, 10];
|
|
63
65
|
var ColorPickerButton = function ColorPickerButton(props) {
|
|
64
66
|
var buttonRef = React.useRef(null);
|
|
65
67
|
var _React$useState = React.useState(false),
|
|
@@ -76,13 +78,54 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
76
78
|
setIsOpenedByKeyboard = _React$useState6[1];
|
|
77
79
|
var _useIntl = useIntl(),
|
|
78
80
|
formatMessage = _useIntl.formatMessage;
|
|
79
|
-
var
|
|
81
|
+
var memoizedHandleClose = useCallback(function () {
|
|
82
|
+
return setIsPopupOpen(false);
|
|
83
|
+
}, [setIsPopupOpen]);
|
|
84
|
+
var handleClose = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedHandleClose : function () {
|
|
85
|
+
return setIsPopupOpen(false);
|
|
86
|
+
};
|
|
87
|
+
var memoizedTogglePopup = useCallback(function () {
|
|
88
|
+
setIsPopupOpen(function (prevIsOpen) {
|
|
89
|
+
if (!prevIsOpen) {
|
|
90
|
+
setIsOpenedByKeyboard(false);
|
|
91
|
+
setIsPopupPositioned(false);
|
|
92
|
+
}
|
|
93
|
+
return !prevIsOpen;
|
|
94
|
+
});
|
|
95
|
+
}, []);
|
|
96
|
+
var togglePopup = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedTogglePopup : function () {
|
|
80
97
|
setIsPopupOpen(!isPopupOpen);
|
|
81
98
|
if (!isPopupOpen) {
|
|
82
99
|
setIsOpenedByKeyboard(false);
|
|
83
100
|
setIsPopupPositioned(false);
|
|
84
101
|
}
|
|
85
102
|
};
|
|
103
|
+
var memoizedOnKeyDown = useCallback(function (event) {
|
|
104
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
105
|
+
event.preventDefault();
|
|
106
|
+
memoizedTogglePopup();
|
|
107
|
+
setIsOpenedByKeyboard(true);
|
|
108
|
+
}
|
|
109
|
+
}, [memoizedTogglePopup]);
|
|
110
|
+
var onKeyDown = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnKeyDown : function (event) {
|
|
111
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
112
|
+
event.preventDefault();
|
|
113
|
+
togglePopup();
|
|
114
|
+
setIsOpenedByKeyboard(true);
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
var memoizedPaletteOptions = useMemo(function () {
|
|
118
|
+
return {
|
|
119
|
+
palette: props.colorPalette,
|
|
120
|
+
hexToPaletteColor: props.hexToPaletteColor,
|
|
121
|
+
paletteColorTooltipMessages: props.paletteColorTooltipMessages
|
|
122
|
+
};
|
|
123
|
+
}, [props.colorPalette, props.hexToPaletteColor, props.paletteColorTooltipMessages]);
|
|
124
|
+
var paletteOptions = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedPaletteOptions : {
|
|
125
|
+
palette: props.colorPalette,
|
|
126
|
+
hexToPaletteColor: props.hexToPaletteColor,
|
|
127
|
+
paletteColorTooltipMessages: props.paletteColorTooltipMessages
|
|
128
|
+
};
|
|
86
129
|
React.useEffect(function () {
|
|
87
130
|
if (props.setDisableParentScroll) {
|
|
88
131
|
props.setDisableParentScroll(isPopupOpen);
|
|
@@ -148,10 +191,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
148
191
|
return jsx(Popup, {
|
|
149
192
|
target: buttonRef.current,
|
|
150
193
|
fitHeight: 350,
|
|
151
|
-
fitWidth: 350
|
|
152
|
-
|
|
153
|
-
,
|
|
154
|
-
offset: [0, 10],
|
|
194
|
+
fitWidth: 350,
|
|
195
|
+
offset: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? COLOR_PICKER_POPUP_OFFSET : [0, 10],
|
|
155
196
|
alignX: props.alignX,
|
|
156
197
|
mountTo: props.setDisableParentScroll ? props.mountPoint : undefined,
|
|
157
198
|
absoluteOffset: props.absoluteOffset
|
|
@@ -169,12 +210,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
169
210
|
type: ArrowKeyNavigationType.COLOR,
|
|
170
211
|
selectedRowIndex: selectedRowIndex,
|
|
171
212
|
selectedColumnIndex: selectedColumnIndex,
|
|
172
|
-
closeOnTab: true
|
|
173
|
-
|
|
174
|
-
,
|
|
175
|
-
handleClose: function handleClose() {
|
|
176
|
-
return setIsPopupOpen(false);
|
|
177
|
-
},
|
|
213
|
+
closeOnTab: true,
|
|
214
|
+
handleClose: handleClose,
|
|
178
215
|
isOpenedByKeyboard: isOpenedByKeyboard,
|
|
179
216
|
isPopupPositioned: isPopupPositioned,
|
|
180
217
|
ignoreEscapeKey: props.returnEscToButton
|
|
@@ -183,14 +220,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
183
220
|
selectedColor: selectedColor,
|
|
184
221
|
onClick: onColorSelected,
|
|
185
222
|
handleClickOutside: togglePopup,
|
|
186
|
-
handleEscapeKeydown: handleEsc
|
|
187
|
-
|
|
188
|
-
,
|
|
189
|
-
paletteOptions: {
|
|
190
|
-
palette: props.colorPalette,
|
|
191
|
-
hexToPaletteColor: props.hexToPaletteColor,
|
|
192
|
-
paletteColorTooltipMessages: props.paletteColorTooltipMessages
|
|
193
|
-
}
|
|
223
|
+
handleEscapeKeydown: handleEsc,
|
|
224
|
+
paletteOptions: paletteOptions
|
|
194
225
|
}))));
|
|
195
226
|
};
|
|
196
227
|
var title = props.title || '';
|
|
@@ -233,16 +264,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
233
264
|
"aria-label": title,
|
|
234
265
|
"aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
|
|
235
266
|
spacing: editorExperiment('platform_editor_controls', 'variant1') ? 'default' : 'compact',
|
|
236
|
-
onClick: togglePopup
|
|
237
|
-
|
|
238
|
-
,
|
|
239
|
-
onKeyDown: function onKeyDown(event) {
|
|
240
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
241
|
-
event.preventDefault();
|
|
242
|
-
togglePopup();
|
|
243
|
-
setIsOpenedByKeyboard(true);
|
|
244
|
-
}
|
|
245
|
-
},
|
|
267
|
+
onClick: togglePopup,
|
|
268
|
+
onKeyDown: onKeyDown,
|
|
246
269
|
"data-selected-color": props.currentColor,
|
|
247
270
|
isSelected: isPopupOpen
|
|
248
271
|
}, jsx(Inline, {
|
|
@@ -21,7 +21,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
21
21
|
* @jsx jsx
|
|
22
22
|
*/
|
|
23
23
|
|
|
24
|
-
import React, { PureComponent, useContext } from 'react';
|
|
24
|
+
import React, { PureComponent, useCallback, useContext, useMemo } from 'react';
|
|
25
25
|
|
|
26
26
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
|
|
27
27
|
import { css, jsx } from '@emotion/react';
|
|
@@ -125,6 +125,12 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
|
|
|
125
125
|
});
|
|
126
126
|
}
|
|
127
127
|
});
|
|
128
|
+
_defineProperty(_this, "handleEnterKeydown", function (e) {
|
|
129
|
+
if (!_this.props.allowEnterDefaultBehavior) {
|
|
130
|
+
e.preventDefault();
|
|
131
|
+
}
|
|
132
|
+
e.stopPropagation();
|
|
133
|
+
});
|
|
128
134
|
return _this;
|
|
129
135
|
}
|
|
130
136
|
_inherits(DropdownMenuWrapper, _PureComponent);
|
|
@@ -149,7 +155,6 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
|
|
|
149
155
|
onItemActivated = _this$props.onItemActivated,
|
|
150
156
|
arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
|
|
151
157
|
section = _this$props.section,
|
|
152
|
-
allowEnterDefaultBehavior = _this$props.allowEnterDefaultBehavior,
|
|
153
158
|
handleEscapeKeydown = _this$props.handleEscapeKeydown;
|
|
154
159
|
// Note that this onSelection function can't be refactored to useMemo for
|
|
155
160
|
// performance gains as it is being used as a dependency in a useEffect in
|
|
@@ -190,15 +195,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
|
|
|
190
195
|
position: popupPlacement.join(' '),
|
|
191
196
|
shouldFitContainer: true,
|
|
192
197
|
handleClickOutside: this.handleClose,
|
|
193
|
-
handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus
|
|
194
|
-
|
|
195
|
-
,
|
|
196
|
-
handleEnterKeydown: function handleEnterKeydown(e) {
|
|
197
|
-
if (!allowEnterDefaultBehavior) {
|
|
198
|
-
e.preventDefault();
|
|
199
|
-
}
|
|
200
|
-
e.stopPropagation();
|
|
201
|
-
},
|
|
198
|
+
handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
|
|
199
|
+
handleEnterKeydown: this.handleEnterKeydown,
|
|
202
200
|
targetRef: this.state.target
|
|
203
201
|
}, jsx("div", {
|
|
204
202
|
style: {
|
|
@@ -291,12 +289,48 @@ export function DropdownMenuItem(_ref) {
|
|
|
291
289
|
var item = _ref.item,
|
|
292
290
|
onItemActivated = _ref.onItemActivated,
|
|
293
291
|
shouldUseDefaultRole = _ref.shouldUseDefaultRole,
|
|
294
|
-
|
|
295
|
-
|
|
292
|
+
onMouseEnter = _ref.onMouseEnter,
|
|
293
|
+
onMouseLeave = _ref.onMouseLeave;
|
|
296
294
|
var _React$useState = React.useState(false),
|
|
297
295
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
298
296
|
submenuActive = _React$useState2[0],
|
|
299
297
|
setSubmenuActive = _React$useState2[1];
|
|
298
|
+
var memoizedOnClick = useCallback(function () {
|
|
299
|
+
return onItemActivated && onItemActivated({
|
|
300
|
+
item: item
|
|
301
|
+
});
|
|
302
|
+
}, [onItemActivated, item]);
|
|
303
|
+
var onClick = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnClick : function () {
|
|
304
|
+
return onItemActivated && onItemActivated({
|
|
305
|
+
item: item
|
|
306
|
+
});
|
|
307
|
+
};
|
|
308
|
+
var memoizedOnMouseDown = useCallback(function (e) {
|
|
309
|
+
e.preventDefault();
|
|
310
|
+
}, []);
|
|
311
|
+
var onMouseDown = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseDown : function (e) {
|
|
312
|
+
e.preventDefault();
|
|
313
|
+
};
|
|
314
|
+
var memoizedOnMouseEnter = useCallback(function () {
|
|
315
|
+
return onMouseEnter && onMouseEnter({
|
|
316
|
+
item: item
|
|
317
|
+
});
|
|
318
|
+
}, [onMouseEnter, item]);
|
|
319
|
+
var onMouseEnterHandler = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseEnter : function () {
|
|
320
|
+
return onMouseEnter && onMouseEnter({
|
|
321
|
+
item: item
|
|
322
|
+
});
|
|
323
|
+
};
|
|
324
|
+
var memoizedOnMouseLeave = useCallback(function () {
|
|
325
|
+
return onMouseLeave && onMouseLeave({
|
|
326
|
+
item: item
|
|
327
|
+
});
|
|
328
|
+
}, [onMouseLeave, item]);
|
|
329
|
+
var onMouseLeaveHandler = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnMouseLeave : function () {
|
|
330
|
+
return onMouseLeave && onMouseLeave({
|
|
331
|
+
item: item
|
|
332
|
+
});
|
|
333
|
+
};
|
|
300
334
|
|
|
301
335
|
// onClick and value.name are the action indicators in the handlers
|
|
302
336
|
// If neither are present, don't wrap in an Item.
|
|
@@ -330,37 +364,15 @@ export function DropdownMenuItem(_ref) {
|
|
|
330
364
|
role: shouldUseDefaultRole ? 'button' : expValEquals('platform_editor_august_a11y', 'isEnabled', true) ? undefined : 'menuitem',
|
|
331
365
|
iconBefore: item.elemBefore,
|
|
332
366
|
iconAfter: item.elemAfter,
|
|
333
|
-
isDisabled: item.isDisabled
|
|
334
|
-
|
|
335
|
-
,
|
|
336
|
-
onClick: function onClick() {
|
|
337
|
-
return onItemActivated && onItemActivated({
|
|
338
|
-
item: item
|
|
339
|
-
});
|
|
340
|
-
},
|
|
367
|
+
isDisabled: item.isDisabled,
|
|
368
|
+
onClick: onClick,
|
|
341
369
|
"aria-label": ariaLabel,
|
|
342
370
|
"aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
|
|
343
|
-
"aria-keyshortcuts": item['aria-keyshortcuts']
|
|
344
|
-
|
|
345
|
-
,
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
},
|
|
349
|
-
component: DropdownMenuItemCustomComponent
|
|
350
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
351
|
-
,
|
|
352
|
-
onMouseEnter: function onMouseEnter() {
|
|
353
|
-
return _onMouseEnter && _onMouseEnter({
|
|
354
|
-
item: item
|
|
355
|
-
});
|
|
356
|
-
}
|
|
357
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
358
|
-
,
|
|
359
|
-
onMouseLeave: function onMouseLeave() {
|
|
360
|
-
return _onMouseLeave && _onMouseLeave({
|
|
361
|
-
item: item
|
|
362
|
-
});
|
|
363
|
-
},
|
|
371
|
+
"aria-keyshortcuts": item['aria-keyshortcuts'],
|
|
372
|
+
onMouseDown: onMouseDown,
|
|
373
|
+
component: DropdownMenuItemCustomComponent,
|
|
374
|
+
onMouseEnter: onMouseEnterHandler,
|
|
375
|
+
onMouseLeave: onMouseLeaveHandler,
|
|
364
376
|
"aria-expanded": expValEquals('platform_editor_august_a11y', 'isEnabled', true) ? undefined : item['aria-expanded']
|
|
365
377
|
}, item.content));
|
|
366
378
|
if (item.tooltipDescription) {
|
|
@@ -382,12 +394,16 @@ function (_ref2) {
|
|
|
382
394
|
|
|
383
395
|
// This context is to handle the tab, Arrow Right/Left key events for dropdown.
|
|
384
396
|
// Default context has the void callbacks for above key events
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
, _extends({
|
|
388
|
-
arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
|
|
397
|
+
var memoizedArrowKeyNavOptions = useMemo(function () {
|
|
398
|
+
return _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
|
|
389
399
|
keyDownHandlerContext: keyDownHandlerContext
|
|
390
|
-
})
|
|
400
|
+
});
|
|
401
|
+
}, [props.arrowKeyNavigationProviderOptions, keyDownHandlerContext]);
|
|
402
|
+
var arrowKeyNavOptions = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedArrowKeyNavOptions : _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
|
|
403
|
+
keyDownHandlerContext: keyDownHandlerContext
|
|
404
|
+
});
|
|
405
|
+
return jsx(DropdownMenuWrapper, _extends({
|
|
406
|
+
arrowKeyNavigationProviderOptions: arrowKeyNavOptions
|
|
391
407
|
// eslint-disable-next-line react/jsx-props-no-spreading -- Spreading props to pass through dynamic component props
|
|
392
408
|
}, props));
|
|
393
409
|
});
|
|
@@ -3,6 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
3
3
|
// and notify about the change in #team-fc-editor-ai-dev channel.
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import Button from '@atlaskit/button/standard-button';
|
|
6
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
|
+
var toolbarButtonStyle = {
|
|
8
|
+
alignItems: 'center'
|
|
9
|
+
};
|
|
6
10
|
var _default_1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
7
11
|
return /*#__PURE__*/React.createElement(Button, _extends({
|
|
8
12
|
ref: ref
|
|
@@ -12,8 +16,8 @@ var _default_1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
12
16
|
// Ignored via go/ees007
|
|
13
17
|
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
|
|
14
18
|
// TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
|
|
15
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
16
|
-
style: {
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
20
|
+
style: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? toolbarButtonStyle : {
|
|
17
21
|
alignItems: 'center'
|
|
18
22
|
}
|
|
19
23
|
}));
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ACTION, ACTION_SUBJECT } from './enums';
|
|
2
|
+
import type { TrackAEP } from './utils';
|
|
3
|
+
type ContextualTypeaheadViewedAEP = TrackAEP<ACTION.SUGGESTION_VIEWED, ACTION_SUBJECT.CONTEXTUAL_TYPEAHEAD, undefined, undefined, undefined>;
|
|
4
|
+
type ContextualTypeaheadAcceptedAEP = TrackAEP<ACTION.SUGGESTION_INSERTED, ACTION_SUBJECT.CONTEXTUAL_TYPEAHEAD, undefined, undefined, undefined>;
|
|
5
|
+
export type ContextualTypeaheadEventPayload = ContextualTypeaheadViewedAEP | ContextualTypeaheadAcceptedAEP;
|
|
6
|
+
export {};
|
|
@@ -351,6 +351,7 @@ export declare enum ACTION_SUBJECT {
|
|
|
351
351
|
AI_DEFINITIONS = "aiDefinitions",
|
|
352
352
|
AI_QUICK_PROMPT = "aiQuickPrompt",
|
|
353
353
|
AI_AUTOCOMPLETE = "aiAutocomplete",
|
|
354
|
+
CONTEXTUAL_TYPEAHEAD = "contextualTypeahead",
|
|
354
355
|
USER_PREFERENCES = "userPreferences",
|
|
355
356
|
ALIGNMENT = "alignment",
|
|
356
357
|
OFFLINE_EDITING = "offlineEditing",
|
|
@@ -19,6 +19,7 @@ import type { BlockMenuEventPayload, ElementTransformErrorAEP } from './block-me
|
|
|
19
19
|
import type { BreakoutEventPayload } from './breakout-events';
|
|
20
20
|
import type { TextColorEventPayload } from './color-events';
|
|
21
21
|
import type { ConfigPanelEventPayload } from './config-panel-events';
|
|
22
|
+
import type { ContextualTypeaheadEventPayload } from './contextual-typeahead-events';
|
|
22
23
|
import type { CutCopyEventPayload } from './cut-copy-events';
|
|
23
24
|
import type { DatasourceClickedPayload } from './datasource-clicked-events';
|
|
24
25
|
import type { DateEventPayload } from './date-events';
|
|
@@ -68,7 +69,7 @@ export type SimplifiedNode = {
|
|
|
68
69
|
pos: number;
|
|
69
70
|
type: string;
|
|
70
71
|
};
|
|
71
|
-
export type AnalyticsEventPayload<T = void> = AvatarEventPayload | GeneralEventPayload<T> | FormatEventPayload | SubstituteEventPayload | InsertEventPayload | NodeEventPayload | MoveContentEventPayload | MediaEventPayload | TableEventPayload | PasteEventPayload | PasteActionsMenuEventPayload | CutCopyEventPayload | ErrorEventPayload | TextColorEventPayload | FindReplaceEventPayload | DateEventPayload | SelectionEventPayload | ListEventPayload | ConfigPanelEventPayload | ElementBrowserEventPayload | CreateLinkInlineDialogEventPayload | HighlightActionsEventPayload | UnsupportedContentPayload | ExtensionEventPayload | TransactionEventPayload | TypeAheadPayload | UnlinkToolbarAEP | EditLinkToolbarAEP | PreviewItemClickedAEP | OpenLinkToolbarAEP | OpenSettingsToolbarAEP | CustomPanelEventPayload | FeatureExposureAEP | NewCollabSyncUpErrorAEP | UnsupportedContentTooltipPayload | ReferentialityEventPayload | LoomEventPayload | MBEEventPayload | HighlightEventPayload | DatasourceClickedPayload | ElementEventPayload | VisitedLinkAEP | ViewEventPayload | MediaUploadEventPayload | MentionEventPayload | EngagementPlatformEventPayload | NestedTableActionsEventPayload | AICommandPaletteEventPayload | AIDefinitionsEventPayload | AIEventPayload | AIStreamingEventPayload | AIProactiveEventPayload | AiAutocompleteEventPayload | AIQuickPromptEventPayload | AIUnifiedEventPayload | BreakoutEventPayload | BlockMenuEventPayload | ActiveSessionEventPayload | AIInlineSuggestionPayload | SelectionExtensionEventPayload | TelepointerClickPayload | SelectionToolbarEventPayload | ExperienceEventPayload | AlignmentEventPayload | UndoRedoAEP | OfflineEditingEventPayload | NcsSessionStepEventAEP | FloatingToolbarOverflowEventPayload | SyncBlockEventPayload | FloatingToolbarEventPayload;
|
|
72
|
+
export type AnalyticsEventPayload<T = void> = AvatarEventPayload | GeneralEventPayload<T> | FormatEventPayload | SubstituteEventPayload | InsertEventPayload | NodeEventPayload | MoveContentEventPayload | MediaEventPayload | TableEventPayload | PasteEventPayload | PasteActionsMenuEventPayload | CutCopyEventPayload | ErrorEventPayload | TextColorEventPayload | FindReplaceEventPayload | DateEventPayload | SelectionEventPayload | ListEventPayload | ConfigPanelEventPayload | ElementBrowserEventPayload | CreateLinkInlineDialogEventPayload | HighlightActionsEventPayload | UnsupportedContentPayload | ExtensionEventPayload | TransactionEventPayload | TypeAheadPayload | UnlinkToolbarAEP | EditLinkToolbarAEP | PreviewItemClickedAEP | OpenLinkToolbarAEP | OpenSettingsToolbarAEP | CustomPanelEventPayload | FeatureExposureAEP | NewCollabSyncUpErrorAEP | UnsupportedContentTooltipPayload | ReferentialityEventPayload | LoomEventPayload | MBEEventPayload | HighlightEventPayload | DatasourceClickedPayload | ElementEventPayload | VisitedLinkAEP | ViewEventPayload | MediaUploadEventPayload | MentionEventPayload | EngagementPlatformEventPayload | NestedTableActionsEventPayload | AICommandPaletteEventPayload | AIDefinitionsEventPayload | AIEventPayload | AIStreamingEventPayload | AIProactiveEventPayload | AiAutocompleteEventPayload | ContextualTypeaheadEventPayload | AIQuickPromptEventPayload | AIUnifiedEventPayload | BreakoutEventPayload | BlockMenuEventPayload | ActiveSessionEventPayload | AIInlineSuggestionPayload | SelectionExtensionEventPayload | TelepointerClickPayload | SelectionToolbarEventPayload | ExperienceEventPayload | AlignmentEventPayload | UndoRedoAEP | OfflineEditingEventPayload | NcsSessionStepEventAEP | FloatingToolbarOverflowEventPayload | SyncBlockEventPayload | FloatingToolbarEventPayload;
|
|
72
73
|
type CustomPanelEventPayload = TrackAEP<ACTION.CHANGED_BACKGROUND_COLOR | ACTION.CHANGED_ICON | ACTION.REMOVE_ICON, ACTION_SUBJECT.PANEL, ACTION_SUBJECT_ID.PANEL, {
|
|
73
74
|
newColor: string;
|
|
74
75
|
previousColor: string;
|
|
@@ -14,6 +14,7 @@ export default class DropdownMenuWrapper extends PureComponent<Props, State> {
|
|
|
14
14
|
private updatePopupPlacement;
|
|
15
15
|
private handleCloseAndFocus;
|
|
16
16
|
private handleClose;
|
|
17
|
+
private handleEnterKeydown;
|
|
17
18
|
private renderDropdownMenu;
|
|
18
19
|
render(): jsx.JSX.Element;
|
|
19
20
|
componentDidUpdate(previousProps: Props): void;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ACTION, ACTION_SUBJECT } from './enums';
|
|
2
|
+
import type { TrackAEP } from './utils';
|
|
3
|
+
type ContextualTypeaheadViewedAEP = TrackAEP<ACTION.SUGGESTION_VIEWED, ACTION_SUBJECT.CONTEXTUAL_TYPEAHEAD, undefined, undefined, undefined>;
|
|
4
|
+
type ContextualTypeaheadAcceptedAEP = TrackAEP<ACTION.SUGGESTION_INSERTED, ACTION_SUBJECT.CONTEXTUAL_TYPEAHEAD, undefined, undefined, undefined>;
|
|
5
|
+
export type ContextualTypeaheadEventPayload = ContextualTypeaheadViewedAEP | ContextualTypeaheadAcceptedAEP;
|
|
6
|
+
export {};
|
|
@@ -351,6 +351,7 @@ export declare enum ACTION_SUBJECT {
|
|
|
351
351
|
AI_DEFINITIONS = "aiDefinitions",
|
|
352
352
|
AI_QUICK_PROMPT = "aiQuickPrompt",
|
|
353
353
|
AI_AUTOCOMPLETE = "aiAutocomplete",
|
|
354
|
+
CONTEXTUAL_TYPEAHEAD = "contextualTypeahead",
|
|
354
355
|
USER_PREFERENCES = "userPreferences",
|
|
355
356
|
ALIGNMENT = "alignment",
|
|
356
357
|
OFFLINE_EDITING = "offlineEditing",
|
|
@@ -19,6 +19,7 @@ import type { BlockMenuEventPayload, ElementTransformErrorAEP } from './block-me
|
|
|
19
19
|
import type { BreakoutEventPayload } from './breakout-events';
|
|
20
20
|
import type { TextColorEventPayload } from './color-events';
|
|
21
21
|
import type { ConfigPanelEventPayload } from './config-panel-events';
|
|
22
|
+
import type { ContextualTypeaheadEventPayload } from './contextual-typeahead-events';
|
|
22
23
|
import type { CutCopyEventPayload } from './cut-copy-events';
|
|
23
24
|
import type { DatasourceClickedPayload } from './datasource-clicked-events';
|
|
24
25
|
import type { DateEventPayload } from './date-events';
|
|
@@ -68,7 +69,7 @@ export type SimplifiedNode = {
|
|
|
68
69
|
pos: number;
|
|
69
70
|
type: string;
|
|
70
71
|
};
|
|
71
|
-
export type AnalyticsEventPayload<T = void> = AvatarEventPayload | GeneralEventPayload<T> | FormatEventPayload | SubstituteEventPayload | InsertEventPayload | NodeEventPayload | MoveContentEventPayload | MediaEventPayload | TableEventPayload | PasteEventPayload | PasteActionsMenuEventPayload | CutCopyEventPayload | ErrorEventPayload | TextColorEventPayload | FindReplaceEventPayload | DateEventPayload | SelectionEventPayload | ListEventPayload | ConfigPanelEventPayload | ElementBrowserEventPayload | CreateLinkInlineDialogEventPayload | HighlightActionsEventPayload | UnsupportedContentPayload | ExtensionEventPayload | TransactionEventPayload | TypeAheadPayload | UnlinkToolbarAEP | EditLinkToolbarAEP | PreviewItemClickedAEP | OpenLinkToolbarAEP | OpenSettingsToolbarAEP | CustomPanelEventPayload | FeatureExposureAEP | NewCollabSyncUpErrorAEP | UnsupportedContentTooltipPayload | ReferentialityEventPayload | LoomEventPayload | MBEEventPayload | HighlightEventPayload | DatasourceClickedPayload | ElementEventPayload | VisitedLinkAEP | ViewEventPayload | MediaUploadEventPayload | MentionEventPayload | EngagementPlatformEventPayload | NestedTableActionsEventPayload | AICommandPaletteEventPayload | AIDefinitionsEventPayload | AIEventPayload | AIStreamingEventPayload | AIProactiveEventPayload | AiAutocompleteEventPayload | AIQuickPromptEventPayload | AIUnifiedEventPayload | BreakoutEventPayload | BlockMenuEventPayload | ActiveSessionEventPayload | AIInlineSuggestionPayload | SelectionExtensionEventPayload | TelepointerClickPayload | SelectionToolbarEventPayload | ExperienceEventPayload | AlignmentEventPayload | UndoRedoAEP | OfflineEditingEventPayload | NcsSessionStepEventAEP | FloatingToolbarOverflowEventPayload | SyncBlockEventPayload | FloatingToolbarEventPayload;
|
|
72
|
+
export type AnalyticsEventPayload<T = void> = AvatarEventPayload | GeneralEventPayload<T> | FormatEventPayload | SubstituteEventPayload | InsertEventPayload | NodeEventPayload | MoveContentEventPayload | MediaEventPayload | TableEventPayload | PasteEventPayload | PasteActionsMenuEventPayload | CutCopyEventPayload | ErrorEventPayload | TextColorEventPayload | FindReplaceEventPayload | DateEventPayload | SelectionEventPayload | ListEventPayload | ConfigPanelEventPayload | ElementBrowserEventPayload | CreateLinkInlineDialogEventPayload | HighlightActionsEventPayload | UnsupportedContentPayload | ExtensionEventPayload | TransactionEventPayload | TypeAheadPayload | UnlinkToolbarAEP | EditLinkToolbarAEP | PreviewItemClickedAEP | OpenLinkToolbarAEP | OpenSettingsToolbarAEP | CustomPanelEventPayload | FeatureExposureAEP | NewCollabSyncUpErrorAEP | UnsupportedContentTooltipPayload | ReferentialityEventPayload | LoomEventPayload | MBEEventPayload | HighlightEventPayload | DatasourceClickedPayload | ElementEventPayload | VisitedLinkAEP | ViewEventPayload | MediaUploadEventPayload | MentionEventPayload | EngagementPlatformEventPayload | NestedTableActionsEventPayload | AICommandPaletteEventPayload | AIDefinitionsEventPayload | AIEventPayload | AIStreamingEventPayload | AIProactiveEventPayload | AiAutocompleteEventPayload | ContextualTypeaheadEventPayload | AIQuickPromptEventPayload | AIUnifiedEventPayload | BreakoutEventPayload | BlockMenuEventPayload | ActiveSessionEventPayload | AIInlineSuggestionPayload | SelectionExtensionEventPayload | TelepointerClickPayload | SelectionToolbarEventPayload | ExperienceEventPayload | AlignmentEventPayload | UndoRedoAEP | OfflineEditingEventPayload | NcsSessionStepEventAEP | FloatingToolbarOverflowEventPayload | SyncBlockEventPayload | FloatingToolbarEventPayload;
|
|
72
73
|
type CustomPanelEventPayload = TrackAEP<ACTION.CHANGED_BACKGROUND_COLOR | ACTION.CHANGED_ICON | ACTION.REMOVE_ICON, ACTION_SUBJECT.PANEL, ACTION_SUBJECT_ID.PANEL, {
|
|
73
74
|
newColor: string;
|
|
74
75
|
previousColor: string;
|
|
@@ -14,6 +14,7 @@ export default class DropdownMenuWrapper extends PureComponent<Props, State> {
|
|
|
14
14
|
private updatePopupPlacement;
|
|
15
15
|
private handleCloseAndFocus;
|
|
16
16
|
private handleClose;
|
|
17
|
+
private handleEnterKeydown;
|
|
17
18
|
private renderDropdownMenu;
|
|
18
19
|
render(): jsx.JSX.Element;
|
|
19
20
|
componentDidUpdate(previousProps: Props): void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-common",
|
|
3
|
-
"version": "114.
|
|
3
|
+
"version": "114.6.0",
|
|
4
4
|
"description": "A package that contains common classes and components for editor and renderer",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -79,14 +79,14 @@
|
|
|
79
79
|
"@atlaskit/primitives": "^19.0.0",
|
|
80
80
|
"@atlaskit/profilecard": "^25.1.0",
|
|
81
81
|
"@atlaskit/prosemirror-history": "^0.2.0",
|
|
82
|
-
"@atlaskit/react-ufo": "^5.
|
|
82
|
+
"@atlaskit/react-ufo": "^5.16.0",
|
|
83
83
|
"@atlaskit/section-message": "^8.12.0",
|
|
84
|
-
"@atlaskit/smart-card": "^44.
|
|
84
|
+
"@atlaskit/smart-card": "^44.3.0",
|
|
85
85
|
"@atlaskit/smart-user-picker": "^10.0.0",
|
|
86
86
|
"@atlaskit/spinner": "^19.1.0",
|
|
87
87
|
"@atlaskit/task-decision": "^20.0.0",
|
|
88
88
|
"@atlaskit/textfield": "^8.3.0",
|
|
89
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
89
|
+
"@atlaskit/tmp-editor-statsig": "^64.0.0",
|
|
90
90
|
"@atlaskit/tokens": "^13.0.0",
|
|
91
91
|
"@atlaskit/tooltip": "^21.1.0",
|
|
92
92
|
"@atlaskit/width-detector": "^5.1.0",
|