@atlaskit/link-picker 1.8.3 → 1.8.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-picker
 
+## 1.8.4
+
+### Patch Changes
+
+- [`e94f9f982b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e94f9f982b4) - Fixes link picker attempting to dispatch updates after being unmounted.
+
 ## 1.8.3
 
 ### Patch Changes

package/dist/cjs/services/use-plugins/index.js

@@ -13,19 +13,13 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("react");
 
 var _linkPicker = require("../../ui/link-picker");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(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; }
+var _utils = require("./utils");
 
-function reducer(state, payload) {
-  return _objectSpread(_objectSpread({}, state), payload);
-}
+var _reducer = require("./reducer");
 
 function usePlugins(state, activeTab, plugins) {
   var _useState = (0, _react.useState)(0),
@@ -33,19 +27,11 @@ function usePlugins(state, activeTab, plugins) {
       retries = _useState2[0],
       setRetries = _useState2[1];
 
-  var _useReducer = (0, _react.useReducer)(reducer, {
-    items: null,
-    error: null,
-    isLoading: false
-  }),
-      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
-      pluginState = _useReducer2[0],
-      dispatch = _useReducer2[1];
+  var _usePluginReducer = (0, _reducer.usePluginReducer)(),
+      _usePluginReducer2 = (0, _slicedToArray2.default)(_usePluginReducer, 2),
+      pluginState = _usePluginReducer2[0],
+      dispatch = _usePluginReducer2[1];
 
-  var items = pluginState.items,
-      isLoading = pluginState.isLoading,
-      error = pluginState.error;
-  var queryVersion = (0, _react.useRef)(0);
   var activePlugin = plugins === null || plugins === void 0 ? void 0 : plugins[activeTab];
   (0, _react.useEffect)(function () {
     if (!activePlugin) {
@@ -54,107 +40,75 @@ function usePlugins(state, activeTab, plugins) {
 
     if (!state) {
       dispatch({
-        items: null,
-        isLoading: false,
-        error: null
+        type: 'CLEAR'
       });
       return;
     }
 
-    var updates = activePlugin.resolve(state);
     dispatch({
-      items: null,
-      isLoading: true,
-      error: null
+      type: 'LOADING'
     });
-    var newQuery = ++queryVersion.current;
+
+    var _resolvePluginUpdates = (0, _utils.resolvePluginUpdates)(activePlugin, state),
+        next = _resolvePluginUpdates.next,
+        cancel = _resolvePluginUpdates.cancel;
 
     var updateResults = /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var done, value, _result$done, result;
+        var _isLoading, _yield$next, value, done;
 
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 _context.prev = 0;
+                _isLoading = true;
 
-              case 1:
-                if (!(newQuery === queryVersion.current)) {
-                  _context.next = 23;
-                  break;
-                }
-
-                done = false;
-                value = void 0;
-
-                if (!(updates instanceof Promise)) {
-                  _context.next = 11;
+              case 2:
+                if (!_isLoading) {
+                  _context.next = 12;
                   break;
                 }
 
-                done = true;
-                _context.next = 8;
-                return updates;
-
-              case 8:
-                value = _context.sent;
-                _context.next = 16;
-                break;
-
-              case 11:
-                _context.next = 13;
-                return updates.next();
+                _context.next = 5;
+                return next();
 
-              case 13:
-                result = _context.sent;
-                done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
-                value = result.value;
-
-              case 16:
-                if (!(newQuery !== queryVersion.current)) {
-                  _context.next = 18;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 18:
+              case 5:
+                _yield$next = _context.sent;
+                value = _yield$next.value;
+                done = _yield$next.done;
+                _isLoading = !done;
                 dispatch({
-                  items: limit(value.data),
-                  isLoading: !done
+                  type: 'SUCCESS',
+                  payload: {
+                    items: limit(value.data),
+                    isLoading: !done
+                  }
                 });
-
-                if (!done) {
-                  _context.next = 21;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 21:
-                _context.next = 1;
+                _context.next = 2;
                 break;
 
-              case 23:
-                _context.next = 28;
+              case 12:
+                _context.next = 17;
                 break;
 
-              case 25:
-                _context.prev = 25;
+              case 14:
+                _context.prev = 14;
                 _context.t0 = _context["catch"](0);
-                dispatch({
-                  error: _context.t0,
-                  items: null,
-                  isLoading: false
-                });
 
-              case 28:
+                if (!(_context.t0 instanceof _utils.CancellationError)) {
+                  dispatch({
+                    type: 'ERROR',
+                    payload: _context.t0
+                  });
+                }
+
+              case 17:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[0, 25]]);
+        }, _callee, null, [[0, 14]]);
       }));
 
       return function updateResults() {
@@ -163,7 +117,8 @@ function usePlugins(state, activeTab, plugins) {
     }();
 
     updateResults();
-  }, [activePlugin, queryVersion, state, retries]);
+    return cancel;
+  }, [activePlugin, state, retries, dispatch]);
   var tabs = (0, _react.useMemo)(function () {
     if (!plugins || plugins.length <= 1) {
       return [];
@@ -182,6 +137,9 @@ function usePlugins(state, activeTab, plugins) {
       return ++prev;
     });
   }, []);
+  var items = pluginState.items,
+      isLoading = pluginState.isLoading,
+      error = pluginState.error;
   return {
     tabs: tabs,
     items: items,

package/dist/cjs/services/use-plugins/reducer.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INITIAL_STATE = exports.ACTION_SUCCESS = exports.ACTION_LOADING = exports.ACTION_ERRORED = exports.ACTION_CLEAR = void 0;
+exports.reducer = reducer;
+exports.usePluginReducer = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(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; }
+
+var ACTION_CLEAR = 'CLEAR';
+exports.ACTION_CLEAR = ACTION_CLEAR;
+var ACTION_LOADING = 'LOADING';
+exports.ACTION_LOADING = ACTION_LOADING;
+var ACTION_SUCCESS = 'SUCCESS';
+exports.ACTION_SUCCESS = ACTION_SUCCESS;
+var ACTION_ERRORED = 'ERROR';
+exports.ACTION_ERRORED = ACTION_ERRORED;
+var INITIAL_STATE = {
+  items: null,
+  error: null,
+  isLoading: false
+};
+exports.INITIAL_STATE = INITIAL_STATE;
+
+function reducer(state, action) {
+  switch (action.type) {
+    case ACTION_CLEAR:
+      return _objectSpread({}, INITIAL_STATE);
+
+    case ACTION_LOADING:
+      return _objectSpread(_objectSpread({}, INITIAL_STATE), {}, {
+        isLoading: true
+      });
+
+    case ACTION_SUCCESS:
+      return _objectSpread(_objectSpread(_objectSpread({}, state), action.payload), {}, {
+        error: null
+      });
+
+    case ACTION_ERRORED:
+      return _objectSpread(_objectSpread({}, INITIAL_STATE), {}, {
+        error: action.payload
+      });
+
+    default:
+      return state;
+  }
+}
+
+var usePluginReducer = function usePluginReducer() {
+  return (0, _react.useReducer)(reducer, INITIAL_STATE);
+};
+
+exports.usePluginReducer = usePluginReducer;

package/dist/cjs/services/use-plugins/utils.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolvePluginUpdates = exports.cancellable = exports.CancellationError = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var CancellationError = /*#__PURE__*/function (_Error) {
+  (0, _inherits2.default)(CancellationError, _Error);
+
+  var _super = _createSuper(CancellationError);
+
+  function CancellationError() {
+    (0, _classCallCheck2.default)(this, CancellationError);
+    return _super.apply(this, arguments);
+  }
+
+  return (0, _createClass2.default)(CancellationError);
+}( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Error));
+
+exports.CancellationError = CancellationError;
+
+var cancellable = function cancellable(promise) {
+  var reject;
+  return {
+    promise: new Promise(function (resolve, _reject) {
+      reject = _reject;
+      promise.then(resolve, reject);
+    }),
+    cancel: function cancel() {
+      reject(new CancellationError('Promise cancelled'));
+    }
+  };
+};
+/**
+ * Wraps the resolve with a cancellation wrapper and makes promise + generator plugin resolves more compatible
+ * Calling cancel for generator plugin prevents it from yielding any further updates
+ */
+
+
+exports.cancellable = cancellable;
+
+var resolvePluginUpdates = function resolvePluginUpdates(plugin, state) {
+  var updates = plugin.resolve(state); // Promise plugin
+
+  if (updates instanceof Promise) {
+    var _cancellable = cancellable(updates),
+        promise = _cancellable.promise,
+        cancel = _cancellable.cancel;
+
+    return {
+      cancel: cancel,
+      next: function () {
+        var _next = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return promise;
+
+                case 2:
+                  _context.t0 = _context.sent;
+                  return _context.abrupt("return", {
+                    value: _context.t0,
+                    done: true
+                  });
+
+                case 4:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function next() {
+          return _next.apply(this, arguments);
+        }
+
+        return next;
+      }()
+    };
+  } // Generator plugin
+
+
+  var cancellationCallbacks = [];
+  var cancelled = false;
+  return {
+    cancel: function cancel() {
+      cancelled = true;
+      cancellationCallbacks.forEach(function (cb) {
+        return cb();
+      });
+    },
+    next: function next() {
+      var _cancellable2 = cancellable(updates.next()),
+          promise = _cancellable2.promise,
+          cancel = _cancellable2.cancel;
+
+      if (cancelled) {
+        cancel();
+      } else {
+        cancellationCallbacks.push(cancel);
+      }
+
+      return promise;
+    }
+  };
+};
+
+exports.resolvePluginUpdates = resolvePluginUpdates;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.8.3",
+	"version": "1.8.4",
 	"sideEffects": false
 }

package/dist/es2019/services/use-plugins/index.js

@@ -1,25 +1,10 @@
-import { useEffect, useReducer, useMemo, useRef, useState, useCallback } from 'react';
+import { useEffect, useMemo, useState, useCallback } from 'react';
 import { RECENT_SEARCH_LIST_SIZE } from '../../ui/link-picker';
-
-function reducer(state, payload) {
-  return { ...state,
-    ...payload
-  };
-}
-
+import { CancellationError, resolvePluginUpdates } from './utils';
+import { usePluginReducer } from './reducer';
 export function usePlugins(state, activeTab, plugins) {
   const [retries, setRetries] = useState(0);
-  const [pluginState, dispatch] = useReducer(reducer, {
-    items: null,
-    error: null,
-    isLoading: false
-  });
-  const {
-    items,
-    isLoading,
-    error
-  } = pluginState;
-  const queryVersion = useRef(0);
+  const [pluginState, dispatch] = usePluginReducer();
   const activePlugin = plugins === null || plugins === void 0 ? void 0 : plugins[activeTab];
   useEffect(() => {
     if (!activePlugin) {
@@ -28,62 +13,50 @@ export function usePlugins(state, activeTab, plugins) {
 
     if (!state) {
       dispatch({
-        items: null,
-        isLoading: false,
-        error: null
+        type: 'CLEAR'
       });
       return;
     }
 
-    const updates = activePlugin.resolve(state);
     dispatch({
-      items: null,
-      isLoading: true,
-      error: null
+      type: 'LOADING'
     });
-    const newQuery = ++queryVersion.current;
+    const {
+      next,
+      cancel
+    } = resolvePluginUpdates(activePlugin, state);
 
     const updateResults = async () => {
       try {
-        while (newQuery === queryVersion.current) {
-          let done = false;
-          let value;
-
-          if (updates instanceof Promise) {
-            done = true;
-            value = await updates;
-          } else {
-            var _result$done;
-
-            const result = await updates.next();
-            done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
-            value = result.value;
-          }
-
-          if (newQuery !== queryVersion.current) {
-            return;
-          }
+        let isLoading = true;
 
+        while (isLoading) {
+          const {
+            value,
+            done
+          } = await next();
+          isLoading = !done;
           dispatch({
-            items: limit(value.data),
-            isLoading: !done
+            type: 'SUCCESS',
+            payload: {
+              items: limit(value.data),
+              isLoading: !done
+            }
           });
-
-          if (done) {
-            return;
-          }
         }
       } catch (error) {
-        dispatch({
-          error,
-          items: null,
-          isLoading: false
-        });
+        if (!(error instanceof CancellationError)) {
+          dispatch({
+            type: 'ERROR',
+            payload: error
+          });
+        }
       }
     };
 
     updateResults();
-  }, [activePlugin, queryVersion, state, retries]);
+    return cancel;
+  }, [activePlugin, state, retries, dispatch]);
   const tabs = useMemo(() => {
     if (!plugins || plugins.length <= 1) {
       return [];
@@ -96,6 +69,11 @@ export function usePlugins(state, activeTab, plugins) {
   const handleRetry = useCallback(() => {
     setRetries(prev => ++prev);
   }, []);
+  const {
+    items,
+    isLoading,
+    error
+  } = pluginState;
   return {
     tabs,
     items,

package/dist/es2019/services/use-plugins/reducer.js

@@ -0,0 +1,37 @@
+import { useReducer } from 'react';
+export const ACTION_CLEAR = 'CLEAR';
+export const ACTION_LOADING = 'LOADING';
+export const ACTION_SUCCESS = 'SUCCESS';
+export const ACTION_ERRORED = 'ERROR';
+export const INITIAL_STATE = {
+  items: null,
+  error: null,
+  isLoading: false
+};
+export function reducer(state, action) {
+  switch (action.type) {
+    case ACTION_CLEAR:
+      return { ...INITIAL_STATE
+      };
+
+    case ACTION_LOADING:
+      return { ...INITIAL_STATE,
+        isLoading: true
+      };
+
+    case ACTION_SUCCESS:
+      return { ...state,
+        ...action.payload,
+        error: null
+      };
+
+    case ACTION_ERRORED:
+      return { ...INITIAL_STATE,
+        error: action.payload
+      };
+
+    default:
+      return state;
+  }
+}
+export const usePluginReducer = () => useReducer(reducer, INITIAL_STATE);

package/dist/es2019/services/use-plugins/utils.js

@@ -0,0 +1,59 @@
+export class CancellationError extends Error {}
+export const cancellable = promise => {
+  let reject;
+  return {
+    promise: new Promise((resolve, _reject) => {
+      reject = _reject;
+      promise.then(resolve, reject);
+    }),
+    cancel: () => {
+      reject(new CancellationError('Promise cancelled'));
+    }
+  };
+};
+/**
+ * Wraps the resolve with a cancellation wrapper and makes promise + generator plugin resolves more compatible
+ * Calling cancel for generator plugin prevents it from yielding any further updates
+ */
+
+export const resolvePluginUpdates = (plugin, state) => {
+  const updates = plugin.resolve(state); // Promise plugin
+
+  if (updates instanceof Promise) {
+    const {
+      promise,
+      cancel
+    } = cancellable(updates);
+    return {
+      cancel,
+      next: async () => ({
+        value: await promise,
+        done: true
+      })
+    };
+  } // Generator plugin
+
+
+  const cancellationCallbacks = [];
+  let cancelled = false;
+  return {
+    cancel: () => {
+      cancelled = true;
+      cancellationCallbacks.forEach(cb => cb());
+    },
+    next: () => {
+      const {
+        promise,
+        cancel
+      } = cancellable(updates.next());
+
+      if (cancelled) {
+        cancel();
+      } else {
+        cancellationCallbacks.push(cancel);
+      }
+
+      return promise;
+    }
+  };
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.8.3",
+	"version": "1.8.4",
 	"sideEffects": false
 }

package/dist/esm/services/use-plugins/index.js

@@ -1,38 +1,21 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { 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; }
-
-import { useEffect, useReducer, useMemo, useRef, useState, useCallback } from 'react';
+import { useEffect, useMemo, useState, useCallback } from 'react';
 import { RECENT_SEARCH_LIST_SIZE } from '../../ui/link-picker';
-
-function reducer(state, payload) {
-  return _objectSpread(_objectSpread({}, state), payload);
-}
-
+import { CancellationError, resolvePluginUpdates } from './utils';
+import { usePluginReducer } from './reducer';
 export function usePlugins(state, activeTab, plugins) {
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
       retries = _useState2[0],
       setRetries = _useState2[1];
 
-  var _useReducer = useReducer(reducer, {
-    items: null,
-    error: null,
-    isLoading: false
-  }),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      pluginState = _useReducer2[0],
-      dispatch = _useReducer2[1];
+  var _usePluginReducer = usePluginReducer(),
+      _usePluginReducer2 = _slicedToArray(_usePluginReducer, 2),
+      pluginState = _usePluginReducer2[0],
+      dispatch = _usePluginReducer2[1];
 
-  var items = pluginState.items,
-      isLoading = pluginState.isLoading,
-      error = pluginState.error;
-  var queryVersion = useRef(0);
   var activePlugin = plugins === null || plugins === void 0 ? void 0 : plugins[activeTab];
   useEffect(function () {
     if (!activePlugin) {
@@ -41,107 +24,75 @@ export function usePlugins(state, activeTab, plugins) {
 
     if (!state) {
       dispatch({
-        items: null,
-        isLoading: false,
-        error: null
+        type: 'CLEAR'
       });
       return;
     }
 
-    var updates = activePlugin.resolve(state);
     dispatch({
-      items: null,
-      isLoading: true,
-      error: null
+      type: 'LOADING'
     });
-    var newQuery = ++queryVersion.current;
+
+    var _resolvePluginUpdates = resolvePluginUpdates(activePlugin, state),
+        next = _resolvePluginUpdates.next,
+        cancel = _resolvePluginUpdates.cancel;
 
     var updateResults = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var done, value, _result$done, result;
+        var _isLoading, _yield$next, value, done;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 _context.prev = 0;
+                _isLoading = true;
 
-              case 1:
-                if (!(newQuery === queryVersion.current)) {
-                  _context.next = 23;
-                  break;
-                }
-
-                done = false;
-                value = void 0;
-
-                if (!(updates instanceof Promise)) {
-                  _context.next = 11;
-                  break;
-                }
-
-                done = true;
-                _context.next = 8;
-                return updates;
-
-              case 8:
-                value = _context.sent;
-                _context.next = 16;
-                break;
-
-              case 11:
-                _context.next = 13;
-                return updates.next();
-
-              case 13:
-                result = _context.sent;
-                done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
-                value = result.value;
-
-              case 16:
-                if (!(newQuery !== queryVersion.current)) {
-                  _context.next = 18;
+              case 2:
+                if (!_isLoading) {
+                  _context.next = 12;
                   break;
                 }
 
-                return _context.abrupt("return");
+                _context.next = 5;
+                return next();
 
-              case 18:
+              case 5:
+                _yield$next = _context.sent;
+                value = _yield$next.value;
+                done = _yield$next.done;
+                _isLoading = !done;
                 dispatch({
-                  items: limit(value.data),
-                  isLoading: !done
+                  type: 'SUCCESS',
+                  payload: {
+                    items: limit(value.data),
+                    isLoading: !done
+                  }
                 });
-
-                if (!done) {
-                  _context.next = 21;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 21:
-                _context.next = 1;
+                _context.next = 2;
                 break;
 
-              case 23:
-                _context.next = 28;
+              case 12:
+                _context.next = 17;
                 break;
 
-              case 25:
-                _context.prev = 25;
+              case 14:
+                _context.prev = 14;
                 _context.t0 = _context["catch"](0);
-                dispatch({
-                  error: _context.t0,
-                  items: null,
-                  isLoading: false
-                });
 
-              case 28:
+                if (!(_context.t0 instanceof CancellationError)) {
+                  dispatch({
+                    type: 'ERROR',
+                    payload: _context.t0
+                  });
+                }
+
+              case 17:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[0, 25]]);
+        }, _callee, null, [[0, 14]]);
       }));
 
       return function updateResults() {
@@ -150,7 +101,8 @@ export function usePlugins(state, activeTab, plugins) {
     }();
 
     updateResults();
-  }, [activePlugin, queryVersion, state, retries]);
+    return cancel;
+  }, [activePlugin, state, retries, dispatch]);
   var tabs = useMemo(function () {
     if (!plugins || plugins.length <= 1) {
       return [];
@@ -169,6 +121,9 @@ export function usePlugins(state, activeTab, plugins) {
       return ++prev;
     });
   }, []);
+  var items = pluginState.items,
+      isLoading = pluginState.isLoading,
+      error = pluginState.error;
   return {
     tabs: tabs,
     items: items,

package/dist/esm/services/use-plugins/reducer.js

@@ -0,0 +1,43 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { 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; }
+
+import { useReducer } from 'react';
+export var ACTION_CLEAR = 'CLEAR';
+export var ACTION_LOADING = 'LOADING';
+export var ACTION_SUCCESS = 'SUCCESS';
+export var ACTION_ERRORED = 'ERROR';
+export var INITIAL_STATE = {
+  items: null,
+  error: null,
+  isLoading: false
+};
+export function reducer(state, action) {
+  switch (action.type) {
+    case ACTION_CLEAR:
+      return _objectSpread({}, INITIAL_STATE);
+
+    case ACTION_LOADING:
+      return _objectSpread(_objectSpread({}, INITIAL_STATE), {}, {
+        isLoading: true
+      });
+
+    case ACTION_SUCCESS:
+      return _objectSpread(_objectSpread(_objectSpread({}, state), action.payload), {}, {
+        error: null
+      });
+
+    case ACTION_ERRORED:
+      return _objectSpread(_objectSpread({}, INITIAL_STATE), {}, {
+        error: action.payload
+      });
+
+    default:
+      return state;
+  }
+}
+export var usePluginReducer = function usePluginReducer() {
+  return useReducer(reducer, INITIAL_STATE);
+};

package/dist/esm/services/use-plugins/utils.js

@@ -0,0 +1,111 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _wrapNativeSuper from "@babel/runtime/helpers/wrapNativeSuper";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+export var CancellationError = /*#__PURE__*/function (_Error) {
+  _inherits(CancellationError, _Error);
+
+  var _super = _createSuper(CancellationError);
+
+  function CancellationError() {
+    _classCallCheck(this, CancellationError);
+
+    return _super.apply(this, arguments);
+  }
+
+  return _createClass(CancellationError);
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+export var cancellable = function cancellable(promise) {
+  var reject;
+  return {
+    promise: new Promise(function (resolve, _reject) {
+      reject = _reject;
+      promise.then(resolve, reject);
+    }),
+    cancel: function cancel() {
+      reject(new CancellationError('Promise cancelled'));
+    }
+  };
+};
+/**
+ * Wraps the resolve with a cancellation wrapper and makes promise + generator plugin resolves more compatible
+ * Calling cancel for generator plugin prevents it from yielding any further updates
+ */
+
+export var resolvePluginUpdates = function resolvePluginUpdates(plugin, state) {
+  var updates = plugin.resolve(state); // Promise plugin
+
+  if (updates instanceof Promise) {
+    var _cancellable = cancellable(updates),
+        promise = _cancellable.promise,
+        cancel = _cancellable.cancel;
+
+    return {
+      cancel: cancel,
+      next: function () {
+        var _next = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return promise;
+
+                case 2:
+                  _context.t0 = _context.sent;
+                  return _context.abrupt("return", {
+                    value: _context.t0,
+                    done: true
+                  });
+
+                case 4:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function next() {
+          return _next.apply(this, arguments);
+        }
+
+        return next;
+      }()
+    };
+  } // Generator plugin
+
+
+  var cancellationCallbacks = [];
+  var cancelled = false;
+  return {
+    cancel: function cancel() {
+      cancelled = true;
+      cancellationCallbacks.forEach(function (cb) {
+        return cb();
+      });
+    },
+    next: function next() {
+      var _cancellable2 = cancellable(updates.next()),
+          promise = _cancellable2.promise,
+          cancel = _cancellable2.cancel;
+
+      if (cancelled) {
+        cancel();
+      } else {
+        cancellationCallbacks.push(cancel);
+      }
+
+      return promise;
+    }
+  };
+};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.8.3",
+	"version": "1.8.4",
 	"sideEffects": false
 }

package/dist/types/services/use-plugins/reducer.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { LinkSearchListItemData } from '../../ui/types';
+export interface PluginState {
+    items: LinkSearchListItemData[] | null;
+    error: unknown | null;
+    isLoading: boolean;
+}
+export declare const ACTION_CLEAR = "CLEAR";
+export declare const ACTION_LOADING = "LOADING";
+export declare const ACTION_SUCCESS = "SUCCESS";
+export declare const ACTION_ERRORED = "ERROR";
+interface ClearAction {
+    type: typeof ACTION_CLEAR;
+}
+interface ResolveLoadingAction {
+    type: typeof ACTION_LOADING;
+}
+interface ResolveSuccessAction {
+    type: typeof ACTION_SUCCESS;
+    payload: Pick<PluginState, 'items' | 'isLoading'>;
+}
+interface ResolveErrorAction {
+    type: typeof ACTION_ERRORED;
+    payload: PluginState['error'];
+}
+export declare type ReducerAction = ClearAction | ResolveLoadingAction | ResolveSuccessAction | ResolveErrorAction;
+export declare const INITIAL_STATE: PluginState;
+export declare function reducer(state: PluginState, action: ReducerAction): PluginState;
+export declare const usePluginReducer: () => [PluginState, import("react").Dispatch<ReducerAction>];
+export {};

package/dist/types/services/use-plugins/utils.d.ts

@@ -0,0 +1,18 @@
+import { LinkPickerPlugin, LinkPickerState, ResolveResult } from '../../ui/types';
+export declare class CancellationError extends Error {
+}
+export declare const cancellable: <T extends unknown>(promise: Promise<T>) => {
+    promise: Promise<T>;
+    cancel: () => void;
+};
+/**
+ * Wraps the resolve with a cancellation wrapper and makes promise + generator plugin resolves more compatible
+ * Calling cancel for generator plugin prevents it from yielding any further updates
+ */
+export declare const resolvePluginUpdates: (plugin: LinkPickerPlugin, state: LinkPickerState) => {
+    cancel: () => void;
+    next: () => Promise<{
+        done?: boolean;
+        value: ResolveResult;
+    }>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -32,16 +32,16 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.3.1",
     "@atlaskit/button": "^16.2.0",
-    "@atlaskit/empty-state": "^7.3.0",
+    "@atlaskit/empty-state": "^7.4.0",
     "@atlaskit/form": "^8.5.1",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/tabs": "^13.2.11",
-    "@atlaskit/textfield": "^5.1.7",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tabs": "^13.3.0",
+    "@atlaskit/textfield": "^5.2.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
-    "@atlaskit/visually-hidden": "^1.0.0",
+    "@atlaskit/visually-hidden": "^1.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
@@ -59,7 +59,7 @@
     "@atlaskit/link-test-helpers": "^1.4.0",
     "@atlaskit/popup": "^1.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.4.0",
+    "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",