@pega/cosmos-react-core 3.0.0-dev.15.0 → 3.0.0-dev.17.0

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,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYlD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAsF/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYlD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAmF/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js

@@ -1,19 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useContext, useEffect } from 'react';
+import { forwardRef, useRef, useContext, useEffect } from 'react';
 import Flex from '../Flex';
 import Image from '../Image';
 import SearchInput from '../SearchInput';
-import { useBreakpoint, useFocusWithin } from '../../hooks';
+import { useBreakpoint } from '../../hooks';
 import BareButton from '../Button/BareButton';
 import AppShellOperator from './Operator';
-import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator } from './AppShell.styles';
+import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator } from './AppHeader.styles';
 import AppShellContext from './AppShellContext';
 const AppHeader = forwardRef(({ appName, fullImageSrc, imageSrc, href, onClick, portalName, target, operator, searchInput, searchLabel, searchPage }, ref) => {
     const isMediumOrAbove = useBreakpoint('md');
     const searchRef = useRef(null);
-    const [searchFocused, setSearchFocused] = useState(false);
     const { setSearchContainerEl } = useContext(AppShellContext);
-    useFocusWithin([searchRef], setSearchFocused);
     useEffect(() => {
         if (searchPage && searchRef.current) {
             setSearchContainerEl(searchRef.current);
@@ -27,7 +25,7 @@ const AppHeader = forwardRef(({ appName, fullImageSrc, imageSrc, href, onClick,
         appInfoAs = 'a';
     else if (onClick)
         appInfoAs = BareButton;
-    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: appInfoAs, href: href, onClick: onClick, target: target, children: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: '', "aria-hidden": 'true' }), (isMediumOrAbove || !searchFocused) && (_jsxs(_Fragment, { children: [_jsx(StyledAppHeaderText, { children: appName }), _jsx(StyledAppHeaderText, { variant: 'secondary', children: portalName })] }))] }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: searchRef, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: operator.avatar })] }));
+    return (_jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, ref: ref, children: [_jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: appInfoAs, href: href, onClick: onClick, target: target, children: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: '', "aria-hidden": 'true' }), isMediumOrAbove && (_jsxs(_Fragment, { children: [_jsx(StyledAppHeaderText, { children: appName }), _jsx(StyledAppHeaderText, { variant: 'secondary', children: portalName })] }))] }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: searchRef, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: operator.avatar })] }));
 });
 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":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  Ref,\n  useRef,\n  useState,\n  ElementType,\n  useContext,\n  useEffect\n} from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useFocusWithin } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\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';\nimport AppShellContext from './AppShellContext';\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      searchPage\n    }: AppHeaderProps,\n    ref: Ref<Element>\n  ) => {\n    const isMediumOrAbove = useBreakpoint('md');\n    const searchRef = useRef<HTMLFormElement>(null);\n    const [searchFocused, setSearchFocused] = useState(false);\n    const { setSearchContainerEl } = useContext(AppShellContext);\n\n    useFocusWithin([searchRef], setSearchFocused);\n\n    useEffect(() => {\n      if (searchPage && searchRef.current) {\n        setSearchContainerEl(searchRef.current);\n      } else {\n        setSearchContainerEl(null);\n      }\n    }, [searchPage, searchRef]);\n\n    let appInfoAs: ElementType = 'div';\n    if (href) appInfoAs = 'a';\n    else if (onClick) appInfoAs = BareButton;\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={appInfoAs}\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        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={searchRef}\n              role='search'\n              aria-label={searchLabel}\n              onSubmit={e => e.preventDefault()}\n              isMediumOrAbove={isMediumOrAbove}\n            >\n              {!searchPage && <SearchInput {...searchInput} />}\n            </StyledAppHeaderSearchForm>\n          ) : (\n            <StyledAppHeaderSpacer />\n          )}\n        </Flex>\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"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  Ref,\n  useRef,\n  ElementType,\n  useContext,\n  useEffect\n} from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\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 './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\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      searchPage\n    }: AppHeaderProps,\n    ref: Ref<Element>\n  ) => {\n    const isMediumOrAbove = useBreakpoint('md');\n    const searchRef = useRef<HTMLFormElement>(null);\n    const { setSearchContainerEl } = useContext(AppShellContext);\n\n    useEffect(() => {\n      if (searchPage && searchRef.current) {\n        setSearchContainerEl(searchRef.current);\n      } else {\n        setSearchContainerEl(null);\n      }\n    }, [searchPage, searchRef]);\n\n    let appInfoAs: ElementType = 'div';\n    if (href) appInfoAs = 'a';\n    else if (onClick) appInfoAs = BareButton;\n\n    return (\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove}\n        ref={ref}\n      >\n        <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center', gap: 1 }}\n            as={appInfoAs}\n            href={href}\n            onClick={onClick}\n            target={target}\n          >\n            <Image src={fullImageSrc || imageSrc} alt='' aria-hidden='true' />\n            {isMediumOrAbove && (\n              <>\n                <StyledAppHeaderText>{appName}</StyledAppHeaderText>\n                <StyledAppHeaderText variant='secondary'>{portalName}</StyledAppHeaderText>\n              </>\n            )}\n          </Flex>\n        </StyledAppHeaderInfo>\n        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={searchRef}\n              role='search'\n              aria-label={searchLabel}\n              onSubmit={e => e.preventDefault()}\n              isMediumOrAbove={isMediumOrAbove}\n            >\n              {!searchPage && <SearchInput {...searchInput} />}\n            </StyledAppHeaderSearchForm>\n          ) : (\n            <StyledAppHeaderSpacer />\n          )}\n        </Flex>\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/AppHeader.styles.d.ts

@@ -0,0 +1,16 @@
+import { TextProps } from '../Text';
+export declare const StyledAppHeaderInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    centerLogo: boolean;
+}, never>;
+export declare const StyledAppHeaderSearchForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {
+    isMediumOrAbove: boolean;
+}, never>;
+export declare const StyledAppHeaderSpacer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppHeaderText: import("styled-components").StyledComponent<import("react").FunctionComponent<TextProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {
+    variant: TextProps['variant'];
+}, never>;
+export declare const StyledAppHeaderOperator: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {
+    hideTitle: boolean;
+}, never>;
+//# sourceMappingURL=AppHeader.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAaA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SAuBjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;qBAAkC,OAAO;SAwC9E,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aAA2B,SAAS,CAAC,SAAS,CAAC;SA0B9E,CAAC;AAIF,eAAO,MAAM,uBAAuB,4GAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;eAA8B,OAAO;SA+C/D,CAAC"}

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

@@ -0,0 +1,155 @@
+/* AppHeader styles */
+import { mix, readableColor, rgba } from 'polished';
+import styled, { css } from 'styled-components';
+import { calculateFontSize, getHoverColors } from '../../styles';
+import { defaultThemeProp } from '../../theme';
+import { tryCatch } from '../../utils';
+import { StyledImage } from '../Image';
+import { StyledMenuListContainer } from '../Menu/Menu.styles';
+import { StyledPopover } from '../Popover';
+import { StyledSearchInput } from '../SearchInput';
+import { StyledSearchButton, StyledSearchTextInput } from '../SearchInput/SearchInput.styles';
+import Text from '../Text';
+import { headerHeight } from './AppShell.styles';
+export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
+    return css `
+    & > :first-child {
+      vertical-align: top;
+    }
+
+    & > a,
+    & > button {
+      cursor: pointer;
+      text-decoration: none;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    ${StyledImage} {
+      height: 1.625rem;
+
+      ${centerLogo &&
+        css `
+        padding-inline-start: ${theme.base.spacing};
+      `}
+    }
+  `;
+});
+StyledAppHeaderInfo.defaultProps = defaultThemeProp;
+export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme }) => {
+    const headerColor = theme.components['app-shell'].header['background-color'];
+    const contrastColor = tryCatch(() => readableColor(headerColor));
+    return css `
+      max-width: 33vw;
+      min-width: 10rem;
+      width: 100%;
+      justify-self: center;
+      margin-inline-start: 0;
+      margin-inline-end: auto;
+      transition: max-width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+
+      ${!isMediumOrAbove &&
+        css `
+        max-width: 75%;
+        min-width: 2rem;
+        margin-inline-start: auto;
+
+        &:not([focused]) {
+          ${StyledSearchInput} {
+            ${StyledSearchButton} {
+              background: ${headerColor};
+              color: ${contrastColor};
+            }
+
+            ${StyledSearchTextInput} {
+              background: ${headerColor};
+            }
+          }
+        }
+
+        &:focus-within {
+          /* max-width: 100%; */
+          min-width: 10rem;
+        }
+      `}
+    `;
+});
+StyledAppHeaderSearchForm.defaultProps = defaultThemeProp;
+export const StyledAppHeaderSpacer = styled.div `
+  margin: auto;
+`;
+export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
+    const contrastColor = tryCatch(() => readableColor(theme.components['app-shell'].header['background-color']));
+    const secondaryColor = tryCatch(() => rgba(contrastColor ?? theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      color: ${variant === 'secondary' ? secondaryColor : contrastColor};
+      font-size: ${fontSize.s};
+
+      ${variant !== 'secondary' &&
+        css `
+        font-weight: ${theme.base['font-weight']['semi-bold']};
+      `}
+    `;
+});
+StyledAppHeaderText.defaultProps = defaultThemeProp;
+export const StyledAppHeaderOperator = styled.button(({ theme }) => css `
+    border-radius: 50%;
+
+    :focus {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `);
+StyledAppHeaderOperator.defaultProps = defaultThemeProp;
+export const StyledAppHeader = styled.header(({ hideTitle, theme }) => {
+    const headerColor = theme.components['app-shell'].header['background-color'];
+    const contrastColor = tryCatch(() => readableColor(headerColor));
+    const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));
+    return css `
+    position: sticky;
+    z-index: ${theme.base['z-index'].drawer};
+    top: 0;
+    gap: ${theme.base.spacing};
+    max-width: 100%;
+    height: ${headerHeight};
+    background-color: ${headerColor};
+    border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};
+
+    > :first-child {
+      justify-self: flex-start;
+      min-width: 33vw;
+
+      ${hideTitle &&
+        css `
+        min-width: fit-content;
+      `}
+    }
+
+    > ${StyledAppHeaderOperator} {
+      justify-self: flex-end;
+
+      + ${StyledPopover} {
+        &,
+        ${StyledMenuListContainer} {
+          background-color: ${headerColor};
+        }
+
+        ${StyledMenuListContainer} li {
+          color: ${contrastColor};
+          background-color: transparent;
+
+          &:hover,
+          &[data-current='true'] {
+            color: ${hoverColors.foreground};
+            background-color: ${hoverColors.background};
+          }
+        }
+      }
+    }
+  `;
+});
+StyledAppHeader.defaultProps = defaultThemeProp;
+//# sourceMappingURL=AppHeader.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["/* AppHeader styles */\n\nimport { mix, readableColor, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledImage } from '../Image';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledPopover } from '../Popover';\nimport { StyledSearchInput } from '../SearchInput';\nimport { StyledSearchButton, StyledSearchTextInput } from '../SearchInput/SearchInput.styles';\nimport Text, { TextProps } from '../Text';\n\nimport { headerHeight } from './AppShell.styles';\n\nexport const StyledAppHeaderInfo = styled.div<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n  return css`\n    & > :first-child {\n      vertical-align: top;\n    }\n\n    & > a,\n    & > button {\n      cursor: pointer;\n      text-decoration: none;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    ${StyledImage} {\n      height: 1.625rem;\n\n      ${centerLogo &&\n      css`\n        padding-inline-start: ${theme.base.spacing};\n      `}\n    }\n  `;\n});\n\nStyledAppHeaderInfo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearchForm = styled.form<{ isMediumOrAbove: boolean }>(\n  ({ isMediumOrAbove, theme }) => {\n    const headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\n\n    return css`\n      max-width: 33vw;\n      min-width: 10rem;\n      width: 100%;\n      justify-self: center;\n      margin-inline-start: 0;\n      margin-inline-end: auto;\n      transition: max-width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n      ${!isMediumOrAbove &&\n      css`\n        max-width: 75%;\n        min-width: 2rem;\n        margin-inline-start: auto;\n\n        &:not([focused]) {\n          ${StyledSearchInput} {\n            ${StyledSearchButton} {\n              background: ${headerColor};\n              color: ${contrastColor};\n            }\n\n            ${StyledSearchTextInput} {\n              background: ${headerColor};\n            }\n          }\n        }\n\n        &:focus-within {\n          /* max-width: 100%; */\n          min-width: 10rem;\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderText = styled(Text)<{ variant: TextProps['variant'] }>(\n  ({ theme, variant }) => {\n    const contrastColor = tryCatch(() =>\n      readableColor(theme.components['app-shell'].header['background-color'])\n    );\n    const secondaryColor = tryCatch(() =>\n      rgba(\n        contrastColor ?? theme.base.palette['foreground-color'],\n        theme.base.transparency['transparent-2']\n      )\n    );\n    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n    return css`\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      color: ${variant === 'secondary' ? secondaryColor : contrastColor};\n      font-size: ${fontSize.s};\n\n      ${variant !== 'secondary' &&\n      css`\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ hideTitle: boolean }>(({ hideTitle, theme }) => {\n  const headerColor = theme.components['app-shell'].header['background-color'];\n  const contrastColor = tryCatch(() => readableColor(headerColor));\n  const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));\n\n  return css`\n    position: sticky;\n    z-index: ${theme.base['z-index'].drawer};\n    top: 0;\n    gap: ${theme.base.spacing};\n    max-width: 100%;\n    height: ${headerHeight};\n    background-color: ${headerColor};\n    border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\n\n    > :first-child {\n      justify-self: flex-start;\n      min-width: 33vw;\n\n      ${hideTitle &&\n      css`\n        min-width: fit-content;\n      `}\n    }\n\n    > ${StyledAppHeaderOperator} {\n      justify-self: flex-end;\n\n      + ${StyledPopover} {\n        &,\n        ${StyledMenuListContainer} {\n          background-color: ${headerColor};\n        }\n\n        ${StyledMenuListContainer} li {\n          color: ${contrastColor};\n          background-color: transparent;\n\n          &:hover,\n          &[data-current='true'] {\n            color: ${hoverColors.foreground};\n            background-color: ${hoverColors.background};\n          }\n        }\n      }\n    }\n  `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\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,EAIH,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,aAAa,CAAC;AAgD5D,OAAO,EACL,aAAa,EAQb,UAAU,EACX,MAAM,kBAAkB,CAAC;AA8V1B,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAmGhC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAyR7D,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,EAEH,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuChD,OAAO,EACL,aAAa,EAMb,UAAU,EACX,MAAM,kBAAkB,CAAC;AAuG1B,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA4GhC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAgU7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/AppShell.js

@@ -1,11 +1,8 @@
-import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback, useEffect, useMemo, useContext, useRef, useLayoutEffect } from 'react';
+import { forwardRef, useState, useCallback, useEffect, useMemo, useContext, useRef } 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, { registerIcon } from '../Icon';
 import * as timesIcon from '../Icon/icons/times.icon';
 import * as plusIcon from '../Icon/icons/plus.icon';
@@ -13,140 +10,22 @@ 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, useElement, useTransitionState, useArrows, useUID, useAfterInitialEffect } from '../../hooks';
+import { useI18n, useBreakpoint, useConsolidatedRef, useDirection, useTheme, useElement, useTransitionState, useAfterInitialEffect } from '../../hooks';
 import { openCloseStates } from '../../hooks/useTransitionState';
 import Grid from '../Grid';
 import Button from '../Button';
 import Drawer from '../Drawer';
 import Backdrop from '../Backdrop';
-import { documentIsAvailable } from '../../utils';
+import Tooltip from '../Tooltip/Tooltip';
 import AppShellContext from './AppShellContext';
 import AppShellDrawer from './Drawer';
-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';
+import { StyledAppNav, StyledAppInfo, StyledCaseTypes, StyledScrollWrap, StyledUtils, StyledAppMain, StyledAppShellNavIcon, StyledNavCasesList, StyledAppEnvironment, StyledBannerRegion, StyledCountIcon, StyledUtilIconCount, StyledMobileNav, StyledAppshellTooltip, StyledAppshellToggleButton } from './AppShell.styles';
+import NavigationList from './NavigationList';
+import { AppShellSearch } from './AppShellSearch';
 registerIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon);
-const NavComponents = {
-    List(props) {
-        const { items = [], nestedList, collapsed, id } = props;
-        let Component = StyledNavList;
-        let ItemComponent;
-        let fwdProps = {
-            collapsed: !!collapsed
-        };
-        const { base: { animation } } = useTheme();
-        if (nestedList) {
-            fwdProps = {
-                as: ExpandCollapse,
-                forwardedAs: 'ul',
-                nullWhenCollapsed: true,
-                transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,
-                ...fwdProps
-            };
-            Component = StyledNestedNavList;
-        }
-        if (Array.isArray(items) && items.length > 0) {
-            ItemComponent = NavComponents.Menu;
-        }
-        else {
-            ItemComponent = NavComponents.ListItem;
-        }
-        return (_jsx(Component, { ...(nestedList ? { role: 'menu', id } : {}), ...fwdProps, children: items?.map(item => {
-                if (item.items && item.items.length > 0) {
-                    ItemComponent = NavComponents.Menu;
-                }
-                else {
-                    ItemComponent = NavComponents.ListItem;
-                }
-                return _jsx(ItemComponent, { isMenuItem: nestedList, ...item }, item.id || item.primary);
-            }) }));
-    },
-    ListItem(props) {
-        const { navOpen } = useContext(AppShellContext);
-        const { visual, primary, secondary, href, onClick, items, dismissible = false, onDismiss, active, actions, forwardedRef, isMenuItem, ...restProps } = props;
-        const t = useI18n();
-        const compProps = {
-            onClick,
-            href
-        };
-        let Component;
-        if (actions) {
-            Component = AppShellOperator;
-            compProps.actions = actions;
-            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;
-        }
-        else if (onClick) {
-            Component = BareButton;
-        }
-        else {
-            Component = 'div';
-        }
-        const itemRef = useConsolidatedRef(forwardedRef);
-        useEffect(() => {
-            if (!navOpen && actions) {
-                const node = document.getElementsByTagName('body')[0];
-                const clickEvent = document.createEvent('MouseEvent');
-                clickEvent.initEvent('mousedown', true, true);
-                node.dispatchEvent(clickEvent);
-            }
-            if (navOpen && isMenuItem && itemRef.current?.parentElement?.matches(':first-child'))
-                itemRef.current?.focus();
-        }, [navOpen]);
-        const { end } = useDirection();
-        return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: true },
-            _jsxs(Component, { ...compProps, ref: itemRef, ...(isMenuItem ? { tabIndex: -1, role: 'menuitem', 'aria-label': primary } : {}), children: [visual, secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { children: primary })), actions && _jsx(Icon, { name: `caret-${end}`, as: StyledAppShellNavIcon })] }),
-            dismissible && (_jsx(Button, { icon: true, variant: 'simple', as: StyledCaseClose, onClick: onDismiss, "aria-label": t('dismiss_case'), children: _jsx(Icon, { name: 'times' }) }))));
-    },
-    Menu(props) {
-        const { navOpen } = useContext(AppShellContext);
-        const { visual, primary, secondary, href, onClick, items, onDismiss, active, actions, forwardedRef, ...restProps } = props;
-        const uid = useUID();
-        const [collapsed, setCollapsed] = useState(true);
-        const toggleCollapsed = useCallback(() => {
-            setCollapsed(state => !state);
-        }, []);
-        const itemRef = useConsolidatedRef(forwardedRef);
-        const onKeyDown = useCallback(({ key }) => {
-            if (key === 'Escape') {
-                setCollapsed(true);
-                itemRef.current?.focus();
-            }
-        }, []);
-        const menuRef = useRef(null);
-        useArrows(menuRef, { selector: '[role="menuitem"]', cycle: true });
-        useFocusWithin([menuRef], useCallback(isFocused => {
-            if (!isFocused)
-                setCollapsed(true);
-        }, []));
-        const { end } = useDirection();
-        return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: collapsed, onKeyDown: onKeyDown, ref: menuRef },
-            _jsxs(BareButton, { id: uid, ref: itemRef, tabIndex: collapsed ? 0 : -1, "aria-expanded": !collapsed, "aria-controls": `${uid}-menu`, "aria-label": primary, onClick: toggleCollapsed, children: [visual, secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { children: primary })), _jsx(Icon, { name: `caret-${end}`, as: StyledAppShellNavIcon })] }),
-            _jsx(NavComponents.List, { id: `${uid}-menu`, nestedList: true, items: items, collapsed: !navOpen || collapsed })));
-    }
-};
 const CaseTypes = ({ caseTypes }) => {
     const t = useI18n();
     const transformedCaseTypes = caseTypes.map(caseType => {
@@ -155,7 +34,7 @@ const CaseTypes = ({ caseTypes }) => {
             primary: caseType.name
         };
     });
-    return useMemo(() => (_jsx(StyledCaseTypes, { children: _jsx(NavComponents.List, { items: [
+    return useMemo(() => (_jsx(StyledCaseTypes, { children: _jsx(NavigationList, { items: [
                 {
                     primary: t('app_shell_create'),
                     visual: _jsx(Icon, { name: 'plus', as: StyledAppShellNavIcon }),
@@ -182,7 +61,7 @@ const Links = (props) => {
     useEffect(() => {
         setTransformedLinks(mergedNavLinks(links));
     }, [links]);
-    return (_jsx("div", { children: _jsx(NavComponents.List, { items: transformedLinks }) }));
+    return (_jsx("div", { children: _jsx(NavigationList, { items: transformedLinks }) }));
 };
 const Cases = (props) => {
     const { cases } = props;
@@ -202,7 +81,7 @@ const Cases = (props) => {
             };
         });
     };
-    return (_jsx(StyledNavCasesList, { children: _jsx(NavComponents.List, { items: setupCases(cases) }) }));
+    return (_jsx(StyledNavCasesList, { children: _jsx(NavigationList, { items: setupCases(cases) }) }));
 };
 // TODO: Need to add back re-focus support to drawer.
 export const Utils = ({ operator, items, appHeader }) => {
@@ -211,15 +90,20 @@ export const Utils = ({ operator, items, appHeader }) => {
     const [item, setItem] = useState();
     const [activeUtilItem, setActiveUtilItem] = useState('');
     const returnFocusRef = useRef(null);
+    const { navOpen } = useContext(AppShellContext);
+    const [expanded, setExpanded] = useState(false);
+    const toggleExpanded = useCallback(() => {
+        setExpanded(state => !state);
+    }, []);
     const operatorInfo = useMemo(() => appHeader
         ? []
         : [
             {
                 primary: operator.name,
                 visual: operator.avatar,
-                actions: operator.actions
+                items: operator.actions
             }
-        ], [appHeader, operator.name, operator.avatar, operator.actions]);
+        ], [appHeader, operator.name, operator.avatar, operator.actions, expanded, navOpen]);
     // TODO: Can this be a memo instead of a state and an effect?
     const mergedUtilItems = (drawerItems) => {
         return drawerItems?.map((drawerItem) => {
@@ -230,10 +114,12 @@ export const Utils = ({ operator, items, appHeader }) => {
                         setItem(drawerItem);
                         setActiveUtilItem(drawerItem.name);
                     }
+                    toggleExpanded();
                 },
                 ...drawerItem,
                 primary: drawerItem.name,
-                visual: drawerItem.count ? (_jsxs(StyledUtilIconCount, { children: [drawerItem.visual, _jsx(Count, { as: StyledCountIcon, variant: 'urgent', children: drawerItem.count })] })) : (drawerItem.visual)
+                visual: drawerItem.count ? (_jsxs(StyledUtilIconCount, { children: [drawerItem.visual, _jsx(Count, { as: StyledCountIcon, variant: 'urgent', children: drawerItem.count })] })) : (drawerItem.visual),
+                collapseItems: !expanded || !navOpen
             };
         });
     };
@@ -263,18 +149,18 @@ export const Utils = ({ operator, items, appHeader }) => {
             returnFocusRef?.current?.focus();
         }
     }, [drawerOpen]);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledUtils, { children: _jsx(NavComponents.List
+    return (_jsxs(_Fragment, { children: [_jsx(StyledUtils, { children: _jsx(NavigationList
                 // 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) }) }), item && (_jsx(AppShellDrawer, { content: item.drawerView, header: item.drawerHeader || item.name, onDrawerClose: () => {
+                    items: transformedLinks.map(({ onDrawerOpen, onDrawerClose, ...util }) => util), collapsed: true }) }), item && (_jsx(AppShellDrawer, { content: item.drawerView, header: item.drawerHeader || item.name, onDrawerClose: () => {
                     setItem(undefined);
                     item.onDrawerClose?.();
                 }, onDrawerOpen: item.onDrawerOpen }))] }));
 };
 const AppShell = forwardRef((props, ref) => {
     const { appInfo, searchInput, appHeader, searchPage, searchLabel = 'Sitewide', // FIXME: TR
-    caseTypes, links, banners, environment: { name: envName, color: envColor } = {}, main, operator, utils, cases, ...restProps } = props;
+    caseTypes, links, banners, environment: { name: envName, color: envColor } = {}, main, operator, utils, cases, defaultExpanded = false, ...restProps } = props;
     const { appName, portalName, href: appInfoHref, onClick: appInfoOnClick, imageSrc: logoSrc, ...appInfoRestProps } = appInfo;
     let appInfoAs = 'div';
     if (appInfoHref)
@@ -287,13 +173,15 @@ const AppShell = forwardRef((props, ref) => {
     const theme = useTheme();
     const navRef = useConsolidatedRef(ref);
     const [drawerOpen, setDrawerOpen] = useState(false);
+    const [menuOpen, setMenuOpen] = 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 [appInfoEl, setAppInfoEl] = useElement();
+    const [expandCollapseEl, setExpandCollapseEl] = useElement();
     const isSmallOrAbove = useBreakpoint('sm');
     const showAppHeader = !!appHeader && isSmallOrAbove;
     const showMainContent = showAppHeader ? headerEl || mobileHeaderEl : true;
@@ -305,7 +193,7 @@ const AppShell = forwardRef((props, ref) => {
         ref: navRef,
         property: 'width',
         states: openCloseStates,
-        defaultState: isXlOrAbove ? 'open' : 'closed'
+        defaultState: defaultExpanded ? 'open' : 'closed'
     });
     const openNav = useCallback((delay = 0) => {
         if (closeNavTimeoutId.current)
@@ -322,26 +210,12 @@ const AppShell = forwardRef((props, ref) => {
         }, delay);
     }, []);
     const onFocus = useCallback(() => {
-        if (!focusedImperatively.current && isSmallOrAbove)
-            openNav();
         focusedImperatively.current = false;
     }, [openNav, isSmallOrAbove]);
     const onKeydown = useCallback(({ key }) => {
         if (key === 'Escape')
             setMobileNavOpen(false);
     }, []);
-    useFocusWithin([navRef], useCallback((isFocused, navElement) => {
-        if (!isFocused && !navElement?.matches(':hover'))
-            closeNav();
-    }, [closeNav]));
-    useLayoutEffect(() => {
-        if (isXlOrAbove) {
-            openNav();
-        }
-        else {
-            closeNav();
-        }
-    }, [isXlOrAbove, openNav, closeNav]);
     useEffect(() => {
         if (navState === 'closed' || navState === 'closing')
             setDrawerOpen(false);
@@ -363,13 +237,26 @@ const AppShell = forwardRef((props, ref) => {
     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 })), !showAppHeader && (_jsxs(StyledAppInfo, { as: Grid, forwardedAs: appInfoAs, variant: 'link', href: appInfoHref, onClick: appInfoOnClick, "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 }), _jsx(Grid, { item: { area: 'app' }, as: 'span', children: appName }), portalName && (_jsx(Grid, { item: { area: 'portal' }, as: 'span', children: portalName }))] })), searchInput && !showAppHeader && (_jsx(StyledSearchForm, { role: 'search', "aria-label": searchLabel, collapsed: ['closed', 'closing'].includes(navState), onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...searchInput }) })), _jsxs(StyledScrollWrap, { children: [caseTypes && caseTypes.length > 0 && _jsx(CaseTypes, { caseTypes: caseTypes }), links && _jsx(Links, { links: links }), cases && _jsx(Cases, { cases: cases })] }), _jsx(Utils, { appHeader: showAppHeader, operator: operator, items: utils })] }));
+        }, ref: navRef, as: StyledAppNav, appHeader: showAppHeader, navOpen: mobileNavOpen, showEnv: !!envName, onFocus: onFocus, children: [envName && (_jsx(StyledAppEnvironment, { item: { shrink: 0 }, color: envColor ?? theme.base.colors.red['extra-light'], children: envName })), !showAppHeader && (_jsxs(_Fragment, { children: [_jsxs(StyledAppInfo, { as: Grid, forwardedAs: appInfoAs, variant: 'link', href: appInfoHref, onClick: appInfoOnClick, "aria-label": `${appName}${portalName ? ` - ${portalName}` : ''}`, ...appInfoRestProps, container: {
+                            alignItems: 'center',
+                            areas: portalName ? '"logo app" "logo portal"' : '"logo app"'
+                        }, ref: setAppInfoEl, children: [_jsx(Grid, { item: { area: 'logo' }, as: Image, src: logoSrc, alt: appName }), _jsx(Grid, { item: { area: 'app' }, as: 'span', children: appName }), portalName && (_jsx(Grid, { item: { area: 'portal' }, as: 'span', children: portalName }))] }), navState === 'closed' && (_jsx(Tooltip, { target: appInfoEl, placement: 'right', as: StyledAppshellTooltip, showDelay: 'none', hideDelay: 'none', children: appName }))] })), searchInput && !showAppHeader && (_jsx(AppShellSearch, { searchLabel: searchLabel, collapsed: !mobileNavOpen && ['closed', 'closing'].includes(navState), isMediumOrAbove: isMediumOrAbove, searchInput: searchInput })), _jsxs(StyledScrollWrap, { onClick: isSmallOrAbove
+                    ? () => {
+                        if (['closing', 'closed'].includes(navState)) {
+                            openNav(0);
+                        }
+                        else {
+                            closeNav(0);
+                        }
+                    }
+                    : undefined, children: [caseTypes && caseTypes.length > 0 && _jsx(CaseTypes, { caseTypes: caseTypes }), links && _jsx(Links, { links: links }), cases && _jsx(Cases, { cases: cases })] }), _jsx(Utils, { appHeader: showAppHeader, operator: operator, items: utils }), _jsxs(Flex, { container: { justify: 'center' }, children: [_jsx(StyledAppshellToggleButton, { icon: true, ref: setExpandCollapseEl, compact: true, variant: 'simple', onClick: () => {
+                            setNavState(navState === 'closed' ? 'open' : 'closed');
+                        }, open: ['open', 'opening'].includes(navState), "aria-label": navState === 'closed' ? t('expand') : t('collapse'), children: ['closed', 'closing'].includes(navState) ? (_jsx(Icon, { name: 'arrow-micro-right' })) : (_jsx(Icon, { name: 'arrow-micro-left' })) }), ['open', 'closed'].includes(navState) && (_jsx(Tooltip, { target: expandCollapseEl, placement: 'right', as: StyledAppshellTooltip, showDelay: 'none', hideDelay: 'none', children: navState === 'closed' ? t('expand') : t('collapse') }))] })] }));
     return (_jsxs(AppShellContext.Provider, { value: useMemo(() => ({
             navOpen: mobileNavOpen || navState === 'open' || navState === 'opening',
             navState,
+            menuOpen,
+            setMenuOpen,
             drawerOpen,
             setDrawerOpen,
             refocusEl,
@@ -384,7 +271,7 @@ const AppShell = forwardRef((props, ref) => {
                                 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 }) })] })), showMainContent && (_jsxs(StyledAppMain, { appHeader: showAppHeader, mobileNav: !isSmallOrAbove, headerOffset: isSmallOrAbove ? headerEl?.offsetHeight : mobileHeaderEl?.offsetHeight, children: [banners && _jsx(StyledBannerRegion, { children: banners }), main] }))] }));
+                            }, position: 'fixed', placement: start, size: 'min(18.75rem, calc(100vw - 3.5rem))', nullWhenClosed: true, children: appShellJSX }) })] })), showMainContent && (_jsxs(StyledAppMain, { appHeader: showAppHeader, mobileNav: !isSmallOrAbove, headerOffset: isSmallOrAbove ? headerEl?.offsetHeight : mobileHeaderEl?.offsetHeight, navOpen: ['open', 'opening'].includes(navState), children: [banners && _jsx(StyledBannerRegion, { children: banners }), main] }))] }));
 });
 export default AppShell;
 //# sourceMappingURL=AppShell.js.map