@atlaskit/editor-plugin-type-ahead 30.0.5 → 31.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.
Files changed (87) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/pm-plugins/commands/insert-type-ahead-item.js +4 -8
  3. package/dist/cjs/ui/ContentComponent.js +1 -2
  4. package/dist/cjs/ui/InputQuery.js +49 -21
  5. package/dist/cjs/ui/WrapperTypeAhead.js +4 -5
  6. package/dist/cjs/ui/registered-menu/RegisteredTypeAheadMenu.js +128 -227
  7. package/dist/es2019/pm-plugins/commands/insert-type-ahead-item.js +3 -7
  8. package/dist/es2019/ui/ContentComponent.js +1 -2
  9. package/dist/es2019/ui/InputQuery.js +44 -16
  10. package/dist/es2019/ui/WrapperTypeAhead.js +4 -5
  11. package/dist/es2019/ui/registered-menu/RegisteredTypeAheadMenu.js +112 -200
  12. package/dist/esm/pm-plugins/commands/insert-type-ahead-item.js +4 -8
  13. package/dist/esm/ui/ContentComponent.js +1 -2
  14. package/dist/esm/ui/InputQuery.js +49 -21
  15. package/dist/esm/ui/WrapperTypeAhead.js +4 -5
  16. package/dist/esm/ui/registered-menu/RegisteredTypeAheadMenu.js +129 -228
  17. package/dist/types/pm-plugins/commands/insert-type-ahead-item.d.ts +4 -4
  18. package/dist/types/ui/InputQuery.d.ts +4 -1
  19. package/dist/types/ui/registered-menu/RegisteredTypeAheadMenu.d.ts +2 -3
  20. package/package.json +9 -9
  21. package/dist/cjs/ui/registered-menu/PassThrough.js +0 -10
  22. package/dist/cjs/ui/registered-menu/TypeAheadContext.js +0 -8
  23. package/dist/cjs/ui/registered-menu/TypeAheadItemRow.js +0 -48
  24. package/dist/cjs/ui/registered-menu/TypeAheadMenuFooter.compiled.css +0 -3
  25. package/dist/cjs/ui/registered-menu/TypeAheadMenuFooter.js +0 -33
  26. package/dist/cjs/ui/registered-menu/TypeAheadMenuRenderer.js +0 -167
  27. package/dist/cjs/ui/registered-menu/TypeAheadProvider.js +0 -8
  28. package/dist/cjs/ui/registered-menu/TypeAheadSectionRow.js +0 -15
  29. package/dist/cjs/ui/registered-menu/buildTypeAheadMenuModel.js +0 -5
  30. package/dist/cjs/ui/registered-menu/createTypeAheadRowRenderer.js +0 -76
  31. package/dist/cjs/ui/registered-menu/getTypeAheadGlobalViewMoreId.js +0 -9
  32. package/dist/cjs/ui/registered-menu/getTypeAheadItemId.js +0 -9
  33. package/dist/cjs/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js +0 -40
  34. package/dist/cjs/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js +0 -66
  35. package/dist/cjs/ui/registered-menu/typeAheadMenuTypes.js +0 -5
  36. package/dist/cjs/ui/registered-menu/typeAheadSurfaces.js +0 -27
  37. package/dist/cjs/ui/registered-menu/useTypeAheadContext.js +0 -15
  38. package/dist/es2019/ui/registered-menu/PassThrough.js +0 -3
  39. package/dist/es2019/ui/registered-menu/TypeAheadContext.js +0 -2
  40. package/dist/es2019/ui/registered-menu/TypeAheadItemRow.js +0 -35
  41. package/dist/es2019/ui/registered-menu/TypeAheadMenuFooter.compiled.css +0 -3
  42. package/dist/es2019/ui/registered-menu/TypeAheadMenuFooter.js +0 -24
  43. package/dist/es2019/ui/registered-menu/TypeAheadMenuRenderer.js +0 -134
  44. package/dist/es2019/ui/registered-menu/TypeAheadProvider.js +0 -2
  45. package/dist/es2019/ui/registered-menu/TypeAheadSectionRow.js +0 -9
  46. package/dist/es2019/ui/registered-menu/buildTypeAheadMenuModel.js +0 -1
  47. package/dist/es2019/ui/registered-menu/createTypeAheadRowRenderer.js +0 -67
  48. package/dist/es2019/ui/registered-menu/getTypeAheadGlobalViewMoreId.js +0 -1
  49. package/dist/es2019/ui/registered-menu/getTypeAheadItemId.js +0 -1
  50. package/dist/es2019/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js +0 -31
  51. package/dist/es2019/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js +0 -58
  52. package/dist/es2019/ui/registered-menu/typeAheadMenuTypes.js +0 -1
  53. package/dist/es2019/ui/registered-menu/typeAheadSurfaces.js +0 -21
  54. package/dist/es2019/ui/registered-menu/useTypeAheadContext.js +0 -9
  55. package/dist/esm/ui/registered-menu/PassThrough.js +0 -4
  56. package/dist/esm/ui/registered-menu/TypeAheadContext.js +0 -2
  57. package/dist/esm/ui/registered-menu/TypeAheadItemRow.js +0 -40
  58. package/dist/esm/ui/registered-menu/TypeAheadMenuFooter.compiled.css +0 -3
  59. package/dist/esm/ui/registered-menu/TypeAheadMenuFooter.js +0 -26
  60. package/dist/esm/ui/registered-menu/TypeAheadMenuRenderer.js +0 -158
  61. package/dist/esm/ui/registered-menu/TypeAheadProvider.js +0 -2
  62. package/dist/esm/ui/registered-menu/TypeAheadSectionRow.js +0 -8
  63. package/dist/esm/ui/registered-menu/buildTypeAheadMenuModel.js +0 -1
  64. package/dist/esm/ui/registered-menu/createTypeAheadRowRenderer.js +0 -69
  65. package/dist/esm/ui/registered-menu/getTypeAheadGlobalViewMoreId.js +0 -3
  66. package/dist/esm/ui/registered-menu/getTypeAheadItemId.js +0 -3
  67. package/dist/esm/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js +0 -32
  68. package/dist/esm/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js +0 -58
  69. package/dist/esm/ui/registered-menu/typeAheadMenuTypes.js +0 -1
  70. package/dist/esm/ui/registered-menu/typeAheadSurfaces.js +0 -21
  71. package/dist/esm/ui/registered-menu/useTypeAheadContext.js +0 -9
  72. package/dist/types/ui/registered-menu/PassThrough.d.ts +0 -2
  73. package/dist/types/ui/registered-menu/TypeAheadContext.d.ts +0 -20
  74. package/dist/types/ui/registered-menu/TypeAheadItemRow.d.ts +0 -15
  75. package/dist/types/ui/registered-menu/TypeAheadMenuFooter.d.ts +0 -11
  76. package/dist/types/ui/registered-menu/TypeAheadMenuRenderer.d.ts +0 -19
  77. package/dist/types/ui/registered-menu/TypeAheadProvider.d.ts +0 -3
  78. package/dist/types/ui/registered-menu/TypeAheadSectionRow.d.ts +0 -5
  79. package/dist/types/ui/registered-menu/buildTypeAheadMenuModel.d.ts +0 -3
  80. package/dist/types/ui/registered-menu/createTypeAheadRowRenderer.d.ts +0 -17
  81. package/dist/types/ui/registered-menu/getTypeAheadGlobalViewMoreId.d.ts +0 -1
  82. package/dist/types/ui/registered-menu/getTypeAheadItemId.d.ts +0 -1
  83. package/dist/types/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.d.ts +0 -3
  84. package/dist/types/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.d.ts +0 -2
  85. package/dist/types/ui/registered-menu/typeAheadMenuTypes.d.ts +0 -8
  86. package/dist/types/ui/registered-menu/typeAheadSurfaces.d.ts +0 -17
  87. package/dist/types/ui/registered-menu/useTypeAheadContext.d.ts +0 -2
@@ -2,264 +2,165 @@
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import "./RegisteredTypeAheadMenu.compiled.css";
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
- import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
6
- import { useIntl } from 'react-intl';
5
+ import React, { useCallback, useMemo, useState, useSyncExternalStore } from 'react';
6
+ import { isOfflineMode } from '@atlaskit/editor-common/connectivity/isOfflineMode';
7
7
  import Popup from '@atlaskit/editor-common/Popup';
8
- import { getQuickInsertMenuModel, getQuickInsertMenuRows, selectQuickInsertCategoryItems } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
9
- import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
10
- import { useQuickInsertSearchAnalytics } from '@atlaskit/editor-common/quick-insert/use-search-analytics';
11
- import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
12
- import { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
8
+ import { RegisteredMenuContext } from '@atlaskit/editor-common/registered-menu/context';
9
+ import { useMenuPopupSizing } from '@atlaskit/editor-common/registered-menu/popup-sizing';
10
+ import { createRegisteredMenuSurfaceContext } from '@atlaskit/editor-common/registered-menu/surface-context';
11
+ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
13
12
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles/constants';
14
- import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
13
+ import { performTypeAheadSelection } from '../../pm-plugins/commands/insert-type-ahead-item';
15
14
  import { InputQuery } from '../InputQuery';
16
- import { getTypeAheadGlobalViewMoreId } from './getTypeAheadGlobalViewMoreId';
17
- import { getTypeAheadItemId } from './getTypeAheadItemId';
18
- import { TypeAheadMenuRenderer } from './TypeAheadMenuRenderer';
19
- import { TypeAheadProvider } from './TypeAheadProvider';
20
- var styles = {
21
- menu: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _16qs130s _1q51idpf _85i5idpf _1bsbnklw"
22
- };
23
15
  var DEFAULT_MENU_MAX_HEIGHT = 480;
24
- var MENU_WIDTH = 320;
25
16
  var POPUP_OFFSET = [0, 8];
17
+ var styles = {
18
+ popup: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _1q51idpf _85i5idpf _16qs130s _1bsbnklw"
19
+ };
26
20
  var EMPTY_COMPONENTS = [];
27
21
  var subscribeToNothing = function subscribeToNothing() {
28
22
  return function () {};
29
23
  };
30
- export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
31
- var _api$uiControlRegistr2, _api$uiControlRegistr3, _api$analytics;
32
- var anchorElement = _ref.anchorElement,
33
- api = _ref.api,
34
- cancel = _ref.cancel,
35
- editorView = _ref.editorView,
36
- forceFocus = _ref.forceFocus,
37
- _ref$maxHeight = _ref.maxHeight,
38
- maxHeight = _ref$maxHeight === void 0 ? DEFAULT_MENU_MAX_HEIGHT : _ref$maxHeight,
39
- onClose = _ref.onClose,
40
- onUndoRedo = _ref.onUndoRedo,
41
- popupsBoundariesElement = _ref.popupsBoundariesElement,
42
- popupsMountPoint = _ref.popupsMountPoint,
43
- popupsScrollableElement = _ref.popupsScrollableElement,
44
- query = _ref.query,
45
- reopenQuery = _ref.reopenQuery,
46
- setQuery = _ref.setQuery,
47
- surface = _ref.surface,
48
- triggerHandler = _ref.triggerHandler;
49
- var menuHeight = useMenuPopupSizing({
50
- target: anchorElement,
51
- boundariesElement: popupsBoundariesElement,
52
- scrollableElement: popupsScrollableElement,
53
- maxHeight: maxHeight,
24
+ var noOp = function noOp() {};
25
+ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(props) {
26
+ var _props$maxHeight, _api$uiControlRegistr2, _api$uiControlRegistr3, _root$isHidden;
27
+ var api = props.api,
28
+ registeredMenuKey = props.registeredMenuKey,
29
+ query = props.query,
30
+ editorView = props.editorView,
31
+ onClose = props.onClose,
32
+ triggerHandler = props.triggerHandler,
33
+ popupsMountPoint = props.popupsMountPoint;
34
+ var rootComponent = useMemo(function () {
35
+ return {
36
+ key: registeredMenuKey,
37
+ type: 'menu'
38
+ };
39
+ }, [registeredMenuKey]);
40
+ var _useState = useState(),
41
+ _useState2 = _slicedToArray(_useState, 2),
42
+ menuInteraction = _useState2[0],
43
+ setMenuInteraction = _useState2[1];
44
+ var registerInteraction = useCallback(function (interaction) {
45
+ setMenuInteraction(interaction);
46
+ return function () {
47
+ return setMenuInteraction(function (current) {
48
+ return current === interaction ? undefined : current;
49
+ });
50
+ };
51
+ }, []);
52
+ var maxHeight = useMenuPopupSizing({
53
+ target: props.anchorElement,
54
+ boundariesElement: props.popupsBoundariesElement,
55
+ scrollableElement: props.popupsScrollableElement,
56
+ maxHeight: (_props$maxHeight = props.maxHeight) !== null && _props$maxHeight !== void 0 ? _props$maxHeight : DEFAULT_MENU_MAX_HEIGHT,
54
57
  offset: POPUP_OFFSET[1]
55
58
  });
56
- var _useIntl = useIntl(),
57
- formatMessage = _useIntl.formatMessage;
58
- var generatedId = useId();
59
- var listId = "".concat(surface.listIdPrefix, "-").concat(generatedId);
60
- var menuRef = useRef(null);
61
- var _useState = useState(function () {
62
- return {
63
- menuOpenId: Symbol('type-ahead-menu-open')
64
- };
59
+ var cancelMenu = useCallback(function (params) {
60
+ var _menuInteraction$onCl;
61
+ menuInteraction === null || menuInteraction === void 0 || (_menuInteraction$onCl = menuInteraction.onClose) === null || _menuInteraction$onCl === void 0 || _menuInteraction$onCl.call(menuInteraction);
62
+ props.cancel(params);
63
+ }, [menuInteraction, props.cancel]);
64
+ var _useState3 = useState(function () {
65
+ return Symbol('type-ahead-menu-open');
65
66
  }),
66
- _useState2 = _slicedToArray(_useState, 1),
67
- typeAheadSurfaceContext = _useState2[0];
67
+ _useState4 = _slicedToArray(_useState3, 1),
68
+ menuOpenId = _useState4[0];
68
69
  var surfaceContext = useMemo(function () {
69
- return createSurfaceContext(TYPE_AHEAD_SURFACE_CONTEXT, typeAheadSurfaceContext);
70
- }, [typeAheadSurfaceContext]);
71
- var _useState3 = useState(0),
72
- _useState4 = _slicedToArray(_useState3, 2),
73
- selectedItemIndex = _useState4[0],
74
- setSelectedItemIndex = _useState4[1];
75
- var selectedItemIndexRef = useRef(selectedItemIndex);
70
+ return createRegisteredMenuSurfaceContext({
71
+ menuOpenId: menuOpenId,
72
+ surface: 'typeahead'
73
+ });
74
+ }, [menuOpenId]);
76
75
  var getComponents = useCallback(function () {
77
76
  var _api$uiControlRegistr;
78
- var components = api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.getComponents(surface.root.key);
77
+ var components = api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.getComponents(rootComponent.key);
79
78
  return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
80
- }, [api, surface.root.key]);
79
+ }, [api, rootComponent.key]);
81
80
  var components = useSyncExternalStore((_api$uiControlRegistr2 = api === null || api === void 0 || (_api$uiControlRegistr3 = api.uiControlRegistry) === null || _api$uiControlRegistr3 === void 0 ? void 0 : _api$uiControlRegistr3.actions.subscribe) !== null && _api$uiControlRegistr2 !== void 0 ? _api$uiControlRegistr2 : subscribeToNothing, getComponents, getComponents);
82
- var hasSectionOverflowItems = useMemo(function () {
83
- return components.some(function (_ref2) {
84
- var key = _ref2.key;
85
- return isSectionOverflowItemKey(key);
86
- });
87
- }, [components]);
88
- var menuModel = useMemo(function () {
89
- return getQuickInsertMenuModel({
90
- components: components,
91
- formatMessage: formatMessage,
92
- getItemRank: triggerHandler.getRegisteredItemRank,
93
- query: query,
94
- rootComponent: surface.root,
95
- selectCategoryItems: hasSectionOverflowItems ? selectQuickInsertCategoryItems : undefined,
96
- surfaceContext: surfaceContext
81
+ var root = useMemo(function () {
82
+ return components.find(function (_ref) {
83
+ var key = _ref.key,
84
+ type = _ref.type,
85
+ parents = _ref.parents;
86
+ return key === rootComponent.key && type === rootComponent.type && !(parents !== null && parents !== void 0 && parents.length);
97
87
  });
98
- }, [components, formatMessage, hasSectionOverflowItems, query, surfaceContext, surface.root, triggerHandler.getRegisteredItemRank]);
99
- var rows = useMemo(function () {
100
- return getQuickInsertMenuRows(menuModel);
101
- }, [menuModel]);
102
- var searchResultCount = useMemo(function () {
103
- return menuModel.sections.reduce(function (count, section) {
104
- return count + section.filter(function (_ref3) {
105
- var key = _ref3.key,
106
- type = _ref3.type;
107
- return type === 'menu-item' && !isSectionOverflowItemKey(key);
108
- }).length;
109
- }, 0);
110
- }, [menuModel.sections]);
111
- var flushSearchAnalytics = useQuickInsertSearchAnalytics({
112
- fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent,
113
- query: query,
114
- resultCount: searchResultCount,
115
- surface: 'typeahead'
116
- });
117
- var closeMenu = useCallback(function () {
118
- flushSearchAnalytics();
88
+ }, [components, rootComponent]);
89
+ var Root = root !== null && root !== void 0 && (_root$isHidden = root.isHidden) !== null && _root$isHidden !== void 0 && _root$isHidden.call(root, {
90
+ surfaceContext: surfaceContext
91
+ }) ? undefined : root === null || root === void 0 ? void 0 : root.component;
92
+ // Interaction updates should not recreate the registered component's own props.
93
+ var menu = useMemo(function () {
94
+ return Root && /*#__PURE__*/React.createElement(Root, null, null);
95
+ }, [Root]);
96
+ var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity'], function (_ref2) {
97
+ var connectivityState = _ref2.connectivityState;
98
+ return {
99
+ isOffline: isOfflineMode(connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode)
100
+ };
101
+ }),
102
+ isOffline = _useSharedPluginState.isOffline;
103
+ var select = useCallback(function (selectItem) {
119
104
  onClose();
120
- }, [flushSearchAnalytics, onClose]);
121
- var _useState5 = useState(),
122
- _useState6 = _slicedToArray(_useState5, 2),
123
- previewActivation = _useState6[0],
124
- setPreviewActivation = _useState6[1];
125
- var activePreviewItemKey = (previewActivation === null || previewActivation === void 0 ? void 0 : previewActivation.menuModel) === menuModel ? previewActivation.itemKey : undefined;
126
- var selectableRowIndexes = useMemo(function () {
127
- return rows.flatMap(function (registration, rowIndex) {
128
- return registration.type === 'menu-item' ? [rowIndex] : [];
129
- });
130
- }, [rows]);
131
- var selectableRowKeys = selectableRowIndexes.map(function (index) {
132
- var _rows$index;
133
- return (_rows$index = rows[index]) === null || _rows$index === void 0 ? void 0 : _rows$index.key;
134
- }).join(',');
135
- var selectableItemCount = selectableRowIndexes.length + (menuModel.footer ? 1 : 0);
136
- useLayoutEffect(function () {
137
- var initialItemIndex = selectableItemCount > 0 ? 0 : -1;
138
- selectedItemIndexRef.current = initialItemIndex;
139
- setSelectedItemIndex(initialItemIndex);
140
- }, [query, selectableItemCount, selectableRowKeys]);
141
- useLayoutEffect(function () {
142
- setPreviewActivation(undefined);
143
- }, [menuModel, query]);
144
- var selectActiveItem = useCallback(function (_mode) {
145
- var rowIndex = selectableRowIndexes[selectedItemIndex];
146
- var selectedId = rowIndex !== undefined ? getTypeAheadItemId(listId, rowIndex) : menuModel.footer && selectedItemIndex === selectableRowIndexes.length ? getTypeAheadGlobalViewMoreId(listId) : undefined;
147
- if (selectedId) {
148
- var _menuRef$current;
149
- (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 || (_menuRef$current = _menuRef$current.ownerDocument.getElementById(selectedId)) === null || _menuRef$current === void 0 || _menuRef$current.click();
150
- }
151
- }, [listId, menuModel.footer, selectableRowIndexes, selectedItemIndex]);
152
- var setKeyboardPreview = useCallback(function (itemIndex) {
153
- var rowIndex = selectableRowIndexes[itemIndex];
154
- var registration = rowIndex === undefined ? undefined : rows[rowIndex];
155
- setPreviewActivation((registration === null || registration === void 0 ? void 0 : registration.type) === 'menu-item' ? {
156
- itemKey: registration.key,
157
- menuModel: menuModel,
158
- source: 'keyboard'
159
- } : undefined);
160
- }, [menuModel, rows, selectableRowIndexes]);
161
- var selectNextItem = useCallback(function () {
162
- var currentIndex = selectedItemIndexRef.current;
163
- var nextIndex = selectableItemCount === 0 ? -1 : currentIndex < 0 || currentIndex === selectableItemCount - 1 ? 0 : currentIndex + 1;
164
- selectedItemIndexRef.current = nextIndex;
165
- setSelectedItemIndex(nextIndex);
166
- setKeyboardPreview(nextIndex);
167
- }, [selectableItemCount, setKeyboardPreview]);
168
- var selectPreviousItem = useCallback(function () {
169
- var currentIndex = selectedItemIndexRef.current;
170
- var previousIndex = selectableItemCount === 0 ? -1 : currentIndex <= 0 ? selectableItemCount - 1 : currentIndex - 1;
171
- selectedItemIndexRef.current = previousIndex;
172
- setSelectedItemIndex(previousIndex);
173
- setKeyboardPreview(previousIndex);
174
- }, [selectableItemCount, setKeyboardPreview]);
175
- var onItemHover = useCallback(function (itemIndex, itemKey) {
176
- selectedItemIndexRef.current = itemIndex;
177
- setSelectedItemIndex(itemIndex);
178
- setPreviewActivation(function (current) {
179
- if ((current === null || current === void 0 ? void 0 : current.itemKey) === itemKey && (current === null || current === void 0 ? void 0 : current.menuModel) === menuModel && (current === null || current === void 0 ? void 0 : current.source) === 'pointer') {
180
- return current;
181
- }
182
- return itemKey ? {
183
- itemKey: itemKey,
184
- menuModel: menuModel,
185
- source: 'pointer'
186
- } : undefined;
187
- });
188
- }, [menuModel]);
189
- var onItemLeave = useCallback(function (itemKey) {
190
- setPreviewActivation(function (current) {
191
- return (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current;
192
- });
193
- }, []);
194
- var onItemVisibilityChange = useCallback(function (itemKey, isVisible) {
195
- if (!isVisible) {
196
- setPreviewActivation(function (current) {
197
- return (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current;
105
+ queueMicrotask(function () {
106
+ return performTypeAheadSelection(editorView)({
107
+ handler: triggerHandler,
108
+ query: query,
109
+ selectItem: selectItem
198
110
  });
199
- }
200
- }, []);
201
- var typeAheadContextValue = useMemo(function () {
111
+ });
112
+ }, [editorView, onClose, query, triggerHandler]);
113
+ var registeredMenu = useMemo(function () {
202
114
  return {
203
- activePreviewItemKey: activePreviewItemKey,
204
- api: api,
115
+ components: components,
116
+ onClose: onClose,
117
+ maxHeight: maxHeight,
118
+ registerInteraction: registerInteraction,
205
119
  editorView: editorView,
206
- inputMethod: surface.inputMethod,
207
- menuOpenId: typeAheadSurfaceContext.menuOpenId,
208
- onClose: closeMenu,
209
- popupsMountPoint: popupsMountPoint,
120
+ getItemRank: triggerHandler.getRegisteredItemRank,
121
+ isOffline: isOffline,
122
+ menuOpenId: menuOpenId,
123
+ portalMountPoint: popupsMountPoint,
124
+ rootComponent: rootComponent,
210
125
  query: query,
211
- surfaceContext: surfaceContext,
212
- triggerHandler: triggerHandler
126
+ select: select,
127
+ surfaceContext: surfaceContext
213
128
  };
214
- }, [activePreviewItemKey, api, editorView, closeMenu, popupsMountPoint, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
215
- var noOp = useCallback(function () {}, []);
216
- var SurfaceProvider = surface.Provider;
217
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputQuery, {
218
- activeDescendantId: selectableRowIndexes[selectedItemIndex] !== undefined ? getTypeAheadItemId(listId, selectableRowIndexes[selectedItemIndex]) : menuModel.footer && selectedItemIndex === selectableRowIndexes.length ? getTypeAheadGlobalViewMoreId(listId) : undefined,
219
- cancel: cancel,
129
+ }, [onClose, maxHeight, registerInteraction, components, editorView, triggerHandler.getRegisteredItemRank, isOffline, menuOpenId, popupsMountPoint, rootComponent, query, select, surfaceContext]);
130
+ return /*#__PURE__*/React.createElement(RegisteredMenuContext.Provider, {
131
+ value: registeredMenu
132
+ }, /*#__PURE__*/React.createElement(InputQuery, {
133
+ menuInteraction: menuInteraction,
134
+ cancel: cancelMenu,
220
135
  editorView: editorView,
221
- forceFocus: forceFocus,
222
- listId: listId,
223
- onItemSelect: selectActiveItem,
224
- onQueryChange: setQuery,
136
+ forceFocus: props.forceFocus,
137
+ onItemSelect: noOp,
138
+ onQueryChange: props.setQuery,
225
139
  onQueryFocus: noOp,
226
- onUndoRedo: onUndoRedo,
227
- optionCount: selectableItemCount,
228
- reopenQuery: reopenQuery,
229
- selectNextItem: selectNextItem,
230
- selectPreviousItem: selectPreviousItem,
140
+ onUndoRedo: props.onUndoRedo,
141
+ optionCount: 0,
142
+ reopenQuery: props.reopenQuery,
143
+ selectNextItem: noOp,
144
+ selectPreviousItem: noOp,
231
145
  shouldKeepOpenOnRegisteredMenu: true,
232
146
  triggerQueryPrefix: triggerHandler.trigger
233
- }), /*#__PURE__*/React.createElement(Popup, {
234
- ariaLabel: null,
235
- boundariesElement: popupsBoundariesElement,
236
- fitHeight: menuHeight,
237
- fitWidth: MENU_WIDTH,
147
+ }), Root && /*#__PURE__*/React.createElement(Popup, {
148
+ zIndex: akEditorFloatingDialogZIndex,
149
+ target: props.anchorElement,
238
150
  mountTo: popupsMountPoint,
151
+ boundariesElement: props.popupsBoundariesElement,
152
+ scrollableElement: props.popupsScrollableElement,
153
+ fitHeight: maxHeight,
154
+ fitWidth: 320,
239
155
  offset: POPUP_OFFSET,
240
- preventOverflow: true,
241
- scrollableElement: popupsScrollableElement,
242
- target: anchorElement,
243
- zIndex: akEditorFloatingDialogZIndex
156
+ ariaLabel: null,
157
+ preventOverflow: true
244
158
  }, /*#__PURE__*/React.createElement("div", {
245
- ref: menuRef,
246
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Parent overlays use this class to restore pointer interaction.
247
- className: ax([styles.menu, "fabric-editor-typeahead"]),
159
+ // Legacy host integrations also use this popup selector.
160
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Preserve the typeahead popup selector.
161
+ className: ax([styles.popup, "fabric-editor-typeahead"]),
248
162
  "data-registered-type-ahead-menu": "",
249
- "data-testid": "registered-type-ahead-menu"
250
- }, /*#__PURE__*/React.createElement(TypeAheadProvider, {
251
- value: typeAheadContextValue
252
- }, /*#__PURE__*/React.createElement(SurfaceProvider, null, /*#__PURE__*/React.createElement(TypeAheadMenuRenderer, {
253
- Item: surface.Item,
254
- listLabel: surface.listLabel,
255
- listId: listId,
256
- maxHeight: Math.max(0, menuHeight),
257
- model: menuModel,
258
- query: query,
259
- hasScrollPadding: true,
260
- onItemHover: onItemHover,
261
- onItemLeave: onItemLeave,
262
- onItemVisibilityChange: onItemVisibilityChange,
263
- selectedItemIndex: selectedItemIndex
264
- }))))));
163
+ "data-testid": "registered-type-ahead-menu",
164
+ hidden: !menuInteraction
165
+ }, menu)));
265
166
  };
@@ -1,6 +1,7 @@
1
- import type { QuickInsertSelectionHandler } from '@atlaskit/editor-common/quick-insert/context';
1
+ import type { InsertContentCallback } from '@atlaskit/editor-common/insert';
2
2
  import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
3
3
  import type { TypeAheadHandler, TypeAheadItem } from '@atlaskit/editor-common/types/type-ahead';
4
+ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
4
5
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
6
  type Props = {
6
7
  handler: TypeAheadHandler;
@@ -10,10 +11,9 @@ type Props = {
10
11
  sourceListItem: Array<TypeAheadItem>;
11
12
  };
12
13
  export declare const insertTypeAheadItem: (view: EditorView) => ({ item, handler, mode, query, sourceListItem }: Props) => void;
13
- export declare const performTypeAheadSelection: (view: EditorView) => ({ inputMethod, selectionHandler, handler, query, }: {
14
+ export declare const performTypeAheadSelection: (view: EditorView) => ({ handler, query, selectItem, }: {
14
15
  handler: TypeAheadHandler;
15
- inputMethod: Parameters<QuickInsertSelectionHandler>[0]['source'];
16
16
  query: string;
17
- selectionHandler: QuickInsertSelectionHandler;
17
+ selectItem: (insert: InsertContentCallback) => Transaction | false | void;
18
18
  }) => void;
19
19
  export {};
@@ -4,6 +4,7 @@
4
4
  */
5
5
  import React from 'react';
6
6
  import { jsx } from '@emotion/react';
7
+ import type { RegisteredMenuInteraction } from '@atlaskit/editor-common/registered-menu';
7
8
  import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
8
9
  import type { TypeAheadItem } from '@atlaskit/editor-common/types/type-ahead';
9
10
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -19,12 +20,14 @@ type InputQueryProps = {
19
20
  }) => void;
20
21
  editorView: EditorView;
21
22
  forceFocus: boolean;
23
+ inputLabel?: string;
22
24
  /**
23
25
  * @private
24
26
  * @deprecated Pass `optionCount` instead.
25
27
  */
26
28
  items?: TypeAheadItem[];
27
29
  listId?: string;
30
+ menuInteraction?: RegisteredMenuInteraction;
28
31
  onItemSelect: (mode: SelectItemMode) => void;
29
32
  onQueryChange: (query: string) => void;
30
33
  onQueryFocus: () => void;
@@ -36,5 +39,5 @@ type InputQueryProps = {
36
39
  shouldKeepOpenOnRegisteredMenu?: boolean;
37
40
  triggerQueryPrefix: string;
38
41
  };
39
- export declare const InputQuery: React.MemoExoticComponent<({ activeDescendantId, triggerQueryPrefix, cancel, onQueryChange, onItemSelect, selectNextItem, selectPreviousItem, forceFocus, reopenQuery, onQueryFocus, onUndoRedo, editorView, items, listId, optionCount, shouldKeepOpenOnRegisteredMenu, }: InputQueryProps) => jsx.JSX.Element>;
42
+ export declare const InputQuery: React.MemoExoticComponent<({ activeDescendantId, triggerQueryPrefix, cancel, onQueryChange, onItemSelect, selectNextItem, selectPreviousItem, forceFocus, reopenQuery, onQueryFocus, onUndoRedo, editorView, items, inputLabel, menuInteraction, listId, optionCount, shouldKeepOpenOnRegisteredMenu, }: InputQueryProps) => jsx.JSX.Element>;
40
43
  export {};
@@ -8,7 +8,6 @@ import type { TypeAheadHandler } from '@atlaskit/editor-common/types/type-ahead'
8
8
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
9
9
  import type { CloseSelectionOptions } from '../../pm-plugins/constants';
10
10
  import type { TypeAheadPlugin } from '../../typeAheadPluginType';
11
- import type { TypeAheadSurface } from './typeAheadSurfaces';
12
11
  type Props = {
13
12
  anchorElement: HTMLElement;
14
13
  api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
@@ -27,10 +26,10 @@ type Props = {
27
26
  popupsMountPoint?: HTMLElement;
28
27
  popupsScrollableElement?: HTMLElement;
29
28
  query: string;
29
+ registeredMenuKey: string;
30
30
  reopenQuery?: string;
31
31
  setQuery: (query: string) => void;
32
- surface: TypeAheadSurface;
33
32
  triggerHandler: TypeAheadHandler;
34
33
  };
35
- export declare const RegisteredTypeAheadMenu: ({ anchorElement, api, cancel, editorView, forceFocus, maxHeight, onClose, onUndoRedo, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, query, reopenQuery, setQuery, surface, triggerHandler, }: Props) => React.JSX.Element;
34
+ export declare const RegisteredTypeAheadMenu: (props: Props) => React.JSX.Element;
36
35
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-type-ahead",
3
- "version": "30.0.5",
3
+ "version": "31.0.0",
4
4
  "description": "Type-ahead plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -23,11 +23,11 @@
23
23
  "dependencies": {
24
24
  "@atlaskit/adf-schema": "^57.7.0",
25
25
  "@atlaskit/css": "^1.1.0",
26
- "@atlaskit/editor-plugin-analytics": "^29.0.0",
27
- "@atlaskit/editor-plugin-connectivity": "^29.0.0",
28
- "@atlaskit/editor-plugin-context-panel": "^31.0.0",
29
- "@atlaskit/editor-plugin-metrics": "^30.0.0",
30
- "@atlaskit/editor-plugin-ui-control-registry": "^23.0.0",
26
+ "@atlaskit/editor-plugin-analytics": "^30.0.0",
27
+ "@atlaskit/editor-plugin-connectivity": "^30.0.0",
28
+ "@atlaskit/editor-plugin-context-panel": "^32.0.0",
29
+ "@atlaskit/editor-plugin-metrics": "^31.0.0",
30
+ "@atlaskit/editor-plugin-ui-control-registry": "^24.0.0",
31
31
  "@atlaskit/editor-prosemirror": "^9.0.0",
32
32
  "@atlaskit/editor-shared-styles": "^4.6.0",
33
33
  "@atlaskit/editor-ui-control-model": "^2.10.0",
@@ -42,8 +42,8 @@
42
42
  "@atlaskit/primitives": "^22.6.0",
43
43
  "@atlaskit/prosemirror-history": "^1.3.0",
44
44
  "@atlaskit/prosemirror-input-rules": "^4.1.0",
45
- "@atlaskit/tmp-editor-statsig": "^246.0.0",
46
- "@atlaskit/tokens": "^20.7.0",
45
+ "@atlaskit/tmp-editor-statsig": "^246.1.0",
46
+ "@atlaskit/tokens": "^20.8.0",
47
47
  "@atlaskit/visually-hidden": "^4.4.0",
48
48
  "@babel/runtime": "^7.0.0",
49
49
  "@emotion/react": "^11.7.1",
@@ -54,7 +54,7 @@
54
54
  "w3c-keyname": "^2.1.8"
55
55
  },
56
56
  "peerDependencies": {
57
- "@atlaskit/editor-common": "^133.6.0",
57
+ "@atlaskit/editor-common": "^134.0.0",
58
58
  "react": "^18.2.0 || ^19.2.0",
59
59
  "react-dom": "^18.2.0 || ^19.2.0",
60
60
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -1,10 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.PassThrough = void 0;
7
- var PassThrough = exports.PassThrough = function PassThrough(_ref) {
8
- var children = _ref.children;
9
- return children;
10
- };
@@ -1,8 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.TypeAheadContext = void 0;
7
- var _react = require("react");
8
- var TypeAheadContext = exports.TypeAheadContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -1,48 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime/helpers/typeof");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.TypeAheadItemRow = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _getTypeAheadItemId = require("./getTypeAheadItemId");
10
- 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); }
11
- var TypeAheadItemRow = exports.TypeAheadItemRow = function TypeAheadItemRow(_ref) {
12
- var isSelected = _ref.isSelected,
13
- itemIndex = _ref.itemIndex,
14
- Item = _ref.Item,
15
- listId = _ref.listId,
16
- onItemHover = _ref.onItemHover,
17
- onItemLeave = _ref.onItemLeave,
18
- onItemVisibilityChange = _ref.onItemVisibilityChange,
19
- registration = _ref.registration,
20
- rowIndex = _ref.rowIndex,
21
- isVisible = _ref.isVisible;
22
- var onMouseMove = (0, _react.useCallback)(function () {
23
- return onItemHover(itemIndex, registration.key);
24
- }, [itemIndex, onItemHover, registration.key]);
25
- var onMouseLeave = (0, _react.useCallback)(function () {
26
- return onItemLeave(registration.key);
27
- }, [onItemLeave, registration.key]);
28
- var onBlur = (0, _react.useCallback)(function (event) {
29
- if (!event.currentTarget.contains(event.relatedTarget)) {
30
- onItemLeave(registration.key);
31
- }
32
- }, [onItemLeave, registration.key]);
33
- (0, _react.useLayoutEffect)(function () {
34
- onItemVisibilityChange(registration.key, isVisible);
35
- return function () {
36
- return onItemVisibilityChange(registration.key, false);
37
- };
38
- }, [isVisible, onItemVisibilityChange, registration.key]);
39
- return /*#__PURE__*/_react.default.createElement("div", {
40
- onBlur: onBlur,
41
- onMouseLeave: onMouseLeave,
42
- onMouseMove: onMouseMove
43
- }, /*#__PURE__*/_react.default.createElement(Item, {
44
- id: (0, _getTypeAheadItemId.getTypeAheadItemId)(listId, rowIndex),
45
- isSelected: isSelected,
46
- registration: registration
47
- }));
48
- };
@@ -1,3 +0,0 @@
1
- ._15a5nqa1{border-top-style:solid}
2
- ._1i531l7x{border-top-color:var(--ds-border,#0b120e24)}
3
- ._uwhke4h9{border-top-width:var(--ds-border-width,1px)}
@@ -1,33 +0,0 @@
1
- /* TypeAheadMenuFooter.tsx generated by @compiled/babel-plugin v3.0.2 */
2
- "use strict";
3
-
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.TypeAheadMenuFooter = void 0;
9
- require("./TypeAheadMenuFooter.compiled.css");
10
- var _runtime = require("@compiled/react/runtime");
11
- var _react = _interopRequireDefault(require("react"));
12
- var _box = require("@atlaskit/primitives/compiled/box");
13
- var styles = {
14
- footer: "_1i531l7x _15a5nqa1 _uwhke4h9"
15
- };
16
- var TypeAheadMenuFooter = exports.TypeAheadMenuFooter = function TypeAheadMenuFooter(_ref) {
17
- var id = _ref.id,
18
- isSelected = _ref.isSelected,
19
- Item = _ref.Item,
20
- onMouseMove = _ref.onMouseMove,
21
- registration = _ref.registration,
22
- _ref$hasScrollPadding = _ref.hasScrollPadding,
23
- hasScrollPadding = _ref$hasScrollPadding === void 0 ? false : _ref$hasScrollPadding;
24
- return /*#__PURE__*/_react.default.createElement(_box.Box, {
25
- onMouseMove: onMouseMove,
26
- paddingBlockEnd: hasScrollPadding ? 'space.075' : undefined,
27
- xcss: styles.footer
28
- }, /*#__PURE__*/_react.default.createElement(Item, {
29
- id: id,
30
- isSelected: isSelected,
31
- registration: registration
32
- }));
33
- };