@mackin.com/styleguide 11.0.5 → 11.0.7

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, 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 };
+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,53 +497,75 @@ 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);
                 }
             }
         }
     }, [open]);
     React.useEffect(() => {
         var _a;
+        console.warn('props.open', 'changed', props.open);
         if (props.open === undefined) {
             // technically, we only need to use this effect if props.open was initialized with a boolean.
             // you can't have conditional effects so here we go...
@@ -552,22 +574,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 +600,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;
     }));
@@ -1123,8 +1147,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 +2527,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 +3000,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 +4659,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 +5327,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,53 +515,75 @@ 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);
                 }
             }
         }
     }, [open]);
     React__namespace.useEffect(() => {
         var _a;
+        console.warn('props.open', 'changed', props.open);
         if (props.open === undefined) {
             // technically, we only need to use this effect if props.open was initialized with a boolean.
             // you can't have conditional effects so here we go...
@@ -570,22 +592,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 +618,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;
     }));
@@ -1141,8 +1165,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 +2545,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 +3018,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 +4677,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 +5345,7 @@ const LocalizationProvider = (p) => {
         } }, p.children));
 };
 
-exports.Accordian = Accordian;
+exports.Accordion = Accordion;
 exports.Autocomplete = Autocomplete;
 exports.AutocompleteController = AutocompleteController;
 exports.AutocompleteEntityController = AutocompleteEntityController;
@@ -5381,7 +5417,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.5",
+    "version": "11.0.7",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",