@mackin.com/styleguide 7.12.1 → 7.13.0

package/index.d.ts

@@ -29,6 +29,8 @@ interface AutocompleteProps {
     inputAriaAttributes?: React.AriaAttributes;
     /** Defaults to 0ms. */
     getOptionsDebounceMs?: number;
+    /** 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

@@ -891,7 +891,10 @@ const Autocomplete = (p) => {
     const showValues = React__namespace.useMemo(() => values.length > 0, [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) {
+            return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : DEFAULT_MAX_SHOWN_VALUES);
+        }
+        return values.slice();
     }, [values]);
     const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
         if (!p.minChars || value.length >= p.minChars) {
@@ -923,6 +926,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 +936,7 @@ const Autocomplete = (p) => {
         'li:last-child button': {
             borderBottomRightRadius: listBorderRadius,
             borderBottomLeftRadius: listBorderRadius,
-        }
+        },
     });
     const inputClass = css.css `
 		${showValues && `
@@ -985,7 +989,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 && css.css({
+                    overflowY: 'scroll',
+                    maxHeight: `calc(${theme.controls.height} * ${p.maxShownValues})`
+                })) },
                 shownValues.map((value, listItemIndex) => {
                     return (React__namespace.createElement(ListItem, { key: getAutocompleteValueId(value), variant: "full" },
                         React__namespace.createElement(Button, { onKeyDown: e => {
@@ -1012,7 +1019,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.13.0",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",