@pega/cosmos-react-core 10.0.0-build.4.2 → 10.0.0-build.4.20

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":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAOjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAiBvD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAmJ9D,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAQjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAkBvD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAwN9D,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext, useEffect, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import Flex from '../Flex';
 import Image from '../Image';
 import Button from '../Button';
+import Icon from '../Icon';
 import SearchInput from '../SearchInput';
 import { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';
 import VisuallyHiddenText from '../VisuallyHiddenText';
@@ -11,7 +12,7 @@ import useThemeMode from '../../hooks/useThemeMode';
 import MenuButton from '../MenuButton';
 import AppShellOperator from './Operator';
 import ContextSwitcher from './ContextSwitcher';
-import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator, StyledAppHeaderLogo } from './AppHeader.styles';
+import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderName, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator, StyledAppHeaderLogo } from './AppHeader.styles';
 import { StyledShareIcon } from './AppShell.styles';
 import AppShellContext from './AppShellContext';
 import { getHeaderTheme } from './style-utils';
@@ -19,10 +20,26 @@ import ThemeSwitcher from './ThemeSwitcher';
 const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, fullImageSrc, imageSrc, imageAltText, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage, headerUtils, helpMenu, shareApp }, ref) {
     const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
+    const isSmallOrAbove = useBreakpoint('sm');
+    const [searchExpanded, setSearchExpanded] = useState(false);
     const [searchContainer, setSearchContainer] = useElement();
-    const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);
+    const { drawerOpen, isTopBar, setSearchContainerEl } = useContext(AppShellContext);
+    const searchInputRef = useRef(null);
     const theme = useTheme();
     const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);
+    // Below `md` there's no room for the app/portal name side by side, so they stack into two rows.
+    const stacked = !isMediumOrAbove;
+    const searchCollapsible = !isMediumOrAbove || isTopBar;
+    const searchDisplay = (() => {
+        if (!searchExpanded)
+            return searchCollapsible ? 'icon' : undefined;
+        if (!isSmallOrAbove)
+            return 'fullWidth';
+        if (!isMediumOrAbove)
+            return 'grow';
+        return undefined;
+    })();
+    const searchTakeover = searchDisplay === 'fullWidth';
     const shareLabel = shareApp?.label ?? t('app_shell_share');
     useEffect(() => {
         if (searchPage && searchContainer) {
@@ -32,13 +49,33 @@ const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { co
             setSearchContainerEl(null);
         }
     }, [searchPage, searchContainer, setSearchContainerEl]);
+    // Auto-collapse back to the icon when focus leaves the search area, as long as nothing was typed.
+    useEffect(() => {
+        if (!searchCollapsible || !searchExpanded || searchInput?.value || !searchContainer)
+            return undefined;
+        const handleFocusOut = (e) => {
+            const nextTarget = e.relatedTarget instanceof Node ? e.relatedTarget : null;
+            if (!searchInput?.value && !searchContainer.contains(nextTarget))
+                setSearchExpanded(false);
+        };
+        searchContainer.addEventListener('focusout', handleFocusOut);
+        return () => searchContainer.removeEventListener('focusout', handleFocusOut);
+    }, [searchCollapsible, searchExpanded, searchInput?.value, searchContainer]);
     const { themeMode, onThemeModeChange } = useThemeMode();
     let appInfoAs = 'div';
     if (href)
         appInfoAs = 'a';
-    return (_jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, drawerOpen: drawerOpen, ref: ref, children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsxs(Flex, { as: StyledAppHeaderInfo, container: { colGap: 0.5 }, centerLogo: !fullImageSrc, children: [_jsx(Flex, { container: { inline: true, alignItems: 'center' }, as: appInfoAs, href: href, onClick: href ? onClick : undefined, target: target, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [(fullImageSrc || imageSrc) && (_jsx(Flex, { container: { alignItems: 'center' }, as: StyledAppHeaderLogo, children: _jsx(Image, { src: fullImageSrc || imageSrc, alt: imageAltText ?? t('application_logo') }) })), _jsxs("div", { children: [_jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] })] }) }), headerUtils?.[0]] }), _jsxs(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: [searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})), headerUtils?.[1]] }), onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), helpMenu && (_jsx(MenuButton, { variant: 'simple', icon: 'help', text: t('app_header_help'), iconOnly: true, menu: {
-                        items: helpMenu
-                    } })), shareApp && (_jsx(Button, { variant: 'secondary', onClick: shareApp.onClick, children: _jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(StyledShareIcon, { name: 'share' }), _jsx("span", { children: shareLabel })] }) })), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.name, children: operator.avatar })] }) }));
+    return (_jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, stacked: stacked, drawerOpen: drawerOpen, ref: ref, children: [!searchTakeover && (_jsxs(_Fragment, { children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsxs(Flex, { as: StyledAppHeaderInfo, container: { colGap: 0.5 }, item: { shrink: 1 }, centerLogo: !fullImageSrc, children: [_jsx(Flex, { container: { inline: true, alignItems: 'center' }, item: { shrink: 1 }, as: appInfoAs, href: href, onClick: href ? onClick : undefined, target: target, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, item: { shrink: 1 }, children: [(fullImageSrc || imageSrc) && (_jsx(Flex, { container: { alignItems: 'center' }, item: { shrink: 0 }, as: StyledAppHeaderLogo, children: _jsx(Image, { src: fullImageSrc || imageSrc, alt: imageAltText ?? t('application_logo') }) })), _jsxs(StyledAppHeaderName, { stacked: stacked || appNameHidden, children: [_jsx(StyledAppHeaderText, { as: appNameHidden ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { variant: 'secondary', stacked: stacked || appNameHidden, children: portalName }))] })] }) }), headerUtils?.[0]] })] })), _jsxs(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: [searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), searchDisplay: searchDisplay, children: !searchPage &&
+                                (searchDisplay === 'icon' ? (_jsx(Button, { icon: true, variant: 'simple', label: t('search'), "aria-label": t('expand_search'), onClick: () => {
+                                        setSearchExpanded(true);
+                                        setTimeout(() => searchInputRef.current?.focus());
+                                    }, children: _jsx(Icon, { name: 'search' }) })) : (_jsx(SearchInput, { ...searchInput, ref: searchInputRef, onSearchSubmit: searchInput.onSearchSubmit &&
+                                        (value => {
+                                            searchInput.onSearchSubmit?.(value);
+                                            setSearchExpanded(false);
+                                        }) }))) })) : (_jsx(StyledAppHeaderSpacer, {})), !searchTakeover && headerUtils?.[1]] }), !searchTakeover && (_jsxs(_Fragment, { children: [onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), helpMenu && (_jsx(MenuButton, { variant: 'simple', icon: 'help', text: t('app_header_help'), iconOnly: true, menu: {
+                                items: helpMenu
+                            } })), shareApp && (_jsx(Button, { variant: 'secondary', onClick: shareApp.onClick, children: _jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(StyledShareIcon, { name: 'share' }), _jsx("span", { children: shareLabel })] }) })), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.name, 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 { forwardRef, useContext, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport Button from '../Button';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { ThemeOverride } from '../Configuration';\nimport useThemeMode from '../../hooks/useThemeMode';\nimport MenuButton from '../MenuButton';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator,\n  StyledAppHeaderLogo\n} from './AppHeader.styles';\nimport { StyledShareIcon } from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport { getHeaderTheme } from './style-utils';\nimport ThemeSwitcher from './ThemeSwitcher';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    appName,\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    fullImageSrc,\n    imageSrc,\n    imageAltText,\n    href,\n    onClick,\n    portalName,\n    target,\n    appNameHidden,\n    operator,\n    searchInput,\n    searchLabel,\n    searchPage,\n    headerUtils,\n    helpMenu,\n    shareApp\n  }: AppHeaderProps,\n  ref: Ref<Element>\n) {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n  const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n  const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);\n  const theme = useTheme();\n  const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n\n  const shareLabel = shareApp?.label ?? t('app_shell_share');\n\n  useEffect(() => {\n    if (searchPage && searchContainer) {\n      setSearchContainerEl(searchContainer);\n    } else {\n      setSearchContainerEl(null);\n    }\n  }, [searchPage, searchContainer, setSearchContainerEl]);\n\n  const { themeMode, onThemeModeChange } = useThemeMode();\n\n  let appInfoAs: ElementType = 'div';\n  if (href) appInfoAs = 'a';\n  return (\n    <ThemeOverride theme={headerTheme}>\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove}\n        drawerOpen={drawerOpen}\n        ref={ref}\n      >\n        {contexts && contexts.length > 1 && onContextClick && (\n          <ContextSwitcher\n            contexts={contexts}\n            onContextClick={onContextClick}\n            label={contextSwitcherLabel}\n          />\n        )}\n\n        <Flex as={StyledAppHeaderInfo} container={{ colGap: 0.5 }} centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center' }}\n            as={appInfoAs}\n            href={href}\n            onClick={href ? onClick : undefined}\n            target={target}\n          >\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              {(fullImageSrc || imageSrc) && (\n                <Flex container={{ alignItems: 'center' }} as={StyledAppHeaderLogo}>\n                  <Image\n                    src={fullImageSrc || imageSrc}\n                    alt={imageAltText ?? t('application_logo')}\n                  />\n                </Flex>\n              )}\n              <div>\n                <StyledAppHeaderText\n                  as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n                  variant='primary'\n                >\n                  {appName}\n                </StyledAppHeaderText>\n                {portalName && (\n                  <StyledAppHeaderText\n                    as={!isMediumOrAbove ? VisuallyHiddenText : 'span'}\n                    variant='secondary'\n                  >\n                    {portalName}\n                  </StyledAppHeaderText>\n                )}\n              </div>\n            </Flex>\n          </Flex>\n          {headerUtils?.[0]}\n        </Flex>\n\n        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={setSearchContainer}\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          {headerUtils?.[1]}\n        </Flex>\n        {onThemeModeChange && (\n          <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n        )}\n        {helpMenu && (\n          <MenuButton\n            variant='simple'\n            icon='help'\n            text={t('app_header_help')}\n            iconOnly\n            menu={{\n              items: helpMenu\n            }}\n          />\n        )}\n        {shareApp && (\n          <Button variant='secondary' onClick={shareApp.onClick}>\n            <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n              <StyledShareIcon name='share' />\n              <span>{shareLabel}</span>\n            </Flex>\n          </Button>\n        )}\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n          name={operator.name}\n        >\n          {operator.avatar}\n        </AppShellOperator>\n      </Flex>\n    </ThemeOverride>\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 { forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { ThemeOverride } from '../Configuration';\nimport useThemeMode from '../../hooks/useThemeMode';\nimport MenuButton from '../MenuButton';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderName,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator,\n  StyledAppHeaderLogo\n} from './AppHeader.styles';\nimport { StyledShareIcon } from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport { getHeaderTheme } from './style-utils';\nimport ThemeSwitcher from './ThemeSwitcher';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    appName,\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    fullImageSrc,\n    imageSrc,\n    imageAltText,\n    href,\n    onClick,\n    portalName,\n    target,\n    appNameHidden,\n    operator,\n    searchInput,\n    searchLabel,\n    searchPage,\n    headerUtils,\n    helpMenu,\n    shareApp\n  }: AppHeaderProps,\n  ref: Ref<Element>\n) {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n  const isSmallOrAbove = useBreakpoint('sm');\n  const [searchExpanded, setSearchExpanded] = useState(false);\n  const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n  const { drawerOpen, isTopBar, setSearchContainerEl } = useContext(AppShellContext);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const theme = useTheme();\n  const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n\n  // Below `md` there's no room for the app/portal name side by side, so they stack into two rows.\n  const stacked = !isMediumOrAbove;\n  const searchCollapsible = !isMediumOrAbove || isTopBar;\n  const searchDisplay = (() => {\n    if (!searchExpanded) return searchCollapsible ? 'icon' : undefined;\n    if (!isSmallOrAbove) return 'fullWidth';\n    if (!isMediumOrAbove) return 'grow';\n    return undefined;\n  })();\n  const searchTakeover = searchDisplay === 'fullWidth';\n\n  const shareLabel = shareApp?.label ?? t('app_shell_share');\n\n  useEffect(() => {\n    if (searchPage && searchContainer) {\n      setSearchContainerEl(searchContainer);\n    } else {\n      setSearchContainerEl(null);\n    }\n  }, [searchPage, searchContainer, setSearchContainerEl]);\n\n  // Auto-collapse back to the icon when focus leaves the search area, as long as nothing was typed.\n  useEffect(() => {\n    if (!searchCollapsible || !searchExpanded || searchInput?.value || !searchContainer)\n      return undefined;\n\n    const handleFocusOut = (e: FocusEvent) => {\n      const nextTarget = e.relatedTarget instanceof Node ? e.relatedTarget : null;\n      if (!searchInput?.value && !searchContainer.contains(nextTarget)) setSearchExpanded(false);\n    };\n\n    searchContainer.addEventListener('focusout', handleFocusOut);\n    return () => searchContainer.removeEventListener('focusout', handleFocusOut);\n  }, [searchCollapsible, searchExpanded, searchInput?.value, searchContainer]);\n\n  const { themeMode, onThemeModeChange } = useThemeMode();\n\n  let appInfoAs: ElementType = 'div';\n  if (href) appInfoAs = 'a';\n  return (\n    <ThemeOverride theme={headerTheme}>\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        stacked={stacked}\n        drawerOpen={drawerOpen}\n        ref={ref}\n      >\n        {!searchTakeover && (\n          <>\n            {contexts && contexts.length > 1 && onContextClick && (\n              <ContextSwitcher\n                contexts={contexts}\n                onContextClick={onContextClick}\n                label={contextSwitcherLabel}\n              />\n            )}\n\n            <Flex\n              as={StyledAppHeaderInfo}\n              container={{ colGap: 0.5 }}\n              item={{ shrink: 1 }}\n              centerLogo={!fullImageSrc}\n            >\n              <Flex\n                container={{ inline: true, alignItems: 'center' }}\n                item={{ shrink: 1 }}\n                as={appInfoAs}\n                href={href}\n                onClick={href ? onClick : undefined}\n                target={target}\n              >\n                <Flex container={{ alignItems: 'center', gap: 1 }} item={{ shrink: 1 }}>\n                  {(fullImageSrc || imageSrc) && (\n                    <Flex\n                      container={{ alignItems: 'center' }}\n                      item={{ shrink: 0 }}\n                      as={StyledAppHeaderLogo}\n                    >\n                      <Image\n                        src={fullImageSrc || imageSrc}\n                        alt={imageAltText ?? t('application_logo')}\n                      />\n                    </Flex>\n                  )}\n                  <StyledAppHeaderName stacked={stacked || appNameHidden}>\n                    <StyledAppHeaderText\n                      as={appNameHidden ? VisuallyHiddenText : 'span'}\n                      variant='primary'\n                    >\n                      {appName}\n                    </StyledAppHeaderText>\n                    {portalName && (\n                      <StyledAppHeaderText variant='secondary' stacked={stacked || appNameHidden}>\n                        {portalName}\n                      </StyledAppHeaderText>\n                    )}\n                  </StyledAppHeaderName>\n                </Flex>\n              </Flex>\n              {headerUtils?.[0]}\n            </Flex>\n          </>\n        )}\n\n        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={setSearchContainer}\n              role='search'\n              aria-label={searchLabel}\n              onSubmit={e => e.preventDefault()}\n              searchDisplay={searchDisplay}\n            >\n              {!searchPage &&\n                (searchDisplay === 'icon' ? (\n                  <Button\n                    icon\n                    variant='simple'\n                    label={t('search')}\n                    aria-label={t('expand_search')}\n                    onClick={() => {\n                      setSearchExpanded(true);\n                      setTimeout(() => searchInputRef.current?.focus());\n                    }}\n                  >\n                    <Icon name='search' />\n                  </Button>\n                ) : (\n                  <SearchInput\n                    {...searchInput}\n                    ref={searchInputRef}\n                    onSearchSubmit={\n                      searchInput.onSearchSubmit &&\n                      (value => {\n                        searchInput.onSearchSubmit?.(value);\n                        setSearchExpanded(false);\n                      })\n                    }\n                  />\n                ))}\n            </StyledAppHeaderSearchForm>\n          ) : (\n            <StyledAppHeaderSpacer />\n          )}\n          {!searchTakeover && headerUtils?.[1]}\n        </Flex>\n        {!searchTakeover && (\n          <>\n            {onThemeModeChange && (\n              <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n            )}\n            {helpMenu && (\n              <MenuButton\n                variant='simple'\n                icon='help'\n                text={t('app_header_help')}\n                iconOnly\n                menu={{\n                  items: helpMenu\n                }}\n              />\n            )}\n            {shareApp && (\n              <Button variant='secondary' onClick={shareApp.onClick}>\n                <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n                  <StyledShareIcon name='share' />\n                  <span>{shareLabel}</span>\n                </Flex>\n              </Button>\n            )}\n            <AppShellOperator\n              as={StyledAppHeaderOperator}\n              actions={operator.actions}\n              popover={{ placement: 'bottom-start' }}\n              name={operator.name}\n            >\n              {operator.avatar}\n            </AppShellOperator>\n          </>\n        )}\n      </Flex>\n    </ThemeOverride>\n  );\n});\n\nexport default AppHeader;\n"]}

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

@@ -4,18 +4,22 @@ export declare const StyledAppHeaderInfo: import("styled-components/dist/types")
     centerLogo: boolean;
 }>> & string;
 export declare const StyledAppHeaderSearchForm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {
-    isMediumOrAbove: boolean;
+    searchDisplay?: "icon" | "grow" | "fullWidth";
 }>> & string;
 export declare const StyledAppHeaderSpacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledAppHeaderLogo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAppHeaderName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    stacked?: boolean;
+}>> & string;
 export declare const StyledAppHeaderText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("../..").ForwardProps, "ref"> & {
     ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
 }, {
     variant: TextProps["variant"];
+    stacked?: boolean;
 }>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<TextProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledAppHeaderOperator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const StyledAppHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
-    hideTitle: boolean;
+    stacked: boolean;
     drawerOpen: boolean;
 }>> & string;
 //# sourceMappingURL=AppHeader.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,eAAO,MAAM,qBAAqB,6NAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;YA2BjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;qBAAkC,OAAO;YAuE9E,CAAC;AAIF,eAAO,MAAM,qBAAqB,6NAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,6NAI9B,CAAC;AAGH,eAAO,MAAM,mBAAmB;;;aAA2B,SAAS,CAAC,SAAS,CAAC;8HA4C7E,CAAC;AAIH,eAAO,MAAM,uBAAuB,yOAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;eAA8B,OAAO;gBAAc,OAAO;YAkErF,CAAC"}
+{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,qBAAqB,6NAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;YA2BjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;oBACpB,MAAM,GAAG,MAAM,GAAG,WAAW;YAqF9C,CAAC;AAIF,eAAO,MAAM,qBAAqB,6NAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,6NAI9B,CAAC;AAIH,eAAO,MAAM,mBAAmB;cAA0B,OAAO;YAQhE,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;aACrB,SAAS,CAAC,SAAS,CAAC;cACnB,OAAO;8HAwCjB,CAAC;AAIH,eAAO,MAAM,uBAAuB,yOAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;aAA4B,OAAO;gBAAc,OAAO;YAkEnF,CAAC"}

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

@@ -9,7 +9,6 @@ import { StyledPopover } from '../Popover';
 import { StyledSearchInput } from '../SearchInput';
 import { StyledSearchButton, StyledSearchFiltersButton, StyledSearchTextInput } from '../SearchInput/SearchInput.styles';
 import Text from '../Text';
-import { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';
 import { headerHeight, navWidth } from './AppShell.styles';
 export const StyledContextSwitcher = styled.div(({ theme }) => {
     return css `
@@ -46,7 +45,7 @@ export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
   `;
 });
 StyledAppHeaderInfo.defaultProps = defaultThemeProp;
-export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme: { base: { animation }, components: { 'app-shell': { header } } } }) => {
+export const StyledAppHeaderSearchForm = styled.form(({ searchDisplay, theme: { base: { animation }, components: { 'app-shell': { header }, input } } }) => {
     const { background: headerBg, 'search-input': { 'background-color': searchInputBg, 'foreground-color': searchInputFg, 'border-color': searchInputBorder } } = header;
     const searchBg = searchInputBg;
     const searchFg = calculateForegroundColor(headerBg, searchInputFg);
@@ -64,16 +63,28 @@ export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme:
         color: ${transparentize(0.4, searchFg)};
       }
 
-      ${!isMediumOrAbove &&
+      ${searchDisplay === 'icon' &&
         css `
-        max-width: 75%;
-        min-width: 2rem;
+        max-width: ${input.height};
+        min-width: ${input.height};
+        width: auto;
         margin-inline-start: auto;
+        margin-inline-end: 0;
+      `}
 
-        &:focus-within {
-          min-width: 10rem;
-        }
+      ${searchDisplay === 'grow' &&
+        css `
+        flex-grow: 1;
+        max-width: 100%;
+        margin-inline-end: 0;
+      `}
+
+      ${searchDisplay === 'fullWidth' &&
+        css `
+        max-width: 100%;
+        margin-inline-end: 0;
       `}
+
       &:not([focused]) {
         ${StyledSearchInput} {
           background: ${searchBg};
@@ -109,7 +120,16 @@ export const StyledAppHeaderLogo = styled.div(({ theme }) => {
   `;
 });
 StyledAppHeaderLogo.defaultProps = defaultThemeProp;
-export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
+// Shrinks the app/portal name for ellipsis truncation; stacks vertically below `md` where there's no room for both names side by side.
+export const StyledAppHeaderName = styled.div(({ theme, stacked }) => css `
+    display: flex;
+    flex-direction: ${stacked ? 'column' : 'row'};
+    align-items: ${stacked ? 'stretch' : 'baseline'};
+    gap: ${stacked ? 0 : theme.base.spacing};
+    min-width: 0;
+  `);
+StyledAppHeaderName.defaultProps = defaultThemeProp;
+export const StyledAppHeaderText = styled(Text)(({ theme, variant, stacked }) => {
     const headerBg = theme.components['app-shell'].header.background;
     const headerFgColor = theme.components['app-shell'].header['foreground-color'];
     const foregroundColor = theme.components['app-shell'].header['app-name-color'] === 'auto'
@@ -118,6 +138,9 @@ export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
     const secondaryColor = tryCatch(() => rgba(foregroundColor ?? theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
+    display: inline-block;
+    max-width: 100%;
+    min-width: 0;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -132,13 +155,8 @@ export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
 
     ${variant === 'secondary' &&
         css `
-      display: inline;
       font-size: ${fontSize};
-      align-self: flex-end;
-
-      &:not(${StyledVisuallyHiddenText}) + & {
-        margin-inline-start: ${theme.base.spacing};
-      }
+      align-self: ${stacked ? 'flex-start' : 'flex-end'};
     `}
   `;
 });
@@ -151,7 +169,7 @@ export const StyledAppHeaderOperator = styled.button(({ theme }) => css `
     }
   `);
 StyledAppHeaderOperator.defaultProps = defaultThemeProp;
-export const StyledAppHeader = styled.header(({ hideTitle, drawerOpen, theme }) => {
+export const StyledAppHeader = styled.header(({ stacked, drawerOpen, theme }) => {
     const headerBg = theme.components['app-shell'].header.background;
     const headerFgColor = theme.components['app-shell'].header['foreground-color'];
     const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
@@ -175,9 +193,9 @@ export const StyledAppHeader = styled.header(({ hideTitle, drawerOpen, theme })
         justify-self: flex-start;
         min-width: 33vw;
 
-        ${hideTitle &&
+        ${stacked &&
         css `
-          min-width: fit-content;
+          min-width: 0;
         `}
       }
 

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, rgba, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  getHoverColors,\n  calculateForegroundColor,\n  type FontSize\n} 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 {\n  StyledSearchButton,\n  StyledSearchFiltersButton,\n  StyledSearchTextInput\n} from '../SearchInput/SearchInput.styles';\nimport Text from '../Text';\nimport type { TextProps } from '../Text';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\n\nimport { headerHeight, navWidth } from './AppShell.styles';\n\nexport const StyledContextSwitcher = styled.div(({ theme }) => {\n  return css`\n    width: calc(${navWidth} - 2 * ${theme.base.spacing});\n  `;\n});\n\nStyledContextSwitcher.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderInfo = styled.div<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n  return css`\n    & > :first-child {\n      vertical-align: top;\n    }\n\n    & > :is(a, button) {\n      cursor: pointer;\n      text-decoration: none;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    & > :is(a, button):focus-visible {\n      box-shadow: ${theme.base.shadow.focus};\n      outline: none;\n    }\n\n    ${StyledImage} {\n      height: 1.0725rem;\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  ({\n    isMediumOrAbove,\n    theme: {\n      base: { animation },\n      components: {\n        'app-shell': { header }\n      }\n    }\n  }) => {\n    const {\n      background: headerBg,\n      'search-input': {\n        'background-color': searchInputBg,\n        'foreground-color': searchInputFg,\n        'border-color': searchInputBorder\n      }\n    } = header;\n\n    const searchBg = searchInputBg;\n    const searchFg = calculateForegroundColor(headerBg, searchInputFg);\n    const searchBorder = calculateForegroundColor(headerBg, searchInputBorder);\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 ${animation.speed} ${animation.timing.ease};\n\n      ${StyledSearchInput} input::placeholder {\n        color: ${transparentize(0.4, searchFg)};\n      }\n\n      ${!isMediumOrAbove &&\n      css`\n        max-width: 75%;\n        min-width: 2rem;\n        margin-inline-start: auto;\n\n        &:focus-within {\n          min-width: 10rem;\n        }\n      `}\n      &:not([focused]) {\n        ${StyledSearchInput} {\n          background: ${searchBg};\n          border-color: ${searchBorder};\n          ${StyledSearchButton} {\n            background: ${searchBg};\n            color: ${searchFg};\n            border-color: ${searchBorder};\n          }\n\n          ${StyledSearchTextInput} {\n            background: ${searchBg};\n            color: ${searchFg};\n            border-color: ${searchBorder};\n          }\n\n          ${StyledSearchFiltersButton} {\n            background: ${searchBg};\n            color: ${searchFg};\n            border-color: ${searchBorder};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderLogo = styled.div(({ theme }) => {\n  return css`\n    max-width: min(${theme.base['content-width'].sm}, 25vw);\n  `;\n});\nStyledAppHeaderLogo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderText = styled(Text)<{ variant: TextProps['variant'] }>(({\n  theme,\n  variant\n}) => {\n  const headerBg = theme.components['app-shell'].header.background;\n  const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n  const foregroundColor =\n    theme.components['app-shell'].header['app-name-color'] === 'auto'\n      ? calculateForegroundColor(headerBg, headerFgColor)\n      : theme.components['app-shell'].header['app-name-color'];\n\n  const secondaryColor = tryCatch(() =>\n    rgba(\n      foregroundColor ?? 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 : foregroundColor};\n    font-family: ${theme.components.text['brand-primary']['font-family']};\n\n    ${variant === 'primary' &&\n    css`\n      font-size: ${fontSize[theme.components.text['brand-primary']['font-size'] as FontSize]};\n      font-weight: ${theme.components.text['brand-primary']['font-weight']};\n    `}\n\n    ${variant === 'secondary' &&\n    css`\n      display: inline;\n      font-size: ${fontSize};\n      align-self: flex-end;\n\n      &:not(${StyledVisuallyHiddenText}) + & {\n        margin-inline-start: ${theme.base.spacing};\n      }\n    `}\n  `;\n});\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus-visible {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ hideTitle: boolean; drawerOpen: boolean }>(\n  ({ hideTitle, drawerOpen, theme }) => {\n    const headerBg = theme.components['app-shell'].header.background;\n    const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);\n\n    const hoverColors = getHoverColors(\n      tryCatch(\n        () => mix(0.01, theme.base.palette.interactive, headerBg),\n        () => theme.base.palette.interactive\n      )\n    );\n\n    return css`\n      position: sticky;\n      z-index: calc(${theme.base['z-index'].backdrop} - 1);\n      ${drawerOpen &&\n      css`\n        z-index: calc(${theme.base['z-index'].backdrop} - 2);\n      `}\n      top: var(--appshell-hard-top-offset, 0);\n      gap: ${theme.base.spacing};\n      max-width: 100%;\n      height: ${headerHeight};\n      background: ${headerBg};\n      color: ${foregroundColor};\n      border-bottom: solid 0.0625rem ${theme.components['app-shell'].header['border-color']};\n\n      ${StyledAppHeaderInfo} {\n        justify-self: flex-start;\n        min-width: 33vw;\n\n        ${hideTitle &&\n        css`\n          min-width: fit-content;\n        `}\n      }\n\n      ${StyledSearchFiltersButton} {\n        color: ${foregroundColor};\n      }\n\n      > ${StyledAppHeaderOperator} {\n        justify-self: flex-end;\n\n        + ${StyledPopover} {\n          &,\n          ${StyledMenuListContainer} {\n            background: ${headerBg};\n          }\n\n          ${StyledMenuListContainer} li {\n            color: ${foregroundColor};\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);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, rgba, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  getHoverColors,\n  calculateForegroundColor,\n  type FontSize\n} 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 {\n  StyledSearchButton,\n  StyledSearchFiltersButton,\n  StyledSearchTextInput\n} from '../SearchInput/SearchInput.styles';\nimport Text from '../Text';\nimport type { TextProps } from '../Text';\n\nimport { headerHeight, navWidth } from './AppShell.styles';\n\nexport const StyledContextSwitcher = styled.div(({ theme }) => {\n  return css`\n    width: calc(${navWidth} - 2 * ${theme.base.spacing});\n  `;\n});\n\nStyledContextSwitcher.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderInfo = styled.div<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n  return css`\n    & > :first-child {\n      vertical-align: top;\n    }\n\n    & > :is(a, button) {\n      cursor: pointer;\n      text-decoration: none;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    & > :is(a, button):focus-visible {\n      box-shadow: ${theme.base.shadow.focus};\n      outline: none;\n    }\n\n    ${StyledImage} {\n      height: 1.0725rem;\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<{\n  searchDisplay?: 'icon' | 'grow' | 'fullWidth';\n}>(\n  ({\n    searchDisplay,\n    theme: {\n      base: { animation },\n      components: {\n        'app-shell': { header },\n        input\n      }\n    }\n  }) => {\n    const {\n      background: headerBg,\n      'search-input': {\n        'background-color': searchInputBg,\n        'foreground-color': searchInputFg,\n        'border-color': searchInputBorder\n      }\n    } = header;\n\n    const searchBg = searchInputBg;\n    const searchFg = calculateForegroundColor(headerBg, searchInputFg);\n    const searchBorder = calculateForegroundColor(headerBg, searchInputBorder);\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 ${animation.speed} ${animation.timing.ease};\n\n      ${StyledSearchInput} input::placeholder {\n        color: ${transparentize(0.4, searchFg)};\n      }\n\n      ${searchDisplay === 'icon' &&\n      css`\n        max-width: ${input.height};\n        min-width: ${input.height};\n        width: auto;\n        margin-inline-start: auto;\n        margin-inline-end: 0;\n      `}\n\n      ${searchDisplay === 'grow' &&\n      css`\n        flex-grow: 1;\n        max-width: 100%;\n        margin-inline-end: 0;\n      `}\n\n      ${searchDisplay === 'fullWidth' &&\n      css`\n        max-width: 100%;\n        margin-inline-end: 0;\n      `}\n\n      &:not([focused]) {\n        ${StyledSearchInput} {\n          background: ${searchBg};\n          border-color: ${searchBorder};\n          ${StyledSearchButton} {\n            background: ${searchBg};\n            color: ${searchFg};\n            border-color: ${searchBorder};\n          }\n\n          ${StyledSearchTextInput} {\n            background: ${searchBg};\n            color: ${searchFg};\n            border-color: ${searchBorder};\n          }\n\n          ${StyledSearchFiltersButton} {\n            background: ${searchBg};\n            color: ${searchFg};\n            border-color: ${searchBorder};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderLogo = styled.div(({ theme }) => {\n  return css`\n    max-width: min(${theme.base['content-width'].sm}, 25vw);\n  `;\n});\nStyledAppHeaderLogo.defaultProps = defaultThemeProp;\n\n// Shrinks the app/portal name for ellipsis truncation; stacks vertically below `md` where there's no room for both names side by side.\nexport const StyledAppHeaderName = styled.div<{ stacked?: boolean }>(\n  ({ theme, stacked }) => css`\n    display: flex;\n    flex-direction: ${stacked ? 'column' : 'row'};\n    align-items: ${stacked ? 'stretch' : 'baseline'};\n    gap: ${stacked ? 0 : theme.base.spacing};\n    min-width: 0;\n  `\n);\nStyledAppHeaderName.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderText = styled(Text)<{\n  variant: TextProps['variant'];\n  stacked?: boolean;\n}>(({ theme, variant, stacked }) => {\n  const headerBg = theme.components['app-shell'].header.background;\n  const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n  const foregroundColor =\n    theme.components['app-shell'].header['app-name-color'] === 'auto'\n      ? calculateForegroundColor(headerBg, headerFgColor)\n      : theme.components['app-shell'].header['app-name-color'];\n\n  const secondaryColor = tryCatch(() =>\n    rgba(\n      foregroundColor ?? 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    display: inline-block;\n    max-width: 100%;\n    min-width: 0;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    color: ${variant === 'secondary' ? secondaryColor : foregroundColor};\n    font-family: ${theme.components.text['brand-primary']['font-family']};\n\n    ${variant === 'primary' &&\n    css`\n      font-size: ${fontSize[theme.components.text['brand-primary']['font-size'] as FontSize]};\n      font-weight: ${theme.components.text['brand-primary']['font-weight']};\n    `}\n\n    ${variant === 'secondary' &&\n    css`\n      font-size: ${fontSize};\n      align-self: ${stacked ? 'flex-start' : 'flex-end'};\n    `}\n  `;\n});\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus-visible {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ stacked: boolean; drawerOpen: boolean }>(\n  ({ stacked, drawerOpen, theme }) => {\n    const headerBg = theme.components['app-shell'].header.background;\n    const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);\n\n    const hoverColors = getHoverColors(\n      tryCatch(\n        () => mix(0.01, theme.base.palette.interactive, headerBg),\n        () => theme.base.palette.interactive\n      )\n    );\n\n    return css`\n      position: sticky;\n      z-index: calc(${theme.base['z-index'].backdrop} - 1);\n      ${drawerOpen &&\n      css`\n        z-index: calc(${theme.base['z-index'].backdrop} - 2);\n      `}\n      top: var(--appshell-hard-top-offset, 0);\n      gap: ${theme.base.spacing};\n      max-width: 100%;\n      height: ${headerHeight};\n      background: ${headerBg};\n      color: ${foregroundColor};\n      border-bottom: solid 0.0625rem ${theme.components['app-shell'].header['border-color']};\n\n      ${StyledAppHeaderInfo} {\n        justify-self: flex-start;\n        min-width: 33vw;\n\n        ${stacked &&\n        css`\n          min-width: 0;\n        `}\n      }\n\n      ${StyledSearchFiltersButton} {\n        color: ${foregroundColor};\n      }\n\n      > ${StyledAppHeaderOperator} {\n        justify-self: flex-end;\n\n        + ${StyledPopover} {\n          &,\n          ${StyledMenuListContainer} {\n            background: ${headerBg};\n          }\n\n          ${StyledMenuListContainer} li {\n            color: ${foregroundColor};\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);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AppShell/AppNavigationPanel.js

@@ -41,7 +41,7 @@ export const Links = (props) => {
                 ...link,
                 primary: link.name,
                 'aria-current': link.active ? 'page' : null,
-                visual: link.icon ? _jsx(Icon, { name: link.icon }) : null,
+                visual: link.icon ? _jsx(Icon, { name: link.icon, emphasized: link.active }) : null,
                 onClick: link.links ? undefined : link.onClick,
                 items: link.links ? mergedNavLinks(link.links) : undefined
             };

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

@@ -1 +1 @@
-{"version":3,"file":"AppNavigationPanel.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppNavigationPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useCallback, useMemo, useContext } from 'react';\nimport type { ElementType, MouseEvent } from 'react';\n\nimport Button from '../Button';\nimport Grid from '../Grid';\nimport Icon from '../Icon';\nimport Image from '../Image';\nimport Link from '../Link';\nimport Tooltip from '../Tooltip';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { useI18n, useElement } from '../../hooks';\nimport { isValidElement } from '../../utils';\n\nimport NavigationList from './NavigationList';\nimport AppShellContext, { AppShellDrawerContext } from './AppShellContext';\nimport AppShellDrawer from './Drawer';\nimport { AppShellSearch } from './AppShellSearch';\nimport {\n  StyledAppInfo,\n  StyledCaseTypes,\n  StyledScrollWrap,\n  StyledUtils,\n  StyledNavCasesList,\n  StyledCountIcon,\n  StyledUtilIconCount,\n  StyledAppShellTooltip,\n  StyledUtilsSeparator,\n  StyledAIAssistant\n} from './AppShell.styles';\nimport type {\n  AgentProps,\n  AppInfoProps,\n  CaseProps,\n  CaseTypeProps,\n  LinkProps,\n  NavListItemProps,\n  UtilItemProps,\n  UtilsProps\n} from './AppShell.types';\nimport type { AppNavigationPanelProps } from './AppNavigationPanel.types';\n\nexport const CaseTypes = ({\n  caseTypes,\n  mobileNavBar\n}: {\n  caseTypes: CaseTypeProps[];\n  mobileNavBar?: boolean;\n}) => {\n  const t = useI18n();\n\n  const transformedCaseTypes = caseTypes.map(caseType => {\n    return {\n      ...caseType,\n      visual: caseType.icon ? <Icon name={caseType.icon} /> : undefined,\n      primary: caseType.name\n    };\n  });\n\n  return useMemo(\n    () => (\n      <StyledCaseTypes>\n        <NavigationList\n          items={[\n            {\n              primary: t('app_shell_create'),\n              visual: <Icon name='plus' />,\n              items: transformedCaseTypes\n            }\n          ]}\n          mobileNavBar={mobileNavBar}\n        />\n      </StyledCaseTypes>\n    ),\n    [caseTypes, mobileNavBar]\n  );\n};\n\nexport const Links = (props: { links: LinkProps[]; mobileNavBar?: boolean }) => {\n  const { links, mobileNavBar } = props;\n  const [transformedLinks, setTransformedLinks] = useState<NavListItemProps[]>([]);\n\n  // TODO: Can this be a memo instead of a state and an effect?\n  const mergedNavLinks = (items: LinkProps[]): NavListItemProps[] => {\n    return items.map((link: LinkProps) => {\n      return {\n        ...link,\n        primary: link.name,\n        'aria-current': link.active ? 'page' : null,\n        visual: link.icon ? <Icon name={link.icon} /> : null,\n        onClick: link.links ? undefined : link.onClick,\n        items: link.links ? mergedNavLinks(link.links) : undefined\n      };\n    });\n  };\n\n  useEffect(() => {\n    setTransformedLinks(mergedNavLinks(links));\n  }, [links]);\n\n  if (!links.length) return null;\n\n  return (\n    <div>\n      <NavigationList items={transformedLinks} mobileNavBar={mobileNavBar} />\n    </div>\n  );\n};\n\nconst AIAssistant = ({ agent }: { agent: AgentProps }) => (\n  <StyledAIAssistant>\n    <NavigationList\n      items={[\n        {\n          id: agent.id,\n          primary: agent.name,\n          visual: agent.icon,\n          'aria-current': agent.active ? 'page' : null,\n          onClick: agent.onClick\n        }\n      ]}\n    />\n  </StyledAIAssistant>\n);\n\nconst Cases = (props: { cases: CaseProps[] }) => {\n  const { cases } = props;\n\n  const setupCases = (items: CaseProps[]): NavListItemProps[] => {\n    return items.map((item: CaseProps) => {\n      const {\n        id,\n        primary,\n        secondary,\n        collapsedItemInfo,\n        visual = <Icon name='case-solid' />,\n        active,\n        onClick,\n        onDismiss,\n        ...restProps\n      } = item;\n      return {\n        ...restProps,\n        id,\n        'aria-current': active ? 'page' : undefined,\n        primary,\n        secondary,\n        collapsedItemInfo,\n        active: !!active,\n        onClick,\n        onDismiss,\n        visual\n      };\n    });\n  };\n\n  return (\n    <StyledNavCasesList>\n      <NavigationList items={setupCases(cases)} />\n    </StyledNavCasesList>\n  );\n};\n\nexport const Utils = ({ items }: UtilsProps) => {\n  const { navOpen, navState, drawerOpen, setDrawerOpen } = useContext(AppShellContext);\n  const [item, setItem] = useState<UtilItemProps>();\n\n  useEffect(() => {\n    if (drawerOpen && item) {\n      setItem(\n        items?.find<UtilItemProps>(\n          (utilItem): utilItem is UtilItemProps =>\n            !isValidElement(utilItem) && utilItem.name === item.name\n        )\n      );\n    }\n  }, [items]);\n\n  const transform = useCallback(\n    (utilItem: UtilItemProps): NavListItemProps => {\n      const uItem = { ...utilItem };\n      delete uItem.onDrawerClose;\n      delete uItem.onDrawerOpen;\n      return {\n        onClick: () => {\n          if (utilItem.drawerView) {\n            setItem(utilItem);\n          }\n        },\n        ...uItem,\n        primary: utilItem.name,\n        visual: utilItem.count ? (\n          <StyledUtilIconCount>\n            {utilItem.visual}\n            <StyledCountIcon variant='urgent' id={`${utilItem.name}-count`}>\n              {utilItem.count}\n            </StyledCountIcon>\n          </StyledUtilIconCount>\n        ) : (\n          utilItem.visual\n        ),\n        collapseItems: !navOpen\n      };\n    },\n    [navOpen]\n  );\n\n  const utilItems = useMemo(() => {\n    return [\n      ...(items ?? []).map(uItem => {\n        return isValidElement(uItem) ? uItem : transform(uItem);\n      })\n    ];\n  }, [items, transform]);\n\n  useEffect(() => {\n    if (item) setDrawerOpen(true);\n  }, [item]);\n\n  useEffect(() => {\n    if (navState === 'closed' || navState === 'closing') setDrawerOpen(false);\n  }, [navState]);\n\n  // setDrawerOpen comes from AppShellContext (raw useState setter — stable reference).\n  // setItem is the local useState setter — also stable. Neither needs to be in deps.\n  // openDrawer and refreshDrawer have identical bodies: both spread `next` to create\n  // a new object reference so useEffect([item]) always fires, even when the same item\n  // is re-opened. The semantic distinction is: openDrawer starts a new drawer session\n  // (useEffect triggers setDrawerOpen(true)); refreshDrawer replaces an already-open\n  // item's content (setDrawerOpen(true) is a no-op when already open).\n  const ctxValue = useMemo(\n    () => ({\n      drawerOpen,\n      openItemName: item?.name,\n      closeDrawer: () => {\n        setDrawerOpen(false);\n      },\n      openDrawer: (next: UtilItemProps) => {\n        setItem({ ...next });\n      },\n      refreshDrawer: (next: UtilItemProps) => {\n        setItem({ ...next });\n      }\n    }),\n    [drawerOpen, item?.name]\n  );\n\n  return (\n    <AppShellDrawerContext.Provider value={ctxValue}>\n      <StyledUtils>\n        <NavigationList items={utilItems} collapsed />\n      </StyledUtils>\n\n      {item && (\n        <AppShellDrawer\n          drawerOpen={drawerOpen}\n          setDrawerOpen={setDrawerOpen}\n          content={item.drawerView}\n          header={item.drawerHeader || item.name}\n          onDrawerClose={() => {\n            setItem(undefined);\n            item.onDrawerClose?.();\n          }}\n          onDrawerOpen={item.onDrawerOpen}\n        />\n      )}\n    </AppShellDrawerContext.Provider>\n  );\n};\n\nconst AppInfo = ({ appInfo }: { appInfo: AppInfoProps }) => {\n  const [appInfoEl, setAppInfoEl] = useElement<HTMLAnchorElement>();\n  const { navState } = useContext(AppShellContext);\n\n  const {\n    appName,\n    portalName,\n    href: appInfoHref,\n    onClick: appInfoOnClick,\n    imageSrc: logoSrc,\n    appNameHidden,\n    ...appInfoRestProps\n  } = appInfo;\n\n  let appInfoAs: ElementType = 'div';\n  if (appInfoHref) appInfoAs = Link;\n  else if (appInfoOnClick) appInfoAs = Button;\n\n  return (\n    <>\n      <StyledAppInfo\n        as={Grid}\n        forwardedAs={appInfoAs}\n        variant='link'\n        href={appInfoHref}\n        onClick={appInfoOnClick}\n        aria-label={`${appName}${portalName ? ` - ${portalName}` : ''}`}\n        {...appInfoRestProps}\n        container={{\n          alignItems: 'center',\n          areas: portalName ? '\"logo app\" \"logo portal\"' : '\"logo app\"'\n        }}\n        ref={setAppInfoEl}\n        icon\n      >\n        <Grid item={{ area: 'logo' }} as={Image} src={logoSrc} alt={appName} />\n        <Grid item={{ area: 'app' }} as={appNameHidden ? VisuallyHiddenText : 'span'}>\n          {appName}\n        </Grid>\n        {portalName && (\n          <Grid item={{ area: 'portal' }} as='span'>\n            {portalName}\n          </Grid>\n        )}\n      </StyledAppInfo>\n      {navState === 'closed' && (!appNameHidden || portalName) && (\n        <Tooltip\n          target={appInfoEl}\n          placement='right'\n          as={StyledAppShellTooltip}\n          showDelay='none'\n          hideDelay='none'\n        >\n          {`${appNameHidden ? '' : appName} ${portalName ?? ''}`.trim()}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst AppNavigationPanel = ({\n  appInfo,\n  navState,\n  searchInput,\n  searchLabel,\n  onClick,\n  caseTypes,\n  links,\n  cases,\n  utils,\n  agent\n}: AppNavigationPanelProps) => {\n  return (\n    <>\n      {appInfo && <AppInfo appInfo={appInfo} />}\n      {searchInput && (\n        <AppShellSearch\n          searchLabel={searchLabel}\n          collapsed={['closed', 'closing'].includes(navState)}\n          searchInput={searchInput}\n        />\n      )}\n      <StyledScrollWrap\n        container={{ direction: 'column' }}\n        item={{ grow: 1 }}\n        tabIndex={-1}\n        onClick={(e: MouseEvent<HTMLElement>) => {\n          // Ensure that clicks on the container (not on interactive child elements) trigger the onClick handler\n          if (e.target === e.currentTarget) onClick?.();\n        }}\n      >\n        {caseTypes && caseTypes.length > 0 && <CaseTypes caseTypes={caseTypes} />}\n        {links && <Links links={links} />}\n        {cases && <Cases cases={cases} />}\n        {['open', 'opening'].includes(navState) && (\n          <StyledUtilsSeparator navOpen={['open', 'opening'].includes(navState)} />\n        )}\n      </StyledScrollWrap>\n      {['closed', 'closing'].includes(navState) && <StyledUtilsSeparator />}\n      <Utils items={utils} />\n      {agent && <AIAssistant agent={agent} />}\n    </>\n  );\n};\n\nexport default AppNavigationPanel;\n"]}
+{"version":3,"file":"AppNavigationPanel.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppNavigationPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useCallback, useMemo, useContext } from 'react';\nimport type { ElementType, MouseEvent } from 'react';\n\nimport Button from '../Button';\nimport Grid from '../Grid';\nimport Icon from '../Icon';\nimport Image from '../Image';\nimport Link from '../Link';\nimport Tooltip from '../Tooltip';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { useI18n, useElement } from '../../hooks';\nimport { isValidElement } from '../../utils';\n\nimport NavigationList from './NavigationList';\nimport AppShellContext, { AppShellDrawerContext } from './AppShellContext';\nimport AppShellDrawer from './Drawer';\nimport { AppShellSearch } from './AppShellSearch';\nimport {\n  StyledAppInfo,\n  StyledCaseTypes,\n  StyledScrollWrap,\n  StyledUtils,\n  StyledNavCasesList,\n  StyledCountIcon,\n  StyledUtilIconCount,\n  StyledAppShellTooltip,\n  StyledUtilsSeparator,\n  StyledAIAssistant\n} from './AppShell.styles';\nimport type {\n  AgentProps,\n  AppInfoProps,\n  CaseProps,\n  CaseTypeProps,\n  LinkProps,\n  NavListItemProps,\n  UtilItemProps,\n  UtilsProps\n} from './AppShell.types';\nimport type { AppNavigationPanelProps } from './AppNavigationPanel.types';\n\nexport const CaseTypes = ({\n  caseTypes,\n  mobileNavBar\n}: {\n  caseTypes: CaseTypeProps[];\n  mobileNavBar?: boolean;\n}) => {\n  const t = useI18n();\n\n  const transformedCaseTypes = caseTypes.map(caseType => {\n    return {\n      ...caseType,\n      visual: caseType.icon ? <Icon name={caseType.icon} /> : undefined,\n      primary: caseType.name\n    };\n  });\n\n  return useMemo(\n    () => (\n      <StyledCaseTypes>\n        <NavigationList\n          items={[\n            {\n              primary: t('app_shell_create'),\n              visual: <Icon name='plus' />,\n              items: transformedCaseTypes\n            }\n          ]}\n          mobileNavBar={mobileNavBar}\n        />\n      </StyledCaseTypes>\n    ),\n    [caseTypes, mobileNavBar]\n  );\n};\n\nexport const Links = (props: { links: LinkProps[]; mobileNavBar?: boolean }) => {\n  const { links, mobileNavBar } = props;\n  const [transformedLinks, setTransformedLinks] = useState<NavListItemProps[]>([]);\n\n  // TODO: Can this be a memo instead of a state and an effect?\n  const mergedNavLinks = (items: LinkProps[]): NavListItemProps[] => {\n    return items.map((link: LinkProps) => {\n      return {\n        ...link,\n        primary: link.name,\n        'aria-current': link.active ? 'page' : null,\n        visual: link.icon ? <Icon name={link.icon} emphasized={link.active} /> : null,\n        onClick: link.links ? undefined : link.onClick,\n        items: link.links ? mergedNavLinks(link.links) : undefined\n      };\n    });\n  };\n\n  useEffect(() => {\n    setTransformedLinks(mergedNavLinks(links));\n  }, [links]);\n\n  if (!links.length) return null;\n\n  return (\n    <div>\n      <NavigationList items={transformedLinks} mobileNavBar={mobileNavBar} />\n    </div>\n  );\n};\n\nconst AIAssistant = ({ agent }: { agent: AgentProps }) => (\n  <StyledAIAssistant>\n    <NavigationList\n      items={[\n        {\n          id: agent.id,\n          primary: agent.name,\n          visual: agent.icon,\n          'aria-current': agent.active ? 'page' : null,\n          onClick: agent.onClick\n        }\n      ]}\n    />\n  </StyledAIAssistant>\n);\n\nconst Cases = (props: { cases: CaseProps[] }) => {\n  const { cases } = props;\n\n  const setupCases = (items: CaseProps[]): NavListItemProps[] => {\n    return items.map((item: CaseProps) => {\n      const {\n        id,\n        primary,\n        secondary,\n        collapsedItemInfo,\n        visual = <Icon name='case-solid' />,\n        active,\n        onClick,\n        onDismiss,\n        ...restProps\n      } = item;\n      return {\n        ...restProps,\n        id,\n        'aria-current': active ? 'page' : undefined,\n        primary,\n        secondary,\n        collapsedItemInfo,\n        active: !!active,\n        onClick,\n        onDismiss,\n        visual\n      };\n    });\n  };\n\n  return (\n    <StyledNavCasesList>\n      <NavigationList items={setupCases(cases)} />\n    </StyledNavCasesList>\n  );\n};\n\nexport const Utils = ({ items }: UtilsProps) => {\n  const { navOpen, navState, drawerOpen, setDrawerOpen } = useContext(AppShellContext);\n  const [item, setItem] = useState<UtilItemProps>();\n\n  useEffect(() => {\n    if (drawerOpen && item) {\n      setItem(\n        items?.find<UtilItemProps>(\n          (utilItem): utilItem is UtilItemProps =>\n            !isValidElement(utilItem) && utilItem.name === item.name\n        )\n      );\n    }\n  }, [items]);\n\n  const transform = useCallback(\n    (utilItem: UtilItemProps): NavListItemProps => {\n      const uItem = { ...utilItem };\n      delete uItem.onDrawerClose;\n      delete uItem.onDrawerOpen;\n      return {\n        onClick: () => {\n          if (utilItem.drawerView) {\n            setItem(utilItem);\n          }\n        },\n        ...uItem,\n        primary: utilItem.name,\n        visual: utilItem.count ? (\n          <StyledUtilIconCount>\n            {utilItem.visual}\n            <StyledCountIcon variant='urgent' id={`${utilItem.name}-count`}>\n              {utilItem.count}\n            </StyledCountIcon>\n          </StyledUtilIconCount>\n        ) : (\n          utilItem.visual\n        ),\n        collapseItems: !navOpen\n      };\n    },\n    [navOpen]\n  );\n\n  const utilItems = useMemo(() => {\n    return [\n      ...(items ?? []).map(uItem => {\n        return isValidElement(uItem) ? uItem : transform(uItem);\n      })\n    ];\n  }, [items, transform]);\n\n  useEffect(() => {\n    if (item) setDrawerOpen(true);\n  }, [item]);\n\n  useEffect(() => {\n    if (navState === 'closed' || navState === 'closing') setDrawerOpen(false);\n  }, [navState]);\n\n  // setDrawerOpen comes from AppShellContext (raw useState setter — stable reference).\n  // setItem is the local useState setter — also stable. Neither needs to be in deps.\n  // openDrawer and refreshDrawer have identical bodies: both spread `next` to create\n  // a new object reference so useEffect([item]) always fires, even when the same item\n  // is re-opened. The semantic distinction is: openDrawer starts a new drawer session\n  // (useEffect triggers setDrawerOpen(true)); refreshDrawer replaces an already-open\n  // item's content (setDrawerOpen(true) is a no-op when already open).\n  const ctxValue = useMemo(\n    () => ({\n      drawerOpen,\n      openItemName: item?.name,\n      closeDrawer: () => {\n        setDrawerOpen(false);\n      },\n      openDrawer: (next: UtilItemProps) => {\n        setItem({ ...next });\n      },\n      refreshDrawer: (next: UtilItemProps) => {\n        setItem({ ...next });\n      }\n    }),\n    [drawerOpen, item?.name]\n  );\n\n  return (\n    <AppShellDrawerContext.Provider value={ctxValue}>\n      <StyledUtils>\n        <NavigationList items={utilItems} collapsed />\n      </StyledUtils>\n\n      {item && (\n        <AppShellDrawer\n          drawerOpen={drawerOpen}\n          setDrawerOpen={setDrawerOpen}\n          content={item.drawerView}\n          header={item.drawerHeader || item.name}\n          onDrawerClose={() => {\n            setItem(undefined);\n            item.onDrawerClose?.();\n          }}\n          onDrawerOpen={item.onDrawerOpen}\n        />\n      )}\n    </AppShellDrawerContext.Provider>\n  );\n};\n\nconst AppInfo = ({ appInfo }: { appInfo: AppInfoProps }) => {\n  const [appInfoEl, setAppInfoEl] = useElement<HTMLAnchorElement>();\n  const { navState } = useContext(AppShellContext);\n\n  const {\n    appName,\n    portalName,\n    href: appInfoHref,\n    onClick: appInfoOnClick,\n    imageSrc: logoSrc,\n    appNameHidden,\n    ...appInfoRestProps\n  } = appInfo;\n\n  let appInfoAs: ElementType = 'div';\n  if (appInfoHref) appInfoAs = Link;\n  else if (appInfoOnClick) appInfoAs = Button;\n\n  return (\n    <>\n      <StyledAppInfo\n        as={Grid}\n        forwardedAs={appInfoAs}\n        variant='link'\n        href={appInfoHref}\n        onClick={appInfoOnClick}\n        aria-label={`${appName}${portalName ? ` - ${portalName}` : ''}`}\n        {...appInfoRestProps}\n        container={{\n          alignItems: 'center',\n          areas: portalName ? '\"logo app\" \"logo portal\"' : '\"logo app\"'\n        }}\n        ref={setAppInfoEl}\n        icon\n      >\n        <Grid item={{ area: 'logo' }} as={Image} src={logoSrc} alt={appName} />\n        <Grid item={{ area: 'app' }} as={appNameHidden ? VisuallyHiddenText : 'span'}>\n          {appName}\n        </Grid>\n        {portalName && (\n          <Grid item={{ area: 'portal' }} as='span'>\n            {portalName}\n          </Grid>\n        )}\n      </StyledAppInfo>\n      {navState === 'closed' && (!appNameHidden || portalName) && (\n        <Tooltip\n          target={appInfoEl}\n          placement='right'\n          as={StyledAppShellTooltip}\n          showDelay='none'\n          hideDelay='none'\n        >\n          {`${appNameHidden ? '' : appName} ${portalName ?? ''}`.trim()}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst AppNavigationPanel = ({\n  appInfo,\n  navState,\n  searchInput,\n  searchLabel,\n  onClick,\n  caseTypes,\n  links,\n  cases,\n  utils,\n  agent\n}: AppNavigationPanelProps) => {\n  return (\n    <>\n      {appInfo && <AppInfo appInfo={appInfo} />}\n      {searchInput && (\n        <AppShellSearch\n          searchLabel={searchLabel}\n          collapsed={['closed', 'closing'].includes(navState)}\n          searchInput={searchInput}\n        />\n      )}\n      <StyledScrollWrap\n        container={{ direction: 'column' }}\n        item={{ grow: 1 }}\n        tabIndex={-1}\n        onClick={(e: MouseEvent<HTMLElement>) => {\n          // Ensure that clicks on the container (not on interactive child elements) trigger the onClick handler\n          if (e.target === e.currentTarget) onClick?.();\n        }}\n      >\n        {caseTypes && caseTypes.length > 0 && <CaseTypes caseTypes={caseTypes} />}\n        {links && <Links links={links} />}\n        {cases && <Cases cases={cases} />}\n        {['open', 'opening'].includes(navState) && (\n          <StyledUtilsSeparator navOpen={['open', 'opening'].includes(navState)} />\n        )}\n      </StyledScrollWrap>\n      {['closed', 'closing'].includes(navState) && <StyledUtilsSeparator />}\n      <Utils items={utils} />\n      {agent && <AIAssistant agent={agent} />}\n    </>\n  );\n};\n\nexport default AppNavigationPanel;\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":"AAmEA,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;AA8ErE,QAAA,MAAM,QAAQ,0GA4hBZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAkEA,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;AA8ErE,QAAA,MAAM,QAAQ,0GAojBZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/AppShell.js

@@ -13,13 +13,13 @@ import * as sunIcon from '../Icon/icons/sun.icon';
 import * as moonIcon from '../Icon/icons/moon.icon';
 import * as circleMixedLeftIcon from '../Icon/icons/circle-mixed-left.icon';
 import * as shareIcon from '../Icon/icons/share.icon';
-import { useI18n, useBreakpoint, useConsolidatedRef, useElement, useTransitionState, useEvent, useOuterEvent, useScrollToggle, useTheme, useUID, usePreviewManager, useDirection } from '../../hooks';
+import { useI18n, useBreakpoint, useConsolidatedRef, useElement, useTransitionState, useEvent, useScrollToggle, useTheme, useUID, usePreviewManager, useDirection } from '../../hooks';
 import { openCloseStates } from '../../hooks/useTransitionState';
 import SkipLinks from '../SkipLinks';
 import Progress from '../Progress';
 import { registerAction } from '../ShortcutManager';
 import useShortcut from '../../hooks/useShortcut';
-import { debounce, isValidElement } from '../../utils';
+import { debounce, isTouchDevice, isValidElement } from '../../utils';
 import useKeyboardCommands from '../KeyboardCommands';
 import Tooltip from '../Tooltip';
 import Drawer from '../Drawer';
@@ -81,8 +81,10 @@ const AppShell = forwardRef(function AppShell(props, ref) {
     const [headerEl, setHeaderEl] = useElement();
     const [mobileHeaderEl, setMobileHeaderEl] = useElement();
     const isSmallOrAbove = useBreakpoint('sm');
-    const isTopBar = navOrientation === 'top-bar' && isSmallOrAbove;
-    const showAppHeader = isTopBar ? isSmallOrAbove : !!appHeader && isSmallOrAbove;
+    // Touch devices at narrow widths get the bottom nav; non-touch narrow desktops fall back to top-bar.
+    const showMobileNav = !isSmallOrAbove && isTouchDevice;
+    const isTopBar = !showMobileNav && (navOrientation === 'top-bar' || !isSmallOrAbove);
+    const showAppHeader = isTopBar || (!!appHeader && isSmallOrAbove);
     const showMainContent = showAppHeader ? !!(headerEl || mobileHeaderEl) : true;
     const openNavTimeoutId = useRef();
     const closeNavTimeoutId = useRef();
@@ -119,7 +121,19 @@ const AppShell = forwardRef(function AppShell(props, ref) {
         focusedImperatively.current = false;
     }, []);
     const mobileNavRef = useRef(null);
-    useOuterEvent('focusin', [mobileNavRef, mobileButtonRef], () => setMobileNavOpen(false));
+    useEffect(() => {
+        const ac = new AbortController();
+        window.navigation.addEventListener('navigate', () => {
+            if (mobileNavOpen) {
+                setMobileNavOpen(false);
+            }
+        }, {
+            signal: ac.signal
+        });
+        return () => {
+            ac.abort();
+        };
+    }, [mobileNavOpen]);
     useEffect(() => {
         if (mobileNavOpen) {
             disableScroll();
@@ -306,14 +320,16 @@ const AppShell = forwardRef(function AppShell(props, ref) {
             appHeaderEl: headerEl ?? null,
             searchContainerEl,
             setSearchContainerEl,
-            isMobileNav: !isSmallOrAbove,
+            isMobileNav: showMobileNav,
+            isTopBar,
             previewActive,
             setPreviewActive
         }), [
             sidebarNavState,
             drawerOpen,
             mobileNavOpen,
-            isSmallOrAbove,
+            showMobileNav,
+            isTopBar,
             headerEl,
             mobileHeaderEl,
             searchContainerEl,
@@ -330,13 +346,15 @@ const AppShell = forwardRef(function AppShell(props, ref) {
                             }
                         }, agent: agent }), _jsxs(Flex, { container: { justify: 'center' }, children: [_jsx(StyledAppShellToggleButton, { icon: true, ref: setExpandCollapseEl, compact: true, variant: 'simple', onClick: () => {
                                     setSidebarNavState(sidebarNavState === 'closed' ? 'open' : 'closed');
-                                }, "aria-label": sidebarNavState === 'closed' ? t('expand_navigation') : t('collapse_navigation'), "aria-expanded": sidebarNavState === 'open' || sidebarNavState === 'opening', "aria-controls": navId, children: ['closed', 'closing'].includes(sidebarNavState) ? (_jsx(Icon, { name: `arrow-micro-${end}` })) : (_jsx(Icon, { name: `arrow-micro-${start}` })) }), ['open', 'closed'].includes(sidebarNavState) && (_jsx(Tooltip, { target: expandCollapseEl, placement: 'right', as: StyledAppShellTooltip, showDelay: 'none', hideDelay: 'none', children: sidebarNavState === 'closed' ? t('expand_navigation') : t('collapse_navigation') }))] })] })), !isSmallOrAbove && (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledMobileNav, container: { alignItems: 'center', gap: 0.25 }, ref: setMobileHeaderEl, "data-app-region": true, children: [caseTypes && caseTypes.length > 0 && _jsx(CaseTypes, { caseTypes: caseTypes, mobileNavBar: true }), links && _jsx(Links, { links: links.slice(0, mobileNavLinksCount), mobileNavBar: true }), _jsxs(StyledMobileMoreMenuButton, { ref: mobileButtonRef, variant: 'simple', onClick: () => setMobileNavOpen(prev => !prev), label: t('app_shell_more'), icon: true, "aria-expanded": mobileNavOpen, "aria-controls": navId, children: [_jsx(Icon, { name: 'bars' }), !mobileNavOpen &&
+                                }, "aria-label": sidebarNavState === 'closed' ? t('expand_navigation') : t('collapse_navigation'), "aria-expanded": sidebarNavState === 'open' || sidebarNavState === 'opening', "aria-controls": navId, children: ['closed', 'closing'].includes(sidebarNavState) ? (_jsx(Icon, { name: `arrow-micro-${end}` })) : (_jsx(Icon, { name: `arrow-micro-${start}` })) }), ['open', 'closed'].includes(sidebarNavState) && (_jsx(Tooltip, { target: expandCollapseEl, placement: 'right', as: StyledAppShellTooltip, showDelay: 'none', hideDelay: 'none', children: sidebarNavState === 'closed' ? t('expand_navigation') : t('collapse_navigation') }))] })] })), showMobileNav && (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledMobileNav, container: { alignItems: 'center', gap: 0.25 }, ref: setMobileHeaderEl, "data-app-region": true, onFocus: () => {
+                            setMobileNavOpen(false);
+                        }, children: [caseTypes && caseTypes.length > 0 && _jsx(CaseTypes, { caseTypes: caseTypes, mobileNavBar: true }), links && _jsx(Links, { links: links.slice(0, mobileNavLinksCount), mobileNavBar: true }), _jsxs(StyledMobileMoreMenuButton, { ref: mobileButtonRef, variant: 'simple', onClick: () => setMobileNavOpen(prev => !prev), label: t('app_shell_more'), icon: true, "aria-expanded": mobileNavOpen, "aria-controls": navId, children: [_jsx(Icon, { name: 'bars' }), !mobileNavOpen &&
                                         utils?.some(item => (isValidElement(item) ? false : !!item.count)) && (_jsx(Alert, { variant: 'urgent' })), _jsx("span", { children: t('app_shell_more') })] })] }), _jsx(Drawer, { open: mobileNavOpen, ref: mobileNavRef, onAfterClose: () => {
                             setMobileNavOpen(false);
                         }, position: 'fixed', placement: 'bottom', size: '100dvh', nullWhenClosed: true, children: _jsx(Flex, { ...restProps, container: {
                                 direction: 'column',
                                 justify: 'between'
-                            }, id: navId, as: StyledMobileMoreMenu, ref: ref, "aria-label": t('app_shell_main_navigation_label'), children: _jsx(AppNavigationPanel, { appInfo: appInfo, navState: 'open', searchInput: searchInput, searchLabel: searchLabel, links: links?.slice(mobileNavLinksCount), cases: cases, utils: utilsList, agent: agent }) }) })] })), showMainContent && (_jsxs(StyledAppMain, { previewActive: previewActive, isTopBar: isTopBar, "aria-busy": !!progress, "data-app-region": true, children: [_jsx(Progress, { visible: !!progress, placement: 'local', message: typeof progress === 'string' ? progress : t('loading') }), banners && _jsx(StyledBannerRegion, { children: banners }), main] })), _jsx(AppShellGlobalStyle, { isTopBar: isTopBar, showAppHeader: showAppHeader, isMobile: !isSmallOrAbove })] }));
+                            }, id: navId, as: StyledMobileMoreMenu, ref: ref, "aria-label": t('app_shell_main_navigation_label'), children: _jsx(AppNavigationPanel, { appInfo: appInfo, navState: 'open', searchInput: searchInput, searchLabel: searchLabel, links: links?.slice(mobileNavLinksCount), cases: cases, utils: utilsList, agent: agent }) }) })] })), showMainContent && (_jsxs(StyledAppMain, { previewActive: previewActive, isTopBar: isTopBar, "aria-busy": !!progress, "data-app-region": true, children: [_jsx(Progress, { visible: !!progress, placement: 'local', message: typeof progress === 'string' ? progress : t('loading') }), banners && _jsx(StyledBannerRegion, { children: banners }), main] })), _jsx(AppShellGlobalStyle, { isTopBar: isTopBar, showAppHeader: showAppHeader, isMobile: showMobileNav })] }));
 });
 export default AppShell;
 //# sourceMappingURL=AppShell.js.map