@atlaskit/editor-plugin-type-ahead 28.0.4 → 28.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/editor-plugin-type-ahead
2
2
 
3
+ ## 28.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`f93da47c0d069`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f93da47c0d069) -
8
+ Add shared illustrated empty states and search outcome analytics for registered slash, Plus and
9
+ Element Browser searches under platform_editor_slash_command. Refresh resolved registrations on
10
+ search edits and retain eligible Ask Rovo and host Marketplace recovery. Remove duplicate top
11
+ spacing in the Plus menu and show its previews only for directly hovered or keyboard-selected
12
+ items. Subscribe all three registered entry points to live registry updates and rebuild their
13
+ models on search changes, keeping selection and category state valid as items arrive or disappear.
14
+ Omit the Plus footer divider when only the generic empty state is shown.
15
+ - Updated dependencies
16
+
17
+ ## 28.0.5
18
+
19
+ ### Patch Changes
20
+
21
+ - Updated dependencies
22
+
3
23
  ## 28.0.4
4
24
 
5
25
  ### Patch Changes
@@ -2,9 +2,9 @@
2
2
  ._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
3
3
  ._18m915vq{overflow-y:hidden}
4
4
  ._1bsbnklw{width:20pc}
5
- ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
5
+ ._1q51idpf{padding-block-start:0}
6
6
  ._1reo15vq{overflow-x:hidden}
7
- ._85i512x7{padding-block-end:var(--ds-space-075,6px)}
7
+ ._85i5idpf{padding-block-end:0}
8
8
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
9
9
  ._r06hglyw{-webkit-appearance:none;appearance:none}
10
10
  ._vchhusvi{box-sizing:border-box}
@@ -15,11 +15,11 @@ var _reactIntl = require("react-intl");
15
15
  var _Popup = _interopRequireDefault(require("@atlaskit/editor-common/Popup"));
16
16
  var _registeredMenuModel = require("@atlaskit/editor-common/quick-insert/registered-menu-model");
17
17
  var _useMenuPopupSizing = require("@atlaskit/editor-common/quick-insert/use-menu-popup-sizing");
18
+ var _useSearchAnalytics = require("@atlaskit/editor-common/quick-insert/use-search-analytics");
18
19
  var _typeAheadIsSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-is-section-overflow-item-key");
19
20
  var _typeAheadSurfaceContext = require("@atlaskit/editor-common/type-ahead-surface-context");
20
21
  var _constants = require("@atlaskit/editor-shared-styles/constants");
21
22
  var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
22
- var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
23
23
  var _InputQuery = require("../InputQuery");
24
24
  var _getTypeAheadGlobalViewMoreId = require("./getTypeAheadGlobalViewMoreId");
25
25
  var _getTypeAheadItemId = require("./getTypeAheadItemId");
@@ -27,10 +27,9 @@ var _TypeAheadMenuRenderer = require("./TypeAheadMenuRenderer");
27
27
  var _TypeAheadProvider = require("./TypeAheadProvider");
28
28
  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); }
29
29
  var styles = {
30
- menu: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _16qs130s _1q51u2gc _85i512x7 _1bsbnklw"
30
+ menu: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _16qs130s _1q51idpf _85i5idpf _1bsbnklw"
31
31
  };
32
32
  var DEFAULT_MENU_MAX_HEIGHT = 480;
33
- var MENU_VERTICAL_PADDING = 14;
34
33
  var MENU_WIDTH = 320;
35
34
  var POPUP_OFFSET = [0, 8];
36
35
  var EMPTY_COMPONENTS = [];
@@ -38,7 +37,7 @@ var subscribeToNothing = function subscribeToNothing() {
38
37
  return function () {};
39
38
  };
40
39
  var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
41
- var _api$uiControlRegistr2, _api$uiControlRegistr3;
40
+ var _api$uiControlRegistr2, _api$uiControlRegistr3, _api$analytics;
42
41
  var anchorElement = _ref.anchorElement,
43
42
  api = _ref.api,
44
43
  cancel = _ref.cancel,
@@ -89,7 +88,6 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
89
88
  return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
90
89
  }, [api, surface.root.key]);
91
90
  var components = (0, _react.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);
92
- var isSlashCommandEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
93
91
  var hasSectionOverflowItems = (0, _react.useMemo)(function () {
94
92
  return components.some(function (_ref2) {
95
93
  var key = _ref2.key;
@@ -103,13 +101,32 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
103
101
  getItemRank: triggerHandler.getRegisteredItemRank,
104
102
  query: query,
105
103
  rootComponent: surface.root,
106
- selectCategoryItems: hasSectionOverflowItems && isSlashCommandEnabled ? _registeredMenuModel.selectQuickInsertCategoryItems : undefined,
104
+ selectCategoryItems: hasSectionOverflowItems ? _registeredMenuModel.selectQuickInsertCategoryItems : undefined,
107
105
  surfaceContext: surfaceContext
108
106
  });
109
- }, [components, formatMessage, hasSectionOverflowItems, isSlashCommandEnabled, query, surfaceContext, surface.root, triggerHandler.getRegisteredItemRank]);
107
+ }, [components, formatMessage, hasSectionOverflowItems, query, surfaceContext, surface.root, triggerHandler.getRegisteredItemRank]);
110
108
  var rows = (0, _react.useMemo)(function () {
111
109
  return (0, _registeredMenuModel.getQuickInsertMenuRows)(menuModel);
112
110
  }, [menuModel]);
111
+ var searchResultCount = (0, _react.useMemo)(function () {
112
+ return menuModel.sections.reduce(function (count, section) {
113
+ return count + section.filter(function (_ref3) {
114
+ var key = _ref3.key,
115
+ type = _ref3.type;
116
+ return type === 'menu-item' && !(0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(key);
117
+ }).length;
118
+ }, 0);
119
+ }, [menuModel.sections]);
120
+ var flushSearchAnalytics = (0, _useSearchAnalytics.useQuickInsertSearchAnalytics)({
121
+ fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent,
122
+ query: query,
123
+ resultCount: searchResultCount,
124
+ surface: 'typeahead'
125
+ });
126
+ var closeMenu = (0, _react.useCallback)(function () {
127
+ flushSearchAnalytics();
128
+ onClose();
129
+ }, [flushSearchAnalytics, onClose]);
113
130
  var _useState5 = (0, _react.useState)(),
114
131
  _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
115
132
  previewActivation = _useState6[0],
@@ -197,13 +214,13 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
197
214
  editorView: editorView,
198
215
  inputMethod: surface.inputMethod,
199
216
  menuOpenId: typeAheadSurfaceContext.menuOpenId,
200
- onClose: onClose,
217
+ onClose: closeMenu,
201
218
  popupsMountPoint: popupsMountPoint,
202
219
  query: query,
203
220
  surfaceContext: surfaceContext,
204
221
  triggerHandler: triggerHandler
205
222
  };
206
- }, [activePreviewItemKey, api, editorView, onClose, popupsMountPoint, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
223
+ }, [activePreviewItemKey, api, editorView, closeMenu, popupsMountPoint, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
207
224
  var noOp = (0, _react.useCallback)(function () {}, []);
208
225
  var SurfaceProvider = surface.Provider;
209
226
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InputQuery.InputQuery, {
@@ -245,8 +262,10 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
245
262
  Item: surface.Item,
246
263
  listLabel: surface.listLabel,
247
264
  listId: listId,
248
- maxHeight: Math.max(0, menuHeight - MENU_VERTICAL_PADDING),
265
+ maxHeight: Math.max(0, menuHeight),
249
266
  model: menuModel,
267
+ query: query,
268
+ hasScrollPadding: true,
250
269
  onItemHover: onItemHover,
251
270
  onItemLeave: onItemLeave,
252
271
  onItemVisibilityChange: onItemVisibilityChange,
@@ -18,9 +18,12 @@ var TypeAheadMenuFooter = exports.TypeAheadMenuFooter = function TypeAheadMenuFo
18
18
  isSelected = _ref.isSelected,
19
19
  Item = _ref.Item,
20
20
  onMouseMove = _ref.onMouseMove,
21
- registration = _ref.registration;
21
+ registration = _ref.registration,
22
+ _ref$hasScrollPadding = _ref.hasScrollPadding,
23
+ hasScrollPadding = _ref$hasScrollPadding === void 0 ? false : _ref$hasScrollPadding;
22
24
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
23
25
  onMouseMove: onMouseMove,
26
+ paddingBlockEnd: hasScrollPadding ? 'space.075' : undefined,
24
27
  xcss: styles.footer
25
28
  }, /*#__PURE__*/_react.default.createElement(Item, {
26
29
  id: id,
@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
11
11
  var _reactIntl = require("react-intl");
12
12
  var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
13
13
  var _List = require("react-virtualized/dist/commonjs/List");
14
+ var _emptyState = require("@atlaskit/editor-common/quick-insert/empty-state");
14
15
  var _registeredMenuModel = require("@atlaskit/editor-common/quick-insert/registered-menu-model");
15
16
  var _useMenuListHeight2 = require("@atlaskit/editor-common/quick-insert/use-menu-list-height");
16
17
  var _messages = require("@atlaskit/editor-common/type-ahead/messages");
@@ -27,13 +28,18 @@ var LIST_WIDTH = 320;
27
28
  var ESTIMATED_ROW_HEIGHT = 44;
28
29
  // 44px item + 1px separator.
29
30
  var MENU_FOOTER_HEIGHT = 45;
31
+ var MENU_FOOTER_HEIGHT_WITH_SCROLL_PADDING = 51;
30
32
  var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
31
- var _model$root$component;
33
+ var _model$root$component, _model$fallbackItems;
32
34
  var Item = _ref.Item,
33
35
  listLabel = _ref.listLabel,
34
36
  listId = _ref.listId,
35
37
  maxHeight = _ref.maxHeight,
36
38
  model = _ref.model,
39
+ _ref$query = _ref.query,
40
+ query = _ref$query === void 0 ? '' : _ref$query,
41
+ _ref$hasScrollPadding = _ref.hasScrollPadding,
42
+ hasScrollPadding = _ref$hasScrollPadding === void 0 ? false : _ref$hasScrollPadding,
37
43
  onItemHover = _ref.onItemHover,
38
44
  onItemLeave = _ref.onItemLeave,
39
45
  onItemVisibilityChange = _ref.onItemVisibilityChange,
@@ -110,6 +116,7 @@ var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMe
110
116
  onItemLeave: onItemLeave,
111
117
  onItemVisibilityChange: onItemVisibilityChange,
112
118
  rows: rows,
119
+ hasScrollPadding: hasScrollPadding,
113
120
  selectedItemIndex: selectedItemIndex
114
121
  });
115
122
  var footerItemIndex = itemIndexByRowIndex.size;
@@ -120,7 +127,7 @@ var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMe
120
127
  return null;
121
128
  }
122
129
  var RootComponent = (_model$root$component = model.root.component) !== null && _model$root$component !== void 0 ? _model$root$component : _PassThrough.PassThrough;
123
- var listMaxHeight = Math.max(0, maxHeight - (model.footer ? MENU_FOOTER_HEIGHT : 0));
130
+ var listMaxHeight = Math.max(0, maxHeight - (model.footer ? hasScrollPadding ? MENU_FOOTER_HEIGHT_WITH_SCROLL_PADDING : MENU_FOOTER_HEIGHT : 0));
124
131
  var hasListboxContent = rows.length > 0 || model.footer !== undefined;
125
132
  return /*#__PURE__*/_react.default.createElement(RootComponent, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
126
133
  "aria-label": hasListboxContent ? intl.formatMessage(listLabel) : undefined,
@@ -138,6 +145,9 @@ var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMe
138
145
  rowRenderer: renderRow,
139
146
  scrollToAlignment: "auto",
140
147
  width: LIST_WIDTH
148
+ }) : query !== '' && ((_model$fallbackItems = model.fallbackItems) === null || _model$fallbackItems === void 0 ? void 0 : _model$fallbackItems.length) === 0 ? /*#__PURE__*/_react.default.createElement(_emptyState.QuickInsertEmptyState, {
149
+ mode: "inline",
150
+ spacing: "spacious"
141
151
  }) : model.fallbackItems === undefined ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
142
152
  paddingBlock: "space.150",
143
153
  paddingInline: "space.250",
@@ -150,6 +160,7 @@ var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMe
150
160
  isSelected: selectedItemIndex === footerItemIndex,
151
161
  Item: Item,
152
162
  onMouseMove: onFooterItemHover,
153
- registration: model.footer
163
+ registration: model.footer,
164
+ hasScrollPadding: hasScrollPadding
154
165
  })));
155
166
  };
@@ -7,12 +7,15 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.createTypeAheadRowRenderer = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
10
+ var _compiled = require("@atlaskit/primitives/compiled");
10
11
  var _ListRow = require("../ListRow");
11
12
  var _TypeAheadItemRow = require("./TypeAheadItemRow");
12
13
  var _TypeAheadSectionRow = require("./TypeAheadSectionRow");
13
14
  var noOp = function noOp() {};
14
15
  var createTypeAheadRowRenderer = exports.createTypeAheadRowRenderer = function createTypeAheadRowRenderer(_ref) {
15
16
  var cache = _ref.cache,
17
+ _ref$hasScrollPadding = _ref.hasScrollPadding,
18
+ hasScrollPadding = _ref$hasScrollPadding === void 0 ? false : _ref$hasScrollPadding,
16
19
  onMeasured = _ref.onMeasured,
17
20
  itemIndexByRowIndex = _ref.itemIndexByRowIndex,
18
21
  Item = _ref.Item,
@@ -34,6 +37,20 @@ var createTypeAheadRowRenderer = exports.createTypeAheadRowRenderer = function c
34
37
  return null;
35
38
  }
36
39
  var itemIndex = itemIndexByRowIndex.get(index);
40
+ var rowContent = registration.type === 'menu-section' ? /*#__PURE__*/_react.default.createElement(_TypeAheadSectionRow.TypeAheadSectionRow, {
41
+ registration: registration
42
+ }) : /*#__PURE__*/_react.default.createElement(_TypeAheadItemRow.TypeAheadItemRow, {
43
+ Item: Item,
44
+ isSelected: itemIndex === selectedItemIndex,
45
+ itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
46
+ listId: listId,
47
+ onItemHover: onItemHover,
48
+ onItemLeave: onItemLeave,
49
+ onItemVisibilityChange: onItemVisibilityChange,
50
+ isVisible: isVisible,
51
+ registration: registration,
52
+ rowIndex: index
53
+ });
37
54
  return /*#__PURE__*/_react.default.createElement(_CellMeasurer.CellMeasurer, {
38
55
  key: key,
39
56
  cache: cache,
@@ -50,20 +67,10 @@ var createTypeAheadRowRenderer = exports.createTypeAheadRowRenderer = function c
50
67
  onMeasured: onMeasured,
51
68
  onMouseMove: noOp,
52
69
  style: style
53
- }, registration.type === 'menu-section' ? /*#__PURE__*/_react.default.createElement(_TypeAheadSectionRow.TypeAheadSectionRow, {
54
- registration: registration
55
- }) : /*#__PURE__*/_react.default.createElement(_TypeAheadItemRow.TypeAheadItemRow, {
56
- Item: Item,
57
- isSelected: itemIndex === selectedItemIndex,
58
- itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
59
- listId: listId,
60
- onItemHover: onItemHover,
61
- onItemLeave: onItemLeave,
62
- onItemVisibilityChange: onItemVisibilityChange,
63
- isVisible: isVisible,
64
- registration: registration,
65
- rowIndex: index
66
- }));
70
+ }, hasScrollPadding ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
71
+ paddingBlockStart: index === 0 ? 'space.100' : undefined,
72
+ paddingBlockEnd: index === rows.length - 1 ? 'space.100' : undefined
73
+ }, rowContent) : rowContent);
67
74
  });
68
75
  };
69
76
  };
@@ -2,9 +2,9 @@
2
2
  ._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
3
3
  ._18m915vq{overflow-y:hidden}
4
4
  ._1bsbnklw{width:20pc}
5
- ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
5
+ ._1q51idpf{padding-block-start:0}
6
6
  ._1reo15vq{overflow-x:hidden}
7
- ._85i512x7{padding-block-end:var(--ds-space-075,6px)}
7
+ ._85i5idpf{padding-block-end:0}
8
8
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
9
9
  ._r06hglyw{-webkit-appearance:none;appearance:none}
10
10
  ._vchhusvi{box-sizing:border-box}
@@ -6,21 +6,20 @@ import { useIntl } from 'react-intl';
6
6
  import Popup from '@atlaskit/editor-common/Popup';
7
7
  import { getQuickInsertMenuModel, getQuickInsertMenuRows, selectQuickInsertCategoryItems } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
8
8
  import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
9
+ import { useQuickInsertSearchAnalytics } from '@atlaskit/editor-common/quick-insert/use-search-analytics';
9
10
  import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
10
11
  import { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
11
12
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles/constants';
12
13
  import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
13
- import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
14
14
  import { InputQuery } from '../InputQuery';
15
15
  import { getTypeAheadGlobalViewMoreId } from './getTypeAheadGlobalViewMoreId';
16
16
  import { getTypeAheadItemId } from './getTypeAheadItemId';
17
17
  import { TypeAheadMenuRenderer } from './TypeAheadMenuRenderer';
18
18
  import { TypeAheadProvider } from './TypeAheadProvider';
19
19
  const styles = {
20
- menu: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _16qs130s _1q51u2gc _85i512x7 _1bsbnklw"
20
+ menu: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _16qs130s _1q51idpf _85i5idpf _1bsbnklw"
21
21
  };
22
22
  const DEFAULT_MENU_MAX_HEIGHT = 480;
23
- const MENU_VERTICAL_PADDING = 14;
24
23
  const MENU_WIDTH = 320;
25
24
  const POPUP_OFFSET = [0, 8];
26
25
  const EMPTY_COMPONENTS = [];
@@ -43,7 +42,7 @@ export const RegisteredTypeAheadMenu = ({
43
42
  surface,
44
43
  triggerHandler
45
44
  }) => {
46
- var _api$uiControlRegistr2, _api$uiControlRegistr3;
45
+ var _api$uiControlRegistr2, _api$uiControlRegistr3, _api$analytics;
47
46
  const menuHeight = useMenuPopupSizing({
48
47
  target: anchorElement,
49
48
  boundariesElement: popupsBoundariesElement,
@@ -69,7 +68,6 @@ export const RegisteredTypeAheadMenu = ({
69
68
  return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
70
69
  }, [api, surface.root.key]);
71
70
  const components = useSyncExternalStore((_api$uiControlRegistr2 = api === null || api === void 0 ? 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);
72
- const isSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
73
71
  const hasSectionOverflowItems = useMemo(() => components.some(({
74
72
  key
75
73
  }) => isSectionOverflowItemKey(key)), [components]);
@@ -79,10 +77,24 @@ export const RegisteredTypeAheadMenu = ({
79
77
  getItemRank: triggerHandler.getRegisteredItemRank,
80
78
  query,
81
79
  rootComponent: surface.root,
82
- selectCategoryItems: hasSectionOverflowItems && isSlashCommandEnabled ? selectQuickInsertCategoryItems : undefined,
80
+ selectCategoryItems: hasSectionOverflowItems ? selectQuickInsertCategoryItems : undefined,
83
81
  surfaceContext
84
- }), [components, formatMessage, hasSectionOverflowItems, isSlashCommandEnabled, query, surfaceContext, surface.root, triggerHandler.getRegisteredItemRank]);
82
+ }), [components, formatMessage, hasSectionOverflowItems, query, surfaceContext, surface.root, triggerHandler.getRegisteredItemRank]);
85
83
  const rows = useMemo(() => getQuickInsertMenuRows(menuModel), [menuModel]);
84
+ const searchResultCount = useMemo(() => menuModel.sections.reduce((count, section) => count + section.filter(({
85
+ key,
86
+ type
87
+ }) => type === 'menu-item' && !isSectionOverflowItemKey(key)).length, 0), [menuModel.sections]);
88
+ const flushSearchAnalytics = useQuickInsertSearchAnalytics({
89
+ fireAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent,
90
+ query,
91
+ resultCount: searchResultCount,
92
+ surface: 'typeahead'
93
+ });
94
+ const closeMenu = useCallback(() => {
95
+ flushSearchAnalytics();
96
+ onClose();
97
+ }, [flushSearchAnalytics, onClose]);
86
98
  const [previewActivation, setPreviewActivation] = useState();
87
99
  const activePreviewItemKey = (previewActivation === null || previewActivation === void 0 ? void 0 : previewActivation.menuModel) === menuModel ? previewActivation.itemKey : undefined;
88
100
  const selectableRowIndexes = useMemo(() => rows.flatMap((registration, rowIndex) => registration.type === 'menu-item' ? [rowIndex] : []), [rows]);
@@ -158,12 +170,12 @@ export const RegisteredTypeAheadMenu = ({
158
170
  editorView,
159
171
  inputMethod: surface.inputMethod,
160
172
  menuOpenId: typeAheadSurfaceContext.menuOpenId,
161
- onClose,
173
+ onClose: closeMenu,
162
174
  popupsMountPoint,
163
175
  query,
164
176
  surfaceContext,
165
177
  triggerHandler
166
- }), [activePreviewItemKey, api, editorView, onClose, popupsMountPoint, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
178
+ }), [activePreviewItemKey, api, editorView, closeMenu, popupsMountPoint, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
167
179
  const noOp = useCallback(() => {}, []);
168
180
  const SurfaceProvider = surface.Provider;
169
181
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputQuery, {
@@ -205,8 +217,10 @@ export const RegisteredTypeAheadMenu = ({
205
217
  Item: surface.Item,
206
218
  listLabel: surface.listLabel,
207
219
  listId: listId,
208
- maxHeight: Math.max(0, menuHeight - MENU_VERTICAL_PADDING),
220
+ maxHeight: Math.max(0, menuHeight),
209
221
  model: menuModel,
222
+ query: query,
223
+ hasScrollPadding: true,
210
224
  onItemHover: onItemHover,
211
225
  onItemLeave: onItemLeave,
212
226
  onItemVisibilityChange: onItemVisibilityChange,
@@ -11,9 +11,11 @@ export const TypeAheadMenuFooter = ({
11
11
  isSelected,
12
12
  Item,
13
13
  onMouseMove,
14
- registration
14
+ registration,
15
+ hasScrollPadding = false
15
16
  }) => /*#__PURE__*/React.createElement(Box, {
16
17
  onMouseMove: onMouseMove,
18
+ paddingBlockEnd: hasScrollPadding ? 'space.075' : undefined,
17
19
  xcss: styles.footer
18
20
  }, /*#__PURE__*/React.createElement(Item, {
19
21
  id: id,
@@ -2,6 +2,7 @@ import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
2
2
  import { useIntl } from 'react-intl';
3
3
  import { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
4
4
  import { List } from 'react-virtualized/dist/commonjs/List';
5
+ import { QuickInsertEmptyState } from '@atlaskit/editor-common/quick-insert/empty-state';
5
6
  import { getQuickInsertMenuRows } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
6
7
  import { useMenuListHeight } from '@atlaskit/editor-common/quick-insert/use-menu-list-height';
7
8
  import { typeAheadListMessages } from '@atlaskit/editor-common/type-ahead/messages';
@@ -14,18 +15,21 @@ const LIST_WIDTH = 320;
14
15
  const ESTIMATED_ROW_HEIGHT = 44;
15
16
  // 44px item + 1px separator.
16
17
  const MENU_FOOTER_HEIGHT = 45;
18
+ const MENU_FOOTER_HEIGHT_WITH_SCROLL_PADDING = 51;
17
19
  export const TypeAheadMenuRenderer = ({
18
20
  Item,
19
21
  listLabel,
20
22
  listId,
21
23
  maxHeight,
22
24
  model,
25
+ query = '',
26
+ hasScrollPadding = false,
23
27
  onItemHover,
24
28
  onItemLeave,
25
29
  onItemVisibilityChange,
26
30
  selectedItemIndex
27
31
  }) => {
28
- var _model$root$component;
32
+ var _model$root$component, _model$fallbackItems;
29
33
  const intl = useIntl();
30
34
  const listRef = useRef(null);
31
35
  const rows = useMemo(() => getQuickInsertMenuRows(model), [model]);
@@ -81,6 +85,7 @@ export const TypeAheadMenuRenderer = ({
81
85
  onItemLeave,
82
86
  onItemVisibilityChange,
83
87
  rows,
88
+ hasScrollPadding,
84
89
  selectedItemIndex
85
90
  });
86
91
  const footerItemIndex = itemIndexByRowIndex.size;
@@ -89,7 +94,7 @@ export const TypeAheadMenuRenderer = ({
89
94
  return null;
90
95
  }
91
96
  const RootComponent = (_model$root$component = model.root.component) !== null && _model$root$component !== void 0 ? _model$root$component : PassThrough;
92
- const listMaxHeight = Math.max(0, maxHeight - (model.footer ? MENU_FOOTER_HEIGHT : 0));
97
+ const listMaxHeight = Math.max(0, maxHeight - (model.footer ? hasScrollPadding ? MENU_FOOTER_HEIGHT_WITH_SCROLL_PADDING : MENU_FOOTER_HEIGHT : 0));
93
98
  const hasListboxContent = rows.length > 0 || model.footer !== undefined;
94
99
  return /*#__PURE__*/React.createElement(RootComponent, null, /*#__PURE__*/React.createElement(Box, {
95
100
  "aria-label": hasListboxContent ? intl.formatMessage(listLabel) : undefined,
@@ -107,6 +112,9 @@ export const TypeAheadMenuRenderer = ({
107
112
  rowRenderer: renderRow,
108
113
  scrollToAlignment: "auto",
109
114
  width: LIST_WIDTH
115
+ }) : query !== '' && ((_model$fallbackItems = model.fallbackItems) === null || _model$fallbackItems === void 0 ? void 0 : _model$fallbackItems.length) === 0 ? /*#__PURE__*/React.createElement(QuickInsertEmptyState, {
116
+ mode: "inline",
117
+ spacing: "spacious"
110
118
  }) : model.fallbackItems === undefined ? /*#__PURE__*/React.createElement(Box, {
111
119
  paddingBlock: "space.150",
112
120
  paddingInline: "space.250",
@@ -119,6 +127,7 @@ export const TypeAheadMenuRenderer = ({
119
127
  isSelected: selectedItemIndex === footerItemIndex,
120
128
  Item: Item,
121
129
  onMouseMove: onFooterItemHover,
122
- registration: model.footer
130
+ registration: model.footer,
131
+ hasScrollPadding: hasScrollPadding
123
132
  })));
124
133
  };
@@ -1,11 +1,13 @@
1
1
  import React from 'react';
2
2
  import { CellMeasurer } from 'react-virtualized/dist/commonjs/CellMeasurer';
3
+ import { Box } from '@atlaskit/primitives/compiled';
3
4
  import { ListRow } from '../ListRow';
4
5
  import { TypeAheadItemRow } from './TypeAheadItemRow';
5
6
  import { TypeAheadSectionRow } from './TypeAheadSectionRow';
6
7
  const noOp = () => {};
7
8
  export const createTypeAheadRowRenderer = ({
8
9
  cache,
10
+ hasScrollPadding = false,
9
11
  onMeasured,
10
12
  itemIndexByRowIndex,
11
13
  Item,
@@ -28,6 +30,20 @@ export const createTypeAheadRowRenderer = ({
28
30
  return null;
29
31
  }
30
32
  const itemIndex = itemIndexByRowIndex.get(index);
33
+ const rowContent = registration.type === 'menu-section' ? /*#__PURE__*/React.createElement(TypeAheadSectionRow, {
34
+ registration: registration
35
+ }) : /*#__PURE__*/React.createElement(TypeAheadItemRow, {
36
+ Item: Item,
37
+ isSelected: itemIndex === selectedItemIndex,
38
+ itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
39
+ listId: listId,
40
+ onItemHover: onItemHover,
41
+ onItemLeave: onItemLeave,
42
+ onItemVisibilityChange: onItemVisibilityChange,
43
+ isVisible: isVisible,
44
+ registration: registration,
45
+ rowIndex: index
46
+ });
31
47
  return /*#__PURE__*/React.createElement(CellMeasurer, {
32
48
  key: key,
33
49
  cache: cache,
@@ -44,18 +60,8 @@ export const createTypeAheadRowRenderer = ({
44
60
  onMeasured: onMeasured,
45
61
  onMouseMove: noOp,
46
62
  style: style
47
- }, registration.type === 'menu-section' ? /*#__PURE__*/React.createElement(TypeAheadSectionRow, {
48
- registration: registration
49
- }) : /*#__PURE__*/React.createElement(TypeAheadItemRow, {
50
- Item: Item,
51
- isSelected: itemIndex === selectedItemIndex,
52
- itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
53
- listId: listId,
54
- onItemHover: onItemHover,
55
- onItemLeave: onItemLeave,
56
- onItemVisibilityChange: onItemVisibilityChange,
57
- isVisible: isVisible,
58
- registration: registration,
59
- rowIndex: index
60
- })));
63
+ }, hasScrollPadding ? /*#__PURE__*/React.createElement(Box, {
64
+ paddingBlockStart: index === 0 ? 'space.100' : undefined,
65
+ paddingBlockEnd: index === rows.length - 1 ? 'space.100' : undefined
66
+ }, rowContent) : rowContent));
61
67
  };
@@ -2,9 +2,9 @@
2
2
  ._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
3
3
  ._18m915vq{overflow-y:hidden}
4
4
  ._1bsbnklw{width:20pc}
5
- ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
5
+ ._1q51idpf{padding-block-start:0}
6
6
  ._1reo15vq{overflow-x:hidden}
7
- ._85i512x7{padding-block-end:var(--ds-space-075,6px)}
7
+ ._85i5idpf{padding-block-end:0}
8
8
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
9
9
  ._r06hglyw{-webkit-appearance:none;appearance:none}
10
10
  ._vchhusvi{box-sizing:border-box}
@@ -7,21 +7,20 @@ import { useIntl } from 'react-intl';
7
7
  import Popup from '@atlaskit/editor-common/Popup';
8
8
  import { getQuickInsertMenuModel, getQuickInsertMenuRows, selectQuickInsertCategoryItems } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
9
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';
10
11
  import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
11
12
  import { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
12
13
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles/constants';
13
14
  import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
14
- import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
15
15
  import { InputQuery } from '../InputQuery';
16
16
  import { getTypeAheadGlobalViewMoreId } from './getTypeAheadGlobalViewMoreId';
17
17
  import { getTypeAheadItemId } from './getTypeAheadItemId';
18
18
  import { TypeAheadMenuRenderer } from './TypeAheadMenuRenderer';
19
19
  import { TypeAheadProvider } from './TypeAheadProvider';
20
20
  var styles = {
21
- menu: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _16qs130s _1q51u2gc _85i512x7 _1bsbnklw"
21
+ menu: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _16qs130s _1q51idpf _85i5idpf _1bsbnklw"
22
22
  };
23
23
  var DEFAULT_MENU_MAX_HEIGHT = 480;
24
- var MENU_VERTICAL_PADDING = 14;
25
24
  var MENU_WIDTH = 320;
26
25
  var POPUP_OFFSET = [0, 8];
27
26
  var EMPTY_COMPONENTS = [];
@@ -29,7 +28,7 @@ var subscribeToNothing = function subscribeToNothing() {
29
28
  return function () {};
30
29
  };
31
30
  export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
32
- var _api$uiControlRegistr2, _api$uiControlRegistr3;
31
+ var _api$uiControlRegistr2, _api$uiControlRegistr3, _api$analytics;
33
32
  var anchorElement = _ref.anchorElement,
34
33
  api = _ref.api,
35
34
  cancel = _ref.cancel,
@@ -80,7 +79,6 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
80
79
  return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
81
80
  }, [api, surface.root.key]);
82
81
  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);
83
- var isSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
84
82
  var hasSectionOverflowItems = useMemo(function () {
85
83
  return components.some(function (_ref2) {
86
84
  var key = _ref2.key;
@@ -94,13 +92,32 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
94
92
  getItemRank: triggerHandler.getRegisteredItemRank,
95
93
  query: query,
96
94
  rootComponent: surface.root,
97
- selectCategoryItems: hasSectionOverflowItems && isSlashCommandEnabled ? selectQuickInsertCategoryItems : undefined,
95
+ selectCategoryItems: hasSectionOverflowItems ? selectQuickInsertCategoryItems : undefined,
98
96
  surfaceContext: surfaceContext
99
97
  });
100
- }, [components, formatMessage, hasSectionOverflowItems, isSlashCommandEnabled, query, surfaceContext, surface.root, triggerHandler.getRegisteredItemRank]);
98
+ }, [components, formatMessage, hasSectionOverflowItems, query, surfaceContext, surface.root, triggerHandler.getRegisteredItemRank]);
101
99
  var rows = useMemo(function () {
102
100
  return getQuickInsertMenuRows(menuModel);
103
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();
119
+ onClose();
120
+ }, [flushSearchAnalytics, onClose]);
104
121
  var _useState5 = useState(),
105
122
  _useState6 = _slicedToArray(_useState5, 2),
106
123
  previewActivation = _useState6[0],
@@ -188,13 +205,13 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
188
205
  editorView: editorView,
189
206
  inputMethod: surface.inputMethod,
190
207
  menuOpenId: typeAheadSurfaceContext.menuOpenId,
191
- onClose: onClose,
208
+ onClose: closeMenu,
192
209
  popupsMountPoint: popupsMountPoint,
193
210
  query: query,
194
211
  surfaceContext: surfaceContext,
195
212
  triggerHandler: triggerHandler
196
213
  };
197
- }, [activePreviewItemKey, api, editorView, onClose, popupsMountPoint, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
214
+ }, [activePreviewItemKey, api, editorView, closeMenu, popupsMountPoint, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
198
215
  var noOp = useCallback(function () {}, []);
199
216
  var SurfaceProvider = surface.Provider;
200
217
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputQuery, {
@@ -236,8 +253,10 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
236
253
  Item: surface.Item,
237
254
  listLabel: surface.listLabel,
238
255
  listId: listId,
239
- maxHeight: Math.max(0, menuHeight - MENU_VERTICAL_PADDING),
256
+ maxHeight: Math.max(0, menuHeight),
240
257
  model: menuModel,
258
+ query: query,
259
+ hasScrollPadding: true,
241
260
  onItemHover: onItemHover,
242
261
  onItemLeave: onItemLeave,
243
262
  onItemVisibilityChange: onItemVisibilityChange,
@@ -11,9 +11,12 @@ export var TypeAheadMenuFooter = function TypeAheadMenuFooter(_ref) {
11
11
  isSelected = _ref.isSelected,
12
12
  Item = _ref.Item,
13
13
  onMouseMove = _ref.onMouseMove,
14
- registration = _ref.registration;
14
+ registration = _ref.registration,
15
+ _ref$hasScrollPadding = _ref.hasScrollPadding,
16
+ hasScrollPadding = _ref$hasScrollPadding === void 0 ? false : _ref$hasScrollPadding;
15
17
  return /*#__PURE__*/React.createElement(Box, {
16
18
  onMouseMove: onMouseMove,
19
+ paddingBlockEnd: hasScrollPadding ? 'space.075' : undefined,
17
20
  xcss: styles.footer
18
21
  }, /*#__PURE__*/React.createElement(Item, {
19
22
  id: id,
@@ -6,6 +6,7 @@ import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
6
6
  import { useIntl } from 'react-intl';
7
7
  import { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
8
8
  import { List } from 'react-virtualized/dist/commonjs/List';
9
+ import { QuickInsertEmptyState } from '@atlaskit/editor-common/quick-insert/empty-state';
9
10
  import { getQuickInsertMenuRows } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
10
11
  import { useMenuListHeight } from '@atlaskit/editor-common/quick-insert/use-menu-list-height';
11
12
  import { typeAheadListMessages } from '@atlaskit/editor-common/type-ahead/messages';
@@ -18,13 +19,18 @@ var LIST_WIDTH = 320;
18
19
  var ESTIMATED_ROW_HEIGHT = 44;
19
20
  // 44px item + 1px separator.
20
21
  var MENU_FOOTER_HEIGHT = 45;
22
+ var MENU_FOOTER_HEIGHT_WITH_SCROLL_PADDING = 51;
21
23
  export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
22
- var _model$root$component;
24
+ var _model$root$component, _model$fallbackItems;
23
25
  var Item = _ref.Item,
24
26
  listLabel = _ref.listLabel,
25
27
  listId = _ref.listId,
26
28
  maxHeight = _ref.maxHeight,
27
29
  model = _ref.model,
30
+ _ref$query = _ref.query,
31
+ query = _ref$query === void 0 ? '' : _ref$query,
32
+ _ref$hasScrollPadding = _ref.hasScrollPadding,
33
+ hasScrollPadding = _ref$hasScrollPadding === void 0 ? false : _ref$hasScrollPadding,
28
34
  onItemHover = _ref.onItemHover,
29
35
  onItemLeave = _ref.onItemLeave,
30
36
  onItemVisibilityChange = _ref.onItemVisibilityChange,
@@ -101,6 +107,7 @@ export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
101
107
  onItemLeave: onItemLeave,
102
108
  onItemVisibilityChange: onItemVisibilityChange,
103
109
  rows: rows,
110
+ hasScrollPadding: hasScrollPadding,
104
111
  selectedItemIndex: selectedItemIndex
105
112
  });
106
113
  var footerItemIndex = itemIndexByRowIndex.size;
@@ -111,7 +118,7 @@ export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
111
118
  return null;
112
119
  }
113
120
  var RootComponent = (_model$root$component = model.root.component) !== null && _model$root$component !== void 0 ? _model$root$component : PassThrough;
114
- var listMaxHeight = Math.max(0, maxHeight - (model.footer ? MENU_FOOTER_HEIGHT : 0));
121
+ var listMaxHeight = Math.max(0, maxHeight - (model.footer ? hasScrollPadding ? MENU_FOOTER_HEIGHT_WITH_SCROLL_PADDING : MENU_FOOTER_HEIGHT : 0));
115
122
  var hasListboxContent = rows.length > 0 || model.footer !== undefined;
116
123
  return /*#__PURE__*/React.createElement(RootComponent, null, /*#__PURE__*/React.createElement(Box, {
117
124
  "aria-label": hasListboxContent ? intl.formatMessage(listLabel) : undefined,
@@ -129,6 +136,9 @@ export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
129
136
  rowRenderer: renderRow,
130
137
  scrollToAlignment: "auto",
131
138
  width: LIST_WIDTH
139
+ }) : query !== '' && ((_model$fallbackItems = model.fallbackItems) === null || _model$fallbackItems === void 0 ? void 0 : _model$fallbackItems.length) === 0 ? /*#__PURE__*/React.createElement(QuickInsertEmptyState, {
140
+ mode: "inline",
141
+ spacing: "spacious"
132
142
  }) : model.fallbackItems === undefined ? /*#__PURE__*/React.createElement(Box, {
133
143
  paddingBlock: "space.150",
134
144
  paddingInline: "space.250",
@@ -141,6 +151,7 @@ export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
141
151
  isSelected: selectedItemIndex === footerItemIndex,
142
152
  Item: Item,
143
153
  onMouseMove: onFooterItemHover,
144
- registration: model.footer
154
+ registration: model.footer,
155
+ hasScrollPadding: hasScrollPadding
145
156
  })));
146
157
  };
@@ -1,11 +1,14 @@
1
1
  import React from 'react';
2
2
  import { CellMeasurer } from 'react-virtualized/dist/commonjs/CellMeasurer';
3
+ import { Box } from '@atlaskit/primitives/compiled';
3
4
  import { ListRow } from '../ListRow';
4
5
  import { TypeAheadItemRow } from './TypeAheadItemRow';
5
6
  import { TypeAheadSectionRow } from './TypeAheadSectionRow';
6
7
  var noOp = function noOp() {};
7
8
  export var createTypeAheadRowRenderer = function createTypeAheadRowRenderer(_ref) {
8
9
  var cache = _ref.cache,
10
+ _ref$hasScrollPadding = _ref.hasScrollPadding,
11
+ hasScrollPadding = _ref$hasScrollPadding === void 0 ? false : _ref$hasScrollPadding,
9
12
  onMeasured = _ref.onMeasured,
10
13
  itemIndexByRowIndex = _ref.itemIndexByRowIndex,
11
14
  Item = _ref.Item,
@@ -27,6 +30,20 @@ export var createTypeAheadRowRenderer = function createTypeAheadRowRenderer(_ref
27
30
  return null;
28
31
  }
29
32
  var itemIndex = itemIndexByRowIndex.get(index);
33
+ var rowContent = registration.type === 'menu-section' ? /*#__PURE__*/React.createElement(TypeAheadSectionRow, {
34
+ registration: registration
35
+ }) : /*#__PURE__*/React.createElement(TypeAheadItemRow, {
36
+ Item: Item,
37
+ isSelected: itemIndex === selectedItemIndex,
38
+ itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
39
+ listId: listId,
40
+ onItemHover: onItemHover,
41
+ onItemLeave: onItemLeave,
42
+ onItemVisibilityChange: onItemVisibilityChange,
43
+ isVisible: isVisible,
44
+ registration: registration,
45
+ rowIndex: index
46
+ });
30
47
  return /*#__PURE__*/React.createElement(CellMeasurer, {
31
48
  key: key,
32
49
  cache: cache,
@@ -43,20 +60,10 @@ export var createTypeAheadRowRenderer = function createTypeAheadRowRenderer(_ref
43
60
  onMeasured: onMeasured,
44
61
  onMouseMove: noOp,
45
62
  style: style
46
- }, registration.type === 'menu-section' ? /*#__PURE__*/React.createElement(TypeAheadSectionRow, {
47
- registration: registration
48
- }) : /*#__PURE__*/React.createElement(TypeAheadItemRow, {
49
- Item: Item,
50
- isSelected: itemIndex === selectedItemIndex,
51
- itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
52
- listId: listId,
53
- onItemHover: onItemHover,
54
- onItemLeave: onItemLeave,
55
- onItemVisibilityChange: onItemVisibilityChange,
56
- isVisible: isVisible,
57
- registration: registration,
58
- rowIndex: index
59
- }));
63
+ }, hasScrollPadding ? /*#__PURE__*/React.createElement(Box, {
64
+ paddingBlockStart: index === 0 ? 'space.100' : undefined,
65
+ paddingBlockEnd: index === rows.length - 1 ? 'space.100' : undefined
66
+ }, rowContent) : rowContent);
60
67
  });
61
68
  };
62
69
  };
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  import type { RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
3
3
  import type { TypeAheadItemComponent } from './typeAheadMenuTypes';
4
- export declare const TypeAheadMenuFooter: ({ id, isSelected, Item, onMouseMove, registration, }: {
4
+ export declare const TypeAheadMenuFooter: ({ id, isSelected, Item, onMouseMove, registration, hasScrollPadding, }: {
5
+ hasScrollPadding?: boolean;
5
6
  id: string;
6
7
  isSelected: boolean;
7
8
  Item: TypeAheadItemComponent;
@@ -3,6 +3,7 @@ import type { MessageDescriptor } from 'react-intl';
3
3
  import type { TypeAheadMenuModel } from './buildTypeAheadMenuModel';
4
4
  import type { TypeAheadItemComponent } from './typeAheadMenuTypes';
5
5
  type Props = {
6
+ hasScrollPadding?: boolean;
6
7
  Item: TypeAheadItemComponent;
7
8
  listId: string;
8
9
  listLabel: MessageDescriptor;
@@ -11,7 +12,8 @@ type Props = {
11
12
  onItemHover: (itemIndex: number, itemKey?: string) => void;
12
13
  onItemLeave: (itemKey: string) => void;
13
14
  onItemVisibilityChange: (itemKey: string, isVisible: boolean) => void;
15
+ query?: string;
14
16
  selectedItemIndex: number;
15
17
  };
16
- export declare const TypeAheadMenuRenderer: ({ Item, listLabel, listId, maxHeight, model, onItemHover, onItemLeave, onItemVisibilityChange, selectedItemIndex, }: Props) => React.JSX.Element | null;
18
+ export declare const TypeAheadMenuRenderer: ({ Item, listLabel, listId, maxHeight, model, query, hasScrollPadding, onItemHover, onItemLeave, onItemVisibilityChange, selectedItemIndex, }: Props) => React.JSX.Element | null;
17
19
  export {};
@@ -2,8 +2,9 @@ import type { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeas
2
2
  import type { ListRowRenderer } from 'react-virtualized/dist/commonjs/List';
3
3
  import type { RegisterMenuItem, RegisterMenuSection } from '@atlaskit/editor-ui-control-model/types';
4
4
  import type { TypeAheadItemComponent } from './typeAheadMenuTypes';
5
- export declare const createTypeAheadRowRenderer: ({ cache, onMeasured, itemIndexByRowIndex, Item, listId, onItemHover, onItemLeave, onItemVisibilityChange, rows, selectedItemIndex, }: {
5
+ export declare const createTypeAheadRowRenderer: ({ cache, hasScrollPadding, onMeasured, itemIndexByRowIndex, Item, listId, onItemHover, onItemLeave, onItemVisibilityChange, rows, selectedItemIndex, }: {
6
6
  cache: CellMeasurerCache;
7
+ hasScrollPadding?: boolean;
7
8
  Item: TypeAheadItemComponent;
8
9
  itemIndexByRowIndex: Map<number, number>;
9
10
  listId: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-type-ahead",
3
- "version": "28.0.4",
3
+ "version": "28.0.6",
4
4
  "description": "Type-ahead plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -39,11 +39,11 @@
39
39
  "@atlaskit/menu": "^11.0.0",
40
40
  "@atlaskit/platform-feature-experiments": "^0.3.0",
41
41
  "@atlaskit/platform-feature-flags": "^2.2.0",
42
- "@atlaskit/primitives": "^22.5.0",
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": "^239.0.0",
46
- "@atlaskit/tokens": "^20.5.0",
45
+ "@atlaskit/tmp-editor-statsig": "^240.0.0",
46
+ "@atlaskit/tokens": "^20.6.0",
47
47
  "@atlaskit/visually-hidden": "^4.4.0",
48
48
  "@babel/runtime": "^7.0.0",
49
49
  "@emotion/react": "^11.7.1",
@@ -54,13 +54,13 @@
54
54
  "w3c-keyname": "^2.1.8"
55
55
  },
56
56
  "peerDependencies": {
57
- "@atlaskit/editor-common": "^131.2.0",
57
+ "@atlaskit/editor-common": "^131.4.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"
61
61
  },
62
62
  "devDependencies": {
63
- "@atlassian/testing-library": "^0.11.0",
63
+ "@atlassian/testing-library": "^0.12.0",
64
64
  "@testing-library/react": "^16.3.0",
65
65
  "@types/react-virtualized": "^9.18.12",
66
66
  "react": "^19.2.0",