@atlaskit/editor-plugin-type-ahead 2.7.19 → 3.0.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 +49 -0
- package/dist/cjs/ui/TypeAheadList.js +1 -5
- package/dist/cjs/ui/TypeAheadMenu.js +1 -6
- package/dist/cjs/ui/TypeAheadPopup.js +4 -14
- package/dist/cjs/ui/WrapperTypeAhead.js +3 -7
- package/dist/es2019/ui/TypeAheadList.js +1 -5
- package/dist/es2019/ui/TypeAheadMenu.js +2 -7
- package/dist/es2019/ui/TypeAheadPopup.js +4 -18
- package/dist/es2019/ui/WrapperTypeAhead.js +4 -8
- package/dist/esm/ui/TypeAheadList.js +1 -5
- package/dist/esm/ui/TypeAheadMenu.js +2 -7
- package/dist/esm/ui/TypeAheadPopup.js +4 -14
- package/dist/esm/ui/WrapperTypeAhead.js +4 -8
- package/dist/types/pm-plugins/analytics.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/analytics.d.ts +1 -1
- package/package.json +12 -19
- package/dist/cjs/ui/ViewMore.js +0 -85
- package/dist/es2019/ui/ViewMore.js +0 -81
- package/dist/esm/ui/ViewMore.js +0 -77
- package/dist/types/ui/ViewMore.d.ts +0 -5
- package/dist/types-ts4.5/ui/ViewMore.d.ts +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,54 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-type-ahead
|
|
2
2
|
|
|
3
|
+
## 3.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [#181024](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/181024)
|
|
8
|
+
[`8e80c487ca307`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e80c487ca307) - ##
|
|
9
|
+
Make `@atlaskit/editor-common` a peer dependency
|
|
10
|
+
|
|
11
|
+
**WHAT:** `@atlaskit/editor-common` has been moved from `dependencies` to `peerDependencies` in
|
|
12
|
+
all editor plugin packages.
|
|
13
|
+
|
|
14
|
+
**WHY:** This change ensures that only a single version of `@atlaskit/editor-common` is used in
|
|
15
|
+
consuming applications, preventing issues caused by multiple versions of singleton libraries (such
|
|
16
|
+
as context mismatches or duplicated state). This is especially important for packages that rely on
|
|
17
|
+
shared context or singletons.
|
|
18
|
+
|
|
19
|
+
**HOW TO ADJUST:**
|
|
20
|
+
|
|
21
|
+
- Consumers must now explicitly install `@atlaskit/editor-common` in their own project if they use
|
|
22
|
+
any of these editor plugins.
|
|
23
|
+
- Ensure the version you install matches the version required by the plugins.
|
|
24
|
+
- You can use the
|
|
25
|
+
[`check-peer-dependencies`](https://www.npmjs.com/package/check-peer-dependencies) package to
|
|
26
|
+
verify that all required peer dependencies are installed and compatible.
|
|
27
|
+
- Example install command:
|
|
28
|
+
```
|
|
29
|
+
npm install @atlaskit/editor-common
|
|
30
|
+
```
|
|
31
|
+
or
|
|
32
|
+
```
|
|
33
|
+
yarn add @atlaskit/editor-common
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
**Note:** This is a breaking change. If `@atlaskit/editor-common` is not installed at the
|
|
37
|
+
application level, you may see errors or unexpected behavior.
|
|
38
|
+
|
|
39
|
+
### Patch Changes
|
|
40
|
+
|
|
41
|
+
- Updated dependencies
|
|
42
|
+
|
|
43
|
+
## 2.7.20
|
|
44
|
+
|
|
45
|
+
### Patch Changes
|
|
46
|
+
|
|
47
|
+
- [#175339](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175339)
|
|
48
|
+
[`d4115e4055a0a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d4115e4055a0a) -
|
|
49
|
+
ED-28314 Cleanup platform_editor_controls_patch_12
|
|
50
|
+
- Updated dependencies
|
|
51
|
+
|
|
3
52
|
## 2.7.19
|
|
4
53
|
|
|
5
54
|
### Patch Changes
|
|
@@ -26,7 +26,6 @@ var _utils = require("../pm-plugins/utils");
|
|
|
26
26
|
var _ListRow = require("./ListRow");
|
|
27
27
|
var _MoreOptions = require("./MoreOptions");
|
|
28
28
|
var _TypeAheadListItem = require("./TypeAheadListItem");
|
|
29
|
-
var _ViewMore = require("./ViewMore");
|
|
30
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); }
|
|
31
30
|
/**
|
|
32
31
|
* @jsxRuntime classic
|
|
@@ -409,15 +408,12 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
|
|
|
409
408
|
}, (0, _react2.jsx)("div", {
|
|
410
409
|
id: menuGroupId,
|
|
411
410
|
ref: listContainerRef
|
|
412
|
-
}, !showMoreOptionsButton || itemsLength ? ListContent : EmptyResultView,
|
|
411
|
+
}, !showMoreOptionsButton || itemsLength ? ListContent : EmptyResultView, showMoreOptionsButton && config && (0, _react2.jsx)(_MoreOptions.MoreOptions, {
|
|
413
412
|
title: config.title,
|
|
414
413
|
ariaLabel: config.ariaLabel,
|
|
415
414
|
onClick: handleClick,
|
|
416
415
|
isFocused: selectedIndex === itemsLength,
|
|
417
416
|
iconBefore: config.iconBefore
|
|
418
|
-
}) : showMoreOptionsButton && onMoreOptionsClicked && (0, _react2.jsx)(_ViewMore.ViewMore, {
|
|
419
|
-
onClick: onMoreOptionsClicked,
|
|
420
|
-
isFocused: selectedIndex === itemsLength
|
|
421
417
|
}), (0, _react2.jsx)(TypeaheadAssistiveTextPureComponent, {
|
|
422
418
|
numberOfResults: itemsLength.toString()
|
|
423
419
|
})));
|
|
@@ -8,7 +8,6 @@ exports.TypeAheadMenu = void 0;
|
|
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _typeAhead = require("@atlaskit/editor-common/type-ahead");
|
|
11
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
11
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
13
12
|
var _updateSelectedIndex = require("../pm-plugins/commands/update-selected-index");
|
|
14
13
|
var _useItemInsert3 = require("./hooks/use-item-insert");
|
|
@@ -84,11 +83,7 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
|
|
|
84
83
|
var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
|
|
85
84
|
var showMoreOptionsButton = false;
|
|
86
85
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
87
|
-
|
|
88
|
-
showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
|
|
89
|
-
} else {
|
|
90
|
-
showMoreOptionsButton = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal;
|
|
91
|
-
}
|
|
86
|
+
showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
|
|
92
87
|
}
|
|
93
88
|
if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || !openElementBrowserModal && items.length === 0 && !errorInfo) {
|
|
94
89
|
return null;
|
|
@@ -20,7 +20,6 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
20
20
|
var _colors = require("@atlaskit/theme/colors");
|
|
21
21
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
22
22
|
var _analytics2 = require("../pm-plugins/analytics");
|
|
23
|
-
var _closeTypeAhead = require("../pm-plugins/commands/close-type-ahead");
|
|
24
23
|
var _constants = require("../pm-plugins/constants");
|
|
25
24
|
var _utils = require("../pm-plugins/utils");
|
|
26
25
|
var _TypeAheadErrorFallback = require("./TypeAheadErrorFallback");
|
|
@@ -308,26 +307,17 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
308
307
|
|
|
309
308
|
// @ts-ignore
|
|
310
309
|
var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
|
|
311
|
-
var close = function close(editorView) {
|
|
312
|
-
var tr = editorView.state.tr;
|
|
313
|
-
(0, _closeTypeAhead.closeTypeAhead)(tr);
|
|
314
|
-
editorView.dispatch(tr);
|
|
315
|
-
};
|
|
316
310
|
var onMoreOptionsClicked = (0, _react.useCallback)(function () {
|
|
317
311
|
if (
|
|
318
312
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
319
|
-
openElementBrowserModal && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
|
|
313
|
+
openElementBrowserModal && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && triggerHandler.id === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT) {
|
|
320
314
|
activityStateRef.current = {
|
|
321
315
|
inputMethod: _analytics.INPUT_METHOD.MOUSE,
|
|
322
316
|
closeAction: _analytics.ACTION.VIEW_MORE,
|
|
323
317
|
invocationMethod: activityStateRef.current.invocationMethod
|
|
324
318
|
};
|
|
325
319
|
}
|
|
326
|
-
|
|
327
|
-
close(editorView);
|
|
328
|
-
openElementBrowserModal === null || openElementBrowserModal === void 0 || openElementBrowserModal();
|
|
329
|
-
}
|
|
330
|
-
}, [editorView, openElementBrowserModal, triggerHandler.id]);
|
|
320
|
+
}, [openElementBrowserModal, triggerHandler.id]);
|
|
331
321
|
return (0, _react2.jsx)(_ui.Popup, {
|
|
332
322
|
zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
|
|
333
323
|
target: anchorElement,
|
|
@@ -340,7 +330,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
340
330
|
ariaLabel: null,
|
|
341
331
|
preventOverflow: true,
|
|
342
332
|
onUnmount: function onUnmount() {
|
|
343
|
-
if (selectedIndex > -1 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
333
|
+
if (selectedIndex > -1 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
344
334
|
// if selectedIndex is -1, it means that the user has not selected any item
|
|
345
335
|
// will be handled by WrapperTypeAhead
|
|
346
336
|
(0, _analytics2.fireTypeAheadClosedAnalyticsEvent)(api, activityStateRef.current.closeAction || _analytics.ACTION.CANCELLED, !isEmptyQuery, activityStateRef.current.inputMethod || _analytics.INPUT_METHOD.MOUSE, activityStateRef.current.invocationMethod);
|
|
@@ -369,7 +359,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
369
359
|
items: items,
|
|
370
360
|
selectedIndex: selectedIndex,
|
|
371
361
|
onItemClick: function onItemClick(mode, index, inputMethod) {
|
|
372
|
-
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
362
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
373
363
|
activityStateRef.current = {
|
|
374
364
|
inputMethod: inputMethod || null,
|
|
375
365
|
closeAction: _analytics.ACTION.INSERTED,
|
|
@@ -38,11 +38,7 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
|
|
|
38
38
|
var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
|
|
39
39
|
var showMoreOptionsButton = false;
|
|
40
40
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
41
|
-
|
|
42
|
-
showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
|
|
43
|
-
} else {
|
|
44
|
-
showMoreOptionsButton = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal;
|
|
45
|
-
}
|
|
41
|
+
showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
|
|
46
42
|
}
|
|
47
43
|
var _useState = (0, _react.useState)(false),
|
|
48
44
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -90,7 +86,7 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
|
|
|
90
86
|
addPrefixTrigger = _ref2.addPrefixTrigger,
|
|
91
87
|
text = _ref2.text,
|
|
92
88
|
forceFocusOnEditor = _ref2.forceFocusOnEditor;
|
|
93
|
-
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
89
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
94
90
|
var _getPluginState;
|
|
95
91
|
(0, _analytics2.fireTypeAheadClosedAnalyticsEvent)(api, _analytics.ACTION.CANCELLED, !!queryRef.current, _analytics.INPUT_METHOD.KEYBOARD, (_getPluginState = (0, _utils.getPluginState)(editorView.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.inputMethod);
|
|
96
92
|
}
|
|
@@ -122,7 +118,7 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
|
|
|
122
118
|
if (safeSelectedIndex === -1) {
|
|
123
119
|
return;
|
|
124
120
|
}
|
|
125
|
-
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
121
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
126
122
|
var _getPluginState2;
|
|
127
123
|
(0, _analytics2.fireTypeAheadClosedAnalyticsEvent)(api, _analytics.ACTION.INSERTED, !!queryRef.current, _analytics.INPUT_METHOD.KEYBOARD, (_getPluginState2 = (0, _utils.getPluginState)(editorView.state)) === null || _getPluginState2 === void 0 ? void 0 : _getPluginState2.inputMethod);
|
|
128
124
|
}
|
|
@@ -24,7 +24,6 @@ import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../pm-plugins/uti
|
|
|
24
24
|
import { ListRow } from './ListRow';
|
|
25
25
|
import { MoreOptions } from './MoreOptions';
|
|
26
26
|
import { TypeAheadListItem } from './TypeAheadListItem';
|
|
27
|
-
import { ViewMore } from './ViewMore';
|
|
28
27
|
const LIST_ITEM_ESTIMATED_HEIGHT = 64;
|
|
29
28
|
const LIST_WIDTH = 320;
|
|
30
29
|
const list = css({
|
|
@@ -387,15 +386,12 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
|
|
|
387
386
|
}, jsx("div", {
|
|
388
387
|
id: menuGroupId,
|
|
389
388
|
ref: listContainerRef
|
|
390
|
-
}, !showMoreOptionsButton || itemsLength ? ListContent : EmptyResultView,
|
|
389
|
+
}, !showMoreOptionsButton || itemsLength ? ListContent : EmptyResultView, showMoreOptionsButton && config && jsx(MoreOptions, {
|
|
391
390
|
title: config.title,
|
|
392
391
|
ariaLabel: config.ariaLabel,
|
|
393
392
|
onClick: handleClick,
|
|
394
393
|
isFocused: selectedIndex === itemsLength,
|
|
395
394
|
iconBefore: config.iconBefore
|
|
396
|
-
}) : showMoreOptionsButton && onMoreOptionsClicked && jsx(ViewMore, {
|
|
397
|
-
onClick: onMoreOptionsClicked,
|
|
398
|
-
isFocused: selectedIndex === itemsLength
|
|
399
395
|
}), jsx(TypeaheadAssistiveTextPureComponent, {
|
|
400
396
|
numberOfResults: itemsLength.toString()
|
|
401
397
|
})));
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { SelectItemMode
|
|
3
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
|
+
import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
|
|
4
3
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
4
|
import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
|
|
6
5
|
import { useItemInsert } from './hooks/use-item-insert';
|
|
@@ -75,11 +74,7 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
|
|
|
75
74
|
const openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
|
|
76
75
|
let showMoreOptionsButton = false;
|
|
77
76
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
78
|
-
|
|
79
|
-
showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
|
|
80
|
-
} else {
|
|
81
|
-
showMoreOptionsButton = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal;
|
|
82
|
-
}
|
|
77
|
+
showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
|
|
83
78
|
}
|
|
84
79
|
if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || !openElementBrowserModal && items.length === 0 && !errorInfo) {
|
|
85
80
|
return null;
|
|
@@ -17,7 +17,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
17
17
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
18
18
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
19
19
|
import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
|
|
20
|
-
import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
|
|
21
20
|
import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
|
|
22
21
|
import { getPluginState } from '../pm-plugins/utils';
|
|
23
22
|
import { TypeAheadErrorFallback } from './TypeAheadErrorFallback';
|
|
@@ -305,30 +304,17 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
305
304
|
|
|
306
305
|
// @ts-ignore
|
|
307
306
|
const openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
|
|
308
|
-
const close = editorView => {
|
|
309
|
-
const {
|
|
310
|
-
state: {
|
|
311
|
-
tr
|
|
312
|
-
}
|
|
313
|
-
} = editorView;
|
|
314
|
-
closeTypeAhead(tr);
|
|
315
|
-
editorView.dispatch(tr);
|
|
316
|
-
};
|
|
317
307
|
const onMoreOptionsClicked = useCallback(() => {
|
|
318
308
|
if (
|
|
319
309
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
320
|
-
openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1') &&
|
|
310
|
+
openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1') && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT) {
|
|
321
311
|
activityStateRef.current = {
|
|
322
312
|
inputMethod: INPUT_METHOD.MOUSE,
|
|
323
313
|
closeAction: ACTION.VIEW_MORE,
|
|
324
314
|
invocationMethod: activityStateRef.current.invocationMethod
|
|
325
315
|
};
|
|
326
316
|
}
|
|
327
|
-
|
|
328
|
-
close(editorView);
|
|
329
|
-
openElementBrowserModal === null || openElementBrowserModal === void 0 ? void 0 : openElementBrowserModal();
|
|
330
|
-
}
|
|
331
|
-
}, [editorView, openElementBrowserModal, triggerHandler.id]);
|
|
317
|
+
}, [openElementBrowserModal, triggerHandler.id]);
|
|
332
318
|
return jsx(Popup, {
|
|
333
319
|
zIndex: akEditorFloatingDialogZIndex,
|
|
334
320
|
target: anchorElement,
|
|
@@ -341,7 +327,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
341
327
|
ariaLabel: null,
|
|
342
328
|
preventOverflow: true,
|
|
343
329
|
onUnmount: () => {
|
|
344
|
-
if (selectedIndex > -1 && editorExperiment('platform_editor_controls', 'variant1')
|
|
330
|
+
if (selectedIndex > -1 && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
345
331
|
// if selectedIndex is -1, it means that the user has not selected any item
|
|
346
332
|
// will be handled by WrapperTypeAhead
|
|
347
333
|
fireTypeAheadClosedAnalyticsEvent(api, activityStateRef.current.closeAction || ACTION.CANCELLED, !isEmptyQuery, activityStateRef.current.inputMethod || INPUT_METHOD.MOUSE, activityStateRef.current.invocationMethod);
|
|
@@ -370,7 +356,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
370
356
|
items: items,
|
|
371
357
|
selectedIndex: selectedIndex,
|
|
372
358
|
onItemClick: (mode, index, inputMethod) => {
|
|
373
|
-
if (editorExperiment('platform_editor_controls', 'variant1')
|
|
359
|
+
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
374
360
|
activityStateRef.current = {
|
|
375
361
|
inputMethod: inputMethod || null,
|
|
376
362
|
closeAction: ACTION.INSERTED,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
|
-
import { SelectItemMode
|
|
3
|
+
import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
|
|
4
4
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
6
|
import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
|
|
@@ -29,11 +29,7 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
|
|
|
29
29
|
const openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
|
|
30
30
|
let showMoreOptionsButton = false;
|
|
31
31
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
32
|
-
|
|
33
|
-
showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
|
|
34
|
-
} else {
|
|
35
|
-
showMoreOptionsButton = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal;
|
|
36
|
-
}
|
|
32
|
+
showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
|
|
37
33
|
}
|
|
38
34
|
const [closed, setClosed] = useState(false);
|
|
39
35
|
const [query, setQuery] = useState(reopenQuery || '');
|
|
@@ -69,7 +65,7 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
|
|
|
69
65
|
text,
|
|
70
66
|
forceFocusOnEditor
|
|
71
67
|
}) => {
|
|
72
|
-
if (editorExperiment('platform_editor_controls', 'variant1')
|
|
68
|
+
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
73
69
|
var _getPluginState;
|
|
74
70
|
fireTypeAheadClosedAnalyticsEvent(api, ACTION.CANCELLED, !!queryRef.current, INPUT_METHOD.KEYBOARD, (_getPluginState = getPluginState(editorView.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.inputMethod);
|
|
75
71
|
}
|
|
@@ -101,7 +97,7 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
|
|
|
101
97
|
if (safeSelectedIndex === -1) {
|
|
102
98
|
return;
|
|
103
99
|
}
|
|
104
|
-
if (editorExperiment('platform_editor_controls', 'variant1')
|
|
100
|
+
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
105
101
|
var _getPluginState2;
|
|
106
102
|
fireTypeAheadClosedAnalyticsEvent(api, ACTION.INSERTED, !!queryRef.current, INPUT_METHOD.KEYBOARD, (_getPluginState2 = getPluginState(editorView.state)) === null || _getPluginState2 === void 0 ? void 0 : _getPluginState2.inputMethod);
|
|
107
103
|
}
|
|
@@ -25,7 +25,6 @@ import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../pm-plugins/uti
|
|
|
25
25
|
import { ListRow } from './ListRow';
|
|
26
26
|
import { MoreOptions } from './MoreOptions';
|
|
27
27
|
import { TypeAheadListItem } from './TypeAheadListItem';
|
|
28
|
-
import { ViewMore } from './ViewMore';
|
|
29
28
|
var LIST_ITEM_ESTIMATED_HEIGHT = 64;
|
|
30
29
|
var LIST_WIDTH = 320;
|
|
31
30
|
var list = css({
|
|
@@ -400,15 +399,12 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
400
399
|
}, jsx("div", {
|
|
401
400
|
id: menuGroupId,
|
|
402
401
|
ref: listContainerRef
|
|
403
|
-
}, !showMoreOptionsButton || itemsLength ? ListContent : EmptyResultView,
|
|
402
|
+
}, !showMoreOptionsButton || itemsLength ? ListContent : EmptyResultView, showMoreOptionsButton && config && jsx(MoreOptions, {
|
|
404
403
|
title: config.title,
|
|
405
404
|
ariaLabel: config.ariaLabel,
|
|
406
405
|
onClick: handleClick,
|
|
407
406
|
isFocused: selectedIndex === itemsLength,
|
|
408
407
|
iconBefore: config.iconBefore
|
|
409
|
-
}) : showMoreOptionsButton && onMoreOptionsClicked && jsx(ViewMore, {
|
|
410
|
-
onClick: onMoreOptionsClicked,
|
|
411
|
-
isFocused: selectedIndex === itemsLength
|
|
412
408
|
}), jsx(TypeaheadAssistiveTextPureComponent, {
|
|
413
409
|
numberOfResults: itemsLength.toString()
|
|
414
410
|
})));
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { SelectItemMode
|
|
4
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
+
import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
|
|
5
4
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
5
|
import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
|
|
7
6
|
import { useItemInsert } from './hooks/use-item-insert';
|
|
@@ -77,11 +76,7 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
77
76
|
var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
|
|
78
77
|
var showMoreOptionsButton = false;
|
|
79
78
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
80
|
-
|
|
81
|
-
showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
|
|
82
|
-
} else {
|
|
83
|
-
showMoreOptionsButton = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal;
|
|
84
|
-
}
|
|
79
|
+
showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
|
|
85
80
|
}
|
|
86
81
|
if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || !openElementBrowserModal && items.length === 0 && !errorInfo) {
|
|
87
82
|
return null;
|
|
@@ -18,7 +18,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
18
18
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
19
19
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
20
20
|
import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
|
|
21
|
-
import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
|
|
22
21
|
import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
|
|
23
22
|
import { getPluginState } from '../pm-plugins/utils';
|
|
24
23
|
import { TypeAheadErrorFallback } from './TypeAheadErrorFallback';
|
|
@@ -298,26 +297,17 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
298
297
|
|
|
299
298
|
// @ts-ignore
|
|
300
299
|
var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
|
|
301
|
-
var close = function close(editorView) {
|
|
302
|
-
var tr = editorView.state.tr;
|
|
303
|
-
closeTypeAhead(tr);
|
|
304
|
-
editorView.dispatch(tr);
|
|
305
|
-
};
|
|
306
300
|
var onMoreOptionsClicked = useCallback(function () {
|
|
307
301
|
if (
|
|
308
302
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
309
|
-
openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1') &&
|
|
303
|
+
openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1') && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT) {
|
|
310
304
|
activityStateRef.current = {
|
|
311
305
|
inputMethod: INPUT_METHOD.MOUSE,
|
|
312
306
|
closeAction: ACTION.VIEW_MORE,
|
|
313
307
|
invocationMethod: activityStateRef.current.invocationMethod
|
|
314
308
|
};
|
|
315
309
|
}
|
|
316
|
-
|
|
317
|
-
close(editorView);
|
|
318
|
-
openElementBrowserModal === null || openElementBrowserModal === void 0 || openElementBrowserModal();
|
|
319
|
-
}
|
|
320
|
-
}, [editorView, openElementBrowserModal, triggerHandler.id]);
|
|
310
|
+
}, [openElementBrowserModal, triggerHandler.id]);
|
|
321
311
|
return jsx(Popup, {
|
|
322
312
|
zIndex: akEditorFloatingDialogZIndex,
|
|
323
313
|
target: anchorElement,
|
|
@@ -330,7 +320,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
330
320
|
ariaLabel: null,
|
|
331
321
|
preventOverflow: true,
|
|
332
322
|
onUnmount: function onUnmount() {
|
|
333
|
-
if (selectedIndex > -1 && editorExperiment('platform_editor_controls', 'variant1')
|
|
323
|
+
if (selectedIndex > -1 && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
334
324
|
// if selectedIndex is -1, it means that the user has not selected any item
|
|
335
325
|
// will be handled by WrapperTypeAhead
|
|
336
326
|
fireTypeAheadClosedAnalyticsEvent(api, activityStateRef.current.closeAction || ACTION.CANCELLED, !isEmptyQuery, activityStateRef.current.inputMethod || INPUT_METHOD.MOUSE, activityStateRef.current.invocationMethod);
|
|
@@ -359,7 +349,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
359
349
|
items: items,
|
|
360
350
|
selectedIndex: selectedIndex,
|
|
361
351
|
onItemClick: function onItemClick(mode, index, inputMethod) {
|
|
362
|
-
if (editorExperiment('platform_editor_controls', 'variant1')
|
|
352
|
+
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
363
353
|
activityStateRef.current = {
|
|
364
354
|
inputMethod: inputMethod || null,
|
|
365
355
|
closeAction: ACTION.INSERTED,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
4
|
-
import { SelectItemMode
|
|
4
|
+
import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
6
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
7
7
|
import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
|
|
@@ -29,11 +29,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
29
29
|
var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
|
|
30
30
|
var showMoreOptionsButton = false;
|
|
31
31
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
32
|
-
|
|
33
|
-
showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
|
|
34
|
-
} else {
|
|
35
|
-
showMoreOptionsButton = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal;
|
|
36
|
-
}
|
|
32
|
+
showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
|
|
37
33
|
}
|
|
38
34
|
var _useState = useState(false),
|
|
39
35
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -81,7 +77,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
81
77
|
addPrefixTrigger = _ref2.addPrefixTrigger,
|
|
82
78
|
text = _ref2.text,
|
|
83
79
|
forceFocusOnEditor = _ref2.forceFocusOnEditor;
|
|
84
|
-
if (editorExperiment('platform_editor_controls', 'variant1')
|
|
80
|
+
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
85
81
|
var _getPluginState;
|
|
86
82
|
fireTypeAheadClosedAnalyticsEvent(api, ACTION.CANCELLED, !!queryRef.current, INPUT_METHOD.KEYBOARD, (_getPluginState = getPluginState(editorView.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.inputMethod);
|
|
87
83
|
}
|
|
@@ -113,7 +109,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
113
109
|
if (safeSelectedIndex === -1) {
|
|
114
110
|
return;
|
|
115
111
|
}
|
|
116
|
-
if (editorExperiment('platform_editor_controls', 'variant1')
|
|
112
|
+
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
117
113
|
var _getPluginState2;
|
|
118
114
|
fireTypeAheadClosedAnalyticsEvent(api, ACTION.INSERTED, !!queryRef.current, INPUT_METHOD.KEYBOARD, (_getPluginState2 = getPluginState(editorView.state)) === null || _getPluginState2 === void 0 ? void 0 : _getPluginState2.inputMethod);
|
|
119
115
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
1
|
+
import { ACTION, type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
2
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
3
|
import type { TypeAheadPlugin } from '../typeAheadPluginType';
|
|
4
4
|
import type { TypeAheadInputMethod } from '../types';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
1
|
+
import { ACTION, type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
2
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
3
|
import type { TypeAheadPlugin } from '../typeAheadPluginType';
|
|
4
4
|
import type { TypeAheadInputMethod } from '../types';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-type-ahead",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Type-ahead plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -9,8 +9,7 @@
|
|
|
9
9
|
},
|
|
10
10
|
"atlassian": {
|
|
11
11
|
"team": "Editor: Lego",
|
|
12
|
-
"singleton": true
|
|
13
|
-
"runReact18": true
|
|
12
|
+
"singleton": true
|
|
14
13
|
},
|
|
15
14
|
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
16
15
|
"main": "dist/cjs/index.js",
|
|
@@ -34,23 +33,22 @@
|
|
|
34
33
|
},
|
|
35
34
|
"dependencies": {
|
|
36
35
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
37
|
-
"@atlaskit/editor-
|
|
38
|
-
"@atlaskit/editor-
|
|
39
|
-
"@atlaskit/editor-plugin-
|
|
40
|
-
"@atlaskit/editor-plugin-
|
|
41
|
-
"@atlaskit/editor-plugin-
|
|
42
|
-
"@atlaskit/editor-plugin-metrics": "^3.5.0",
|
|
36
|
+
"@atlaskit/editor-element-browser": "^1.0.0",
|
|
37
|
+
"@atlaskit/editor-plugin-analytics": "^3.0.0",
|
|
38
|
+
"@atlaskit/editor-plugin-connectivity": "^3.0.0",
|
|
39
|
+
"@atlaskit/editor-plugin-context-panel": "^5.0.0",
|
|
40
|
+
"@atlaskit/editor-plugin-metrics": "^4.0.0",
|
|
43
41
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
44
42
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
45
43
|
"@atlaskit/heading": "^5.2.0",
|
|
46
|
-
"@atlaskit/icon": "^27.
|
|
44
|
+
"@atlaskit/icon": "^27.2.0",
|
|
47
45
|
"@atlaskit/menu": "^8.0.0",
|
|
48
46
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
49
|
-
"@atlaskit/primitives": "^14.
|
|
47
|
+
"@atlaskit/primitives": "^14.10.0",
|
|
50
48
|
"@atlaskit/prosemirror-input-rules": "^3.3.0",
|
|
51
49
|
"@atlaskit/theme": "^18.0.0",
|
|
52
|
-
"@atlaskit/tmp-editor-statsig": "^8.
|
|
53
|
-
"@atlaskit/tokens": "^5.
|
|
50
|
+
"@atlaskit/tmp-editor-statsig": "^8.7.0",
|
|
51
|
+
"@atlaskit/tokens": "^5.4.0",
|
|
54
52
|
"@babel/runtime": "^7.0.0",
|
|
55
53
|
"@emotion/react": "^11.7.1",
|
|
56
54
|
"lodash": "^4.17.21",
|
|
@@ -60,6 +58,7 @@
|
|
|
60
58
|
"w3c-keyname": "^2.1.8"
|
|
61
59
|
},
|
|
62
60
|
"peerDependencies": {
|
|
61
|
+
"@atlaskit/editor-common": "^107.6.0",
|
|
63
62
|
"react": "^18.2.0",
|
|
64
63
|
"react-dom": "^18.2.0",
|
|
65
64
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
@@ -105,9 +104,6 @@
|
|
|
105
104
|
"platform_editor_quick_insert_placeholder": {
|
|
106
105
|
"type": "boolean"
|
|
107
106
|
},
|
|
108
|
-
"platform_editor_controls_patch_4": {
|
|
109
|
-
"type": "boolean"
|
|
110
|
-
},
|
|
111
107
|
"platform_editor_controls_patch_analytics_3": {
|
|
112
108
|
"type": "boolean"
|
|
113
109
|
},
|
|
@@ -117,9 +113,6 @@
|
|
|
117
113
|
"platform_editor_refactor_view_more": {
|
|
118
114
|
"type": "boolean"
|
|
119
115
|
},
|
|
120
|
-
"platform_editor_controls_patch_12": {
|
|
121
|
-
"type": "boolean"
|
|
122
|
-
},
|
|
123
116
|
"platform_editor_controls_patch_13": {
|
|
124
117
|
"type": "boolean"
|
|
125
118
|
}
|
package/dist/cjs/ui/ViewMore.js
DELETED
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.ViewMore = void 0;
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
var _react2 = require("@emotion/react");
|
|
10
|
-
var _reactIntlNext = require("react-intl-next");
|
|
11
|
-
var _messages = require("@atlaskit/editor-common/messages");
|
|
12
|
-
var _showMoreHorizontalEditorMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--editor-more"));
|
|
13
|
-
var _menu = require("@atlaskit/menu");
|
|
14
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
16
|
-
/**
|
|
17
|
-
* @jsxRuntime classic
|
|
18
|
-
* @jsx jsx
|
|
19
|
-
*/
|
|
20
|
-
|
|
21
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
22
|
-
|
|
23
|
-
var buttonStyles = (0, _react2.css)({
|
|
24
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
25
|
-
'& > button:hover': {
|
|
26
|
-
backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
|
|
27
|
-
},
|
|
28
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
29
|
-
'& > button:focus': {
|
|
30
|
-
backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
var ViewMore = exports.ViewMore = function ViewMore(_ref) {
|
|
34
|
-
var onClick = _ref.onClick,
|
|
35
|
-
isFocused = _ref.isFocused;
|
|
36
|
-
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
37
|
-
formatMessage = _useIntl.formatMessage;
|
|
38
|
-
var ref = (0, _react.useRef)(null);
|
|
39
|
-
(0, _react.useEffect)(function () {
|
|
40
|
-
if (isFocused && ref.current) {
|
|
41
|
-
ref.current.focus();
|
|
42
|
-
}
|
|
43
|
-
}, [isFocused]);
|
|
44
|
-
(0, _react.useEffect)(function () {
|
|
45
|
-
if (!ref.current) {
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
var element = ref.current;
|
|
49
|
-
var handleEnter = function handleEnter(e) {
|
|
50
|
-
if (e.key === 'Enter') {
|
|
51
|
-
onClick();
|
|
52
|
-
// Prevent keydown listener in TypeaheadList from handling Enter pressed
|
|
53
|
-
e.stopPropagation();
|
|
54
|
-
} else if (e.key === 'Tab') {
|
|
55
|
-
// TypeaheadList will try to insert selected item on Tab press
|
|
56
|
-
// hence stop propagation to prevent that and treat this as noop
|
|
57
|
-
e.stopPropagation();
|
|
58
|
-
e.preventDefault();
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
// Ignored via go/ees005
|
|
63
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
64
|
-
element === null || element === void 0 || element.addEventListener('keydown', handleEnter);
|
|
65
|
-
return function () {
|
|
66
|
-
// Ignored via go/ees005
|
|
67
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
68
|
-
element === null || element === void 0 || element.removeEventListener('keydown', handleEnter);
|
|
69
|
-
};
|
|
70
|
-
});
|
|
71
|
-
return (0, _react2.jsx)(_menu.Section, {
|
|
72
|
-
hasSeparator: true
|
|
73
|
-
}, (0, _react2.jsx)("span", {
|
|
74
|
-
css: buttonStyles
|
|
75
|
-
}, (0, _react2.jsx)(_menu.ButtonItem, {
|
|
76
|
-
ref: ref,
|
|
77
|
-
onClick: onClick,
|
|
78
|
-
iconBefore: (0, _react2.jsx)(_showMoreHorizontalEditorMore.default, {
|
|
79
|
-
label: ""
|
|
80
|
-
}),
|
|
81
|
-
"aria-describedby": (0, _platformFeatureFlags.fg)('platform_editor_refactor_view_more') ? undefined : formatMessage(_messages.toolbarInsertBlockMessages.viewMore),
|
|
82
|
-
"aria-label": (0, _platformFeatureFlags.fg)('platform_editor_refactor_view_more') ? formatMessage(_messages.toolbarInsertBlockMessages.viewMoreAriaLabel) : undefined,
|
|
83
|
-
"data-testid": "quick-insert-view-more-elements-item"
|
|
84
|
-
}, formatMessage(_messages.toolbarInsertBlockMessages.viewMore))));
|
|
85
|
-
};
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { useEffect, useRef } from 'react';
|
|
6
|
-
|
|
7
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
|
-
import { css, jsx } from '@emotion/react';
|
|
9
|
-
import { useIntl } from 'react-intl-next';
|
|
10
|
-
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
11
|
-
import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
|
|
12
|
-
import { ButtonItem, Section } from '@atlaskit/menu';
|
|
13
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
|
-
import { N30 } from '@atlaskit/theme/colors';
|
|
15
|
-
const buttonStyles = css({
|
|
16
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
17
|
-
'& > button:hover': {
|
|
18
|
-
backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`
|
|
19
|
-
},
|
|
20
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
21
|
-
'& > button:focus': {
|
|
22
|
-
backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
export const ViewMore = ({
|
|
26
|
-
onClick,
|
|
27
|
-
isFocused
|
|
28
|
-
}) => {
|
|
29
|
-
const {
|
|
30
|
-
formatMessage
|
|
31
|
-
} = useIntl();
|
|
32
|
-
const ref = useRef(null);
|
|
33
|
-
useEffect(() => {
|
|
34
|
-
if (isFocused && ref.current) {
|
|
35
|
-
ref.current.focus();
|
|
36
|
-
}
|
|
37
|
-
}, [isFocused]);
|
|
38
|
-
useEffect(() => {
|
|
39
|
-
if (!ref.current) {
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
const {
|
|
43
|
-
current: element
|
|
44
|
-
} = ref;
|
|
45
|
-
const handleEnter = e => {
|
|
46
|
-
if (e.key === 'Enter') {
|
|
47
|
-
onClick();
|
|
48
|
-
// Prevent keydown listener in TypeaheadList from handling Enter pressed
|
|
49
|
-
e.stopPropagation();
|
|
50
|
-
} else if (e.key === 'Tab') {
|
|
51
|
-
// TypeaheadList will try to insert selected item on Tab press
|
|
52
|
-
// hence stop propagation to prevent that and treat this as noop
|
|
53
|
-
e.stopPropagation();
|
|
54
|
-
e.preventDefault();
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
// Ignored via go/ees005
|
|
59
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
60
|
-
element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleEnter);
|
|
61
|
-
return () => {
|
|
62
|
-
// Ignored via go/ees005
|
|
63
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
64
|
-
element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleEnter);
|
|
65
|
-
};
|
|
66
|
-
});
|
|
67
|
-
return jsx(Section, {
|
|
68
|
-
hasSeparator: true
|
|
69
|
-
}, jsx("span", {
|
|
70
|
-
css: buttonStyles
|
|
71
|
-
}, jsx(ButtonItem, {
|
|
72
|
-
ref: ref,
|
|
73
|
-
onClick: onClick,
|
|
74
|
-
iconBefore: jsx(ShowMoreHorizontalIcon, {
|
|
75
|
-
label: ""
|
|
76
|
-
}),
|
|
77
|
-
"aria-describedby": fg('platform_editor_refactor_view_more') ? undefined : formatMessage(messages.viewMore),
|
|
78
|
-
"aria-label": fg('platform_editor_refactor_view_more') ? formatMessage(messages.viewMoreAriaLabel) : undefined,
|
|
79
|
-
"data-testid": "quick-insert-view-more-elements-item"
|
|
80
|
-
}, formatMessage(messages.viewMore))));
|
|
81
|
-
};
|
package/dist/esm/ui/ViewMore.js
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { useEffect, useRef } from 'react';
|
|
6
|
-
|
|
7
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
|
-
import { css, jsx } from '@emotion/react';
|
|
9
|
-
import { useIntl } from 'react-intl-next';
|
|
10
|
-
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
11
|
-
import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
|
|
12
|
-
import { ButtonItem, Section } from '@atlaskit/menu';
|
|
13
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
|
-
import { N30 } from '@atlaskit/theme/colors';
|
|
15
|
-
var buttonStyles = css({
|
|
16
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
17
|
-
'& > button:hover': {
|
|
18
|
-
backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")
|
|
19
|
-
},
|
|
20
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
21
|
-
'& > button:focus': {
|
|
22
|
-
backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
export var ViewMore = function ViewMore(_ref) {
|
|
26
|
-
var onClick = _ref.onClick,
|
|
27
|
-
isFocused = _ref.isFocused;
|
|
28
|
-
var _useIntl = useIntl(),
|
|
29
|
-
formatMessage = _useIntl.formatMessage;
|
|
30
|
-
var ref = useRef(null);
|
|
31
|
-
useEffect(function () {
|
|
32
|
-
if (isFocused && ref.current) {
|
|
33
|
-
ref.current.focus();
|
|
34
|
-
}
|
|
35
|
-
}, [isFocused]);
|
|
36
|
-
useEffect(function () {
|
|
37
|
-
if (!ref.current) {
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
var element = ref.current;
|
|
41
|
-
var handleEnter = function handleEnter(e) {
|
|
42
|
-
if (e.key === 'Enter') {
|
|
43
|
-
onClick();
|
|
44
|
-
// Prevent keydown listener in TypeaheadList from handling Enter pressed
|
|
45
|
-
e.stopPropagation();
|
|
46
|
-
} else if (e.key === 'Tab') {
|
|
47
|
-
// TypeaheadList will try to insert selected item on Tab press
|
|
48
|
-
// hence stop propagation to prevent that and treat this as noop
|
|
49
|
-
e.stopPropagation();
|
|
50
|
-
e.preventDefault();
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
// Ignored via go/ees005
|
|
55
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
56
|
-
element === null || element === void 0 || element.addEventListener('keydown', handleEnter);
|
|
57
|
-
return function () {
|
|
58
|
-
// Ignored via go/ees005
|
|
59
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
60
|
-
element === null || element === void 0 || element.removeEventListener('keydown', handleEnter);
|
|
61
|
-
};
|
|
62
|
-
});
|
|
63
|
-
return jsx(Section, {
|
|
64
|
-
hasSeparator: true
|
|
65
|
-
}, jsx("span", {
|
|
66
|
-
css: buttonStyles
|
|
67
|
-
}, jsx(ButtonItem, {
|
|
68
|
-
ref: ref,
|
|
69
|
-
onClick: onClick,
|
|
70
|
-
iconBefore: jsx(ShowMoreHorizontalIcon, {
|
|
71
|
-
label: ""
|
|
72
|
-
}),
|
|
73
|
-
"aria-describedby": fg('platform_editor_refactor_view_more') ? undefined : formatMessage(messages.viewMore),
|
|
74
|
-
"aria-label": fg('platform_editor_refactor_view_more') ? formatMessage(messages.viewMoreAriaLabel) : undefined,
|
|
75
|
-
"data-testid": "quick-insert-view-more-elements-item"
|
|
76
|
-
}, formatMessage(messages.viewMore))));
|
|
77
|
-
};
|