@algolia/autocomplete-core - npm Package Compare versions

Comparing version 1.0.0-alpha.34 to 1.0.0-alpha.35

dist/esm/createAutocomplete.js

@@ -1,2 +0,2 @@
-import { completionStateEnhancer } from './completionStateEnhancer';
+import { checkOptions } from './checkOptions';
 import { createStore } from './createStore';
@@ -9,4 +9,5 @@ import { getAutocompleteSetters } from './getAutocompleteSetters';
 export function createAutocomplete(options) {
+  checkOptions(options);
   var props = getDefaultProps(options);
-  var store = createStore(stateReducer, props, [completionStateEnhancer]);
+  var store = createStore(stateReducer, props);
 
@@ -16,5 +17,5 @@ var _getAutocompleteSette = getAutocompleteSetters({
   }),
-      setHighlightedIndex = _getAutocompleteSette.setHighlightedIndex,
+      setSelectedItemId = _getAutocompleteSette.setSelectedItemId,
       setQuery = _getAutocompleteSette.setQuery,
-      setSuggestions = _getAutocompleteSette.setSuggestions,
+      setCollections = _getAutocompleteSette.setCollections,
       setIsOpen = _getAutocompleteSette.setIsOpen,
@@ -27,5 +28,5 @@ setStatus = _getAutocompleteSette.setStatus,
     props: props,
-    setHighlightedIndex: setHighlightedIndex,
+    setSelectedItemId: setSelectedItemId,
     setQuery: setQuery,
-    setSuggestions: setSuggestions,
+    setCollections: setCollections,
     setIsOpen: setIsOpen,
@@ -41,4 +42,4 @@ setStatus: setStatus,
       getInputProps = _getPropGetters.getInputProps,
-      getDropdownProps = _getPropGetters.getDropdownProps,
-      getMenuProps = _getPropGetters.getMenuProps,
+      getPanelProps = _getPropGetters.getPanelProps,
+      getListProps = _getPropGetters.getListProps,
       getItemProps = _getPropGetters.getItemProps;
@@ -52,5 +53,5 @@
       props: props,
-      setHighlightedIndex: setHighlightedIndex,
+      setSelectedItemId: setSelectedItemId,
       setQuery: setQuery,
-      setSuggestions: setSuggestions,
+      setCollections: setCollections,
       setIsOpen: setIsOpen,
@@ -67,5 +68,5 @@ setStatus: setStatus,
   return {
-    setHighlightedIndex: setHighlightedIndex,
+    setSelectedItemId: setSelectedItemId,
     setQuery: setQuery,
-    setSuggestions: setSuggestions,
+    setCollections: setCollections,
     setIsOpen: setIsOpen,
@@ -79,4 +80,4 @@ setStatus: setStatus,
     getLabelProps: getLabelProps,
-    getDropdownProps: getDropdownProps,
-    getMenuProps: getMenuProps,
+    getPanelProps: getPanelProps,
+    getListProps: getListProps,
     getItemProps: getItemProps,
@@ -83,0 +84,0 @@ refresh: refresh

dist/esm/createStore.d.ts

@@ -1,2 +0,2 @@
-import { AutocompleteStore, InternalAutocompleteOptions, Reducer, StateEnhancer } from './types';
-export declare function createStore<TItem>(reducer: Reducer, props: InternalAutocompleteOptions<TItem>, stateEnhancers: Array<StateEnhancer<TItem>>): AutocompleteStore<TItem>;
+import { AutocompleteStore, InternalAutocompleteOptions, Reducer } from './types';
+export declare function createStore<TItem>(reducer: Reducer, props: InternalAutocompleteOptions<TItem>): AutocompleteStore<TItem>;

dist/esm/createStore.js

@@ -7,10 +7,4 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-export function createStore(reducer, props, stateEnhancers) {
-  function enhanceState(state) {
-    return stateEnhancers.reduce(function (nextState, stateEnhancer) {
-      return stateEnhancer(nextState, props);
-    }, state);
-  }
-
-  var state = enhanceState(props.initialState);
+export function createStore(reducer, props) {
+  var state = props.initialState;
   return {
@@ -23,7 +17,7 @@ getState: function getState() {
 
-      state = enhanceState(reducer(state, {
+      state = reducer(state, {
         type: action,
         props: props,
         payload: payload
-      }));
+      });
       props.onStateChange({
@@ -30,0 +24,0 @@ state: state,

dist/esm/getAutocompleteSetters.d.ts

@@ -6,5 +6,5 @@ import { AutocompleteStore } from './types';
 export declare function getAutocompleteSetters<TItem>({ store, }: GetAutocompleteSettersOptions<TItem>): {
-    setHighlightedIndex: import("./types").StateUpdater<number | null>;
+    setSelectedItemId: import("./types").StateUpdater<number | null>;
     setQuery: import("./types").StateUpdater<string>;
-    setSuggestions: import("./types").StateUpdater<import("./types").AutocompleteSuggestion<TItem>[]>;
+    setCollections: import("./types").StateUpdater<import("./types").AutocompleteCollection<TItem | TItem[]>[]>;
     setIsOpen: import("./types").StateUpdater<boolean>;
@@ -11,0 +11,0 @@ setStatus: import("./types").StateUpdater<"idle" | "loading" | "stalled" | "error">;

dist/esm/getAutocompleteSetters.js

@@ -7,7 +7,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
+import { flatten } from './utils';
 export function getAutocompleteSetters(_ref) {
   var store = _ref.store;
 
-  var setHighlightedIndex = function setHighlightedIndex(value) {
-    store.send('setHighlightedIndex', value);
+  var setSelectedItemId = function setSelectedItemId(value) {
+    store.send('setSelectedItemId', value);
   };
@@ -19,7 +20,9 @@
 
-  var setSuggestions = function setSuggestions(rawValue) {
+  var setCollections = function setCollections(rawValue) {
     var baseItemId = 0;
-    var value = rawValue.map(function (suggestion) {
-      return _objectSpread(_objectSpread({}, suggestion), {}, {
-        items: suggestion.items.map(function (item) {
+    var value = rawValue.map(function (collection) {
+      return _objectSpread(_objectSpread({}, collection), {}, {
+        // We flatten the stored items to support calling `getAlgoliaHits`
+        // from the source itself.
+        items: flatten(collection.items).map(function (item) {
           return _objectSpread(_objectSpread({}, item), {}, {
@@ -31,3 +34,3 @@ __autocomplete_id: baseItemId++
     });
-    store.send('setSuggestions', value);
+    store.send('setCollections', value);
   };
@@ -48,5 +51,5 @@
   return {
-    setHighlightedIndex: setHighlightedIndex,
+    setSelectedItemId: setSelectedItemId,
     setQuery: setQuery,
-    setSuggestions: setSuggestions,
+    setCollections: setCollections,
     setIsOpen: setIsOpen,
@@ -53,0 +56,0 @@ setStatus: setStatus,

dist/esm/getCompletion.d.ts

@@ -1,7 +0,6 @@
-import { InternalAutocompleteOptions, AutocompleteState } from './types';
+import { AutocompleteState } from './types';
 interface GetCompletionProps<TItem> {
     state: AutocompleteState<TItem>;
-    props: InternalAutocompleteOptions<TItem>;
 }
-export declare function getCompletion<TItem>({ state, props, }: GetCompletionProps<TItem>): string | null;
+export declare function getCompletion<TItem>({ state, }: GetCompletionProps<TItem>): string | null;
 export {};

dist/esm/getCompletion.js

@@ -1,35 +0,15 @@
-import { getHighlightedItem } from './utils';
+import { getSelectedItem } from './utils';
 export function getCompletion(_ref) {
-  var state = _ref.state,
-      props = _ref.props;
+  var state = _ref.state;
 
-  if (props.enableCompletion === false || state.isOpen === false || state.highlightedIndex === null || state.status === 'stalled') {
+  if (state.isOpen === false || state.selectedItemId === null) {
     return null;
   }
 
-  var _ref2 = getHighlightedItem({
+  var _ref2 = getSelectedItem({
     state: state
   }),
-      itemValue = _ref2.itemValue; // The completion should appear only if the _first_ characters of the query
-  // match with the suggestion.
+      itemInputValue = _ref2.itemInputValue;
 
-
-  if (state.query.length > 0 && itemValue.toLocaleLowerCase().indexOf(state.query.toLocaleLowerCase()) === 0) {
-    // If the query typed has a different case than the suggestion, we want
-    // to show the completion matching the case of the query. This makes both
-    // strings overlap correctly.
-    // Example:
-    //  - query: 'Gui'
-    //  - suggestion: 'guitar'
-    //  => completion: 'Guitar'
-    var completion = state.query + itemValue.slice(state.query.length);
-
-    if (completion === state.query) {
-      return null;
-    }
-
-    return completion;
-  }
-
-  return null;
+  return itemInputValue || null;
 }

dist/esm/getDefaultProps.js

@@ -19,3 +19,4 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
-import { generateAutocompleteId, getItemsCount, noop, getNormalizedSources } from './utils';
+import { getNavigator } from './getNavigator';
+import { generateAutocompleteId, getItemsCount, getNormalizedSources, flatten } from './utils';
 export function getDefaultProps(props) {
@@ -31,11 +32,9 @@ var _props$id;
     autoFocus: false,
-    defaultHighlightedIndex: null,
-    enableCompletion: false,
+    defaultSelectedItemId: null,
     stallThreshold: 300,
     environment: environment,
-    shouldDropdownShow: function shouldDropdownShow(_ref) {
+    shouldPanelShow: function shouldPanelShow(_ref) {
       var state = _ref.state;
       return getItemsCount(state) > 0;
-    },
-    onStateChange: noop
+    }
   }, props), {}, {
@@ -47,37 +46,38 @@ // Since `generateAutocompleteId` triggers a side effect (it increments
     initialState: _objectSpread({
-      highlightedIndex: null,
+      selectedItemId: null,
       query: '',
       completion: null,
-      suggestions: [],
+      collections: [],
       isOpen: false,
       status: 'idle',
-      statusContext: {},
       context: {}
     }, props.initialState),
+    plugins: plugins,
+    onStateChange: function onStateChange(params) {
+      var _props$onStateChange;
+
+      (_props$onStateChange = props.onStateChange) === null || _props$onStateChange === void 0 ? void 0 : _props$onStateChange.call(props, params);
+      plugins.forEach(function (plugin) {
+        var _plugin$onStateChange;
+
+        (_plugin$onStateChange = plugin.onStateChange) === null || _plugin$onStateChange === void 0 ? void 0 : _plugin$onStateChange.call(plugin, params);
+      });
+    },
     onSubmit: function onSubmit(params) {
-      if (props.onSubmit) {
-        props.onSubmit(params);
-      }
+      var _props$onSubmit;
 
+      (_props$onSubmit = props.onSubmit) === null || _props$onSubmit === void 0 ? void 0 : _props$onSubmit.call(props, params);
       plugins.forEach(function (plugin) {
-        if (plugin.onSubmit) {
-          plugin.onSubmit(params);
-        }
+        var _plugin$onSubmit;
+
+        (_plugin$onSubmit = plugin.onSubmit) === null || _plugin$onSubmit === void 0 ? void 0 : _plugin$onSubmit.call(plugin, params);
       });
     },
     getSources: function getSources(options) {
-      var getSourcesFromPlugins = plugins.map(function (plugin) {
+      return Promise.all([].concat(_toConsumableArray(plugins.map(function (plugin) {
         return plugin.getSources;
-      }).filter(function (getSources) {
-        return getSources !== undefined;
-      });
-      return Promise.all([].concat(_toConsumableArray(getSourcesFromPlugins), [props.getSources]).map(function (getSources) {
+      })), [props.getSources]).filter(Boolean).map(function (getSources) {
         return getNormalizedSources(getSources, options);
       })).then(function (nested) {
-        return (// same as `nested.flat()`
-          nested.reduce(function (acc, array) {
-            acc = acc.concat(array);
-            return acc;
-          }, [])
-        );
+        return flatten(nested);
       }).then(function (sources) {
@@ -89,5 +89,5 @@ return sources.map(function (source) {
               plugins.forEach(function (plugin) {
-                if (plugin.onSelect) {
-                  plugin.onSelect(params);
-                }
+                var _plugin$subscribed, _plugin$subscribed$on;
+
+                (_plugin$subscribed = plugin.subscribed) === null || _plugin$subscribed === void 0 ? void 0 : (_plugin$subscribed$on = _plugin$subscribed.onSelect) === null || _plugin$subscribed$on === void 0 ? void 0 : _plugin$subscribed$on.call(_plugin$subscribed, params);
               });
@@ -99,22 +99,6 @@ }
     },
-    navigator: _objectSpread({
-      navigate: function navigate(_ref2) {
-        var suggestionUrl = _ref2.suggestionUrl;
-        environment.location.assign(suggestionUrl);
-      },
-      navigateNewTab: function navigateNewTab(_ref3) {
-        var suggestionUrl = _ref3.suggestionUrl;
-        var windowReference = environment.open(suggestionUrl, '_blank', 'noopener');
-
-        if (windowReference) {
-          windowReference.focus();
-        }
-      },
-      navigateNewWindow: function navigateNewWindow(_ref4) {
-        var suggestionUrl = _ref4.suggestionUrl;
-        environment.open(suggestionUrl, '_blank', 'noopener');
-      }
-    }, props.navigator),
-    plugins: plugins
+    navigator: _objectSpread(_objectSpread({}, getNavigator({
+      environment: environment
+    })), props.navigator)
   });
 }

dist/esm/getPropGetters.d.ts

@@ -1,2 +0,2 @@
-import { InternalAutocompleteOptions, AutocompleteSetters, AutocompleteStore, AutocompleteRefresh, GetDropdownProps, GetEnvironmentProps, GetFormProps, GetInputProps, GetItemProps, GetLabelProps, GetMenuProps, GetRootProps } from './types';
+import { InternalAutocompleteOptions, AutocompleteSetters, AutocompleteStore, AutocompleteRefresh, GetPanelProps, GetEnvironmentProps, GetFormProps, GetInputProps, GetItemProps, GetLabelProps, GetListProps, GetRootProps } from './types';
 interface GetPropGettersOptions<TItem> extends AutocompleteSetters<TItem> {
@@ -7,3 +7,3 @@ store: AutocompleteStore<TItem>;
 }
-export declare function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({ store, props, setHighlightedIndex, setQuery, setSuggestions, setIsOpen, setStatus, setContext, refresh, }: GetPropGettersOptions<TItem>): {
+export declare function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({ store, props, setSelectedItemId, setQuery, setCollections, setIsOpen, setStatus, setContext, refresh, }: GetPropGettersOptions<TItem>): {
     getEnvironmentProps: GetEnvironmentProps;
@@ -14,6 +14,6 @@ getRootProps: GetRootProps;
     getInputProps: GetInputProps<TEvent, TMouseEvent, TKeyboardEvent>;
-    getDropdownProps: GetDropdownProps<TMouseEvent>;
-    getMenuProps: GetMenuProps;
+    getPanelProps: GetPanelProps<TMouseEvent>;
+    getListProps: GetListProps;
     getItemProps: GetItemProps<any, TMouseEvent>;
 };
 export {};

dist/esm/getPropGetters.js

@@ -13,9 +13,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 import { onKeyDown as _onKeyDown } from './onKeyDown';
-import { getHighlightedItem, isOrContainsNode } from './utils';
+import { getSelectedItem, isOrContainsNode } from './utils';
 export function getPropGetters(_ref) {
   var store = _ref.store,
       props = _ref.props,
-      setHighlightedIndex = _ref.setHighlightedIndex,
+      setSelectedItemId = _ref.setSelectedItemId,
       setQuery = _ref.setQuery,
-      setSuggestions = _ref.setSuggestions,
+      setCollections = _ref.setCollections,
       setIsOpen = _ref.setIsOpen,
@@ -29,3 +29,3 @@ setStatus = _ref.setStatus,
       // On touch devices, we do not rely on the native `blur` event of the
-      // input to close the dropdown, but rather on a custom `touchstart` event
+      // input to close the panel, but rather on a custom `touchstart` event
       // outside of the autocomplete elements.
@@ -39,3 +39,3 @@ // This ensures a working experience on mobile because we blur the input
 
-        var isTargetWithinAutocomplete = [getterProps.searchBoxElement, getterProps.dropdownElement].some(function (contextNode) {
+        var isTargetWithinAutocomplete = [getterProps.searchBoxElement, getterProps.panelElement].some(function (contextNode) {
           return contextNode && (isOrContainsNode(contextNode, event.target) || isOrContainsNode(contextNode, props.environment.document.activeElement));
@@ -51,3 +51,3 @@ });
       // hide the virtual keyboard. This gives more vertical space to
-      // discover all the suggestions showing up in the dropdown.
+      // discover all the suggestions showing up in the panel.
       onTouchMove: function onTouchMove(event) {
@@ -68,3 +68,3 @@ if (store.getState().isOpen === false || getterProps.inputElement !== props.environment.document.activeElement || event.target === getterProps.inputElement) {
       'aria-haspopup': 'listbox',
-      'aria-owns': store.getState().isOpen ? "".concat(props.id, "-menu") : undefined,
+      'aria-owns': store.getState().isOpen ? "".concat(props.id, "-list") : undefined,
       'aria-labelledby': "".concat(props.id, "-label")
@@ -86,5 +86,5 @@ }, rest);
           state: store.getState(),
-          setHighlightedIndex: setHighlightedIndex,
+          setSelectedItemId: setSelectedItemId,
           setQuery: setQuery,
-          setSuggestions: setSuggestions,
+          setCollections: setCollections,
           setIsOpen: setIsOpen,
@@ -110,5 +110,5 @@ setStatus: setStatus,
             props: props,
-            setHighlightedIndex: setHighlightedIndex,
+            setSelectedItemId: setSelectedItemId,
             setQuery: setQuery,
-            setSuggestions: setSuggestions,
+            setCollections: setCollections,
             setIsOpen: setIsOpen,
@@ -133,12 +133,12 @@ setStatus: setStatus,
       // We want to trigger a query when `openOnFocus` is true
-      // because the dropdown should open with the current query.
+      // because the panel should open with the current query.
       if (props.openOnFocus || store.getState().query.length > 0) {
         onInput({
-          query: store.getState().query,
+          query: store.getState().completion || store.getState().query,
           event: event,
           store: store,
           props: props,
-          setHighlightedIndex: setHighlightedIndex,
+          setSelectedItemId: setSelectedItemId,
           setQuery: setQuery,
-          setSuggestions: setSuggestions,
+          setCollections: setCollections,
           setIsOpen: setIsOpen,
@@ -163,7 +163,7 @@ setStatus: setStatus,
     return _objectSpread({
-      'aria-autocomplete': props.enableCompletion ? 'both' : 'list',
-      'aria-activedescendant': store.getState().isOpen && store.getState().highlightedIndex !== null ? "".concat(props.id, "-item-").concat(store.getState().highlightedIndex) : undefined,
-      'aria-controls': store.getState().isOpen ? "".concat(props.id, "-menu") : undefined,
+      'aria-autocomplete': 'both',
+      'aria-activedescendant': store.getState().isOpen && store.getState().selectedItemId !== null ? "".concat(props.id, "-item-").concat(store.getState().selectedItemId) : undefined,
+      'aria-controls': store.getState().isOpen ? "".concat(props.id, "-list") : undefined,
       'aria-labelledby': "".concat(props.id, "-label"),
-      value: store.getState().query,
+      value: store.getState().completion || store.getState().query,
       id: "".concat(props.id, "-input"),
@@ -184,5 +184,5 @@ autoComplete: 'off',
           props: props,
-          setHighlightedIndex: setHighlightedIndex,
+          setSelectedItemId: setSelectedItemId,
           setQuery: setQuery,
-          setSuggestions: setSuggestions,
+          setCollections: setCollections,
           setIsOpen: setIsOpen,
@@ -199,5 +199,5 @@ setStatus: setStatus,
           props: props,
-          setHighlightedIndex: setHighlightedIndex,
+          setSelectedItemId: setSelectedItemId,
           setQuery: setQuery,
-          setSuggestions: setSuggestions,
+          setCollections: setCollections,
           setIsOpen: setIsOpen,
@@ -218,9 +218,9 @@ setStatus: setStatus,
       onClick: function onClick(event) {
-        // When the dropdown is closed and you click on the input while
+        // When the panel is closed and you click on the input while
         // the input is focused, the `onFocus` event is not triggered
         // (default browser behavior).
-        // In an autocomplete context, it makes sense to open the menu in this
+        // In an autocomplete context, it makes sense to open the panel in this
         // case.
         // We mimic this event by catching the `onClick` event which
-        // triggers the `onFocus` for the dropdown to open.
+        // triggers the `onFocus` for the panel to open.
         if (providedProps.inputElement === props.environment.document.activeElement && !store.getState().isOpen) {
@@ -240,16 +240,16 @@ onFocus(event);
 
-  var getMenuProps = function getMenuProps(rest) {
+  var getListProps = function getListProps(rest) {
     return _objectSpread({
       role: 'listbox',
       'aria-labelledby': "".concat(props.id, "-label"),
-      id: "".concat(props.id, "-menu")
+      id: "".concat(props.id, "-list")
     }, rest);
   };
 
-  var getDropdownProps = function getDropdownProps(rest) {
+  var getPanelProps = function getPanelProps(rest) {
     return _objectSpread({
       onMouseDown: function onMouseDown(event) {
-        // Prevents the `activeElement` from being changed to the dropdown so
+        // Prevents the `activeElement` from being changed to the panel so
         // that the blur event is not triggered, otherwise it closes the
-        // dropdown.
+        // panel.
         event.preventDefault();
@@ -271,5 +271,5 @@ },
       role: 'option',
-      'aria-selected': store.getState().highlightedIndex === item.__autocomplete_id,
+      'aria-selected': store.getState().selectedItemId === item.__autocomplete_id,
       onMouseMove: function onMouseMove(event) {
-        if (item.__autocomplete_id === store.getState().highlightedIndex) {
+        if (item.__autocomplete_id === store.getState().selectedItemId) {
           return;
@@ -279,9 +279,9 @@ }
         store.send('mousemove', item.__autocomplete_id);
-        var highlightedItem = getHighlightedItem({
+        var highlightedItem = getSelectedItem({
           state: store.getState()
         });
 
-        if (store.getState().highlightedIndex !== null && highlightedItem) {
+        if (store.getState().selectedItemId !== null && highlightedItem) {
           var _item = highlightedItem.item,
-              itemValue = highlightedItem.itemValue,
+              itemInputValue = highlightedItem.itemInputValue,
               itemUrl = highlightedItem.itemUrl,
@@ -291,10 +291,10 @@ _source = highlightedItem.source;
           _source.onHighlight({
-            suggestion: _item,
-            suggestionValue: itemValue,
-            suggestionUrl: itemUrl,
+            item: _item,
+            itemInputValue: itemInputValue,
+            itemUrl: itemUrl,
             source: _source,
             state: store.getState(),
-            setHighlightedIndex: setHighlightedIndex,
+            setSelectedItemId: setSelectedItemId,
             setQuery: setQuery,
-            setSuggestions: setSuggestions,
+            setCollections: setCollections,
             setIsOpen: setIsOpen,
@@ -313,23 +313,23 @@ setStatus: setStatus,
       onClick: function onClick(event) {
-        var inputValue = source.getInputValue({
-          suggestion: item,
+        var itemInputValue = source.getItemInputValue({
+          item: item,
           state: store.getState()
         });
-        var suggestionUrl = source.getSuggestionUrl({
-          suggestion: item,
+        var itemUrl = source.getItemUrl({
+          item: item,
           state: store.getState()
-        }); // If `getSuggestionUrl` is provided, it means that the suggestion
+        }); // If `getItemUrl` is provided, it means that the suggestion
         // is a link, not plain text that aims at updating the query.
         // We can therefore skip the state change because it will update
-        // the `highlightedIndex`, resulting in a UI flash, especially
+        // the `selectedItemId`, resulting in a UI flash, especially
         // noticeable on mobile.
 
-        var runPreCommand = suggestionUrl ? Promise.resolve() : onInput({
-          query: inputValue,
+        var runPreCommand = itemUrl ? Promise.resolve() : onInput({
+          query: itemInputValue,
           event: event,
           store: store,
           props: props,
-          setHighlightedIndex: setHighlightedIndex,
+          setSelectedItemId: setSelectedItemId,
           setQuery: setQuery,
-          setSuggestions: setSuggestions,
+          setCollections: setCollections,
           setIsOpen: setIsOpen,
@@ -345,10 +345,10 @@ setStatus: setStatus,
           source.onSelect({
-            suggestion: item,
-            suggestionValue: inputValue,
-            suggestionUrl: suggestionUrl,
+            item: item,
+            itemInputValue: itemInputValue,
+            itemUrl: itemUrl,
             source: source,
             state: store.getState(),
-            setHighlightedIndex: setHighlightedIndex,
+            setSelectedItemId: setSelectedItemId,
             setQuery: setQuery,
-            setSuggestions: setSuggestions,
+            setCollections: setCollections,
             setIsOpen: setIsOpen,
@@ -370,6 +370,6 @@ setStatus: setStatus,
     getInputProps: getInputProps,
-    getDropdownProps: getDropdownProps,
-    getMenuProps: getMenuProps,
+    getPanelProps: getPanelProps,
+    getListProps: getListProps,
     getItemProps: getItemProps
   };
 }

dist/esm/onInput.d.ts

@@ -12,3 +12,3 @@ import { InternalAutocompleteOptions, AutocompleteSetters, AutocompleteState, AutocompleteStore, AutocompleteRefresh } from './types';
      * actual input. For example, we use `onInput` when we click on an item,
-     * but we want to close the dropdown in that case.
+     * but we want to close the panel in that case.
      */
@@ -18,3 +18,3 @@ nextState?: Partial<AutocompleteState<TItem>>;
 }
-export declare function onInput<TItem>({ query, event, store, props, setHighlightedIndex, setQuery, setSuggestions, setIsOpen, setStatus, setContext, nextState, refresh, }: OnInputParams<TItem>): Promise<void>;
+export declare function onInput<TItem>({ query, event, store, props, setSelectedItemId, setQuery, setCollections, setIsOpen, setStatus, setContext, nextState, refresh, }: OnInputParams<TItem>): Promise<void>;
 export {};

dist/esm/onInput.js

@@ -7,3 +7,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-import { getHighlightedItem } from './utils';
+import { getSelectedItem } from './utils';
 var lastStalledId = null;
@@ -15,5 +15,5 @@ export function onInput(_ref) {
       props = _ref.props,
-      setHighlightedIndex = _ref.setHighlightedIndex,
+      setSelectedItemId = _ref.setSelectedItemId,
       setQuery = _ref.setQuery,
-      setSuggestions = _ref.setSuggestions,
+      setCollections = _ref.setCollections,
       setIsOpen = _ref.setIsOpen,
@@ -30,5 +30,5 @@ setStatus = _ref.setStatus,
       state: store.getState(),
-      setHighlightedIndex: setHighlightedIndex,
+      setSelectedItemId: setSelectedItemId,
       setQuery: setQuery,
-      setSuggestions: setSuggestions,
+      setCollections: setCollections,
       setIsOpen: setIsOpen,
@@ -46,3 +46,3 @@ setStatus: setStatus,
   setQuery(query);
-  setHighlightedIndex(props.defaultHighlightedIndex);
+  setSelectedItemId(props.defaultSelectedItemId);
 
@@ -53,8 +53,8 @@ if (query.length === 0 && props.openOnFocus === false) {
     setStatus('idle');
-    setSuggestions(store.getState().suggestions.map(function (suggestion) {
-      return _objectSpread(_objectSpread({}, suggestion), {}, {
+    setCollections(store.getState().collections.map(function (collection) {
+      return _objectSpread(_objectSpread({}, collection), {}, {
         items: []
       });
     }));
-    setIsOpen((_nextState$isOpen = nextState.isOpen) !== null && _nextState$isOpen !== void 0 ? _nextState$isOpen : props.shouldDropdownShow({
+    setIsOpen((_nextState$isOpen = nextState.isOpen) !== null && _nextState$isOpen !== void 0 ? _nextState$isOpen : props.shouldPanelShow({
       state: store.getState()
@@ -72,5 +72,5 @@ }));
     state: store.getState(),
-    setHighlightedIndex: setHighlightedIndex,
+    setSelectedItemId: setSelectedItemId,
     setQuery: setQuery,
-    setSuggestions: setSuggestions,
+    setCollections: setCollections,
     setIsOpen: setIsOpen,
@@ -84,8 +84,8 @@ setStatus: setStatus,
     return Promise.all(sources.map(function (source) {
-      return Promise.resolve(source.getSuggestions({
+      return Promise.resolve(source.getItems({
         query: query,
         state: store.getState(),
-        setHighlightedIndex: setHighlightedIndex,
+        setSelectedItemId: setSelectedItemId,
         setQuery: setQuery,
-        setSuggestions: setSuggestions,
+        setCollections: setCollections,
         setIsOpen: setIsOpen,
@@ -101,28 +101,28 @@ setStatus: setStatus,
       });
-    })).then(function (suggestions) {
+    })).then(function (collections) {
       var _nextState$isOpen2;
 
       setStatus('idle');
-      setSuggestions(suggestions);
-      setIsOpen((_nextState$isOpen2 = nextState.isOpen) !== null && _nextState$isOpen2 !== void 0 ? _nextState$isOpen2 : query.length === 0 && props.openOnFocus || props.shouldDropdownShow({
+      setCollections(collections);
+      setIsOpen((_nextState$isOpen2 = nextState.isOpen) !== null && _nextState$isOpen2 !== void 0 ? _nextState$isOpen2 : query.length === 0 && props.openOnFocus || props.shouldPanelShow({
         state: store.getState()
       }));
-      var highlightedItem = getHighlightedItem({
+      var highlightedItem = getSelectedItem({
         state: store.getState()
       });
 
-      if (store.getState().highlightedIndex !== null && highlightedItem) {
+      if (store.getState().selectedItemId !== null && highlightedItem) {
         var item = highlightedItem.item,
-            itemValue = highlightedItem.itemValue,
+            itemInputValue = highlightedItem.itemInputValue,
             itemUrl = highlightedItem.itemUrl,
             source = highlightedItem.source;
         source.onHighlight({
-          suggestion: item,
-          suggestionValue: itemValue,
-          suggestionUrl: itemUrl,
+          item: item,
+          itemInputValue: itemInputValue,
+          itemUrl: itemUrl,
           source: source,
           state: store.getState(),
-          setHighlightedIndex: setHighlightedIndex,
+          setSelectedItemId: setSelectedItemId,
           setQuery: setQuery,
-          setSuggestions: setSuggestions,
+          setCollections: setCollections,
           setIsOpen: setIsOpen,
@@ -129,0 +129,0 @@ setStatus: setStatus,

dist/esm/onKeyDown.d.ts

@@ -8,3 +8,3 @@ import { InternalAutocompleteOptions, AutocompleteSetters, AutocompleteStore, AutocompleteRefresh } from './types';
 }
-export declare function onKeyDown<TItem>({ event, store, props, setHighlightedIndex, setQuery, setSuggestions, setIsOpen, setStatus, setContext, refresh, }: OnKeyDownOptions<TItem>): void;
+export declare function onKeyDown<TItem>({ event, store, props, setSelectedItemId, setQuery, setCollections, setIsOpen, setStatus, setContext, refresh, }: OnKeyDownOptions<TItem>): void;
 export {};

dist/esm/onKeyDown.js

@@ -1,4 +0,3 @@
-import { getCompletion } from './getCompletion';
 import { onInput } from './onInput';
-import { getHighlightedItem } from './utils';
+import { getSelectedItem } from './utils';
 export function onKeyDown(_ref) {
@@ -8,5 +7,5 @@ var event = _ref.event,
       props = _ref.props,
-      setHighlightedIndex = _ref.setHighlightedIndex,
+      setSelectedItemId = _ref.setSelectedItemId,
       setQuery = _ref.setQuery,
-      setSuggestions = _ref.setSuggestions,
+      setCollections = _ref.setCollections,
       setIsOpen = _ref.setIsOpen,
@@ -22,3 +21,3 @@ setStatus = _ref.setStatus,
     store.send(event.key, null);
-    var nodeItem = props.environment.document.getElementById("".concat(props.id, "-item-").concat(store.getState().highlightedIndex));
+    var nodeItem = props.environment.document.getElementById("".concat(props.id, "-item-").concat(store.getState().selectedItemId));
 
@@ -33,20 +32,20 @@ if (nodeItem) {
 
-    var highlightedItem = getHighlightedItem({
+    var highlightedItem = getSelectedItem({
       state: store.getState()
     });
 
-    if (store.getState().highlightedIndex !== null && highlightedItem) {
+    if (store.getState().selectedItemId !== null && highlightedItem) {
       var item = highlightedItem.item,
-          itemValue = highlightedItem.itemValue,
+          itemInputValue = highlightedItem.itemInputValue,
           itemUrl = highlightedItem.itemUrl,
           source = highlightedItem.source;
       source.onHighlight({
-        suggestion: item,
-        suggestionValue: itemValue,
-        suggestionUrl: itemUrl,
+        item: item,
+        itemInputValue: itemInputValue,
+        itemUrl: itemUrl,
         source: source,
         state: store.getState(),
-        setHighlightedIndex: setHighlightedIndex,
+        setSelectedItemId: setSelectedItemId,
         setQuery: setQuery,
-        setSuggestions: setSuggestions,
+        setCollections: setCollections,
         setIsOpen: setIsOpen,
@@ -58,30 +57,6 @@ setStatus: setStatus,
     }
-  } else if ((event.key === 'Tab' || // When the user hits the right arrow and is at the end of the input
-  // query, we validate the completion.
-  event.key === 'ArrowRight' && event.target.selectionStart === store.getState().query.length) && props.enableCompletion && store.getState().highlightedIndex !== null) {
-    event.preventDefault();
-    var query = getCompletion({
-      state: store.getState(),
-      props: props
-    });
-
-    if (query) {
-      onInput({
-        query: query,
-        event: event,
-        store: store,
-        props: props,
-        setHighlightedIndex: setHighlightedIndex,
-        setQuery: setQuery,
-        setSuggestions: setSuggestions,
-        setIsOpen: setIsOpen,
-        setStatus: setStatus,
-        setContext: setContext,
-        refresh: refresh
-      });
-    }
   } else if (event.key === 'Escape') {
     // This prevents the default browser behavior on `input[type="search"]`
     // to remove the query right away because we first want to close the
-    // dropdown.
+    // panel.
     event.preventDefault();
@@ -92,4 +67,4 @@ store.send(event.key, null);
     // form event.
-    if (store.getState().highlightedIndex === null || store.getState().suggestions.every(function (suggestion) {
-      return suggestion.items.length === 0;
+    if (store.getState().selectedItemId === null || store.getState().collections.every(function (collection) {
+      return collection.items.length === 0;
     })) {
@@ -103,7 +78,7 @@ return;
 
-    var _ref2 = getHighlightedItem({
+    var _ref2 = getSelectedItem({
       state: store.getState()
     }),
         _item = _ref2.item,
-        _itemValue = _ref2.itemValue,
+        _itemInputValue = _ref2.itemInputValue,
         _itemUrl = _ref2.itemUrl,
@@ -115,10 +90,10 @@ _source = _ref2.source;
         _source.onSelect({
-          suggestion: _item,
-          suggestionValue: _itemValue,
-          suggestionUrl: _itemUrl,
+          item: _item,
+          itemInputValue: _itemInputValue,
+          itemUrl: _itemUrl,
           source: _source,
           state: store.getState(),
-          setHighlightedIndex: setHighlightedIndex,
+          setSelectedItemId: setSelectedItemId,
           setQuery: setQuery,
-          setSuggestions: setSuggestions,
+          setCollections: setCollections,
           setIsOpen: setIsOpen,
@@ -131,4 +106,4 @@ setStatus: setStatus,
         props.navigator.navigateNewTab({
-          suggestionUrl: _itemUrl,
-          suggestion: _item,
+          itemUrl: _itemUrl,
+          item: _item,
           state: store.getState()
@@ -140,10 +115,10 @@ });
         _source.onSelect({
-          suggestion: _item,
-          suggestionValue: _itemValue,
-          suggestionUrl: _itemUrl,
+          item: _item,
+          itemInputValue: _itemInputValue,
+          itemUrl: _itemUrl,
           source: _source,
           state: store.getState(),
-          setHighlightedIndex: setHighlightedIndex,
+          setSelectedItemId: setSelectedItemId,
           setQuery: setQuery,
-          setSuggestions: setSuggestions,
+          setCollections: setCollections,
           setIsOpen: setIsOpen,
@@ -156,4 +131,4 @@ setStatus: setStatus,
         props.navigator.navigateNewWindow({
-          suggestionUrl: _itemUrl,
-          suggestion: _item,
+          itemUrl: _itemUrl,
+          item: _item,
           state: store.getState()
@@ -166,10 +141,10 @@ });
         _source.onSelect({
-          suggestion: _item,
-          suggestionValue: _itemValue,
-          suggestionUrl: _itemUrl,
+          item: _item,
+          itemInputValue: _itemInputValue,
+          itemUrl: _itemUrl,
           source: _source,
           state: store.getState(),
-          setHighlightedIndex: setHighlightedIndex,
+          setSelectedItemId: setSelectedItemId,
           setQuery: setQuery,
-          setSuggestions: setSuggestions,
+          setCollections: setCollections,
           setIsOpen: setIsOpen,
@@ -182,4 +157,4 @@ setStatus: setStatus,
         props.navigator.navigate({
-          suggestionUrl: _itemUrl,
-          suggestion: _item,
+          itemUrl: _itemUrl,
+          item: _item,
           state: store.getState()
@@ -191,9 +166,9 @@ });
       onInput({
-        query: _itemValue,
+        query: _itemInputValue,
         event: event,
         store: store,
         props: props,
-        setHighlightedIndex: setHighlightedIndex,
+        setSelectedItemId: setSelectedItemId,
         setQuery: setQuery,
-        setSuggestions: setSuggestions,
+        setCollections: setCollections,
         setIsOpen: setIsOpen,
@@ -208,10 +183,10 @@ setStatus: setStatus,
         _source.onSelect({
-          suggestion: _item,
-          suggestionValue: _itemValue,
-          suggestionUrl: _itemUrl,
+          item: _item,
+          itemInputValue: _itemInputValue,
+          itemUrl: _itemUrl,
           source: _source,
           state: store.getState(),
-          setHighlightedIndex: setHighlightedIndex,
+          setSelectedItemId: setSelectedItemId,
           setQuery: setQuery,
-          setSuggestions: setSuggestions,
+          setCollections: setCollections,
           setIsOpen: setIsOpen,
@@ -218,0 +193,0 @@ setStatus: setStatus,

dist/esm/stateReducer.js

@@ -7,9 +7,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-import { getItemsCount, getNextHighlightedIndex } from './utils';
+import { getCompletion } from './getCompletion';
+import { getItemsCount, getNextSelectedItemId } from './utils';
 export var stateReducer = function stateReducer(state, action) {
   switch (action.type) {
-    case 'setHighlightedIndex':
+    case 'setSelectedItemId':
       {
         return _objectSpread(_objectSpread({}, state), {}, {
-          highlightedIndex: action.payload
+          selectedItemId: action.payload
         });
@@ -21,10 +22,11 @@ }
         return _objectSpread(_objectSpread({}, state), {}, {
-          query: action.payload
+          query: action.payload,
+          completion: null
         });
       }
 
-    case 'setSuggestions':
+    case 'setCollections':
       {
         return _objectSpread(_objectSpread({}, state), {}, {
-          suggestions: action.payload
+          collections: action.payload
         });
@@ -56,5 +58,11 @@ }
       {
-        return _objectSpread(_objectSpread({}, state), {}, {
-          highlightedIndex: getNextHighlightedIndex(1, state.highlightedIndex, getItemsCount(state), action.props.defaultHighlightedIndex)
+        var nextState = _objectSpread(_objectSpread({}, state), {}, {
+          selectedItemId: getNextSelectedItemId(1, state.selectedItemId, getItemsCount(state), action.props.defaultSelectedItemId)
         });
+
+        return _objectSpread(_objectSpread({}, nextState), {}, {
+          completion: getCompletion({
+            state: nextState
+          })
+        });
       }
@@ -64,5 +72,11 @@
       {
-        return _objectSpread(_objectSpread({}, state), {}, {
-          highlightedIndex: getNextHighlightedIndex(-1, state.highlightedIndex, getItemsCount(state), action.props.defaultHighlightedIndex)
+        var _nextState = _objectSpread(_objectSpread({}, state), {}, {
+          selectedItemId: getNextSelectedItemId(-1, state.selectedItemId, getItemsCount(state), action.props.defaultSelectedItemId)
         });
+
+        return _objectSpread(_objectSpread({}, _nextState), {}, {
+          completion: getCompletion({
+            state: _nextState
+          })
+        });
       }
@@ -74,3 +88,4 @@
           return _objectSpread(_objectSpread({}, state), {}, {
-            isOpen: false
+            isOpen: false,
+            completion: null
           });
@@ -82,4 +97,3 @@ }
           status: 'idle',
-          statusContext: {},
-          suggestions: []
+          collections: []
         });
@@ -91,6 +105,5 @@ }
         return _objectSpread(_objectSpread({}, state), {}, {
-          highlightedIndex: null,
+          selectedItemId: null,
           isOpen: false,
-          status: 'idle',
-          statusContext: {}
+          status: 'idle'
         });
@@ -102,11 +115,10 @@ }
         return _objectSpread(_objectSpread({}, state), {}, {
-          highlightedIndex: // Since we open the menu on reset when openOnFocus=true
-          // we need to restore the highlighted index to the defaultHighlightedIndex. (DocSearch use-case)
-          // Since we close the menu when openOnFocus=false
+          selectedItemId: // Since we open the panel on reset when openOnFocus=true
+          // we need to restore the highlighted index to the defaultSelectedItemId. (DocSearch use-case)
+          // Since we close the panel when openOnFocus=false
           // we lose track of the highlighted index. (Query-suggestions use-case)
-          action.props.openOnFocus === true ? action.props.defaultHighlightedIndex : null,
+          action.props.openOnFocus === true ? action.props.defaultSelectedItemId : null,
           isOpen: action.props.openOnFocus,
-          // @TODO: Check with UX team if we want to close the menu on reset.
+          // @TODO: Check with UX team if we want to close the panel on reset.
           status: 'idle',
-          statusContext: {},
           query: ''
@@ -119,3 +131,3 @@ });
         return _objectSpread(_objectSpread({}, state), {}, {
-          highlightedIndex: action.props.defaultHighlightedIndex,
+          selectedItemId: action.props.defaultSelectedItemId,
           isOpen: action.props.openOnFocus || state.query.length > 0
@@ -133,3 +145,3 @@ });
           isOpen: false,
-          highlightedIndex: null
+          selectedItemId: null
         });
@@ -141,3 +153,3 @@ }
         return _objectSpread(_objectSpread({}, state), {}, {
-          highlightedIndex: action.payload
+          selectedItemId: action.payload
         });
@@ -149,3 +161,3 @@ }
         return _objectSpread(_objectSpread({}, state), {}, {
-          highlightedIndex: action.props.defaultHighlightedIndex
+          selectedItemId: action.props.defaultSelectedItemId
         });
@@ -152,0 +164,0 @@ }

dist/esm/types/api.d.ts

@@ -0,5 +1,6 @@
+import { MaybePromise } from '@algolia/autocomplete-shared';
 import { AutocompleteAccessibilityGetters } from './getters';
+import { AutocompletePlugin } from './plugins';
 import { AutocompleteSetters } from './setters';
 import { AutocompleteState } from './state';
-import { MaybePromise } from './wrappers';
 export interface AutocompleteApi<TItem, TEvent = Event, TMouseEvent = MouseEvent, TKeyboardEvent = KeyboardEvent> extends AutocompleteSetters<TItem>, AutocompleteAccessibilityGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent> {
@@ -12,3 +13,3 @@ /**
 export declare type AutocompleteRefresh = () => Promise<void>;
-export interface AutocompleteSuggestion<TItem> {
+export interface AutocompleteCollection<TItem> {
     source: InternalAutocompleteSource<TItem>;
@@ -23,5 +24,5 @@ items: TItem[];
 interface ItemParams<TItem> {
-    suggestion: TItem;
-    suggestionValue: ReturnType<InternalAutocompleteSource<TItem>['getInputValue']>;
-    suggestionUrl: ReturnType<InternalAutocompleteSource<TItem>['getSuggestionUrl']>;
+    item: TItem;
+    itemInputValue: ReturnType<InternalAutocompleteSource<TItem>['getItemInputValue']>;
+    itemUrl: ReturnType<InternalAutocompleteSource<TItem>['getItemUrl']>;
     source: InternalAutocompleteSource<TItem>;
@@ -46,14 +47,14 @@ }
     /**
-     * Get the string value of the suggestion. The value is used to fill the search box.
+     * Get the string value of the item. The value is used to fill the search box.
      */
-    getInputValue?({ suggestion, state, }: {
-        suggestion: TItem;
+    getItemInputValue?({ item, state, }: {
+        item: TItem;
         state: AutocompleteState<TItem>;
     }): string;
     /**
-     * Get the URL of a suggestion. The value is used to create default navigation features for
+     * Get the URL of a item. The value is used to create default navigation features for
      * `onClick` and `onKeyDown`.
      */
-    getSuggestionUrl?({ suggestion, state, }: {
-        suggestion: TItem;
+    getItemUrl?({ item, state, }: {
+        item: TItem;
         state: AutocompleteState<TItem>;
@@ -64,3 +65,3 @@ }): string | undefined;
      */
-    getSuggestions(params: GetSourcesParams<TItem>): MaybePromise<TItem[]>;
+    getItems(params: GetSourcesParams<TItem>): MaybePromise<TItem[] | TItem[][]>;
     /**
@@ -98,4 +99,4 @@ * Function called when an item is selected.
     navigate(params: {
-        suggestionUrl: string;
-        suggestion: TItem;
+        itemUrl: string;
+        item: TItem;
         state: AutocompleteState<TItem>;
@@ -107,4 +108,4 @@ }): void;
     navigateNewTab(params: {
-        suggestionUrl: string;
-        suggestion: TItem;
+        itemUrl: string;
+        item: TItem;
         state: AutocompleteState<TItem>;
@@ -116,25 +117,7 @@ }): void;
     navigateNewWindow(params: {
-        suggestionUrl: string;
-        suggestion: TItem;
+        itemUrl: string;
+        item: TItem;
         state: AutocompleteState<TItem>;
     }): void;
 }
-export declare type AutocompletePlugin<TItem, TData> = {
-    /**
-     * The sources to get the suggestions from.
-     */
-    getSources?(params: GetSourcesParams<TItem>): MaybePromise<Array<AutocompleteSource<TItem>>>;
-    /**
-     * The function called when the autocomplete form is submitted.
-     */
-    onSubmit?(params: OnSubmitParams<TItem>): void;
-    /**
-     * Function called when an item is selected.
-     */
-    onSelect?(params: OnSelectParams<TItem>): void;
-    /**
-     * An extra plugin specific object to store variables and functions
-     */
-    data?: TData;
-};
 export interface AutocompleteOptions<TItem> {
@@ -145,3 +128,3 @@ /**
      * The debug mode is useful when developing because it doesn't close
-     * the dropdown when the blur event occurs.
+     * the panel when the blur event occurs.
      *
@@ -179,14 +162,8 @@ * @default false
      */
-    defaultHighlightedIndex?: number | null;
+    defaultSelectedItemId?: number | null;
     /**
-     * Whether to show the highlighted suggestion as completion in the input.
+     * Whether to open the panel on focus when there's no query.
      *
      * @default false
      */
-    enableCompletion?: boolean;
-    /**
-     * Whether to open the dropdown on focus when there's no query.
-     *
-     * @default false
-     */
     openOnFocus?: boolean;
@@ -207,3 +184,3 @@ /**
      */
-    getSources(params: GetSourcesParams<TItem>): MaybePromise<Array<AutocompleteSource<TItem>>>;
+    getSources?(params: GetSourcesParams<TItem>): MaybePromise<Array<AutocompleteSource<TItem>>>;
     /**
@@ -222,5 +199,5 @@ * The environment from where your JavaScript is running.
     /**
-     * The function called to determine whether the dropdown should open.
+     * The function called to determine whether the panel should open.
      */
-    shouldDropdownShow?(params: {
+    shouldPanelShow?(params: {
         state: AutocompleteState<TItem>;
@@ -253,4 +230,3 @@ }): boolean;
     autoFocus: boolean;
-    defaultHighlightedIndex: number | null;
-    enableCompletion: boolean;
+    defaultSelectedItemId: number | null;
     openOnFocus: boolean;
@@ -263,3 +239,3 @@ stallThreshold: number;
     plugins: Array<AutocompletePlugin<TItem, unknown>>;
-    shouldDropdownShow(params: {
+    shouldPanelShow(params: {
         state: AutocompleteState<TItem>;
@@ -266,0 +242,0 @@ }): boolean;

dist/esm/types/getters.d.ts

@@ -8,4 +8,4 @@ import { InternalAutocompleteSource } from './api';
     getInputProps: GetInputProps<TEvent, TMouseEvent, TKeyboardEvent>;
-    getDropdownProps: GetDropdownProps<TMouseEvent>;
-    getMenuProps: GetMenuProps;
+    getPanelProps: GetPanelProps<TMouseEvent>;
+    getListProps: GetListProps;
     getItemProps: GetItemProps<TItem, TMouseEvent>;
@@ -16,3 +16,3 @@ }
     searchBoxElement: HTMLElement;
-    dropdownElement: HTMLElement;
+    panelElement: HTMLElement;
     inputElement: HTMLInputElement;
@@ -73,3 +73,3 @@ }) => {
 };
-export declare type GetDropdownProps<TMouseEvent> = (props?: {
+export declare type GetPanelProps<TMouseEvent> = (props?: {
     [key: string]: unknown;
@@ -80,3 +80,3 @@ }) => {
 };
-export declare type GetMenuProps = (props?: {
+export declare type GetListProps = (props?: {
     [key: string]: unknown;
@@ -83,0 +83,0 @@ }) => {

dist/esm/types/index.d.ts

 export * from './api';
 export * from './getters';
+export * from './plugins';
 export * from './setters';
 export * from './state';
 export * from './store';

dist/esm/types/index.js

 export * from './api';
 export * from './getters';
+export * from './plugins';
 export * from './setters';
 export * from './state';
 export * from './store';

dist/esm/types/setters.d.ts

 import { AutocompleteState } from './state';
 export declare type StateUpdater<TState> = (value: TState) => void;
 export interface AutocompleteSetters<TItem> {
-    setHighlightedIndex: StateUpdater<AutocompleteState<TItem>['highlightedIndex']>;
+    setSelectedItemId: StateUpdater<AutocompleteState<TItem>['selectedItemId']>;
     setQuery: StateUpdater<AutocompleteState<TItem>['query']>;
-    setSuggestions: StateUpdater<AutocompleteState<TItem>['suggestions']>;
+    setCollections: StateUpdater<AutocompleteState<TItem | TItem[]>['collections']>;
     setIsOpen: StateUpdater<AutocompleteState<TItem>['isOpen']>;
@@ -8,0 +8,0 @@ setStatus: StateUpdater<AutocompleteState<TItem>['status']>;

dist/esm/types/state.d.ts

@@ -1,12 +0,9 @@
-import { AutocompleteSuggestion } from './api';
+import { AutocompleteCollection } from './api';
 export interface AutocompleteState<TItem> {
-    highlightedIndex: number | null;
+    selectedItemId: number | null;
     query: string;
     completion: string | null;
-    suggestions: Array<AutocompleteSuggestion<TItem>>;
+    collections: Array<AutocompleteCollection<TItem>>;
     isOpen: boolean;
     status: 'idle' | 'loading' | 'stalled' | 'error';
-    statusContext: {
-        error?: Error;
-    };
     context: {
@@ -13,0 +10,0 @@ [key: string]: unknown;

dist/esm/types/store.d.ts

@@ -13,4 +13,3 @@ import { InternalAutocompleteOptions } from './api';
 };
-declare type ActionType = 'setHighlightedIndex' | 'setQuery' | 'setSuggestions' | 'setIsOpen' | 'setStatus' | 'setContext' | 'ArrowUp' | 'ArrowDown' | 'Escape' | 'Enter' | 'submit' | 'reset' | 'focus' | 'blur' | 'mousemove' | 'mouseleave' | 'click';
-export declare type StateEnhancer<TItem> = (state: AutocompleteState<TItem>, props: InternalAutocompleteOptions<TItem>) => AutocompleteState<TItem>;
+declare type ActionType = 'setSelectedItemId' | 'setQuery' | 'setCollections' | 'setIsOpen' | 'setStatus' | 'setContext' | 'ArrowUp' | 'ArrowDown' | 'Escape' | 'Enter' | 'submit' | 'reset' | 'focus' | 'blur' | 'mousemove' | 'mouseleave' | 'click';
 export {};

dist/esm/version.d.ts

@@ -1,1 +0,1 @@
-export declare const version = "1.0.0-alpha.34";
+export declare const version = "1.0.0-alpha.35";

dist/esm/version.js

@@ -1,1 +0,1 @@
-export var version = '1.0.0-alpha.34';
+export var version = '1.0.0-alpha.35';

package.json

 {
   "name": "@algolia/autocomplete-core",
   "description": "Core primitives for building autocomplete experiences.",
-  "version": "1.0.0-alpha.34",
+  "version": "1.0.0-alpha.35",
   "license": "MIT",
+  "homepage": "https://github.com/algolia/autocomplete.js",
+  "repository": "algolia/autocomplete.js",
+  "author": {
+    "name": "Algolia, Inc.",
+    "url": "https://www.algolia.com"
+  },
   "source": "src/index.ts",
   "types": "dist/esm/index.d.ts",
   "module": "dist/esm/index.js",
-  "main": "dist/umd/index.js",
-  "umd:main": "dist/umd/index.js",
-  "unpkg": "dist/umd/index.js",
-  "jsdelivr": "dist/umd/index.js",
-  "homepage": "https://github.com/algolia/autocomplete.js",
-  "repository": "algolia/autocomplete.js",
+  "main": "dist/umd/index.production.js",
+  "umd:main": "dist/umd/index.production.js",
+  "unpkg": "dist/umd/index.production.js",
+  "jsdelivr": "dist/umd/index.production.js",
+  "sideEffects": false,
+  "files": [
+    "dist/"
+  ],
   "scripts": {
@@ -25,10 +33,5 @@ "build:clean": "rm -rf ./dist",
   },
-  "author": {
-    "name": "Algolia, Inc.",
-    "url": "https://www.algolia.com"
-  },
-  "sideEffects": false,
-  "files": [
-    "dist/"
-  ]
+  "dependencies": {
+    "@algolia/autocomplete-shared": "1.0.0-alpha.35"
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

259275

increased by78.33%

Number of package files

64

increased by45.45%

Lines of code

2978

increased by66.65%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@algolia/autocomplete-shared@1.0.0-alpha.35

• + Added@algolia/autocomplete-shared@1.0.0-alpha.35(transitive)