@mackin.com/styleguide 11.0.6 → 11.0.8

package/index.d.ts

@@ -4,7 +4,7 @@ import React__default, { ReactNode } from 'react';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 
 type HeaderVariant = 'label' | 'link' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
-interface AccordianProps {
+interface AccordionProps {
     /** Required for ARIA. */
     id: string;
     header: JSX.Element | string;
@@ -12,24 +12,25 @@ interface AccordianProps {
     variant?: HeaderVariant;
     /** Defaults to 'true'. */
     block?: boolean;
-    className?: string;
+    /** Applied to the outer wrapping `DIV`. */
+    wrapperClassName?: string;
+    /** Applied to the expand/collapse header button. */
+    headerButtonClassName?: string;
     /** If true, padding will not be added to the expanded content */
     noPad?: boolean;
-    /** The initial state of the Accordian.  Defaults to 'false'.
-     * Use with onChange to control the state from outside the Accordian.
+    /** The initial state of the Accordion.  Defaults to 'false'.
+     * Use with onChange to control the state from outside the Accordion.
      */
     open?: boolean;
     disabled?: boolean;
-    /** Defaults to 1020px. */
-    maxHeight?: string | undefined;
     /** Defaults to 250ms. */
     expandTimeMs?: number;
     /** Defaults to 'ease-in-out'. */
     transitionTimingFunction?: string;
     onChange?: (open: boolean) => void;
 }
-declare const Accordian: (props: AccordianProps) => React.JSX.Element;
-declare const useAccordianState: (count: number, openIndex?: number) => [boolean[], (index: number, open: boolean) => void];
+declare const Accordion: (props: AccordionProps) => React.JSX.Element;
+declare const useAccordionState: (count: number, openIndex?: number) => [boolean[], (index: number, open: boolean) => void];
 
 interface InputOnFocusProps {
     /** If true, the component will respond to outside changes even if the control has focus.  Default is false. */
@@ -445,6 +446,8 @@ declare const Nav: (props: {
     slideMs?: number;
     /** Defaults to `theme.layout.navWidth`. */
     navWidth?: string;
+    /** The DOM ID of the element to focus when the nav closes. */
+    onCloseFocusId?: string;
     __debug?: boolean;
 }) => React.JSX.Element;
 
@@ -1229,10 +1232,10 @@ declare const LocalizationProvider: (p: {
 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`..
+     * @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, type DialogPopoverProps, 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, type TooltipPopoverProps, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useAriaLiveRegion, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+export { Accordion, type AccordionProps, 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, type DialogPopoverProps, 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, type TooltipPopoverProps, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordionState, useAriaLiveRegion, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.esm.js

@@ -497,47 +497,68 @@ const Button = React.forwardRef((props, ref) => {
     return content;
 });
 
-const accordianExpandTimeMs = 250;
-const accordianMaxHeight = 1020;
-const accordianTimingFunction = 'ease-in-out';
-// we need to apply the seperately so stuff doesn't hang over during expand/collapse.
-// if we remove this and just keep overflow:hidden, autocompletes will get cut off in the subpanels.
-const visibleStyle = css({
-    overflow: 'visible !important'
-});
-const Accordian = (props) => {
-    var _a, _b, _c, _d;
+const defaultExpandTimeMs = 250;
+const timingFunction = 'ease-in-out';
+const Accordion = (props) => {
+    var _a, _b, _c;
+    const ignoreTransitionCount = React.useRef(props.open === true ? 2 : 0);
     const [open, setOpen] = React.useState(false);
     const theme = useThemeSafely();
     const content = React.useRef(null);
-    const [children, setChildren] = React.useState();
+    const expandTimeMs = (_a = props.expandTimeMs) !== null && _a !== void 0 ? _a : defaultExpandTimeMs;
     const contentStyles = css({
+        label: 'AccordionContent',
+        height: 0,
         overflow: 'hidden',
-        maxHeight: 0,
-        transition: `max-height ${(_a = props.expandTimeMs) !== null && _a !== void 0 ? _a : accordianExpandTimeMs}ms ${(_b = props.transitionTimingFunction) !== null && _b !== void 0 ? _b : accordianTimingFunction}`
-    });
-    const expandedContentStyles = css({
-        maxHeight: (_c = props.maxHeight) !== null && _c !== void 0 ? _c : accordianMaxHeight
+        transition: `height ${expandTimeMs}ms ${(_b = props.transitionTimingFunction) !== null && _b !== void 0 ? _b : timingFunction}`,
+        visibility: 'hidden',
     });
     const expandedContentWrapperStyles = !props.noPad ? css({
+        label: 'AccordionWrapper',
         padding: '0 1rem 1rem 1rem'
     }) : undefined;
+    function forceBrowserReflow() {
+        var _a;
+        // accessing this prop will cause browser to reflow and allow for calculations
+        (_a = content.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+    }
     React.useEffect(() => {
         const currentContent = content.current;
         if (currentContent) {
             if (open) {
-                setChildren(props.children);
-                currentContent.classList.add(expandedContentStyles);
-                window.setTimeout(() => {
-                    currentContent.classList.add(visibleStyle);
-                }, accordianExpandTimeMs);
+                currentContent.style.visibility = 'visible';
+                currentContent.style.height = '0px';
+                forceBrowserReflow();
+                if (ignoreTransitionCount.current) {
+                    // set the height to a auto so content changes will causes re-size
+                    currentContent.style.height = 'auto';
+                    ignoreTransitionCount.current -= 1;
+                }
+                else {
+                    // set the height so the CSS transitions take over
+                    currentContent.style.height = `${currentContent.scrollHeight}px`;
+                    setTimeout(() => {
+                        // set the height to a auto so content changes will causes re-size
+                        currentContent.style.height = 'auto';
+                    }, expandTimeMs + 1);
+                }
             }
             else {
-                currentContent.classList.remove(visibleStyle, expandedContentStyles);
-                if (children !== undefined) {
-                    window.setTimeout(() => {
-                        setChildren(undefined);
-                    }, accordianExpandTimeMs);
+                // set the height back from 'auto' above.
+                currentContent.style.height = `${currentContent.scrollHeight}px`;
+                forceBrowserReflow();
+                // set the height so the CSS transitions take over
+                currentContent.style.height = '0px';
+                if (ignoreTransitionCount.current) {
+                    // undo the style so the root class takes back over ('hidden')
+                    currentContent.style.visibility = '';
+                    ignoreTransitionCount.current -= 1;
+                }
+                else {
+                    setTimeout(() => {
+                        // undo the style so the root class takes back over ('hidden')
+                        currentContent.style.visibility = '';
+                    }, expandTimeMs + 1);
                 }
             }
         }
@@ -552,22 +573,24 @@ const Accordian = (props) => {
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
     const expandedPanelId = `${props.id}_expanded`;
-    return (React.createElement("div", { id: props.id, className: "accordian" },
+    const buttonId = `${props.id}_button`;
+    return (React.createElement("div", { id: props.id, className: props.wrapperClassName },
         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({
+            React.createElement(Button, { id: buttonId, "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 => {
+                    width: ((_c = props.block) !== null && _c !== void 0 ? _c : true) ? '100%' : 'auto'
+                }, props.headerButtonClassName)), onClick: e => {
                     e.stopPropagation();
+                    console.warn('click');
                     if (props.onChange) {
                         props.onChange(!open);
                     }
@@ -576,10 +599,10 @@ const Accordian = (props) => {
                     }
                 }, 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, id: expandedPanelId }, children))));
+        React.createElement("div", { ref: content, className: contentStyles },
+            React.createElement("div", { className: expandedContentWrapperStyles, id: expandedPanelId, hidden: !open, role: "region", "aria-labelledby": buttonId }, props.children))));
 };
-const useAccordianState = (count, openIndex) => {
+const useAccordionState = (count, openIndex) => {
     const [panels, setShowPanel] = React.useState(new Array(count).fill(false).map((b, i) => {
         return i === openIndex;
     }));
@@ -958,8 +981,32 @@ const TabLocker = (props) => {
             if (e.key === 'Tab') {
                 e.preventDefault();
                 e.stopPropagation();
-                const tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')) !== null && _b !== void 0 ? _b : []).filter(el => !el.hasAttribute('disabled'));
-                if (tabElements.length) {
+                let tabElements;
+                try {
+                    tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(tabQuery)) !== null && _b !== void 0 ? _b : [])
+                        .filter(el => {
+                        if (el.hasAttribute('disabled')) {
+                            // seems to be unreliable when done in the query itself
+                            return false;
+                        }
+                        if (el.getAttribute('tabindex') === '-1') {
+                            // '[tabindex]:not([tabindex="-1"])' is in the query, but is ignored for controls that can already 
+                            // receive focus like buttons.  We'll leave it in because it DOSE ignore non-focus elements with a tabindex.
+                            return false;
+                        }
+                        if (el.hasAttribute('hidden')) {
+                            return false;
+                        }
+                        if (el.closest('[hidden]')) {
+                            return false;
+                        }
+                        return true;
+                    });
+                }
+                catch (err) {
+                    console.error(err);
+                }
+                if (tabElements === null || tabElements === void 0 ? void 0 : tabElements.length) {
                     const direction = e.shiftKey ? -1 : 1;
                     const index = tabElements.findIndex(x => x === document.activeElement);
                     if (index === undefined) {
@@ -978,6 +1025,15 @@ const TabLocker = (props) => {
             }
         } }, props.children));
 };
+// easier to look at!
+const tabQuery = [
+    'a',
+    'button',
+    'input',
+    'textarea',
+    'select',
+    '[tabindex]:not([tabindex="-1"])'
+].join(',');
 
 /*
     ARIA info:
@@ -1123,8 +1179,13 @@ const Autocomplete = (p) => {
                             break;
                         }
                         case 'Tab': {
-                            onPickValue(p.value, false);
-                            setSelectedResultIndex(-1);
+                            // if there are options showing - and whether or not you picked one - 
+                            // Tab is supposed to "select" the current value in the box per ARIA.
+                            // the normal blur process should be allowed to continue.
+                            if (displayOptions.length) {
+                                onPickValue(p.value, false);
+                                setSelectedResultIndex(-1);
+                            }
                             break;
                         }
                     }
@@ -2498,7 +2559,7 @@ const InfoTip = (props) => {
 		font-family: serif;
 		display:inline-block;
 	`;
-    let onButtonBlur = props.variant.type === 'Info' ?
+    const onButtonBlur = props.variant.type === 'Info' ?
         () => {
             closeTip();
         } :
@@ -2971,6 +3032,13 @@ const Nav = (props) => {
         var _a;
         log('show changed', `${previous !== null && previous !== void 0 ? previous : 'undefined'} > ${current}`);
         backdrop.setShow(current, { key: (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav', zIndex });
+        if (!props.show && props.onCloseFocusId) {
+            const focusId = props.onCloseFocusId;
+            setTimeout(() => {
+                var _a;
+                (_a = document.getElementById(focusId)) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
     }, props.show);
     React.useLayoutEffect(() => {
         if (nav && nav.current) {
@@ -4623,7 +4691,7 @@ function useAriaLiveRegion() {
     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`..
+         * @param clearTimeoutMs - Milliseconds to wait before the message is cleared.  Defaults to `2000`.
          */
         notify: (message, clearTimoutMs) => {
             if (clearTimerId) {
@@ -5291,5 +5359,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, 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 };
+export { Accordion, 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, useAccordionState, useAriaLiveRegion, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
 //# sourceMappingURL=index.esm.js.map

package/index.js

@@ -515,47 +515,68 @@ const Button = React__namespace.forwardRef((props, ref) => {
     return content;
 });
 
-const accordianExpandTimeMs = 250;
-const accordianMaxHeight = 1020;
-const accordianTimingFunction = 'ease-in-out';
-// we need to apply the seperately so stuff doesn't hang over during expand/collapse.
-// if we remove this and just keep overflow:hidden, autocompletes will get cut off in the subpanels.
-const visibleStyle = css.css({
-    overflow: 'visible !important'
-});
-const Accordian = (props) => {
-    var _a, _b, _c, _d;
+const defaultExpandTimeMs = 250;
+const timingFunction = 'ease-in-out';
+const Accordion = (props) => {
+    var _a, _b, _c;
+    const ignoreTransitionCount = React__namespace.useRef(props.open === true ? 2 : 0);
     const [open, setOpen] = React__namespace.useState(false);
     const theme = useThemeSafely();
     const content = React__namespace.useRef(null);
-    const [children, setChildren] = React__namespace.useState();
+    const expandTimeMs = (_a = props.expandTimeMs) !== null && _a !== void 0 ? _a : defaultExpandTimeMs;
     const contentStyles = css.css({
+        label: 'AccordionContent',
+        height: 0,
         overflow: 'hidden',
-        maxHeight: 0,
-        transition: `max-height ${(_a = props.expandTimeMs) !== null && _a !== void 0 ? _a : accordianExpandTimeMs}ms ${(_b = props.transitionTimingFunction) !== null && _b !== void 0 ? _b : accordianTimingFunction}`
-    });
-    const expandedContentStyles = css.css({
-        maxHeight: (_c = props.maxHeight) !== null && _c !== void 0 ? _c : accordianMaxHeight
+        transition: `height ${expandTimeMs}ms ${(_b = props.transitionTimingFunction) !== null && _b !== void 0 ? _b : timingFunction}`,
+        visibility: 'hidden',
     });
     const expandedContentWrapperStyles = !props.noPad ? css.css({
+        label: 'AccordionWrapper',
         padding: '0 1rem 1rem 1rem'
     }) : undefined;
+    function forceBrowserReflow() {
+        var _a;
+        // accessing this prop will cause browser to reflow and allow for calculations
+        (_a = content.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+    }
     React__namespace.useEffect(() => {
         const currentContent = content.current;
         if (currentContent) {
             if (open) {
-                setChildren(props.children);
-                currentContent.classList.add(expandedContentStyles);
-                window.setTimeout(() => {
-                    currentContent.classList.add(visibleStyle);
-                }, accordianExpandTimeMs);
+                currentContent.style.visibility = 'visible';
+                currentContent.style.height = '0px';
+                forceBrowserReflow();
+                if (ignoreTransitionCount.current) {
+                    // set the height to a auto so content changes will causes re-size
+                    currentContent.style.height = 'auto';
+                    ignoreTransitionCount.current -= 1;
+                }
+                else {
+                    // set the height so the CSS transitions take over
+                    currentContent.style.height = `${currentContent.scrollHeight}px`;
+                    setTimeout(() => {
+                        // set the height to a auto so content changes will causes re-size
+                        currentContent.style.height = 'auto';
+                    }, expandTimeMs + 1);
+                }
             }
             else {
-                currentContent.classList.remove(visibleStyle, expandedContentStyles);
-                if (children !== undefined) {
-                    window.setTimeout(() => {
-                        setChildren(undefined);
-                    }, accordianExpandTimeMs);
+                // set the height back from 'auto' above.
+                currentContent.style.height = `${currentContent.scrollHeight}px`;
+                forceBrowserReflow();
+                // set the height so the CSS transitions take over
+                currentContent.style.height = '0px';
+                if (ignoreTransitionCount.current) {
+                    // undo the style so the root class takes back over ('hidden')
+                    currentContent.style.visibility = '';
+                    ignoreTransitionCount.current -= 1;
+                }
+                else {
+                    setTimeout(() => {
+                        // undo the style so the root class takes back over ('hidden')
+                        currentContent.style.visibility = '';
+                    }, expandTimeMs + 1);
                 }
             }
         }
@@ -570,22 +591,24 @@ const Accordian = (props) => {
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
     const expandedPanelId = `${props.id}_expanded`;
-    return (React__namespace.createElement("div", { id: props.id, className: "accordian" },
+    const buttonId = `${props.id}_button`;
+    return (React__namespace.createElement("div", { id: props.id, className: props.wrapperClassName },
         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({
+            React__namespace.createElement(Button, { id: buttonId, "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 => {
+                    width: ((_c = props.block) !== null && _c !== void 0 ? _c : true) ? '100%' : 'auto'
+                }, props.headerButtonClassName)), onClick: e => {
                     e.stopPropagation();
+                    console.warn('click');
                     if (props.onChange) {
                         props.onChange(!open);
                     }
@@ -594,10 +617,10 @@ const Accordian = (props) => {
                     }
                 }, 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, id: expandedPanelId }, children))));
+        React__namespace.createElement("div", { ref: content, className: contentStyles },
+            React__namespace.createElement("div", { className: expandedContentWrapperStyles, id: expandedPanelId, hidden: !open, role: "region", "aria-labelledby": buttonId }, props.children))));
 };
-const useAccordianState = (count, openIndex) => {
+const useAccordionState = (count, openIndex) => {
     const [panels, setShowPanel] = React__namespace.useState(new Array(count).fill(false).map((b, i) => {
         return i === openIndex;
     }));
@@ -976,8 +999,32 @@ const TabLocker = (props) => {
             if (e.key === 'Tab') {
                 e.preventDefault();
                 e.stopPropagation();
-                const tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')) !== null && _b !== void 0 ? _b : []).filter(el => !el.hasAttribute('disabled'));
-                if (tabElements.length) {
+                let tabElements;
+                try {
+                    tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(tabQuery)) !== null && _b !== void 0 ? _b : [])
+                        .filter(el => {
+                        if (el.hasAttribute('disabled')) {
+                            // seems to be unreliable when done in the query itself
+                            return false;
+                        }
+                        if (el.getAttribute('tabindex') === '-1') {
+                            // '[tabindex]:not([tabindex="-1"])' is in the query, but is ignored for controls that can already 
+                            // receive focus like buttons.  We'll leave it in because it DOSE ignore non-focus elements with a tabindex.
+                            return false;
+                        }
+                        if (el.hasAttribute('hidden')) {
+                            return false;
+                        }
+                        if (el.closest('[hidden]')) {
+                            return false;
+                        }
+                        return true;
+                    });
+                }
+                catch (err) {
+                    console.error(err);
+                }
+                if (tabElements === null || tabElements === void 0 ? void 0 : tabElements.length) {
                     const direction = e.shiftKey ? -1 : 1;
                     const index = tabElements.findIndex(x => x === document.activeElement);
                     if (index === undefined) {
@@ -996,6 +1043,15 @@ const TabLocker = (props) => {
             }
         } }, props.children));
 };
+// easier to look at!
+const tabQuery = [
+    'a',
+    'button',
+    'input',
+    'textarea',
+    'select',
+    '[tabindex]:not([tabindex="-1"])'
+].join(',');
 
 /*
     ARIA info:
@@ -1141,8 +1197,13 @@ const Autocomplete = (p) => {
                             break;
                         }
                         case 'Tab': {
-                            onPickValue(p.value, false);
-                            setSelectedResultIndex(-1);
+                            // if there are options showing - and whether or not you picked one - 
+                            // Tab is supposed to "select" the current value in the box per ARIA.
+                            // the normal blur process should be allowed to continue.
+                            if (displayOptions.length) {
+                                onPickValue(p.value, false);
+                                setSelectedResultIndex(-1);
+                            }
                             break;
                         }
                     }
@@ -2516,7 +2577,7 @@ const InfoTip = (props) => {
 		font-family: serif;
 		display:inline-block;
 	`;
-    let onButtonBlur = props.variant.type === 'Info' ?
+    const onButtonBlur = props.variant.type === 'Info' ?
         () => {
             closeTip();
         } :
@@ -2989,6 +3050,13 @@ const Nav = (props) => {
         var _a;
         log('show changed', `${previous !== null && previous !== void 0 ? previous : 'undefined'} > ${current}`);
         backdrop.setShow(current, { key: (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav', zIndex });
+        if (!props.show && props.onCloseFocusId) {
+            const focusId = props.onCloseFocusId;
+            setTimeout(() => {
+                var _a;
+                (_a = document.getElementById(focusId)) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
     }, props.show);
     React__namespace.useLayoutEffect(() => {
         if (nav && nav.current) {
@@ -4641,7 +4709,7 @@ function useAriaLiveRegion() {
     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`..
+         * @param clearTimeoutMs - Milliseconds to wait before the message is cleared.  Defaults to `2000`.
          */
         notify: (message, clearTimoutMs) => {
             if (clearTimerId) {
@@ -5309,7 +5377,7 @@ const LocalizationProvider = (p) => {
         } }, p.children));
 };
 
-exports.Accordian = Accordian;
+exports.Accordion = Accordion;
 exports.Autocomplete = Autocomplete;
 exports.AutocompleteController = AutocompleteController;
 exports.AutocompleteEntityController = AutocompleteEntityController;
@@ -5381,7 +5449,7 @@ exports.enumToEntities = enumToEntities;
 exports.getCurrencyDisplay = getCurrencyDisplay;
 exports.getFileSizeDisplay = getFileSizeDisplay;
 exports.modalScrollFixClassName = modalScrollFixClassName;
-exports.useAccordianState = useAccordianState;
+exports.useAccordionState = useAccordionState;
 exports.useAriaLiveRegion = useAriaLiveRegion;
 exports.useBooleanChanged = useBooleanChanged;
 exports.useIgnoreMount = useIgnoreMount;

package/package.json

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