@mackin.com/styleguide 8.10.0 → 8.11.0

package/index.d.ts

@@ -54,6 +54,8 @@ interface AutocompleteProps<T extends AutocompleteValue> {
     /** Defaults to 0ms. */
     getOptionsDebounceMs?: number;
     autoFocus?: boolean;
+    /** Will enable scrolling in the results list. */
+    allowScroll?: boolean;
     onChange: (value: string) => void;
     getOptions: (value: string) => Promise<T[]>;
     onPick: (value: T) => void;

package/index.js

@@ -900,7 +900,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 : defaultMaxShownValues);
+        if (!p.allowScroll) {
+            return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues);
+        }
+        return values.slice();
     }, [values]);
     const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
         if (!p.minChars || value.length >= p.minChars) {
@@ -983,7 +986,7 @@ const Autocomplete = (p) => {
                     }
                     (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
                 }, 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: css.css({
+            showValues && (React__namespace.createElement(List, { ref: list, className: css.cx(css.css({
                     position: 'absolute',
                     width: '100%',
                     border: theme.controls.border,
@@ -1000,7 +1003,10 @@ const Autocomplete = (p) => {
                         borderBottomRightRadius: listBorderRadius,
                         borderBottomLeftRadius: listBorderRadius,
                     }
-                }) },
+                }), 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 => {
@@ -1029,7 +1035,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(),
@@ -3844,6 +3850,7 @@ const SearchBox = (props) => {
         }), props.buttonClassName), variant: "icon", small: true },
         React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
     //TB: FUTURE replace with new inputs
+    //TB: change the search icon to x when value is present
     const input = (React__namespace.createElement(Input, { inputClassName: props.inputClassName, autoFocus: props.autoFocus, id: props.id, debounceMs: props.debounceMs, disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, onChange: props.onChange, rightControl: submitButton }));
     const wrapperClassName = css.cx('searchBox', props.className);
     if (!props.noForm) {

package/package.json

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