@mackin.com/styleguide 8.11.2 → 8.12.0

package/index.d.ts

@@ -54,6 +54,11 @@ interface AutocompleteProps<T extends AutocompleteValue> {
     /** Defaults to 0ms. */
     getOptionsDebounceMs?: number;
     autoFocus?: boolean;
+    /** 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;
@@ -467,8 +472,6 @@ interface ModalProps {
     __debug?: boolean;
     onClick?: () => void;
 }
-/** Add to fixed positioned elements so their contents do not jump around when scrolling is disabled. */
-declare const modalScrollFixClassName = "modal-scroll-fix";
 declare const Modal: (p: ModalProps) => React__default.ReactPortal | null;
 
 declare const Nav: (props: {
@@ -1149,4 +1152,7 @@ interface TabContainerProps {
 }
 declare const TabContainer: (p: TabContainerProps) => JSX.Element;
 
+/** Add to fixed positioned elements so their contents do not jump around when scrolling is disabled. */
+declare const modalScrollFixClassName = "modal-scroll-fix";
+
 export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, ModalProps, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, SliderProps, SliderValue, TabContainer, TabContainerProps, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.js

@@ -1175,239 +1175,8 @@ const Backdrop$1 = (props) => {
         }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
 };
 
-/** useEffect but it will only fire when the actual truthiness of the value changes.
- * Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
-*/
-const useBooleanChanged = (effect, dep) => {
-    /*
-        Why?
-        useEffect with a dependency array will fire once on mount even though the dependency list doesn't change.
-        Components like Modal need to communicate when their show status changes.
-        useIgnoreMount is not enough because it only ignores the first render and is therefore a kludge.
-        This is what we want regardless of mount status:
-        true > false = Change
-        false > true = Change
-        true > true = No Change
-        false > false = No Change
-        undefined > false = No Change
-        undefined > true = Change
-    */
-    const lastValue = React.useRef(undefined);
-    React.useEffect(() => {
-        //console.log('[useBooleanChanged] useEffect called with', dep, 'was', lastValue.current ?? 'undefined')
-        if (!!lastValue.current !== !!dep) {
-            const previous = lastValue.current;
-            lastValue.current = dep;
-            effect(!!lastValue.current, !!previous);
-            //console.log('[useBooleanChanged] change called')
-        }
-    }, [dep]);
-};
-
-const useLogger = (componentName, enabled) => {
-    return (...messages) => {
-        if (enabled) {
-            // tslint:disable-next-line
-            console.log(`[${componentName}]`, ...messages);
-        }
-    };
-};
-
-// Taken from: https://github.com/react-bootstrap/dom-helpers/blob/master/src/scrollbarSize.ts
-const canUseDom = !!(typeof window !== 'undefined' &&
-    window.document &&
-    window.document.createElement);
-let size;
-/** Tells you actual width of the scroll bar.  This can vary by browser. */
-const useScrollbarSize = (recalc) => {
-    if ((!size && size !== 0) || recalc) {
-        if (canUseDom) {
-            const scrollDiv = document.createElement('div');
-            scrollDiv.style.position = 'absolute';
-            scrollDiv.style.top = '-9999px';
-            scrollDiv.style.width = '50px';
-            scrollDiv.style.height = '50px';
-            scrollDiv.style.overflow = 'scroll';
-            document.body.appendChild(scrollDiv);
-            size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-            document.body.removeChild(scrollDiv);
-        }
-    }
-    return size;
-};
-
 /** Add to fixed positioned elements so their contents do not jump around when scrolling is disabled. */
-const modalScrollFixClassName = 'modal-scroll-fix';
-const Modal = (p) => {
-    var _a, _b, _c, _d;
-    const backdrop = React.useContext(BackdropContext);
-    const mouseDownElement = React.useRef(undefined);
-    const theme = useThemeSafely();
-    const hasHeader = p.closeButton || p.heading;
-    const contentRef = React__default['default'].useRef(null);
-    const log = useLogger((_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
-    const showing = React.useRef(p.show);
-    const bodyStyles = React.useRef('');
-    const fixedElementStyles = React.useRef('');
-    const addScrollStyles = () => {
-        var _a, _b, _c, _d;
-        if (!bodyStyles.current) {
-            bodyStyles.current = css.css({
-                label: 'ModalBodyOverrides_' + ((_b = (_a = p.id) === null || _a === void 0 ? void 0 : _a.replace(/\s+/, '')) !== null && _b !== void 0 ? _b : nanoid.nanoid()),
-                overflow: 'hidden',
-                paddingRight: `${useScrollbarSize()}px`
-            });
-            log('creating singleton bodyStyles', bodyStyles.current);
-        }
-        if (!fixedElementStyles.current) {
-            fixedElementStyles.current = css.css({
-                label: 'ModalElementOverrides_' + ((_d = (_c = p.id) === null || _c === void 0 ? void 0 : _c.replace(/\s+/, '')) !== null && _d !== void 0 ? _d : nanoid.nanoid()),
-                paddingRight: `${useScrollbarSize()}px`
-            });
-        }
-        document.body.classList.add(bodyStyles.current);
-        Array.from(document.querySelectorAll(`.${modalScrollFixClassName}`)).forEach(e => {
-            e.classList.add(fixedElementStyles.current);
-        });
-    };
-    const tryRemoveScrollStyles = () => {
-        if (bodyStyles.current) {
-            log('removing singleton', bodyStyles.current);
-            document.body.classList.remove(bodyStyles.current);
-        }
-        if (fixedElementStyles.current) {
-            Array.from(document.querySelectorAll(`.${modalScrollFixClassName}`)).forEach(e => {
-                e.classList.remove(fixedElementStyles.current);
-            });
-        }
-    };
-    React.useEffect(() => {
-        log('mounted');
-        return () => {
-            var _a;
-            if (showing.current) {
-                log(`un-mount in progress and this modal is showing.  decrement the backdrop and try to remove singleton body styles.`);
-                backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
-                log('backdrop.setShow', false);
-                tryRemoveScrollStyles();
-            }
-            else {
-                log(`un-mount in progress but this modal is not showing.  do nothing with the backdrop.`);
-            }
-            log('un-mounted');
-        };
-    }, []);
-    useBooleanChanged((show, previousShow) => {
-        var _a;
-        log('show changed', `${previousShow !== null && previousShow !== void 0 ? previousShow : 'undefined'} > ${show}`);
-        backdrop.setShow(show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
-        showing.current = show;
-        log('backdrop.setShow', show);
-        if (show) {
-            log('this modal is showing. adding singleton bodyStyles', bodyStyles.current);
-            addScrollStyles();
-        }
-        else {
-            log('this modal is hiding. try removing singleton bodyStyles');
-            tryRemoveScrollStyles();
-        }
-    }, p.show);
-    React__default['default'].useLayoutEffect(() => {
-        var _a;
-        if (p.show === true) {
-            const focusSelector = (_a = p.focusSelector) !== null && _a !== void 0 ? _a : '.modalCloseButton';
-            // still need to wait for the next tick so the children are all rendered.
-            setTimeout(() => {
-                var _a;
-                const element = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusSelector);
-                element === null || element === void 0 ? void 0 : element.focus();
-                log('set focus', focusSelector);
-            });
-        }
-    }, [p.show]);
-    const modalBodyStyles = css.css({
-        maxHeight: p.scrollable ? undefined : '99vh',
-        overflow: 'hidden',
-        zIndex: theme.zIndexes.modal,
-        cursor: 'default',
-        margin: '1rem',
-        backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
-        border: p.noBackground ? undefined : theme.controls.border,
-        boxShadow: p.noBackground ? undefined : theme.controls.boxShadow,
-        maxWidth: (_c = p.maxWidth) !== null && _c !== void 0 ? _c : theme.breakpoints.tablet,
-        minWidth: (_d = p.minWidth) !== null && _d !== void 0 ? _d : (hasHeader ? '250px' : undefined),
-        opacity: p.show ? 1 : 0,
-        fontSize: theme.fonts.size,
-        fontFamily: theme.fonts.family,
-        fontWeight: 'normal',
-        '&:focus': {
-            outline: 'none'
-        }
-    });
-    const modalHeaderStyles = css.cx(css.css({
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: theme.colors.header,
-        padding: '1rem',
-        color: theme.colors.headerFont
-    }), p.headerClassName);
-    const modalContainerStyles = css.css([{
-            position: 'fixed',
-            height: '100%',
-            width: '100%',
-            backgroundColor: "transparent",
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            cursor: p.onClick ? 'pointer' : 'default'
-        }, p.scrollable && {
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            alignItems: 'flex-start'
-        }]);
-    if (p.show) {
-        const backdropContainer = document.getElementById(backdrop.portalId);
-        if (backdropContainer) {
-            return reactDom.createPortal((React__default['default'].createElement("div", { onClick: e => {
-                    e.stopPropagation();
-                    if (!mouseDownElement.current) {
-                        if (p.onClick) {
-                            log('backdropContainer onClick');
-                            p.onClick();
-                        }
-                    }
-                    mouseDownElement.current = undefined;
-                }, className: css.cx('modalContainer', modalContainerStyles) },
-                React__default['default'].createElement("div", { id: p.id, ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
-                        mouseDownElement.current = e.target;
-                        e.stopPropagation();
-                    }, onMouseUp: e => {
-                        mouseDownElement.current = undefined;
-                        /*
-                            MouseDown and MouseUp stopPropagation was added to fix bugs while clicking within the modal.
-                            At least in the case of MouseUp, this breaks sliders and the handle grab logic appears to live on window.
-                            Turning this off now.  Should not cause any issues for MouseUp unlike MouseDown.
-                        */
-                        // e.stopPropagation()
-                    }, className: css.cx('modalBody', modalBodyStyles, p.className) },
-                    React__default['default'].createElement(TabLocker, null,
-                        hasHeader && (React__default['default'].createElement("header", { className: css.cx('modalHeader', modalHeaderStyles) },
-                            p.heading ? React__default['default'].createElement(Text, { className: css.css({
-                                    margin: 0,
-                                    flexGrow: 1
-                                }), tag: "h1", bold: true }, p.heading) : React__default['default'].createElement("span", null),
-                            p.closeButton && p.onClick ? React__default['default'].createElement(Button, { className: css.cx('modalCloseButton', css.css({
-                                    color: theme.colors.headerFont,
-                                    marginLeft: '1rem',
-                                    backgroundColor: 'transparent'
-                                })), variant: "icon", onClick: p.onClick },
-                                React__default['default'].createElement(Icon, { id: "close" })) : React__default['default'].createElement("span", null))),
-                        p.children)))), backdropContainer);
-        }
-    }
-    return null;
-};
+const modalScrollFixClassName = 'modal-scroll-fix';
 
 /** useEffect but ignores the first call on component mount. */
 const useIgnoreMount = (effect, deps) => {
@@ -1422,6 +1191,15 @@ const useIgnoreMount = (effect, deps) => {
     }, deps);
 };
 
+const useLogger = (componentName, enabled) => {
+    return (...messages) => {
+        if (enabled) {
+            // tslint:disable-next-line
+            console.log(`[${componentName}]`, ...messages);
+        }
+    };
+};
+
 const portalId = 'backdrop';
 const BackdropContext = React__default['default'].createContext({
     showing: false,
@@ -1691,6 +1469,229 @@ const Checkbox = (props) => {
             props.children)));
 };
 
+/** useEffect but it will only fire when the actual truthiness of the value changes.
+ * Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
+*/
+const useBooleanChanged = (effect, dep) => {
+    /*
+        Why?
+        useEffect with a dependency array will fire once on mount even though the dependency list doesn't change.
+        Components like Modal need to communicate when their show status changes.
+        useIgnoreMount is not enough because it only ignores the first render and is therefore a kludge.
+        This is what we want regardless of mount status:
+        true > false = Change
+        false > true = Change
+        true > true = No Change
+        false > false = No Change
+        undefined > false = No Change
+        undefined > true = Change
+    */
+    const lastValue = React.useRef(undefined);
+    React.useEffect(() => {
+        //console.log('[useBooleanChanged] useEffect called with', dep, 'was', lastValue.current ?? 'undefined')
+        if (!!lastValue.current !== !!dep) {
+            const previous = lastValue.current;
+            lastValue.current = dep;
+            effect(!!lastValue.current, !!previous);
+            //console.log('[useBooleanChanged] change called')
+        }
+    }, [dep]);
+};
+
+// Taken from: https://github.com/react-bootstrap/dom-helpers/blob/master/src/scrollbarSize.ts
+const canUseDom = !!(typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
+let size;
+/** Tells you actual width of the scroll bar.  This can vary by browser. */
+const useScrollbarSize = (recalc) => {
+    if ((!size && size !== 0) || recalc) {
+        if (canUseDom) {
+            const scrollDiv = document.createElement('div');
+            scrollDiv.style.position = 'absolute';
+            scrollDiv.style.top = '-9999px';
+            scrollDiv.style.width = '50px';
+            scrollDiv.style.height = '50px';
+            scrollDiv.style.overflow = 'scroll';
+            document.body.appendChild(scrollDiv);
+            size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+            document.body.removeChild(scrollDiv);
+        }
+    }
+    return size;
+};
+
+const Modal = (p) => {
+    var _a, _b, _c, _d;
+    const backdrop = React.useContext(BackdropContext);
+    const mouseDownElement = React.useRef(undefined);
+    const theme = useThemeSafely();
+    const hasHeader = p.closeButton || p.heading;
+    const contentRef = React__default['default'].useRef(null);
+    const log = useLogger((_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    const showing = React.useRef(p.show);
+    const bodyStyles = React.useRef('');
+    const fixedElementStyles = React.useRef('');
+    const addScrollStyles = () => {
+        var _a, _b, _c, _d;
+        if (!bodyStyles.current) {
+            bodyStyles.current = css.css({
+                label: 'ModalBodyOverrides_' + ((_b = (_a = p.id) === null || _a === void 0 ? void 0 : _a.replace(/\s+/, '')) !== null && _b !== void 0 ? _b : nanoid.nanoid()),
+                overflow: 'hidden',
+                paddingRight: `${useScrollbarSize()}px`
+            });
+            log('creating singleton bodyStyles', bodyStyles.current);
+        }
+        if (!fixedElementStyles.current) {
+            fixedElementStyles.current = css.css({
+                label: 'ModalElementOverrides_' + ((_d = (_c = p.id) === null || _c === void 0 ? void 0 : _c.replace(/\s+/, '')) !== null && _d !== void 0 ? _d : nanoid.nanoid()),
+                paddingRight: `${useScrollbarSize()}px`
+            });
+        }
+        document.body.classList.add(bodyStyles.current);
+        Array.from(document.querySelectorAll(`.${modalScrollFixClassName}`)).forEach(e => {
+            e.classList.add(fixedElementStyles.current);
+        });
+    };
+    const tryRemoveScrollStyles = () => {
+        if (bodyStyles.current) {
+            log('removing singleton', bodyStyles.current);
+            document.body.classList.remove(bodyStyles.current);
+        }
+        if (fixedElementStyles.current) {
+            Array.from(document.querySelectorAll(`.${modalScrollFixClassName}`)).forEach(e => {
+                e.classList.remove(fixedElementStyles.current);
+            });
+        }
+    };
+    React.useEffect(() => {
+        log('mounted');
+        return () => {
+            var _a;
+            if (showing.current) {
+                log(`un-mount in progress and this modal is showing.  decrement the backdrop and try to remove singleton body styles.`);
+                backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+                log('backdrop.setShow', false);
+                tryRemoveScrollStyles();
+            }
+            else {
+                log(`un-mount in progress but this modal is not showing.  do nothing with the backdrop.`);
+            }
+            log('un-mounted');
+        };
+    }, []);
+    useBooleanChanged((show, previousShow) => {
+        var _a;
+        log('show changed', `${previousShow !== null && previousShow !== void 0 ? previousShow : 'undefined'} > ${show}`);
+        backdrop.setShow(show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+        showing.current = show;
+        log('backdrop.setShow', show);
+        if (show) {
+            log('this modal is showing. adding singleton bodyStyles', bodyStyles.current);
+            addScrollStyles();
+        }
+        else {
+            log('this modal is hiding. try removing singleton bodyStyles');
+            tryRemoveScrollStyles();
+        }
+    }, p.show);
+    React__default['default'].useLayoutEffect(() => {
+        var _a;
+        if (p.show === true) {
+            const focusSelector = (_a = p.focusSelector) !== null && _a !== void 0 ? _a : '.modalCloseButton';
+            // still need to wait for the next tick so the children are all rendered.
+            setTimeout(() => {
+                var _a;
+                const element = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusSelector);
+                element === null || element === void 0 ? void 0 : element.focus();
+                log('set focus', focusSelector);
+            });
+        }
+    }, [p.show]);
+    const modalBodyStyles = css.css({
+        maxHeight: p.scrollable ? undefined : '99vh',
+        overflow: 'hidden',
+        zIndex: theme.zIndexes.modal,
+        cursor: 'default',
+        margin: '1rem',
+        backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
+        border: p.noBackground ? undefined : theme.controls.border,
+        boxShadow: p.noBackground ? undefined : theme.controls.boxShadow,
+        maxWidth: (_c = p.maxWidth) !== null && _c !== void 0 ? _c : theme.breakpoints.tablet,
+        minWidth: (_d = p.minWidth) !== null && _d !== void 0 ? _d : (hasHeader ? '250px' : undefined),
+        opacity: p.show ? 1 : 0,
+        fontSize: theme.fonts.size,
+        fontFamily: theme.fonts.family,
+        fontWeight: 'normal',
+        '&:focus': {
+            outline: 'none'
+        }
+    });
+    const modalHeaderStyles = css.cx(css.css({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: theme.colors.header,
+        padding: '1rem',
+        color: theme.colors.headerFont
+    }), p.headerClassName);
+    const modalContainerStyles = css.css([{
+            position: 'fixed',
+            height: '100%',
+            width: '100%',
+            backgroundColor: "transparent",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            cursor: p.onClick ? 'pointer' : 'default'
+        }, p.scrollable && {
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            alignItems: 'flex-start'
+        }]);
+    if (p.show) {
+        const backdropContainer = document.getElementById(backdrop.portalId);
+        if (backdropContainer) {
+            return reactDom.createPortal((React__default['default'].createElement("div", { onClick: e => {
+                    e.stopPropagation();
+                    if (!mouseDownElement.current) {
+                        if (p.onClick) {
+                            log('backdropContainer onClick');
+                            p.onClick();
+                        }
+                    }
+                    mouseDownElement.current = undefined;
+                }, className: css.cx('modalContainer', modalContainerStyles) },
+                React__default['default'].createElement("div", { id: p.id, ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
+                        mouseDownElement.current = e.target;
+                        e.stopPropagation();
+                    }, onMouseUp: e => {
+                        mouseDownElement.current = undefined;
+                        /*
+                            MouseDown and MouseUp stopPropagation was added to fix bugs while clicking within the modal.
+                            At least in the case of MouseUp, this breaks sliders and the handle grab logic appears to live on window.
+                            Turning this off now.  Should not cause any issues for MouseUp unlike MouseDown.
+                        */
+                        // e.stopPropagation()
+                    }, className: css.cx('modalBody', modalBodyStyles, p.className) },
+                    React__default['default'].createElement(TabLocker, null,
+                        hasHeader && (React__default['default'].createElement("header", { className: css.cx('modalHeader', modalHeaderStyles) },
+                            p.heading ? React__default['default'].createElement(Text, { className: css.css({
+                                    margin: 0,
+                                    flexGrow: 1
+                                }), tag: "h1", bold: true }, p.heading) : React__default['default'].createElement("span", null),
+                            p.closeButton && p.onClick ? React__default['default'].createElement(Button, { className: css.cx('modalCloseButton', css.css({
+                                    color: theme.colors.headerFont,
+                                    marginLeft: '1rem',
+                                    backgroundColor: 'transparent'
+                                })), variant: "icon", onClick: p.onClick },
+                                React__default['default'].createElement(Icon, { id: "close" })) : React__default['default'].createElement("span", null))),
+                        p.children)))), backdropContainer);
+        }
+    }
+    return null;
+};
+
 const ConfirmModal = (props) => {
     const theme = useThemeSafely();
     const modalStyle = css.css `

package/package.json

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