@mackin.com/styleguide 7.9.0 → 7.9.1

package/index.d.ts

@@ -27,6 +27,8 @@ interface AutocompleteProps {
     /** The minimum characters before 'getOptions' is called.  No default. */
     minChars?: number;
     inputAriaAttributes?: React.AriaAttributes;
+    /** Defaults to 0ms. */
+    getOptionsDebounceMs?: number;
     onChange: (value: string) => void;
     getOptions: (value: string) => Promise<AutocompleteValue[]>;
     onPick: (value: AutocompleteValue) => void;

package/index.js

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var css = require('@emotion/css');
+var lodash = require('lodash');
 var React = require('react');
 var nanoid = require('nanoid');
 var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
@@ -8,7 +9,6 @@ var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var proLightSvgIcons = require('@fortawesome/pro-light-svg-icons');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var dateFns = require('date-fns');
-var lodash = require('lodash');
 var reactDom = require('react-dom');
 var reactTinyPopover = require('react-tiny-popover');
 var reactRouterDom = require('react-router-dom');
@@ -877,6 +877,7 @@ const getAutocompleteValueId = (v) => {
 };
 //TB: will need to use the new input
 const Autocomplete = (p) => {
+    var _a;
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
     const list = React__namespace.useRef(null);
@@ -886,6 +887,19 @@ const Autocomplete = (p) => {
         var _a;
         return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : DEFAULT_MAX_SHOWN_VALUES);
     }, [values]);
+    const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
+        if (!p.minChars || value.length >= p.minChars) {
+            p.getOptions(value)
+                .then(vals => {
+                setValues(vals);
+            }).catch(err => {
+                // ignore it
+            });
+        }
+        else {
+            setValues([]);
+        }
+    }, (_a = p.getOptionsDebounceMs) !== null && _a !== void 0 ? _a : 0, { leading: true, trailing: true }));
     const theme = useThemeSafely();
     const baseClass = css.css `
 		label: Autocomplete;
@@ -949,17 +963,7 @@ const Autocomplete = (p) => {
             React__namespace.createElement(Input, { inputAriaAttributes: p.inputAriaAttributes, ref: input, debounceMs: 0, type: "text", value: getAutocompleteValueText(p.value), round: p.round, rounded: p.rounded, rightControl: p.rightControl, placeholder: p.placeholder, id: p.id, disabled: p.disabled, className: p.className, inputClassName: css.cx(inputClass, p.inputClassName), maxLength: p.maxLength, required: p.required, onChange: v => {
                     const value = v;
                     p.onChange(value);
-                    if (!p.minChars || value.length >= p.minChars) {
-                        p.getOptions(value)
-                            .then(vals => {
-                            setValues(vals);
-                        }).catch(err => {
-                            // ignore it
-                        });
-                    }
-                    else {
-                        setValues([]);
-                    }
+                    onChangeForOptions.current(value);
                 }, onKeyDown: e => {
                     var _a, _b;
                     if (showValues) {

package/package.json

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