@mackin.com/styleguide 8.0.0-beta.13 → 8.0.0-beta.16

package/index.d.ts

@@ -81,7 +81,7 @@ declare const Backdrop: (p: {
     children: React__default.ReactNode;
     /** Fade in time.  Defaults to 250ms. */
     showTimeMs?: number;
-    debug?: boolean;
+    __debug?: boolean;
 }) => JSX.Element;
 
 declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
@@ -159,7 +159,7 @@ interface ConfirmModalProps {
     className?: string;
     variant?: 'omg';
     id?: string;
-    debug?: boolean;
+    __debug?: boolean;
 }
 declare const ConfirmModal: (props: ConfirmModalProps) => JSX.Element;
 
@@ -176,7 +176,7 @@ declare const ErrorModal: (props: {
     message: string;
     show: boolean;
     id?: string;
-    debug?: boolean;
+    __debug?: boolean;
     close: () => void;
 }) => JSX.Element;
 
@@ -290,7 +290,7 @@ interface InfoTipProps {
     /** Defaults to nav font color. */
     fontColor?: string;
     modalId?: string;
-    modalDebug?: boolean;
+    __debug?: boolean;
 }
 declare const InfoTip: (props: InfoTipProps) => JSX.Element;
 
@@ -440,7 +440,7 @@ interface ModalProps {
     scrollable?: boolean;
     id?: string;
     className?: string;
-    debug?: boolean;
+    __debug?: boolean;
     onClick?: () => void;
 }
 declare const Modal: (p: ModalProps) => React__default.ReactPortal | null;
@@ -448,6 +448,7 @@ declare const Modal: (p: ModalProps) => React__default.ReactPortal | null;
 declare const Nav: (props: {
     show: boolean;
     toggle: (show: boolean) => void;
+    id?: string | undefined;
     children?: React.ReactNode;
     responsive?: boolean | undefined;
     className?: string | undefined;
@@ -804,6 +805,10 @@ interface MackinTheme {
         desktop: string;
         tablet: string;
     };
+    mediaQueries: {
+        desktop: string;
+        tablet: string;
+    };
 }
 /** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
 declare const calcDynamicThemeProps: <T extends MackinTheme>(theme: T) => void;
@@ -980,7 +985,7 @@ declare const WaitingIndicator: (p: {
     show: boolean;
     minShowTimeMs?: number;
     id?: string;
-    debug?: boolean;
+    __debug?: boolean;
 }) => 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, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useMediaQuery, useThemeSafely };

package/index.js

@@ -116,6 +116,8 @@ const calcDynamicThemeProps = (theme) => {
     theme.controls.focusOutlineRequiredShadow = `0px 0px 4px 2px ${theme.colors.focusOutlineRequired}`;
     theme.controls.dividerBorder = `2px solid ${theme.colors.divider}`;
     theme.controls.inputErrorMinHeight = `calc(${theme.fonts.sizeSmall} * 1.5 + 4px)`;
+    theme.mediaQueries.desktop = `@media(min-width:${theme.breakpoints.desktop})`;
+    theme.mediaQueries.tablet = `@media(min-width:${theme.breakpoints.tablet})`;
 };
 const defaultTheme = {
     colors: {
@@ -203,6 +205,10 @@ const defaultTheme = {
     breakpoints: {
         desktop: '800px',
         tablet: '768px'
+    },
+    mediaQueries: {
+        desktop: '',
+        tablet: ''
     }
 };
 calcDynamicThemeProps(defaultTheme);
@@ -435,12 +441,15 @@ const Accordian = (props) => {
             }
         }
     }, [open]);
-    if (props.open !== undefined) {
-        React__namespace.useEffect(() => {
-            var _a;
-            setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
-        }, [props.open]);
-    }
+    React__namespace.useEffect(() => {
+        var _a;
+        if (props.open === undefined) {
+            // technically, we only need to use this effect if props.open was initialized with a boolean.
+            // you can't have conditional effects so here we go...
+            return;
+        }
+        setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
+    }, [props.open]);
     return (React__namespace.createElement("div", { className: "accordian" },
         React__namespace.createElement(Button, { readOnly: props.disabled, block: (_d = props.block) !== null && _d !== void 0 ? _d : true, variant: props.variant, className: css.cx(css.css({
                 display: 'flex',
@@ -1099,6 +1108,19 @@ const Backdrop$1 = (props) => {
         }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
 };
 
+/** useEffect but ignores the first call on component mount. */
+const useIgnoreMount = (effect, deps) => {
+    const mounted = React__default['default'].useRef(false);
+    React__default['default'].useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+        }
+        else {
+            effect();
+        }
+    }, deps);
+};
+
 const useLogger = (componentName, enabled) => {
     return (...messages) => {
         if (enabled) {
@@ -1108,19 +1130,20 @@ const useLogger = (componentName, enabled) => {
     };
 };
 
+const portalId = 'backdrop';
 const BackdropContext = React__default['default'].createContext({
     showing: false,
     showCount: 0,
-    portalId: 'backdrop',
-    setShow: s => {
+    portalId: portalId,
+    setShow: (s, f) => {
         /* empty */
     }
 });
 const BackdropContextProvider = (p) => {
     var _a;
     const [showCount, setShowCount] = React.useState(0);
-    const log = useLogger('BackdropContextProvider', (_a = p.debug) !== null && _a !== void 0 ? _a : false);
-    if (p.debug) {
+    const log = useLogger('BackdropContextProvider', (_a = p.__debug) !== null && _a !== void 0 ? _a : false);
+    if (p.__debug) {
         React.useEffect(() => {
             log('mounted');
             return () => {
@@ -1130,35 +1153,33 @@ const BackdropContextProvider = (p) => {
         React.useEffect(() => {
             log('re-rendered');
         });
-        React.useEffect(() => {
+        useIgnoreMount(() => {
             log('showCount changed', showCount);
         }, [showCount]);
     }
     return (React__default['default'].createElement(BackdropContext.Provider, { value: {
-            portalId: 'backdrop',
+            portalId: portalId,
             showing: showCount > 0,
             showCount: showCount,
-            setShow: (show) => {
+            setShow: (show, from) => {
                 if (show) {
                     setShowCount(s => {
                         const count = s + 1;
-                        log('setShowCount', count);
-                        log('showCount was', showCount);
+                        log(`setShow from ${from} ${s} -> ${count}`);
                         return count;
                     });
                 }
                 else {
                     setShowCount(s => {
                         const count = Math.max(0, s - 1);
-                        log('setShowCount', count);
-                        log('showCount was', showCount);
+                        log(`setShow from ${from} ${s} -> ${count}`);
                         return count;
                     });
                 }
             }
         } },
         p.children,
-        p.debug && (React__default['default'].createElement("p", { className: css.css({
+        p.__debug && (React__default['default'].createElement("p", { className: css.css({
                 position: 'fixed',
                 top: 0, right: 0,
                 backgroundColor: '#ff00004f',
@@ -1175,8 +1196,8 @@ const BackdropOverlay = (p) => {
     const context = React.useContext(BackdropContext);
     const theme = useThemeSafely();
     const showTimeMs = (_a = p.showTimeMs) !== null && _a !== void 0 ? _a : 250;
-    const log = useLogger('BackdropOverlay', (_b = p.debug) !== null && _b !== void 0 ? _b : false);
-    if (p.debug) {
+    const log = useLogger('BackdropOverlay', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    if (p.__debug) {
         React.useEffect(() => {
             log('mounted');
             return () => {
@@ -1186,12 +1207,12 @@ const BackdropOverlay = (p) => {
         React.useEffect(() => {
             log('re-rendered');
         });
-        React.useEffect(() => {
+        useIgnoreMount(() => {
             log('context.showing changed', context.showing);
         }, [context.showing]);
     }
     return (React__default['default'].createElement("div", { onClick: () => {
-            context === null || context === void 0 ? void 0 : context.setShow(false);
+            context === null || context === void 0 ? void 0 : context.setShow(false, 'BackdropOverlay');
             log('onClick', 'setShow', false);
         }, id: context === null || context === void 0 ? void 0 : context.portalId, className: css.css({
             cursor: 'pointer',
@@ -1207,12 +1228,12 @@ const BackdropOverlay = (p) => {
         }) }));
 };
 const Backdrop = (p) => {
-    return (React__default['default'].createElement(BackdropContextProvider, { debug: p.debug },
+    return (React__default['default'].createElement(BackdropContextProvider, { __debug: p.__debug },
         React__default['default'].createElement("div", { className: css.css({
                 height: '100%'
             }) },
             p.children,
-            React__default['default'].createElement(BackdropOverlay, { showTimeMs: p.showTimeMs, debug: p.debug }))));
+            React__default['default'].createElement(BackdropOverlay, { showTimeMs: p.showTimeMs, __debug: p.__debug }))));
 };
 
 const Calendar = (p) => {
@@ -1414,12 +1435,13 @@ const Modal = (p) => {
     const theme = useThemeSafely();
     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 log = useLogger(`Modal ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
     React.useEffect(() => {
         log('mounted');
         return () => {
+            var _a;
             // handle the use of modals that are rendered only as show=true and then unmounted.
-            backdrop.setShow(false);
+            backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
             log('backdrop.setShow', false);
             if (backdrop.showCount <= 1 && htmlBodyStyles) {
                 log('backdrop.showCount', backdrop.showCount, 'removing htmlBodyStyles');
@@ -1428,10 +1450,11 @@ const Modal = (p) => {
             log('un-mounted');
         };
     }, []);
-    React.useEffect(() => {
+    useIgnoreMount(() => {
+        var _a;
         log('show changed', p.show);
-        backdrop.setShow(p.show);
-        log('backdrop.setShow', true);
+        backdrop.setShow(p.show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+        log('backdrop.setShow', p.show);
         if (!htmlBodyStyles) {
             log('creating singleton htmlBodyStyles');
             htmlBodyStyles = css.css({
@@ -1550,7 +1573,7 @@ const ConfirmModal = (props) => {
 			}
 		`}
 	`;
-    return (React__namespace.createElement(Modal, { id: props.id, debug: props.debug, className: css.cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
+    return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
         React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
             React__namespace.createElement(Text, { align: "center" }, props.text),
             React__namespace.createElement("div", { className: css.css({ textAlign: 'center' }) },
@@ -1600,7 +1623,7 @@ const ErrorModal = (props) => {
 			color:  ${theme.colors.omgFont};
 		}
 	`;
-    return (React__namespace.createElement(Modal, { id: props.id, debug: props.debug, className: css.cx('errorModal', modalStyles), heading: "Error", closeButton: true, show: props.show, onClick: props.close },
+    return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('errorModal', modalStyles), heading: "Error", closeButton: true, show: props.show, onClick: props.close },
         React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
             React__namespace.createElement(Text, { align: "center" }, message))));
 };
@@ -2127,7 +2150,7 @@ const InfoTip = (props) => {
     if (props.variant === 'modal') {
         return (React__namespace.createElement(React__namespace.Fragment, null,
             button,
-            React__namespace.createElement(Modal, { id: props.modalId, debug: props.modalDebug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css.css({
+            React__namespace.createElement(Modal, { id: props.modalId, __debug: props.__debug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css.css({
                     whiteSpace: 'normal'
                 }), closeButton: true },
                 React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) }, props.content))));
@@ -2266,19 +2289,6 @@ const tryClampDecimals = (value, step = 0) => {
     return parseFloat(value.toFixed(decimals));
 };
 
-/** useEffect but ignores the first call on component mount. */
-const useIgnoreMount = (effect, deps) => {
-    const mounted = React__default['default'].useRef(false);
-    React__default['default'].useEffect(() => {
-        if (!mounted.current) {
-            mounted.current = true;
-        }
-        else {
-            effect();
-        }
-    }, deps);
-};
-
 /** Common state handling for displaying validation messages with inputs. */
 const useInputValidationMessage = (ref, props) => {
     const [validationError, setValidationError] = React__default['default'].useState('');
@@ -2289,6 +2299,9 @@ const useInputValidationMessage = (ref, props) => {
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(customError);
         setValidationError(customError || getValidationMessage(ref.current, props.patternErrorMessage));
     };
+    React.useEffect(() => {
+        updateErrorMessage();
+    }, [props.customError]);
     React__default['default'].useEffect(() => {
         updateErrorMessage();
     }, []);
@@ -2805,7 +2818,8 @@ const Nav = (props) => {
         }
     }, [backdrop.showing]);
     React__namespace.useEffect(() => {
-        backdrop.setShow(props.show);
+        var _a;
+        backdrop.setShow(props.show, (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav');
     }, [props.show]);
     React__namespace.useLayoutEffect(() => {
         if (nav && nav.current) {
@@ -4104,8 +4118,8 @@ const WaitingIndicator = (p) => {
     const [show, setShow] = React.useState(p.show);
     const hideTimer = React.useRef(0);
     const lastShowStatus = React.useRef(false);
-    const log = useLogger(`WaitingIndicator ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.debug) !== null && _b !== void 0 ? _b : false);
-    if (p.debug) {
+    const log = useLogger(`WaitingIndicator ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    if (p.__debug) {
         React.useEffect(() => {
             log('mounted');
             return () => {
@@ -4155,7 +4169,7 @@ const WaitingIndicator = (p) => {
             }
         }
     }, [p.show]);
-    return (React__default['default'].createElement(Modal, { id: p.id, debug: p.debug, className: "waitingIndicator", show: show, noBackground: true },
+    return (React__default['default'].createElement(Modal, { id: p.id, __debug: p.__debug, className: "waitingIndicator", show: show, noBackground: true },
         React__default['default'].createElement("div", { className: css.css({
                 color: 'white',
                 fontSize: '3rem'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "8.0.0-beta.13",
+	"version": "8.0.0-beta.16",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",