@mackin.com/styleguide 7.12.1 → 7.14.0

package/index.d.ts

@@ -29,6 +29,13 @@ interface AutocompleteProps {
     inputAriaAttributes?: React.AriaAttributes;
     /** Defaults to 0ms. */
     getOptionsDebounceMs?: number;
+    /** Options passed to the lodash debounce function. */
+    debounceOptions?: {
+        leading: boolean;
+        trailing: boolean;
+    };
+    /** Will enable scrolling in the results list. */
+    allowScroll?: boolean;
     onChange: (value: string) => void;
     getOptions: (value: string) => Promise<AutocompleteValue[]>;
     onPick: (value: AutocompleteValue) => void;

package/index.js

@@ -883,15 +883,19 @@ const getAutocompleteValueId = (v) => {
 };
 //TB: will need to use the new input
 const Autocomplete = (p) => {
-    var _a;
+    var _a, _b, _c;
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
     const list = React__namespace.useRef(null);
     const [values, setValues] = React__namespace.useState([]);
     const showValues = React__namespace.useMemo(() => values.length > 0, [values]);
+    const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : DEFAULT_MAX_SHOWN_VALUES;
     const shownValues = React__namespace.useMemo(() => {
-        var _a;
-        return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : DEFAULT_MAX_SHOWN_VALUES);
+        if (!p.allowScroll) {
+            //TB:normalize this value and use it below for list building
+            return values.slice(0, maxShowValues);
+        }
+        return values.slice();
     }, [values]);
     const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
         if (!p.minChars || value.length >= p.minChars) {
@@ -905,7 +909,7 @@ const Autocomplete = (p) => {
         else {
             setValues([]);
         }
-    }, (_a = p.getOptionsDebounceMs) !== null && _a !== void 0 ? _a : 0, { leading: true, trailing: true }));
+    }, (_b = p.getOptionsDebounceMs) !== null && _b !== void 0 ? _b : 0, (_c = p.debounceOptions) !== null && _c !== void 0 ? _c : { leading: true, trailing: true }));
     const theme = useThemeSafely();
     const baseClass = css.css `
 		label: Autocomplete;
@@ -923,6 +927,7 @@ const Autocomplete = (p) => {
         borderRadius: listBorderRadius,
         boxShadow: theme.controls.boxShadow,
         backgroundColor: theme.colors.bg,
+        color: theme.colors.font,
         marginTop: `-4px !important`,
         zIndex: theme.zIndexes.backdrop,
         'li:first-child button': {
@@ -932,7 +937,7 @@ const Autocomplete = (p) => {
         'li:last-child button': {
             borderBottomRightRadius: listBorderRadius,
             borderBottomLeftRadius: listBorderRadius,
-        }
+        },
     });
     const inputClass = css.css `
 		${showValues && `
@@ -985,7 +990,10 @@ const Autocomplete = (p) => {
                         }
                     }
                 }, onKeyPress: e => { var _a; return (_a = p.onKeyPress) === null || _a === void 0 ? void 0 : _a.call(p, e); } }),
-            showValues && (React__namespace.createElement(List, { ref: list, className: listClass },
+            showValues && (React__namespace.createElement(List, { ref: list, className: css.cx(listClass, p.allowScroll && shownValues.length > maxShowValues && css.css({
+                    overflowY: 'scroll',
+                    maxHeight: `calc(${theme.controls.height} * ${maxShowValues})`
+                })) },
                 shownValues.map((value, listItemIndex) => {
                     return (React__namespace.createElement(ListItem, { key: getAutocompleteValueId(value), variant: "full" },
                         React__namespace.createElement(Button, { onKeyDown: e => {
@@ -1012,7 +1020,7 @@ const Autocomplete = (p) => {
                             } },
                             React__namespace.createElement(Text, { tag: "div", ellipsis: true, align: "left" }, getAutocompleteValueText(value)))));
                 }),
-                shownValues.length < values.length && (React__namespace.createElement(ListItem, null,
+                !p.allowScroll && shownValues.length < values.length && (React__namespace.createElement(ListItem, null,
                     React__namespace.createElement(Text, { tag: "div", italics: true, align: "center" },
                         "Showing ",
                         shownValues.length.toLocaleString(),

package/package.json

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