@pega/cosmos-react-core 2.0.0-dev.9.1 → 2.0.0-rc.1

package/README.md

@@ -8,7 +8,7 @@ Cosmos is a visual design system and UI component collection. Its goal is to emp
 
 The recommended approach for using Cosmos is individual component imports to bundle with a method of your choosing.
 
-```javascript
+```tsx
 import ReactDOM from 'react-dom';
 import { SomeComponent } from '@pega/cosmos-react-core';
 
@@ -70,7 +70,7 @@ This cmd will generate a directory at /packages/cosmos-core/components/YourCompo
 
 Inside **`YourComponent.tsx`** will be some initial boilerplate:
 
-```javascript
+```ts
 import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';
 import styled from 'styled-components';
 
@@ -98,7 +98,7 @@ export default YourComponent;
 
 The **`YourComponent.stories.tsx`** file will provide a hot reloading dev environment in Storybook:
 
-```javascript
+```tsx
 import YourComponent from './YourComponent';
 
 // These are settings that storybook will use to render your component's stories

package/lib/components/Actions/Actions.js

@@ -15,7 +15,7 @@ const Actions = forwardRef(({ items, menuAt = 2, iconOnly = true }, ref) => {
                 ...restProps
             }))
         } }, void 0)) : (_jsx(_Fragment, { children: items.map(({ id, icon, text, onClick, ...restProps }) => {
-            return (_jsx(Button, Object.assign({ ref: ref, variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick === null || onClick === void 0 ? void 0 : onClick(id, event), title: icon ? text : undefined, icon: !!icon && iconOnly }, restProps, { children: icon && iconOnly ? _jsx(Icon, { name: icon }, void 0) : text }), id));
+            return (_jsx(Button, { ref: ref, variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick?.(id, event), label: icon ? text : undefined, icon: !!icon && iconOnly, ...restProps, children: icon && iconOnly ? _jsx(Icon, { name: icon }, void 0) : text }, id));
         }) }, void 0));
 });
 export default Actions;

package/lib/components/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuD,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AAWvC,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAiC,EACrE,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAC9B,KAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC5C,OAAO,EAAE,IAAI;gBACb,GAAG,SAAS;aACb,CAAC,CAAC;SACJ,WACD,CACH,CAAC,CAAC,CAAC,CACF,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;YACvD,OAAO,CACL,KAAC,MAAM,kBAEL,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,CAAC,KAAoC,EAAE,EAAE,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,EAAE,KAAK,CAAC,EACvE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9B,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,QAAQ,IACpB,SAAS,cAEZ,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,CAAC,CAAC,CAAC,IAAI,KAR1C,EAAE,CASA,CACV,CAAC;QACJ,CAAC,CAAC,WACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport { useI18n } from '../../hooks';\nimport { Action, ForwardProps, NoChildrenProp } from '../../types';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\n\nexport interface ActionsProps extends NoChildrenProp {\n  items: Action[];\n  /** @default 2 */\n  menuAt?: number;\n  /** @default true */\n  iconOnly?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst Actions: FunctionComponent<ActionsProps & ForwardProps> = forwardRef(\n  (\n    { items, menuAt = 2, iconOnly = true }: PropsWithoutRef<ActionsProps>,\n    ref: ActionsProps['ref']\n  ) => {\n    const t = useI18n();\n\n    if (!items || items.length === 0) {\n      return null;\n    }\n\n    return items.length >= menuAt ? (\n      <MenuButton\n        ref={ref}\n        text={t('actions')}\n        iconOnly\n        icon='more'\n        variant='simple'\n        menu={{\n          items: items.map(({ text, ...restProps }) => ({\n            primary: text,\n            ...restProps\n          }))\n        }}\n      />\n    ) : (\n      <>\n        {items.map(({ id, icon, text, onClick, ...restProps }) => {\n          return (\n            <Button\n              key={id}\n              ref={ref}\n              variant={icon && iconOnly ? 'simple' : undefined}\n              onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n              title={icon ? text : undefined}\n              icon={!!icon && iconOnly}\n              {...restProps}\n            >\n              {icon && iconOnly ? <Icon name={icon} /> : text}\n            </Button>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nexport default Actions;\n"]}
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuD,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AAWvC,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAiC,EACrE,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAC9B,KAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC5C,OAAO,EAAE,IAAI;gBACb,GAAG,SAAS;aACb,CAAC,CAAC;SACJ,WACD,CACH,CAAC,CAAC,CAAC,CACF,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;YACvD,OAAO,CACL,KAAC,MAAM,IAEL,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,CAAC,KAAoC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,EACvE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9B,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,QAAQ,KACpB,SAAS,YAEZ,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,CAAC,CAAC,CAAC,IAAI,IAR1C,EAAE,CASA,CACV,CAAC;QACJ,CAAC,CAAC,WACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport { useI18n } from '../../hooks';\nimport { Action, ForwardProps, NoChildrenProp } from '../../types';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\n\nexport interface ActionsProps extends NoChildrenProp {\n  items: Action[];\n  /** @default 2 */\n  menuAt?: number;\n  /** @default true */\n  iconOnly?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst Actions: FunctionComponent<ActionsProps & ForwardProps> = forwardRef(\n  (\n    { items, menuAt = 2, iconOnly = true }: PropsWithoutRef<ActionsProps>,\n    ref: ActionsProps['ref']\n  ) => {\n    const t = useI18n();\n\n    if (!items || items.length === 0) {\n      return null;\n    }\n\n    return items.length >= menuAt ? (\n      <MenuButton\n        ref={ref}\n        text={t('actions')}\n        iconOnly\n        icon='more'\n        variant='simple'\n        menu={{\n          items: items.map(({ text, ...restProps }) => ({\n            primary: text,\n            ...restProps\n          }))\n        }}\n      />\n    ) : (\n      <>\n        {items.map(({ id, icon, text, onClick, ...restProps }) => {\n          return (\n            <Button\n              key={id}\n              ref={ref}\n              variant={icon && iconOnly ? 'simple' : undefined}\n              onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n              label={icon ? text : undefined}\n              icon={!!icon && iconOnly}\n              {...restProps}\n            >\n              {icon && iconOnly ? <Icon name={icon} /> : text}\n            </Button>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nexport default Actions;\n"]}

package/lib/components/AppShell/AppHeader.d.ts

@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'react';
+import { ForwardProps } from '../../types';
 import { AppHeaderProps } from './AppShell.types';
-declare const AppHeader: FunctionComponent<AppHeaderProps>;
+declare const AppHeader: FunctionComponent<AppHeaderProps & ForwardProps>;
 export default AppHeader;
 //# sourceMappingURL=AppHeader.d.ts.map

package/lib/components/AppShell/AppHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAQ5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAkEhD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAM7E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAuE/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js

@@ -1,22 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
 import Flex from '../Flex';
 import Image from '../Image';
 import SearchInput from '../SearchInput';
-import Link from '../Link';
 import { useBreakpoint, useFocusWithin } from '../../hooks';
 import AppShellOperator from './Operator';
 import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator } from './AppShell.styles';
-const AppHeader = ({ appName, fullImageSrc, imageSrc, href, onClick, portalName, target, operator, searchInput, searchLabel }) => {
+const AppHeader = forwardRef(({ appName, fullImageSrc, imageSrc, href, onClick, portalName, target, operator, searchInput, searchLabel }, ref) => {
     const isMediumOrAbove = useBreakpoint('md');
     const searchRef = useRef(null);
     const [searchFocused, setSearchFocused] = useState(false);
     useFocusWithin([searchRef], setSearchFocused);
-    return (_jsxs(Flex, Object.assign({ as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove && searchFocused }, { children: [_jsxs(Flex, Object.assign({ as: StyledAppHeaderInfo, forwardedAs: href ? Link : 'div', container: { alignItems: 'center', gap: 1 }, onClick: onClick, href: href, "aria-label": `${appName}${portalName ? ` - ${portalName}` : ''}`, target: target, centerLogo: !fullImageSrc }, { children: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: appName }, void 0),
-                    (isMediumOrAbove || !searchFocused) && (_jsxs(_Fragment, { children: [_jsx(StyledAppHeaderText, { children: appName }, void 0),
-                            _jsx(StyledAppHeaderText, Object.assign({ variant: 'secondary' }, { children: portalName }), void 0)] }, void 0))] }), void 0),
-            searchInput ? (_jsx(StyledAppHeaderSearchForm, Object.assign({ ref: searchRef, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove }, { children: _jsx(SearchInput, Object.assign({}, searchInput), void 0) }), void 0)) : (_jsx(StyledAppHeaderSpacer, {}, void 0)),
-            _jsx(AppShellOperator, Object.assign({ as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' } }, { children: operator.avatar }), void 0)] }), void 0));
-};
+    return (_jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove && searchFocused, ref: ref, children: [_jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: href ? 'a' : 'div', href: href, onClick: onClick, target: target, children: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: '', "aria-hidden": 'true' }, void 0), (isMediumOrAbove || !searchFocused) && (_jsxs(_Fragment, { children: [_jsx(StyledAppHeaderText, { children: appName }, void 0), _jsx(StyledAppHeaderText, { variant: 'secondary', children: portalName }, void 0)] }, void 0))] }, void 0) }, void 0), searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: searchRef, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...searchInput }, void 0) }, void 0)) : (_jsx(StyledAppHeaderSpacer, {}, void 0)), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: operator.avatar }, void 0)] }, void 0));
+});
 export default AppHeader;
 //# sourceMappingURL=AppHeader.js.map

package/lib/components/AppShell/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG5D,OAAO,gBAAgB,MAAM,YAAY,CAAC;AAC1C,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,SAAS,GAAsC,CAAC,EACpD,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,UAAU,EACV,MAAM,EACN,QAAQ,EACR,WAAW,EACX,WAAW,EACI,EAAE,EAAE;IACnB,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,cAAc,CAAC,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC,CAAC;IAE9C,OAAO,CACL,MAAC,IAAI,kBACH,EAAE,EAAE,eAAe,EACnB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC3C,SAAS,EAAE,CAAC,eAAe,IAAI,aAAa,iBAE5C,MAAC,IAAI,kBACH,EAAE,EAAE,mBAAmB,EACvB,WAAW,EAAE,IAAI,CAAC,CAAC,CAAE,IAAY,CAAC,CAAC,CAAC,KAAK,EACzC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC3C,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,gBACE,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAC/D,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,CAAC,YAAY,iBAEzB,KAAC,KAAK,IAAC,GAAG,EAAE,YAAY,IAAI,QAAQ,EAAE,GAAG,EAAE,OAAO,WAAI;oBACrD,CAAC,eAAe,IAAI,CAAC,aAAa,CAAC,IAAI,CACtC,8BACE,KAAC,mBAAmB,cAAE,OAAO,WAAuB;4BACpD,KAAC,mBAAmB,kBAAC,OAAO,EAAC,WAAW,gBAAE,UAAU,YAAuB,YAC1E,CACJ,aACI;YAEN,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,yBAAyB,kBACxB,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,gBACD,WAAW,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACjC,eAAe,EAAE,eAAe,gBAEhC,KAAC,WAAW,oBAAK,WAAW,UAAI,YACN,CAC7B,CAAC,CAAC,CAAC,CACF,KAAC,qBAAqB,aAAG,CAC1B;YAED,KAAC,gBAAgB,kBACf,EAAE,EAAE,uBAAuB,EAC3B,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,gBAErC,QAAQ,CAAC,MAAM,YACC,aACd,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FunctionComponent, useRef, useState } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport Link from '../Link';\nimport { useBreakpoint, useFocusWithin } from '../../hooks';\n\nimport { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator\n} from './AppShell.styles';\n\nconst AppHeader: FunctionComponent<AppHeaderProps> = ({\n  appName,\n  fullImageSrc,\n  imageSrc,\n  href,\n  onClick,\n  portalName,\n  target,\n  operator,\n  searchInput,\n  searchLabel\n}: AppHeaderProps) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const searchRef = useRef(null);\n  const [searchFocused, setSearchFocused] = useState(false);\n\n  useFocusWithin([searchRef], setSearchFocused);\n\n  return (\n    <Flex\n      as={StyledAppHeader}\n      container={{ alignItems: 'center', pad: 1 }}\n      hideTitle={!isMediumOrAbove && searchFocused}\n    >\n      <Flex\n        as={StyledAppHeaderInfo}\n        forwardedAs={href ? (Link as any) : 'div'}\n        container={{ alignItems: 'center', gap: 1 }}\n        onClick={onClick}\n        href={href}\n        aria-label={`${appName}${portalName ? ` - ${portalName}` : ''}`}\n        target={target}\n        centerLogo={!fullImageSrc}\n      >\n        <Image src={fullImageSrc || imageSrc} alt={appName} />\n        {(isMediumOrAbove || !searchFocused) && (\n          <>\n            <StyledAppHeaderText>{appName}</StyledAppHeaderText>\n            <StyledAppHeaderText variant='secondary'>{portalName}</StyledAppHeaderText>\n          </>\n        )}\n      </Flex>\n\n      {searchInput ? (\n        <StyledAppHeaderSearchForm\n          ref={searchRef}\n          role='search'\n          aria-label={searchLabel}\n          onSubmit={e => e.preventDefault()}\n          isMediumOrAbove={isMediumOrAbove}\n        >\n          <SearchInput {...searchInput} />\n        </StyledAppHeaderSearchForm>\n      ) : (\n        <StyledAppHeaderSpacer />\n      )}\n\n      <AppShellOperator\n        as={StyledAppHeaderOperator}\n        actions={operator.actions}\n        popover={{ placement: 'bottom-start' }}\n      >\n        {operator.avatar}\n      </AppShellOperator>\n    </Flex>\n  );\n};\n\nexport default AppHeader;\n"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI5D,OAAO,gBAAgB,MAAM,YAAY,CAAC;AAC1C,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,SAAS,GAAqD,UAAU,CAC5E,CACE,EACE,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,UAAU,EACV,MAAM,EACN,QAAQ,EACR,WAAW,EACX,WAAW,EACI,EACjB,GAAiB,EACjB,EAAE;IACF,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,cAAc,CAAC,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC,CAAC;IAE9C,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,eAAe,EACnB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC3C,SAAS,EAAE,CAAC,eAAe,IAAI,aAAa,EAC5C,GAAG,EAAE,GAAG,aAER,KAAC,mBAAmB,IAAC,UAAU,EAAE,CAAC,YAAY,YAC5C,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EACzD,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,aAEd,KAAC,KAAK,IAAC,GAAG,EAAE,YAAY,IAAI,QAAQ,EAAE,GAAG,EAAC,EAAE,iBAAa,MAAM,WAAG,EACjE,CAAC,eAAe,IAAI,CAAC,aAAa,CAAC,IAAI,CACtC,8BACE,KAAC,mBAAmB,cAAE,OAAO,WAAuB,EACpD,KAAC,mBAAmB,IAAC,OAAO,EAAC,WAAW,YAAE,UAAU,WAAuB,YAC1E,CACJ,YACI,WACa,EAErB,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,yBAAyB,IACxB,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,gBACD,WAAW,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACjC,eAAe,EAAE,eAAe,YAEhC,KAAC,WAAW,OAAK,WAAW,WAAI,WACN,CAC7B,CAAC,CAAC,CAAC,CACF,KAAC,qBAAqB,aAAG,CAC1B,EAED,KAAC,gBAAgB,IACf,EAAE,EAAE,uBAAuB,EAC3B,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,YAErC,QAAQ,CAAC,MAAM,WACC,YACd,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, useRef, useState } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useFocusWithin } from '../../hooks';\nimport { ForwardProps } from '../../types';\n\nimport { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator\n} from './AppShell.styles';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n  (\n    {\n      appName,\n      fullImageSrc,\n      imageSrc,\n      href,\n      onClick,\n      portalName,\n      target,\n      operator,\n      searchInput,\n      searchLabel\n    }: AppHeaderProps,\n    ref: Ref<Element>\n  ) => {\n    const isMediumOrAbove = useBreakpoint('md');\n    const searchRef = useRef(null);\n    const [searchFocused, setSearchFocused] = useState(false);\n\n    useFocusWithin([searchRef], setSearchFocused);\n\n    return (\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove && searchFocused}\n        ref={ref}\n      >\n        <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center', gap: 1 }}\n            as={href ? 'a' : 'div'}\n            href={href}\n            onClick={onClick}\n            target={target}\n          >\n            <Image src={fullImageSrc || imageSrc} alt='' aria-hidden='true' />\n            {(isMediumOrAbove || !searchFocused) && (\n              <>\n                <StyledAppHeaderText>{appName}</StyledAppHeaderText>\n                <StyledAppHeaderText variant='secondary'>{portalName}</StyledAppHeaderText>\n              </>\n            )}\n          </Flex>\n        </StyledAppHeaderInfo>\n\n        {searchInput ? (\n          <StyledAppHeaderSearchForm\n            ref={searchRef}\n            role='search'\n            aria-label={searchLabel}\n            onSubmit={e => e.preventDefault()}\n            isMediumOrAbove={isMediumOrAbove}\n          >\n            <SearchInput {...searchInput} />\n          </StyledAppHeaderSearchForm>\n        ) : (\n          <StyledAppHeaderSpacer />\n        )}\n\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n        >\n          {operator.avatar}\n        </AppShellOperator>\n      </Flex>\n    );\n  }\n);\n\nexport default AppHeader;\n"]}

package/lib/components/AppShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWjB,EAAE,EAEH,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,aAAa,CAAC;AA0C5D,OAAO,EACL,aAAa,EAOb,UAAU,EACX,MAAM,kBAAkB,CAAC;AAsR1B,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAwFhC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAmO7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWjB,EAAE,EAIH,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,aAAa,CAAC;AA6C5D,OAAO,EACL,aAAa,EAOb,UAAU,EACX,MAAM,kBAAkB,CAAC;AAsR1B,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAmGhC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAqQ7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/AppShell.js

@@ -1,16 +1,23 @@
 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 } 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, useI18n, useBreakpoint, useConsolidatedRef, useDirection, useTheme } 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 Drawer from '../Drawer';
@@ -22,6 +29,7 @@ import AppShellOperator from './Operator';
 import AppHeader from './AppHeader';
 import SkipNavigation from './SkipNavigation';
 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;
@@ -40,7 +48,7 @@ const NavComponents = {
             };
             Component = StyledNestedNavList;
         }
-        return (_jsx(Component, Object.assign({}, fwdProps, { children: items === null || items === void 0 ? void 0 : items.map(item => (_createElement(NavComponents.ListItem, { ...item, key: item.id || item.primary }))) }), void 0));
+        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);
@@ -48,7 +56,8 @@ const NavComponents = {
         const t = useI18n();
         const hasItems = Array.isArray(items) && items.length > 0;
         const compProps = {
-            onClick
+            onClick,
+            href
         };
         let Component;
         if (actions) {
@@ -72,12 +81,11 @@ const NavComponents = {
                 ]
             };
         }
-        else if (onClick) {
-            Component = BareButton;
-        }
         else if (href) {
             Component = Link;
-            compProps.href = href;
+        }
+        else if (onClick) {
+            Component = BareButton;
         }
         else {
             Component = 'div';
@@ -91,12 +99,9 @@ const NavComponents = {
             }
         }, [navOpen]);
         const { end } = useDirection();
-        return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: hasItems ? collapseItems : true, active: !!active, navOpen: navOpen },
-            _jsxs(Component, Object.assign({}, compProps, { ref: forwardedRef }, { children: [visual,
-                    secondary ? (_jsxs(Flex, Object.assign({ container: { direction: 'column', alignItems: 'start' } }, { children: [_jsx("span", { children: primary }, void 0),
-                            _jsx(Text, Object.assign({ 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, Object.assign({ icon: true, variant: 'simple', as: StyledCaseClose, onClick: onDismiss, "aria-label": t('dismiss_case') }, { children: _jsx(Icon, { name: 'times' }, void 0) }), void 0)),
+        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))));
     }
 };
@@ -117,7 +122,7 @@ const CaseTypes = ({ caseTypes }) => {
             primary: caseType.name
         };
     });
-    return useMemo(() => (_jsx(StyledCaseTypes, Object.assign({ expanded: expanded && navOpen }, { children: _jsx(NavComponents.List, { items: [
+    return useMemo(() => (_jsx(StyledCaseTypes, { expanded: expanded && navOpen, children: _jsx(NavComponents.List, { items: [
                 {
                     primary: t('app_shell_create'),
                     visual: _jsx(Icon, { name: 'plus', as: StyledAppShellNavIcon }, void 0),
@@ -125,7 +130,7 @@ const CaseTypes = ({ caseTypes }) => {
                     items: transformedCaseTypes,
                     collapseItems: !expanded || !navOpen
                 }
-            ] }, void 0) }), void 0)), [expanded, navOpen, toggleExpanded, caseTypes]);
+            ] }, void 0) }, void 0)), [expanded, navOpen, toggleExpanded, caseTypes]);
 };
 const Links = (props) => {
     const { links } = props;
@@ -183,10 +188,11 @@ const Cases = (props) => {
 };
 // TODO: Need to add back re-focus support to drawer.
 export const Utils = ({ operator, items, appHeader }) => {
-    const { drawerOpen, setDrawerOpen } = useContext(AppShellContext);
+    const { drawerOpen, setDrawerOpen, focusedImperatively } = useContext(AppShellContext);
     const [transformedLinks, setTransformedLinks] = useState([]);
     const [item, setItem] = useState();
     const [activeUtilItem, setActiveUtilItem] = useState('');
+    const returnFocusRef = useRef(null);
     const operatorInfo = useMemo(() => appHeader
         ? []
         : [
@@ -198,18 +204,18 @@ export const Utils = ({ operator, items, appHeader }) => {
         ], [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 ? (_jsxs(StyledUtilIconCount, { children: [drawerItem.visual,
-                        _jsx(Count, Object.assign({ as: StyledCountIcon, variant: 'urgent' }, { children: drawerItem.count }), void 0)] }, void 0)) : (drawerItem.visual),
-                onClick: () => {
+                onClick: e => {
+                    returnFocusRef.current = e.currentTarget;
                     if (drawerItem.drawerView) {
                         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)
             };
         });
     };
@@ -222,7 +228,7 @@ export const Utils = ({ operator, items, appHeader }) => {
         }
     }, [items, operatorInfo]);
     useEffect(() => {
-        items === null || items === void 0 ? void 0 : items.forEach(uItem => {
+        items?.forEach(uItem => {
             if (uItem.name === activeUtilItem) {
                 setItem(uItem);
             }
@@ -234,33 +240,59 @@ export const Utils = ({ operator, items, appHeader }) => {
     }, [item]);
     useEffect(() => {
         if (!drawerOpen) {
-            setItem(undefined);
             setActiveUtilItem('');
+            focusedImperatively.current = true;
+            returnFocusRef?.current?.focus();
         }
     }, [drawerOpen]);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledUtils, { children: _jsx(NavComponents.List, { items: transformedLinks, nestedList: false }, void 0) }, void 0),
-            item && (_jsx(AppShellDrawer, { content: item.drawerView, header: item.drawerHeader || item.name, onDrawerClose: item.onDrawerClose, onDrawerOpen: item.onDrawerOpen }, void 0))] }, void 0));
+    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, searchInput, appHeader, searchLabel = 'Sitewide', // FIXME: TR
     caseTypes, links, banners, environment: { name: envName, color: envColor } = {}, main, operator, utils, cases, ...restProps } = props;
     const { appName, portalName, href: appInfoHref, imageSrc: logoSrc, ...appInfoRestProps } = appInfo;
     const t = useI18n();
-    const [navOpenState, setNavOpen] = useState(false);
+    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 [headerEl, setHeaderEl] = useElement();
+    const [mobileHeaderEl, setMobileHeaderEl] = useElement();
     const isXlOrAbove = useBreakpoint('xl');
     const isSmallOrAbove = useBreakpoint('sm');
-    const navOpen = isXlOrAbove || navOpenState;
     const showAppHeader = !!appHeader && isSmallOrAbove;
-    const openNav = useCallback(() => {
-        setNavOpen(true);
+    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 && isSmallOrAbove)
@@ -271,15 +303,22 @@ const AppShell = forwardRef((props, ref) => {
         if (key === 'Escape')
             setMobileNavOpen(false);
     }, []);
-    const navRef = useConsolidatedRef(ref);
     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]);
+    }, [navState]);
     useEffect(() => {
         if (mobileNavOpen) {
             document.addEventListener('keydown', onKeydown);
@@ -294,41 +333,29 @@ const AppShell = forwardRef((props, ref) => {
             setMobileNavOpen(false);
         }
     }, [isSmallOrAbove, mobileNavOpen]);
-    const theme = useTheme();
-    const appShellJSX = (_jsxs(Flex, Object.assign({}, restProps, { container: {
+    const appShellJSX = (_jsxs(Flex, { ...restProps, container: {
             direction: 'column',
             justify: 'between'
-        }, ref: navRef, as: StyledAppNav, appHeader: showAppHeader, navOpen: mobileNavOpen || navOpen, onFocus: onFocus, onMouseEnter: isSmallOrAbove ? openNav : undefined, onMouseLeave: isSmallOrAbove ? closeNav : undefined }, { children: [envName && (_jsx(StyledAppEnvironment, Object.assign({ item: { shrink: 0 }, color: envColor !== null && envColor !== void 0 ? envColor : theme.base.colors.red['extra-light'] }, { children: envName }), void 0)),
-            !showAppHeader && (_jsxs(StyledAppInfo, Object.assign({ as: Grid, forwardedAs: appInfoHref ? Link : 'div', href: appInfoHref, "aria-label": `${appName}${portalName ? ` - ${portalName}` : ''}` }, appInfoRestProps, { container: {
+        }, 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, Object.assign({ item: { area: 'app' }, as: 'span' }, { children: appName }), void 0),
-                    portalName && (_jsx(Grid, Object.assign({ item: { area: 'portal' }, as: 'span' }, { children: portalName }), void 0))] }), void 0)),
-            searchInput && !showAppHeader && (_jsx(StyledSearchForm, Object.assign({ role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault() }, { children: _jsx(SearchInput, Object.assign({}, searchInput), void 0) }), void 0)),
-            _jsxs(StyledScrollWrap, Object.assign({ navOpen: mobileNavOpen || navOpen }, { 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));
+                }, 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, Object.assign({ value: useMemo(() => ({
-            navOpen: mobileNavOpen || navOpen,
+    return (_jsxs(AppShellContext.Provider, { value: useMemo(() => ({
+            navOpen: mobileNavOpen || navState === 'open' || navState === 'opening',
+            navState,
             drawerOpen,
             setDrawerOpen,
             refocusEl,
             setRefocusEl,
-            focusedImperatively
-        }), [navOpen, mobileNavOpen, drawerOpen, refocusEl]) }, { children: [_jsx(SkipNavigation, {}, void 0),
-            showAppHeader && (_jsx(AppHeader, Object.assign({}, appInfo, { searchInput: searchInput, searchLabel: searchLabel, operator: operator }), void 0)),
-            isSmallOrAbove ? (appShellJSX) : (_jsxs(_Fragment, { children: [_jsx(Flex, Object.assign({ as: StyledMobileNav, container: { alignItems: 'center' } }, { children: _jsx(Button, Object.assign({ 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, Object.assign({ open: mobileNavBackdrop, transitionSpeed: 'none', onAfterTransitionIn: () => setMobileNavOpen(true), onBeforeTransitionOut: () => setMobileNavOpen(false), onClick: e => {
+            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, Object.assign({ open: mobileNavOpen, onAfterClose: () => {
+                        }, 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)),
-            _jsxs(StyledAppMain, Object.assign({ appHeader: showAppHeader, mobileNav: !isSmallOrAbove }, { children: [banners && _jsx(StyledBannerRegion, { children: banners }, void 0),
-                    main] }), void 0)] }), void 0));
+                            }, 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