@mackin.com/styleguide 8.10.0 → 8.11.2

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;
@@ -928,9 +930,12 @@ declare const Table: (props: {
     caption?: string | JSX.Element;
     children?: any;
     noCellBorder?: boolean;
+    /** Styles applied to the table element. */
     className?: string;
     /** Colors alternate rows. */
     altRows?: boolean;
+    /** Styles applied to the table wrapper scroll container. */
+    wrapperClassName?: string;
 }) => JSX.Element;
 declare const Tr: (props: {
     className?: string;

package/index.js

@@ -891,16 +891,19 @@ const TabLocker = (props) => {
 const defaultMaxShownValues = 7;
 const buttonMarkerClass = 'ListItem__button';
 const Autocomplete = (p) => {
-    var _a;
+    var _a, _b;
     const theme = useThemeSafely();
     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 : defaultMaxShownValues;
     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, maxShowValues);
+        }
+        return values.slice();
     }, [values]);
     const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
         if (!p.minChars || value.length >= p.minChars) {
@@ -914,7 +917,7 @@ const Autocomplete = (p) => {
         else {
             setValues([]);
         }
-    }, (_a = p.getOptionsDebounceMs) !== null && _a !== void 0 ? _a : 0, { leading: false, trailing: true }));
+    }, (_b = p.getOptionsDebounceMs) !== null && _b !== void 0 ? _b : 0, { leading: false, trailing: true }));
     const getNextTabElement = (fromIndex, direction) => {
         var _a, _b, _c;
         if (fromIndex === -1) {
@@ -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 && 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 => {
@@ -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) {
@@ -4082,6 +4089,7 @@ const TabHeader = (p) => {
 const Table = (props) => {
     const theme = useThemeSafely();
     const tableStyles = css.css `
+		label: Table;
 		width: 100%;
 		border-collapse: collapse;
 		${props.noCellBorder && `
@@ -4097,11 +4105,12 @@ const Table = (props) => {
 		`}
 	`;
     const wrapperStyles = css.css `
+		label: TableScrollWrapper;
 		width:100%;
         overflow-y: auto;
         padding:0 1px;  //fixes always showing of the table scroller
 	`;
-    return (React__namespace.createElement("div", { className: wrapperStyles },
+    return (React__namespace.createElement("div", { className: css.cx(wrapperStyles, props.wrapperClassName) },
         React__namespace.createElement("table", { className: css.cx(tableStyles, props.className) },
             props.caption && React__namespace.createElement("caption", { className: css.css({
                     fontWeight: 'bold',

package/package.json

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