@uncinc/uncinc-react-kitchen-sink 2.25.3 → 2.26.0

package/dist/components/ApiAutocomplete/index.d.ts

@@ -5,7 +5,7 @@ export interface ApiAutocompleteItem {
     name: string;
     [key: string]: any;
 }
-export interface ApiAutocompleteProps<TSuggestion = ApiAutocompleteItem> extends InputProps<TSuggestion> {
+export interface ApiAutocompleteProps<TSuggestion = ApiAutocompleteItem> extends Omit<InputProps<TSuggestion>, 'value' | 'onChange'> {
     id: string;
     endpoint: string;
     placeholder?: string;
@@ -15,7 +15,8 @@ export interface ApiAutocompleteProps<TSuggestion = ApiAutocompleteItem> extends
     queryParameter?: string;
     getSuggestionValue: GetSuggestionValue<TSuggestion>;
     requestOptions?: RequestInit;
-    suggestProps: Omit<AutosuggestPropsBase<TSuggestion>, 'suggestions' | 'onSuggestionsFetchRequested' | 'onSuggestionsClearRequested' | 'getSuggestionValue' | 'renderSuggestion' | 'onSuggestionSelected' | 'inputProps'>;
+    debounce?: number;
+    suggestProps?: Omit<AutosuggestPropsBase<TSuggestion>, 'suggestions' | 'onSuggestionsFetchRequested' | 'onSuggestionsClearRequested' | 'getSuggestionValue' | 'renderSuggestion' | 'onSuggestionSelected' | 'inputProps'>;
 }
-declare const ApiAutocomplete: React.FC<ApiAutocompleteProps>;
+declare const ApiAutocomplete: <TSuggestion extends object = ApiAutocompleteItem>({ endpoint, placeholder, renderItem, defaultValue, onSelectItem, queryParameter, getSuggestionValue, requestOptions, debounce, suggestProps, ...restProps }: ApiAutocompleteProps<TSuggestion>) => React.JSX.Element;
 export default ApiAutocomplete;

package/dist/components/ApiAutocomplete/index.js

@@ -1,5 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; 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); }
-var _excluded = ["endpoint", "placeholder", "renderItem", "defaultValue", "onSelectItem", "queryParameter", "getSuggestionValue", "requestOptions", "suggestProps"];
+var _excluded = ["endpoint", "placeholder", "renderItem", "defaultValue", "onSelectItem", "queryParameter", "getSuggestionValue", "requestOptions", "debounce", "suggestProps"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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; }
@@ -14,11 +14,10 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Autosuggest from 'react-autosuggest';
 import getApiAutoCompleteSuggestions from '../../helpers/apiAutoComplete';
 import './style.scss';
-var currentFetch;
 var ApiAutocomplete = function ApiAutocomplete(_ref) {
   var endpoint = _ref.endpoint,
     placeholder = _ref.placeholder,
@@ -34,6 +33,7 @@ var ApiAutocomplete = function ApiAutocomplete(_ref) {
     } : _ref$getSuggestionVal,
     _ref$requestOptions = _ref.requestOptions,
     requestOptions = _ref$requestOptions === void 0 ? {} : _ref$requestOptions,
+    debounce = _ref.debounce,
     suggestProps = _ref.suggestProps,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(defaultValue || ''),
@@ -44,8 +44,22 @@ var ApiAutocomplete = function ApiAutocomplete(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     results = _useState4[0],
     setResults = _useState4[1];
+  var debounceTimeout = useRef();
+  var abortController = useRef();
+  useEffect(function () {
+    return function () {
+      return clearTimeout(debounceTimeout.current);
+    };
+  }, []);
   var getSuggestionsSetResults = function getSuggestionsSetResults(value) {
-    getApiAutoCompleteSuggestions(endpoint, queryParameter, value, requestOptions, currentFetch).then(function (data) {
+    var _abortController$curr;
+    // Supersede the request that is still in flight, so its response cannot
+    // arrive after the one we are about to make.
+    (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
+    abortController.current = new AbortController();
+    getApiAutoCompleteSuggestions(endpoint, queryParameter, value, _objectSpread(_objectSpread({}, requestOptions), {}, {
+      signal: abortController.current.signal
+    })).then(function (data) {
       if (data) {
         setResults(data);
       }
@@ -57,9 +71,17 @@ var ApiAutocomplete = function ApiAutocomplete(_ref) {
     suggestions: results,
     onSuggestionsFetchRequested: function onSuggestionsFetchRequested(_ref2) {
       var value = _ref2.value;
-      getSuggestionsSetResults(value);
+      if (!debounce) {
+        getSuggestionsSetResults(value);
+        return;
+      }
+      clearTimeout(debounceTimeout.current);
+      debounceTimeout.current = setTimeout(function () {
+        getSuggestionsSetResults(value);
+      }, debounce);
     },
     onSuggestionsClearRequested: function onSuggestionsClearRequested() {
+      clearTimeout(debounceTimeout.current);
       setResults([]);
     },
     getSuggestionValue: getSuggestionValue,
@@ -75,10 +97,10 @@ var ApiAutocomplete = function ApiAutocomplete(_ref) {
     inputProps: _objectSpread(_objectSpread({}, restProps), {}, {
       placeholder: placeholder,
       value: queryInput,
-      onBlur: function onBlur(_ref5) {
-        var value = _ref5.target;
-        // @ts-ignore
-        if (!value || (value === null || value === void 0 ? void 0 : value.length) === 0) {
+      onBlur: function onBlur(event) {
+        var _ref5 = event.target,
+          value = _ref5.value;
+        if (!value || value.length === 0) {
           onSelectItem(null);
         }
       },

package/dist/helpers/apiAutoComplete.js

@@ -9,14 +9,13 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function abortableFetch(request, opts) {
   var controller = new AbortController();
-  var signal = controller.signal;
   return {
     abort: function abort() {
       return controller.abort();
     },
-    ready: fetch(request, _objectSpread(_objectSpread({}, opts), {}, {
-      signal: signal
-    }))
+    ready: fetch(request, _objectSpread({
+      signal: controller.signal
+    }, opts))
   };
 }
 var getApiAutoCompleteSuggestions = /*#__PURE__*/function () {
@@ -29,10 +28,7 @@ var getApiAutoCompleteSuggestions = /*#__PURE__*/function () {
           if (currentFetch) {
             currentFetch.abort();
           }
-
-          // eslint-disable-next-line no-param-reassign
-          currentFetch = abortableFetch(url, requestOptions);
-          return _context.abrupt("return", currentFetch.ready.then(function (response) {
+          return _context.abrupt("return", abortableFetch(url, requestOptions).ready.then(function (response) {
             return response.json();
           }).then(function (response) {
             return (
@@ -46,11 +42,13 @@ var getApiAutoCompleteSuggestions = /*#__PURE__*/function () {
               })
             );
           }).catch(function (e) {
-            console.warn(e);
+            if (e.name !== 'AbortError') {
+              console.warn(e);
+            }
             return null;
             // Catch the error so the browser does not output errors.
           }));
-        case 4:
+        case 3:
         case "end":
           return _context.stop();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.25.3",
+  "version": "2.26.0",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",