@pega/cosmos-react-core 2.0.0-dev.2.0 → 2.0.0-dev.21.1

package/lib/components/AppShell/AppShell.js

@@ -1,65 +1,35 @@
-import React, { forwardRef, useState, useCallback, useEffect, useMemo, useContext, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { forwardRef, useState, useCallback, useEffect, useMemo, useContext, useRef, useLayoutEffect } from 'react';
 import Flex from '../Flex';
 import Link from '../Link';
 import Count from '../Badges/Count';
 import BareButton from '../Button/BareButton';
 import SearchInput from '../SearchInput';
-import Icon from '../Icon';
+import Icon, { registerIcon } from '../Icon';
+import * as timesIcon from '../Icon/icons/times.icon';
+import * as plusIcon from '../Icon/icons/plus.icon';
+import * as caseSolidIcon from '../Icon/icons/case-solid.icon';
+import * as barsIcon from '../Icon/icons/bars.icon';
+import * as caretLeftIcon from '../Icon/icons/caret-left.icon';
+import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import Text from '../Text';
 import Image from '../Image';
 import ExpandCollapse from '../ExpandCollapse';
-import { useFocusWithin, useTheme, useI18n, useBreakpoint, useConsolidatedRef } from '../../hooks';
+import { useFocusWithin, useI18n, useBreakpoint, useConsolidatedRef, useDirection, useTheme, useElement, useTransitionState } from '../../hooks';
+import { openCloseStates } from '../../hooks/useTransitionState';
 import Grid from '../Grid';
 import Button from '../Button';
-import Popover from '../Popover';
-import Menu from '../Menu';
+import Drawer from '../Drawer';
+import Backdrop from '../Backdrop';
+import { documentIsAvailable } from '../../utils';
 import AppShellContext from './AppShellContext';
-import Drawer from './Drawer';
+import AppShellDrawer from './Drawer';
+import AppShellOperator from './Operator';
+import AppHeader from './AppHeader';
 import SkipNavigation from './SkipNavigation';
-import StyledAppShell, { StyledAppNav, StyledAppInfo, StyledSearchForm, StyledCaseTypes, StyledScrollWrap, StyledUtils, StyledNavList, StyledNestedNavList, StyledNavListItem, StyledNavListMenuButton, StyledAppMain, StyledCaseClose, StyledAppShellNavIcon, StyledNavCasesList, StyledAppEnvironment, StyledBannerRegion, StyledCountIcon, StyledUtilIconCount } from './AppShell.styles';
-const Operator = forwardRef(({ children, actions }, ref) => {
-    var _a;
-    const { navOpen } = useContext(AppShellContext);
-    const buttonRef = useConsolidatedRef(ref);
-    const operatorMenuItems = useMemo(() => {
-        return actions.flat().map(({ id, text, onClick: click, ...rest }) => ({
-            id,
-            primary: text,
-            onClick: click,
-            ...rest
-        }));
-    }, [actions]);
-    const [showMenu, setShowMenu] = useState(false);
-    useEffect(() => {
-        if (!navOpen)
-            setShowMenu(false);
-    }, [navOpen]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(BareButton, { as: StyledNavListMenuButton, ref: buttonRef, onClick: () => {
-                setShowMenu(cur => !cur);
-            }, onKeyDown: (e) => {
-                if (e.key === 'Escape')
-                    setShowMenu(false);
-            }, onBlur: () => {
-                setShowMenu(false);
-            } }, children),
-        actions && (React.createElement(Popover, { show: showMenu, target: buttonRef.current, placement: 'right-end', modifiers: [
-                {
-                    name: 'offset',
-                    options: { offset: [-12, -16] }
-                }
-            ] },
-            React.createElement(Menu, { focusControlEl: (_a = buttonRef.current) !== null && _a !== void 0 ? _a : undefined, mode: 'action', items: operatorMenuItems, 
-                /**
-                 * @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated.
-                 */
-                onItemClick: (_, e) => {
-                    if (e
-                        .detail > 0) {
-                        setShowMenu(false);
-                    }
-                } })))));
-});
+import { StyledAppNav, StyledAppInfo, StyledSearchForm, StyledCaseTypes, StyledScrollWrap, StyledUtils, StyledNavList, StyledNestedNavList, StyledNavListItem, StyledNavListMenuButton, StyledAppMain, StyledCaseClose, StyledAppShellNavIcon, StyledNavCasesList, StyledAppEnvironment, StyledBannerRegion, StyledCountIcon, StyledUtilIconCount, StyledMobileNav } from './AppShell.styles';
+registerIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon);
 const NavComponents = {
     List(props) {
         const { items = [], nestedList, collapsed } = props;
@@ -78,28 +48,44 @@ const NavComponents = {
             };
             Component = StyledNestedNavList;
         }
-        return (React.createElement(Component, { ...fwdProps }, items === null || items === void 0 ? void 0 : items.map(item => (React.createElement(NavComponents.ListItem, { ...item, key: item.id || item.primary })))));
+        return (_jsx(Component, { ...fwdProps, children: items?.map(item => (_createElement(NavComponents.ListItem, { ...item, key: item.id || item.primary }))) }, void 0));
     },
     ListItem(props) {
         const { navOpen } = useContext(AppShellContext);
         const { visual, primary, secondary, href, onClick, items, collapseItems = false, dismissible = false, onDismiss, active, actions, forwardedRef, ...restProps } = props;
         const t = useI18n();
-        const theme = useTheme();
         const hasItems = Array.isArray(items) && items.length > 0;
         const compProps = {
-            onClick
+            onClick,
+            href
         };
         let Component;
         if (actions) {
-            Component = Operator;
+            Component = AppShellOperator;
             compProps.actions = actions;
-        }
-        else if (onClick) {
-            Component = BareButton;
+            compProps.as = StyledNavListMenuButton;
+            compProps.popover = {
+                placement: 'right-end',
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: { offset: [-12, -16] }
+                    },
+                    {
+                        name: 'flip',
+                        options: {
+                            boundary: documentIsAvailable ? document.body : undefined,
+                            fallbackPlacements: ['top-end']
+                        }
+                    }
+                ]
+            };
         }
         else if (href) {
             Component = Link;
-            compProps.href = href;
+        }
+        else if (onClick) {
+            Component = BareButton;
         }
         else {
             Component = 'div';
@@ -112,16 +98,11 @@ const NavComponents = {
                 node.dispatchEvent(clickEvent);
             }
         }, [navOpen]);
-        return (React.createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: hasItems ? collapseItems : true, active: !!active, navOpen: navOpen },
-            React.createElement(Component, { ...compProps, ref: forwardedRef },
-                visual,
-                secondary ? (React.createElement(Flex, { container: { direction: 'column', alignItems: 'start' } },
-                    React.createElement("span", null, primary),
-                    React.createElement(Text, { variant: 'secondary' }, secondary))) : (React.createElement("span", null, primary)),
-                (hasItems || actions) && (React.createElement(Icon, { name: theme.base.rtl ? 'caret-left' : 'caret-right', as: StyledAppShellNavIcon }))),
-            dismissible && (React.createElement(Button, { icon: true, variant: 'simple', as: StyledCaseClose, onClick: onDismiss, "aria-label": t('dismiss_case') },
-                React.createElement(Icon, { name: 'times' }))),
-            hasItems && (React.createElement(NavComponents.List, { nestedList: true, items: items, collapsed: !navOpen || collapseItems }))));
+        const { end } = useDirection();
+        return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: hasItems ? collapseItems : true },
+            _jsxs(Component, { ...compProps, ref: forwardedRef, children: [visual, secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }, void 0), _jsx(Text, { variant: 'secondary', children: secondary }, void 0)] }, void 0)) : (_jsx("span", { children: primary }, void 0)), (hasItems || actions) && _jsx(Icon, { name: `caret-${end}`, as: StyledAppShellNavIcon }, void 0)] }, void 0),
+            dismissible && (_jsx(Button, { icon: true, variant: 'simple', as: StyledCaseClose, onClick: onDismiss, "aria-label": t('dismiss_case'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)),
+            hasItems && (_jsx(NavComponents.List, { nestedList: true, items: items, collapsed: !navOpen || collapseItems }, void 0))));
     }
 };
 const CaseTypes = ({ caseTypes }) => {
@@ -141,16 +122,15 @@ const CaseTypes = ({ caseTypes }) => {
             primary: caseType.name
         };
     });
-    return useMemo(() => (React.createElement(StyledCaseTypes, { expanded: expanded && navOpen },
-        React.createElement(NavComponents.List, { items: [
+    return useMemo(() => (_jsx(StyledCaseTypes, { expanded: expanded && navOpen, children: _jsx(NavComponents.List, { items: [
                 {
                     primary: t('app_shell_create'),
-                    visual: React.createElement(Icon, { name: 'plus', as: StyledAppShellNavIcon }),
+                    visual: _jsx(Icon, { name: 'plus', as: StyledAppShellNavIcon }, void 0),
                     onClick: toggleExpanded,
                     items: transformedCaseTypes,
                     collapseItems: !expanded || !navOpen
                 }
-            ] }))), [expanded, navOpen, toggleExpanded, caseTypes]);
+            ] }, void 0) }, void 0)), [expanded, navOpen, toggleExpanded, caseTypes]);
 };
 const Links = (props) => {
     const { links } = props;
@@ -164,13 +144,14 @@ const Links = (props) => {
         });
         setTransformedLinks(updatedLinks);
     };
+    // TODO: Can this be a memo instead of a state and an effect?
     const mergedNavLinks = (items) => {
         return items.map((link) => {
             return {
                 ...link,
                 primary: link.name,
                 'aria-current': link.active ? 'page' : null,
-                visual: link.icon ? React.createElement(Icon, { name: link.icon, as: StyledAppShellNavIcon }) : null,
+                visual: link.icon ? _jsx(Icon, { name: link.icon, as: StyledAppShellNavIcon }, void 0) : null,
                 onClick: link.links ? () => toggleExpanded(link.id) : link.onClick,
                 items: link.links ? mergedNavLinks(link.links) : undefined,
                 collapseItems: true
@@ -183,14 +164,13 @@ const Links = (props) => {
     useEffect(() => {
         navLinksRef.current = transformedLinks;
     }, [transformedLinks]);
-    return (React.createElement("div", null,
-        React.createElement(NavComponents.List, { items: transformedLinks })));
+    return (_jsx("div", { children: _jsx(NavComponents.List, { items: transformedLinks }, void 0) }, void 0));
 };
 const Cases = (props) => {
     const { cases } = props;
     const setupCases = (items) => {
         return items.map((item) => {
-            const { id, primary, secondary, visual = React.createElement(Icon, { name: 'case-solid', as: StyledAppShellNavIcon }), active, onClick, onDismiss } = item;
+            const { id, primary, secondary, visual = _jsx(Icon, { name: 'case-solid', as: StyledAppShellNavIcon }, void 0), active, onClick, onDismiss } = item;
             return {
                 id,
                 'aria-current': active ? 'page' : undefined,
@@ -204,37 +184,38 @@ const Cases = (props) => {
             };
         });
     };
-    return (React.createElement(StyledNavCasesList, null,
-        React.createElement(NavComponents.List, { items: setupCases(cases) })));
+    return (_jsx(StyledNavCasesList, { children: _jsx(NavComponents.List, { items: setupCases(cases) }, void 0) }, void 0));
 };
-const Utils = props => {
-    const { operator, items } = props;
-    const { setDrawerOpen } = useContext(AppShellContext);
+// TODO: Need to add back re-focus support to drawer.
+export const Utils = ({ operator, items, appHeader }) => {
+    const { drawerOpen, setDrawerOpen, focusedImperatively } = useContext(AppShellContext);
     const [transformedLinks, setTransformedLinks] = useState([]);
     const [item, setItem] = useState();
     const [activeUtilItem, setActiveUtilItem] = useState('');
-    const operatorInfo = [
-        {
-            primary: operator.name,
-            visual: operator.avatar,
-            actions: operator.actions
-        }
-    ];
+    const returnFocusRef = useRef(null);
+    const operatorInfo = useMemo(() => appHeader
+        ? []
+        : [
+            {
+                primary: operator.name,
+                visual: operator.avatar,
+                actions: operator.actions
+            }
+        ], [appHeader, operator.name, operator.avatar, operator.actions]);
+    // TODO: Can this be a memo instead of a state and an effect?
     const mergedUtilItems = (drawerItems) => {
-        return drawerItems === null || drawerItems === void 0 ? void 0 : drawerItems.map((drawerItem) => {
+        return drawerItems?.map((drawerItem) => {
             return {
-                ...drawerItem,
-                primary: drawerItem.name,
-                visual: drawerItem.count ? (React.createElement(StyledUtilIconCount, null,
-                    drawerItem.visual,
-                    React.createElement(Count, { as: StyledCountIcon, variant: 'urgent' }, drawerItem.count))) : (drawerItem.visual),
-                onClick: () => {
+                onClick: e => {
+                    returnFocusRef.current = e.currentTarget;
                     if (drawerItem.drawerView) {
-                        setDrawerOpen(true);
                         setItem(drawerItem);
                         setActiveUtilItem(drawerItem.name);
                     }
-                }
+                },
+                ...drawerItem,
+                primary: drawerItem.name,
+                visual: drawerItem.count ? (_jsxs(StyledUtilIconCount, { children: [drawerItem.visual, _jsx(Count, { as: StyledCountIcon, variant: 'urgent', children: drawerItem.count }, void 0)] }, void 0)) : (drawerItem.visual)
             };
         });
     };
@@ -245,81 +226,136 @@ const Utils = props => {
         else {
             setTransformedLinks(operatorInfo);
         }
-    }, [items]); /** operatorInfo need to be set as dependent? */
+    }, [items, operatorInfo]);
     useEffect(() => {
-        items === null || items === void 0 ? void 0 : items.forEach(uItem => {
+        items?.forEach(uItem => {
             if (uItem.name === activeUtilItem) {
                 setItem(uItem);
             }
         });
     }, [items]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(StyledUtils, null,
-            React.createElement(NavComponents.List, { items: transformedLinks, nestedList: false })),
-        item && (React.createElement(Drawer, { content: item.drawerView, header: item.drawerHeader || item.name, onDrawerClose: item.onDrawerClose, onDrawerOpen: item.onDrawerOpen }))));
+    useEffect(() => {
+        if (item)
+            setDrawerOpen(true);
+    }, [item]);
+    useEffect(() => {
+        if (!drawerOpen) {
+            setActiveUtilItem('');
+            focusedImperatively.current = true;
+            returnFocusRef?.current?.focus();
+        }
+    }, [drawerOpen]);
+    return (_jsxs(_Fragment, { children: [_jsx(StyledUtils, { children: _jsx(NavComponents.List
+                // Pull onDrawerOpen and onDrawerClose off to avoid DOM passthrough warning.
+                , { 
+                    // Pull onDrawerOpen and onDrawerClose off to avoid DOM passthrough warning.
+                    items: transformedLinks.map(({ onDrawerOpen, onDrawerClose, ...util }) => util) }, void 0) }, void 0), item && (_jsx(AppShellDrawer, { content: item.drawerView, header: item.drawerHeader || item.name, onDrawerClose: () => {
+                    setItem(undefined);
+                    item.onDrawerClose?.();
+                }, onDrawerOpen: item.onDrawerOpen }, void 0))] }, void 0));
 };
 const AppShell = forwardRef((props, ref) => {
-    const { appInfo: { appName, portalName, href: appInfoHref, imageSrc: logoSrc, ...appInfoRestProps }, searchInput, searchLabel = 'Sitewide', // FIXME: TR
+    const { appInfo, searchInput, appHeader, searchLabel = 'Sitewide', // FIXME: TR
     caseTypes, links, banners, environment: { name: envName, color: envColor } = {}, main, operator, utils, cases, ...restProps } = props;
-    const [navOpenState, setNavOpen] = useState(false);
+    const { appName, portalName, href: appInfoHref, imageSrc: logoSrc, ...appInfoRestProps } = appInfo;
+    const t = useI18n();
+    const theme = useTheme();
+    const navRef = useConsolidatedRef(ref);
     const [drawerOpen, setDrawerOpen] = useState(false);
+    const [mobileNavOpen, setMobileNavOpen] = useState(false);
+    const [mobileNavBackdrop, setMobileNavBackdrop] = useState(false);
     const [refocusEl, setRefocusEl] = useState(null);
     const focusedImperatively = useRef(false);
-    const xlOrAbove = useBreakpoint('xl');
-    const navOpen = xlOrAbove || navOpenState;
-    const openNav = useCallback(() => {
-        setNavOpen(true);
+    const [headerEl, setHeaderEl] = useElement();
+    const [mobileHeaderEl, setMobileHeaderEl] = useElement();
+    const isXlOrAbove = useBreakpoint('xl');
+    const isSmallOrAbove = useBreakpoint('sm');
+    const showAppHeader = !!appHeader && isSmallOrAbove;
+    const showMainContent = showAppHeader ? headerEl || mobileHeaderEl : true;
+    const openNavTimeoutId = useRef();
+    const closeNavTimeoutId = useRef();
+    const { state: navState, set: setNavState } = useTransitionState({
+        ref: navRef,
+        property: 'width',
+        states: openCloseStates,
+        defaultState: isXlOrAbove ? 'open' : 'closed'
+    });
+    const openNav = useCallback((delay = 0) => {
+        if (closeNavTimeoutId.current)
+            clearTimeout(closeNavTimeoutId.current);
+        openNavTimeoutId.current = setTimeout(() => {
+            setNavState('open');
+        }, delay);
     }, []);
-    const closeNav = useCallback(() => {
-        setNavOpen(false);
+    const closeNav = useCallback((delay = 0) => {
+        if (openNavTimeoutId.current)
+            clearTimeout(openNavTimeoutId.current);
+        closeNavTimeoutId.current = setTimeout(() => {
+            setNavState('closed');
+        }, delay);
     }, []);
     const onFocus = useCallback(() => {
-        if (!focusedImperatively.current)
+        if (!focusedImperatively.current && isSmallOrAbove)
             openNav();
         focusedImperatively.current = false;
-    }, [focusedImperatively, openNav]);
-    const navRef = useRef(null);
+    }, [openNav, isSmallOrAbove]);
+    const onKeydown = useCallback(({ key }) => {
+        if (key === 'Escape')
+            setMobileNavOpen(false);
+    }, []);
     useFocusWithin([navRef], useCallback((isFocused, navElement) => {
-        if (!isFocused && !(navElement === null || navElement === void 0 ? void 0 : navElement.matches(':hover')))
+        if (!isFocused && !navElement?.matches(':hover'))
             closeNav();
     }, [closeNav]));
+    useLayoutEffect(() => {
+        if (isXlOrAbove) {
+            openNav();
+        }
+        else {
+            closeNav();
+        }
+    }, [isXlOrAbove]);
     useEffect(() => {
-        if (!navOpen)
+        if (navState === 'closed' || navState === 'closing')
             setDrawerOpen(false);
-    }, [navOpen]);
-    const theme = useTheme();
-    return (React.createElement(AppShellContext.Provider, { value: useMemo(() => ({
-            navOpen,
+    }, [navState]);
+    useEffect(() => {
+        if (mobileNavOpen) {
+            document.addEventListener('keydown', onKeydown);
+            return () => {
+                document.removeEventListener('keydown', onKeydown);
+            };
+        }
+    }, [mobileNavOpen]);
+    useEffect(() => {
+        if (isSmallOrAbove && mobileNavOpen) {
+            setMobileNavBackdrop(false);
+            setMobileNavOpen(false);
+        }
+    }, [isSmallOrAbove, mobileNavOpen]);
+    const appShellJSX = (_jsxs(Flex, { ...restProps, container: {
+            direction: 'column',
+            justify: 'between'
+        }, ref: navRef, as: StyledAppNav, appHeader: showAppHeader, navOpen: mobileNavOpen, showEnv: !!envName, onFocus: onFocus, onMouseEnter: isSmallOrAbove && !isXlOrAbove ? () => openNav(200) : undefined, onMouseLeave: isSmallOrAbove && !isXlOrAbove ? () => closeNav(200) : undefined, children: [envName && (_jsx(StyledAppEnvironment, { item: { shrink: 0 }, color: envColor ?? theme.base.colors.red['extra-light'], children: envName }, void 0)), !showAppHeader && (_jsxs(StyledAppInfo, { as: Grid, forwardedAs: appInfoHref ? Link : 'div', href: appInfoHref, "aria-label": `${appName}${portalName ? ` - ${portalName}` : ''}`, ...appInfoRestProps, container: {
+                    alignItems: 'center',
+                    areas: portalName ? '"logo app" "logo portal"' : '"logo app"'
+                }, children: [_jsx(Grid, { item: { area: 'logo' }, as: Image, src: logoSrc, alt: appName }, void 0), _jsx(Grid, { item: { area: 'app' }, as: 'span', children: appName }, void 0), portalName && (_jsx(Grid, { item: { area: 'portal' }, as: 'span', children: portalName }, void 0))] }, void 0)), searchInput && !showAppHeader && (_jsx(StyledSearchForm, { role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), children: _jsx(SearchInput, { ...searchInput }, void 0) }, void 0)), _jsxs(StyledScrollWrap, { children: [caseTypes && _jsx(CaseTypes, { caseTypes: caseTypes }, void 0), links && _jsx(Links, { links: links }, void 0), cases && _jsx(Cases, { cases: cases }, void 0)] }, void 0), _jsx(Utils, { appHeader: showAppHeader, operator: operator, items: utils }, void 0)] }, void 0));
+    const { start } = useDirection();
+    return (_jsxs(AppShellContext.Provider, { value: useMemo(() => ({
+            navOpen: mobileNavOpen || navState === 'open' || navState === 'opening',
+            navState,
             drawerOpen,
             setDrawerOpen,
             refocusEl,
             setRefocusEl,
-            focusedImperatively
-        }), [navOpen, drawerOpen, focusedImperatively]) },
-        React.createElement(SkipNavigation, null),
-        React.createElement(StyledAppShell, { ...restProps, navOpen: navOpen, ref: ref },
-            React.createElement(Flex, { container: {
-                    direction: 'column',
-                    justify: 'between'
-                }, ref: navRef, as: StyledAppNav, onFocus: onFocus, onMouseEnter: openNav, onMouseLeave: closeNav },
-                envName && (React.createElement(StyledAppEnvironment, { item: { shrink: 0 }, color: envColor !== null && envColor !== void 0 ? envColor : theme.base.colors.red['extra-light'] }, envName)),
-                React.createElement(StyledAppInfo, { as: Grid, forwardedAs: appInfoHref ? Link : 'div', href: appInfoHref, title: `${appName}${portalName ? ` - ${portalName}` : ''}`, ...appInfoRestProps, container: {
-                        alignItems: 'center',
-                        areas: portalName ? '"logo portal" "logo app"' : '"logo app"'
-                    } },
-                    React.createElement(Grid, { item: { area: 'logo' }, as: Image, src: logoSrc, alt: appName }),
-                    React.createElement(Grid, { item: { area: 'app' }, as: 'span' }, appName),
-                    portalName && (React.createElement(Grid, { item: { area: 'portal' }, as: 'span' }, portalName))),
-                searchInput && (React.createElement(StyledSearchForm, { role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault() },
-                    React.createElement(SearchInput, { ...searchInput }))),
-                React.createElement(StyledScrollWrap, { navOpen: navOpen },
-                    caseTypes && React.createElement(CaseTypes, { caseTypes: caseTypes }),
-                    links && React.createElement(Links, { links: links }),
-                    cases && React.createElement(Cases, { cases: cases })),
-                React.createElement(Utils, { operator: operator, items: utils })),
-            React.createElement(StyledAppMain, null,
-                banners && React.createElement(StyledBannerRegion, null, banners),
-                main))));
+            focusedImperatively,
+            headerEl: headerEl || mobileHeaderEl
+        }), [navState, mobileNavOpen, drawerOpen, refocusEl, headerEl, mobileHeaderEl]), children: [_jsx(SkipNavigation, {}, void 0), showAppHeader && (_jsx(AppHeader, { ...appInfo, searchInput: searchInput, searchLabel: searchLabel, operator: operator, ref: setHeaderEl }, void 0)), isSmallOrAbove ? (appShellJSX) : (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledMobileNav, container: { alignItems: 'center' }, ref: setMobileHeaderEl, children: _jsx(Button, { variant: 'simple', onClick: () => setMobileNavBackdrop(true), "aria-label": t('app_shell_open_nav'), icon: true, children: _jsx(Icon, { name: 'bars' }, void 0) }, void 0) }, void 0), _jsx(Backdrop, { open: mobileNavBackdrop, transitionSpeed: 'none', onAfterTransitionIn: () => setMobileNavOpen(true), onBeforeTransitionOut: () => setMobileNavOpen(false), onClick: e => {
+                            if (e.currentTarget === e.target)
+                                setMobileNavOpen(false);
+                        }, children: _jsx(Drawer, { open: mobileNavOpen, onAfterClose: () => {
+                                setMobileNavBackdrop(false);
+                            }, position: 'fixed', placement: start, size: 'min(18.75rem, calc(100vw - 3.5rem))', nullWhenClosed: true, children: appShellJSX }, void 0) }, void 0)] }, void 0)), showMainContent && (_jsxs(StyledAppMain, { tabIndex: -1, appHeader: showAppHeader, mobileNav: !isSmallOrAbove, headerOffset: isSmallOrAbove ? headerEl?.offsetHeight : mobileHeaderEl?.offsetHeight, children: [banners && _jsx(StyledBannerRegion, { children: banners }, void 0), main] }, void 0))] }, void 0));
 });
 export default AppShell;
 //# sourceMappingURL=AppShell.js.map