@mackin.com/styleguide 11.0.0 → 11.0.2

package/index.d.ts

@@ -4,6 +4,8 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 
 type HeaderVariant = 'label' | 'link' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
 interface AccordianProps {
+    /** Required for ARIA. */
+    id: string;
     header: JSX.Element | string;
     children: React.ReactNode;
     variant?: HeaderVariant;
@@ -149,6 +151,7 @@ interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttr
 declare const Checkbox: (props: CheckboxProps) => React.JSX.Element;
 
 interface ConfirmModalProps {
+    id: string;
     show: boolean;
     text: string;
     header: string;
@@ -158,7 +161,6 @@ interface ConfirmModalProps {
     cancelText?: string;
     className?: string;
     variant?: 'omg';
-    id?: string;
     __debug?: boolean;
 }
 declare const ConfirmModal: (props: ConfirmModalProps) => React.JSX.Element;
@@ -174,9 +176,9 @@ declare const Divider: (p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHREl
 declare const ErrorModal: (props: {
     message: string;
     show: boolean;
-    id?: string;
+    id: string;
     __debug?: boolean;
-    close: () => void;
+    onClose: () => void;
 }) => React.JSX.Element;
 
 interface FileUploaderProps {
@@ -291,18 +293,18 @@ interface InfoTipProps {
     bgColor?: string;
     /** Defaults to nav font color. */
     fontColor?: string;
-    /** For variant=modal only. */
-    modalHeader?: string;
-    /** For variant=modal only. */
-    modalId?: string;
-    /** For variant=modal only. */
-    __modalDebug?: boolean;
+    /** For variant=modal only. The InfoTip will not render if `variant=modal` and this is missing. */
+    modalProps?: {
+        heading: string;
+        id: string;
+        __debug?: boolean;
+    };
     /** Whether to move the popover on collision with the parent's bounds.  Default is false.  For variant=info only. */
     reposition?: boolean;
     /** Order of positions as the Popover colides with the window edge.  The default order is ['right', 'top', 'left', 'bottom'].  For variant=info only. */
     positions?: ("bottom" | "left" | "right" | "top")[] | undefined;
 }
-declare const InfoTip: (props: InfoTipProps) => React.JSX.Element;
+declare const InfoTip: (props: InfoTipProps) => React.JSX.Element | null;
 
 interface BaseInputProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     rightControl?: JSX.Element;
@@ -401,30 +403,34 @@ interface ListItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<H
 declare const ListItem: (props: ListItemProps) => React.JSX.Element;
 
 interface ModalProps {
+    /** Required for various ARIA support choices. */
+    id: string;
     show: boolean;
     children: React__default.ReactNode;
+    heading: string;
     /** Defaults to theme.breakpoints.tablet. */
     maxWidth?: string;
     minWidth?: string;
-    /** Will not apply a background color to the modal body. */
-    noBackground?: boolean;
-    closeButton?: boolean;
-    heading?: string;
     /** Use to override default heading styling. */
     headerClassName?: string;
-    /** Selector of the element to focus on initial show. */
+    /** Selector of the element to focus on initial show. Will default to the close button. */
     focusSelector?: string;
     scrollable?: boolean;
-    id?: string;
     /** Applied to the modal body. */
     className?: string;
     __debug?: boolean;
-    onClick?: () => void;
+    /** Only used for the `WaitingIndicator`. This will break accessiblity so do not use. */
+    __noHeader?: boolean;
+    onClose: () => void;
 }
 declare const Modal: (p: ModalProps) => React__default.ReactPortal | null;
 
 declare const Nav: (props: {
     show: boolean;
+    /** Required for ARIA. The element to focus when first opened. */
+    focusSelector: string;
+    /** Required for ARIA. Description of the `Nav` purpose. */
+    ariaLabel: string;
     toggle: (show: boolean) => void;
     id?: string;
     children?: React.ReactNode;
@@ -950,6 +956,7 @@ declare const TabLocker: (props: {
     disabled?: boolean;
     children?: React.ReactNode;
     style?: React.CSSProperties;
+    className?: string;
 }) => React.JSX.Element;
 
 type SupportedTags = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'span' | 'div';
@@ -975,11 +982,13 @@ interface TextProps {
     /** Will remove all margin/padding from specified tag */
     noPad?: boolean;
     leftPad?: string;
+    id?: string;
 }
 /** Wraps common needs for displaying text.  Use for all text-containing elements to save on duplicated styling.  */
 declare const Text: (props: TextProps) => React.DetailedReactHTMLElement<{
     style: React.CSSProperties;
     className: string;
+    id: string | undefined;
 }, HTMLElement>;
 
 type BaseProps = Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'value'> & InputOnFocusProps;

package/index.esm.js

@@ -288,11 +288,11 @@ const Text = (props) => {
     });
     return React.createElement(tagChoice, {
         style: style,
-        className: cx('text', styles, props.className)
+        className: cx('text', styles, props.className),
+        id: props.id
     }, props.children);
 };
 
-//TB: FUTURE de-dup these styles.  create individual styles and compose them manually.
 const Button = React.forwardRef((props, ref) => {
     var _a;
     const { variant, round, rightIcon, leftIcon, iconBlock, small, readOnly, waiting, enforceMinWidth, controlAlign } = props, nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
@@ -551,26 +551,33 @@ const Accordian = (props) => {
         }
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
-    return (React.createElement("div", { className: "accordian", "aria-expanded": open },
-        React.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: cx(css({
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                height: 'auto',
-                minHeight: theme.controls.height,
-                width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
-            }, props.className)), onClick: e => {
-                e.stopPropagation();
-                if (props.onChange) {
-                    props.onChange(!open);
-                }
-                else {
-                    setOpen(!open);
-                }
-            }, rightIcon: !props.disabled ? React.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
-            React.createElement("span", null, props.header)),
+    const expandedPanelId = `${props.id}_expanded`;
+    return (React.createElement("div", { id: props.id, className: "accordian" },
+        React.createElement("h3", { className: css({
+                // required for ARIA
+                margin: 0,
+                padding: 0,
+                fontSize: 'inherit'
+            }) },
+            React.createElement(Button, { "aria-controls": expandedPanelId, "aria-expanded": open, "aria-disabled": props.disabled, readOnly: props.disabled, variant: props.variant, className: cx(css({
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    height: 'auto',
+                    minHeight: theme.controls.height,
+                    width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
+                }, props.className)), onClick: e => {
+                    e.stopPropagation();
+                    if (props.onChange) {
+                        props.onChange(!open);
+                    }
+                    else {
+                        setOpen(!open);
+                    }
+                }, rightIcon: !props.disabled ? React.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
+                React.createElement("span", null, props.header))),
         React.createElement("div", { ref: content, className: cx('accordian__body', contentStyles) },
-            React.createElement("div", { className: expandedContentWrapperStyles }, children))));
+            React.createElement("div", { className: expandedContentWrapperStyles, id: expandedPanelId }, children))));
 };
 const useAccordianState = (count, openIndex) => {
     const [panels, setShowPanel] = React.useState(new Array(count).fill(false).map((b, i) => {
@@ -943,7 +950,7 @@ const ListItem = (props) => {
 
 const TabLocker = (props) => {
     const tabLocker = React.useRef(null);
-    return (React.createElement("div", { className: "tabLocker", style: props.style, ref: tabLocker, onKeyDown: e => {
+    return (React.createElement("div", { className: cx('tabLocker', props.className), style: props.style, ref: tabLocker, onKeyDown: e => {
             var _a, _b;
             if (props.disabled) {
                 return;
@@ -983,7 +990,7 @@ const defaultOnPickFocusMs = 100;
 const Autocomplete = (p) => {
     var _a;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
+    const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs", "ariaLabel"]);
     const theme = useThemeSafely();
     const element = React.useRef(null);
     const input = React.useRef(null);
@@ -1656,7 +1663,7 @@ const Modal = (p) => {
     const backdrop = useBackdropContext();
     const mouseDownElement = useRef(undefined);
     const theme = useThemeSafely();
-    const hasHeader = p.closeButton || p.heading;
+    const hasHeader = !p.__noHeader;
     const contentRef = React__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 = useRef(p.show);
@@ -1695,10 +1702,22 @@ const Modal = (p) => {
         }
     };
     const zIndex = theme.zIndexes.modal;
+    const { getText, language } = useLocalization();
+    const closeText = React__default.useMemo(() => {
+        return getText('Close');
+    }, [language]);
     useEffect(() => {
         log('mounted');
+        const escapeRemover = createBodyEscapeHandler(() => {
+            if (showing.current) {
+                p.onClose();
+            }
+        });
+        log('body escape handler created');
         return () => {
             var _a;
+            escapeRemover();
+            log('body escape handler removed');
             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, { key: (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', zIndex });
@@ -1745,9 +1764,9 @@ const Modal = (p) => {
         zIndex,
         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,
+        backgroundColor: !hasHeader ? undefined : theme.colors.modalBg,
+        border: !hasHeader ? undefined : theme.controls.border,
+        boxShadow: !hasHeader ? 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,
@@ -1774,26 +1793,30 @@ const Modal = (p) => {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            cursor: p.onClick ? 'pointer' : 'default'
+            cursor: 'pointer'
         }, p.scrollable && {
             overflowY: 'auto',
             overflowX: 'hidden',
             alignItems: 'flex-start'
         }]);
+    const ariaLabelId = `${p.id}_label`;
     if (p.show) {
         const backdropContainer = document.getElementById(backdrop.portalId);
         if (backdropContainer) {
-            return createPortal((React__default.createElement("div", { onClick: e => {
+            return createPortal((React__default.createElement("div", { id: p.id, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, onClick: e => {
                     e.stopPropagation();
                     if (!mouseDownElement.current) {
-                        if (p.onClick) {
-                            log('backdropContainer onClick');
-                            p.onClick();
-                        }
+                        log('backdropContainer onClick');
+                        p.onClose();
                     }
                     mouseDownElement.current = undefined;
+                }, onKeyDown: e => {
+                    if (e.code === 'Escape') {
+                        e.stopPropagation();
+                        p.onClose();
+                    }
                 }, className: cx('modalContainer', modalContainerStyles) },
-                React__default.createElement("div", { id: p.id, ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
+                React__default.createElement("div", { ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
                         mouseDownElement.current = e.target;
                         e.stopPropagation();
                     }, onMouseUp: () => {
@@ -1807,21 +1830,35 @@ const Modal = (p) => {
                     }, className: cx('modalBody', modalBodyStyles, p.className) },
                     React__default.createElement(TabLocker, null,
                         hasHeader && (React__default.createElement("header", { className: cx('modalHeader', modalHeaderStyles) },
-                            p.heading ? React__default.createElement(Text, { className: css({
+                            React__default.createElement(Text, { id: ariaLabelId, className: css({
                                     margin: 0,
                                     flexGrow: 1
-                                }), tag: "h1", bold: true }, p.heading) : React__default.createElement("span", null),
-                            p.closeButton && p.onClick ? React__default.createElement(Button, { className: cx('modalCloseButton', css({
+                                }), tag: "h1", bold: true }, p.heading),
+                            React__default.createElement(Button, { className: cx('modalCloseButton', css({
                                     color: theme.colors.headerFont,
                                     marginLeft: '1rem',
                                     backgroundColor: 'transparent'
-                                })), "aria-label": "Close", variant: "icon", onClick: p.onClick },
-                                React__default.createElement(Icon, { id: "close" })) : React__default.createElement("span", null))),
+                                })), "aria-label": closeText, variant: "icon", onClick: e => {
+                                    e.stopPropagation();
+                                    p.onClose();
+                                } },
+                                React__default.createElement(Icon, { id: "close" })))),
                         p.children)))), backdropContainer);
         }
     }
     return null;
 };
+function createBodyEscapeHandler(onEscape) {
+    const handler = (e) => {
+        if (e.code === 'Escape') {
+            onEscape();
+        }
+    };
+    document.addEventListener('keydown', handler);
+    return () => {
+        document.removeEventListener('keydown', handler);
+    };
+}
 
 const ConfirmModal = (props) => {
     const theme = useThemeSafely();
@@ -1839,7 +1876,7 @@ const ConfirmModal = (props) => {
         const cancelText = props.cancelText || getText('Cancel');
         return { confirmText, cancelText };
     }, [language, props.confirmText, props.cancelText]);
-    return (React.createElement(Modal, { id: props.id, __debug: props.__debug, className: cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
+    return (React.createElement(Modal, { id: props.id, __debug: props.__debug, className: cx('confirmModal', modalStyle, props.className), heading: props.header, show: props.show, onClose: props.onCancel },
         React.createElement("div", { className: css({ padding: '1rem' }) },
             React.createElement(Text, { align: "center" }, props.text),
             React.createElement("div", { className: css({ textAlign: 'center' }) },
@@ -1903,7 +1940,7 @@ const ErrorModal = (props) => {
 			color:  ${theme.colors.omgFont};
 		}
 	`;
-    return (React.createElement(Modal, { id: props.id, __debug: props.__debug, className: cx('errorModal', modalStyles), heading: heading, closeButton: true, show: props.show, onClick: props.close },
+    return (React.createElement(Modal, { id: props.id, __debug: props.__debug, className: cx('errorModal', modalStyles), heading: heading, show: props.show, onClose: props.onClose },
         React.createElement("div", { className: css({ padding: '1rem' }) },
             React.createElement(Text, { align: "center" }, message))));
 };
@@ -2375,6 +2412,10 @@ const InfoTip = (props) => {
     var _a, _b, _c;
     const [showTip, setShowTip] = React.useState(false);
     const theme = useThemeSafely();
+    if (props.variant === 'modal' && !props.modalProps) {
+        console.warn(`InfoTip with variant=modal requires modalProps.`);
+        return null;
+    }
     const bgColor = (_a = props.bgColor) !== null && _a !== void 0 ? _a : theme.colors.nav;
     const fontColor = (_b = props.fontColor) !== null && _b !== void 0 ? _b : theme.colors.navFont;
     const onClick = () => {
@@ -2431,12 +2472,12 @@ const InfoTip = (props) => {
 		display:inline-block;
 	`;
     const button = React.createElement(Button, { className: buttonStyles, disabled: props.disabled, variant: 'circle', tabIndex: props.tabIndex, onClick: onClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut }, "i");
-    if (props.variant === 'modal') {
+    if (props.variant === 'modal' && props.modalProps) {
         return (React.createElement(React.Fragment, null,
             button,
-            React.createElement(Modal, { id: props.modalId, __debug: props.__modalDebug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css({
+            React.createElement(Modal, { id: props.modalProps.id, __debug: props.modalProps.__debug, show: showTip, heading: props.modalProps.heading, onClose: closeTip, className: css({
                     whiteSpace: 'normal'
-                }), closeButton: true },
+                }) },
                 React.createElement("div", { className: css({ padding: '1rem' }) }, props.content))));
     }
     else {
@@ -2842,6 +2883,7 @@ const Nav = (props) => {
 		padding-top:0;
 	`;
     React.useEffect(() => {
+        console.log('useEffect');
         if (!backdrop.showing) {
             props.toggle(false);
         }
@@ -2852,10 +2894,16 @@ const Nav = (props) => {
         backdrop.setShow(current, { key: (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav', zIndex });
     }, props.show);
     React.useLayoutEffect(() => {
+        console.log('useLayoutEffect');
         if (nav && nav.current) {
             if (props.show) {
                 if (!nav.current.classList.contains(classNavShowing)) {
                     nav.current.classList.add(classNavShowing);
+                    setTimeout(() => {
+                        var _a;
+                        (_a = document.querySelector(props.focusSelector)) === null || _a === void 0 ? void 0 : _a.focus();
+                        console.log(props.focusSelector, document.querySelector(props.focusSelector), 'focused');
+                    }, slideMs + 1);
                 }
             }
             else {
@@ -2871,7 +2919,12 @@ const Nav = (props) => {
             }
         }
     });
-    return (React.createElement("nav", { ref: nav, className: cx('nav', navStyles, props.className) }, props.children));
+    return (React.createElement("nav", { role: "dialog", "aria-modal": "true", "aria-label": props.ariaLabel, ref: nav, className: cx('nav', navStyles, props.className), onKeyDown: e => {
+            if (e.code === 'Escape') {
+                props.toggle(false);
+            }
+        } },
+        React.createElement(TabLocker, { className: css({ height: '100%' }) }, props.children)));
 };
 
 const LinkContent = (props) => {
@@ -2892,7 +2945,6 @@ const LinkContent = (props) => {
             }) }, props.rightIcon)));
 };
 
-//TB: FUTURE de-dup these styles.  create individual styles and compose them manually.
 const generateLinkStyles = (props, theme) => {
     const disabled = props.disabled || props.waiting;
     let color = props.colorOverride;
@@ -4261,7 +4313,6 @@ const TextArea = React.forwardRef((props, ref) => {
         }
         else {
             if (reportValueOnError) {
-                //TB: temp, add a custom list of validators that will be run for all inputs if a pattern cannot be decided.
                 onValueChange(localValue);
             }
             else {
@@ -4426,7 +4477,7 @@ const TogglePasswordInput = React.forwardRef((props, ref) => {
 });
 
 const WaitingIndicator = (p) => {
-    var _a, _b;
+    var _a, _b, _c;
     const [show, setShow] = useState(p.show);
     const hideTimer = useRef(0);
     const lastShowStatus = useRef(false);
@@ -4478,7 +4529,10 @@ const WaitingIndicator = (p) => {
             }
         }
     }, [p.show]);
-    return (React__default.createElement(Modal, { id: p.id, __debug: p.__debug, className: "waitingIndicator", show: show, noBackground: true },
+    const id = (_c = p.id) !== null && _c !== void 0 ? _c : 'WaitingIndicator';
+    return (React__default.createElement(Modal, { id: id, __debug: p.__debug, __noHeader: true, heading: '', onClose: () => {
+            /* noop */
+        }, className: "waitingIndicator", show: show },
         React__default.createElement("div", { className: css({
                 color: 'white',
                 fontSize: '3rem',

package/index.js

@@ -306,11 +306,11 @@ const Text = (props) => {
     });
     return React__namespace.createElement(tagChoice, {
         style: style,
-        className: css.cx('text', styles, props.className)
+        className: css.cx('text', styles, props.className),
+        id: props.id
     }, props.children);
 };
 
-//TB: FUTURE de-dup these styles.  create individual styles and compose them manually.
 const Button = React__namespace.forwardRef((props, ref) => {
     var _a;
     const { variant, round, rightIcon, leftIcon, iconBlock, small, readOnly, waiting, enforceMinWidth, controlAlign } = props, nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
@@ -569,26 +569,33 @@ const Accordian = (props) => {
         }
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
-    return (React__namespace.createElement("div", { className: "accordian", "aria-expanded": open },
-        React__namespace.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: css.cx(css.css({
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                height: 'auto',
-                minHeight: theme.controls.height,
-                width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
-            }, props.className)), onClick: e => {
-                e.stopPropagation();
-                if (props.onChange) {
-                    props.onChange(!open);
-                }
-                else {
-                    setOpen(!open);
-                }
-            }, rightIcon: !props.disabled ? React__namespace.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
-            React__namespace.createElement("span", null, props.header)),
+    const expandedPanelId = `${props.id}_expanded`;
+    return (React__namespace.createElement("div", { id: props.id, className: "accordian" },
+        React__namespace.createElement("h3", { className: css.css({
+                // required for ARIA
+                margin: 0,
+                padding: 0,
+                fontSize: 'inherit'
+            }) },
+            React__namespace.createElement(Button, { "aria-controls": expandedPanelId, "aria-expanded": open, "aria-disabled": props.disabled, readOnly: props.disabled, variant: props.variant, className: css.cx(css.css({
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    height: 'auto',
+                    minHeight: theme.controls.height,
+                    width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
+                }, props.className)), onClick: e => {
+                    e.stopPropagation();
+                    if (props.onChange) {
+                        props.onChange(!open);
+                    }
+                    else {
+                        setOpen(!open);
+                    }
+                }, rightIcon: !props.disabled ? React__namespace.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
+                React__namespace.createElement("span", null, props.header))),
         React__namespace.createElement("div", { ref: content, className: css.cx('accordian__body', contentStyles) },
-            React__namespace.createElement("div", { className: expandedContentWrapperStyles }, children))));
+            React__namespace.createElement("div", { className: expandedContentWrapperStyles, id: expandedPanelId }, children))));
 };
 const useAccordianState = (count, openIndex) => {
     const [panels, setShowPanel] = React__namespace.useState(new Array(count).fill(false).map((b, i) => {
@@ -961,7 +968,7 @@ const ListItem = (props) => {
 
 const TabLocker = (props) => {
     const tabLocker = React__namespace.useRef(null);
-    return (React__namespace.createElement("div", { className: "tabLocker", style: props.style, ref: tabLocker, onKeyDown: e => {
+    return (React__namespace.createElement("div", { className: css.cx('tabLocker', props.className), style: props.style, ref: tabLocker, onKeyDown: e => {
             var _a, _b;
             if (props.disabled) {
                 return;
@@ -1001,7 +1008,7 @@ const defaultOnPickFocusMs = 100;
 const Autocomplete = (p) => {
     var _a;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
+    const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs", "ariaLabel"]);
     const theme = useThemeSafely();
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
@@ -1674,7 +1681,7 @@ const Modal = (p) => {
     const backdrop = useBackdropContext();
     const mouseDownElement = React.useRef(undefined);
     const theme = useThemeSafely();
-    const hasHeader = p.closeButton || p.heading;
+    const hasHeader = !p.__noHeader;
     const contentRef = React.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);
@@ -1713,10 +1720,22 @@ const Modal = (p) => {
         }
     };
     const zIndex = theme.zIndexes.modal;
+    const { getText, language } = useLocalization();
+    const closeText = React.useMemo(() => {
+        return getText('Close');
+    }, [language]);
     React.useEffect(() => {
         log('mounted');
+        const escapeRemover = createBodyEscapeHandler(() => {
+            if (showing.current) {
+                p.onClose();
+            }
+        });
+        log('body escape handler created');
         return () => {
             var _a;
+            escapeRemover();
+            log('body escape handler removed');
             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, { key: (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', zIndex });
@@ -1763,9 +1782,9 @@ const Modal = (p) => {
         zIndex,
         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,
+        backgroundColor: !hasHeader ? undefined : theme.colors.modalBg,
+        border: !hasHeader ? undefined : theme.controls.border,
+        boxShadow: !hasHeader ? 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,
@@ -1792,26 +1811,30 @@ const Modal = (p) => {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            cursor: p.onClick ? 'pointer' : 'default'
+            cursor: 'pointer'
         }, p.scrollable && {
             overflowY: 'auto',
             overflowX: 'hidden',
             alignItems: 'flex-start'
         }]);
+    const ariaLabelId = `${p.id}_label`;
     if (p.show) {
         const backdropContainer = document.getElementById(backdrop.portalId);
         if (backdropContainer) {
-            return reactDom.createPortal((React.createElement("div", { onClick: e => {
+            return reactDom.createPortal((React.createElement("div", { id: p.id, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, onClick: e => {
                     e.stopPropagation();
                     if (!mouseDownElement.current) {
-                        if (p.onClick) {
-                            log('backdropContainer onClick');
-                            p.onClick();
-                        }
+                        log('backdropContainer onClick');
+                        p.onClose();
                     }
                     mouseDownElement.current = undefined;
+                }, onKeyDown: e => {
+                    if (e.code === 'Escape') {
+                        e.stopPropagation();
+                        p.onClose();
+                    }
                 }, className: css.cx('modalContainer', modalContainerStyles) },
-                React.createElement("div", { id: p.id, ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
+                React.createElement("div", { ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
                         mouseDownElement.current = e.target;
                         e.stopPropagation();
                     }, onMouseUp: () => {
@@ -1825,21 +1848,35 @@ const Modal = (p) => {
                     }, className: css.cx('modalBody', modalBodyStyles, p.className) },
                     React.createElement(TabLocker, null,
                         hasHeader && (React.createElement("header", { className: css.cx('modalHeader', modalHeaderStyles) },
-                            p.heading ? React.createElement(Text, { className: css.css({
+                            React.createElement(Text, { id: ariaLabelId, className: css.css({
                                     margin: 0,
                                     flexGrow: 1
-                                }), tag: "h1", bold: true }, p.heading) : React.createElement("span", null),
-                            p.closeButton && p.onClick ? React.createElement(Button, { className: css.cx('modalCloseButton', css.css({
+                                }), tag: "h1", bold: true }, p.heading),
+                            React.createElement(Button, { className: css.cx('modalCloseButton', css.css({
                                     color: theme.colors.headerFont,
                                     marginLeft: '1rem',
                                     backgroundColor: 'transparent'
-                                })), "aria-label": "Close", variant: "icon", onClick: p.onClick },
-                                React.createElement(Icon, { id: "close" })) : React.createElement("span", null))),
+                                })), "aria-label": closeText, variant: "icon", onClick: e => {
+                                    e.stopPropagation();
+                                    p.onClose();
+                                } },
+                                React.createElement(Icon, { id: "close" })))),
                         p.children)))), backdropContainer);
         }
     }
     return null;
 };
+function createBodyEscapeHandler(onEscape) {
+    const handler = (e) => {
+        if (e.code === 'Escape') {
+            onEscape();
+        }
+    };
+    document.addEventListener('keydown', handler);
+    return () => {
+        document.removeEventListener('keydown', handler);
+    };
+}
 
 const ConfirmModal = (props) => {
     const theme = useThemeSafely();
@@ -1857,7 +1894,7 @@ const ConfirmModal = (props) => {
         const cancelText = props.cancelText || getText('Cancel');
         return { confirmText, cancelText };
     }, [language, props.confirmText, props.cancelText]);
-    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, show: props.show, onClose: 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' }) },
@@ -1921,7 +1958,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: heading, 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: heading, show: props.show, onClose: props.onClose },
         React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
             React__namespace.createElement(Text, { align: "center" }, message))));
 };
@@ -2393,6 +2430,10 @@ const InfoTip = (props) => {
     var _a, _b, _c;
     const [showTip, setShowTip] = React__namespace.useState(false);
     const theme = useThemeSafely();
+    if (props.variant === 'modal' && !props.modalProps) {
+        console.warn(`InfoTip with variant=modal requires modalProps.`);
+        return null;
+    }
     const bgColor = (_a = props.bgColor) !== null && _a !== void 0 ? _a : theme.colors.nav;
     const fontColor = (_b = props.fontColor) !== null && _b !== void 0 ? _b : theme.colors.navFont;
     const onClick = () => {
@@ -2449,12 +2490,12 @@ const InfoTip = (props) => {
 		display:inline-block;
 	`;
     const button = React__namespace.createElement(Button, { className: buttonStyles, disabled: props.disabled, variant: 'circle', tabIndex: props.tabIndex, onClick: onClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut }, "i");
-    if (props.variant === 'modal') {
+    if (props.variant === 'modal' && props.modalProps) {
         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.modalProps.id, __debug: props.modalProps.__debug, show: showTip, heading: props.modalProps.heading, onClose: closeTip, className: css.css({
                     whiteSpace: 'normal'
-                }), closeButton: true },
+                }) },
                 React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) }, props.content))));
     }
     else {
@@ -2860,6 +2901,7 @@ const Nav = (props) => {
 		padding-top:0;
 	`;
     React__namespace.useEffect(() => {
+        console.log('useEffect');
         if (!backdrop.showing) {
             props.toggle(false);
         }
@@ -2870,10 +2912,16 @@ const Nav = (props) => {
         backdrop.setShow(current, { key: (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav', zIndex });
     }, props.show);
     React__namespace.useLayoutEffect(() => {
+        console.log('useLayoutEffect');
         if (nav && nav.current) {
             if (props.show) {
                 if (!nav.current.classList.contains(classNavShowing)) {
                     nav.current.classList.add(classNavShowing);
+                    setTimeout(() => {
+                        var _a;
+                        (_a = document.querySelector(props.focusSelector)) === null || _a === void 0 ? void 0 : _a.focus();
+                        console.log(props.focusSelector, document.querySelector(props.focusSelector), 'focused');
+                    }, slideMs + 1);
                 }
             }
             else {
@@ -2889,7 +2937,12 @@ const Nav = (props) => {
             }
         }
     });
-    return (React__namespace.createElement("nav", { ref: nav, className: css.cx('nav', navStyles, props.className) }, props.children));
+    return (React__namespace.createElement("nav", { role: "dialog", "aria-modal": "true", "aria-label": props.ariaLabel, ref: nav, className: css.cx('nav', navStyles, props.className), onKeyDown: e => {
+            if (e.code === 'Escape') {
+                props.toggle(false);
+            }
+        } },
+        React__namespace.createElement(TabLocker, { className: css.css({ height: '100%' }) }, props.children)));
 };
 
 const LinkContent = (props) => {
@@ -2910,7 +2963,6 @@ const LinkContent = (props) => {
             }) }, props.rightIcon)));
 };
 
-//TB: FUTURE de-dup these styles.  create individual styles and compose them manually.
 const generateLinkStyles = (props, theme) => {
     const disabled = props.disabled || props.waiting;
     let color = props.colorOverride;
@@ -4279,7 +4331,6 @@ const TextArea = React__namespace.forwardRef((props, ref) => {
         }
         else {
             if (reportValueOnError) {
-                //TB: temp, add a custom list of validators that will be run for all inputs if a pattern cannot be decided.
                 onValueChange(localValue);
             }
             else {
@@ -4444,7 +4495,7 @@ const TogglePasswordInput = React__namespace.forwardRef((props, ref) => {
 });
 
 const WaitingIndicator = (p) => {
-    var _a, _b;
+    var _a, _b, _c;
     const [show, setShow] = React.useState(p.show);
     const hideTimer = React.useRef(0);
     const lastShowStatus = React.useRef(false);
@@ -4496,7 +4547,10 @@ const WaitingIndicator = (p) => {
             }
         }
     }, [p.show]);
-    return (React.createElement(Modal, { id: p.id, __debug: p.__debug, className: "waitingIndicator", show: show, noBackground: true },
+    const id = (_c = p.id) !== null && _c !== void 0 ? _c : 'WaitingIndicator';
+    return (React.createElement(Modal, { id: id, __debug: p.__debug, __noHeader: true, heading: '', onClose: () => {
+            /* noop */
+        }, className: "waitingIndicator", show: show },
         React.createElement("div", { className: css.css({
                 color: 'white',
                 fontSize: '3rem',

package/package.json

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