@algolia/autocomplete-core 1.5.1 → 1.5.2

package/dist/umd/index.development.js

@@ -1,4 +1,4 @@
-/*! @algolia/autocomplete-core 1.5.1 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-core 1.5.2 | 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) :
@@ -288,7 +288,7 @@
 
   var noop = function noop() {};
 
-  var version = '1.5.1';
+  var version = '1.5.2';
 
   var userAgents = [{
     segment: 'autocomplete-core',
@@ -323,75 +323,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();
         });
       },
-      shouldSkipPendingUpdate: false
+      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;
+      }
     };
   }
 
@@ -405,11 +409,8 @@
     var basePromiseId = -1;
     var latestResolvedId = -1;
     var latestResolvedValue = undefined;
-    var runningPromisesCount = 0;
-
-    function runConcurrentSafePromise(promise) {
+    return function runConcurrentSafePromise(promise) {
       basePromiseId++;
-      runningPromisesCount++;
       var currentPromiseId = basePromiseId;
       return Promise.resolve(promise).then(function (x) {
         // The promise might take too long to resolve and get outdated. This would
@@ -432,16 +433,8 @@
         latestResolvedId = currentPromiseId;
         latestResolvedValue = x;
         return x;
-      }).finally(function () {
-        return runningPromisesCount--;
       });
-    }
-
-    runConcurrentSafePromise.isRunning = function () {
-      return runningPromisesCount > 0;
     };
-
-    return runConcurrentSafePromise;
   }
 
   /**
@@ -646,6 +639,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;
 
@@ -928,9 +993,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');
@@ -943,7 +1010,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()
@@ -965,7 +1032,7 @@
           state: store.getState()
         });
       });
-    })).then(function (collections) {
+    }))).then(function (collections) {
       var _nextState$isOpen2;
 
       // Parameters passed to `onInput` could be stale when the following code
@@ -973,15 +1040,6 @@
       // If it becomes a problem we'll need to save the last passed parameters.
       // See: https://codesandbox.io/s/agitated-cookies-y290z
       setStatus('idle');
-
-      if (store.shouldSkipPendingUpdate) {
-        if (!runConcurrentSafePromise.isRunning()) {
-          store.shouldSkipPendingUpdate = false;
-        }
-
-        return;
-      }
-
       setCollections(collections);
       var isPanelOpen = props.shouldPanelOpen({
         state: store.getState()
@@ -1005,12 +1063,14 @@
         }, setters));
       }
     }).finally(function () {
+      setStatus('idle');
+
       if (lastStalledId) {
         props.environment.clearTimeout(lastStalledId);
       }
     });
+    return store.pendingRequests.add(request);
   }
-  onInput.isRunning = runConcurrentSafePromise.isRunning;
 
   var _excluded$1 = ["event", "props", "refresh", "store"];
   function onKeyDown(_ref) {
@@ -1089,12 +1149,10 @@
       event.preventDefault();
       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
-      // running and could reopen the panel once they resolve, because that would
+      // pending and could reopen the panel once they resolve, because that would
       // result in an unsolicited UI behavior.
 
-      if (onInput.isRunning()) {
-        store.shouldSkipPendingUpdate = true;
-      }
+      store.pendingRequests.cancelAll();
     } else if (event.key === 'Enter') {
       // No active item, so we let the browser handle the native `onSubmit` form
       // event.
@@ -1220,12 +1278,12 @@
           // 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 running requests
+          // - 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 isNotAutocompleteInteraction = store.getState().isOpen === false && !onInput.isRunning();
+          var isAutocompleteInteraction = store.getState().isOpen || !store.pendingRequests.isEmpty();
 
-          if (isNotAutocompleteInteraction || event.target === inputElement) {
+          if (!isAutocompleteInteraction || event.target === inputElement) {
             return;
           }
 
@@ -1234,13 +1292,13 @@
           });
 
           if (isTargetWithinAutocomplete === false) {
-            store.dispatch('blur', null); // If requests are still running when the user closes the panel, they
+            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 && onInput.isRunning()) {
-              store.shouldSkipPendingUpdate = true;
+            if (!props.debug) {
+              store.pendingRequests.cancelAll();
             }
           }
         },
@@ -1367,13 +1425,13 @@
           // We do rely on the `blur` event on touch devices.
           // See explanation in `onTouchStart`.
           if (!isTouchDevice) {
-            store.dispatch('blur', null); // If requests are still running when the user closes the panel, they
+            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 && onInput.isRunning()) {
-              store.shouldSkipPendingUpdate = true;
+            if (!props.debug) {
+              store.pendingRequests.cancelAll();
             }
           }
         },