@mackin.com/styleguide 10.2.1 → 10.2.2

package/index.esm.js

@@ -1258,15 +1258,18 @@ const useLogger = (componentName, enabled) => {
 const portalId = 'backdrop';
 const BackdropContext = React__default.createContext({
     showing: false,
-    showCount: 0,
     portalId: portalId,
+    children: [],
     setShow: () => {
         /* empty */
     }
 });
+function useBackdropContext() {
+    return useContext(BackdropContext);
+}
 const BackdropContextProvider = (p) => {
     var _a;
-    const [showCount, setShowCount] = useState(0);
+    const [modalChildren, setModalChildren] = useState([]);
     const log = useLogger('BackdropContextProvider', (_a = p.__debug) !== null && _a !== void 0 ? _a : false);
     if (p.__debug) {
         useEffect(() => {
@@ -1276,26 +1279,38 @@ const BackdropContextProvider = (p) => {
             };
         }, []);
         useIgnoreMount(() => {
-            log('showCount changed', showCount);
-        }, [showCount]);
+            log('showCount changed', modalChildren);
+        }, [modalChildren]);
     }
     return (React__default.createElement(BackdropContext.Provider, { value: {
             portalId: portalId,
-            showing: showCount > 0,
-            showCount: showCount,
+            showing: modalChildren.length > 0,
+            children: modalChildren.slice(),
             setShow: (show, from) => {
                 if (show) {
-                    setShowCount(s => {
-                        const count = s + 1;
-                        log(`setShow from ${from} ${s} -> ${count}`);
-                        return count;
+                    setModalChildren(previousChildren => {
+                        const newChildren = [...previousChildren, from];
+                        log(`setModalChildren TRUE from ${JSON.stringify(from)}.`);
+                        return newChildren;
                     });
                 }
                 else {
-                    setShowCount(s => {
-                        const count = Math.max(0, s - 1);
-                        log(`setShow from ${from} ${s} -> ${count}`);
-                        return count;
+                    setModalChildren(previousChildren => {
+                        let newChildren;
+                        if (from.key === backdropOverlayKey && !show) {
+                            if (previousChildren.length === 1) {
+                                newChildren = [];
+                            }
+                            else {
+                                newChildren = [...previousChildren];
+                                newChildren.pop();
+                            }
+                        }
+                        else {
+                            newChildren = previousChildren.filter(c => c.key !== from.key);
+                        }
+                        log(`setModalChildren FALSE from ${JSON.stringify(from)}.`);
+                        return newChildren;
                     });
                 }
             }
@@ -1310,9 +1325,10 @@ const BackdropContextProvider = (p) => {
                 margin: 0,
                 zIndex: 9999
             })) },
-            "Backdrop showCount: ",
-            showCount))));
+            "Backdrop children: ",
+            JSON.stringify(modalChildren, null, 4)))));
 };
+const backdropOverlayKey = 'BackdropOverlay';
 const BackdropOverlay = (p) => {
     var _a, _b;
     const context = useContext(BackdropContext);
@@ -1330,15 +1346,25 @@ const BackdropOverlay = (p) => {
             log('context.showing changed', context.showing);
         }, [context.showing]);
     }
+    let zIndex = -1;
+    if (context.showing) {
+        zIndex = theme.zIndexes.backdrop;
+        context.children.forEach(child => {
+            if (child.zIndex > zIndex) {
+                // -1 so it's always directly below the child
+                zIndex = child.zIndex - 1;
+            }
+        });
+    }
     return (React__default.createElement("div", { onClick: () => {
-            context === null || context === void 0 ? void 0 : context.setShow(false, 'BackdropOverlay');
+            context === null || context === void 0 ? void 0 : context.setShow(false, { key: backdropOverlayKey, zIndex });
             log('onClick', 'setShow', false);
         }, id: context === null || context === void 0 ? void 0 : context.portalId, className: css({
             cursor: 'pointer',
             position: 'fixed',
             top: 0, right: 0, bottom: 0, left: 0,
             backgroundColor: theme.colors.backdrop,
-            zIndex: (context === null || context === void 0 ? void 0 : context.showing) ? theme.zIndexes.backdrop : -1,
+            zIndex,
             visibility: (context === null || context === void 0 ? void 0 : context.showing) ? 'visible' : 'hidden',
             opacity: (context === null || context === void 0 ? void 0 : context.showing) ? 1 : 0,
             transition: `opacity ${showTimeMs}ms ease-in-out`,
@@ -1582,7 +1608,7 @@ const useScrollbarSize = (recalc) => {
 
 const Modal = (p) => {
     var _a, _b, _c, _d;
-    const backdrop = useContext(BackdropContext);
+    const backdrop = useBackdropContext();
     const mouseDownElement = useRef(undefined);
     const theme = useThemeSafely();
     const hasHeader = p.closeButton || p.heading;
@@ -1623,13 +1649,14 @@ const Modal = (p) => {
             });
         }
     };
+    const zIndex = theme.zIndexes.modal;
     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');
+                backdrop.setShow(false, { key: (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', zIndex });
                 log('backdrop.setShow', false);
                 tryRemoveScrollStyles();
             }
@@ -1642,7 +1669,7 @@ const Modal = (p) => {
     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');
+        backdrop.setShow(show, { key: (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', zIndex });
         showing.current = show;
         log('backdrop.setShow', show);
         if (show) {
@@ -1670,7 +1697,7 @@ const Modal = (p) => {
     const modalBodyStyles = css({
         maxHeight: p.scrollable ? undefined : '99vh',
         overflow: 'hidden',
-        zIndex: theme.zIndexes.modal,
+        zIndex,
         cursor: 'default',
         margin: '1rem',
         backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
@@ -2722,7 +2749,7 @@ const Nav = (props) => {
     const theme = useThemeSafely();
     const navWidth = (_a = props.navWidth) !== null && _a !== void 0 ? _a : theme.layout.navWidth;
     const totalNavOffset = `calc(${navWidth} + 20px)`;
-    const backdrop = React.useContext(BackdropContext);
+    const backdrop = useBackdropContext();
     const log = useLogger(`Nav ${(_b = props.id) !== null && _b !== void 0 ? _b : '?'}`, (_c = props.__debug) !== null && _c !== void 0 ? _c : false);
     const slideMs = (_d = props.slideMs) !== null && _d !== void 0 ? _d : theme.timings.nav.slideMs;
     const slideRight = keyframes `
@@ -2749,6 +2776,7 @@ const Nav = (props) => {
     const classNavNotShowing = css `
 		animation: ${slideLeft} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 	`;
+    const zIndex = theme.zIndexes.nav;
     // the padding-top here is to offset the navs' content from the header.  the shadow creeps over it.
     const navStyles = css `
 		label: Nav;
@@ -2761,7 +2789,7 @@ const Nav = (props) => {
 		width: ${navWidth};
 		min-width: ${navWidth};
 		box-shadow: 4px 2px 12px 6px rgba(0, 0, 0, 0.2);
-		z-index: ${theme.zIndexes.nav};
+		z-index: ${zIndex};
 		overflow-y: auto;
 		.omniLink, .omniLink:active, .omniLink:focus, .omniLink:visited {
 			color: ${theme.colors.navFont};
@@ -2776,7 +2804,7 @@ const Nav = (props) => {
     useBooleanChanged((current, previous) => {
         var _a;
         log('show changed', `${previous !== null && previous !== void 0 ? previous : 'undefined'} > ${current}`);
-        backdrop.setShow(current, (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav');
+        backdrop.setShow(current, { key: (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav', zIndex });
     }, props.show);
     React.useLayoutEffect(() => {
         if (nav && nav.current) {

package/index.js

@@ -1276,15 +1276,18 @@ const useLogger = (componentName, enabled) => {
 const portalId = 'backdrop';
 const BackdropContext = React.createContext({
     showing: false,
-    showCount: 0,
     portalId: portalId,
+    children: [],
     setShow: () => {
         /* empty */
     }
 });
+function useBackdropContext() {
+    return React.useContext(BackdropContext);
+}
 const BackdropContextProvider = (p) => {
     var _a;
-    const [showCount, setShowCount] = React.useState(0);
+    const [modalChildren, setModalChildren] = React.useState([]);
     const log = useLogger('BackdropContextProvider', (_a = p.__debug) !== null && _a !== void 0 ? _a : false);
     if (p.__debug) {
         React.useEffect(() => {
@@ -1294,26 +1297,38 @@ const BackdropContextProvider = (p) => {
             };
         }, []);
         useIgnoreMount(() => {
-            log('showCount changed', showCount);
-        }, [showCount]);
+            log('showCount changed', modalChildren);
+        }, [modalChildren]);
     }
     return (React.createElement(BackdropContext.Provider, { value: {
             portalId: portalId,
-            showing: showCount > 0,
-            showCount: showCount,
+            showing: modalChildren.length > 0,
+            children: modalChildren.slice(),
             setShow: (show, from) => {
                 if (show) {
-                    setShowCount(s => {
-                        const count = s + 1;
-                        log(`setShow from ${from} ${s} -> ${count}`);
-                        return count;
+                    setModalChildren(previousChildren => {
+                        const newChildren = [...previousChildren, from];
+                        log(`setModalChildren TRUE from ${JSON.stringify(from)}.`);
+                        return newChildren;
                     });
                 }
                 else {
-                    setShowCount(s => {
-                        const count = Math.max(0, s - 1);
-                        log(`setShow from ${from} ${s} -> ${count}`);
-                        return count;
+                    setModalChildren(previousChildren => {
+                        let newChildren;
+                        if (from.key === backdropOverlayKey && !show) {
+                            if (previousChildren.length === 1) {
+                                newChildren = [];
+                            }
+                            else {
+                                newChildren = [...previousChildren];
+                                newChildren.pop();
+                            }
+                        }
+                        else {
+                            newChildren = previousChildren.filter(c => c.key !== from.key);
+                        }
+                        log(`setModalChildren FALSE from ${JSON.stringify(from)}.`);
+                        return newChildren;
                     });
                 }
             }
@@ -1328,9 +1343,10 @@ const BackdropContextProvider = (p) => {
                 margin: 0,
                 zIndex: 9999
             })) },
-            "Backdrop showCount: ",
-            showCount))));
+            "Backdrop children: ",
+            JSON.stringify(modalChildren, null, 4)))));
 };
+const backdropOverlayKey = 'BackdropOverlay';
 const BackdropOverlay = (p) => {
     var _a, _b;
     const context = React.useContext(BackdropContext);
@@ -1348,15 +1364,25 @@ const BackdropOverlay = (p) => {
             log('context.showing changed', context.showing);
         }, [context.showing]);
     }
+    let zIndex = -1;
+    if (context.showing) {
+        zIndex = theme.zIndexes.backdrop;
+        context.children.forEach(child => {
+            if (child.zIndex > zIndex) {
+                // -1 so it's always directly below the child
+                zIndex = child.zIndex - 1;
+            }
+        });
+    }
     return (React.createElement("div", { onClick: () => {
-            context === null || context === void 0 ? void 0 : context.setShow(false, 'BackdropOverlay');
+            context === null || context === void 0 ? void 0 : context.setShow(false, { key: backdropOverlayKey, zIndex });
             log('onClick', 'setShow', false);
         }, id: context === null || context === void 0 ? void 0 : context.portalId, className: css.css({
             cursor: 'pointer',
             position: 'fixed',
             top: 0, right: 0, bottom: 0, left: 0,
             backgroundColor: theme.colors.backdrop,
-            zIndex: (context === null || context === void 0 ? void 0 : context.showing) ? theme.zIndexes.backdrop : -1,
+            zIndex,
             visibility: (context === null || context === void 0 ? void 0 : context.showing) ? 'visible' : 'hidden',
             opacity: (context === null || context === void 0 ? void 0 : context.showing) ? 1 : 0,
             transition: `opacity ${showTimeMs}ms ease-in-out`,
@@ -1600,7 +1626,7 @@ const useScrollbarSize = (recalc) => {
 
 const Modal = (p) => {
     var _a, _b, _c, _d;
-    const backdrop = React.useContext(BackdropContext);
+    const backdrop = useBackdropContext();
     const mouseDownElement = React.useRef(undefined);
     const theme = useThemeSafely();
     const hasHeader = p.closeButton || p.heading;
@@ -1641,13 +1667,14 @@ const Modal = (p) => {
             });
         }
     };
+    const zIndex = theme.zIndexes.modal;
     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');
+                backdrop.setShow(false, { key: (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', zIndex });
                 log('backdrop.setShow', false);
                 tryRemoveScrollStyles();
             }
@@ -1660,7 +1687,7 @@ const Modal = (p) => {
     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');
+        backdrop.setShow(show, { key: (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', zIndex });
         showing.current = show;
         log('backdrop.setShow', show);
         if (show) {
@@ -1688,7 +1715,7 @@ const Modal = (p) => {
     const modalBodyStyles = css.css({
         maxHeight: p.scrollable ? undefined : '99vh',
         overflow: 'hidden',
-        zIndex: theme.zIndexes.modal,
+        zIndex,
         cursor: 'default',
         margin: '1rem',
         backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
@@ -2740,7 +2767,7 @@ const Nav = (props) => {
     const theme = useThemeSafely();
     const navWidth = (_a = props.navWidth) !== null && _a !== void 0 ? _a : theme.layout.navWidth;
     const totalNavOffset = `calc(${navWidth} + 20px)`;
-    const backdrop = React__namespace.useContext(BackdropContext);
+    const backdrop = useBackdropContext();
     const log = useLogger(`Nav ${(_b = props.id) !== null && _b !== void 0 ? _b : '?'}`, (_c = props.__debug) !== null && _c !== void 0 ? _c : false);
     const slideMs = (_d = props.slideMs) !== null && _d !== void 0 ? _d : theme.timings.nav.slideMs;
     const slideRight = css.keyframes `
@@ -2767,6 +2794,7 @@ const Nav = (props) => {
     const classNavNotShowing = css.css `
 		animation: ${slideLeft} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 	`;
+    const zIndex = theme.zIndexes.nav;
     // the padding-top here is to offset the navs' content from the header.  the shadow creeps over it.
     const navStyles = css.css `
 		label: Nav;
@@ -2779,7 +2807,7 @@ const Nav = (props) => {
 		width: ${navWidth};
 		min-width: ${navWidth};
 		box-shadow: 4px 2px 12px 6px rgba(0, 0, 0, 0.2);
-		z-index: ${theme.zIndexes.nav};
+		z-index: ${zIndex};
 		overflow-y: auto;
 		.omniLink, .omniLink:active, .omniLink:focus, .omniLink:visited {
 			color: ${theme.colors.navFont};
@@ -2794,7 +2822,7 @@ const Nav = (props) => {
     useBooleanChanged((current, previous) => {
         var _a;
         log('show changed', `${previous !== null && previous !== void 0 ? previous : 'undefined'} > ${current}`);
-        backdrop.setShow(current, (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav');
+        backdrop.setShow(current, { key: (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav', zIndex });
     }, props.show);
     React__namespace.useLayoutEffect(() => {
         if (nav && nav.current) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "10.2.1",
+    "version": "10.2.2",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",