@algolia/autocomplete-core 1.5.0 → 1.5.3

package/dist/umd/index.development.js

@@ -1,23 +1,18 @@
-/*! @algolia/autocomplete-core 1.5.0 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-core 1.5.3 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@algolia/autocomplete-core'] = {}));
-}(this, (function (exports) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@algolia/autocomplete-core"] = {}));
+})(this, (function (exports) { 'use strict';
 
   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);
+      enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols);
     }
 
     return keys;
@@ -25,38 +20,25 @@
 
   function _objectSpread2(target) {
     for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-
-      if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
     }
 
     return target;
   }
 
-  function _typeof(obj) {
+  function _typeof$1(obj) {
     "@babel/helpers - typeof";
 
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function (obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function (obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-
-    return _typeof(obj);
+    return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof$1(obj);
   }
 
   function _defineProperty(obj, key, value) {
@@ -111,27 +93,27 @@
   }
 
   function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
   }
 
   function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+    if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
   }
 
   function _iterableToArray(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
   }
 
-  function _unsupportedIterableToArray(o, minLen) {
+  function _unsupportedIterableToArray$1(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
   }
 
-  function _arrayLikeToArray(arr, len) {
+  function _arrayLikeToArray$1(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
 
     for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -144,23 +126,23 @@
   }
 
   function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
   function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
-  function _unsupportedIterableToArray$1(o, minLen) {
+  function _unsupportedIterableToArray(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
   }
 
-  function _arrayLikeToArray$1(arr, len) {
+  function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
 
     for (var i = 0, arr2 = new Array(len); i < len; i++) {
@@ -204,20 +186,14 @@
     if (Array.isArray(arr)) return arr;
   }
 
-  function _typeof$1(obj) {
+  function _typeof(obj) {
     "@babel/helpers - typeof";
 
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof$1 = function _typeof(obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof$1 = function _typeof(obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-
-    return _typeof$1(obj);
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
   }
   /**
    * Decycles objects with circular references.
@@ -228,7 +204,7 @@
   function decycle(obj) {
     var seen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Set();
 
-    if ( !obj || _typeof$1(obj) !== 'object') {
+    if (!obj || _typeof(obj) !== 'object') {
       return obj;
     }
 
@@ -288,7 +264,7 @@
 
   var noop = function noop() {};
 
-  var version = '1.5.0';
+  var version = '1.5.3';
 
   var userAgents = [{
     segment: 'autocomplete-core',
@@ -323,74 +299,79 @@
     "development" !== 'production' ? warn(!options.debug, 'The `debug` option is meant for development debugging and should not be used in production.') : void 0;
   }
 
-  function createStore(reducer, props, onStoreStateChange) {
-    var state = props.initialState;
+  function createInternalCancelablePromise(promise, initialState) {
+    var state = initialState;
     return {
-      getState: function getState() {
-        return state;
+      then: function then(onfulfilled, onrejected) {
+        return createInternalCancelablePromise(promise.then(createCallback(onfulfilled, state, promise), createCallback(onrejected, state, promise)), state);
       },
-      dispatch: function dispatch(action, payload) {
-        var prevState = _objectSpread2({}, state);
+      catch: function _catch(onrejected) {
+        return createInternalCancelablePromise(promise.catch(createCallback(onrejected, state, promise)), state);
+      },
+      finally: function _finally(onfinally) {
+        if (onfinally) {
+          state.onCancelList.push(onfinally);
+        }
 
-        state = reducer(state, {
-          type: action,
-          props: props,
-          payload: payload
-        });
-        onStoreStateChange({
-          state: state,
-          prevState: prevState
+        return createInternalCancelablePromise(promise.finally(createCallback(onfinally && function () {
+          state.onCancelList = [];
+          return onfinally();
+        }, state, promise)), state);
+      },
+      cancel: function cancel() {
+        state.isCanceled = true;
+        var callbacks = state.onCancelList;
+        state.onCancelList = [];
+        callbacks.forEach(function (callback) {
+          callback();
         });
+      },
+      isCanceled: function isCanceled() {
+        return state.isCanceled === true;
       }
     };
   }
 
-  function getAutocompleteSetters(_ref) {
-    var store = _ref.store;
-
-    var setActiveItemId = function setActiveItemId(value) {
-      store.dispatch('setActiveItemId', value);
-    };
-
-    var setQuery = function setQuery(value) {
-      store.dispatch('setQuery', value);
-    };
-
-    var setCollections = function setCollections(rawValue) {
-      var baseItemId = 0;
-      var value = rawValue.map(function (collection) {
-        return _objectSpread2(_objectSpread2({}, collection), {}, {
-          // We flatten the stored items to support calling `getAlgoliaResults`
-          // from the source itself.
-          items: flatten(collection.items).map(function (item) {
-            return _objectSpread2(_objectSpread2({}, item), {}, {
-              __autocomplete_id: baseItemId++
-            });
-          })
-        });
-      });
-      store.dispatch('setCollections', value);
-    };
+  function cancelable(promise) {
+    return createInternalCancelablePromise(promise, {
+      isCanceled: false,
+      onCancelList: []
+    });
+  }
 
-    var setIsOpen = function setIsOpen(value) {
-      store.dispatch('setIsOpen', value);
-    };
+  function createCallback(onResult, state, fallback) {
+    if (!onResult) {
+      return fallback;
+    }
 
-    var setStatus = function setStatus(value) {
-      store.dispatch('setStatus', value);
-    };
+    return function callback(arg) {
+      if (state.isCanceled) {
+        return arg;
+      }
 
-    var setContext = function setContext(value) {
-      store.dispatch('setContext', value);
+      return onResult(arg);
     };
+  }
 
+  function createCancelablePromiseList() {
+    var list = [];
     return {
-      setActiveItemId: setActiveItemId,
-      setQuery: setQuery,
-      setCollections: setCollections,
-      setIsOpen: setIsOpen,
-      setStatus: setStatus,
-      setContext: setContext
+      add: function add(cancelablePromise) {
+        list.push(cancelablePromise);
+        return cancelablePromise.finally(function () {
+          list = list.filter(function (item) {
+            return item !== cancelablePromise;
+          });
+        });
+      },
+      cancelAll: function cancelAll() {
+        list.forEach(function (promise) {
+          return promise.cancel();
+        });
+      },
+      isEmpty: function isEmpty() {
+        return list.length === 0;
+      }
     };
   }
 
@@ -470,7 +451,7 @@
     var seenSourceIds = [];
     return Promise.resolve(getSources(params)).then(function (sources) {
       invariant(Array.isArray(sources), function () {
-        return "The `getSources` function must return an array of sources but returned type ".concat(JSON.stringify(_typeof(sources)), ":\n\n").concat(JSON.stringify(decycle(sources), null, 2));
+        return "The `getSources` function must return an array of sources but returned type ".concat(JSON.stringify(_typeof$1(sources)), ":\n\n").concat(JSON.stringify(decycle(sources), null, 2));
       });
       return Promise.all(sources // We allow `undefined` and `false` sources to allow users to use
       // `Boolean(query) && source` (=> `false`).
@@ -634,6 +615,78 @@
     };
   }
 
+  function createStore(reducer, props, onStoreStateChange) {
+    var state = props.initialState;
+    return {
+      getState: function getState() {
+        return state;
+      },
+      dispatch: function dispatch(action, payload) {
+        var prevState = _objectSpread2({}, state);
+
+        state = reducer(state, {
+          type: action,
+          props: props,
+          payload: payload
+        });
+        onStoreStateChange({
+          state: state,
+          prevState: prevState
+        });
+      },
+      pendingRequests: createCancelablePromiseList()
+    };
+  }
+
+  function getAutocompleteSetters(_ref) {
+    var store = _ref.store;
+
+    var setActiveItemId = function setActiveItemId(value) {
+      store.dispatch('setActiveItemId', value);
+    };
+
+    var setQuery = function setQuery(value) {
+      store.dispatch('setQuery', value);
+    };
+
+    var setCollections = function setCollections(rawValue) {
+      var baseItemId = 0;
+      var value = rawValue.map(function (collection) {
+        return _objectSpread2(_objectSpread2({}, collection), {}, {
+          // We flatten the stored items to support calling `getAlgoliaResults`
+          // from the source itself.
+          items: flatten(collection.items).map(function (item) {
+            return _objectSpread2(_objectSpread2({}, item), {}, {
+              __autocomplete_id: baseItemId++
+            });
+          })
+        });
+      });
+      store.dispatch('setCollections', value);
+    };
+
+    var setIsOpen = function setIsOpen(value) {
+      store.dispatch('setIsOpen', value);
+    };
+
+    var setStatus = function setStatus(value) {
+      store.dispatch('setStatus', value);
+    };
+
+    var setContext = function setContext(value) {
+      store.dispatch('setContext', value);
+    };
+
+    return {
+      setActiveItemId: setActiveItemId,
+      setQuery: setQuery,
+      setCollections: setCollections,
+      setIsOpen: setIsOpen,
+      setStatus: setStatus,
+      setContext: setContext
+    };
+  }
+
   function getDefaultProps(props, pluginSubscribers) {
     var _props$id;
 
@@ -814,9 +867,10 @@
 
       var searchClient = current.searchClient,
           execute = current.execute,
+          requesterId = current.requesterId,
           requests = current.requests;
       var container = acc.find(function (item) {
-        return isDescription(current) && isDescription(item) && item.searchClient === searchClient && item.execute === execute;
+        return isDescription(current) && isDescription(item) && item.searchClient === searchClient && Boolean(requesterId) && item.requesterId === requesterId;
       });
 
       if (container) {
@@ -826,6 +880,7 @@
       } else {
         var request = {
           execute: execute,
+          requesterId: requesterId,
           items: requests,
           searchClient: searchClient
         };
@@ -864,7 +919,7 @@
       var transform = matches[0].transformResponse;
       var items = transform ? transform(mapToAlgoliaResponse(results)) : results;
       invariant(Array.isArray(items), function () {
-        return "The `getItems` function from source \"".concat(source.sourceId, "\" must return an array of items but returned type ").concat(JSON.stringify(_typeof(items)), ":\n\n").concat(JSON.stringify(decycle(items), null, 2), ".\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems");
+        return "The `getItems` function from source \"".concat(source.sourceId, "\" must return an array of items but returned type ").concat(JSON.stringify(_typeof$1(items)), ":\n\n").concat(JSON.stringify(decycle(items), null, 2), ".\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems");
       });
       invariant(items.every(Boolean), "The `getItems` function from source \"".concat(source.sourceId, "\" must return an array of items but returned ").concat(JSON.stringify(undefined), ".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"));
       return {
@@ -874,7 +929,7 @@
     });
   }
 
-  var _excluded = ["event", "nextState", "props", "query", "refresh", "store"];
+  var _excluded$2 = ["event", "nextState", "props", "query", "refresh", "store"];
   var lastStalledId = null;
   var runConcurrentSafePromise = createConcurrentSafePromise();
   function onInput(_ref) {
@@ -885,7 +940,7 @@
         query = _ref.query,
         refresh = _ref.refresh,
         store = _ref.store,
-        setters = _objectWithoutProperties(_ref, _excluded);
+        setters = _objectWithoutProperties(_ref, _excluded$2);
 
     if (lastStalledId) {
       props.environment.clearTimeout(lastStalledId);
@@ -916,9 +971,11 @@
       // updates performed in this code path.
       // We chain with a void promise to respect `onInput`'s expected return type.
 
-      return runConcurrentSafePromise(collections).then(function () {
+      var _request = cancelable(runConcurrentSafePromise(collections).then(function () {
         return Promise.resolve();
-      });
+      }));
+
+      return store.pendingRequests.add(_request);
     }
 
     setStatus('loading');
@@ -931,7 +988,7 @@
     // meaning we should only ever manipulate the state once this concurrent-safe
     // promise is resolved.
 
-    return runConcurrentSafePromise(props.getSources(_objectSpread2({
+    var request = cancelable(runConcurrentSafePromise(props.getSources(_objectSpread2({
       query: query,
       refresh: refresh,
       state: store.getState()
@@ -953,9 +1010,13 @@
           state: store.getState()
         });
       });
-    })).then(function (collections) {
+    }))).then(function (collections) {
       var _nextState$isOpen2;
 
+      // Parameters passed to `onInput` could be stale when the following code
+      // executes, because `onInput` calls may not resolve in order.
+      // If it becomes a problem we'll need to save the last passed parameters.
+      // See: https://codesandbox.io/s/agitated-cookies-y290z
       setStatus('idle');
       setCollections(collections);
       var isPanelOpen = props.shouldPanelOpen({
@@ -980,10 +1041,13 @@
         }, setters));
       }
     }).finally(function () {
+      setStatus('idle');
+
       if (lastStalledId) {
         props.environment.clearTimeout(lastStalledId);
       }
     });
+    return store.pendingRequests.add(request);
   }
 
   var _excluded$1 = ["event", "props", "refresh", "store"];
@@ -1061,7 +1125,12 @@
       // from removing the query right away because we first want to close the
       // panel.
       event.preventDefault();
-      store.dispatch(event.key, null);
+      store.dispatch(event.key, null); // Hitting the `Escape` key signals the end of a user interaction with the
+      // autocomplete. At this point, we should ignore any requests that are still
+      // pending and could reopen the panel once they resolve, because that would
+      // result in an unsolicited UI behavior.
+
+      store.pendingRequests.cancelAll();
     } else if (event.key === 'Enter') {
       // No active item, so we let the browser handle the native `onSubmit` form
       // event.
@@ -1158,7 +1227,7 @@
     }
   }
 
-  var _excluded$2 = ["props", "refresh", "store"],
+  var _excluded = ["props", "refresh", "store"],
       _excluded2 = ["inputElement", "formElement", "panelElement"],
       _excluded3 = ["inputElement"],
       _excluded4 = ["inputElement", "maxLength"],
@@ -1167,7 +1236,7 @@
     var props = _ref.props,
         refresh = _ref.refresh,
         store = _ref.store,
-        setters = _objectWithoutProperties(_ref, _excluded$2);
+        setters = _objectWithoutProperties(_ref, _excluded);
 
     var getEnvironmentProps = function getEnvironmentProps(providedProps) {
       var inputElement = providedProps.inputElement,
@@ -1184,7 +1253,15 @@
         // @TODO: support cases where there are multiple Autocomplete instances.
         // Right now, a second instance makes this computation return false.
         onTouchStart: function onTouchStart(event) {
-          if (store.getState().isOpen === false || event.target === inputElement) {
+          // The `onTouchStart` event shouldn't trigger the `blur` handler when
+          // it's not an interaction with Autocomplete. We detect it with the
+          // following heuristics:
+          // - the panel is closed AND there are no pending requests
+          //   (no interaction with the autocomplete, no future state updates)
+          // - OR the touched target is the input element (should open the panel)
+          var isAutocompleteInteraction = store.getState().isOpen || !store.pendingRequests.isEmpty();
+
+          if (!isAutocompleteInteraction || event.target === inputElement) {
             return;
           }
 
@@ -1193,7 +1270,14 @@
           });
 
           if (isTargetWithinAutocomplete === false) {
-            store.dispatch('blur', null);
+            store.dispatch('blur', null); // If requests are still pending when the user closes the panel, they
+            // could reopen the panel once they resolve.
+            // We want to prevent any subsequent query from reopening the panel
+            // because it would result in an unsolicited UI behavior.
+
+            if (!props.debug) {
+              store.pendingRequests.cancelAll();
+            }
           }
         },
         // When scrolling on touch devices (mobiles, tablets, etc.), we want to
@@ -1221,8 +1305,8 @@
     };
 
     var getFormProps = function getFormProps(providedProps) {
-      var inputElement = providedProps.inputElement,
-          rest = _objectWithoutProperties(providedProps, _excluded3);
+      providedProps.inputElement;
+          var rest = _objectWithoutProperties(providedProps, _excluded3);
 
       return _objectSpread2({
         action: '',
@@ -1274,9 +1358,9 @@
 
       var isTouchDevice = ('ontouchstart' in props.environment);
 
-      var _ref2 = providedProps || {},
-          inputElement = _ref2.inputElement,
-          _ref2$maxLength = _ref2.maxLength,
+      var _ref2 = providedProps || {};
+          _ref2.inputElement;
+          var _ref2$maxLength = _ref2.maxLength,
           maxLength = _ref2$maxLength === void 0 ? 512 : _ref2$maxLength,
           rest = _objectWithoutProperties(_ref2, _excluded4);
 
@@ -1319,7 +1403,14 @@
           // We do rely on the `blur` event on touch devices.
           // See explanation in `onTouchStart`.
           if (!isTouchDevice) {
-            store.dispatch('blur', null);
+            store.dispatch('blur', null); // If requests are still pending when the user closes the panel, they
+            // could reopen the panel once they resolve.
+            // We want to prevent any subsequent query from reopening the panel
+            // because it would result in an unsolicited UI behavior.
+
+            if (!props.debug) {
+              store.pendingRequests.cancelAll();
+            }
           }
         },
         onClick: function onClick(event) {
@@ -1730,5 +1821,5 @@
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=index.development.js.map