npm - @pega/cosmos-react-core - Versions diffs - 10.0.0-build.5.24 → 10.0.0-build.5.26 - Mend

@pega/cosmos-react-core 10.0.0-build.5.24 → 10.0.0-build.5.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

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

	@@ -1 +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;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"}
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;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,CA0N9D,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js CHANGED Viewed

@@ -17,7 +17,7 @@ import { StyledShareIcon } from './AppShell.styles';
 import AppShellContext from './AppShellContext';
 import { getHeaderTheme } from './style-utils';
 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 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, portalSwitcher }, ref) {
     const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
     const isSmallOrAbove = useBreakpoint('sm');
@@ -75,7 +75,7 @@ const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { co
                                             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 })] }))] }) }));
+                            } })), portalSwitcher && _jsx(MenuButton, { ...portalSwitcher }), 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 CHANGED Viewed

	@@ -1 +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, 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"]}
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, 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 portalSwitcher\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 {portalSwitcher && <MenuButton {...portalSwitcher} />}\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/AppShell.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import type { AppShellProps } from './AppShell.types';
-declare const AppShell: import("react").ForwardRefExoticComponent<AppShellProps & import("react").RefAttributes<HTMLDivElement>>;
-export default AppShell;
+declare const AppShellMain: import("react").ForwardRefExoticComponent<AppShellProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AppShellMain;
 //# sourceMappingURL=AppShell.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"~~AAkEA~~,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;~~AAgFrE~~,QAAA,MAAM,~~QAAQ~~,~~0GAglBZ~~,CAAC;~~AAEH~~,eAAe,~~QAAQ~~,CAAC"}
1	+ {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAiDA,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;AAsWrE,QAAA,MAAM,YAAY,0GAuKjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/AppShell/AppShell.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback, useEffect, useMemo, useRef, useLayoutEffect } from 'react';
-import { Alert } from '../Badges';
+import { forwardRef, useState, useCallback, useMemo, useRef } from 'react';
 import Flex from '../Flex';
 import Icon, { registerIcon } from '../Icon';
 import * as timesIcon from '../Icon/icons/times.icon';
@@ -13,98 +12,59 @@ 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, useScrollToggle, useTheme, useUID, usePreviewManager, useDirection } from '../../hooks';
+import { useI18n, useBreakpoint, useConsolidatedRef, useElement, useTransitionState, useEvent, useUID, usePreviewManager, useDirection } from '../../hooks';
+import useThemeMode from '../../hooks/useThemeMode';
 import { openCloseStates } from '../../hooks/useTransitionState';
 import SkipLinks from '../SkipLinks';
 import Progress from '../Progress';
 import { registerAction } from '../ShortcutManager';
 import useShortcut from '../../hooks/useShortcut';
-import { debounce, isTouchDevice, isValidElement } from '../../utils';
+import { isTouchDevice } from '../../utils';
 import useKeyboardCommands from '../KeyboardCommands';
 import Tooltip from '../Tooltip';
-import Drawer from '../Drawer';
-import useThemeMode from '../../hooks/useThemeMode';
-import AppShellContext, { AppShellDrawerContext } from './AppShellContext';
+import AppShellContext from './AppShellContext';
 import AppHeader from './AppHeader';
-import AppShellDrawer from './Drawer';
 import AppTopNav from './AppTopNav';
-import { StyledAppMain, StyledBannerRegion, StyledMobileNav, StyledMobileMoreMenuButton, menuButtonWidth, StyledMobileMoreMenu, StyledAppShellToggleButton, StyledAppShellTooltip, StyledSidebarNav, StyledShareIcon, AppShellGlobalStyle } from './AppShell.styles';
+import { StyledAppMain, StyledBannerRegion, StyledAppShellToggleButton, StyledAppShellTooltip, StyledSidebarNav, AppShellGlobalStyle, StyledShareIcon } from './AppShell.styles';
 import { followingNodes, focusRegion } from './utils';
-import AppNavigationPanel, { CaseTypes, Links } from './AppNavigationPanel';
+import AppNavigationPanel from './AppNavigationPanel';
 import NavigationList from './NavigationList';
 import DocumentTabs, { getTabElementId, getTabPanelId } from './DocumentTabs';
 import { StyledDocumentTabPanel } from './DocumentTabs.styles';
+import TopNavDrawerProvider from './TopNavDrawerProvider';
+import TouchAppShell from './TouchAppShell';
 registerIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon, sunIcon, moonIcon, circleMixedLeftIcon, shareIcon);
 registerAction({ id: 'NextRegion', defaultKeyBinding: 'F9' }, { id: 'PrevRegion', defaultKeyBinding: 'Shift+F9' }, { id: 'KeyboardCommands', defaultKeyBinding: 'CommandOrControl+/' });
-function TopNavDrawerProvider({ children }) {
-    const [item, setItem] = useState(undefined);
-    const [drawerOpen, setDrawerOpen] = useState(false);
-    // Delay opening the drawer by one render pass after item is set.
-    // The cosmos-core Drawer only fires onAfterOpen on a false→true open transition.
-    // Batching setItem + setDrawerOpen(true) in the same event handler causes the
-    // Drawer to mount with open=true from the start (no transition), so onAfterOpen
-    // never fires and item.onDrawerOpen() (data fetching) is never called.
-    // Setting drawerOpen in a separate useEffect gives the Drawer a proper transition.
-    useEffect(() => {
-        if (item)
-            setDrawerOpen(true);
-    }, [item]);
-    const ctxValue = useMemo(() => ({
-        drawerOpen,
-        openItemName: item?.name,
-        closeDrawer: () => setDrawerOpen(false),
-        openDrawer: (next) => {
-            // Spread to create a new object reference each time so useEffect([item])
-            // always fires — even when the same item is re-opened after the drawer closes.
-            setItem({ ...next });
-        },
-        refreshDrawer: (next) => {
-            setItem({ ...next });
-        }
-    }), [drawerOpen, item?.name]);
-    return (_jsxs(AppShellDrawerContext.Provider, { value: ctxValue, children: [children, item && (_jsx(AppShellDrawer, { drawerOpen: drawerOpen, setDrawerOpen: setDrawerOpen, content: item.drawerView, header: item.drawerHeader || item.name, onDrawerClose: () => {
-                    setItem(undefined);
-                    item.onDrawerClose?.();
-                }, onDrawerOpen: item.onDrawerOpen }))] }));
-}
 const AppShell = forwardRef(function AppShell(props, ref) {
     const t = useI18n();
-    const { appInfo, contextSwitcher, searchInput, appHeader, searchPage, searchLabel = t('sitewide'), caseTypes, links, agent, banners, progress, main, operator, utils, headerUtils, helpMenu, cases, defaultExpanded = false, collapsedHoverMenus = false, shareApp, navOrientation = 'side-rail', documentTabs, ...restProps } = props;
-    const { disableScroll, enableScroll } = useScrollToggle();
+    const { appInfo, contextSwitcher, searchInput, appHeader, searchPage, searchLabel = t('sitewide'), caseTypes, links, agent, banners, progress, main, operator, utils, headerUtils, helpMenu, cases, defaultExpanded = false, collapsedHoverMenus = false, shareApp, portalSwitcher, navOrientation = 'side-rail', documentTabs, utilsList, ...restProps } = props;
+    const skipLinks = useMemo(() => [
+        {
+            label: t('go_to_main_content'),
+            target: { ariaLabel: t('main_content'), selector: 'main' }
+        }
+    ], [t]);
     const navRef = useConsolidatedRef(ref);
-    const mobileButtonRef = useRef(null);
     const navId = useUID();
     const [expandCollapseEl, setExpandCollapseEl] = useElement();
-    const [mobileNavOpen, setMobileNavOpen] = useState(false);
     const [drawerOpen, setDrawerOpen] = useState(false);
-    const [mobileNavLinksCount, setMobileNavLinksCount] = useState(0);
     const { previewActive, setPreviewActive } = usePreviewManager();
     const focusedImperatively = useRef(false);
     const [headerEl, setHeaderEl] = useElement();
-    const [mobileHeaderEl, setMobileHeaderEl] = useElement();
     const isSmallOrAbove = useBreakpoint('sm');
-    // Narrow touch devices get the bottom nav; tablets and narrow non-touch desktops use the top bar.
-    const showMobileNav = !isSmallOrAbove && isTouchDevice;
-    const isTopBar = !showMobileNav && (isTouchDevice || navOrientation === 'top-bar' || !isSmallOrAbove);
+    const isTopBar = navOrientation === 'top-bar' || !isSmallOrAbove;
     const showAppHeader = isTopBar || (!!appHeader && isSmallOrAbove);
-    const showMainContent = showAppHeader ? !!(headerEl || mobileHeaderEl) : true;
+    const showMainContent = showAppHeader ? !!headerEl : true;
     const openNavTimeoutId = useRef();
     const closeNavTimeoutId = useRef();
     const [searchContainerEl, setSearchContainerEl] = useState(null);
     const openKeyboardCommands = useKeyboardCommands();
-    const theme = useTheme();
     const { state: sidebarNavState, set: setSidebarNavState } = useTransitionState({
         ref: navRef,
         property: 'width',
         states: openCloseStates,
         defaultState: defaultExpanded ? 'open' : 'closed'
     });
-    const skipLinks = useMemo(() => [
-        {
-            label: t('go_to_main_content'),
-            target: { ariaLabel: t('main_content'), selector: 'main' }
-        }
-    ], [t]);
     const openNav = useCallback((delay = 0) => {
         if (closeNavTimeoutId.current)
             clearTimeout(closeNavTimeoutId.current);
@@ -122,59 +82,6 @@ const AppShell = forwardRef(function AppShell(props, ref) {
     const onFocus = useCallback(() => {
         focusedImperatively.current = false;
     }, []);
-    const mobileNavRef = useRef(null);
-    useEffect(() => {
-        const ac = new AbortController();
-        window.navigation.addEventListener('navigate', () => {
-            if (mobileNavOpen) {
-                setMobileNavOpen(false);
-            }
-        }, {
-            signal: ac.signal
-        });
-        return () => {
-            ac.abort();
-        };
-    }, [mobileNavOpen]);
-    useEffect(() => {
-        if (mobileNavOpen) {
-            disableScroll();
-        }
-        else {
-            enableScroll();
-        }
-    }, [mobileNavOpen]);
-    useEffect(() => {
-        if (mobileNavOpen) {
-            const onKeyDown = ({ key }) => {
-                if (key === 'Escape')
-                    setMobileNavOpen(false);
-            };
-            document.addEventListener('keydown', onKeyDown);
-            return () => {
-                document.removeEventListener('keydown', onKeyDown);
-            };
-        }
-    }, [mobileNavOpen]);
-    useEffect(() => {
-        if (isSmallOrAbove && mobileNavOpen)
-            setMobileNavOpen(false);
-    }, [isSmallOrAbove, mobileNavOpen]);
-    useLayoutEffect(() => {
-        if (!mobileHeaderEl)
-            return;
-        const resizeObserver = new ResizeObserver(debounce(() => {
-            const screenWidth = document.documentElement.clientWidth;
-            const regionsPaddingInlinePixels = 2 *
-                Number.parseInt(window.getComputedStyle(mobileHeaderEl).getPropertyValue('padding-inline-start'), 10);
-            const availableWidth = screenWidth * 0.9 - regionsPaddingInlinePixels;
-            setMobileNavLinksCount(Math.max(Math.floor(availableWidth / menuButtonWidth(theme)) - (caseTypes?.length ? 2 : 1), 0));
-        }, 0));
-        resizeObserver.observe(document.documentElement);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [mobileHeaderEl, caseTypes?.length]);
     const activatedEl = useRef(document.body);
     useEvent('click', e => {
         activatedEl.current = document.elementFromPoint(e.clientX, e.clientY) ?? document.body;
@@ -215,9 +122,62 @@ const AppShell = forwardRef(function AppShell(props, ref) {
     useShortcut('KeyboardCommands', () => {
         openKeyboardCommands();
     });
+    const { start, end } = useDirection();
+    return (_jsxs(AppShellContext.Provider, { value: useMemo(() => ({
+            navOpen: sidebarNavState === 'open' || sidebarNavState === 'opening',
+            drawerOpen,
+            setDrawerOpen,
+            collapsedHoverMenus,
+            navState: sidebarNavState,
+            focusedImperatively,
+            headerEl,
+            appHeaderEl: headerEl ?? null,
+            searchContainerEl,
+            setSearchContainerEl,
+            isMobileNav: false,
+            isTopBar,
+            previewActive,
+            setPreviewActive
+        }), [
+            sidebarNavState,
+            drawerOpen,
+            collapsedHoverMenus,
+            isTopBar,
+            headerEl,
+            searchContainerEl,
+            previewActive
+        ]), children: [_jsx(SkipLinks, { items: skipLinks }), showAppHeader && (_jsx(AppHeader, { ...appInfo, contextSwitcher: contextSwitcher, searchInput: searchInput, searchLabel: searchLabel, operator: operator, headerUtils: headerUtils, helpMenu: helpMenu, searchPage: searchPage, shareApp: shareApp, portalSwitcher: portalSwitcher, ref: setHeaderEl })), isTopBar && (_jsx(TopNavDrawerProvider, { children: _jsx(AppTopNav, { appInfo: appInfo, links: links, caseTypes: caseTypes, cases: cases, agent: agent, utils: utils, searchInput: searchInput, searchPage: searchPage, searchLabel: searchLabel }) })), !isTopBar && isSmallOrAbove && (_jsxs(Flex, { ...restProps, container: {
+                    direction: 'column',
+                    justify: 'between'
+                }, id: navId, as: StyledSidebarNav, portalAgent: !!agent, ref: navRef, "data-app-region": true, onFocus: onFocus, "aria-label": t('app_shell_main_navigation_label'), children: [_jsx(AppNavigationPanel, { navState: sidebarNavState, appInfo: !showAppHeader ? appInfo : undefined, searchInput: !showAppHeader ? searchInput : undefined, searchLabel: searchLabel, caseTypes: caseTypes, links: links, cases: cases, utils: utilsList, onClick: () => {
+                            if (['closing', 'closed'].includes(sidebarNavState)) {
+                                openNav(0);
+                            }
+                            else {
+                                closeNav(0);
+                            }
+                        }, 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') }))] })] })), showMainContent && (_jsxs(_Fragment, { children: [documentTabs && _jsx(DocumentTabs, { ...documentTabs }), (() => {
+                        const mainRegion = (_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] }));
+                        if (!documentTabs)
+                            return mainRegion;
+                        return (_jsx(StyledDocumentTabPanel, { role: 'tabpanel', id: documentTabs.currentTabId ? getTabPanelId(documentTabs.currentTabId) : undefined, "aria-labelledby": documentTabs.currentTabId ? getTabElementId(documentTabs.currentTabId) : undefined, tabIndex: 0, children: mainRegion }));
+                    })()] })), _jsx(AppShellGlobalStyle, { isTopBar: isTopBar, showAppHeader: showAppHeader, isMobile: false, hasDocumentTabs: !!documentTabs, navOpen: sidebarNavState === 'open' || sidebarNavState === 'opening' })] }));
+});
+const AppShellMain = forwardRef(function AppShellMain(props, ref) {
+    const t = useI18n();
+    const navId = useUID();
+    const { appInfo, appHeader, contextSwitcher, searchPage, searchInput, searchLabel = t('sitewide'), caseTypes, links, cases, agent, utils, operator, headerUtils, helpMenu, shareApp, banners, progress, main, documentTabs, navOrientation = 'side-rail', ...restProps } = props;
+    const isSmallOrAbove = useBreakpoint('sm');
+    const isTopBar = navOrientation === 'top-bar' || !isSmallOrAbove;
+    const showAppHeader = isTouchDevice
+        ? isSmallOrAbove
+        : isTopBar || (!!appHeader && isSmallOrAbove);
+    const { themeMode, onThemeModeChange } = useThemeMode();
     const contextSwitcherUtilItem = useMemo(() => {
         const { contexts, onContextClick, label: contextSwitcherLabel = t('switch_to') } = contextSwitcher ?? {};
-        if (!showAppHeader && contexts && contexts?.length > 1 && !!onContextClick) {
+        if (!showAppHeader && contexts && contexts.length > 1 && onContextClick) {
             return {
                 name: contextSwitcherLabel,
                 primary: contextSwitcherLabel,
@@ -227,18 +187,11 @@ const AppShell = forwardRef(function AppShell(props, ref) {
                         primary: context.primary,
                         'aria-current': !!context.selected,
                         visual: context.visual,
-                        onClick: e => {
-                            onContextClick(context.id, e);
-                        }
+                        onClick: e => onContextClick(context.id, e)
                     })), singleSelect: true }))
             };
         }
-    }, [
-        showAppHeader,
-        contextSwitcher?.contexts,
-        contextSwitcher?.label,
-        contextSwitcher?.onContextClick
-    ]);
+    }, [contextSwitcher, showAppHeader, t]);
     const shareLabel = shareApp?.label ?? t('app_shell_share');
     const shareApplicationUtilItem = useMemo(() => {
         if (!showAppHeader && shareApp) {
@@ -249,7 +202,7 @@ const AppShell = forwardRef(function AppShell(props, ref) {
                 onClick: shareApp.onClick
             };
         }
-    }, [showAppHeader, shareApp, shareLabel]);
+    }, [shareApp, shareLabel, showAppHeader]);
     const operatorInfoUtilItem = useMemo(() => {
         if (!showAppHeader && operator) {
             return {
@@ -259,17 +212,14 @@ const AppShell = forwardRef(function AppShell(props, ref) {
                 items: operator.actions
             };
         }
-    }, [showAppHeader, operator]);
-    const { themeMode, onThemeModeChange } = useThemeMode();
+    }, [operator, showAppHeader, t]);
     const themeSwitcherUtilItem = useMemo(() => {
         if (!showAppHeader && onThemeModeChange) {
-            let currentThemeIcon = 'circle-mixed-left'; // default for system
-            if (themeMode === 'dark') {
+            let currentThemeIcon = 'circle-mixed-left';
+            if (themeMode === 'dark')
                 currentThemeIcon = 'moon';
-            }
-            else if (themeMode === 'light') {
+            else if (themeMode === 'light')
                 currentThemeIcon = 'sun';
-            }
             return {
                 name: t('theme_mode'),
                 primary: t('theme_mode'),
@@ -296,8 +246,7 @@ const AppShell = forwardRef(function AppShell(props, ref) {
                 ]
             };
         }
-    }, [showAppHeader, onThemeModeChange, themeMode]);
-    const { start, end } = useDirection();
+    }, [onThemeModeChange, showAppHeader, t, themeMode]);
     const utilsList = useMemo(() => [
         ...(utils ?? []),
         ...(contextSwitcherUtilItem ? [contextSwitcherUtilItem] : []),
@@ -305,66 +254,16 @@ const AppShell = forwardRef(function AppShell(props, ref) {
         ...(operatorInfoUtilItem ? [operatorInfoUtilItem] : []),
         ...(themeSwitcherUtilItem ? [themeSwitcherUtilItem] : [])
     ], [
-        utils,
         contextSwitcherUtilItem,
-        shareApplicationUtilItem,
         operatorInfoUtilItem,
-        themeSwitcherUtilItem
+        shareApplicationUtilItem,
+        themeSwitcherUtilItem,
+        utils
     ]);
-    return (_jsxs(AppShellContext.Provider, { value: useMemo(() => ({
-            navOpen: sidebarNavState === 'open' || sidebarNavState === 'opening' || mobileNavOpen,
-            drawerOpen,
-            setDrawerOpen,
-            collapsedHoverMenus,
-            navState: sidebarNavState,
-            focusedImperatively,
-            headerEl: headerEl || mobileHeaderEl,
-            appHeaderEl: headerEl ?? null,
-            searchContainerEl,
-            setSearchContainerEl,
-            isMobileNav: showMobileNav,
-            isTopBar,
-            previewActive,
-            setPreviewActive
-        }), [
-            sidebarNavState,
-            drawerOpen,
-            mobileNavOpen,
-            showMobileNav,
-            isTopBar,
-            headerEl,
-            mobileHeaderEl,
-            searchContainerEl,
-            previewActive
-        ]), children: [_jsx(SkipLinks, { items: skipLinks }), showAppHeader && (_jsx(AppHeader, { ...appInfo, contextSwitcher: contextSwitcher, searchInput: searchInput, searchLabel: searchLabel, operator: operator, headerUtils: headerUtils, helpMenu: helpMenu, searchPage: searchPage, shareApp: shareApp, ref: setHeaderEl })), isTopBar && (_jsx(TopNavDrawerProvider, { children: _jsx(AppTopNav, { appInfo: appInfo, links: links, caseTypes: caseTypes, cases: cases, agent: agent, utils: utils, searchInput: searchInput, searchPage: searchPage, searchLabel: searchLabel }) })), !isTopBar && isSmallOrAbove && (_jsxs(Flex, { ...restProps, container: {
-                    direction: 'column',
-                    justify: 'between'
-                }, id: navId, as: StyledSidebarNav, portalAgent: !!agent, ref: navRef, "data-app-region": true, onFocus: onFocus, "aria-label": t('app_shell_main_navigation_label'), children: [_jsx(AppNavigationPanel, { navState: sidebarNavState, appInfo: !showAppHeader ? appInfo : undefined, searchInput: !showAppHeader ? searchInput : undefined, searchLabel: searchLabel, caseTypes: caseTypes, links: links, cases: cases, utils: utilsList, onClick: () => {
-                            if (['closing', 'closed'].includes(sidebarNavState)) {
-                                openNav(0);
-                            }
-                            else {
-                                closeNav(0);
-                            }
-                        }, 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') }))] })] })), showMobileNav && (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledMobileNav, container: { alignItems: 'center', gap: 0.25 }, ref: setMobileHeaderEl, "data-app-region": true, onClick: () => {
-                            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: (e) => {
-                                    setMobileNavOpen(prev => !prev);
-                                    e.stopPropagation();
-                                }, 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(_Fragment, { children: [documentTabs && _jsx(DocumentTabs, { ...documentTabs }), (() => {
-                        const mainRegion = (_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] }));
-                        if (!documentTabs)
-                            return mainRegion;
-                        return (_jsx(StyledDocumentTabPanel, { role: 'tabpanel', id: documentTabs.currentTabId ? getTabPanelId(documentTabs.currentTabId) : undefined, "aria-labelledby": documentTabs.currentTabId ? getTabElementId(documentTabs.currentTabId) : undefined, tabIndex: 0, children: mainRegion }));
-                    })()] })), _jsx(AppShellGlobalStyle, { isTopBar: isTopBar, showAppHeader: showAppHeader, isMobile: showMobileNav, hasDocumentTabs: !!documentTabs, navOpen: sidebarNavState === 'open' || sidebarNavState === 'opening' || mobileNavOpen })] }));
+    if (isTouchDevice) {
+        return (_jsx(TouchAppShell, { appInfo: appInfo, appHeader: appHeader, contextSwitcher: contextSwitcher, searchPage: searchPage, searchInput: searchInput, searchLabel: searchLabel, caseTypes: caseTypes, links: links, cases: cases, agent: agent, utils: utils, utilsList: utilsList, operator: operator, headerUtils: headerUtils, helpMenu: helpMenu, shareApp: shareApp, banners: banners, progress: progress, main: main, documentTabs: documentTabs, navId: navId, restProps: restProps }));
+    }
+    return _jsx(AppShell, { ...props, utilsList: utilsList, ref: ref });
 });
-export default AppShell;
+export default AppShellMain;
 //# sourceMappingURL=AppShell.js.map