@mackin.com/styleguide 8.6.1 → 8.7.1

package/index.d.ts

@@ -461,6 +461,8 @@ 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: {
@@ -709,11 +711,14 @@ interface SearchBoxProps {
     id?: string;
     placeholder?: string;
     round?: boolean;
-    className?: string;
     onSubmit?: () => Promise<void>;
     /** Defaults to 250ms */
     debounceMs?: number;
     autoFocus?: boolean;
+    /** This will be applied to the containing element (Form). */
+    className?: string;
+    buttonClassName?: string;
+    inputClassName?: string;
 }
 declare const SearchBox: (props: SearchBoxProps) => JSX.Element;
 
@@ -863,7 +868,9 @@ interface SliderProps<T extends SliderValue> {
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => JSX.Element;
 
 interface TabHeaderTabProps {
-    name: string;
+    name: string | JSX.Element;
+    /** The HTML title of the tab button.  Defaults to 'name' prop. */
+    title?: string;
 }
 interface TabHeaderProps {
     tabs: TabHeaderTabProps[];
@@ -1102,4 +1109,4 @@ interface TabContainerProps {
 }
 declare const TabContainer: (p: TabContainerProps) => JSX.Element;
 
-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, 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, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+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, 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

@@ -282,6 +282,13 @@ const Text = (props) => {
     if (props.leftPad) {
         style.paddingLeft = props.leftPad;
     }
+    let fontWeight;
+    if (props.bold) {
+        fontWeight = 'bold';
+    }
+    else if (props.bold === false) {
+        fontWeight = 'normal';
+    }
     const styles = css.css(getTagStyles(theme, tagChoice), {
         userSelect: 'text',
         label: 'Text',
@@ -295,7 +302,7 @@ const Text = (props) => {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         display: '-webkit-box'
-    }, props.spacedOut && { lineHeight: '1.5rem' }, props.bold && { fontWeight: 'bold' }, props.noPad && { margin: 0, padding: 0 }, headerRegex.test((_b = props.tag) !== null && _b !== void 0 ? _b : '') && {
+    }, props.spacedOut && { lineHeight: '1.5rem' }, { fontWeight }, props.noPad && { margin: 0, padding: 0 }, headerRegex.test((_b = props.tag) !== null && _b !== void 0 ? _b : '') && {
         fontFamily: theme.fonts.headerFamily
     });
     return React__namespace.createElement(tagChoice, {
@@ -1154,6 +1161,240 @@ 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;
+};
+
 /** useEffect but ignores the first call on component mount. */
 const useIgnoreMount = (effect, deps) => {
     const mounted = React__default['default'].useRef(false);
@@ -1167,15 +1408,6 @@ 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,
@@ -1222,7 +1454,7 @@ const BackdropContextProvider = (p) => {
             }
         } },
         p.children,
-        p.__debug && (React__default['default'].createElement("p", { className: css.css({
+        p.__debug && (React__default['default'].createElement("p", { className: css.cx(modalScrollFixClassName, css.css({
                 position: 'fixed',
                 top: 0, right: 0,
                 backgroundColor: '#ff00004f',
@@ -1230,7 +1462,7 @@ const BackdropContextProvider = (p) => {
                 padding: '0.5rem',
                 margin: 0,
                 zIndex: 9999
-            }) },
+            })) },
             "Backdrop showCount: ",
             showCount))));
 };
@@ -1445,210 +1677,6 @@ 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 tryRemoveBodyStyles = () => {
-        if (bodyStyles.current) {
-            log('removing singleton', bodyStyles.current);
-            document.body.classList.remove(bodyStyles.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);
-                tryRemoveBodyStyles();
-            }
-            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, _b, _c;
-        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 (!bodyStyles.current) {
-            bodyStyles.current = css.css({
-                label: 'ModalBodyOverrides_' + ((_c = (_b = p.id) === null || _b === void 0 ? void 0 : _b.replace(/\s+/, '')) !== null && _c !== void 0 ? _c : nanoid.nanoid()),
-                overflow: 'hidden',
-                paddingRight: `${useScrollbarSize()}px`
-            });
-            log('creating singleton bodyStyles', bodyStyles.current);
-        }
-        if (show) {
-            log('this modal is showing. adding singleton bodyStyles', bodyStyles.current);
-            document.body.classList.add(bodyStyles.current);
-        }
-        else {
-            log('this modal is hiding. try removing singleton bodyStyles');
-            tryRemoveBodyStyles();
-        }
-    }, 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 `
@@ -2840,7 +2868,7 @@ const Label = (props) => {
  * https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
  */
 const useMediaQuery = (query) => {
-    const [matches, setMatches] = React.useState(false);
+    const [matches, setMatches] = React.useState(window.matchMedia(query).matches);
     React.useEffect(() => {
         const media = window.matchMedia(query);
         if (media.matches !== matches) {
@@ -3772,14 +3800,14 @@ const SearchBox = (props) => {
         return (_c = props.onSubmit) === null || _c === void 0 ? void 0 : _c.call(props);
     });
     const theme = useThemeSafely();
-    const submitButton = (React__namespace.createElement(Button, { tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: css.css({
+    const submitButton = (React__namespace.createElement(Button, { tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: css.cx(css.css({
             color: `${theme.colors.font} !important;`,
             fontSize: '1rem'
-        }), variant: "icon", small: true },
+        }), props.buttonClassName), variant: "icon", small: true },
         React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
     //TB: FUTURE replace with new inputs
     return (React__namespace.createElement(Form, { role: "search", className: css.cx('searchBox', props.className), onSubmit: onSubmit },
-        React__namespace.createElement(Input, { 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 })));
+        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 GlobalStyles = (p) => {
@@ -3955,8 +3983,17 @@ const TabHeader = (p) => {
                     overflow: 'hidden',
                 });
             }
+            let title = tab.title;
+            let buttonContent;
+            if (typeof tab.name === 'string') {
+                title !== null && title !== void 0 ? title : (title = tab.name);
+                buttonContent = React__namespace.createElement(Text, { tag: "div", align: "center", ellipsis: true }, tab.name);
+            }
+            else {
+                buttonContent = tab.name;
+            }
             return (React__namespace.createElement("li", { key: index, className: css.cx(tabStyles, p.tabClassName) },
-                React__namespace.createElement(Button, { disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: tab.name, readOnly: active, onClick: () => {
+                React__namespace.createElement(Button, { disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
                         const onChange = () => {
                             var _a;
                             setTabIndex(index);
@@ -3978,7 +4015,7 @@ const TabHeader = (p) => {
                         else {
                             onChange();
                         }
-                    } }, tab.name)));
+                    } }, buttonContent)));
         })),
         variant === 'tab' && (React__namespace.createElement("div", { className: css.cx(css.css({
                 label: 'TabHeaderDivider',
@@ -4821,6 +4858,7 @@ exports.defaultTheme = defaultTheme;
 exports.enumToEntities = enumToEntities;
 exports.getCurrencyDisplay = getCurrencyDisplay;
 exports.getFileSizeDisplay = getFileSizeDisplay;
+exports.modalScrollFixClassName = modalScrollFixClassName;
 exports.useAccordianState = useAccordianState;
 exports.useBooleanChanged = useBooleanChanged;
 exports.useIgnoreMount = useIgnoreMount;

package/package.json

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