@pega/cosmos-react-wss 9.17.2 → 9.19.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 (14) hide show
  1. package/lib/components/AppShell/AppShell.d.ts.map +1 -1
  2. package/lib/components/AppShell/AppShell.js +20 -14
  3. package/lib/components/AppShell/AppShell.js.map +1 -1
  4. package/lib/components/AppShell/AppShell.styles.d.ts +3 -0
  5. package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
  6. package/lib/components/AppShell/AppShell.styles.js +39 -8
  7. package/lib/components/AppShell/AppShell.styles.js.map +1 -1
  8. package/lib/components/AppShell/NavLinks.js +1 -1
  9. package/lib/components/AppShell/NavLinks.js.map +1 -1
  10. package/lib/components/QuickCreate/QuickCreate.d.ts +0 -3
  11. package/lib/components/QuickCreate/QuickCreate.d.ts.map +1 -1
  12. package/lib/components/QuickCreate/QuickCreate.js +14 -20
  13. package/lib/components/QuickCreate/QuickCreate.js.map +1 -1
  14. package/package.json +3 -3
package/lib/components/AppShell/AppShell.d.ts.map CHANGED
@@ -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":"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,CAob3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
package/lib/components/AppShell/AppShell.js CHANGED
@@ -61,32 +61,38 @@ const AppShell = forwardRef(function AppShell(props, ref) {
61
61
  setLinksCollapsed(false);
62
62
  }
63
63
  }, 100);
64
+ useEffect(() => {
65
+ minInlineWidth.current = 0;
66
+ if (isSmallOrAbove) {
67
+ setLinksCollapsed(false);
68
+ }
69
+ }, [isSmallOrAbove, navAlignment, navLinks, navPosition, isDefaultWSS]);
64
70
  useEffect(() => {
65
71
  const resizeObserver = new ResizeObserver(debouncedResize);
72
+ const intersectionRoot = navSectionEl;
66
73
  const intersectionObserver = new IntersectionObserver(entries => {
67
- if (entries[0].intersectionRatio > 0 &&
68
- entries[0].intersectionRatio < 1 &&
69
- !linksCollapsed) {
74
+ if (entries.some(({ intersectionRatio }) => intersectionRatio < 1) && !linksCollapsed) {
70
75
  if (headerEl)
71
76
  minInlineWidth.current = headerEl.clientWidth + 1;
72
77
  setLinksCollapsed(true);
73
78
  }
74
79
  else if (navSectionEl)
75
80
  navSectionEl.style.visibility = 'visible';
76
- }, { root: navPosition === 'below' ? null : navSectionEl, threshold: 1 });
77
- if (headerEl && navSectionEl?.firstChild && navSectionEl?.lastChild) {
78
- intersectionObserver.observe(navAlignment === 'start'
79
- ? navSectionEl.lastChild
80
- : navSectionEl.firstChild);
81
+ }, { root: intersectionRoot, threshold: 1 });
82
+ if (headerEl && navSectionEl?.firstElementChild && navSectionEl?.lastElementChild) {
83
+ const firstNavItem = navSectionEl.firstElementChild;
84
+ const lastNavItem = navSectionEl.lastElementChild;
85
+ intersectionObserver.observe(firstNavItem);
86
+ if (lastNavItem !== firstNavItem) {
87
+ intersectionObserver.observe(lastNavItem);
88
+ }
81
89
  resizeObserver.observe(headerEl);
82
90
  }
83
91
  return () => {
84
- if (!headerEl) {
85
- intersectionObserver.disconnect();
86
- resizeObserver.disconnect();
87
- }
92
+ intersectionObserver.disconnect();
93
+ resizeObserver.disconnect();
88
94
  };
89
- }, [headerEl, navSectionEl, navLinks]);
95
+ }, [headerEl, navSectionEl, navLinks, navAlignment, navPosition, linksCollapsed]);
90
96
  useEffect(() => {
91
97
  setHasMobileNav(!isSmallOrAbove || linksCollapsed);
92
98
  }, [isSmallOrAbove, linksCollapsed]);
@@ -104,7 +110,7 @@ const AppShell = forwardRef(function AppShell(props, ref) {
104
110
  }, [hasMobileNav, drawerOpen]);
105
111
  const hasFooter = !!footer?.length;
106
112
  const useDefaultInlineLayout = isDefaultWSS || navPosition === 'inline';
107
- 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: {
113
+ 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: {
108
114
  alignItems: 'center',
109
115
  justify: 'between',
110
116
  pad: navPosition === 'below' ? [1, 0] : 0
package/lib/components/AppShell/AppShell.js.map CHANGED
@@ -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":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGzE,OAAO,EACL,MAAM,EACN,QAAQ,EACR,MAAM,EACN,aAAa,EACb,eAAe,EACf,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,SAAS,EACT,IAAI,EACJ,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,UAAU,EACV,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,QAAQ,MAAM,0DAA0D,CAAC;AAChF,OAAO,EAAE,uBAAuB,EAAE,MAAM,kEAAkE,CAAC;AAC3G,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,6DAA6D,CAAC;AAC7F,OAAO,YAAY,MAAM,gDAAgD,CAAC;AAE1E,OAAO,MAAM,MAAM,WAAW,CAAC;AAG/B,OAAO,EACL,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,UAAU,EACV,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,QAAQ,GAAmD,UAAU,CAAC,SAAS,QAAQ,CAC3F,KAAqC,EACrC,GAAyB;IAEzB,MAAM,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,eAAe,GAAG,EAAE,EACpB,YAAY,GAAG,KAAK,EACpB,WAAW,GAAG,QAAQ,EACtB,YAAY,GAAG,IAAI,EACnB,QAAQ,EACR,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EACJ,QAAQ,EACR,cAAc,EACd,KAAK,EAAE,oBAAoB,GAAG,CAAC,CAAC,WAAW,CAAC,EAC7C,GAAG,eAAe,CAAC;IACpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEvD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAe,CAAC;IAC1D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,UAAU,EAAkB,CAAC;IACrE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC/D,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,UAAU,EAAqB,CAAC;IAC1F,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACjC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,aAAa,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAC9C,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,YAAY,EAAE,CAAC;IACxD,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAElE,MAAM,SAAS,GAAG,kBAAkB,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;IAEvD,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,IAAI,SAAS,GAAgB,KAAK,CAAC;IACnC,IAAI,OAAO,CAAC,IAAI;QAAE,SAAS,GAAG,GAAG,CAAC;SAC7B,IAAI,OAAO,CAAC,OAAO;QAAE,SAAS,GAAG,UAAU,CAAC;IAEjD,MAAM,SAAS,GAA4B,OAAO,CAChD,GAAG,EAAE,CAAC;QACJ;YACE,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC;YAC9B,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE;SAC3D;KACF,EACD,CAAC,CAAC,CAAC,CACJ,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,gBAAgB,CAAC,EAAE,CAAC,CAAC;QACrB,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,OAA+C,EAAE,EAAE;QACrE,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAC1B,eAAe,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,qBAAqB,CAAC,EAAE,GAAG,EAAE;QAClE,uBAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,aAAa,EAAE,oBAAoB,EAAE,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,OAA8B,EAAE,EAAE;QAClE,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,GAAG,cAAc,CAAC,OAAO,EAAE,CAAC;YAC1D,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,GAAG,CAAC,CAAC;IAER,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;QAE3B,IAAI,cAAc,EAAE,CAAC;YACnB,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,eAAe,CAAC,CAAC;QAC3D,MAAM,gBAAgB,GAAG,YAAY,CAAC;QAEtC,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CACnD,OAAO,CAAC,EAAE;YACR,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;gBACtF,IAAI,QAAQ;oBAAE,cAAc,CAAC,OAAO,GAAG,QAAQ,CAAC,WAAW,GAAG,CAAC,CAAC;gBAChE,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;iBAAM,IAAI,YAAY;gBAAE,YAAY,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;QACrE,CAAC,EACD,EAAE,IAAI,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,EAAE,CACzC,CAAC;QAEF,IAAI,QAAQ,IAAI,YAAY,EAAE,iBAAiB,IAAI,YAAY,EAAE,gBAAgB,EAAE,CAAC;YAClF,MAAM,YAAY,GAAG,YAAY,CAAC,iBAAiB,CAAC;YACpD,MAAM,WAAW,GAAG,YAAY,CAAC,gBAAgB,CAAC;YAElD,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;YAE3C,IAAI,WAAW,KAAK,YAAY,EAAE,CAAC;gBACjC,oBAAoB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YAC5C,CAAC;YAED,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;YAClC,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;IAElF,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,CAAC,cAAc,IAAI,cAAc,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,IAAI,UAAU,EAAE,CAAC;YAChC,IAAI,aAAa,KAAK,eAAe,IAAI,aAAa,EAAE,CAAC;gBACvD,uBAAuB,CAAC,IAAI,CAAC,CAAC;YAChC,CAAC;YACD,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;aAAM,IAAI,YAAY,IAAI,oBAAoB,EAAE,CAAC;YAChD,uBAAuB,CAAC,KAAK,CAAC,CAAC;YAC/B,UAAU,CAAC,eAAe,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/B,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC;IACnC,MAAM,sBAAsB,GAAG,YAAY,IAAI,WAAW,KAAK,QAAQ,CAAC;IAExE,OAAO,CACL,8BACE,KAAC,sBAAsB,IACrB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,sBAAsB,GACpC,EACF,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,EAC/B,KAAC,aAAa,IAAC,KAAK,EAAE,WAAW,YAC/B,MAAC,eAAe,IACd,GAAG,EAAE,SAAS,EACd,WAAW,EAAE,WAAW,mBACT,YAAY,mBACZ,YAAY,aAE3B,MAAC,IAAI,IACH,SAAS,EAAE;gCACT,UAAU,EAAE,QAAQ;gCACpB,OAAO,EAAE,SAAS;gCAClB,GAAG,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;6BAC1C,aAEA,sBAAsB,CAAC,CAAC,CAAC,CACxB,8BACE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACtC,QAAQ,IAAI,cAAc,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACpD,KAAC,eAAe,IACd,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,oBAAoB,EAC3B,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GACnD,CACH,EAED,MAAC,IAAI,IACH,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAC9D,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,MAAM,EAAE,OAAO,CAAC,MAAM,aAEtB,KAAC,KAAK,IAAC,GAAG,EAAE,OAAO,CAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,GAAI,EACrD,CAAC,YAAY,IAAI,CAChB,MAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,aACxE,KAAC,IAAI,IACH,EAAE,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAClE,OAAO,EAAC,IAAI,YAEX,OAAO,CAAC,OAAO,GACX,EACN,OAAO,CAAC,UAAU,IAAI,CACrB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,OAAO,CAAC,UAAU,GACd,CACR,IACI,CACR,IACI,IACF,EAEN,CAAC,YAAY,IAAI,WAAW,KAAK,QAAQ,IAAI,CAC5C,KAAC,QAAQ,IACP,GAAG,EAAE,eAAe,EACpB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,YAAY,SACZ,CACH,IACA,CACJ,CAAC,CAAC,CAAC,CACF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACtC,QAAQ,IAAI,cAAc,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACpD,KAAC,eAAe,IACd,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,oBAAoB,EAC3B,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GACnD,CACH,EAEA,WAAW,KAAK,OAAO,IAAI,YAAY,CAAC,CAAC,CAAC,CACzC,MAAC,IAAI,IACH,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAC9D,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,MAAM,EAAE,OAAO,CAAC,MAAM,aAEtB,KAAC,KAAK,IAAC,GAAG,EAAE,OAAO,CAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,GAAI,EACrD,CAAC,YAAY,IAAI,CAChB,MAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,aACxE,KAAC,IAAI,IACH,EAAE,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAClE,OAAO,EAAC,IAAI,YAEX,OAAO,CAAC,OAAO,GACX,EACN,OAAO,CAAC,UAAU,IAAI,CACrB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,OAAO,CAAC,UAAU,GACd,CACR,IACI,CACR,IACI,CACR,CAAC,CAAC,CAAC,IAAI,IACH,CACR,EAED,MAAC,IAAI,IACH,EAAE,EAAE,iBAAiB,EACrB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC3C,MAAM,EAAE,YAAY,aAEnB,iBAAiB,IAAI,CACpB,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,GAAI,CAC9E,EAEA,aAAa,IAAI,CAChB,8BACE,KAAC,MAAM,IACL,GAAG,EAAE,wBAAwB,EAC7B,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,+BAA+B,CAAC,EACzC,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE;wDACZ,IAAI,CAAC,YAAY,EAAE,CAAC;4DAClB,IAAI,oBAAoB,EAAE,CAAC;gEACzB,uBAAuB,CAAC,KAAK,CAAC,CAAC;gEAC/B,aAAa,CAAC,oBAAoB,EAAE,EAAE,CAAC;4DACzC,CAAC;iEAAM,CAAC;gEACN,uBAAuB,CAAC,IAAI,CAAC,CAAC;gEAC9B,aAAa,CAAC,mBAAmB,EAAE,EAAE,CAAC;4DACxC,CAAC;wDACH,CAAC;6DAAM,CAAC;4DACN,UAAU,CAAC,eAAe,CAAC,CAAC;wDAC9B,CAAC;oDACH,CAAC,YAED,MAAC,uBAAuB,eACtB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACnB,CAAC,CAAC,aAAa,CAAC,KAAK,IAAI,CACxB,KAAC,eAAe,IAAC,OAAO,EAAC,QAAQ,YAAE,aAAa,CAAC,KAAK,GAAmB,CAC1E,IACuB,GACnB,EACT,KAAC,OAAO,IACN,GAAG,EAAE,YAAY,EACjB,IAAI,EAAE,oBAAoB,EAC1B,MAAM,EAAE,qBAAqB,EAC7B,SAAS,EAAC,YAAY,YAEtB,KAAC,aAAa,OAAK,aAAa,EAAE,OAAO,SAAG,GACpC,IACT,CACJ,EAEA,QAAQ,IAAI,CACX,KAAC,UAAU,IACT,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC1B,QAAQ,QACR,IAAI,EAAE;gDACJ,KAAK,EAAE,QAAQ;6CAChB,GACD,CACH,EAEA,CAAC,YAAY,IAAI,CAChB,KAAC,QAAQ,IACP,EAAE,EAAE,uBAAuB,EAC3B,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,EACtC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,YAE1B,KAAC,MAAM,OAAK,QAAQ,CAAC,MAAM,GAAI,GACtB,CACZ,EAEA,YAAY,IAAI,CACf,KAAC,MAAM,IACL,EAAE,EAAE,mBAAmB,EACvB,KAAK,EAAE,CAAC,CAAC,wBAAwB,CAAC,EAClC,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,oBAAoB,CAAC,YAE/C,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,CACV,IACI,IACF,EAEN,WAAW,KAAK,OAAO;4BACtB,CAAC,YAAY;4BACb,CAAC,sBAAsB,CAAC,CAAC,CAAC,CACxB,KAAC,QAAQ,IACP,GAAG,EAAE,eAAe,EACpB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,YAAY,SACZ,CACH,CAAC,CAAC,CAAC,CACF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,MAAC,IAAI,IACH,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC3C,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,MAAM,EAAE,OAAO,CAAC,MAAM,aAEtB,KAAC,KAAK,IAAC,GAAG,EAAE,OAAO,CAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,GAAI,EACtD,MAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3E,KAAC,IAAI,IACH,EAAE,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAClE,OAAO,EAAC,IAAI,YAEX,OAAO,CAAC,OAAO,GACX,EACN,OAAO,CAAC,UAAU,IAAI,CACrB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,OAAO,CAAC,UAAU,GACd,CACR,IACI,IACF,EACP,KAAC,QAAQ,IACP,GAAG,EAAE,eAAe,EACpB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAC,OAAO,GACnB,IACG,CACR,CAAC,IACY,GACJ,EAEhB,MAAC,UAAU,IACT,WAAW,EAAE,WAAW,mBACT,sBAAsB,gBACzB,SAAS,EACrB,aAAa,EAAE,aAAa,aAE3B,OAAO,IAAI,KAAC,kBAAkB,cAAE,OAAO,GAAsB,EAC7D,IAAI,IACM,EAEZ,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,MAAM,IAAC,KAAK,EAAE,MAAM,GAAI,EAEzD,KAAC,QAAQ,IACP,IAAI,EAAE,YAAY,EAClB,eAAe,EAAC,MAAM,EACtB,mBAAmB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAC9C,qBAAqB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EACjD,OAAO,EAAE,CAAC,CAAC,EAAE;oBACX,IAAI,CAAC,CAAC,aAAa,KAAK,CAAC,CAAC,MAAM;wBAAE,aAAa,CAAC,KAAK,CAAC,CAAC;gBACzD,CAAC,YAED,MAAC,MAAM,IACL,IAAI,EAAE,UAAU,EAChB,YAAY,EAAE,GAAG,EAAE;wBACjB,WAAW,EAAE,CAAC;wBACd,IAAI,aAAa,KAAK,eAAe,EAAE,CAAC;4BACtC,aAAa,EAAE,oBAAoB,EAAE,EAAE,CAAC;wBAC1C,CAAC;oBACH,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;wBAChB,IAAI,aAAa,KAAK,eAAe,EAAE,CAAC;4BACtC,aAAa,EAAE,mBAAmB,EAAE,EAAE,CAAC;wBACzC,CAAC;oBACH,CAAC,EACD,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,GAAG,EACd,IAAI,EAAC,gCAAgC,EACrC,cAAc,mBAEb,aAAa,KAAK,eAAe,IAAI,aAAa,IAAI,CACrD,KAAC,aAAa,OAAK,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,GAAI,CAC1E,EACA,aAAa,KAAK,oBAAoB,IAAI,CACzC,KAAC,mBAAmB,IAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,GACnC,CACH,IACM,GACA,IACV,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","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 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 (!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, 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"]}
package/lib/components/AppShell/AppShell.styles.d.ts CHANGED
@@ -3,12 +3,15 @@ export declare const footerHeight = "2.25rem";
3
3
  export declare const WSSAppShellGlobalStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
4
4
  navPosition: AppShellProps["navPosition"];
5
5
  hasFooter: boolean;
6
+ hasMobileNav: boolean;
7
+ isDefaultWSS: boolean;
6
8
  }>;
7
9
  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;
8
10
  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;
9
11
  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>, {
10
12
  navPosition: AppShellProps["navPosition"];
11
13
  $isDefaultWSS: boolean;
14
+ $hasMobileNav: boolean;
12
15
  }>> & string;
13
16
  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>, {
14
17
  mobile: boolean;
package/lib/components/AppShell/AppShell.styles.d.ts.map CHANGED
@@ -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;YAmIvB,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;;;2BAhaoB,CAAC;iDAqahD,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
@@ -10,10 +10,17 @@ const tallHeaderHeight = '6rem';
10
10
  const topBarHeight = '2.75rem';
11
11
  const navBarHeight = '3.25rem';
12
12
  export const footerHeight = '2.25rem';
13
+ const getAppHeaderHeight = ({ navPosition, hasMobileNav, isDefaultWSS }) => {
14
+ if (navPosition !== 'below')
15
+ return headerHeight;
16
+ if (!hasMobileNav)
17
+ return tallHeaderHeight;
18
+ return isDefaultWSS ? headerHeight : topBarHeight;
19
+ };
13
20
  export const WSSAppShellGlobalStyle = createGlobalStyle `
14
21
  :root,
15
22
  :host {
16
- --app-header-height: ${({ navPosition }) => (navPosition === 'below' ? tallHeaderHeight : headerHeight)};
23
+ --app-header-height: ${({ navPosition, hasMobileNav, isDefaultWSS }) => getAppHeaderHeight({ navPosition, hasMobileNav, isDefaultWSS })};
17
24
  --appshell-hard-top-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-start, 0rem));
18
25
  --appshell-top-offset: calc(var(--appshell-hard-top-offset, 0rem) + var(--app-header-height, 0rem));
19
26
  --appshell-hard-bottom-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-end, 0rem));
@@ -45,16 +52,23 @@ export const StyledPrimaryName = styled.span(({ theme }) => {
45
52
  `;
46
53
  });
47
54
  StyledPrimaryName.defaultProps = defaultThemeProp;
48
- 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 } } } } }) => {
49
- const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
55
+ export const StyledAppHeader = styled.header(({ navPosition, $isDefaultWSS, $hasMobileNav, theme: { base, components: { 'app-shell': { header: { background: headerBg, 'foreground-color': headerFgColor, 'border-color': headerBorderColor }, nav: { background: navBg, 'foreground-color': navFgColor } } } } }) => {
50
56
  const isModernStacked = !$isDefaultWSS && navPosition === 'below';
57
+ const isModernInline = !$isDefaultWSS && navPosition === 'inline';
58
+ const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
51
59
  const navForeground = calculateForegroundColor(navBg, navFgColor);
60
+ const stackedTopBackground = $hasMobileNav ? headerBg : navBg;
61
+ const stackedTopForeground = $hasMobileNav ? foregroundColor : navForeground;
52
62
  return css `
53
63
  position: sticky;
54
64
  inset-block-start: var(--appshell-hard-top-offset, 0);
55
- height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};
65
+ height: ${getAppHeaderHeight({
66
+ navPosition,
67
+ hasMobileNav: $hasMobileNav,
68
+ isDefaultWSS: $isDefaultWSS
69
+ })};
56
70
  width: 100%;
57
- background: ${isModernStacked ? 'transparent' : headerBg};
71
+ background: ${isModernStacked && !$hasMobileNav ? 'transparent' : headerBg};
58
72
  z-index: calc(${base['z-index'].popover} + 1);
59
73
  border-bottom: 0.0625rem solid
60
74
  ${$isDefaultWSS ? base.palette['border-line'] : headerBorderColor};
@@ -72,7 +86,7 @@ export const StyledAppHeader = styled.header(({ navPosition, $isDefaultWSS, them
72
86
  height: ${headerHeight};
73
87
 
74
88
  ${StyledAppHeaderOperator} {
75
- margin: ${$isDefaultWSS ? base.spacing : 0};
89
+ margin: ${$isDefaultWSS || navPosition === 'inline' ? base.spacing : 0};
76
90
  }
77
91
 
78
92
  & > a,
@@ -100,14 +114,18 @@ export const StyledAppHeader = styled.header(({ navPosition, $isDefaultWSS, them
100
114
  & > ${StyledFlex}:first-child {
101
115
  height: ${topBarHeight};
102
116
  width: 100%;
103
- background: ${navBg};
104
- color: ${navForeground};
117
+ background: ${stackedTopBackground};
118
+ color: ${stackedTopForeground};
105
119
  padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));
106
120
 
107
121
  & > a,
108
122
  & > button {
109
123
  min-height: ${topBarHeight};
110
124
  }
125
+
126
+ ${StyledPrimaryName} {
127
+ color: ${stackedTopForeground};
128
+ }
111
129
  }
112
130
 
113
131
  & > ${StyledFlex}:nth-child(2) {
@@ -128,6 +146,19 @@ export const StyledAppHeader = styled.header(({ navPosition, $isDefaultWSS, them
128
146
  }
129
147
  }
130
148
  `}
149
+
150
+ ${isModernInline &&
151
+ css `
152
+ & > ${StyledFlex}:first-child {
153
+ padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));
154
+ }
155
+
156
+ @media screen and (min-width: ${base.breakpoints.md}) {
157
+ & > ${StyledFlex}:first-child {
158
+ padding-inline: max(calc(${base.spacing} * 2.5), calc((100% - 80rem) / 2));
159
+ }
160
+ }
161
+ `}
131
162
  `;
132
163
  });
133
164
  StyledAppHeader.defaultProps = defaultThemeProp;
package/lib/components/AppShell/AppShell.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { lighten, mix } from 'polished';\nimport styled, { createGlobalStyle, css } from 'styled-components';\n\nimport {\n calculateFontSize,\n calculateForegroundColor,\n Count,\n defaultThemeProp,\n StyledFlex,\n StyledImage,\n StyledText,\n StyledVisual,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { resizeDrawerMaxWidth } from '@pega/cosmos-react-core/lib/styles/constants';\n\nimport type { AppShellProps } from './AppShell.types';\n\nconst headerHeight = '3rem';\nconst tallHeaderHeight = '6rem';\nconst topBarHeight = '2.75rem';\nconst navBarHeight = '3.25rem';\nexport const footerHeight = '2.25rem';\n\nexport const WSSAppShellGlobalStyle = createGlobalStyle<{\n navPosition: AppShellProps['navPosition'];\n hasFooter: boolean;\n}>`\n :root,\n :host {\n --app-header-height: ${({ navPosition }) => (navPosition === 'below' ? tallHeaderHeight : headerHeight)};\n --appshell-hard-top-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-start, 0rem));\n --appshell-top-offset: calc(var(--appshell-hard-top-offset, 0rem) + var(--app-header-height, 0rem));\n --appshell-hard-bottom-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-end, 0rem));\n --appshell-bottom-offset: calc(var(--appshell-hard-bottom-offset, 0rem) + ${({ hasFooter }) => (hasFooter ? footerHeight : '0rem')});\n --appshell-total-offset: calc(var(--appshell-top-offset, 0rem) + var(--appshell-bottom-offset, 0rem));\n }\n`;\n\nexport const StyledNav = styled.nav`\n white-space: nowrap;\n overflow: visible;\n visibility: hidden;\n height: 100%;\n\n a:hover,\n button:hover {\n text-decoration: none;\n }\n`;\n\nexport const StyledPrimaryName = styled.span(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n color: ${theme.base.palette['foreground-color']};\n font-size: ${fontSize.xxl};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n max-width: 50ch;\n `;\n});\n\nStyledPrimaryName.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{\n navPosition: AppShellProps['navPosition'];\n $isDefaultWSS: boolean;\n}>(\n ({\n navPosition,\n $isDefaultWSS,\n theme: {\n base,\n components: {\n 'app-shell': {\n header: {\n background: headerBg,\n 'foreground-color': headerFgColor,\n 'border-color': headerBorderColor\n },\n nav: { background: navBg, 'foreground-color': navFgColor }\n }\n }\n }\n }) => {\n const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);\n const isModernStacked = !$isDefaultWSS && navPosition === 'below';\n const navForeground = calculateForegroundColor(navBg, navFgColor);\n\n return css`\n position: sticky;\n inset-block-start: var(--appshell-hard-top-offset, 0);\n height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};\n width: 100%;\n background: ${isModernStacked ? 'transparent' : headerBg};\n z-index: calc(${base['z-index'].popover} + 1);\n border-bottom: 0.0625rem solid\n ${$isDefaultWSS ? base.palette['border-line'] : headerBorderColor};\n color: ${foregroundColor};\n\n ${StyledImage} {\n height: 1.625rem;\n }\n\n ${StyledPrimaryName} {\n max-width: min(50ch, 50vw);\n }\n\n & > ${StyledFlex} {\n height: ${headerHeight};\n\n ${StyledAppHeaderOperator} {\n margin: ${$isDefaultWSS ? base.spacing : 0};\n }\n\n & > a,\n & > button {\n cursor: pointer;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n min-height: ${headerHeight};\n\n &:focus-visible {\n box-shadow: ${base.shadow.focus};\n }\n }\n }\n\n & > ${StyledNav} {\n height: calc(${tallHeaderHeight} - ${headerHeight});\n }\n\n ${isModernStacked &&\n css`\n border-bottom: none;\n\n & > ${StyledFlex}:first-child {\n height: ${topBarHeight};\n width: 100%;\n background: ${navBg};\n color: ${navForeground};\n padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));\n\n & > a,\n & > button {\n min-height: ${topBarHeight};\n }\n }\n\n & > ${StyledFlex}:nth-child(2) {\n height: ${navBarHeight};\n width: 100%;\n background: ${headerBg};\n color: ${foregroundColor};\n padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));\n\n ${StyledPrimaryName} {\n color: ${foregroundColor};\n }\n }\n\n @media screen and (min-width: ${base.breakpoints.md}) {\n & > ${StyledFlex}:first-child, & > ${StyledFlex}:nth-child(2) {\n padding-inline: max(calc(${base.spacing} * 2.5), calc((100% - 80rem) / 2));\n }\n }\n `}\n `;\n }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledEndNavBlock = styled.div<{ mobile: boolean }>(({ mobile }) => {\n return css`\n flex-shrink: 0;\n\n ${mobile &&\n css`\n margin-inline-start: auto;\n `}\n `;\n});\n\nexport const StyledLink = styled.a(({ theme }) => {\n const hoverColor = lighten(0.2, theme.base.palette.interactive);\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n color: inherit;\n margin: 0 calc(0.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSize.m};\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n\n &:last-of-type {\n margin-inline-end: ${theme.base.spacing};\n }\n\n &[aria-current='page'] {\n &::after {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-block-end: 0;\n background-color: ${theme.base.palette.interactive};\n height: 0.125rem;\n width: 100%;\n }\n }\n\n &:hover {\n &::after {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-block-end: 0;\n background-color: ${hoverColor};\n height: 0.125rem;\n width: 100%;\n }\n }\n `;\n});\n\nStyledLink.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n navPosition: AppShellProps['navPosition'];\n $isDefaultWSS: boolean;\n $hasFooter: boolean;\n previewActive: boolean;\n}>(({ theme, $isDefaultWSS, $hasFooter, previewActive }) => {\n return css`\n --appshell-horizontal-offset: 0;\n inset-block-start: var(--appshell-hard-top-offset, 0);\n padding-block-end: var(--appshell-hard-bottom-offset, 0);\n position: relative;\n min-height: calc(100vh - var(--appshell-total-offset, 0rem));\n background: ${theme.base.palette['app-background']};\n\n :focus {\n outline: none;\n }\n\n ${!$isDefaultWSS &&\n css`\n &:has([data-create-stage]) {\n height: calc(100vh - var(--appshell-total-offset, 0rem));\n min-height: auto;\n overflow: auto;\n }\n\n ${$hasFooter &&\n css`\n &:not(:has([data-create-stage])) {\n --footer-height: ${footerHeight};\n min-height: calc(100vh - var(--appshell-total-offset, 0rem));\n }\n\n &:has([data-create-stage]) + footer {\n position: absolute;\n inset-block-end: 0;\n inset-inline: 0;\n border-top: none;\n }\n `}\n `}\n\n ${$isDefaultWSS &&\n $hasFooter &&\n css`\n --footer-height: ${footerHeight};\n `}\n\n @media (min-width: ${theme.base.breakpoints.md}) {\n transition: margin-inline-end ${theme.base.animation.speed}\n ${theme.base.animation.timing.ease};\n\n ${previewActive &&\n css`\n transition: none;\n margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});\n `}\n }\n `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledModernAppHeaderOperator = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n display: flex;\n align-items: center;\n align-self: center;\n gap: ${theme.base.spacing};\n font-size: ${fontSize.m};\n white-space: nowrap;\n padding-inline: calc(0.75 * ${theme.base.spacing});\n\n ${StyledImage} {\n height: auto;\n }\n `;\n});\n\nStyledModernAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledHamburgerMenu = styled.button(({ theme }) => {\n return css`\n margin: ${theme.base.spacing};\n `;\n});\n\nStyledHamburgerMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled.nav(({ theme }) => {\n return css`\n height: 100vh;\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledMobileLink = styled.a(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const activeColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n\n const hoverColor = tryCatch(() =>\n mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n\n return css`\n font-size: ${fontSize.m};\n padding: ${theme.base.spacing} calc(3 * ${theme.base.spacing});\n background-color: ${theme.base.palette['primary-background']};\n\n & + & {\n margin-inline-start: 0;\n }\n\n &:hover,\n &:focus {\n background-color: ${hoverColor};\n text-decoration: none;\n }\n\n &[aria-current='page'] {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n background-color: ${activeColor};\n }\n\n @media (pointer: coarse) {\n height: ${theme.base['hit-area'].finger};\n }\n `;\n});\n\nStyledMobileLink.defaultProps = defaultThemeProp;\n\nexport const StyledLinkSection = styled.div`\n overflow: auto;\n`;\n\nexport const StyledOperatorSection = styled.div`\n position: sticky;\n bottom: 0;\n`;\n\nexport const HorizontalBreak = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['border-line']};\n height: 0.0625rem;\n margin: ${theme.base.spacing} calc(6 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n & + ${StyledFlex} {\n margin-inline-start: calc(3 * ${theme.base.spacing});\n }\n `;\n});\n\nHorizontalBreak.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationCount = styled.div`\n position: relative;\n display: inline-flex;\n`;\n\nStyledNotificationCount.defaultProps = defaultThemeProp;\n\nexport const StyledCountIcon = styled(Count)`\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n transform: translate(50%, -50%);\n`;\n\nStyledCountIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNotifications = styled.div<{ popover?: boolean }>(({ popover, theme }) => {\n return css`\n min-height: ${popover ? '10rem' : '100vh'};\n max-height: ${popover ? '50vh' : '100vh'};\n background-color: ${theme.base.palette['primary-background']};\n\n ${popover &&\n css`\n max-width: 80ch;\n `}\n `;\n});\n\nStyledNotifications.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationList = styled.ul(({ theme }) => {\n return css`\n overflow: auto;\n\n & > li:not(:last-of-type) {\n border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\n }\n `;\n});\n\nStyledNotificationList.defaultProps = defaultThemeProp;\n\nexport const StyledNotification = styled(BareButton)(({ theme }) => {\n const hoverColor = lighten(0.55, theme.base.palette.interactive);\n\n return css`\n width: 100%;\n padding: calc(2 * ${theme.base.spacing}) calc(3 * ${theme.base.spacing});\n background-color: ${theme.base.palette['primary-background']};\n text-decoration: none;\n cursor: pointer;\n text-align: start;\n white-space: normal;\n\n &:hover,\n &:focus {\n background-color: ${hoverColor};\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n\n ${StyledVisual} {\n align-self: flex-start;\n }\n `;\n});\n\nStyledNotification.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationVisual = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n return css`\n position: relative;\n ${StyledAlert} {\n position: absolute;\n inset-inline-start: 0.375rem;\n inset-block-start: 1.625rem;\n background-color: ${theme.base.palette.interactive};\n height: 0.75rem;\n width: 0.75rem;\n\n ${!unread &&\n css`\n display: none;\n `}\n }\n `;\n});\n\nStyledNotificationVisual.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationPrimary = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n return css`\n font-weight: ${unread\n ? theme.base['font-weight'].bold\n : theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledNotificationPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationSecondary = styled.span<{ unread?: boolean }>(\n ({ theme, unread }) => {\n return css`\n ${StyledText} {\n opacity: ${unread\n ? theme.base.transparency['transparent-1']\n : theme.base.transparency['transparent-3']};\n }\n `;\n }\n);\n\nStyledNotificationSecondary.defaultProps = defaultThemeProp;\n\nexport const StyledBannerRegion = styled.div``;\n\nStyledBannerRegion.defaultProps = defaultThemeProp;\n\nexport const StyledVisuallyHiddenLabel = styled(StyledText)`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 0.0625rem;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 0.0625rem;\n`;\n\nStyledVisuallyHiddenLabel.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.div`\n display: flex;\n align-items: center;\n`;\n\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNavAction = styled(BareButton)`\n display: inline-flex;\n align-items: center;\n`;\n\nStyledNavAction.defaultProps = defaultThemeProp;\n\nexport const StyledUtilityDot = styled(StyledAlert)`\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n transform: translate(50%, -50%);\n`;\n\nStyledUtilityDot.defaultProps = defaultThemeProp;\n\nexport const StyledUtilityVisual = styled(StyledVisual)`\n position: relative;\n`;\n\nStyledUtilityVisual.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { lighten, mix } from 'polished';\nimport styled, { createGlobalStyle, css } from 'styled-components';\n\nimport {\n calculateFontSize,\n calculateForegroundColor,\n Count,\n defaultThemeProp,\n StyledFlex,\n StyledImage,\n StyledText,\n StyledVisual,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { resizeDrawerMaxWidth } from '@pega/cosmos-react-core/lib/styles/constants';\n\nimport type { AppShellProps } from './AppShell.types';\n\nconst headerHeight = '3rem';\nconst tallHeaderHeight = '6rem';\nconst topBarHeight = '2.75rem';\nconst navBarHeight = '3.25rem';\nexport const footerHeight = '2.25rem';\n\nconst getAppHeaderHeight = ({\n navPosition,\n hasMobileNav,\n isDefaultWSS\n}: {\n navPosition: AppShellProps['navPosition'];\n hasMobileNav: boolean;\n isDefaultWSS: boolean;\n}) => {\n if (navPosition !== 'below') return headerHeight;\n if (!hasMobileNav) return tallHeaderHeight;\n\n return isDefaultWSS ? headerHeight : topBarHeight;\n};\n\nexport const WSSAppShellGlobalStyle = createGlobalStyle<{\n navPosition: AppShellProps['navPosition'];\n hasFooter: boolean;\n hasMobileNav: boolean;\n isDefaultWSS: boolean;\n}>`\n :root,\n :host {\n --app-header-height: ${({ navPosition, hasMobileNav, isDefaultWSS }) =>\n getAppHeaderHeight({ navPosition, hasMobileNav, isDefaultWSS })};\n --appshell-hard-top-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-start, 0rem));\n --appshell-top-offset: calc(var(--appshell-hard-top-offset, 0rem) + var(--app-header-height, 0rem));\n --appshell-hard-bottom-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-end, 0rem));\n --appshell-bottom-offset: calc(var(--appshell-hard-bottom-offset, 0rem) + ${({ hasFooter }) => (hasFooter ? footerHeight : '0rem')});\n --appshell-total-offset: calc(var(--appshell-top-offset, 0rem) + var(--appshell-bottom-offset, 0rem));\n }\n`;\n\nexport const StyledNav = styled.nav`\n white-space: nowrap;\n overflow: visible;\n visibility: hidden;\n height: 100%;\n\n a:hover,\n button:hover {\n text-decoration: none;\n }\n`;\n\nexport const StyledPrimaryName = styled.span(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n color: ${theme.base.palette['foreground-color']};\n font-size: ${fontSize.xxl};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n max-width: 50ch;\n `;\n});\n\nStyledPrimaryName.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{\n navPosition: AppShellProps['navPosition'];\n $isDefaultWSS: boolean;\n $hasMobileNav: boolean;\n}>(\n ({\n navPosition,\n $isDefaultWSS,\n $hasMobileNav,\n theme: {\n base,\n components: {\n 'app-shell': {\n header: {\n background: headerBg,\n 'foreground-color': headerFgColor,\n 'border-color': headerBorderColor\n },\n nav: { background: navBg, 'foreground-color': navFgColor }\n }\n }\n }\n }) => {\n const isModernStacked = !$isDefaultWSS && navPosition === 'below';\n const isModernInline = !$isDefaultWSS && navPosition === 'inline';\n\n const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);\n const navForeground = calculateForegroundColor(navBg, navFgColor);\n\n const stackedTopBackground = $hasMobileNav ? headerBg : navBg;\n const stackedTopForeground = $hasMobileNav ? foregroundColor : navForeground;\n\n return css`\n position: sticky;\n inset-block-start: var(--appshell-hard-top-offset, 0);\n height: ${getAppHeaderHeight({\n navPosition,\n hasMobileNav: $hasMobileNav,\n isDefaultWSS: $isDefaultWSS\n })};\n width: 100%;\n background: ${isModernStacked && !$hasMobileNav ? 'transparent' : headerBg};\n z-index: calc(${base['z-index'].popover} + 1);\n border-bottom: 0.0625rem solid\n ${$isDefaultWSS ? base.palette['border-line'] : headerBorderColor};\n color: ${foregroundColor};\n\n ${StyledImage} {\n height: 1.625rem;\n }\n\n ${StyledPrimaryName} {\n max-width: min(50ch, 50vw);\n }\n\n & > ${StyledFlex} {\n height: ${headerHeight};\n\n ${StyledAppHeaderOperator} {\n margin: ${$isDefaultWSS || navPosition === 'inline' ? base.spacing : 0};\n }\n\n & > a,\n & > button {\n cursor: pointer;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n min-height: ${headerHeight};\n\n &:focus-visible {\n box-shadow: ${base.shadow.focus};\n }\n }\n }\n\n & > ${StyledNav} {\n height: calc(${tallHeaderHeight} - ${headerHeight});\n }\n\n ${isModernStacked &&\n css`\n border-bottom: none;\n\n & > ${StyledFlex}:first-child {\n height: ${topBarHeight};\n width: 100%;\n background: ${stackedTopBackground};\n color: ${stackedTopForeground};\n padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));\n\n & > a,\n & > button {\n min-height: ${topBarHeight};\n }\n\n ${StyledPrimaryName} {\n color: ${stackedTopForeground};\n }\n }\n\n & > ${StyledFlex}:nth-child(2) {\n height: ${navBarHeight};\n width: 100%;\n background: ${headerBg};\n color: ${foregroundColor};\n padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));\n\n ${StyledPrimaryName} {\n color: ${foregroundColor};\n }\n }\n\n @media screen and (min-width: ${base.breakpoints.md}) {\n & > ${StyledFlex}:first-child, & > ${StyledFlex}:nth-child(2) {\n padding-inline: max(calc(${base.spacing} * 2.5), calc((100% - 80rem) / 2));\n }\n }\n `}\n\n ${isModernInline &&\n css`\n & > ${StyledFlex}:first-child {\n padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));\n }\n\n @media screen and (min-width: ${base.breakpoints.md}) {\n & > ${StyledFlex}:first-child {\n padding-inline: max(calc(${base.spacing} * 2.5), calc((100% - 80rem) / 2));\n }\n }\n `}\n `;\n }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledEndNavBlock = styled.div<{ mobile: boolean }>(({ mobile }) => {\n return css`\n flex-shrink: 0;\n\n ${mobile &&\n css`\n margin-inline-start: auto;\n `}\n `;\n});\n\nexport const StyledLink = styled.a(({ theme }) => {\n const hoverColor = lighten(0.2, theme.base.palette.interactive);\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n color: inherit;\n margin: 0 calc(0.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSize.m};\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n\n &:last-of-type {\n margin-inline-end: ${theme.base.spacing};\n }\n\n &[aria-current='page'] {\n &::after {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-block-end: 0;\n background-color: ${theme.base.palette.interactive};\n height: 0.125rem;\n width: 100%;\n }\n }\n\n &:hover {\n &::after {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-block-end: 0;\n background-color: ${hoverColor};\n height: 0.125rem;\n width: 100%;\n }\n }\n `;\n});\n\nStyledLink.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n navPosition: AppShellProps['navPosition'];\n $isDefaultWSS: boolean;\n $hasFooter: boolean;\n previewActive: boolean;\n}>(({ theme, $isDefaultWSS, $hasFooter, previewActive }) => {\n return css`\n --appshell-horizontal-offset: 0;\n inset-block-start: var(--appshell-hard-top-offset, 0);\n padding-block-end: var(--appshell-hard-bottom-offset, 0);\n position: relative;\n min-height: calc(100vh - var(--appshell-total-offset, 0rem));\n background: ${theme.base.palette['app-background']};\n\n :focus {\n outline: none;\n }\n\n ${!$isDefaultWSS &&\n css`\n &:has([data-create-stage]) {\n height: calc(100vh - var(--appshell-total-offset, 0rem));\n min-height: auto;\n overflow: auto;\n }\n\n ${$hasFooter &&\n css`\n &:not(:has([data-create-stage])) {\n --footer-height: ${footerHeight};\n min-height: calc(100vh - var(--appshell-total-offset, 0rem));\n }\n\n &:has([data-create-stage]) + footer {\n position: absolute;\n inset-block-end: 0;\n inset-inline: 0;\n border-top: none;\n }\n `}\n `}\n\n ${$isDefaultWSS &&\n $hasFooter &&\n css`\n --footer-height: ${footerHeight};\n `}\n\n @media (min-width: ${theme.base.breakpoints.md}) {\n transition: margin-inline-end ${theme.base.animation.speed}\n ${theme.base.animation.timing.ease};\n\n ${previewActive &&\n css`\n transition: none;\n margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});\n `}\n }\n `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledModernAppHeaderOperator = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n display: flex;\n align-items: center;\n align-self: center;\n gap: ${theme.base.spacing};\n font-size: ${fontSize.m};\n white-space: nowrap;\n padding-inline: calc(0.75 * ${theme.base.spacing});\n\n ${StyledImage} {\n height: auto;\n }\n `;\n});\n\nStyledModernAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledHamburgerMenu = styled.button(({ theme }) => {\n return css`\n margin: ${theme.base.spacing};\n `;\n});\n\nStyledHamburgerMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled.nav(({ theme }) => {\n return css`\n height: 100vh;\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledMobileLink = styled.a(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const activeColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n\n const hoverColor = tryCatch(() =>\n mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n\n return css`\n font-size: ${fontSize.m};\n padding: ${theme.base.spacing} calc(3 * ${theme.base.spacing});\n background-color: ${theme.base.palette['primary-background']};\n\n & + & {\n margin-inline-start: 0;\n }\n\n &:hover,\n &:focus {\n background-color: ${hoverColor};\n text-decoration: none;\n }\n\n &[aria-current='page'] {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n background-color: ${activeColor};\n }\n\n @media (pointer: coarse) {\n height: ${theme.base['hit-area'].finger};\n }\n `;\n});\n\nStyledMobileLink.defaultProps = defaultThemeProp;\n\nexport const StyledLinkSection = styled.div`\n overflow: auto;\n`;\n\nexport const StyledOperatorSection = styled.div`\n position: sticky;\n bottom: 0;\n`;\n\nexport const HorizontalBreak = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['border-line']};\n height: 0.0625rem;\n margin: ${theme.base.spacing} calc(6 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n & + ${StyledFlex} {\n margin-inline-start: calc(3 * ${theme.base.spacing});\n }\n `;\n});\n\nHorizontalBreak.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationCount = styled.div`\n position: relative;\n display: inline-flex;\n`;\n\nStyledNotificationCount.defaultProps = defaultThemeProp;\n\nexport const StyledCountIcon = styled(Count)`\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n transform: translate(50%, -50%);\n`;\n\nStyledCountIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNotifications = styled.div<{ popover?: boolean }>(({ popover, theme }) => {\n return css`\n min-height: ${popover ? '10rem' : '100vh'};\n max-height: ${popover ? '50vh' : '100vh'};\n background-color: ${theme.base.palette['primary-background']};\n\n ${popover &&\n css`\n max-width: 80ch;\n `}\n `;\n});\n\nStyledNotifications.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationList = styled.ul(({ theme }) => {\n return css`\n overflow: auto;\n\n & > li:not(:last-of-type) {\n border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\n }\n `;\n});\n\nStyledNotificationList.defaultProps = defaultThemeProp;\n\nexport const StyledNotification = styled(BareButton)(({ theme }) => {\n const hoverColor = lighten(0.55, theme.base.palette.interactive);\n\n return css`\n width: 100%;\n padding: calc(2 * ${theme.base.spacing}) calc(3 * ${theme.base.spacing});\n background-color: ${theme.base.palette['primary-background']};\n text-decoration: none;\n cursor: pointer;\n text-align: start;\n white-space: normal;\n\n &:hover,\n &:focus {\n background-color: ${hoverColor};\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n\n ${StyledVisual} {\n align-self: flex-start;\n }\n `;\n});\n\nStyledNotification.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationVisual = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n return css`\n position: relative;\n ${StyledAlert} {\n position: absolute;\n inset-inline-start: 0.375rem;\n inset-block-start: 1.625rem;\n background-color: ${theme.base.palette.interactive};\n height: 0.75rem;\n width: 0.75rem;\n\n ${!unread &&\n css`\n display: none;\n `}\n }\n `;\n});\n\nStyledNotificationVisual.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationPrimary = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n return css`\n font-weight: ${unread\n ? theme.base['font-weight'].bold\n : theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledNotificationPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationSecondary = styled.span<{ unread?: boolean }>(\n ({ theme, unread }) => {\n return css`\n ${StyledText} {\n opacity: ${unread\n ? theme.base.transparency['transparent-1']\n : theme.base.transparency['transparent-3']};\n }\n `;\n }\n);\n\nStyledNotificationSecondary.defaultProps = defaultThemeProp;\n\nexport const StyledBannerRegion = styled.div``;\n\nStyledBannerRegion.defaultProps = defaultThemeProp;\n\nexport const StyledVisuallyHiddenLabel = styled(StyledText)`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 0.0625rem;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 0.0625rem;\n`;\n\nStyledVisuallyHiddenLabel.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.div`\n display: flex;\n align-items: center;\n`;\n\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNavAction = styled(BareButton)`\n display: inline-flex;\n align-items: center;\n`;\n\nStyledNavAction.defaultProps = defaultThemeProp;\n\nexport const StyledUtilityDot = styled(StyledAlert)`\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n transform: translate(50%, -50%);\n`;\n\nStyledUtilityDot.defaultProps = defaultThemeProp;\n\nexport const StyledUtilityVisual = styled(StyledVisual)`\n position: relative;\n`;\n\nStyledUtilityVisual.defaultProps = defaultThemeProp;\n"]}
package/lib/components/AppShell/NavLinks.js CHANGED
@@ -23,7 +23,7 @@ const NavLinks = forwardRef(function NavLinks({ navLinks, navAlignment, navPosit
23
23
  alignItems: 'center',
24
24
  gap: 1,
25
25
  justify: navAlignment
26
- }, item: isDefaultWSS ? { grow: 1 } : undefined, navPosition: navPosition, children: navLinks.map(navLink => {
26
+ }, item: isDefaultWSS || navPosition === 'below' ? { grow: 1 } : undefined, navPosition: navPosition, children: navLinks.map(navLink => {
27
27
  if (navLink.links && navLink.links.length > 0) {
28
28
  return (_jsx(StyledLink, { as: MenuButton, variant: 'text', text: navLink.text, menu: { items: navLink.links.map(navLinkToMenuItem) } }, navLink.id));
29
29
  }
package/lib/components/AppShell/NavLinks.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NavLinks.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavLinks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAW1D,6FAA6F;AAC7F,MAAM,iBAAiB,GAAG,CAAC,IAAkB,EAAiB,EAAE;IAC9D,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAEjE,OAAO;QACL,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,OAAO,EAAE,IAAI,CAAC,IAAI;QAClB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;QACzC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,SAAS;QAC5D,OAAO,EAAE,IAAI,CAAC,OAAO;YACnB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;gBACT,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;YAChC,CAAC;YACH,CAAC,CAAC,SAAS;QACb,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS;KACpE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAC3C,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAkC,EACrF,GAAyB;IAEzB,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,YAAY;SACtB,EACD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC5C,WAAW,EAAE,WAAW,YAEvB,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtB,IAAI,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC9C,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAE,UAAU,EACd,OAAO,EAAC,MAAM,EAEd,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,IAFhD,OAAO,CAAC,EAAE,CAGf,CACH,CAAC;YACJ,CAAC;YAED,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAE,MAAM,kBACI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,OAAO,EAAC,MAAM,EAEd,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,CAAC,OAAO,YAEvB,OAAO,CAAC,IAAI,IAJR,OAAO,CAAC,EAAE,CAKJ,CACd,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\n\nimport { Flex, Button, MenuButton } from '@pega/cosmos-react-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\n\nimport { StyledNav, StyledLink } from './AppShell.styles';\nimport type { AppShellProps, NavLinkProps } from './AppShell.types';\n\ninterface NavLinksProps {\n navLinks: AppShellProps['navLinks'];\n navAlignment: AppShellProps['navAlignment'];\n navPosition: AppShellProps['navPosition'];\n isDefaultWSS?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\n// Converts a nested NavLinkProps into the MenuItemProps shape expected by MenuButton's menu.\nconst navLinkToMenuItem = (link: NavLinkProps): MenuItemProps => {\n const hasChildren = Boolean(link.links && link.links.length > 0);\n\n return {\n id: link.id,\n primary: link.text,\n href: hasChildren ? undefined : link.href,\n selected: hasChildren ? undefined : link.active || undefined,\n onClick: link.onClick\n ? (_id, e) => {\n link.onClick?.(e.nativeEvent);\n }\n : undefined,\n items: hasChildren ? link.links?.map(navLinkToMenuItem) : undefined\n };\n};\n\nconst NavLinks = forwardRef(function NavLinks(\n { navLinks, navAlignment, navPosition, isDefaultWSS }: PropsWithoutRef<NavLinksProps>,\n ref: NavLinksProps['ref']\n) {\n return (\n <Flex\n as={StyledNav}\n ref={ref}\n container={{\n alignItems: 'center',\n gap: 1,\n justify: navAlignment\n }}\n item={isDefaultWSS ? { grow: 1 } : undefined}\n navPosition={navPosition}\n >\n {navLinks.map(navLink => {\n if (navLink.links && navLink.links.length > 0) {\n return (\n <StyledLink\n as={MenuButton}\n variant='text'\n key={navLink.id}\n text={navLink.text}\n menu={{ items: navLink.links.map(navLinkToMenuItem) }}\n />\n );\n }\n\n return (\n <StyledLink\n as={Button}\n aria-current={navLink.active ? 'page' : undefined}\n variant='text'\n key={navLink.id}\n href={navLink.href}\n onClick={navLink.onClick}\n >\n {navLink.text}\n </StyledLink>\n );\n })}\n </Flex>\n );\n});\n\nexport default NavLinks;\n"]}
1
+ {"version":3,"file":"NavLinks.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavLinks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAW1D,6FAA6F;AAC7F,MAAM,iBAAiB,GAAG,CAAC,IAAkB,EAAiB,EAAE;IAC9D,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAEjE,OAAO;QACL,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,OAAO,EAAE,IAAI,CAAC,IAAI;QAClB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;QACzC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,SAAS;QAC5D,OAAO,EAAE,IAAI,CAAC,OAAO;YACnB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;gBACT,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;YAChC,CAAC;YACH,CAAC,CAAC,SAAS;QACb,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS;KACpE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAC3C,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAkC,EACrF,GAAyB;IAEzB,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,YAAY;SACtB,EACD,IAAI,EAAE,YAAY,IAAI,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACvE,WAAW,EAAE,WAAW,YAEvB,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtB,IAAI,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC9C,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAE,UAAU,EACd,OAAO,EAAC,MAAM,EAEd,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,IAFhD,OAAO,CAAC,EAAE,CAGf,CACH,CAAC;YACJ,CAAC;YAED,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAE,MAAM,kBACI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,OAAO,EAAC,MAAM,EAEd,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,CAAC,OAAO,YAEvB,OAAO,CAAC,IAAI,IAJR,OAAO,CAAC,EAAE,CAKJ,CACd,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\n\nimport { Flex, Button, MenuButton } from '@pega/cosmos-react-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\n\nimport { StyledNav, StyledLink } from './AppShell.styles';\nimport type { AppShellProps, NavLinkProps } from './AppShell.types';\n\ninterface NavLinksProps {\n navLinks: AppShellProps['navLinks'];\n navAlignment: AppShellProps['navAlignment'];\n navPosition: AppShellProps['navPosition'];\n isDefaultWSS?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\n// Converts a nested NavLinkProps into the MenuItemProps shape expected by MenuButton's menu.\nconst navLinkToMenuItem = (link: NavLinkProps): MenuItemProps => {\n const hasChildren = Boolean(link.links && link.links.length > 0);\n\n return {\n id: link.id,\n primary: link.text,\n href: hasChildren ? undefined : link.href,\n selected: hasChildren ? undefined : link.active || undefined,\n onClick: link.onClick\n ? (_id, e) => {\n link.onClick?.(e.nativeEvent);\n }\n : undefined,\n items: hasChildren ? link.links?.map(navLinkToMenuItem) : undefined\n };\n};\n\nconst NavLinks = forwardRef(function NavLinks(\n { navLinks, navAlignment, navPosition, isDefaultWSS }: PropsWithoutRef<NavLinksProps>,\n ref: NavLinksProps['ref']\n) {\n return (\n <Flex\n as={StyledNav}\n ref={ref}\n container={{\n alignItems: 'center',\n gap: 1,\n justify: navAlignment\n }}\n item={isDefaultWSS || navPosition === 'below' ? { grow: 1 } : undefined}\n navPosition={navPosition}\n >\n {navLinks.map(navLink => {\n if (navLink.links && navLink.links.length > 0) {\n return (\n <StyledLink\n as={MenuButton}\n variant='text'\n key={navLink.id}\n text={navLink.text}\n menu={{ items: navLink.links.map(navLinkToMenuItem) }}\n />\n );\n }\n\n return (\n <StyledLink\n as={Button}\n aria-current={navLink.active ? 'page' : undefined}\n variant='text'\n key={navLink.id}\n href={navLink.href}\n onClick={navLink.onClick}\n >\n {navLink.text}\n </StyledLink>\n );\n })}\n </Flex>\n );\n});\n\nexport default NavLinks;\n"]}
package/lib/components/QuickCreate/QuickCreate.d.ts CHANGED
@@ -28,9 +28,6 @@ export declare const StyledQuickCreateButton: import("styled-components/dist/typ
28
28
  export declare const StyledQuickCreateSecondaryText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
29
29
  ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
30
30
  }, never>> & string & Omit<ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
31
- export declare const StyledCaseIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, {
32
- displayVariant: QuickCreateVariant;
33
- }>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
34
31
  declare const QuickCreate: ForwardRefForwardPropsComponent<QuickCreateProps>;
35
32
  export default QuickCreate;
36
33
  //# sourceMappingURL=QuickCreate.d.ts.map
package/lib/components/QuickCreate/QuickCreate.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"QuickCreate.d.ts","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAwBpD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,eAAO,MAAM,iBAAiB;iBAAsC,OAAO;0MAazE,CAAC;AAIH,eAAO,MAAM,uBAAuB;;;oBAClB,kBAAkB;sBAChB,MAAM;kJAmBxB,CAAC;AAiDH,eAAO,MAAM,8BAA8B;;uJAIzC,CAAC;AAsBH,eAAO,MAAM,cAAc;oBAAkC,kBAAkB;0JAU7E,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAsKlE,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"QuickCreate.d.ts","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAwBpD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,eAAO,MAAM,iBAAiB;iBAAsC,OAAO;0MAazE,CAAC;AAIH,eAAO,MAAM,uBAAuB;;;oBAClB,kBAAkB;sBAChB,MAAM;kJAkBxB,CAAC;AAiDH,eAAO,MAAM,8BAA8B;;uJAIzC,CAAC;AAoBH,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CA+KlE,CAAC;AAEF,eAAe,WAAW,CAAC"}
package/lib/components/QuickCreate/QuickCreate.js CHANGED
@@ -37,7 +37,6 @@ export const StyledQuickCreateButton = styled(Button)(({ theme, displayVariant,
37
37
  height: 100%;
38
38
  width: 100%;
39
39
  max-height: none;
40
- min-height: ${displayVariant === 'stacked' ? `calc(${theme.base.spacing} * 12.5)` : 'auto'};
41
40
  padding-block: calc(${theme.base.spacing} * 1.5);
42
41
  padding-inline: calc(${theme.base.spacing} * 2);
43
42
  border-radius: ${theme.base['border-radius']};
@@ -52,7 +51,7 @@ export const StyledQuickCreateButton = styled(Button)(({ theme, displayVariant,
52
51
  StyledQuickCreateButton.defaultProps = defaultThemeProp;
53
52
  const StyledButtonText = styled.span(({ theme }) => {
54
53
  return css `
55
- ${lineClamp(2)}
54
+ ${lineClamp(3)}
56
55
  font-weight: ${theme.base['font-weight']['semi-bold']};
57
56
  font-size: 1em;
58
57
  color: CanvasText;
@@ -87,14 +86,12 @@ const StyledStackedRow = styled(Flex)(() => {
87
86
  StyledStackedRow.defaultProps = defaultThemeProp;
88
87
  export const StyledQuickCreateSecondaryText = styled(Text)(() => {
89
88
  return css `
90
- ${lineClamp(2)}
89
+ ${lineClamp(3)}
91
90
  `;
92
91
  });
93
92
  StyledQuickCreateSecondaryText.defaultProps = defaultThemeProp;
94
93
  const StyledArrowSection = styled(Flex)(() => {
95
94
  return css `
96
- min-width: 2rem;
97
-
98
95
  ${StyledIconShape} {
99
96
  height: 1rem;
100
97
  }
@@ -107,16 +104,6 @@ const StyledArrowSection = styled(Flex)(() => {
107
104
  `;
108
105
  });
109
106
  StyledArrowSection.defaultProps = defaultThemeProp;
110
- export const StyledCaseIcon = styled(Icon)(({ displayVariant }) => {
111
- return css `
112
- ${displayVariant === 'stacked' &&
113
- css `
114
- height: 3rem;
115
- width: 3rem;
116
- `}
117
- `;
118
- });
119
- StyledCaseIcon.defaultProps = defaultThemeProp;
120
107
  const QuickCreate = forwardRef(function QuickCreate({ heading, actions, className, variant = 'inline', backgroundColor, showHeader = true, ...restProps }, ref) {
121
108
  const theme = useTheme();
122
109
  const consolidatedRef = useConsolidatedRef(ref);
@@ -136,14 +123,18 @@ const QuickCreate = forwardRef(function QuickCreate({ heading, actions, classNam
136
123
  return supplementalColorsList[idx % supplementalColorsList.length];
137
124
  };
138
125
  const getIconComp = (iconName, iconBackground) => {
139
- return iconBackground !== undefined ? (_jsx(StyledCaseIcon, { name: iconName, foreground: readableColor(iconBackground, {
126
+ return iconBackground !== undefined ? (_jsx(Icon, { name: iconName, foreground: readableColor(iconBackground, {
140
127
  mode: 'light',
141
128
  level: 'AANonText'
142
- }), background: iconBackground, displayVariant: displayVariant })) : (_jsx(StyledCaseIcon, { size: 'm', name: iconName, displayVariant: displayVariant }));
129
+ }), background: iconBackground })) : (_jsx(Icon, { size: 'm', name: iconName }));
143
130
  };
144
131
  const getGridCols = () => {
145
- if (isMediumOrAbove)
146
- return 'repeat(4, minmax(0, 1fr))';
132
+ if (isMediumOrAbove) {
133
+ if (actions.length === 1)
134
+ return 'repeat(2, minmax(0, 1fr))';
135
+ const cols = Math.min(Math.max(actions.length, 1), 4);
136
+ return `repeat(${cols}, minmax(0, 1fr))`;
137
+ }
147
138
  if (isSmallOrAbove)
148
139
  return 'repeat(2, minmax(0, 1fr))';
149
140
  return `repeat(auto-fill, minmax(min(calc(${theme.base.spacing} * 30), 100%), 1fr))`;
@@ -154,7 +145,10 @@ const QuickCreate = forwardRef(function QuickCreate({ heading, actions, classNam
154
145
  ...(showHeader ? {} : { justifyContent: 'center' })
155
146
  }, children: actions.map(({ label, icon, description, color, onClick }, idx) => {
156
147
  const iconBackground = getActionColor(color, idx);
157
- return (_jsx("li", { children: _jsx(StyledQuickCreateButton, { onClick: onClick, variant: 'secondary', displayVariant: displayVariant, backgroundColor: backgroundColor, children: isStacked ? (_jsxs(StyledQuickCreateContainer, { variant: displayVariant, container: { gap: 0.75, alignItems: 'center', direction: 'column' }, children: [icon && (_jsx(StyledStackedRow, { container: true, children: _jsx(StyledIconSection, { variant: displayVariant, container: true, children: getIconComp(icon, iconBackground) }) })), _jsx(StyledStackedRow, { container: true, children: _jsx(StyledButtonText, { as: 'span', children: label }) }), description && (_jsx(StyledStackedRow, { container: true, children: _jsx(StyledQuickCreateSecondaryText, { variant: 'secondary', forwardedAs: 'p', children: description }) }))] })) : (_jsxs(StyledQuickCreateContainer, { variant: displayVariant, container: { gap: 0, alignItems: 'center' }, children: [_jsxs(Flex, { container: { gap: 1.5, alignItems: 'center' }, item: { grow: 1 }, children: [icon && (_jsx(StyledIconSection, { variant: displayVariant, container: true, children: getIconComp(icon, iconBackground) })), _jsxs(StyledMiddleSection, { container: {
148
+ return (_jsx("li", { children: _jsx(StyledQuickCreateButton, { onClick: onClick, variant: 'secondary', displayVariant: displayVariant, backgroundColor: backgroundColor, children: isStacked ? (_jsxs(StyledQuickCreateContainer, { variant: displayVariant, container: { gap: 0.75, alignItems: 'center', direction: 'column' }, children: [icon && (_jsx(StyledStackedRow, { container: true, children: _jsx(StyledIconSection, { variant: displayVariant, container: true, children: getIconComp(icon, iconBackground) }) })), _jsx(StyledStackedRow, { container: true, children: _jsx(StyledButtonText, { as: 'span', children: label }) }), description && (_jsx(StyledStackedRow, { container: true, children: _jsx(StyledQuickCreateSecondaryText, { variant: 'secondary', forwardedAs: 'p', children: description }) }))] })) : (_jsxs(StyledQuickCreateContainer, { variant: displayVariant, container: { gap: 0, alignItems: 'center' }, children: [_jsxs(Flex, { container: {
149
+ gap: 1.5,
150
+ alignItems: description ? 'start' : 'center'
151
+ }, item: { grow: 1 }, children: [icon && (_jsx(StyledIconSection, { variant: displayVariant, container: true, children: getIconComp(icon, iconBackground) })), _jsxs(StyledMiddleSection, { container: {
158
152
  direction: 'column',
159
153
  gap: 0.25,
160
154
  alignItems: 'start',
package/lib/components/QuickCreate/QuickCreate.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"QuickCreate.js","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n defaultThemeProp,\n Flex,\n Grid,\n StyledIcon,\n Icon,\n Text,\n VisuallyHiddenText,\n useBreakpoint,\n useTheme,\n supplementalColors,\n resolveSupplementalColor,\n isSolidColor,\n readableColor,\n useConsolidatedRef,\n createClassName\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledIconShape } from '@pega/cosmos-react-core/lib/components/Icon/Icon';\n\nexport interface QuickCreateAction {\n label: string;\n icon?: string;\n description?: string;\n color?: string;\n onClick: MouseEventHandler;\n}\n\nexport type QuickCreateVariant = 'inline' | 'stacked';\n\nexport interface QuickCreateProps extends BaseProps, NoChildrenProp {\n heading: string;\n actions: QuickCreateAction[];\n variant?: QuickCreateVariant;\n showHeader?: boolean;\n backgroundColor?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledQuickCreateCard = styled(Card)<{ showHeader?: boolean }>(({ theme, showHeader }) => {\n const background = showHeader ? theme.components.card.background : 'transparent';\n\n return css`\n background: ${background};\n\n ${!showHeader &&\n css`\n padding: 0;\n `}\n `;\n});\n\nStyledQuickCreateCard.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreate = styled(CardContent)<{ showHeader?: boolean }>(({ showHeader }) => {\n return css`\n ${!showHeader &&\n css`\n &&&& {\n padding: 0;\n }\n `}\n\n ul {\n list-style: none;\n }\n `;\n});\n\nStyledQuickCreate.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreateButton = styled(Button)<{\n displayVariant: QuickCreateVariant;\n backgroundColor?: string;\n}>(({ theme, displayVariant, backgroundColor }) => {\n const background = backgroundColor || theme.base.palette['primary-background'];\n\n return css`\n height: 100%;\n width: 100%;\n max-height: none;\n min-height: ${displayVariant === 'stacked' ? `calc(${theme.base.spacing} * 12.5)` : 'auto'};\n padding-block: calc(${theme.base.spacing} * 1.5);\n padding-inline: calc(${theme.base.spacing} * 2);\n border-radius: ${theme.base['border-radius']};\n border-color: ${theme.base.palette['border-line']};\n justify-content: ${displayVariant === 'stacked' ? 'center' : 'start'};\n text-align: ${displayVariant === 'stacked' ? 'center' : 'start'};\n white-space: break-spaces;\n word-break: break-word;\n background: ${background};\n `;\n});\n\nStyledQuickCreateButton.defaultProps = defaultThemeProp;\n\nconst StyledButtonText = styled.span(({ theme }) => {\n return css`\n ${lineClamp(2)}\n font-weight: ${theme.base['font-weight']['semi-bold']};\n font-size: 1em;\n color: CanvasText;\n `;\n});\n\nStyledButtonText.defaultProps = defaultThemeProp;\n\nconst StyledQuickCreateContainer = styled(Flex)<{ variant: QuickCreateVariant }>(({ variant }) => {\n return css`\n width: 100%;\n\n ${variant === 'stacked' &&\n css`\n text-align: center;\n `}\n `;\n});\n\nStyledQuickCreateContainer.defaultProps = defaultThemeProp;\n\nconst StyledIconSection = styled(Flex)<{ variant: QuickCreateVariant }>(({ variant }) => {\n return css`\n min-width: ${variant === 'stacked' ? 'auto' : '2rem'};\n `;\n});\n\nStyledIconSection.defaultProps = defaultThemeProp;\n\nconst StyledMiddleSection = styled(Flex)``;\n\nStyledMiddleSection.defaultProps = defaultThemeProp;\n\nconst StyledStackedRow = styled(Flex)(() => {\n return css`\n width: 100%;\n justify-content: center;\n `;\n});\n\nStyledStackedRow.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreateSecondaryText = styled(Text)(() => {\n return css`\n ${lineClamp(2)}\n `;\n});\n\nStyledQuickCreateSecondaryText.defaultProps = defaultThemeProp;\n\nconst StyledArrowSection = styled(Flex)(() => {\n return css`\n min-width: 2rem;\n\n ${StyledIconShape} {\n height: 1rem;\n }\n\n ${StyledIcon} {\n fill: CanvasText;\n height: 100%;\n align-self: flex-end;\n }\n `;\n});\n\nStyledArrowSection.defaultProps = defaultThemeProp;\n\nexport const StyledCaseIcon = styled(Icon)<{ displayVariant: QuickCreateVariant }>(({\n displayVariant\n}) => {\n return css`\n ${displayVariant === 'stacked' &&\n css`\n height: 3rem;\n width: 3rem;\n `}\n `;\n});\n\nStyledCaseIcon.defaultProps = defaultThemeProp;\n\nconst QuickCreate: ForwardRefForwardPropsComponent<QuickCreateProps> = forwardRef(\n function QuickCreate(\n {\n heading,\n actions,\n className,\n variant = 'inline',\n backgroundColor,\n showHeader = true,\n ...restProps\n }: QuickCreateProps,\n ref: QuickCreateProps['ref']\n ) {\n const theme = useTheme();\n const consolidatedRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: consolidatedRef });\n const isMediumOrAbove = useBreakpoint('md', { breakpointRef: consolidatedRef });\n\n const displayVariant: QuickCreateVariant = variant === 'stacked' ? 'stacked' : 'inline';\n const isStacked = displayVariant === 'stacked';\n\n const supplementalColorsList = supplementalColors(theme);\n\n const getActionColor = (actionColor: string | undefined, idx: number): string | undefined => {\n const isColorIgnored = theme.base['case-type-colors'] === 'ignored';\n\n if (isColorIgnored) return undefined;\n\n if (actionColor !== undefined) {\n const supplementalColor = resolveSupplementalColor(theme, actionColor);\n\n return supplementalColor ?? (isSolidColor(actionColor) ? actionColor : undefined);\n }\n\n return supplementalColorsList[idx % supplementalColorsList.length];\n };\n\n const getIconComp = (iconName: string, iconBackground: string | undefined) => {\n return iconBackground !== undefined ? (\n <StyledCaseIcon\n name={iconName}\n foreground={readableColor(iconBackground, {\n mode: 'light',\n level: 'AANonText'\n })}\n background={iconBackground}\n displayVariant={displayVariant}\n />\n ) : (\n <StyledCaseIcon size='m' name={iconName} displayVariant={displayVariant} />\n );\n };\n\n const getGridCols = () => {\n if (isMediumOrAbove) return 'repeat(4, minmax(0, 1fr))';\n if (isSmallOrAbove) return 'repeat(2, minmax(0, 1fr))';\n\n return `repeat(auto-fill, minmax(min(calc(${theme.base.spacing} * 30), 100%), 1fr))`;\n };\n\n return (\n <StyledQuickCreateCard\n {...restProps}\n ref={consolidatedRef}\n showHeader={showHeader}\n className={createClassName('quick-create', className)}\n >\n {showHeader ? (\n <CardHeader>\n <Text variant='h2'>{heading}</Text>\n </CardHeader>\n ) : (\n <VisuallyHiddenText as='h2'>{heading}</VisuallyHiddenText>\n )}\n\n <StyledQuickCreate showHeader={showHeader}>\n <Grid\n as='ul'\n container={{\n gap: 1.5,\n cols: getGridCols(),\n ...(showHeader ? {} : { justifyContent: 'center' })\n }}\n >\n {actions.map(({ label, icon, description, color, onClick }, idx) => {\n const iconBackground = getActionColor(color, idx);\n\n return (\n <li key={label}>\n <StyledQuickCreateButton\n onClick={onClick}\n variant='secondary'\n displayVariant={displayVariant}\n backgroundColor={backgroundColor}\n >\n {isStacked ? (\n <StyledQuickCreateContainer\n variant={displayVariant}\n container={{ gap: 0.75, alignItems: 'center', direction: 'column' }}\n >\n {icon && (\n <StyledStackedRow container>\n <StyledIconSection variant={displayVariant} container>\n {getIconComp(icon, iconBackground)}\n </StyledIconSection>\n </StyledStackedRow>\n )}\n\n <StyledStackedRow container>\n <StyledButtonText as='span'>{label}</StyledButtonText>\n </StyledStackedRow>\n\n {description && (\n <StyledStackedRow container>\n <StyledQuickCreateSecondaryText variant='secondary' forwardedAs='p'>\n {description}\n </StyledQuickCreateSecondaryText>\n </StyledStackedRow>\n )}\n </StyledQuickCreateContainer>\n ) : (\n <StyledQuickCreateContainer\n variant={displayVariant}\n container={{ gap: 0, alignItems: 'center' }}\n >\n <Flex container={{ gap: 1.5, alignItems: 'center' }} item={{ grow: 1 }}>\n {icon && (\n <StyledIconSection variant={displayVariant} container>\n {getIconComp(icon, iconBackground)}\n </StyledIconSection>\n )}\n\n <StyledMiddleSection\n container={{\n direction: 'column',\n gap: 0.25,\n alignItems: 'start',\n justify: 'center'\n }}\n item={{ grow: 1 }}\n >\n <StyledButtonText as='span'>{label}</StyledButtonText>\n\n {description && (\n <StyledQuickCreateSecondaryText variant='secondary' forwardedAs='p'>\n {description}\n </StyledQuickCreateSecondaryText>\n )}\n </StyledMiddleSection>\n </Flex>\n\n <StyledArrowSection container>\n <Icon name='arrow-right' size='s' />\n </StyledArrowSection>\n </StyledQuickCreateContainer>\n )}\n </StyledQuickCreateButton>\n </li>\n );\n })}\n </Grid>\n </StyledQuickCreate>\n </StyledQuickCreateCard>\n );\n }\n);\n\nexport default QuickCreate;\n"]}
1
+ {"version":3,"file":"QuickCreate.js","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n defaultThemeProp,\n Flex,\n Grid,\n StyledIcon,\n Icon,\n Text,\n VisuallyHiddenText,\n useBreakpoint,\n useTheme,\n supplementalColors,\n resolveSupplementalColor,\n isSolidColor,\n readableColor,\n useConsolidatedRef,\n createClassName\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledIconShape } from '@pega/cosmos-react-core/lib/components/Icon/Icon';\n\nexport interface QuickCreateAction {\n label: string;\n icon?: string;\n description?: string;\n color?: string;\n onClick: MouseEventHandler;\n}\n\nexport type QuickCreateVariant = 'inline' | 'stacked';\n\nexport interface QuickCreateProps extends BaseProps, NoChildrenProp {\n heading: string;\n actions: QuickCreateAction[];\n variant?: QuickCreateVariant;\n showHeader?: boolean;\n backgroundColor?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledQuickCreateCard = styled(Card)<{ showHeader?: boolean }>(({ theme, showHeader }) => {\n const background = showHeader ? theme.components.card.background : 'transparent';\n\n return css`\n background: ${background};\n\n ${!showHeader &&\n css`\n padding: 0;\n `}\n `;\n});\n\nStyledQuickCreateCard.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreate = styled(CardContent)<{ showHeader?: boolean }>(({ showHeader }) => {\n return css`\n ${!showHeader &&\n css`\n &&&& {\n padding: 0;\n }\n `}\n\n ul {\n list-style: none;\n }\n `;\n});\n\nStyledQuickCreate.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreateButton = styled(Button)<{\n displayVariant: QuickCreateVariant;\n backgroundColor?: string;\n}>(({ theme, displayVariant, backgroundColor }) => {\n const background = backgroundColor || theme.base.palette['primary-background'];\n\n return css`\n height: 100%;\n width: 100%;\n max-height: none;\n padding-block: calc(${theme.base.spacing} * 1.5);\n padding-inline: calc(${theme.base.spacing} * 2);\n border-radius: ${theme.base['border-radius']};\n border-color: ${theme.base.palette['border-line']};\n justify-content: ${displayVariant === 'stacked' ? 'center' : 'start'};\n text-align: ${displayVariant === 'stacked' ? 'center' : 'start'};\n white-space: break-spaces;\n word-break: break-word;\n background: ${background};\n `;\n});\n\nStyledQuickCreateButton.defaultProps = defaultThemeProp;\n\nconst StyledButtonText = styled.span(({ theme }) => {\n return css`\n ${lineClamp(3)}\n font-weight: ${theme.base['font-weight']['semi-bold']};\n font-size: 1em;\n color: CanvasText;\n `;\n});\n\nStyledButtonText.defaultProps = defaultThemeProp;\n\nconst StyledQuickCreateContainer = styled(Flex)<{ variant: QuickCreateVariant }>(({ variant }) => {\n return css`\n width: 100%;\n\n ${variant === 'stacked' &&\n css`\n text-align: center;\n `}\n `;\n});\n\nStyledQuickCreateContainer.defaultProps = defaultThemeProp;\n\nconst StyledIconSection = styled(Flex)<{ variant: QuickCreateVariant }>(({ variant }) => {\n return css`\n min-width: ${variant === 'stacked' ? 'auto' : '2rem'};\n `;\n});\n\nStyledIconSection.defaultProps = defaultThemeProp;\n\nconst StyledMiddleSection = styled(Flex)``;\n\nStyledMiddleSection.defaultProps = defaultThemeProp;\n\nconst StyledStackedRow = styled(Flex)(() => {\n return css`\n width: 100%;\n justify-content: center;\n `;\n});\n\nStyledStackedRow.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreateSecondaryText = styled(Text)(() => {\n return css`\n ${lineClamp(3)}\n `;\n});\n\nStyledQuickCreateSecondaryText.defaultProps = defaultThemeProp;\n\nconst StyledArrowSection = styled(Flex)(() => {\n return css`\n ${StyledIconShape} {\n height: 1rem;\n }\n\n ${StyledIcon} {\n fill: CanvasText;\n height: 100%;\n align-self: flex-end;\n }\n `;\n});\n\nStyledArrowSection.defaultProps = defaultThemeProp;\n\nconst QuickCreate: ForwardRefForwardPropsComponent<QuickCreateProps> = forwardRef(\n function QuickCreate(\n {\n heading,\n actions,\n className,\n variant = 'inline',\n backgroundColor,\n showHeader = true,\n ...restProps\n }: QuickCreateProps,\n ref: QuickCreateProps['ref']\n ) {\n const theme = useTheme();\n const consolidatedRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: consolidatedRef });\n const isMediumOrAbove = useBreakpoint('md', { breakpointRef: consolidatedRef });\n\n const displayVariant: QuickCreateVariant = variant === 'stacked' ? 'stacked' : 'inline';\n const isStacked = displayVariant === 'stacked';\n\n const supplementalColorsList = supplementalColors(theme);\n\n const getActionColor = (actionColor: string | undefined, idx: number): string | undefined => {\n const isColorIgnored = theme.base['case-type-colors'] === 'ignored';\n\n if (isColorIgnored) return undefined;\n\n if (actionColor !== undefined) {\n const supplementalColor = resolveSupplementalColor(theme, actionColor);\n\n return supplementalColor ?? (isSolidColor(actionColor) ? actionColor : undefined);\n }\n\n return supplementalColorsList[idx % supplementalColorsList.length];\n };\n\n const getIconComp = (iconName: string, iconBackground: string | undefined) => {\n return iconBackground !== undefined ? (\n <Icon\n name={iconName}\n foreground={readableColor(iconBackground, {\n mode: 'light',\n level: 'AANonText'\n })}\n background={iconBackground}\n />\n ) : (\n <Icon size='m' name={iconName} />\n );\n };\n\n const getGridCols = () => {\n if (isMediumOrAbove) {\n if (actions.length === 1) return 'repeat(2, minmax(0, 1fr))';\n const cols = Math.min(Math.max(actions.length, 1), 4);\n return `repeat(${cols}, minmax(0, 1fr))`;\n }\n if (isSmallOrAbove) return 'repeat(2, minmax(0, 1fr))';\n\n return `repeat(auto-fill, minmax(min(calc(${theme.base.spacing} * 30), 100%), 1fr))`;\n };\n\n return (\n <StyledQuickCreateCard\n {...restProps}\n ref={consolidatedRef}\n showHeader={showHeader}\n className={createClassName('quick-create', className)}\n >\n {showHeader ? (\n <CardHeader>\n <Text variant='h2'>{heading}</Text>\n </CardHeader>\n ) : (\n <VisuallyHiddenText as='h2'>{heading}</VisuallyHiddenText>\n )}\n\n <StyledQuickCreate showHeader={showHeader}>\n <Grid\n as='ul'\n container={{\n gap: 1.5,\n cols: getGridCols(),\n ...(showHeader ? {} : { justifyContent: 'center' })\n }}\n >\n {actions.map(({ label, icon, description, color, onClick }, idx) => {\n const iconBackground = getActionColor(color, idx);\n\n return (\n <li key={label}>\n <StyledQuickCreateButton\n onClick={onClick}\n variant='secondary'\n displayVariant={displayVariant}\n backgroundColor={backgroundColor}\n >\n {isStacked ? (\n <StyledQuickCreateContainer\n variant={displayVariant}\n container={{ gap: 0.75, alignItems: 'center', direction: 'column' }}\n >\n {icon && (\n <StyledStackedRow container>\n <StyledIconSection variant={displayVariant} container>\n {getIconComp(icon, iconBackground)}\n </StyledIconSection>\n </StyledStackedRow>\n )}\n\n <StyledStackedRow container>\n <StyledButtonText as='span'>{label}</StyledButtonText>\n </StyledStackedRow>\n\n {description && (\n <StyledStackedRow container>\n <StyledQuickCreateSecondaryText variant='secondary' forwardedAs='p'>\n {description}\n </StyledQuickCreateSecondaryText>\n </StyledStackedRow>\n )}\n </StyledQuickCreateContainer>\n ) : (\n <StyledQuickCreateContainer\n variant={displayVariant}\n container={{ gap: 0, alignItems: 'center' }}\n >\n <Flex\n container={{\n gap: 1.5,\n alignItems: description ? 'start' : 'center'\n }}\n item={{ grow: 1 }}\n >\n {icon && (\n <StyledIconSection variant={displayVariant} container>\n {getIconComp(icon, iconBackground)}\n </StyledIconSection>\n )}\n\n <StyledMiddleSection\n container={{\n direction: 'column',\n gap: 0.25,\n alignItems: 'start',\n justify: 'center'\n }}\n item={{ grow: 1 }}\n >\n <StyledButtonText as='span'>{label}</StyledButtonText>\n\n {description && (\n <StyledQuickCreateSecondaryText variant='secondary' forwardedAs='p'>\n {description}\n </StyledQuickCreateSecondaryText>\n )}\n </StyledMiddleSection>\n </Flex>\n\n <StyledArrowSection container>\n <Icon name='arrow-right' size='s' />\n </StyledArrowSection>\n </StyledQuickCreateContainer>\n )}\n </StyledQuickCreateButton>\n </li>\n );\n })}\n </Grid>\n </StyledQuickCreate>\n </StyledQuickCreateCard>\n );\n }\n);\n\nexport default QuickCreate;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-wss",
3
- "version": "9.17.2",
3
+ "version": "9.19.0",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "author": "Pegasystems",
6
6
  "sideEffects": false,
@@ -14,8 +14,8 @@
14
14
  "build": "tsc -b tsconfig.build.json"
15
15
  },
16
16
  "dependencies": {
17
- "@pega/cosmos-react-core": "9.17.2",
18
- "@pega/cosmos-react-work": "9.17.2",
17
+ "@pega/cosmos-react-core": "9.19.0",
18
+ "@pega/cosmos-react-work": "9.19.0",
19
19
  "@types/react": "^17.0.62 || ^18.3.3",
20
20
  "@types/react-dom": "^17.0.20 || ^18.3.0",
21
21
  "polished": "^4.1.0",