@mackin.com/styleguide 7.12.0 → 7.13.1

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

@@ -883,15 +883,19 @@ const getAutocompleteValueId = (v) => {
 };
 //TB: will need to use the new input
 const Autocomplete = (p) => {
-    var _a;
+    var _a, _b;
     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, { 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(),
@@ -1049,9 +1057,6 @@ const BackdropContextProvider = (p) => {
                 log('un-mounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
         React.useEffect(() => {
             log('showCount changed', showCount);
         }, [showCount]);
@@ -1105,9 +1110,6 @@ const BackdropOverlay = (p) => {
                 log('unmounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
         React.useEffect(() => {
             log('context.showing changed', context.showing);
         }, [context.showing]);
@@ -1337,13 +1339,14 @@ const Modal = (p) => {
     const hasHeader = p.closeButton || p.heading;
     const contentRef = React__default['default'].useRef(null);
     const log = useLogger(`Modal ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.debug) !== null && _b !== void 0 ? _b : false);
+    const showing = React.useRef(p.show);
     React.useEffect(() => {
         log('mounted');
         return () => {
             // handle the use of modals that are rendered only as show=true and then unmounted.
             backdrop.setShow(false);
             log('backdrop.setShow', false);
-            if (backdrop.showCount <= 1 && htmlBodyStyles) {
+            if (showing.current && backdrop.showCount <= 1 && htmlBodyStyles) {
                 log('backdrop.showCount', backdrop.showCount, 'removing htmlBodyStyles');
                 document.body.classList.remove(htmlBodyStyles);
             }
@@ -1353,10 +1356,12 @@ const Modal = (p) => {
     React.useEffect(() => {
         log('show changed', p.show);
         backdrop.setShow(p.show);
+        showing.current = p.show;
         log('backdrop.setShow', true);
         if (!htmlBodyStyles) {
             log('creating singleton htmlBodyStyles');
             htmlBodyStyles = css.css({
+                label: 'ModalBodyOverrides',
                 overflow: 'hidden',
                 paddingRight: `${useScrollbarSize()}px`
             });
@@ -3787,9 +3792,6 @@ const WaitingIndicator = (p) => {
                 log('unmounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
     }
     React.useEffect(() => {
         log('show changed', p.show);

package/package.json

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