@mackin.com/styleguide 9.2.0 → 9.2.1

package/index.d.ts

@@ -1097,7 +1097,6 @@ interface AutoCompleteConfig {
     debounceMs?: number;
 }
 
-/** Extracted logic around autocomplete functionality for Autocomplete.tsx. */
 declare class AutocompleteController {
     constructor(getOptions: (value: string | undefined) => Promise<string[]>, config?: AutoCompleteConfig);
     get value(): string | undefined;

package/index.js

@@ -4656,7 +4656,6 @@ const TabContainer = (p) => {
 };
 
 const defaultMinChars = 3;
-/** Extracted logic around autocomplete functionality for Autocomplete.tsx. */
 class AutocompleteController {
     constructor(getOptions, config) {
         var _a;
@@ -4664,10 +4663,7 @@ class AutocompleteController {
         this._options = [];
         this._minChars = (_a = config === null || config === void 0 ? void 0 : config.minChars) !== null && _a !== void 0 ? _a : defaultMinChars;
         if (config === null || config === void 0 ? void 0 : config.debounceMs) {
-            this.getOptions = lodash.debounce(getOptions, config.debounceMs, {
-                leading: false,
-                trailing: true
-            });
+            this.getOptions = createDebouncedPromise(getOptions, config === null || config === void 0 ? void 0 : config.debounceMs);
         }
         else {
             this.getOptions = getOptions;
@@ -4680,7 +4676,6 @@ class AutocompleteController {
         return this._options;
     }
     async onChange(newValue) {
-        var _a;
         // don't make getOptions calls if the value hasn't changed.
         if (newValue === this.value) {
             return;
@@ -4699,19 +4694,46 @@ class AutocompleteController {
         }
         try {
             this._value = newValue;
-            // debounce (if used) will return undefined until the actual function is executed.
-            // after that it will return the result of the last execution.
-            this._options = (_a = (await this.getOptions(newValue))) !== null && _a !== void 0 ? _a : [];
+            this._options = (await this.getOptions(newValue));
         }
         catch (err) {
-            // the getOptions method needs to handle it's own errors
+            // this method will throw errors on debounce rejections. that is to be expected.
+            // for actual getOptions exceptions, the owner of that function will need to handle errors.
         }
     }
     onPick(newValue) {
         this._value = newValue;
         this._options = [];
     }
-}
+}
+const createDebouncedPromise = (originalFunction, trailingTimeoutMs) => {
+    let timer;
+    let onCancel;
+    return (value) => {
+        if (timer) {
+            clearTimeout(timer);
+        }
+        if (onCancel) {
+            onCancel('Promise cancelled due to in-progress debounce call.');
+            onCancel = undefined;
+        }
+        return new Promise((res, rej) => {
+            onCancel = rej;
+            timer = setTimeout(() => {
+                originalFunction(value)
+                    .then(values => {
+                    res(values);
+                })
+                    .catch(err => {
+                    rej(err);
+                })
+                    .finally(() => {
+                    clearTimeout(timer);
+                });
+            }, trailingTimeoutMs);
+        });
+    };
+};
 
 /** Extracted logic around autocomplete functionality for Autocomplete.tsx that supports Entity (id/name) mapping. */
 class AutocompleteEntityController {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "9.2.0",
+    "version": "9.2.1",
     "description": "",
     "main": "./index.js",
     "types": "./index.d.ts",