npm - @pega/cosmos-react-wss - Versions diffs - 10.0.0-build.4.8 → 10.0.0-build.5.0 - Mend

@pega/cosmos-react-wss 10.0.0-build.4.8 → 10.0.0-build.5.0

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 (34) hide show

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":"~~AA6BA~~,OAAO,KAAK,EAAE,+BAA+B,EAAkB,MAAM,yBAAyB,CAAC;AAS/F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAgBtD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,~~CAua3D~~,CAAC;AAEH,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,+BAA+B,EAAkB,MAAM,yBAAyB,CAAC;AAS/F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAgBtD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAge3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { Avatar, Backdrop, Button, ThemeOverride, ContextSwitcher, debounce, Drawer, Flex, Icon, Image, Popover, SkipLinks, Text, useBreakpoint, useConsolidatedRef, useDirection, useElement, useI18n, useOuterEvent, usePreviewManager, useTheme, VisuallyHiddenText, MenuButton, ThemeSwitcher } from '@pega/cosmos-react-core';
+import { Avatar, Backdrop, Button, ThemeOverride, ContextSwitcher, debounce, Drawer, Flex, Icon, Image, Popover, SearchInput, SkipLinks, Text, useBreakpoint, useConsolidatedRef, useDirection, useElement, useFocusWithin, useI18n, useOuterEvent, usePreviewManager, useTheme, VisuallyHiddenText, MenuButton, ThemeSwitcher } from '@pega/cosmos-react-core';
 import Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';
 import { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
@@ -12,19 +12,22 @@ import Notifications from './Notifications';
 import MobileHeaderContent from './MobileHeaderContent';
 import NavLinks from './NavLinks';
 const AppShell = forwardRef(function AppShell(props, ref) {
-    const { main, banners, appInfo, navLinks, operator, notifications, contextSwitcher = {}, navAlignment = 'end', navPosition = 'inline', isDefaultWSS = true, helpMenu, footer } = props;
+    const { main, banners, appInfo, navLinks, operator, notifications, searchInput, contextSwitcher = {}, navAlignment = 'end', navPosition = 'inline', isDefaultWSS = true, helpMenu, footer } = props;
     const t = useI18n();
     const { contexts, onContextClick, label: contextSwitcherLabel = t('switch_to') } = contextSwitcher;
     const [backdropOpen, setBackdropOpen] = useState(false);
     const [drawerOpen, setDrawerOpen] = useState(false);
     const [drawerContent, setDrawerContent] = useState('');
     const [notificationsPopover, setNotificationsPopover] = useState(false);
+    const [searchExpanded, setSearchExpanded] = useState(false);
     const [linksCollapsed, setLinksCollapsed] = useState(false);
     const [hasMobileNav, setHasMobileNav] = useState(true);
     const [headerEl, setHeaderEl] = useElement();
     const [navSectionEl, setNavSectionEl] = useElement();
     const [popoverEl, setPopoverEl] = useElement();
     const [notificationsButtonEl, setNotificationsButtonEl] = useElement();
+    const [searchContainerEl, setSearchContainerEl] = useElement();
+    const searchInputRef = useRef(null);
     const minInlineWidth = useRef(0);
     const theme = useTheme();
     const { previewActive } = usePreviewManager();
@@ -61,35 +64,50 @@ const AppShell = forwardRef(function AppShell(props, ref) {
             setLinksCollapsed(false);
         }
     }, 100);
+    useEffect(() => {
+        minInlineWidth.current = 0;
+        if (isSmallOrAbove) {
+            setLinksCollapsed(false);
+        }
+    }, [isSmallOrAbove, navAlignment, navLinks, navPosition, isDefaultWSS]);
     useEffect(() => {
         const resizeObserver = new ResizeObserver(debouncedResize);
+        const intersectionRoot = navSectionEl;
         const intersectionObserver = new IntersectionObserver(entries => {
-            if (entries[0].intersectionRatio > 0 &&
-                entries[0].intersectionRatio < 1 &&
-                !linksCollapsed) {
+            if (entries.some(({ intersectionRatio }) => intersectionRatio < 1) && !linksCollapsed) {
                 if (headerEl)
                     minInlineWidth.current = headerEl.clientWidth + 1;
                 setLinksCollapsed(true);
             }
             else if (navSectionEl)
                 navSectionEl.style.visibility = 'visible';
-        }, { root: navPosition === 'below' ? null : navSectionEl, threshold: 1 });
-        if (headerEl && navSectionEl?.firstChild && navSectionEl?.lastChild) {
-            intersectionObserver.observe(navAlignment === 'start'
-                ? navSectionEl.lastChild
-                : navSectionEl.firstChild);
+        }, { root: intersectionRoot, threshold: 1 });
+        if (headerEl && navSectionEl?.firstElementChild && navSectionEl?.lastElementChild) {
+            const firstNavItem = navSectionEl.firstElementChild;
+            const lastNavItem = navSectionEl.lastElementChild;
+            intersectionObserver.observe(firstNavItem);
+            if (lastNavItem !== firstNavItem) {
+                intersectionObserver.observe(lastNavItem);
+            }
             resizeObserver.observe(headerEl);
         }
         return () => {
-            if (!headerEl) {
-                intersectionObserver.disconnect();
-                resizeObserver.disconnect();
-            }
+            intersectionObserver.disconnect();
+            resizeObserver.disconnect();
         };
-    }, [headerEl, navSectionEl, navLinks]);
+    }, [headerEl, navSectionEl, navLinks, navAlignment, navPosition, linksCollapsed]);
     useEffect(() => {
         setHasMobileNav(!isSmallOrAbove || linksCollapsed);
     }, [isSmallOrAbove, linksCollapsed]);
+    useEffect(() => {
+        if (searchExpanded)
+            searchInputRef.current?.focus();
+    }, [searchExpanded]);
+    useFocusWithin([searchContainerEl], isFocused => {
+        if (!isFocused && searchExpanded && !searchInput?.value) {
+            setSearchExpanded(false);
+        }
+    });
     useEffect(() => {
         if (!hasMobileNav && drawerOpen) {
             if (drawerContent === 'notifications' && notifications) {
@@ -104,11 +122,16 @@ const AppShell = forwardRef(function AppShell(props, ref) {
     }, [hasMobileNav, drawerOpen]);
     const hasFooter = !!footer?.length;
     const useDefaultInlineLayout = isDefaultWSS || navPosition === 'inline';
-    return (_jsxs(_Fragment, { children: [_jsx(WSSAppShellGlobalStyle, { navPosition: navPosition, hasFooter: hasFooter }), _jsx(SkipLinks, { items: skipLinks }), _jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(StyledAppHeader, { ref: headerRef, navPosition: navPosition, "$isDefaultWSS": useDefaultInlineLayout, children: [_jsxs(Flex, { container: {
+    return (_jsxs(_Fragment, { children: [_jsx(WSSAppShellGlobalStyle, { navPosition: navPosition, hasFooter: hasFooter, hasMobileNav: hasMobileNav, isDefaultWSS: useDefaultInlineLayout }), _jsx(SkipLinks, { items: skipLinks }), _jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(StyledAppHeader, { ref: headerRef, navPosition: navPosition, "$isDefaultWSS": isDefaultWSS, "$hasMobileNav": hasMobileNav, children: [_jsxs(Flex, { container: {
                                 alignItems: 'center',
                                 justify: 'between',
                                 pad: navPosition === 'below' ? [1, 0] : 0
-                            }, children: [useDefaultInlineLayout ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), _jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] }))] })] }), !hasMobileNav && navPosition === 'inline' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition, isDefaultWSS: true }))] })) : (_jsxs(Flex, { container: { alignItems: 'center' }, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), navPosition !== 'below' || hasMobileNav ? (_jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] }))] })) : null] })), _jsxs(Flex, { as: StyledEndNavBlock, container: { alignItems: 'center', gap: 1 }, mobile: hasMobileNav, children: [onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), notifications && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: setNotificationsButtonEl, variant: 'simple', label: t('open_app_header_notifications'), icon: true, onClick: () => {
+                            }, children: [useDefaultInlineLayout ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, isDefaultWSS ? 1 : 0] } })), _jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] }))] })] }), !hasMobileNav && navPosition === 'inline' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition, isDefaultWSS: true }))] })) : (_jsxs(Flex, { container: { alignItems: 'center' }, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, isDefaultWSS ? 1 : 0] } })), navPosition !== 'below' || hasMobileNav ? (_jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] }))] })) : null] })), _jsxs(Flex, { as: StyledEndNavBlock, container: { alignItems: 'center', gap: 1 }, mobile: hasMobileNav, children: [!hasMobileNav && searchInput && (_jsx("div", { ref: setSearchContainerEl, role: 'search', "aria-label": t('search'), children: searchExpanded ? (_jsx(SearchInput, { ...searchInput, ref: searchInputRef, onSearchSubmit: searchInput.onSearchSubmit
+                                                    ? value => {
+                                                        searchInput.onSearchSubmit?.(value);
+                                                        setSearchExpanded(false);
+                                                    }
+                                                    : undefined })) : (_jsx(Button, { icon: true, variant: 'simple', label: t('search'), "aria-label": t('expand_search'), onClick: () => setSearchExpanded(true), children: _jsx(Icon, { name: 'search' }) })) })), onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), notifications && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: setNotificationsButtonEl, variant: 'simple', label: t('open_app_header_notifications'), icon: true, onClick: () => {
                                                         if (!hasMobileNav) {
                                                             if (notificationsPopover) {
                                                                 setNotificationsPopover(false);
@@ -126,7 +149,7 @@ const AppShell = forwardRef(function AppShell(props, ref) {
                                                 items: helpMenu
                                             } })), !hasMobileNav && (_jsx(Operator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.avatar.name, children: _jsx(Avatar, { ...operator.avatar }) })), hasMobileNav && (_jsx(Button, { as: StyledHamburgerMenu, label: t('open_app_header_drawer'), variant: 'simple', icon: true, onClick: () => openDrawer('navigationOperator'), children: _jsx(Icon, { name: 'bars' }) }))] })] }), navPosition === 'below' &&
                             !hasMobileNav &&
-                            (useDefaultInlineLayout ? (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition, isDefaultWSS: true })) : (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), _jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'center' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] })] }), _jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: 'below' })] })))] }) }), _jsxs(StyledMain, { navPosition: navPosition, "$isDefaultWSS": useDefaultInlineLayout, "$hasFooter": hasFooter, previewActive: previewActive, children: [banners && _jsx(StyledBannerRegion, { children: banners }), main] }), footer && footer.length > 0 && _jsx(Footer, { links: footer }), _jsx(Backdrop, { open: backdropOpen, transitionSpeed: 'none', onAfterTransitionIn: () => setDrawerOpen(true), onBeforeTransitionOut: () => setDrawerOpen(false), onClick: e => {
+                            (useDefaultInlineLayout ? (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition, isDefaultWSS: true })) : (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), _jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'center' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] })] }), _jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: 'below', isDefaultWSS: isDefaultWSS })] })))] }) }), _jsxs(StyledMain, { navPosition: navPosition, "$isDefaultWSS": useDefaultInlineLayout, "$hasFooter": hasFooter, previewActive: previewActive, children: [banners && _jsx(StyledBannerRegion, { children: banners }), main] }), footer && footer.length > 0 && _jsx(Footer, { links: footer }), _jsx(Backdrop, { open: backdropOpen, transitionSpeed: 'none', onAfterTransitionIn: () => setDrawerOpen(true), onBeforeTransitionOut: () => setDrawerOpen(false), onClick: e => {
                     if (e.currentTarget === e.target)
                         setDrawerOpen(false);
                 }, children: _jsxs(Drawer, { open: drawerOpen, onAfterClose: () => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ElementType, PropsWithoutRef } from 'react';\n\nimport {\n Avatar,\n Backdrop,\n Button,\n ThemeOverride,\n ContextSwitcher,\n debounce,\n Drawer,\n Flex,\n Icon,\n Image,\n Popover,\n SkipLinks,\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useDirection,\n useElement,\n useI18n,\n useOuterEvent,\n usePreviewManager,\n useTheme,\n VisuallyHiddenText,\n MenuButton,\n ThemeSwitcher\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SkipLinksProps } from '@pega/cosmos-react-core';\nimport Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getHeaderTheme } from '@pega/cosmos-react-core/lib/components/AppShell/style-utils';\nimport useThemeMode from '@pega/cosmos-react-core/lib/hooks/useThemeMode';\n\nimport Footer from '../Footer';\n\nimport type { AppShellProps } from './AppShell.types';\nimport {\n WSSAppShellGlobalStyle,\n StyledAppHeader,\n StyledCountIcon,\n StyledHamburgerMenu,\n StyledMain,\n StyledNotificationCount,\n StyledPrimaryName,\n StyledEndNavBlock,\n StyledBannerRegion\n} from './AppShell.styles';\nimport Notifications from './Notifications';\nimport MobileHeaderContent from './MobileHeaderContent';\nimport NavLinks from './NavLinks';\n\nconst AppShell: ForwardRefForwardPropsComponent<AppShellProps> = forwardRef(function AppShell(\n props: PropsWithoutRef<AppShellProps>,\n ref: AppShellProps['ref']\n) {\n const {\n main,\n banners,\n appInfo,\n navLinks,\n operator,\n notifications,\n contextSwitcher = {},\n navAlignment = 'end',\n navPosition = 'inline',\n isDefaultWSS = true,\n helpMenu,\n footer\n } = props;\n const t = useI18n();\n const {\n contexts,\n onContextClick,\n label: contextSwitcherLabel = t('switch_to')\n } = contextSwitcher;\n const [backdropOpen, setBackdropOpen] = useState(false);\n const [drawerOpen, setDrawerOpen] = useState(false);\n const [drawerContent, setDrawerContent] = useState('');\n const [notificationsPopover, setNotificationsPopover] = useState(false);\n const [linksCollapsed, setLinksCollapsed] = useState(false);\n const [hasMobileNav, setHasMobileNav] = useState(true);\n\n const [headerEl, setHeaderEl] = useElement<HTMLElement>();\n const [navSectionEl, setNavSectionEl] = useElement<HTMLDivElement>();\n const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n const [notificationsButtonEl, setNotificationsButtonEl] = useElement<HTMLButtonElement>();\n const minInlineWidth = useRef(0);\n const theme = useTheme();\n const { previewActive } = usePreviewManager();\n const { themeMode, onThemeModeChange } = useThemeMode();\n const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n\n const headerRef = useConsolidatedRef(setHeaderEl, ref);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const { end } = useDirection();\n\n let appInfoAs: ElementType = 'div';\n if (appInfo.href) appInfoAs = 'a';\n else if (appInfo.onClick) appInfoAs = BareButton;\n\n const skipLinks: SkipLinksProps['items'] = useMemo(\n () => [\n {\n label: t('go_to_main_content'),\n target: { ariaLabel: t('main_content'), selector: 'main' }\n }\n ],\n [t]\n );\n\n const closeDrawer = () => {\n setDrawerContent('');\n setBackdropOpen(false);\n };\n\n const openDrawer = (content: 'notifications' \| 'navigationOperator') => {\n setDrawerContent(content);\n setBackdropOpen(true);\n };\n\n useOuterEvent('mousedown', [popoverEl, notificationsButtonEl], () => {\n setNotificationsPopover(false);\n notifications?.onNotificationsClose?.();\n });\n\n const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minInlineWidth.current) {\n setLinksCollapsed(false);\n }\n }, 100);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(debouncedResize);\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (\n entries[0].intersectionRatio > 0 &&\n entries[0].intersectionRatio < 1 &&\n !linksCollapsed\n ) {\n if (headerEl) minInlineWidth.current = headerEl.clientWidth + 1;\n setLinksCollapsed(true);\n } else if (navSectionEl) navSectionEl.style.visibility = 'visible';\n },\n { root: navPosition === 'below' ? null : navSectionEl, threshold: 1 }\n );\n\n if (headerEl && navSectionEl?.firstChild && navSectionEl?.lastChild) {\n intersectionObserver.observe(\n navAlignment === 'start'\n ? (navSectionEl.lastChild as Element)\n : (navSectionEl.firstChild as Element)\n );\n resizeObserver.observe(headerEl);\n }\n\n return () => {\n if (!headerEl) {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n }\n };\n }, [headerEl, navSectionEl, navLinks]);\n\n useEffect(() => {\n setHasMobileNav(!isSmallOrAbove \|\| linksCollapsed);\n }, [isSmallOrAbove, linksCollapsed]);\n\n useEffect(() => {\n if (!hasMobileNav && drawerOpen) {\n if (drawerContent === 'notifications' && notifications) {\n setNotificationsPopover(true);\n }\n setDrawerOpen(false);\n } else if (hasMobileNav && notificationsPopover) {\n setNotificationsPopover(false);\n openDrawer('notifications');\n }\n }, [hasMobileNav, drawerOpen]);\n\n const hasFooter = !!footer?.length;\n const useDefaultInlineLayout = isDefaultWSS \|\| navPosition === 'inline';\n\n return (\n <>\n <WSSAppShellGlobalStyle navPosition={navPosition} hasFooter={hasFooter} />\n <SkipLinks items={skipLinks} />\n <ThemeOverride theme={headerTheme}>\n <StyledAppHeader\n ref={headerRef}\n navPosition={navPosition}\n $isDefaultWSS={useDefaultInlineLayout}\n >\n <Flex\n container={{\n alignItems: 'center',\n justify: 'between',\n pad: navPosition === 'below' ? [1, 0] : 0\n }}\n >\n {useDefaultInlineLayout ? (\n <>\n <Flex container={{ alignItems: 'center' }}>\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n container={{ justify: 'center', pad: [0, 0, 0, 1] }}\n />\n )}\n\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n {!hasMobileNav && (\n <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\n <Text\n as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n variant='h1'\n >\n {appInfo.appName}\n </Text>\n {appInfo.portalName && (\n <Text variant='h2' as='span'>\n {appInfo.portalName}\n </Text>\n )}\n </Flex>\n )}\n </Flex>\n </Flex>\n\n {!hasMobileNav && navPosition === 'inline' && (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n isDefaultWSS\n />\n )}\n </>\n ) : (\n <Flex container={{ alignItems: 'center' }}>\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n container={{ justify: 'center', pad: [0, 0, 0, 1] }}\n />\n )}\n\n {navPosition !== 'below' \|\| hasMobileNav ? (\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n {!hasMobileNav && (\n <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\n <Text\n as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n variant='h1'\n >\n {appInfo.appName}\n </Text>\n {appInfo.portalName && (\n <Text variant='h2' as='span'>\n {appInfo.portalName}\n </Text>\n )}\n </Flex>\n )}\n </Flex>\n ) : null}\n </Flex>\n )}\n\n <Flex\n as={StyledEndNavBlock}\n container={{ alignItems: 'center', gap: 1 }}\n mobile={hasMobileNav}\n >\n {onThemeModeChange && (\n <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n )}\n\n {notifications && (\n <>\n <Button\n ref={setNotificationsButtonEl}\n variant='simple'\n label={t('open_app_header_notifications')}\n icon\n onClick={() => {\n if (!hasMobileNav) {\n if (notificationsPopover) {\n setNotificationsPopover(false);\n notifications.onNotificationsClose?.();\n } else {\n setNotificationsPopover(true);\n notifications.onNotificationsOpen?.();\n }\n } else {\n openDrawer('notifications');\n }\n }}\n >\n <StyledNotificationCount>\n <Icon name='bell' />\n {!!notifications.count && (\n <StyledCountIcon variant='urgent'>{notifications.count}</StyledCountIcon>\n )}\n </StyledNotificationCount>\n </Button>\n <Popover\n ref={setPopoverEl}\n show={notificationsPopover}\n target={notificationsButtonEl}\n placement='bottom-end'\n >\n <Notifications {...notifications} popover />\n </Popover>\n </>\n )}\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\n {!hasMobileNav && (\n <Operator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-start' }}\n name={operator.avatar.name}\n >\n <Avatar {...operator.avatar} />\n </Operator>\n )}\n\n {hasMobileNav && (\n <Button\n as={StyledHamburgerMenu}\n label={t('open_app_header_drawer')}\n variant='simple'\n icon\n onClick={() => openDrawer('navigationOperator')}\n >\n <Icon name='bars' />\n </Button>\n )}\n </Flex>\n </Flex>\n\n {navPosition === 'below' &&\n !hasMobileNav &&\n (useDefaultInlineLayout ? (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n isDefaultWSS\n />\n ) : (\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'center' }}>\n <Text\n as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n variant='h1'\n >\n {appInfo.appName}\n </Text>\n {appInfo.portalName && (\n <Text variant='h2' as='span'>\n {appInfo.portalName}\n </Text>\n )}\n </Flex>\n </Flex>\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition='below'\n />\n </Flex>\n ))}\n </StyledAppHeader>\n </ThemeOverride>\n\n <StyledMain\n navPosition={navPosition}\n $isDefaultWSS={useDefaultInlineLayout}\n $hasFooter={hasFooter}\n previewActive={previewActive}\n >\n {banners && <StyledBannerRegion>{banners}</StyledBannerRegion>}\n {main}\n </StyledMain>\n\n {footer && footer.length > 0 && <Footer links={footer} />}\n\n <Backdrop\n open={backdropOpen}\n transitionSpeed='none'\n onAfterTransitionIn={() => setDrawerOpen(true)}\n onBeforeTransitionOut={() => setDrawerOpen(false)}\n onClick={e => {\n if (e.currentTarget === e.target) setDrawerOpen(false);\n }}\n >\n <Drawer\n open={drawerOpen}\n onAfterClose={() => {\n closeDrawer();\n if (drawerContent === 'notifications') {\n notifications?.onNotificationsClose?.();\n }\n }}\n onAfterOpen={() => {\n if (drawerContent === 'notifications') {\n notifications?.onNotificationsOpen?.();\n }\n }}\n position='fixed'\n placement={end}\n size='min(26rem, calc(100vw - 5rem))'\n nullWhenClosed\n >\n {drawerContent === 'notifications' && notifications && (\n <Notifications {...notifications} onClose={() => setDrawerOpen(false)} />\n )}\n {drawerContent === 'navigationOperator' && (\n <MobileHeaderContent\n appInfo={appInfo}\n navLinks={navLinks}\n operator={operator}\n onClose={() => setDrawerOpen(false)}\n />\n )}\n </Drawer>\n </Backdrop>\n </>\n );\n});\n\nexport default AppShell;\n"]}
1	+ {"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ElementType, PropsWithoutRef } from 'react';\n\nimport {\n Avatar,\n Backdrop,\n Button,\n ThemeOverride,\n ContextSwitcher,\n debounce,\n Drawer,\n Flex,\n Icon,\n Image,\n Popover,\n SearchInput,\n SkipLinks,\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useDirection,\n useElement,\n useFocusWithin,\n useI18n,\n useOuterEvent,\n usePreviewManager,\n useTheme,\n VisuallyHiddenText,\n MenuButton,\n ThemeSwitcher\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SkipLinksProps } from '@pega/cosmos-react-core';\nimport Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getHeaderTheme } from '@pega/cosmos-react-core/lib/components/AppShell/style-utils';\nimport useThemeMode from '@pega/cosmos-react-core/lib/hooks/useThemeMode';\n\nimport Footer from '../Footer';\n\nimport type { AppShellProps } from './AppShell.types';\nimport {\n WSSAppShellGlobalStyle,\n StyledAppHeader,\n StyledCountIcon,\n StyledHamburgerMenu,\n StyledMain,\n StyledNotificationCount,\n StyledPrimaryName,\n StyledEndNavBlock,\n StyledBannerRegion\n} from './AppShell.styles';\nimport Notifications from './Notifications';\nimport MobileHeaderContent from './MobileHeaderContent';\nimport NavLinks from './NavLinks';\n\nconst AppShell: ForwardRefForwardPropsComponent<AppShellProps> = forwardRef(function AppShell(\n props: PropsWithoutRef<AppShellProps>,\n ref: AppShellProps['ref']\n) {\n const {\n main,\n banners,\n appInfo,\n navLinks,\n operator,\n notifications,\n searchInput,\n contextSwitcher = {},\n navAlignment = 'end',\n navPosition = 'inline',\n isDefaultWSS = true,\n helpMenu,\n footer\n } = props;\n const t = useI18n();\n const {\n contexts,\n onContextClick,\n label: contextSwitcherLabel = t('switch_to')\n } = contextSwitcher;\n const [backdropOpen, setBackdropOpen] = useState(false);\n const [drawerOpen, setDrawerOpen] = useState(false);\n const [drawerContent, setDrawerContent] = useState('');\n const [notificationsPopover, setNotificationsPopover] = useState(false);\n const [searchExpanded, setSearchExpanded] = useState(false);\n const [linksCollapsed, setLinksCollapsed] = useState(false);\n const [hasMobileNav, setHasMobileNav] = useState(true);\n\n const [headerEl, setHeaderEl] = useElement<HTMLElement>();\n const [navSectionEl, setNavSectionEl] = useElement<HTMLDivElement>();\n const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n const [notificationsButtonEl, setNotificationsButtonEl] = useElement<HTMLButtonElement>();\n const [searchContainerEl, setSearchContainerEl] = useElement<HTMLDivElement>();\n const searchInputRef = useRef<HTMLInputElement>(null);\n const minInlineWidth = useRef(0);\n const theme = useTheme();\n const { previewActive } = usePreviewManager();\n const { themeMode, onThemeModeChange } = useThemeMode();\n const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n\n const headerRef = useConsolidatedRef(setHeaderEl, ref);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const { end } = useDirection();\n\n let appInfoAs: ElementType = 'div';\n if (appInfo.href) appInfoAs = 'a';\n else if (appInfo.onClick) appInfoAs = BareButton;\n\n const skipLinks: SkipLinksProps['items'] = useMemo(\n () => [\n {\n label: t('go_to_main_content'),\n target: { ariaLabel: t('main_content'), selector: 'main' }\n }\n ],\n [t]\n );\n\n const closeDrawer = () => {\n setDrawerContent('');\n setBackdropOpen(false);\n };\n\n const openDrawer = (content: 'notifications' \| 'navigationOperator') => {\n setDrawerContent(content);\n setBackdropOpen(true);\n };\n\n useOuterEvent('mousedown', [popoverEl, notificationsButtonEl], () => {\n setNotificationsPopover(false);\n notifications?.onNotificationsClose?.();\n });\n\n const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minInlineWidth.current) {\n setLinksCollapsed(false);\n }\n }, 100);\n\n useEffect(() => {\n minInlineWidth.current = 0;\n\n if (isSmallOrAbove) {\n setLinksCollapsed(false);\n }\n }, [isSmallOrAbove, navAlignment, navLinks, navPosition, isDefaultWSS]);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(debouncedResize);\n const intersectionRoot = navSectionEl;\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries.some(({ intersectionRatio }) => intersectionRatio < 1) && !linksCollapsed) {\n if (headerEl) minInlineWidth.current = headerEl.clientWidth + 1;\n setLinksCollapsed(true);\n } else if (navSectionEl) navSectionEl.style.visibility = 'visible';\n },\n { root: intersectionRoot, threshold: 1 }\n );\n\n if (headerEl && navSectionEl?.firstElementChild && navSectionEl?.lastElementChild) {\n const firstNavItem = navSectionEl.firstElementChild;\n const lastNavItem = navSectionEl.lastElementChild;\n\n intersectionObserver.observe(firstNavItem);\n\n if (lastNavItem !== firstNavItem) {\n intersectionObserver.observe(lastNavItem);\n }\n\n resizeObserver.observe(headerEl);\n }\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }, [headerEl, navSectionEl, navLinks, navAlignment, navPosition, linksCollapsed]);\n\n useEffect(() => {\n setHasMobileNav(!isSmallOrAbove \|\| linksCollapsed);\n }, [isSmallOrAbove, linksCollapsed]);\n\n useEffect(() => {\n if (searchExpanded) searchInputRef.current?.focus();\n }, [searchExpanded]);\n\n useFocusWithin([searchContainerEl], isFocused => {\n if (!isFocused && searchExpanded && !searchInput?.value) {\n setSearchExpanded(false);\n }\n });\n\n useEffect(() => {\n if (!hasMobileNav && drawerOpen) {\n if (drawerContent === 'notifications' && notifications) {\n setNotificationsPopover(true);\n }\n setDrawerOpen(false);\n } else if (hasMobileNav && notificationsPopover) {\n setNotificationsPopover(false);\n openDrawer('notifications');\n }\n }, [hasMobileNav, drawerOpen]);\n\n const hasFooter = !!footer?.length;\n const useDefaultInlineLayout = isDefaultWSS \|\| navPosition === 'inline';\n\n return (\n <>\n <WSSAppShellGlobalStyle\n navPosition={navPosition}\n hasFooter={hasFooter}\n hasMobileNav={hasMobileNav}\n isDefaultWSS={useDefaultInlineLayout}\n />\n <SkipLinks items={skipLinks} />\n <ThemeOverride theme={headerTheme}>\n <StyledAppHeader\n ref={headerRef}\n navPosition={navPosition}\n $isDefaultWSS={isDefaultWSS}\n $hasMobileNav={hasMobileNav}\n >\n <Flex\n container={{\n alignItems: 'center',\n justify: 'between',\n pad: navPosition === 'below' ? [1, 0] : 0\n }}\n >\n {useDefaultInlineLayout ? (\n <>\n <Flex container={{ alignItems: 'center' }}>\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n container={{ justify: 'center', pad: [0, 0, 0, isDefaultWSS ? 1 : 0] }}\n />\n )}\n\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n {!hasMobileNav && (\n <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\n <Text\n as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n variant='h1'\n >\n {appInfo.appName}\n </Text>\n {appInfo.portalName && (\n <Text variant='h2' as='span'>\n {appInfo.portalName}\n </Text>\n )}\n </Flex>\n )}\n </Flex>\n </Flex>\n\n {!hasMobileNav && navPosition === 'inline' && (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n isDefaultWSS\n />\n )}\n </>\n ) : (\n <Flex container={{ alignItems: 'center' }}>\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n container={{ justify: 'center', pad: [0, 0, 0, isDefaultWSS ? 1 : 0] }}\n />\n )}\n\n {navPosition !== 'below' \|\| hasMobileNav ? (\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n {!hasMobileNav && (\n <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\n <Text\n as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n variant='h1'\n >\n {appInfo.appName}\n </Text>\n {appInfo.portalName && (\n <Text variant='h2' as='span'>\n {appInfo.portalName}\n </Text>\n )}\n </Flex>\n )}\n </Flex>\n ) : null}\n </Flex>\n )}\n\n <Flex\n as={StyledEndNavBlock}\n container={{ alignItems: 'center', gap: 1 }}\n mobile={hasMobileNav}\n >\n {!hasMobileNav && searchInput && (\n <div ref={setSearchContainerEl} role='search' aria-label={t('search')}>\n {searchExpanded ? (\n <SearchInput\n {...searchInput}\n ref={searchInputRef}\n onSearchSubmit={\n searchInput.onSearchSubmit\n ? value => {\n searchInput.onSearchSubmit?.(value);\n setSearchExpanded(false);\n }\n : undefined\n }\n />\n ) : (\n <Button\n icon\n variant='simple'\n label={t('search')}\n aria-label={t('expand_search')}\n onClick={() => setSearchExpanded(true)}\n >\n <Icon name='search' />\n </Button>\n )}\n </div>\n )}\n\n {onThemeModeChange && (\n <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n )}\n\n {notifications && (\n <>\n <Button\n ref={setNotificationsButtonEl}\n variant='simple'\n label={t('open_app_header_notifications')}\n icon\n onClick={() => {\n if (!hasMobileNav) {\n if (notificationsPopover) {\n setNotificationsPopover(false);\n notifications.onNotificationsClose?.();\n } else {\n setNotificationsPopover(true);\n notifications.onNotificationsOpen?.();\n }\n } else {\n openDrawer('notifications');\n }\n }}\n >\n <StyledNotificationCount>\n <Icon name='bell' />\n {!!notifications.count && (\n <StyledCountIcon variant='urgent'>{notifications.count}</StyledCountIcon>\n )}\n </StyledNotificationCount>\n </Button>\n <Popover\n ref={setPopoverEl}\n show={notificationsPopover}\n target={notificationsButtonEl}\n placement='bottom-end'\n >\n <Notifications {...notifications} popover />\n </Popover>\n </>\n )}\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\n {!hasMobileNav && (\n <Operator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-start' }}\n name={operator.avatar.name}\n >\n <Avatar {...operator.avatar} />\n </Operator>\n )}\n\n {hasMobileNav && (\n <Button\n as={StyledHamburgerMenu}\n label={t('open_app_header_drawer')}\n variant='simple'\n icon\n onClick={() => openDrawer('navigationOperator')}\n >\n <Icon name='bars' />\n </Button>\n )}\n </Flex>\n </Flex>\n\n {navPosition === 'below' &&\n !hasMobileNav &&\n (useDefaultInlineLayout ? (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n isDefaultWSS\n />\n ) : (\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'center' }}>\n <Text\n as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n variant='h1'\n >\n {appInfo.appName}\n </Text>\n {appInfo.portalName && (\n <Text variant='h2' as='span'>\n {appInfo.portalName}\n </Text>\n )}\n </Flex>\n </Flex>\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition='below'\n isDefaultWSS={isDefaultWSS}\n />\n </Flex>\n ))}\n </StyledAppHeader>\n </ThemeOverride>\n\n <StyledMain\n navPosition={navPosition}\n $isDefaultWSS={useDefaultInlineLayout}\n $hasFooter={hasFooter}\n previewActive={previewActive}\n >\n {banners && <StyledBannerRegion>{banners}</StyledBannerRegion>}\n {main}\n </StyledMain>\n\n {footer && footer.length > 0 && <Footer links={footer} />}\n\n <Backdrop\n open={backdropOpen}\n transitionSpeed='none'\n onAfterTransitionIn={() => setDrawerOpen(true)}\n onBeforeTransitionOut={() => setDrawerOpen(false)}\n onClick={e => {\n if (e.currentTarget === e.target) setDrawerOpen(false);\n }}\n >\n <Drawer\n open={drawerOpen}\n onAfterClose={() => {\n closeDrawer();\n if (drawerContent === 'notifications') {\n notifications?.onNotificationsClose?.();\n }\n }}\n onAfterOpen={() => {\n if (drawerContent === 'notifications') {\n notifications?.onNotificationsOpen?.();\n }\n }}\n position='fixed'\n placement={end}\n size='min(26rem, calc(100vw - 5rem))'\n nullWhenClosed\n >\n {drawerContent === 'notifications' && notifications && (\n <Notifications {...notifications} onClose={() => setDrawerOpen(false)} />\n )}\n {drawerContent === 'navigationOperator' && (\n <MobileHeaderContent\n appInfo={appInfo}\n navLinks={navLinks}\n operator={operator}\n onClose={() => setDrawerOpen(false)}\n />\n )}\n </Drawer>\n </Backdrop>\n </>\n );\n});\n\nexport default AppShell;\n"]}

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

@@ -3,17 +3,23 @@ export declare const footerHeight = "2.25rem";
 export declare const WSSAppShellGlobalStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
     navPosition: AppShellProps["navPosition"];
     hasFooter: boolean;
+    hasMobileNav: boolean;
+    isDefaultWSS: boolean;
 }>;
 export declare const StyledNav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export declare const StyledPrimaryName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 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>, {
     navPosition: AppShellProps["navPosition"];
     $isDefaultWSS: boolean;
+    $hasMobileNav: boolean;
 }>> & string;
 export declare const StyledEndNavBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     mobile: boolean;
 }>> & string;
-export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
+    $isDefaultWSS?: AppShellProps["isDefaultWSS"];
+    $navPosition?: AppShellProps["navPosition"];
+}>> & string;
 export declare const StyledMain: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
     navPosition: AppShellProps["navPosition"];
     $isDefaultWSS: boolean;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMtD,eAAO,MAAM,YAAY,YAAY,CAAC;~~AAEtC~~,eAAO,MAAM,sBAAsB;iBACpB,aAAa,CAAC,aAAa,CAAC;eAC9B,OAAO;~~EAWnB~~,CAAC;AAEF,eAAO,MAAM,SAAS,uNAUrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,+NAY5B,CAAC;AAIH,eAAO,MAAM,eAAe;iBACb,aAAa,CAAC,aAAa,CAAC;mBAC1B,OAAO;~~YAwGvB~~,CAAC;~~AAIF~~,eAAO,MAAM,iBAAiB;YAAwB,OAAO;YAS3D,CAAC;AAEH,eAAO,MAAM,UAAU,~~yOA0CrB~~,CAAC;AAIH,eAAO,MAAM,UAAU;iBACR,aAAa,CAAC,aAAa,CAAC;mBAC1B,OAAO;gBACV,OAAO;mBACJ,OAAO;YAuDtB,CAAC;AAIH,eAAO,MAAM,6BAA6B,6NAgBxC,CAAC;AAIH,eAAO,MAAM,mBAAmB,yOAI9B,CAAC;AAIH,eAAO,MAAM,eAAe,uNAK1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yOAmC3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAE7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,6NAGjC,CAAC;AAEF,eAAO,MAAM,eAAe,6NAU1B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAGnC,CAAC;AAIF,eAAO,MAAM,eAAe;;;~~2BArXwD~~,CAAC;~~iDA0XpF~~,CAAC;AAIF,eAAO,MAAM,mBAAmB;cAA0B,OAAO;YAW/D,CAAC;AAIH,eAAO,MAAM,sBAAsB,iOAQjC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;gOA0B7B,CAAC;AAIH,eAAO,MAAM,wBAAwB;aAA0B,OAAO;YAiBpE,CAAC;AAIH,eAAO,MAAM,yBAAyB;aAA0B,OAAO;YAMrE,CAAC;AAIH,eAAO,MAAM,2BAA2B;aAA0B,OAAO;YAUxE,CAAC;AAIF,eAAO,MAAM,kBAAkB,6NAAe,CAAC;AAI/C,eAAO,MAAM,yBAAyB,shBAQrC,CAAC;AAIF,eAAO,MAAM,aAAa,6NAGzB,CAAC;AAIF,eAAO,MAAM,eAAe;;gOAG3B,CAAC;AAIF,eAAO,MAAM,gBAAgB;;kHAK5B,CAAC;AAIF,eAAO,MAAM,mBAAmB;;mBAE/B,CAAC"}
1	+ {"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMtD,eAAO,MAAM,YAAY,YAAY,CAAC;AAiBtC,eAAO,MAAM,sBAAsB;iBACpB,aAAa,CAAC,aAAa,CAAC;eAC9B,OAAO;kBACJ,OAAO;kBACP,OAAO;EAYtB,CAAC;AAEF,eAAO,MAAM,SAAS,uNAUrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,+NAY5B,CAAC;AAIH,eAAO,MAAM,eAAe;iBACb,aAAa,CAAC,aAAa,CAAC;mBAC1B,OAAO;mBACP,OAAO;YA8HtB,CAAC;AAIH,eAAO,MAAM,iBAAiB;YAAwB,OAAO;YAS3D,CAAC;AAEH,eAAO,MAAM,UAAU;oBACL,aAAa,CAAC,cAAc,CAAC;mBAC9B,aAAa,CAAC,aAAa,CAAC;YA2C3C,CAAC;AAIH,eAAO,MAAM,UAAU;iBACR,aAAa,CAAC,aAAa,CAAC;mBAC1B,OAAO;gBACV,OAAO;mBACJ,OAAO;YAuDtB,CAAC;AAIH,eAAO,MAAM,6BAA6B,6NAgBxC,CAAC;AAIH,eAAO,MAAM,mBAAmB,yOAI9B,CAAC;AAIH,eAAO,MAAM,eAAe,uNAK1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yOAmC3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAE7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,6NAGjC,CAAC;AAEF,eAAO,MAAM,eAAe,6NAU1B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAGnC,CAAC;AAIF,eAAO,MAAM,eAAe;;;2BA9ZoB,CAAC;iDAmahD,CAAC;AAIF,eAAO,MAAM,mBAAmB;cAA0B,OAAO;YAW/D,CAAC;AAIH,eAAO,MAAM,sBAAsB,iOAQjC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;gOA0B7B,CAAC;AAIH,eAAO,MAAM,wBAAwB;aAA0B,OAAO;YAiBpE,CAAC;AAIH,eAAO,MAAM,yBAAyB;aAA0B,OAAO;YAMrE,CAAC;AAIH,eAAO,MAAM,2BAA2B;aAA0B,OAAO;YAUxE,CAAC;AAIF,eAAO,MAAM,kBAAkB,6NAAe,CAAC;AAI/C,eAAO,MAAM,yBAAyB,shBAQrC,CAAC;AAIF,eAAO,MAAM,aAAa,6NAGzB,CAAC;AAIF,eAAO,MAAM,eAAe;;gOAG3B,CAAC;AAIF,eAAO,MAAM,gBAAgB;;kHAK5B,CAAC;AAIF,eAAO,MAAM,mBAAmB;;mBAE/B,CAAC"}

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

@@ -10,10 +10,17 @@ const tallHeaderHeight = '6rem';
 const topBarHeight = '2.75rem';
 const navBarHeight = '3.25rem';
 export const footerHeight = '2.25rem';
+const getAppHeaderHeight = ({ navPosition, hasMobileNav, isDefaultWSS }) => {
+    if (navPosition !== 'below')
+        return headerHeight;
+    if (!hasMobileNav)
+        return tallHeaderHeight;
+    return isDefaultWSS ? headerHeight : topBarHeight;
+};
 export const WSSAppShellGlobalStyle = createGlobalStyle `
   :root,
   :host {
-    --app-header-height: ${({ navPosition }) => (navPosition === 'below' ? tallHeaderHeight : headerHeight)};
+    --app-header-height: ${({ navPosition, hasMobileNav, isDefaultWSS }) => getAppHeaderHeight({ navPosition, hasMobileNav, isDefaultWSS })};
     --appshell-hard-top-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-start, 0rem));
     --appshell-top-offset: calc(var(--appshell-hard-top-offset, 0rem) + var(--app-header-height, 0rem));
     --appshell-hard-bottom-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-end, 0rem));
@@ -45,90 +52,115 @@ export const StyledPrimaryName = styled.span(({ theme }) => {
   `;
 });
 StyledPrimaryName.defaultProps = defaultThemeProp;
-export const StyledAppHeader = styled.header(({ navPosition, $isDefaultWSS, theme: { base, components: { 'app-shell': { header: { background: headerBg, 'foreground-color': headerFgColor, 'border-color': headerBorderColor }, nav: { background: navBg, 'foreground-color': navFgColor } } } } }) => {
-    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
+export const StyledAppHeader = styled.header(({ navPosition, $isDefaultWSS, $hasMobileNav, theme }) => {
+    const { base, components: { 'app-shell': { header: { background: headerBg, 'foreground-color': headerFgColor, 'border-color': headerBorderColor }, nav: { background: navBg, 'foreground-color': navFgColor } } } } = theme;
     const isModernStacked = !$isDefaultWSS && navPosition === 'below';
-    const navForeground = calculateForegroundColor(navBg, navFgColor);
+    const isModernInline = !$isDefaultWSS && navPosition === 'inline';
+    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor, theme);
+    const navForeground = calculateForegroundColor(navBg, navFgColor, theme);
+    const stackedTopBackground = $hasMobileNav ? headerBg : navBg;
+    const stackedTopForeground = $hasMobileNav ? foregroundColor : navForeground;
     return css `
-      position: sticky;
-      inset-block-start: var(--appshell-hard-top-offset, 0);
-      height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};
-      width: 100%;
-      background: ${isModernStacked ? 'transparent' : headerBg};
-      z-index: calc(${base['z-index'].popover} + 1);
-      border-bottom: 0.0625rem solid
-        ${$isDefaultWSS ? base.palette['border-line'] : headerBorderColor};
-      color: ${foregroundColor};
-      ${StyledImage} {
-        height: 1.625rem;
-      }
+    position: sticky;
+    inset-block-start: var(--appshell-hard-top-offset, 0);
+    height: ${getAppHeaderHeight({
+        navPosition,
+        hasMobileNav: $hasMobileNav,
+        isDefaultWSS: $isDefaultWSS
+    })};
+    width: 100%;
+    background: ${isModernStacked && !$hasMobileNav ? 'transparent' : headerBg};
+    z-index: calc(${base['z-index'].popover} + 1);
+    border-bottom: 0.0625rem solid
+      ${$isDefaultWSS ? base.palette['border-line'] : headerBorderColor};
+    color: ${foregroundColor};
+    ${StyledImage} {
+      height: 1.625rem;
+    }
+    ${StyledPrimaryName} {
+      max-width: min(50ch, 50vw);
+    }
-      ${StyledPrimaryName} {
-        max-width: min(50ch, 50vw);
+    & > ${StyledFlex} {
+      height: ${headerHeight};
+      ${StyledAppHeaderOperator} {
+        margin: ${$isDefaultWSS || navPosition === 'inline' ? base.spacing : 0};
       }
-      & > ${StyledFlex} {
-        height: ${headerHeight};
+      & > a,
+      & > button {
+        cursor: pointer;
+        text-decoration: none;
+        user-select: none;
+        -webkit-user-select: none;
+        min-height: ${headerHeight};
-        ${StyledAppHeaderOperator} {
-          margin: ${$isDefaultWSS ? base.spacing : 0};
+        &:focus-visible {
+          box-shadow: ${base.shadow.focus};
         }
+      }
+    }
+    & > ${StyledNav} {
+      height: calc(${tallHeaderHeight} - ${headerHeight});
+    }
+    ${isModernStacked &&
+        css `
+      border-bottom: none;
+      & > ${StyledFlex}:first-child {
+        height: ${topBarHeight};
+        width: 100%;
+        background: ${stackedTopBackground};
+        color: ${stackedTopForeground};
+        padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));
         & > a,
         & > button {
-          cursor: pointer;
-          text-decoration: none;
-          user-select: none;
-          -webkit-user-select: none;
-          min-height: ${headerHeight};
-          &:focus-visible {
-            box-shadow: ${base.shadow.focus};
-          }
+          min-height: ${topBarHeight};
         }
-      }
-      & > ${StyledNav} {
-        height: calc(${tallHeaderHeight} - ${headerHeight});
+        ${StyledPrimaryName} {
+          color: ${stackedTopForeground};
+        }
       }
-      ${isModernStacked &&
-        css `
-        border-bottom: none;
-        & > ${StyledFlex}:first-child {
-          height: ${topBarHeight};
-          width: 100%;
-          background: ${navBg};
-          color: ${navForeground};
-          padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));
-          & > a,
-          & > button {
-            min-height: ${topBarHeight};
-          }
-        }
+      & > ${StyledFlex}:nth-child(2) {
+        height: ${navBarHeight};
+        width: 100%;
+        background: ${headerBg};
+        color: ${foregroundColor};
+        padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));
-        & > ${StyledFlex}:nth-child(2) {
-          height: ${navBarHeight};
-          width: 100%;
-          background: ${headerBg};
+        ${StyledPrimaryName} {
           color: ${foregroundColor};
-          padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));
+        }
+      }
-          ${StyledPrimaryName} {
-            color: ${foregroundColor};
-          }
+      @media screen and (min-width: ${base.breakpoints.md}) {
+        & > ${StyledFlex}:first-child, & > ${StyledFlex}:nth-child(2) {
+          padding-inline: max(calc(${base.spacing} * 2.5), calc((100% - 80rem) / 2));
         }
+      }
+    `}
-        @media screen and (min-width: ${base.breakpoints.md}) {
-          & > ${StyledFlex}:first-child, & > ${StyledFlex}:nth-child(2) {
-            padding-inline: max(calc(${base.spacing} * 2.5), calc((100% - 80rem) / 2));
-          }
+    ${isModernInline &&
+        css `
+      & > ${StyledFlex}:first-child {
+        padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));
+      }
+      @media screen and (min-width: ${base.breakpoints.md}) {
+        & > ${StyledFlex}:first-child {
+          padding-inline: max(calc(${base.spacing} * 2.5), calc((100% - 80rem) / 2));
         }
-      `}
-    `;
+      }
+    `}
+  `;
 });
 StyledAppHeader.defaultProps = defaultThemeProp;
 export const StyledEndNavBlock = styled.div(({ mobile }) => {
@@ -141,7 +173,7 @@ export const StyledEndNavBlock = styled.div(({ mobile }) => {
     `}
   `;
 });
-export const StyledLink = styled.a(({ theme }) => {
+export const StyledLink = styled.a(({ theme, $isDefaultWSS, $navPosition }) => {
     const hoverColor = lighten(0.2, theme.base.palette.interactive);
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
@@ -155,7 +187,7 @@ export const StyledLink = styled.a(({ theme }) => {
     align-items: center;
     &:last-of-type {
-      margin-inline-end: ${theme.base.spacing};
+      margin-inline-end: ${!$isDefaultWSS && $navPosition === 'below' ? 0 : theme.base.spacing};
     }
     &[aria-current='page'] {