npm - @pega/cosmos-react-wss - Versions diffs - 5.0.0-dev.4.9 → 5.0.0-dev.5.0 - Mend

@pega/cosmos-react-wss 5.0.0-dev.4.9 → 5.0.0-dev.5.0

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

Files changed (65) hide show

package/lib/components/AppShell/AppShell.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { AppShellProps } from './AppShell.types';
+declare const AppShell: FunctionComponent<AppShellProps & ForwardProps>;
+export default AppShell;
+//# sourceMappingURL=AppShell.d.ts.map

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAQL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAcjD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAuR5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { Avatar, Backdrop, Button, ContextSwitcher, debounce, Drawer, Flex, Icon, Image, Popover, SkipLinks, Text, useBreakpoint, useConsolidatedRef, useDirection, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
+import Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';
+import { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
+import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import { StyledAppHeader, StyledCountIcon, StyledHamburgerMenu, StyledMain, StyledNotificationCount, StyledPrimaryName, StyledEndNavBlock } from './AppShell.styles';
+import Notifications from './Notifications';
+import MobileHeaderContent from './MobileHeaderContent';
+import NavLinks from './NavLinks';
+const AppShell = forwardRef(function AppShell(props, ref) {
+    const { main, appInfo, navLinks, operator, notifications, contextSwitcher = {}, navAlignment = 'end', navPosition = 'inline' } = props;
+    const t = useI18n();
+    const { contexts, onContextClick, label: contextSwitcherLabel = t('switch_to') } = contextSwitcher;
+    const [backdropOpen, setBackdropOpen] = useState(false);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [drawerContent, setDrawerContent] = useState('');
+    const [notificationsPopover, setNotificationsPopover] = useState(false);
+    const [linksCollapsed, setLinksCollapsed] = useState(false);
+    const [hasMobileNav, setHasMobileNav] = useState(true);
+    const [headerEl, setHeaderEl] = useElement();
+    const [navSectionEl, setNavSectionEl] = useElement();
+    const [popoverEl, setPopoverEl] = useElement();
+    const [notificationsButtonEl, setNotificationsButtonEl] = useElement();
+    const minInlineWidth = useRef(0);
+    const headerRef = useConsolidatedRef(setHeaderEl, ref);
+    const isSmallOrAbove = useBreakpoint('sm');
+    const { end } = useDirection();
+    let appInfoAs = 'div';
+    if (appInfo.href)
+        appInfoAs = 'a';
+    else if (appInfo.onClick)
+        appInfoAs = BareButton;
+    const skipLinks = useMemo(() => [
+        {
+            label: t('go_to_main_content'),
+            target: { ariaLabel: t('main_content'), selector: 'main' }
+        }
+    ], [t]);
+    const closeDrawer = () => {
+        setDrawerContent('');
+        setBackdropOpen(false);
+    };
+    const openDrawer = (content) => {
+        setDrawerContent(content);
+        setBackdropOpen(true);
+    };
+    useOuterEvent('mousedown', [popoverEl, notificationsButtonEl], () => {
+        setNotificationsPopover(false);
+        notifications?.onNotificationsClose?.();
+    });
+    const debouncedResize = debounce((entries) => {
+        if (entries[0].contentRect.width > minInlineWidth.current) {
+            setLinksCollapsed(false);
+        }
+    }, 100);
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(debouncedResize);
+        const intersectionObserver = new IntersectionObserver(entries => {
+            if (entries[0].intersectionRatio > 0 &&
+                entries[0].intersectionRatio < 1 &&
+                !linksCollapsed) {
+                if (headerEl)
+                    minInlineWidth.current = headerEl.clientWidth + 1;
+                setLinksCollapsed(true);
+            }
+            else if (navSectionEl)
+                navSectionEl.style.visibility = 'visible';
+        }, { root: navPosition === 'below' ? null : navSectionEl, threshold: 1 });
+        if (headerEl && navSectionEl && navSectionEl.firstChild && navSectionEl.lastChild) {
+            intersectionObserver.observe(navAlignment === 'start'
+                ? navSectionEl.lastChild
+                : navSectionEl.firstChild);
+            resizeObserver.observe(headerEl);
+        }
+        return () => {
+            if (!headerEl) {
+                intersectionObserver.disconnect();
+                resizeObserver.disconnect();
+            }
+        };
+    }, [headerEl, navSectionEl, navLinks]);
+    useEffect(() => {
+        setHasMobileNav(!isSmallOrAbove || linksCollapsed);
+    }, [isSmallOrAbove, linksCollapsed]);
+    useEffect(() => {
+        if (!hasMobileNav && drawerOpen) {
+            if (drawerContent === 'notifications' && notifications) {
+                setNotificationsPopover(true);
+            }
+            setDrawerOpen(false);
+        }
+        else if (hasMobileNav && notificationsPopover) {
+            setNotificationsPopover(false);
+            openDrawer('notifications');
+        }
+    }, [hasMobileNav, drawerOpen]);
+    return (_jsxs(_Fragment, { children: [_jsx(SkipLinks, { items: skipLinks }), _jsxs(StyledAppHeader, { ref: headerRef, navPosition: navPosition, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), _jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsx(Text, { as: StyledPrimaryName, variant: 'h1', children: appInfo.appName }))] }), !hasMobileNav && navPosition === 'inline' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition })), _jsxs(Flex, { as: StyledEndNavBlock, container: { alignItems: 'center' }, mobile: hasMobileNav, children: [notifications && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: setNotificationsButtonEl, variant: 'simple', label: t('open_app_header_notifications'), icon: true, onClick: () => {
+                                                    if (!hasMobileNav) {
+                                                        if (notificationsPopover) {
+                                                            setNotificationsPopover(false);
+                                                            notifications.onNotificationsClose?.();
+                                                        }
+                                                        else {
+                                                            setNotificationsPopover(true);
+                                                            notifications.onNotificationsOpen?.();
+                                                        }
+                                                    }
+                                                    else {
+                                                        openDrawer('notifications');
+                                                    }
+                                                }, children: _jsxs(StyledNotificationCount, { children: [_jsx(Icon, { name: 'bell' }), !!notifications.count && (_jsx(StyledCountIcon, { variant: 'urgent', children: notifications.count }))] }) }), _jsx(Popover, { ref: setPopoverEl, show: notificationsPopover, target: notificationsButtonEl, placement: 'bottom-end', children: _jsx(Notifications, { ...notifications, popover: true }) })] })), !hasMobileNav && (_jsx(Operator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: _jsx(Avatar, { ...operator.avatar }) })), hasMobileNav && (_jsx(Button, { as: StyledHamburgerMenu, label: t('open_app_header_drawer'), variant: 'simple', icon: true, onClick: () => openDrawer('navigationOperator'), children: _jsx(Icon, { name: 'bars' }) }))] })] }), !hasMobileNav && navPosition === 'below' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition }))] }), _jsx(StyledMain, { navPosition: navPosition, children: main }), _jsx(Backdrop, { open: backdropOpen, transitionSpeed: 'none', onAfterTransitionIn: () => setDrawerOpen(true), onBeforeTransitionOut: () => setDrawerOpen(false), onClick: e => {
+                    if (e.currentTarget === e.target)
+                        setDrawerOpen(false);
+                }, children: _jsxs(Drawer, { open: drawerOpen, onAfterClose: () => {
+                        closeDrawer();
+                        if (drawerContent === 'notifications') {
+                            notifications?.onNotificationsClose?.();
+                        }
+                    }, onAfterOpen: () => {
+                        if (drawerContent === 'notifications') {
+                            notifications?.onNotificationsOpen?.();
+                        }
+                    }, position: 'fixed', placement: end, size: 'min(26rem, calc(100vw - 5rem))', nullWhenClosed: true, children: [drawerContent === 'notifications' && notifications && (_jsx(Notifications, { ...notifications, onClose: () => setDrawerOpen(false) })), drawerContent === 'navigationOperator' && (_jsx(MobileHeaderContent, { appInfo: appInfo, navLinks: navLinks, operator: operator, onClose: () => setDrawerOpen(false) }))] }) })] }));
+});
+export default AppShell;
+//# sourceMappingURL=AppShell.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ElementType,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n Avatar,\n Backdrop,\n Button,\n ContextSwitcher,\n debounce,\n Drawer,\n Flex,\n ForwardProps,\n Icon,\n Image,\n Popover,\n SkipLinks,\n SkipLinksProps,\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useDirection,\n useElement,\n useI18n,\n useOuterEvent\n} 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';\n\nimport { AppShellProps } from './AppShell.types';\nimport {\n StyledAppHeader,\n StyledCountIcon,\n StyledHamburgerMenu,\n StyledMain,\n StyledNotificationCount,\n StyledPrimaryName,\n StyledEndNavBlock\n} from './AppShell.styles';\nimport Notifications from './Notifications';\nimport MobileHeaderContent from './MobileHeaderContent';\nimport NavLinks from './NavLinks';\n\nconst AppShell: FunctionComponent<AppShellProps & ForwardProps> = forwardRef(function AppShell(\n props: PropsWithoutRef<AppShellProps>,\n ref: AppShellProps['ref']\n) {\n const {\n main,\n appInfo,\n navLinks,\n operator,\n notifications,\n contextSwitcher = {},\n navAlignment = 'end',\n navPosition = 'inline'\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\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 && 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 return (\n <>\n <SkipLinks items={skipLinks} />\n <StyledAppHeader ref={headerRef} navPosition={navPosition}>\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\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 <Text as={StyledPrimaryName} variant='h1'>\n {appInfo.appName}\n </Text>\n )}\n </Flex>\n\n {!hasMobileNav && navPosition === 'inline' && (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n />\n )}\n\n <Flex as={StyledEndNavBlock} container={{ alignItems: 'center' }} mobile={hasMobileNav}>\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 {!hasMobileNav && (\n <Operator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-start' }}\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 {!hasMobileNav && navPosition === 'below' && (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n />\n )}\n </StyledAppHeader>\n\n <StyledMain navPosition={navPosition}>{main}</StyledMain>\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 ADDED Viewed

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { AppShellProps } from './AppShell.types';
+export declare const StyledNav: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {
+    navPosition: AppShellProps['navPosition'];
+}, never>;
+export declare const StyledPrimaryName: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEndNavBlock: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    mobile: boolean;
+}, never>;
+export declare const StyledLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {
+    navPosition: AppShellProps['navPosition'];
+}, never>;
+export declare const StyledHamburgerMenu: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMobileNav: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMobileLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledLinkSection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledOperatorSection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const HorizontalBreak: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNotificationCount: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCountIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@pega/cosmos-react-core").CountProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNotifications: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    popover?: boolean | undefined;
+}, never>;
+export declare const StyledNotificationList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNotification: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNotificationVisual: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    unread?: boolean | undefined;
+}, never>;
+export declare const StyledNotificationPrimary: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    unread?: boolean | undefined;
+}, never>;
+export declare const StyledNotificationSecondary: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    unread?: boolean | undefined;
+}, never>;
+//# sourceMappingURL=AppShell.styles.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":";AAiBA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,eAAO,MAAM,SAAS,yGAUrB,CAAC;AAEF,eAAO,MAAM,eAAe;iBAAgC,aAAa,CAAC,aAAa,CAAC;SAyCvF,CAAC;AAIF,eAAO,MAAM,iBAAiB,0GAY5B,CAAC;AAIH,eAAO,MAAM,iBAAiB;YAAwB,OAAO;SAO3D,CAAC;AAEH,eAAO,MAAM,UAAU,uGAyCrB,CAAC;AAIH,eAAO,MAAM,UAAU;iBAA8B,aAAa,CAAC,aAAa,CAAC;SAehF,CAAC;AAIF,eAAO,MAAM,mBAAmB,4GAI9B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAK1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,uGAmC3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAE7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAGjC,CAAC;AAEF,eAAO,MAAM,eAAe,yGAU1B,CAAC;AAIH,eAAO,MAAM,uBAAuB,0GAEnC,CAAC;AAEF,eAAO,MAAM,eAAe;;uDAkB3B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;SAW9B,CAAC;AAIH,eAAO,MAAM,sBAAsB,wGAQjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,0QA0B7B,CAAC;AAIH,eAAO,MAAM,wBAAwB;;SAiBnC,CAAC;AAIH,eAAO,MAAM,yBAAyB;;SAMpC,CAAC;AAIH,eAAO,MAAM,2BAA2B;;SAUvC,CAAC"}

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

@@ -0,0 +1,302 @@
+import { lighten, mix } from 'polished';
+import styled, { css } from 'styled-components';
+import { calculateFontSize, Count, defaultThemeProp, StyledFlex, StyledImage, StyledText, StyledVisual, tryCatch } from '@pega/cosmos-react-core';
+import { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
+import { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';
+import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+const headerHeight = '3rem';
+const tallHeaderHeight = '6rem';
+export const StyledNav = styled.nav `
+  white-space: nowrap;
+  overflow: visible;
+  visibility: hidden;
+  height: 100%;
+  a:hover,
+  button:hover {
+    text-decoration: none;
+  }
+`;
+export const StyledAppHeader = styled.header(({ navPosition, theme }) => {
+    return css `
+      position: sticky;
+      inset-block-start: 0;
+      height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};
+      width: 100%;
+      background-color: ${theme.base.palette['primary-background']};
+      z-index: calc(${theme.base['z-index'].popover} + 1);
+      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+      ${StyledImage} {
+        height: 1.625rem;
+      }
+      & > ${StyledFlex} {
+        height: ${headerHeight};
+        ${StyledAppHeaderOperator} {
+          margin: ${theme.base.spacing};
+        }
+        & > a,
+        & > button {
+          cursor: pointer;
+          text-decoration: none;
+          user-select: none;
+          -webkit-user-select: none;
+          min-height: ${headerHeight};
+          &:focus {
+            box-shadow: ${theme.base.shadow.focus};
+          }
+        }
+      }
+      & > ${StyledNav} {
+        height: calc(${tallHeaderHeight} - ${headerHeight});
+      }
+    `;
+});
+StyledAppHeader.defaultProps = defaultThemeProp;
+export const StyledPrimaryName = styled.span(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    color: ${theme.base.palette['foreground-color']};
+    font-size: ${fontSize.xxl};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    max-width: 50ch;
+  `;
+});
+StyledPrimaryName.defaultProps = defaultThemeProp;
+export const StyledEndNavBlock = styled.div(({ mobile }) => {
+    return (mobile &&
+        css `
+      margin-inline-start: auto;
+    `);
+});
+export const StyledLink = styled.a(({ theme }) => {
+    const hoverColor = lighten(0.2, theme.base.palette.interactive);
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    margin: 0 calc(0.5 * ${theme.base.spacing});
+    padding: 0 calc(0.5 * ${theme.base.spacing});
+    font-size: ${fontSize.m};
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    &:last-of-type {
+      margin-inline-end: ${theme.base.spacing};
+    }
+    &[aria-current='page'] {
+      ::after {
+        content: '';
+        position: absolute;
+        inset-inline-start: 0;
+        inset-block-end: 0;
+        background-color: ${theme.base.palette.interactive};
+        height: 0.125rem;
+        width: 100%;
+      }
+    }
+    &:hover {
+      ::after {
+        content: '';
+        position: absolute;
+        inset-inline-start: 0;
+        inset-block-end: 0;
+        background-color: ${hoverColor};
+        height: 0.125rem;
+        width: 100%;
+      }
+    }
+  `;
+});
+StyledLink.defaultProps = defaultThemeProp;
+export const StyledMain = styled.main(({ navPosition, theme }) => {
+    const calculatedHeaderHeight = navPosition === 'below' ? tallHeaderHeight : headerHeight;
+    return css `
+      --appshell-offset: ${calculatedHeaderHeight};
+      --appshell-horizontal-offset: 0;
+      position: relative;
+      min-height: calc(100vh - ${calculatedHeaderHeight});
+      background-color: ${theme.base.palette['primary-background']};
+      :focus {
+        outline: none;
+      }
+    `;
+});
+StyledMain.defaultProps = defaultThemeProp;
+export const StyledHamburgerMenu = styled.button(({ theme }) => {
+    return css `
+    margin: ${theme.base.spacing};
+  `;
+});
+StyledHamburgerMenu.defaultProps = defaultThemeProp;
+export const StyledMobileNav = styled.nav(({ theme }) => {
+    return css `
+    height: 100vh;
+    background-color: ${theme.base.palette['primary-background']};
+  `;
+});
+StyledMobileNav.defaultProps = defaultThemeProp;
+export const StyledMobileLink = styled.a(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const activeColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
+    const hoverColor = tryCatch(() => mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive));
+    return css `
+    font-size: ${fontSize.m};
+    padding: ${theme.base.spacing} calc(3 * ${theme.base.spacing});
+    background-color: ${theme.base.palette['primary-background']};
+    & + & {
+      margin-inline-start: 0;
+    }
+    &:hover,
+    &:focus {
+      background-color: ${hoverColor};
+      text-decoration: none;
+    }
+    &[aria-current='page'] {
+      font-weight: ${theme.base['font-weight']['semi-bold']};
+      background-color: ${activeColor};
+    }
+    @media (pointer: coarse) {
+      height: ${theme.base['hit-area'].finger};
+    }
+  `;
+});
+StyledMobileLink.defaultProps = defaultThemeProp;
+export const StyledLinkSection = styled.div `
+  overflow: auto;
+`;
+export const StyledOperatorSection = styled.div `
+  position: sticky;
+  bottom: 0;
+`;
+export const HorizontalBreak = styled.div(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['border-line']};
+    height: 0.0625rem;
+    margin: ${theme.base.spacing} calc(6 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});
+    & + ${StyledFlex} {
+      margin-inline-start: calc(3 * ${theme.base.spacing});
+    }
+  `;
+});
+HorizontalBreak.defaultProps = defaultThemeProp;
+export const StyledNotificationCount = styled.span `
+  flex-shrink: 0;
+`;
+export const StyledCountIcon = styled(Count)(({ theme: { base: { spacing } } }) => {
+    return css `
+      position: absolute;
+      inset-inline-start: calc(2 * ${spacing});
+      inset-block-start: calc(-0.25 * ${spacing});
+      padding: 0 calc(0.5 * ${spacing});
+      @media (pointer: coarse) {
+        inset-inline-start: calc(2.5 * ${spacing});
+        inset-block-start: calc(0.5 * ${spacing});
+      }
+    `;
+});
+export const StyledNotifications = styled.div(({ popover, theme }) => {
+    return css `
+    min-height: ${popover ? '10rem' : '100vh'};
+    max-height: ${popover ? '50vh' : '100vh'};
+    background-color: ${theme.base.palette['primary-background']};
+    ${popover &&
+        css `
+      max-width: 80ch;
+    `}
+  `;
+});
+StyledNotifications.defaultProps = defaultThemeProp;
+export const StyledNotificationList = styled.ul(({ theme }) => {
+    return css `
+    overflow: auto;
+    & > li:not(:last-of-type) {
+      border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};
+    }
+  `;
+});
+StyledNotificationList.defaultProps = defaultThemeProp;
+export const StyledNotification = styled(BareButton)(({ theme }) => {
+    const hoverColor = lighten(0.55, theme.base.palette.interactive);
+    return css `
+    width: 100%;
+    padding: calc(2 * ${theme.base.spacing}) calc(3 * ${theme.base.spacing});
+    background-color: ${theme.base.palette['primary-background']};
+    text-decoration: none;
+    cursor: pointer;
+    text-align: start;
+    white-space: normal;
+    &:hover,
+    &:focus {
+      background-color: ${hoverColor};
+    }
+    &:focus {
+      outline: none;
+      box-shadow: ${theme.base.shadow['focus-inset']};
+    }
+    ${StyledVisual} {
+      align-self: flex-start;
+    }
+  `;
+});
+StyledNotification.defaultProps = defaultThemeProp;
+export const StyledNotificationVisual = styled.span(({ theme, unread }) => {
+    return css `
+    position: relative;
+    ${StyledAlert} {
+      position: absolute;
+      inset-inline-start: 0.375rem;
+      inset-block-start: 1.625rem;
+      background-color: ${theme.base.palette.interactive};
+      height: 0.75rem;
+      width: 0.75rem;
+      ${!unread &&
+        css `
+        display: none;
+      `}
+    }
+  `;
+});
+StyledNotificationVisual.defaultProps = defaultThemeProp;
+export const StyledNotificationPrimary = styled.span(({ theme, unread }) => {
+    return css `
+    font-weight: ${unread
+        ? theme.base['font-weight'].bold
+        : theme.base['font-weight']['semi-bold']};
+  `;
+});
+StyledNotificationPrimary.defaultProps = defaultThemeProp;
+export const StyledNotificationSecondary = styled.span(({ theme, unread }) => {
+    return css `
+      ${StyledText} {
+        opacity: ${unread
+        ? theme.base.transparency['transparent-1']
+        : theme.base.transparency['transparent-3']};
+      }
+    `;
+});
+StyledNotificationSecondary.defaultProps = defaultThemeProp;
+//# sourceMappingURL=AppShell.styles.js.map

package/lib/components/AppShell/AppShell.styles.js.map ADDED Viewed

@@ -0,0 +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, { css } from 'styled-components';\n\nimport {\n calculateFontSize,\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';\n\nimport { AppShellProps } from './AppShell.types';\n\nconst headerHeight = '3rem';\nconst tallHeaderHeight = '6rem';\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 StyledAppHeader = styled.header<{ navPosition: AppShellProps['navPosition'] }>(\n ({ navPosition, theme }) => {\n return css`\n position: sticky;\n inset-block-start: 0;\n height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n z-index: calc(${theme.base['z-index'].popover} + 1);\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n\n ${StyledImage} {\n height: 1.625rem;\n }\n\n & > ${StyledFlex} {\n height: ${headerHeight};\n\n ${StyledAppHeaderOperator} {\n margin: ${theme.base.spacing};\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 {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n\n & > ${StyledNav} {\n height: calc(${tallHeaderHeight} - ${headerHeight});\n }\n `;\n }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\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 StyledEndNavBlock = styled.div<{ mobile: boolean }>(({ mobile }) => {\n return (\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 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<{ navPosition: AppShellProps['navPosition'] }>(\n ({ navPosition, theme }) => {\n const calculatedHeaderHeight = navPosition === 'below' ? tallHeaderHeight : headerHeight;\n return css`\n --appshell-offset: ${calculatedHeaderHeight};\n --appshell-horizontal-offset: 0;\n position: relative;\n min-height: calc(100vh - ${calculatedHeaderHeight});\n background-color: ${theme.base.palette['primary-background']};\n\n :focus {\n outline: none;\n }\n `;\n }\n);\n\nStyledMain.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.span`\n flex-shrink: 0;\n`;\n\nexport const StyledCountIcon = styled(Count)(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n position: absolute;\n inset-inline-start: calc(2 * ${spacing});\n inset-block-start: calc(-0.25 * ${spacing});\n padding: 0 calc(0.5 * ${spacing});\n\n @media (pointer: coarse) {\n inset-inline-start: calc(2.5 * ${spacing});\n inset-block-start: calc(0.5 * ${spacing});\n }\n `;\n }\n);\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 {\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"]}