@mackin.com/styleguide 11.0.2 → 11.0.4

package/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
@@ -280,31 +281,34 @@ declare const InfoPanel: (props: {
     tag?: InfoPanelTag;
 }) => React.JSX.Element;
 
+type InfoTipDefaultProps = {
+    type: 'Info';
+};
+type InfoTipModalProps = {
+    type: 'Modal';
+    heading: string;
+    __debug?: boolean;
+};
 interface InfoTipProps {
+    /** Required for ARIA wireup. */
+    id: string;
+    variant: InfoTipDefaultProps | InfoTipModalProps;
     content?: string | JSX.Element;
     disabled?: boolean;
     onClick?: () => void;
     tabIndex?: number;
     loadOnHover?: () => Promise<void>;
     onClose?: () => void;
-    /** Defaults to 'info'. */
-    variant?: 'info' | 'modal';
     /** Defaults to nav color. */
     bgColor?: string;
     /** Defaults to nav font color. */
     fontColor?: string;
-    /** 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 | null;
+declare const InfoTip: (props: InfoTipProps) => React.JSX.Element;
 
 interface BaseInputProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     rightControl?: JSX.Element;
@@ -413,14 +417,16 @@ interface ModalProps {
     minWidth?: string;
     /** Use to override default heading styling. */
     headerClassName?: string;
-    /** Selector of the element to focus on initial show. Will default to the close button. */
-    focusSelector?: string;
+    /** The DOM ID of the element to focus on initial show. Will default to the close button. */
+    focusContentId?: string;
     scrollable?: boolean;
     /** Applied to the modal body. */
     className?: string;
+    /** Applied to the close button. */
+    closeButtonClassName?: string;
     __debug?: boolean;
     /** Only used for the `WaitingIndicator`. This will break accessiblity so do not use. */
-    __noHeader?: boolean;
+    __asWaitingIndicator?: boolean;
     onClose: () => void;
 }
 declare const Modal: (p: ModalProps) => React__default.ReactPortal | null;
@@ -428,7 +434,7 @@ 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;
+    focusContentId: string;
     /** Required for ARIA. Description of the `Nav` purpose. */
     ariaLabel: string;
     toggle: (show: boolean) => void;
@@ -654,16 +660,18 @@ interface PickerProps<T extends PickerValue> extends SelectProps {
 }
 declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => React.JSX.Element;
 
-interface PopoverProps {
+type PopoverPosition = "bottom" | "left" | "right" | "top";
+
+type BasePopoverProps = {
     isOpen: boolean;
     /** The content inside the popover. */
     content: JSX.Element;
     /** The element controlling the state of the popover. */
     parent: JSX.Element;
-    id?: string;
+    /** Will be called when the user pressed the `Escape` key or clicks outside of the popover. */
+    onClose: () => void;
     /** Whether to move the popover on collision with the parent's bounds.  Default is true. */
     reposition?: boolean;
-    onClickOutside?: (e: MouseEvent) => void;
     /** Popover arrow color.  Defaults to theme.colors.border. */
     arrorColor?: string;
     /** Popover border.  Defaults to theme.controls.border. */
@@ -671,11 +679,32 @@ interface PopoverProps {
     /** Popover background.  Defaults to  theme.colors.bg. */
     backgroundColor?: string;
     /** Order of positions as the Popover colides with the window edge.  The default order is ['right', 'top', 'left', 'bottom']. */
-    positions?: ("bottom" | "left" | "right" | "top")[] | undefined;
+    positions?: PopoverPosition[] | undefined;
     /** Targets the wrapper around `parent`.  Use if you're having positioning issues when the tooltip is showing. */
     parentWrapperClassName?: string;
-}
-declare const Popover: (p: PopoverProps) => React.JSX.Element;
+};
+
+type DialogPopoverProps = BasePopoverProps & {
+    /** The DOM ID of the parent element to return focus to after the popup closes. */
+    focusParentId: string;
+    /** The DOM ID of the element to focus when the popover opens.  If there are no focusable elements, you'll need to
+     * add `tabindex="-1"` to something in `content` to comply with ARIA guidelines for dialogs.
+     */
+    focusContentId: string;
+    /** For screen readers to read on show. */
+    ariaLabel: string;
+    /** DO NOT USE.  Here only for legacy component support. */
+    __asDateInputCalendar?: boolean;
+};
+/** Use this popover for modal dialogs that stay up until dismissed by the user.  Never use this for informational tooltips - use TooltipPopover for that instead. */
+declare const DialogPopover: (p: DialogPopoverProps) => React.JSX.Element;
+
+type TooltipPopoverProps = BasePopoverProps & {
+    /** Required for ARIA linking between elements. */
+    id: string;
+};
+/** Use this popover for tooltips that are shown and dimissed on hover.  Never use this for modal tooltips - use DialogPopover for that instead. */
+declare const TooltipPopover: (p: TooltipPopoverProps) => React.JSX.Element;
 
 interface ProgressBarProps {
     /** The value in whole pct - 55 NOT 0.55. */
@@ -886,8 +915,12 @@ interface TabHeaderTabProps {
     title?: string;
 }
 interface TabHeaderProps {
+    /** Required for generating element IDs for ARIA. */
+    id: string;
     tabs: TabHeaderTabProps[];
-    id?: string;
+    ariaLabel: string;
+    /** The ID of the content panel with `role=tabpanel` this header is associated with. */
+    ariaControlsId: string;
     /** Defaults to 10rem. */
     maxTabWidth?: string;
     /** Defaults to 'tab'. */
@@ -1110,13 +1143,15 @@ interface ThemeRendererProps extends MackinTheme {
 declare const ThemeRenderer: (p: ThemeRendererProps) => React.JSX.Element;
 
 interface TabContainerProps {
+    /** Required for generating element IDs for ARIA. */
+    id: string;
+    ariaLabel: string;
     tabs: {
         name: string | JSX.Element;
         /** The HTML title of the tab button.  Defaults to 'name' prop. */
         title?: string;
         getContent: () => JSX.Element;
     }[];
-    id?: string;
     /** Defaults to 10rem. */
     maxTabWidth?: string;
     /** Defaults to 'tab'. */
@@ -1189,4 +1224,15 @@ declare const LocalizationProvider: (p: {
     __debug?: boolean;
 }) => React__default.JSX.Element;
 
-export { Accordian, type AccordianProps, type Alignment, Autocomplete, AutocompleteController, AutocompleteEntityController, type AutocompleteProps, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, ConfirmModal, type ConfirmModalProps, CopyButton, DateInput, type DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, type FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, type ImageProps, InfoPanel, InfoTip, type InfoTipProps, ItemPager, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, LocalizationProvider, type MackinTheme, Modal, type ModalProps, Nav, NormalizeCss, NumberInput, type NumberInputProps, OmniLink, type OmniLinkProps, PagedResult, type PagedResultDto, Pager, type PagerProps, Picker, type PickerOption, type PickerProps, type PickerValue, Popover, ProgressBar, type ProgressBarProps, SearchBox, type SearchBoxProps, Slider, type SliderProps, type SliderValue, StyleGuideLanguage, TabContainer, type TabContainerProps, TabHeader, type TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+/** Allows for status notificaiton methods for screen readers.
+ * This hook does not have any dependencies, so it can be used in projects that don't important anything else from the style_guide. */
+declare function useAriaLiveRegion(): {
+    /**
+     * @param message - The text to be read by the screen reader.
+     * @param clearTimeoutMs - Milliseconds to wait before the message is cleared.  Defaults to `2000`..
+     */
+    notify: (message: string, clearTimoutMs?: number) => void;
+    clearNotification: () => void;
+};
+
+export { Accordian, type AccordianProps, type Alignment, Autocomplete, AutocompleteController, AutocompleteEntityController, type AutocompleteProps, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, ConfirmModal, type ConfirmModalProps, CopyButton, DateInput, type DateInputProps, DialogPopover, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, type FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, type ImageProps, InfoPanel, InfoTip, type InfoTipProps, ItemPager, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, LocalizationProvider, type MackinTheme, Modal, type ModalProps, Nav, NormalizeCss, NumberInput, type NumberInputProps, OmniLink, type OmniLinkProps, PagedResult, type PagedResultDto, Pager, type PagerProps, Picker, type PickerOption, type PickerProps, type PickerValue, ProgressBar, type ProgressBarProps, SearchBox, type SearchBoxProps, Slider, type SliderProps, type SliderValue, StyleGuideLanguage, TabContainer, type TabContainerProps, TabHeader, type TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, TogglePasswordInput, TooltipPopover, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useAriaLiveRegion, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.esm.js

@@ -8,7 +8,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { uniqueId, sumBy, orderBy, get } from 'lodash';
 import { format, getDaysInMonth, getDay, isSameMonth, isBefore, isAfter, isSameDay, endOfYear, addYears, endOfMonth, addMonths, startOfMonth, startOfYear, isExists } from 'date-fns';
 import { createPortal } from 'react-dom';
-import { Popover as Popover$1, ArrowContainer } from 'react-tiny-popover';
+import { Popover, ArrowContainer } from 'react-tiny-popover';
 import { Link as Link$1 } from 'react-router-dom';
 import ReactSlider from 'react-slider';
 
@@ -1580,7 +1580,7 @@ const Checkbox = (props) => {
 		`}
 	`;
     const iconStyles = css `
-		${!!label && `
+		${!!label && !hideLabel && `
 			margin-right: 0.5rem;
 		`}
 		${props.disabled && `
@@ -1608,6 +1608,18 @@ const Checkbox = (props) => {
             props.children)));
 };
 
+function createBodyEscapeHandler(onEscape) {
+    const handler = (e) => {
+        if (e.code === 'Escape') {
+            onEscape();
+        }
+    };
+    document.addEventListener('keydown', handler);
+    return () => {
+        document.removeEventListener('keydown', handler);
+    };
+}
+
 /** 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.
 */
@@ -1663,12 +1675,13 @@ const Modal = (p) => {
     const backdrop = useBackdropContext();
     const mouseDownElement = useRef(undefined);
     const theme = useThemeSafely();
-    const hasHeader = !p.__noHeader;
+    const hasHeader = !p.__asWaitingIndicator;
     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);
     const bodyStyles = useRef('');
     const fixedElementStyles = useRef('');
+    const closeButtonId = `${p.id}_closeButton`;
     const addScrollStyles = () => {
         var _a, _b, _c, _d;
         if (!bodyStyles.current) {
@@ -1748,13 +1761,12 @@ const Modal = (p) => {
     React__default.useLayoutEffect(() => {
         var _a;
         if (p.show === true) {
-            const focusSelector = (_a = p.focusSelector) !== null && _a !== void 0 ? _a : '.modalCloseButton';
+            const focusId = (_a = p.focusContentId) !== null && _a !== void 0 ? _a : closeButtonId;
             // 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);
+                const element = document.getElementById(focusId);
                 element === null || element === void 0 ? void 0 : element.focus();
-                log('set focus', focusSelector);
+                log('set focus', focusId);
             });
         }
     }, [p.show]);
@@ -1803,7 +1815,7 @@ const Modal = (p) => {
     if (p.show) {
         const backdropContainer = document.getElementById(backdrop.portalId);
         if (backdropContainer) {
-            return createPortal((React__default.createElement("div", { id: p.id, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, onClick: e => {
+            return createPortal((React__default.createElement("div", { id: p.id, "aria-hidden": p.__asWaitingIndicator, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, onClick: e => {
                     e.stopPropagation();
                     if (!mouseDownElement.current) {
                         log('backdropContainer onClick');
@@ -1834,11 +1846,11 @@ const Modal = (p) => {
                                     margin: 0,
                                     flexGrow: 1
                                 }), tag: "h1", bold: true }, p.heading),
-                            React__default.createElement(Button, { className: cx('modalCloseButton', css({
+                            React__default.createElement(Button, { id: closeButtonId, className: cx('modalCloseButton', css({
                                     color: theme.colors.headerFont,
                                     marginLeft: '1rem',
                                     backgroundColor: 'transparent'
-                                })), "aria-label": closeText, variant: "icon", onClick: e => {
+                                }), p.closeButtonClassName), "aria-label": closeText, variant: "icon", onClick: e => {
                                     e.stopPropagation();
                                     p.onClose();
                                 } },
@@ -1848,17 +1860,6 @@ const Modal = (p) => {
     }
     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();
@@ -2388,34 +2389,60 @@ const Image = React.forwardRef((p, ref) => {
         }), p.className) })));
 });
 
-const Popover = (p) => {
-    var _a, _b;
+function getPopoverContainerClass(theme) {
+    return css({
+        label: 'PopoverContainer',
+        zIndex: theme.zIndexes.tooltip
+    });
+}
+function getPopoverContentWrapperClass(theme, props) {
+    var _a, _b, _c;
+    return css({
+        label: 'PopoverContentWrapper',
+        border: (_a = props.border) !== null && _a !== void 0 ? _a : theme.controls.border,
+        borderRadius: (_b = props.border) !== null && _b !== void 0 ? _b : theme.controls.borderRadius,
+        boxShadow: theme.controls.boxShadow,
+        backgroundColor: (_c = props.backgroundColor) !== null && _c !== void 0 ? _c : theme.colors.bg,
+    });
+}
+function getPopoverArrowColor(theme, props) {
+    var _a;
+    return (_a = props.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border;
+}
+function getPopoverPositions(props) {
+    var _a;
+    return (_a = props.positions) !== null && _a !== void 0 ? _a : ['right', 'top', 'left', 'bottom'];
+}
+const popoverArrowSize = 10;
+
+/** Use this popover for tooltips that are shown and dimissed on hover.  Never use this for modal tooltips - use DialogPopover for that instead. */
+const TooltipPopover = (p) => {
+    var _a;
     const theme = useThemeSafely();
     const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
-    return (React.createElement(Popover$1, { containerClassName: css({
-            zIndex: theme.zIndexes.tooltip
-        }), reposition: resposition, isOpen: p.isOpen, positions: (_b = p.positions) !== null && _b !== void 0 ? _b : ['right', 'top', 'left', 'bottom'], onClickOutside: p.onClickOutside, content: ({ position, childRect, popoverRect }) => {
-            var _a, _b, _c, _d;
-            return (React.createElement(ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: (_a = p.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border, arrowSize: 10 },
-                React.createElement(TabLocker, null,
-                    React.createElement("div", { className: css({
-                            border: (_b = p.border) !== null && _b !== void 0 ? _b : theme.controls.border,
-                            borderRadius: (_c = p.border) !== null && _c !== void 0 ? _c : theme.controls.borderRadius,
-                            boxShadow: theme.controls.boxShadow,
-                            backgroundColor: (_d = p.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.bg,
-                        }) }, p.content))));
-        } },
-        React.createElement("span", { className: p.parentWrapperClassName }, p.parent)));
+    React.useEffect(() => {
+        const escapeRemover = createBodyEscapeHandler(() => {
+            if (p.isOpen) {
+                p.onClose();
+            }
+        });
+        return escapeRemover;
+    }, [p.isOpen]);
+    return (React.createElement(Popover, { containerClassName: getPopoverContainerClass(theme), reposition: resposition, isOpen: p.isOpen, positions: getPopoverPositions(p), onClickOutside: p.onClose, content: ({ position, childRect, popoverRect }) => (React.createElement(ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: getPopoverArrowColor(theme, p), arrowSize: popoverArrowSize },
+            React.createElement("div", { id: p.id, onKeyDown: e => {
+                    if (e.code === 'Escape') {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        p.onClose();
+                    }
+                }, role: 'tooltip', className: getPopoverContentWrapperClass(theme, p) }, p.content))) },
+        React.createElement("span", { "aria-describedby": p.id, className: p.parentWrapperClassName }, p.parent)));
 };
 
 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 = () => {
@@ -2427,7 +2454,7 @@ const InfoTip = (props) => {
         }
     };
     const onMouseOver = () => {
-        if (props.variant === 'modal') {
+        if (props.variant.type === 'Modal') {
             return;
         }
         if (props.loadOnHover) {
@@ -2442,7 +2469,7 @@ const InfoTip = (props) => {
         }
     };
     const onMouseOut = () => {
-        if (props.variant === 'modal') {
+        if (props.variant.type === 'Modal') {
             return;
         }
         closeTip();
@@ -2471,17 +2498,22 @@ const InfoTip = (props) => {
 		font-family: serif;
 		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' && props.modalProps) {
+    let onButtonBlur = props.variant.type === 'Info' ?
+        () => {
+            closeTip();
+        } :
+        undefined;
+    const button = (React.createElement(Button, { className: buttonStyles, disabled: props.disabled, variant: 'circle', tabIndex: props.tabIndex, onClick: onClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut, onBlur: onButtonBlur }, "i"));
+    if (props.variant.type === 'Modal') {
         return (React.createElement(React.Fragment, null,
             button,
-            React.createElement(Modal, { id: props.modalProps.id, __debug: props.modalProps.__debug, show: showTip, heading: props.modalProps.heading, onClose: closeTip, className: css({
+            React.createElement(Modal, { id: props.id, __debug: props.variant.__debug, show: showTip, heading: props.variant.heading, onClose: closeTip, className: css({
                     whiteSpace: 'normal'
                 }) },
                 React.createElement("div", { className: css({ padding: '1rem' }) }, props.content))));
     }
     else {
-        return (React.createElement(Popover, { positions: props.positions, reposition: (_c = props.reposition) !== null && _c !== void 0 ? _c : false, isOpen: showTip, onClickOutside: closeTip, arrorColor: bgColor, border: '', backgroundColor: bgColor, parent: button, content: (React.createElement("div", { className: css({
+        return (React.createElement(TooltipPopover, { id: props.id, positions: props.positions, reposition: (_c = props.reposition) !== null && _c !== void 0 ? _c : false, isOpen: showTip, onClose: closeTip, arrorColor: bgColor, border: '', backgroundColor: bgColor, parent: button, content: (React.createElement("div", { className: css({
                     padding: '0.5rem',
                     fontSize: '0.75rem',
                     maxWidth: '22rem'
@@ -2489,6 +2521,45 @@ const InfoTip = (props) => {
     }
 };
 
+/** Use this popover for modal dialogs that stay up until dismissed by the user.  Never use this for informational tooltips - use TooltipPopover for that instead. */
+const DialogPopover = (p) => {
+    var _a;
+    const theme = useThemeSafely();
+    const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
+    React.useEffect(() => {
+        if (!p.__asDateInputCalendar) {
+            if (p.isOpen) {
+                const content = document.getElementById(p.focusContentId);
+                if (content) {
+                    content.focus();
+                }
+            }
+            else {
+                const parent = document.getElementById(p.focusParentId);
+                if (parent) {
+                    parent.focus();
+                }
+            }
+        }
+        const escapeRemover = createBodyEscapeHandler(() => {
+            if (p.isOpen) {
+                p.onClose();
+            }
+        });
+        return escapeRemover;
+    }, [p.isOpen]);
+    return (React.createElement(Popover, { containerClassName: getPopoverContainerClass(theme), reposition: resposition, isOpen: p.isOpen, positions: getPopoverPositions(p), onClickOutside: p.onClose, content: ({ position, childRect, popoverRect }) => (React.createElement(ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: getPopoverArrowColor(theme, p), arrowSize: popoverArrowSize },
+            React.createElement(TabLocker, null,
+                React.createElement("div", { onKeyDown: e => {
+                        if (e.code === 'Escape') {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            p.onClose();
+                        }
+                    }, role: 'dialog', "aria-modal": true, "aria-label": p.ariaLabel, className: getPopoverContentWrapperClass(theme, p) }, p.content)))) },
+        React.createElement("span", { className: p.parentWrapperClassName }, p.parent)));
+};
+
 const dateRegex = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
 const datePattern = dateRegex.source;
 const invalidDateMessage = 'Invalid date.';
@@ -2618,9 +2689,16 @@ const DateInput = React.forwardRef((props, ref) => {
             }
             (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
         } })));
-    return (React.createElement(Popover, { reposition: reposition, isOpen: showCalendar, onClickOutside: () => {
+    return (React.createElement(DialogPopover, { ariaLabel: 'Calendar', 
+        // Focus is handled here so we're opting out of the popover behavior in the most hackish way.
+        // When there's time, remove the logic from here that now exists in the DialogPopover.
+        focusContentId: '', focusParentId: '', __asDateInputCalendar: true, onClose: () => {
             toggleCalendar(false);
-        }, parent: input, content: (React.createElement("div", { ref: popover, className: css({
+        }, 
+        // above two lines are required due to ARIA changes.
+        // we don't need to re-do this component since it already manages it's own focus in a very 
+        // complicated way
+        reposition: reposition, isOpen: showCalendar, parent: input, content: (React.createElement("div", { ref: popover, className: css({
                 paddingLeft: '1rem',
                 paddingRight: '1rem',
                 paddingBottom: '1rem'
@@ -2883,7 +2961,6 @@ const Nav = (props) => {
 		padding-top:0;
 	`;
     React.useEffect(() => {
-        console.log('useEffect');
         if (!backdrop.showing) {
             props.toggle(false);
         }
@@ -2894,15 +2971,13 @@ 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');
+                        (_a = document.getElementById(props.focusContentId)) === null || _a === void 0 ? void 0 : _a.focus();
                     }, slideMs + 1);
                 }
             }
@@ -4095,8 +4170,37 @@ const TabHeader = (p) => {
         borderBottom: theme.controls.border,
         paddingBottom: '1rem'
     });
+    function onTabSelect(index, tabId, focusAfter) {
+        const onChange = () => {
+            var _a;
+            setTabIndex(index);
+            (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
+            if (focusAfter) {
+                setTimeout(() => {
+                    var _a;
+                    (_a = document.getElementById(tabId)) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+            }
+        };
+        if (p.onBeforeTabChanged) {
+            setTabsChanging(true);
+            p.onBeforeTabChanged(index)
+                .then(() => {
+                onChange();
+            })
+                .catch(() => {
+                /* do nothing */
+            })
+                .finally(() => {
+                setTabsChanging(false);
+            });
+        }
+        else {
+            onChange();
+        }
+    }
     return (React.createElement("div", { className: "tabHeader" },
-        React.createElement("ul", { className: cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
+        React.createElement("ul", { role: 'tablist', "aria-label": p.ariaLabel, className: cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
             var _a, _b;
             const active = index === tabIndex;
             let tabStyles;
@@ -4140,28 +4244,31 @@ const TabHeader = (p) => {
             else {
                 buttonContent = tab.name;
             }
+            const tabId = getTabHeaderTabId(p.id, index);
             return (React.createElement("li", { key: index, className: cx(tabStyles, p.tabClassName) },
-                React.createElement(Button, { "aria-role": "tab", "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
-                        const onChange = () => {
-                            var _a;
-                            setTabIndex(index);
-                            (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
-                        };
-                        if (p.onBeforeTabChanged) {
-                            setTabsChanging(true);
-                            p.onBeforeTabChanged(index)
-                                .then(() => {
-                                onChange();
-                            })
-                                .catch(() => {
-                                /* do nothing */
-                            })
-                                .finally(() => {
-                                setTabsChanging(false);
-                            });
+                React.createElement(Button, { id: tabId, tabIndex: active ? 0 : -1, role: "tab", "aria-controls": p.ariaControlsId, "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
+                        onTabSelect(index, tabId, false);
+                    }, onKeyDown: e => {
+                        e.stopPropagation();
+                        let newIndex = index;
+                        if (e.code === 'ArrowLeft') {
+                            if (index === 0) {
+                                newIndex = p.tabs.length - 1;
+                            }
+                            else {
+                                newIndex = index - 1;
+                            }
                         }
-                        else {
-                            onChange();
+                        else if (e.code === 'ArrowRight') {
+                            if (index === p.tabs.length - 1) {
+                                newIndex = 0;
+                            }
+                            else {
+                                newIndex = index + 1;
+                            }
+                        }
+                        if (newIndex !== index) {
+                            onTabSelect(newIndex, getTabHeaderTabId(p.id, newIndex), true);
                         }
                     } }, buttonContent)));
         })),
@@ -4173,6 +4280,9 @@ const TabHeader = (p) => {
                 position: 'relative'
             }), p.tabHeaderDividerClassName) }))));
 };
+function getTabHeaderTabId(tabHeaderId, tabIndex) {
+    return `${tabHeaderId}_tab_${tabIndex}`;
+}
 
 const Table = (props) => {
     const theme = useThemeSafely();
@@ -4476,12 +4586,68 @@ const TogglePasswordInput = React.forwardRef((props, ref) => {
             React.createElement(Icon, { id: show ? 'show' : 'hide' }))) })));
 });
 
+let clearTimerId = undefined;
+/** Allows for status notificaiton methods for screen readers.
+ * This hook does not have any dependencies, so it can be used in projects that don't important anything else from the style_guide. */
+function useAriaLiveRegion() {
+    const id = 'MknAriaLiveRegion';
+    if (!document.getElementById(id)) {
+        const div = document.createElement('div');
+        div.id = id;
+        // different sources cannot decide if this is needed.
+        // "Can work for status messages, but aria-live="polite" + text is usually simpler and more reliable for loading."
+        div.role = 'status';
+        div.ariaLive = 'polite';
+        div.ariaAtomic = 'true';
+        div.style.position = 'absolute';
+        div.style.width = '1px';
+        div.style.height = '1px';
+        div.style.padding = '0px';
+        div.style.margin = '-1px';
+        div.style.overflow = 'hidden';
+        div.style.whiteSpace = 'nowrap';
+        document.body.prepend(div);
+    }
+    const clearNotification = () => {
+        if (clearTimerId) {
+            clearTimeout(clearTimerId);
+        }
+        const element = document.getElementById(id);
+        if (!element) {
+            return;
+        }
+        element.textContent = '';
+    };
+    return {
+        /**
+         * @param message - The text to be read by the screen reader.
+         * @param clearTimeoutMs - Milliseconds to wait before the message is cleared.  Defaults to `2000`..
+         */
+        notify: (message, clearTimoutMs) => {
+            if (clearTimerId) {
+                clearTimeout(clearTimerId);
+            }
+            const element = document.getElementById(id);
+            if (!element) {
+                return;
+            }
+            element.textContent = message;
+            clearTimerId = setTimeout(() => {
+                // this is considered a good practice.  if you leave text here, some screen readers will read it out randomly as you navigate around the page.
+                clearNotification();
+            }, clearTimoutMs !== null && clearTimoutMs !== void 0 ? clearTimoutMs : 2000);
+        },
+        clearNotification
+    };
+}
+
 const WaitingIndicator = (p) => {
     var _a, _b, _c;
     const [show, setShow] = useState(p.show);
     const hideTimer = useRef(0);
     const lastShowStatus = useRef(false);
     const log = useLogger(`WaitingIndicator ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    const { notify, clearNotification } = useAriaLiveRegion();
     if (p.__debug) {
         useEffect(() => {
             log('mounted');
@@ -4528,9 +4694,16 @@ const WaitingIndicator = (p) => {
                 log('ignoring show change due to hideTimer ticking');
             }
         }
+        if (p.show) {
+            // set to a very long time so the hiding of the waiting indicator clears it.
+            notify('Loading content.', 60000);
+        }
+        else {
+            clearNotification();
+        }
     }, [p.show]);
-    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: () => {
+    const id = (_c = p.id) !== null && _c !== void 0 ? _c : 'MknWaitingIndicator';
+    return (React__default.createElement(Modal, { id: id, __debug: p.__debug, __asWaitingIndicator: true, heading: '', onClose: () => {
             /* noop */
         }, className: "waitingIndicator", show: show },
         React__default.createElement("div", { className: css({
@@ -4942,15 +5115,17 @@ const TabContainer = (p) => {
     var _a;
     const [tabIndex, setTabIndex] = React.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
     const theme = useThemeSafely();
+    const tabPanelId = `${p.id}_tabpanel`;
+    const tabHeaderId = `${p.id}_TabHeader`;
     return (React.createElement("div", { className: css({
             label: 'TabContainer'
         }) },
-        React.createElement(TabHeader, { tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: newIndex => {
+        React.createElement(TabHeader, { id: tabHeaderId, ariaControlsId: tabPanelId, ariaLabel: p.ariaLabel, tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: (newIndex) => {
                 var _a;
                 setTabIndex(newIndex);
                 (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, newIndex);
             } }),
-        React.createElement("div", { className: cx(css({
+        React.createElement("div", { role: 'tabpanel', id: tabPanelId, "aria-labelledby": getTabHeaderTabId(tabHeaderId, tabIndex), className: cx(css({
                 label: 'TabContainerContent',
                 padding: '1rem',
                 borderLeft: theme.controls.border,
@@ -5114,5 +5289,5 @@ const LocalizationProvider = (p) => {
         } }, p.children));
 };
 
-export { Accordian, Autocomplete, AutocompleteController, AutocompleteEntityController, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, Calendar, Checkbox, ConfirmModal, CopyButton, DateInput, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, ItemPager, Label, Link, List, ListItem, LocalizationProvider, Modal, Nav, NormalizeCss, NumberInput, OmniLink, PagedResult, Pager, Picker, Popover, ProgressBar, SearchBox, Slider, StyleGuideLanguage, TabContainer, TabHeader, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextInput, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+export { Accordian, Autocomplete, AutocompleteController, AutocompleteEntityController, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, Calendar, Checkbox, ConfirmModal, CopyButton, DateInput, DialogPopover, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, ItemPager, Label, Link, List, ListItem, LocalizationProvider, Modal, Nav, NormalizeCss, NumberInput, OmniLink, PagedResult, Pager, Picker, ProgressBar, SearchBox, Slider, StyleGuideLanguage, TabContainer, TabHeader, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextInput, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, TogglePasswordInput, TooltipPopover, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useAriaLiveRegion, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
 //# sourceMappingURL=index.esm.js.map

package/index.js

@@ -1598,7 +1598,7 @@ const Checkbox = (props) => {
 		`}
 	`;
     const iconStyles = css.css `
-		${!!label && `
+		${!!label && !hideLabel && `
 			margin-right: 0.5rem;
 		`}
 		${props.disabled && `
@@ -1626,6 +1626,18 @@ const Checkbox = (props) => {
             props.children)));
 };
 
+function createBodyEscapeHandler(onEscape) {
+    const handler = (e) => {
+        if (e.code === 'Escape') {
+            onEscape();
+        }
+    };
+    document.addEventListener('keydown', handler);
+    return () => {
+        document.removeEventListener('keydown', handler);
+    };
+}
+
 /** 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.
 */
@@ -1681,12 +1693,13 @@ const Modal = (p) => {
     const backdrop = useBackdropContext();
     const mouseDownElement = React.useRef(undefined);
     const theme = useThemeSafely();
-    const hasHeader = !p.__noHeader;
+    const hasHeader = !p.__asWaitingIndicator;
     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);
     const bodyStyles = React.useRef('');
     const fixedElementStyles = React.useRef('');
+    const closeButtonId = `${p.id}_closeButton`;
     const addScrollStyles = () => {
         var _a, _b, _c, _d;
         if (!bodyStyles.current) {
@@ -1766,13 +1779,12 @@ const Modal = (p) => {
     React.useLayoutEffect(() => {
         var _a;
         if (p.show === true) {
-            const focusSelector = (_a = p.focusSelector) !== null && _a !== void 0 ? _a : '.modalCloseButton';
+            const focusId = (_a = p.focusContentId) !== null && _a !== void 0 ? _a : closeButtonId;
             // 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);
+                const element = document.getElementById(focusId);
                 element === null || element === void 0 ? void 0 : element.focus();
-                log('set focus', focusSelector);
+                log('set focus', focusId);
             });
         }
     }, [p.show]);
@@ -1821,7 +1833,7 @@ const Modal = (p) => {
     if (p.show) {
         const backdropContainer = document.getElementById(backdrop.portalId);
         if (backdropContainer) {
-            return reactDom.createPortal((React.createElement("div", { id: p.id, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, onClick: e => {
+            return reactDom.createPortal((React.createElement("div", { id: p.id, "aria-hidden": p.__asWaitingIndicator, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, onClick: e => {
                     e.stopPropagation();
                     if (!mouseDownElement.current) {
                         log('backdropContainer onClick');
@@ -1852,11 +1864,11 @@ const Modal = (p) => {
                                     margin: 0,
                                     flexGrow: 1
                                 }), tag: "h1", bold: true }, p.heading),
-                            React.createElement(Button, { className: css.cx('modalCloseButton', css.css({
+                            React.createElement(Button, { id: closeButtonId, className: css.cx('modalCloseButton', css.css({
                                     color: theme.colors.headerFont,
                                     marginLeft: '1rem',
                                     backgroundColor: 'transparent'
-                                })), "aria-label": closeText, variant: "icon", onClick: e => {
+                                }), p.closeButtonClassName), "aria-label": closeText, variant: "icon", onClick: e => {
                                     e.stopPropagation();
                                     p.onClose();
                                 } },
@@ -1866,17 +1878,6 @@ const Modal = (p) => {
     }
     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();
@@ -2406,34 +2407,60 @@ const Image = React__namespace.forwardRef((p, ref) => {
         }), p.className) })));
 });
 
-const Popover = (p) => {
-    var _a, _b;
+function getPopoverContainerClass(theme) {
+    return css.css({
+        label: 'PopoverContainer',
+        zIndex: theme.zIndexes.tooltip
+    });
+}
+function getPopoverContentWrapperClass(theme, props) {
+    var _a, _b, _c;
+    return css.css({
+        label: 'PopoverContentWrapper',
+        border: (_a = props.border) !== null && _a !== void 0 ? _a : theme.controls.border,
+        borderRadius: (_b = props.border) !== null && _b !== void 0 ? _b : theme.controls.borderRadius,
+        boxShadow: theme.controls.boxShadow,
+        backgroundColor: (_c = props.backgroundColor) !== null && _c !== void 0 ? _c : theme.colors.bg,
+    });
+}
+function getPopoverArrowColor(theme, props) {
+    var _a;
+    return (_a = props.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border;
+}
+function getPopoverPositions(props) {
+    var _a;
+    return (_a = props.positions) !== null && _a !== void 0 ? _a : ['right', 'top', 'left', 'bottom'];
+}
+const popoverArrowSize = 10;
+
+/** Use this popover for tooltips that are shown and dimissed on hover.  Never use this for modal tooltips - use DialogPopover for that instead. */
+const TooltipPopover = (p) => {
+    var _a;
     const theme = useThemeSafely();
     const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
-    return (React__namespace.createElement(reactTinyPopover.Popover, { containerClassName: css.css({
-            zIndex: theme.zIndexes.tooltip
-        }), reposition: resposition, isOpen: p.isOpen, positions: (_b = p.positions) !== null && _b !== void 0 ? _b : ['right', 'top', 'left', 'bottom'], onClickOutside: p.onClickOutside, content: ({ position, childRect, popoverRect }) => {
-            var _a, _b, _c, _d;
-            return (React__namespace.createElement(reactTinyPopover.ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: (_a = p.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border, arrowSize: 10 },
-                React__namespace.createElement(TabLocker, null,
-                    React__namespace.createElement("div", { className: css.css({
-                            border: (_b = p.border) !== null && _b !== void 0 ? _b : theme.controls.border,
-                            borderRadius: (_c = p.border) !== null && _c !== void 0 ? _c : theme.controls.borderRadius,
-                            boxShadow: theme.controls.boxShadow,
-                            backgroundColor: (_d = p.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.bg,
-                        }) }, p.content))));
-        } },
-        React__namespace.createElement("span", { className: p.parentWrapperClassName }, p.parent)));
+    React__namespace.useEffect(() => {
+        const escapeRemover = createBodyEscapeHandler(() => {
+            if (p.isOpen) {
+                p.onClose();
+            }
+        });
+        return escapeRemover;
+    }, [p.isOpen]);
+    return (React__namespace.createElement(reactTinyPopover.Popover, { containerClassName: getPopoverContainerClass(theme), reposition: resposition, isOpen: p.isOpen, positions: getPopoverPositions(p), onClickOutside: p.onClose, content: ({ position, childRect, popoverRect }) => (React__namespace.createElement(reactTinyPopover.ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: getPopoverArrowColor(theme, p), arrowSize: popoverArrowSize },
+            React__namespace.createElement("div", { id: p.id, onKeyDown: e => {
+                    if (e.code === 'Escape') {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        p.onClose();
+                    }
+                }, role: 'tooltip', className: getPopoverContentWrapperClass(theme, p) }, p.content))) },
+        React__namespace.createElement("span", { "aria-describedby": p.id, className: p.parentWrapperClassName }, p.parent)));
 };
 
 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 = () => {
@@ -2445,7 +2472,7 @@ const InfoTip = (props) => {
         }
     };
     const onMouseOver = () => {
-        if (props.variant === 'modal') {
+        if (props.variant.type === 'Modal') {
             return;
         }
         if (props.loadOnHover) {
@@ -2460,7 +2487,7 @@ const InfoTip = (props) => {
         }
     };
     const onMouseOut = () => {
-        if (props.variant === 'modal') {
+        if (props.variant.type === 'Modal') {
             return;
         }
         closeTip();
@@ -2489,17 +2516,22 @@ const InfoTip = (props) => {
 		font-family: serif;
 		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' && props.modalProps) {
+    let onButtonBlur = props.variant.type === 'Info' ?
+        () => {
+            closeTip();
+        } :
+        undefined;
+    const button = (React__namespace.createElement(Button, { className: buttonStyles, disabled: props.disabled, variant: 'circle', tabIndex: props.tabIndex, onClick: onClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut, onBlur: onButtonBlur }, "i"));
+    if (props.variant.type === 'Modal') {
         return (React__namespace.createElement(React__namespace.Fragment, null,
             button,
-            React__namespace.createElement(Modal, { id: props.modalProps.id, __debug: props.modalProps.__debug, show: showTip, heading: props.modalProps.heading, onClose: closeTip, className: css.css({
+            React__namespace.createElement(Modal, { id: props.id, __debug: props.variant.__debug, show: showTip, heading: props.variant.heading, onClose: closeTip, className: css.css({
                     whiteSpace: 'normal'
                 }) },
                 React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) }, props.content))));
     }
     else {
-        return (React__namespace.createElement(Popover, { positions: props.positions, reposition: (_c = props.reposition) !== null && _c !== void 0 ? _c : false, isOpen: showTip, onClickOutside: closeTip, arrorColor: bgColor, border: '', backgroundColor: bgColor, parent: button, content: (React__namespace.createElement("div", { className: css.css({
+        return (React__namespace.createElement(TooltipPopover, { id: props.id, positions: props.positions, reposition: (_c = props.reposition) !== null && _c !== void 0 ? _c : false, isOpen: showTip, onClose: closeTip, arrorColor: bgColor, border: '', backgroundColor: bgColor, parent: button, content: (React__namespace.createElement("div", { className: css.css({
                     padding: '0.5rem',
                     fontSize: '0.75rem',
                     maxWidth: '22rem'
@@ -2507,6 +2539,45 @@ const InfoTip = (props) => {
     }
 };
 
+/** Use this popover for modal dialogs that stay up until dismissed by the user.  Never use this for informational tooltips - use TooltipPopover for that instead. */
+const DialogPopover = (p) => {
+    var _a;
+    const theme = useThemeSafely();
+    const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
+    React__namespace.useEffect(() => {
+        if (!p.__asDateInputCalendar) {
+            if (p.isOpen) {
+                const content = document.getElementById(p.focusContentId);
+                if (content) {
+                    content.focus();
+                }
+            }
+            else {
+                const parent = document.getElementById(p.focusParentId);
+                if (parent) {
+                    parent.focus();
+                }
+            }
+        }
+        const escapeRemover = createBodyEscapeHandler(() => {
+            if (p.isOpen) {
+                p.onClose();
+            }
+        });
+        return escapeRemover;
+    }, [p.isOpen]);
+    return (React__namespace.createElement(reactTinyPopover.Popover, { containerClassName: getPopoverContainerClass(theme), reposition: resposition, isOpen: p.isOpen, positions: getPopoverPositions(p), onClickOutside: p.onClose, content: ({ position, childRect, popoverRect }) => (React__namespace.createElement(reactTinyPopover.ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: getPopoverArrowColor(theme, p), arrowSize: popoverArrowSize },
+            React__namespace.createElement(TabLocker, null,
+                React__namespace.createElement("div", { onKeyDown: e => {
+                        if (e.code === 'Escape') {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            p.onClose();
+                        }
+                    }, role: 'dialog', "aria-modal": true, "aria-label": p.ariaLabel, className: getPopoverContentWrapperClass(theme, p) }, p.content)))) },
+        React__namespace.createElement("span", { className: p.parentWrapperClassName }, p.parent)));
+};
+
 const dateRegex = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
 const datePattern = dateRegex.source;
 const invalidDateMessage = 'Invalid date.';
@@ -2636,9 +2707,16 @@ const DateInput = React__namespace.forwardRef((props, ref) => {
             }
             (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
         } })));
-    return (React__namespace.createElement(Popover, { reposition: reposition, isOpen: showCalendar, onClickOutside: () => {
+    return (React__namespace.createElement(DialogPopover, { ariaLabel: 'Calendar', 
+        // Focus is handled here so we're opting out of the popover behavior in the most hackish way.
+        // When there's time, remove the logic from here that now exists in the DialogPopover.
+        focusContentId: '', focusParentId: '', __asDateInputCalendar: true, onClose: () => {
             toggleCalendar(false);
-        }, parent: input, content: (React__namespace.createElement("div", { ref: popover, className: css.css({
+        }, 
+        // above two lines are required due to ARIA changes.
+        // we don't need to re-do this component since it already manages it's own focus in a very 
+        // complicated way
+        reposition: reposition, isOpen: showCalendar, parent: input, content: (React__namespace.createElement("div", { ref: popover, className: css.css({
                 paddingLeft: '1rem',
                 paddingRight: '1rem',
                 paddingBottom: '1rem'
@@ -2901,7 +2979,6 @@ const Nav = (props) => {
 		padding-top:0;
 	`;
     React__namespace.useEffect(() => {
-        console.log('useEffect');
         if (!backdrop.showing) {
             props.toggle(false);
         }
@@ -2912,15 +2989,13 @@ 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');
+                        (_a = document.getElementById(props.focusContentId)) === null || _a === void 0 ? void 0 : _a.focus();
                     }, slideMs + 1);
                 }
             }
@@ -4113,8 +4188,37 @@ const TabHeader = (p) => {
         borderBottom: theme.controls.border,
         paddingBottom: '1rem'
     });
+    function onTabSelect(index, tabId, focusAfter) {
+        const onChange = () => {
+            var _a;
+            setTabIndex(index);
+            (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
+            if (focusAfter) {
+                setTimeout(() => {
+                    var _a;
+                    (_a = document.getElementById(tabId)) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+            }
+        };
+        if (p.onBeforeTabChanged) {
+            setTabsChanging(true);
+            p.onBeforeTabChanged(index)
+                .then(() => {
+                onChange();
+            })
+                .catch(() => {
+                /* do nothing */
+            })
+                .finally(() => {
+                setTabsChanging(false);
+            });
+        }
+        else {
+            onChange();
+        }
+    }
     return (React__namespace.createElement("div", { className: "tabHeader" },
-        React__namespace.createElement("ul", { className: css.cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
+        React__namespace.createElement("ul", { role: 'tablist', "aria-label": p.ariaLabel, className: css.cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
             var _a, _b;
             const active = index === tabIndex;
             let tabStyles;
@@ -4158,28 +4262,31 @@ const TabHeader = (p) => {
             else {
                 buttonContent = tab.name;
             }
+            const tabId = getTabHeaderTabId(p.id, index);
             return (React__namespace.createElement("li", { key: index, className: css.cx(tabStyles, p.tabClassName) },
-                React__namespace.createElement(Button, { "aria-role": "tab", "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
-                        const onChange = () => {
-                            var _a;
-                            setTabIndex(index);
-                            (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
-                        };
-                        if (p.onBeforeTabChanged) {
-                            setTabsChanging(true);
-                            p.onBeforeTabChanged(index)
-                                .then(() => {
-                                onChange();
-                            })
-                                .catch(() => {
-                                /* do nothing */
-                            })
-                                .finally(() => {
-                                setTabsChanging(false);
-                            });
+                React__namespace.createElement(Button, { id: tabId, tabIndex: active ? 0 : -1, role: "tab", "aria-controls": p.ariaControlsId, "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
+                        onTabSelect(index, tabId, false);
+                    }, onKeyDown: e => {
+                        e.stopPropagation();
+                        let newIndex = index;
+                        if (e.code === 'ArrowLeft') {
+                            if (index === 0) {
+                                newIndex = p.tabs.length - 1;
+                            }
+                            else {
+                                newIndex = index - 1;
+                            }
                         }
-                        else {
-                            onChange();
+                        else if (e.code === 'ArrowRight') {
+                            if (index === p.tabs.length - 1) {
+                                newIndex = 0;
+                            }
+                            else {
+                                newIndex = index + 1;
+                            }
+                        }
+                        if (newIndex !== index) {
+                            onTabSelect(newIndex, getTabHeaderTabId(p.id, newIndex), true);
                         }
                     } }, buttonContent)));
         })),
@@ -4191,6 +4298,9 @@ const TabHeader = (p) => {
                 position: 'relative'
             }), p.tabHeaderDividerClassName) }))));
 };
+function getTabHeaderTabId(tabHeaderId, tabIndex) {
+    return `${tabHeaderId}_tab_${tabIndex}`;
+}
 
 const Table = (props) => {
     const theme = useThemeSafely();
@@ -4494,12 +4604,68 @@ const TogglePasswordInput = React__namespace.forwardRef((props, ref) => {
             React__namespace.createElement(Icon, { id: show ? 'show' : 'hide' }))) })));
 });
 
+let clearTimerId = undefined;
+/** Allows for status notificaiton methods for screen readers.
+ * This hook does not have any dependencies, so it can be used in projects that don't important anything else from the style_guide. */
+function useAriaLiveRegion() {
+    const id = 'MknAriaLiveRegion';
+    if (!document.getElementById(id)) {
+        const div = document.createElement('div');
+        div.id = id;
+        // different sources cannot decide if this is needed.
+        // "Can work for status messages, but aria-live="polite" + text is usually simpler and more reliable for loading."
+        div.role = 'status';
+        div.ariaLive = 'polite';
+        div.ariaAtomic = 'true';
+        div.style.position = 'absolute';
+        div.style.width = '1px';
+        div.style.height = '1px';
+        div.style.padding = '0px';
+        div.style.margin = '-1px';
+        div.style.overflow = 'hidden';
+        div.style.whiteSpace = 'nowrap';
+        document.body.prepend(div);
+    }
+    const clearNotification = () => {
+        if (clearTimerId) {
+            clearTimeout(clearTimerId);
+        }
+        const element = document.getElementById(id);
+        if (!element) {
+            return;
+        }
+        element.textContent = '';
+    };
+    return {
+        /**
+         * @param message - The text to be read by the screen reader.
+         * @param clearTimeoutMs - Milliseconds to wait before the message is cleared.  Defaults to `2000`..
+         */
+        notify: (message, clearTimoutMs) => {
+            if (clearTimerId) {
+                clearTimeout(clearTimerId);
+            }
+            const element = document.getElementById(id);
+            if (!element) {
+                return;
+            }
+            element.textContent = message;
+            clearTimerId = setTimeout(() => {
+                // this is considered a good practice.  if you leave text here, some screen readers will read it out randomly as you navigate around the page.
+                clearNotification();
+            }, clearTimoutMs !== null && clearTimoutMs !== void 0 ? clearTimoutMs : 2000);
+        },
+        clearNotification
+    };
+}
+
 const WaitingIndicator = (p) => {
     var _a, _b, _c;
     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);
+    const { notify, clearNotification } = useAriaLiveRegion();
     if (p.__debug) {
         React.useEffect(() => {
             log('mounted');
@@ -4546,9 +4712,16 @@ const WaitingIndicator = (p) => {
                 log('ignoring show change due to hideTimer ticking');
             }
         }
+        if (p.show) {
+            // set to a very long time so the hiding of the waiting indicator clears it.
+            notify('Loading content.', 60000);
+        }
+        else {
+            clearNotification();
+        }
     }, [p.show]);
-    const id = (_c = p.id) !== null && _c !== void 0 ? _c : 'WaitingIndicator';
-    return (React.createElement(Modal, { id: id, __debug: p.__debug, __noHeader: true, heading: '', onClose: () => {
+    const id = (_c = p.id) !== null && _c !== void 0 ? _c : 'MknWaitingIndicator';
+    return (React.createElement(Modal, { id: id, __debug: p.__debug, __asWaitingIndicator: true, heading: '', onClose: () => {
             /* noop */
         }, className: "waitingIndicator", show: show },
         React.createElement("div", { className: css.css({
@@ -4960,15 +5133,17 @@ const TabContainer = (p) => {
     var _a;
     const [tabIndex, setTabIndex] = React__namespace.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
     const theme = useThemeSafely();
+    const tabPanelId = `${p.id}_tabpanel`;
+    const tabHeaderId = `${p.id}_TabHeader`;
     return (React__namespace.createElement("div", { className: css.css({
             label: 'TabContainer'
         }) },
-        React__namespace.createElement(TabHeader, { tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: newIndex => {
+        React__namespace.createElement(TabHeader, { id: tabHeaderId, ariaControlsId: tabPanelId, ariaLabel: p.ariaLabel, tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: (newIndex) => {
                 var _a;
                 setTabIndex(newIndex);
                 (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, newIndex);
             } }),
-        React__namespace.createElement("div", { className: css.cx(css.css({
+        React__namespace.createElement("div", { role: 'tabpanel', id: tabPanelId, "aria-labelledby": getTabHeaderTabId(tabHeaderId, tabIndex), className: css.cx(css.css({
                 label: 'TabContainerContent',
                 padding: '1rem',
                 borderLeft: theme.controls.border,
@@ -5146,6 +5321,7 @@ exports.Checkbox = Checkbox;
 exports.ConfirmModal = ConfirmModal;
 exports.CopyButton = CopyButton;
 exports.DateInput = DateInput;
+exports.DialogPopover = DialogPopover;
 exports.Divider = Divider;
 exports.ErrorModal = ErrorModal;
 exports.FileUploader = FileUploader;
@@ -5174,7 +5350,6 @@ exports.OmniLink = OmniLink;
 exports.PagedResult = PagedResult;
 exports.Pager = Pager;
 exports.Picker = Picker;
-exports.Popover = Popover;
 exports.ProgressBar = ProgressBar;
 exports.SearchBox = SearchBox;
 exports.Slider = Slider;
@@ -5195,6 +5370,7 @@ exports.ThemeRenderer = ThemeRenderer;
 exports.ToggleButton = ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.TogglePasswordInput = TogglePasswordInput;
+exports.TooltipPopover = TooltipPopover;
 exports.Tr = Tr;
 exports.WaitingIndicator = WaitingIndicator;
 exports.calcDynamicThemeProps = calcDynamicThemeProps;
@@ -5204,6 +5380,7 @@ exports.getCurrencyDisplay = getCurrencyDisplay;
 exports.getFileSizeDisplay = getFileSizeDisplay;
 exports.modalScrollFixClassName = modalScrollFixClassName;
 exports.useAccordianState = useAccordianState;
+exports.useAriaLiveRegion = useAriaLiveRegion;
 exports.useBooleanChanged = useBooleanChanged;
 exports.useIgnoreMount = useIgnoreMount;
 exports.useMediaQuery = useMediaQuery;

package/package.json

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