@atlaskit/editor-plugin-type-ahead 10.2.2 → 10.3.1

package/dist/cjs/ui/TypeAheadPopup.js

@@ -70,6 +70,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     popupsBoundariesElement = props.popupsBoundariesElement,
     popupsScrollableElement = props.popupsScrollableElement,
     items = props.items,
+    _props$sections = props.sections,
+    sections = _props$sections === void 0 ? [] : _props$sections,
     emptyItem = props.emptyItem,
     errorInfo = props.errorInfo,
     selectedIndex = props.selectedIndex,
@@ -345,6 +347,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     triggerHandler: triggerHandler
   }), (0, _react2.jsx)(_TypeAheadList.TypeAheadList, {
     items: items,
+    sections: sections,
     emptyItem: emptyItem,
     selectedIndex: selectedIndex
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)

package/dist/cjs/ui/WrapperTypeAhead.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.WrapperTypeAhead = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -40,6 +41,7 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
   }
+  var intl = (0, _reactIntl.useIntl)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     closed = _useState2[0],
@@ -50,7 +52,7 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
     setQuery = _useState4[1];
   var queryRef = (0, _react.useRef)(query);
   var editorViewRef = (0, _react.useRef)(editorView);
-  var items = (0, _useLoadItems.useLoadItems)(triggerHandler, editorView, query, showMoreOptionsButton, api);
+  var items = (0, _useLoadItems.useLoadItems)(triggerHandler, editorView, query, showMoreOptionsButton, api, intl);
   (0, _react.useEffect)(function () {
     if (!closed && (0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;

package/dist/cjs/ui/hooks/build-sectioned-result.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildSectionedResult = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var buildSectionedResult = exports.buildSectionedResult = function buildSectionedResult(_ref) {
+  var _triggerHandler$getSe;
+  var items = _ref.items,
+    triggerHandler = _ref.triggerHandler,
+    intl = _ref.intl;
+  if (!(0, _experiments.editorExperiment)('platform_editor_agent_mentions', true) || !intl) {
+    return {
+      items: items,
+      sections: []
+    };
+  }
+  var sectionDefinitions = (_triggerHandler$getSe = triggerHandler.getSections) === null || _triggerHandler$getSe === void 0 ? void 0 : _triggerHandler$getSe.call(triggerHandler, {
+    intl: intl
+  });
+  if (!sectionDefinitions || sectionDefinitions.length === 0) {
+    return {
+      items: items,
+      sections: []
+    };
+  }
+
+  // Track which item indexes have been claimed by a section, or excluded (matched a section but
+  // cut by that section's limit). Items excluded by limit should not appear anywhere in the output.
+  var assignedToSection = new Set();
+  var excludedByLimit = new Set();
+  var groupedBySection = new Map();
+  var _iterator = _createForOfIteratorHelper(sectionDefinitions),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var section = _step.value;
+      var matchingIndexes = [];
+      for (var _i = 0; _i < items.length; _i++) {
+        if (assignedToSection.has(_i) || excludedByLimit.has(_i)) {
+          continue;
+        }
+        if (section.filter(items[_i])) {
+          matchingIndexes.push(_i);
+        }
+      }
+      var acceptedIndexes = section.limit !== undefined ? matchingIndexes.slice(0, section.limit) : matchingIndexes;
+      var rejectedByLimit = matchingIndexes.slice(acceptedIndexes.length);
+      var _iterator3 = _createForOfIteratorHelper(acceptedIndexes),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _i2 = _step3.value;
+          assignedToSection.add(_i2);
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      var _iterator4 = _createForOfIteratorHelper(rejectedByLimit),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var _i3 = _step4.value;
+          excludedByLimit.add(_i3);
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+      if (acceptedIndexes.length === 0) {
+        continue;
+      }
+      groupedBySection.set(section.id, {
+        indexes: acceptedIndexes,
+        section: section
+      });
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var flattenedItems = [];
+  var sections = [];
+  var _iterator2 = _createForOfIteratorHelper(sectionDefinitions),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _section = _step2.value;
+      var grouped = groupedBySection.get(_section.id);
+      if (!grouped) {
+        continue;
+      }
+      var startIndex = flattenedItems.length;
+      flattenedItems.push.apply(flattenedItems, (0, _toConsumableArray2.default)(grouped.indexes.map(function (i) {
+        return items[i];
+      })));
+      var endIndex = flattenedItems.length - 1;
+      sections.push({
+        endIndex: endIndex,
+        id: _section.id,
+        startIndex: startIndex,
+        title: _section.title
+      });
+    }
+
+    // Append items not claimed by any section and not excluded by a limit
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  for (var i = 0; i < items.length; i++) {
+    if (!assignedToSection.has(i) && !excludedByLimit.has(i)) {
+      flattenedItems.push(items[i]);
+    }
+  }
+  return {
+    items: flattenedItems,
+    sections: sections
+  };
+};

package/dist/cjs/ui/hooks/use-load-items.js

@@ -12,8 +12,9 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _clearListError = require("../../pm-plugins/commands/clear-list-error");
 var _updateListError = require("../../pm-plugins/commands/update-list-error");
 var _updateListItems = require("../../pm-plugins/commands/update-list-items");
+var _buildSectionedResult2 = require("./build-sectioned-result");
 var EMPTY_LIST_ITEM = [];
-var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler, editorView, query, showViewMore, api) {
+var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler, editorView, query, showViewMore, api, intl) {
   var _useState = (0, _react.useState)(EMPTY_LIST_ITEM),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     items = _useState2[0],
@@ -44,7 +45,14 @@ var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler,
       var emptyItem = result.length === 0 && (0, _expValEquals.expValEquals)('platform_editor_insert_menu_ai', 'isEnabled', true) ? (_triggerHandler$getEm = triggerHandler.getEmptyItem) === null || _triggerHandler$getEm === void 0 ? void 0 : _triggerHandler$getEm.call(triggerHandler, {
         editorState: editorView.state
       }) : undefined;
-      var list = result.length > 0 ? result : emptyItem ? [emptyItem] : EMPTY_LIST_ITEM;
+      var rawList = result.length > 0 ? result : emptyItem ? [emptyItem] : EMPTY_LIST_ITEM;
+      var _buildSectionedResult = (0, _buildSectionedResult2.buildSectionedResult)({
+          items: rawList,
+          triggerHandler: triggerHandler,
+          intl: intl !== null && intl !== void 0 ? intl : null
+        }),
+        list = _buildSectionedResult.items,
+        sections = _buildSectionedResult.sections;
       if (componentIsMounted.current) {
         setItems(list);
       }
@@ -54,7 +62,7 @@ var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler,
         title: 'View more'
       };
       queueMicrotask(function () {
-        (0, _updateListItems.updateListItem)(showViewMore ? list.concat(viewMoreItem) : list)(view.state, view.dispatch);
+        (0, _updateListItems.updateListItem)(showViewMore ? list.concat(viewMoreItem) : list, sections)(view.state, view.dispatch);
       });
     }).catch(function (e) {
       if ((0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true)) {
@@ -72,7 +80,7 @@ var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler,
     // ignore because EditorView is mutable but we don't want to
     // call loadItems when it changes, only when the query changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [triggerHandler, query]);
+  }, [triggerHandler, query, intl]);
   (0, _react.useEffect)(function () {
     return function () {
       componentIsMounted.current = false;

package/dist/es2019/entry-points/commands.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { openTypeAhead, openTypeAheadAtCursor } from '../pm-plugins/commands/open-typeahead-at-cursor';

package/dist/es2019/pm-plugins/commands/open-typeahead-at-cursor.js

@@ -1,5 +1,6 @@
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS } from '../actions';
 import { pluginKey } from '../key';
 export const openTypeAhead = props => tr => {
@@ -46,7 +47,7 @@ export const openTypeAheadAtCursor = ({
     // delete 1 pos before wherever selection is now - that will delete the empty space
     tr.delete(tr.selection.from - 1, tr.selection.from);
   } else {
-    var _selection$$head, _selection$$head$pare, _selection$$head$pare2, _selection$$head$pare3;
+    var _selection$$head$pare, _selection$$head$pare2, _selection$$head, _selection$$head$pare3;
     if (selection instanceof NodeSelection) {
       if (isInline) {
         tr.deleteSelection();
@@ -75,7 +76,11 @@ export const openTypeAheadAtCursor = ({
     // being inserted due to composition by checking if we have the trigger
     // directly before the typeahead. This should not happen unless it has
     // been eroneously added because we require whitespace/newline for typeahead.
-    if (cursorPos >= 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head$pare = _selection$$head.parent) !== null && _selection$$head$pare !== void 0 && _selection$$head$pare.textContent) && (_selection$$head$pare2 = (_selection$$head$pare3 = selection.$head.parent.textContent).endsWith) !== null && _selection$$head$pare2 !== void 0 && _selection$$head$pare2.call(_selection$$head$pare3, triggerHandler.trigger)) {
+    // Check if the text ends with the trigger character (or any character matched
+    // by customRegex, to support wide-char variants like fullwidth slash ／)
+    const triggerPattern = expValEquals('platform_editor_wide_slash_trigger', 'isEnabled', true) && triggerHandler.customRegex ? new RegExp(`(${triggerHandler.customRegex})$`, 'u') : null;
+    const endsWithTrigger = ((_selection$$head$pare = (_selection$$head$pare2 = selection.$head.parent.textContent).endsWith) === null || _selection$$head$pare === void 0 ? void 0 : _selection$$head$pare.call(_selection$$head$pare2, triggerHandler.trigger)) || triggerPattern && triggerPattern.test(selection.$head.parent.textContent);
+    if (cursorPos >= 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head$pare3 = _selection$$head.parent) !== null && _selection$$head$pare3 !== void 0 && _selection$$head$pare3.textContent) && endsWithTrigger) {
       tr.delete(cursorPos - 1, cursorPos);
     }
   }

package/dist/es2019/pm-plugins/commands/update-list-items.js

@@ -1,12 +1,13 @@
 import { ACTIONS } from '../actions';
 import { pluginKey as typeAheadPluginKey } from '../key';
-export const updateListItem = items => {
+export const updateListItem = (items, sections = []) => {
   return (state, dispatch) => {
     const tr = state.tr;
     tr.setMeta(typeAheadPluginKey, {
       action: ACTIONS.UPDATE_LIST_ITEMS,
       params: {
-        items
+        items,
+        sections
       }
     });
     if (dispatch) {

package/dist/es2019/pm-plugins/main.js

@@ -1,9 +1,12 @@
 import { InsertTypeAheadStep } from '@atlaskit/adf-schema/steps';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { closest } from '@atlaskit/editor-common/utils';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS } from './actions';
+import { openTypeAheadAtCursor } from './commands/open-typeahead-at-cursor';
 import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from './constants';
 import { factoryDecorations } from './decorations';
 import { isInsertionTransaction } from './isInsertionTransaction';
@@ -43,6 +46,11 @@ export function createPlugin({
     typeAheadHandlers,
     popupMountRef
   });
+
+  // Tracks a wide-char trigger handler detected during IME composition (e.g. ／).
+  // Set by compositionupdate, cleared by compositionend. Used by handleKeyDown
+  // to intercept Enter that confirms the composition.
+  let pendingWideSlashHandler = null;
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -53,6 +61,7 @@ export function createPlugin({
           decorationSet: DecorationSet.empty,
           decorationElement: null,
           items: [],
+          sections: [],
           errorInfo: null,
           selectedIndex: -1,
           stats: null,
@@ -94,8 +103,53 @@ export function createPlugin({
         var _pluginKey$getState;
         return (_pluginKey$getState = pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet;
       },
+      handleKeyDown: (view, event) => {
+        // When composing a wide-char trigger (e.g. ／), intercept the Enter key
+        // that confirms the composition so we can open the typeahead instead.
+        if (pendingWideSlashHandler && event.isComposing && (event.key === 'Enter' || event.keyCode === 13)) {
+          const handler = pendingWideSlashHandler;
+          pendingWideSlashHandler = null;
+          // Defer until ProseMirror has flushed the composed text into its state.
+          setTimeout(() => {
+            const command = openTypeAheadAtCursor({
+              triggerHandler: handler,
+              inputMethod: INPUT_METHOD.KEYBOARD
+            });
+            const tr = command({
+              tr: view.state.tr
+            });
+            if (tr) {
+              view.dispatch(tr);
+            }
+          }, 0);
+          return true;
+        }
+        return false;
+      },
       handleDOMEvents: {
+        compositionupdate: (view, event) => {
+          // When the experiment is on, track whether the current composition
+          // exactly matches a wide-char trigger (e.g. ／ from Japanese keyboard).
+          // We can't open the typeahead yet because composition is still active,
+          // but we record the matching handler so the next keydown (Enter) can use it.
+          if (expValEquals('platform_editor_wide_slash_trigger', 'isEnabled', true)) {
+            var _event$data, _typeAheadHandlers$fi;
+            const pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
+            pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(handler => {
+              if (!handler.customRegex) {
+                return false;
+              }
+              // Only match if the entire composition is a trigger character
+              const pattern = new RegExp(`^(${handler.customRegex})$`, 'u');
+              return pattern.test(pendingData);
+            })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
+          }
+          return false;
+        },
         compositionend: (view, event) => {
+          // Clear the pending handler when composition ends (cancelled or committed
+          // via a non-Enter key like Space, which we don't want to intercept).
+          pendingWideSlashHandler = null;
           return false;
         },
         click: (view, event) => {

package/dist/es2019/pm-plugins/reducer.js

@@ -66,6 +66,7 @@ export const createReducer = ({
       inputMethod,
       selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : -1,
       items: [],
+      sections: [],
       query: reopenQuery || '',
       removePrefixTriggerOnCancel
     };
@@ -85,6 +86,7 @@ export const createReducer = ({
       stats: null,
       triggerHandler: undefined,
       items: [],
+      sections: [],
       removePrefixTriggerOnCancel: undefined
     };
   };
@@ -140,11 +142,13 @@ export const createReducer = ({
         ...currentPluginState,
         errorInfo,
         items: [],
+        sections: [],
         selectedIndex: -1
       };
     } else if (shouldUpdateListItems) {
       const {
-        items
+        items,
+        sections = []
       } = params;
       const {
         selectedIndex
@@ -152,6 +156,7 @@ export const createReducer = ({
       return {
         ...currentPluginState,
         items,
+        sections,
         selectedIndex: Math.max(selectedIndex >= items.length ? items.length - 1 : selectedIndex, -1)
       };
     } else if (shouldUpdateSelectedIndex) {

package/dist/es2019/typeAheadPlugin.js

@@ -208,7 +208,7 @@ export const typeAheadPlugin = ({
       }];
     },
     getSharedState(editorState) {
-      var _state$decorationSet, _state$decorationElem, _state$items, _state$errorInfo, _state$selectedIndex;
+      var _state$decorationSet, _state$decorationElem, _state$items, _state$sections, _state$errorInfo, _state$selectedIndex;
       if (!editorState) {
         return {
           query: '',
@@ -219,6 +219,7 @@ export const typeAheadPlugin = ({
           decorationElement: null,
           triggerHandler: undefined,
           items: [],
+          sections: [],
           errorInfo: null,
           selectedIndex: 0
         };
@@ -234,6 +235,7 @@ export const typeAheadPlugin = ({
         decorationElement: (_state$decorationElem = state === null || state === void 0 ? void 0 : state.decorationElement) !== null && _state$decorationElem !== void 0 ? _state$decorationElem : null,
         triggerHandler: state === null || state === void 0 ? void 0 : state.triggerHandler,
         items: (_state$items = state === null || state === void 0 ? void 0 : state.items) !== null && _state$items !== void 0 ? _state$items : [],
+        sections: (_state$sections = state === null || state === void 0 ? void 0 : state.sections) !== null && _state$sections !== void 0 ? _state$sections : [],
         errorInfo: (_state$errorInfo = state === null || state === void 0 ? void 0 : state.errorInfo) !== null && _state$errorInfo !== void 0 ? _state$errorInfo : null,
         selectedIndex: (_state$selectedIndex = state === null || state === void 0 ? void 0 : state.selectedIndex) !== null && _state$selectedIndex !== void 0 ? _state$selectedIndex : 0
       };

package/dist/es2019/ui/ContentComponent.js

@@ -9,24 +9,26 @@ export function ContentComponent({
   const {
     triggerHandler,
     items,
+    sections,
     errorInfo,
     decorationElement,
     decorationSet,
     query,
     selectedIndex
   } = useSharedPluginStateWithSelector(api, ['typeAhead'], states => {
-    var _states$typeAheadStat, _states$typeAheadStat2, _states$typeAheadStat3, _states$typeAheadStat4, _states$typeAheadStat5, _states$typeAheadStat6, _states$typeAheadStat7;
+    var _states$typeAheadStat, _states$typeAheadStat2, _states$typeAheadStat3, _states$typeAheadStat4, _states$typeAheadStat5, _states$typeAheadStat6, _states$typeAheadStat7, _states$typeAheadStat8;
     return {
       triggerHandler: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.triggerHandler,
       items: (_states$typeAheadStat2 = states.typeAheadState) === null || _states$typeAheadStat2 === void 0 ? void 0 : _states$typeAheadStat2.items,
-      errorInfo: (_states$typeAheadStat3 = states.typeAheadState) === null || _states$typeAheadStat3 === void 0 ? void 0 : _states$typeAheadStat3.errorInfo,
-      decorationElement: (_states$typeAheadStat4 = states.typeAheadState) === null || _states$typeAheadStat4 === void 0 ? void 0 : _states$typeAheadStat4.decorationElement,
-      decorationSet: (_states$typeAheadStat5 = states.typeAheadState) === null || _states$typeAheadStat5 === void 0 ? void 0 : _states$typeAheadStat5.decorationSet,
-      query: (_states$typeAheadStat6 = states.typeAheadState) === null || _states$typeAheadStat6 === void 0 ? void 0 : _states$typeAheadStat6.query,
-      selectedIndex: (_states$typeAheadStat7 = states.typeAheadState) === null || _states$typeAheadStat7 === void 0 ? void 0 : _states$typeAheadStat7.selectedIndex
+      sections: (_states$typeAheadStat3 = states.typeAheadState) === null || _states$typeAheadStat3 === void 0 ? void 0 : _states$typeAheadStat3.sections,
+      errorInfo: (_states$typeAheadStat4 = states.typeAheadState) === null || _states$typeAheadStat4 === void 0 ? void 0 : _states$typeAheadStat4.errorInfo,
+      decorationElement: (_states$typeAheadStat5 = states.typeAheadState) === null || _states$typeAheadStat5 === void 0 ? void 0 : _states$typeAheadStat5.decorationElement,
+      decorationSet: (_states$typeAheadStat6 = states.typeAheadState) === null || _states$typeAheadStat6 === void 0 ? void 0 : _states$typeAheadStat6.decorationSet,
+      query: (_states$typeAheadStat7 = states.typeAheadState) === null || _states$typeAheadStat7 === void 0 ? void 0 : _states$typeAheadStat7.query,
+      selectedIndex: (_states$typeAheadStat8 = states.typeAheadState) === null || _states$typeAheadStat8 === void 0 ? void 0 : _states$typeAheadStat8.selectedIndex
     };
   });
-  if (items === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
+  if (items === undefined || sections === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
     return null;
   }
   return /*#__PURE__*/React.createElement(TypeAheadMenu, {
@@ -37,6 +39,7 @@ export function ContentComponent({
     typeAheadState: {
       triggerHandler,
       items,
+      sections,
       errorInfo,
       decorationElement,
       decorationSet,