@pega/cosmos-react-wss 3.0.0-dev.11.0

package/LICENSE

@@ -0,0 +1,185 @@
+                                 Cosmos License
+                           Version 1.0, September 2020
+   This is a proprietary license that is based on the Apache 2.0 license and
+is intended to provide a similar set of rights with the exception that any and
+     all Cosmos components shall be used only with Pegasystems Software.
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+      "Pegasystems" (or "Pega") shall mean Pegasystems Inc., a Massachusetts
+      Corporation, having an office at One Rogers Street, Cambridge, MA 02142.
+
+      "Pegasystems Software" shall mean duly licensed Pegasystems software
+      and/or subscription services including but not limited to the Pega
+      Platform.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form solely for
+      use with Pegasystems Software.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License including the limitation that
+      the Work be used only with Pegasystems Software.
+
+   5. Submission of Contributions. Any Contribution intentionally submitted
+      for inclusion in the Work by You to the Licensor shall be under the
+      terms and conditions of this License, without any additional terms or
+      conditions. Notwithstanding the above, nothing herein shall supersede
+      or modify the terms of any separate license agreement you may have
+      executed with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS

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

@@ -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

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

package/lib/components/AppShell/AppShell.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Avatar, Backdrop, Button, Count, debounce, Drawer, Flex, Icon, Image, Popover, SkipNavigation, 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/AppShell.styles';
+import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import { StyledAppHeader, StyledCountIcon, StyledHamburgerMenu, StyledMain, StyledNotificationCount, StyledPrimaryName } from './AppShell.styles';
+import Notifications from './Notifications';
+import MobileHeaderContent from './MobileHeaderContent';
+import NavLinks from './NavLinks';
+const AppShell = forwardRef((props, ref) => {
+    const { main, appInfo, navLinks, operator, notifications, navAlignment = 'end', navPosition = 'inline' } = props;
+    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();
+    const t = useI18n();
+    let appInfoAs = 'div';
+    if (appInfo.href)
+        appInfoAs = 'a';
+    else if (appInfo.onClick)
+        appInfoAs = BareButton;
+    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(SkipNavigation, {}), _jsxs(StyledAppHeader, { ref: headerRef, navPosition: navPosition, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [_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, { container: { alignItems: 'center' }, 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(Count, { as: 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

@@ -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  useRef,\n  useState\n} from 'react';\n\nimport {\n  Avatar,\n  Backdrop,\n  Button,\n  Count,\n  debounce,\n  Drawer,\n  Flex,\n  ForwardProps,\n  Icon,\n  Image,\n  Popover,\n  SkipNavigation,\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/AppShell.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} from './AppShell.styles';\nimport Notifications from './Notifications';\nimport MobileHeaderContent from './MobileHeaderContent';\nimport NavLinks from './NavLinks';\n\nconst AppShell: FunctionComponent<AppShellProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<AppShellProps>, ref: AppShellProps['ref']) => {\n    const {\n      main,\n      appInfo,\n      navLinks,\n      operator,\n      notifications,\n      navAlignment = 'end',\n      navPosition = 'inline'\n    } = props;\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    const t = useI18n();\n\n    let appInfoAs: ElementType = 'div';\n    if (appInfo.href) appInfoAs = 'a';\n    else if (appInfo.onClick) appInfoAs = BareButton;\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        <SkipNavigation />\n        <StyledAppHeader ref={headerRef} navPosition={navPosition}>\n          <Flex container={{ alignItems: 'center', justify: 'between' }}>\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 container={{ alignItems: 'center' }}>\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                        <Count as={StyledCountIcon} variant='urgent'>\n                          {notifications.count}\n                        </Count>\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              {!hasMobileNav && (\n                <Operator\n                  as={StyledAppHeaderOperator}\n                  actions={operator.actions}\n                  popover={{ placement: 'bottom-start' }}\n                >\n                  <Avatar {...operator.avatar} />\n                </Operator>\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);\n\nexport default AppShell;\n"]}

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

@@ -0,0 +1,33 @@
+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 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<"span", 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

@@ -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,UAAU,uGAyCrB,CAAC;AAIH,eAAO,MAAM,UAAU;iBAA8B,aAAa,CAAC,aAAa,CAAC;SAYhF,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,0GAkB3B,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

@@ -0,0 +1,293 @@
+import { lighten, mix } from 'polished';
+import styled, { css } from 'styled-components';
+import { calculateFontSize, defaultThemeProp, StyledFlex, StyledImage, StyledText, StyledVisual, tryCatch, useDirection } from '@pega/cosmos-react-core';
+import { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.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 StyledLink = styled.a(({ theme }) => {
+    const { start } = useDirection();
+    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;
+
+    &:last-of-type {
+      margin-inline-end: ${theme.base.spacing};
+    }
+
+    &[aria-current='page'] {
+      ::after {
+        content: '';
+        position: absolute;
+        ${start}: 0;
+        inset-block-end: 0;
+        background-color: ${theme.base.palette.interactive};
+        height: 0.125rem;
+        width: 100%;
+      }
+    }
+
+    &:hover {
+      ::after {
+        content: '';
+        position: absolute;
+        ${start}: 0;
+        inset-block-end: 0;
+        background-color: ${hoverColor};
+        height: 0.125rem;
+        width: 100%;
+      }
+    }
+  `;
+});
+StyledLink.defaultProps = defaultThemeProp;
+export const StyledMain = styled.main(({ navPosition, theme }) => {
+    return css `
+      position: relative;
+      min-height: calc(100vh - ${navPosition === 'below' ? tallHeaderHeight : headerHeight});
+      background-color: ${theme.base.palette['app-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.span(({ 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: inset ${theme.base.shadow.focus};
+    }
+
+    ${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

@@ -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  defaultThemeProp,\n  StyledFlex,\n  StyledImage,\n  StyledText,\n  StyledVisual,\n  tryCatch,\n  useDirection\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.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 StyledLink = styled.a(({ theme }) => {\n  const { start } = useDirection();\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\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        ${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        ${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    return css`\n      position: relative;\n      min-height: calc(100vh - ${navPosition === 'below' ? tallHeaderHeight : headerHeight});\n      background-color: ${theme.base.palette['app-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.span(\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: inset ${theme.base.shadow.focus};\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"]}

package/lib/components/AppShell/AppShell.types.d.ts

@@ -0,0 +1,93 @@
+import { MouseEventHandler, ReactNode, Ref } from 'react';
+import { Action, AvatarProps, BaseProps, ImageProps, NoChildrenProp } from '@pega/cosmos-react-core';
+export declare type InteractionEvent = MouseEvent | KeyboardEvent;
+interface AppInfoProps {
+    /** Name of the application. */
+    appName: string;
+    /** URL source of the logo image. */
+    imageSrc: ImageProps['src'];
+    /** URL or DOM id to navigate to from the logo and appName. */
+    href?: string;
+    /** Click handler for the logo and appName. */
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    /** Specifies where to open the link href. */
+    target?: string;
+}
+interface NavLinkProps {
+    /** Unique id for the link */
+    id: string;
+    /** Text that is displayed for the link. */
+    text: string;
+    /** URL or DOM id to navigate to. */
+    href: string;
+    /** Click handler for the link. */
+    onClick?: (e: InteractionEvent) => void;
+    /** Indicates if the link represents the current view within the app. */
+    current?: boolean;
+}
+interface OperatorProps {
+    /** Props for constructing the operator avatar. */
+    avatar: AvatarProps;
+    /** The title of the operator menu. */
+    title: string;
+    /** A list of actions that will populate a menu attached to the operator. */
+    actions: Action[];
+}
+export interface NotificationItem {
+    /** An id representing the item. */
+    id: string;
+    /** The primary text for the item. */
+    primary: string;
+    /** Secondary text that will be rendered as a Meta List. */
+    secondary?: string[];
+    /** A visual associated with the item. */
+    visual?: ReactNode;
+    /** A flag indicating if the item has been read. */
+    unread?: boolean;
+    /** URL or DOM id to navigate to. */
+    href?: string;
+    /** The onClick handler for the item. */
+    onClick?: (event: InteractionEvent) => void;
+}
+export interface NotificationProps {
+    /** The title of the notifications view. */
+    title: string;
+    /** The number of new notifications. */
+    count: number;
+    /** A list of notification items. */
+    items: NotificationItem[];
+    /** If true, a loading indicator will render in place of the list. */
+    loading?: boolean;
+    /** Click event for items within the list. */
+    onItemClick?: (id: string, event: InteractionEvent) => void;
+    /** Callback that fires when the notification view opens. */
+    onNotificationsOpen?: () => void;
+    /** Callback that fires when the notification view closes. */
+    onNotificationsClose?: () => void;
+}
+export interface AppShellProps extends BaseProps, NoChildrenProp {
+    /** The content of the application. */
+    main: ReactNode;
+    /** Props related to the app name and logo. */
+    appInfo: AppInfoProps;
+    /** A set of navigation links for the application. */
+    navLinks: NavLinkProps[];
+    /** Props for the operator menu. */
+    operator: OperatorProps;
+    /** Props related to notifications for the application. */
+    notifications?: NotificationProps;
+    /**
+     * The alignment of navigation links within the header.
+     * @default 'end'
+     * */
+    navAlignment?: 'start' | 'center' | 'end';
+    /**
+     * The positioning of the navigation links relative to the other app header elements.
+     * @default 'inline'
+     * */
+    navPosition?: 'inline' | 'below';
+    /** Ref for the wrapping div element. */
+    ref?: Ref<HTMLDivElement>;
+}
+export {};
+//# sourceMappingURL=AppShell.types.d.ts.map

package/lib/components/AppShell/AppShell.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"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"}

package/lib/components/AppShell/AppShell.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AppShell.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport {\n  Action,\n  AvatarProps,\n  BaseProps,\n  ImageProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nexport type InteractionEvent = MouseEvent | KeyboardEvent;\n\ninterface AppInfoProps {\n  /** Name of the application. */\n  appName: string;\n  /** URL source of the logo image. */\n  imageSrc: ImageProps['src'];\n  /** URL or DOM id to navigate to from the logo and appName. */\n  href?: string;\n  /** Click handler for the logo and appName. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  /** Specifies where to open the link href. */\n  target?: string;\n}\n\ninterface NavLinkProps {\n  /** Unique id for the link */\n  id: string;\n  /** Text that is displayed for the link. */\n  text: string;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /** Click handler for the link. */\n  onClick?: (e: InteractionEvent) => void;\n  /** Indicates if the link represents the current view within the app. */\n  current?: boolean;\n}\n\ninterface OperatorProps {\n  /** Props for constructing the operator avatar. */\n  avatar: AvatarProps;\n  /** The title of the operator menu. */\n  title: string;\n  /** A list of actions that will populate a menu attached to the operator. */\n  actions: Action[];\n}\n\nexport interface NotificationItem {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (event: InteractionEvent) => void;\n}\n\nexport interface NotificationProps {\n  /** The title of the notifications view. */\n  title: string;\n  /** The number of new notifications. */\n  count: number;\n  /** A list of notification items. */\n  items: NotificationItem[];\n  /** If true, a loading indicator will render in place of the list. */\n  loading?: boolean;\n  /** Click event for items within the list. */\n  onItemClick?: (id: string, event: InteractionEvent) => void;\n  /** Callback that fires when the notification view opens. */\n  onNotificationsOpen?: () => void;\n  /** Callback that fires when the notification view closes. */\n  onNotificationsClose?: () => void;\n}\n\nexport interface AppShellProps extends BaseProps, NoChildrenProp {\n  /** The content of the application. */\n  main: ReactNode;\n  /** Props related to the app name and logo. */\n  appInfo: AppInfoProps;\n  /** A set of navigation links for the application. */\n  navLinks: NavLinkProps[];\n  /** Props for the operator menu. */\n  operator: OperatorProps;\n  /** Props related to notifications for the application. */\n  notifications?: NotificationProps;\n  /**\n   * The alignment of navigation links within the header.\n   * @default 'end'\n   * */\n  navAlignment?: 'start' | 'center' | 'end';\n  /**\n   * The positioning of the navigation links relative to the other app header elements.\n   * @default 'inline'\n   * */\n  navPosition?: 'inline' | 'below';\n  /** Ref for the wrapping div element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/AppShell/MobileHeaderContent.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+import { AppShellProps } from './AppShell.types';
+interface MobileHeaderContentProps {
+    appInfo: AppShellProps['appInfo'];
+    navLinks: AppShellProps['navLinks'];
+    operator: AppShellProps['operator'];
+    onClose: () => void;
+}
+declare const MobileHeaderContent: FunctionComponent<MobileHeaderContentProps>;
+export default MobileHeaderContent;
+//# sourceMappingURL=MobileHeaderContent.d.ts.map

package/lib/components/AppShell/MobileHeaderContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileHeaderContent.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/MobileHeaderContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAY1C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,wBAAwB;IAChC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,CA0EpE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/AppShell/MobileHeaderContent.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Button, Avatar, Icon, Text, useI18n } from '@pega/cosmos-react-core';
+import { HorizontalBreak, StyledLinkSection, StyledMobileLink, StyledMobileNav, StyledOperatorSection, StyledPrimaryName } from './AppShell.styles';
+const MobileHeaderContent = ({ appInfo, navLinks, operator, onClose }) => {
+    const t = useI18n();
+    return (_jsxs(Flex, { as: StyledMobileNav, container: { direction: 'column' }, children: [_jsx(Flex, { container: { pad: 1 }, item: { alignSelf: 'end' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: onClose, label: t('close'), children: _jsx(Icon, { name: 'times' }) }) }), _jsx(Button, { as: StyledMobileLink, variant: 'text', href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: _jsx(Text, { as: StyledPrimaryName, variant: 'h1', children: appInfo.appName }) }), _jsx(Flex, { as: StyledLinkSection, container: { direction: 'column', gap: 1, pad: [1, 0] }, item: { grow: 1 }, children: navLinks.map(navLink => (_jsx(Button, { as: StyledMobileLink, variant: 'text', "aria-current": navLink.current ? 'page' : undefined, href: navLink.href, onClick: navLink.onClick, children: navLink.text }, navLink.id))) }), _jsxs(Flex, { as: StyledOperatorSection, container: { direction: 'column', gap: 2, pad: [0, 0, 2, 0] }, children: [_jsx(HorizontalBreak, {}), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Avatar, { ...operator.avatar }), _jsx(Text, { as: StyledPrimaryName, variant: 'h2', children: "Account" })] }), _jsx(Flex, { container: { direction: 'column', gap: 1 }, children: operator.actions.map(action => (_jsx(Button, { as: StyledMobileLink, variant: 'text', href: action.href, onClick: action.onClick, children: action.text }, action.id))) })] })] }));
+};
+export default MobileHeaderContent;
+//# sourceMappingURL=MobileHeaderContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileHeaderContent.js","sourceRoot":"","sources":["../../../src/components/AppShell/MobileHeaderContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport { Flex, Button, Avatar, Icon, Text, useI18n } from '@pega/cosmos-react-core';\n\nimport {\n  HorizontalBreak,\n  StyledLinkSection,\n  StyledMobileLink,\n  StyledMobileNav,\n  StyledOperatorSection,\n  StyledPrimaryName\n} from './AppShell.styles';\nimport { AppShellProps } from './AppShell.types';\n\ninterface MobileHeaderContentProps {\n  appInfo: AppShellProps['appInfo'];\n  navLinks: AppShellProps['navLinks'];\n  operator: AppShellProps['operator'];\n  onClose: () => void;\n}\n\nconst MobileHeaderContent: FunctionComponent<MobileHeaderContentProps> = ({\n  appInfo,\n  navLinks,\n  operator,\n  onClose\n}: MobileHeaderContentProps) => {\n  const t = useI18n();\n\n  return (\n    <Flex as={StyledMobileNav} container={{ direction: 'column' }}>\n      <Flex container={{ pad: 1 }} item={{ alignSelf: 'end' }}>\n        <Button variant='simple' icon onClick={onClose} label={t('close')}>\n          <Icon name='times' />\n        </Button>\n      </Flex>\n\n      <Button\n        as={StyledMobileLink}\n        variant='text'\n        href={appInfo.href}\n        onClick={appInfo.onClick}\n        target={appInfo.target}\n      >\n        <Text as={StyledPrimaryName} variant='h1'>\n          {appInfo.appName}\n        </Text>\n      </Button>\n\n      <Flex\n        as={StyledLinkSection}\n        container={{ direction: 'column', gap: 1, pad: [1, 0] }}\n        item={{ grow: 1 }}\n      >\n        {navLinks.map(navLink => (\n          <Button\n            as={StyledMobileLink}\n            variant='text'\n            key={navLink.id}\n            aria-current={navLink.current ? 'page' : undefined}\n            href={navLink.href}\n            onClick={navLink.onClick}\n          >\n            {navLink.text}\n          </Button>\n        ))}\n      </Flex>\n\n      <Flex\n        as={StyledOperatorSection}\n        container={{ direction: 'column', gap: 2, pad: [0, 0, 2, 0] }}\n      >\n        <HorizontalBreak />\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Avatar {...operator.avatar} />\n          <Text as={StyledPrimaryName} variant='h2'>\n            Account\n          </Text>\n        </Flex>\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          {operator.actions.map(action => (\n            <Button\n              as={StyledMobileLink}\n              variant='text'\n              key={action.id}\n              href={action.href}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Button>\n          ))}\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default MobileHeaderContent;\n"]}

package/lib/components/AppShell/NavLinks.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent, Ref } from 'react';
+import { AppShellProps } from './AppShell.types';
+interface NavLinksProps {
+    navLinks: AppShellProps['navLinks'];
+    navAlignment: AppShellProps['navAlignment'];
+    navPosition: AppShellProps['navPosition'];
+    ref?: Ref<HTMLDivElement>;
+}
+declare const NavLinks: FunctionComponent<NavLinksProps>;
+export default NavLinks;
+//# sourceMappingURL=NavLinks.d.ts.map

package/lib/components/AppShell/NavLinks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavLinks.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavLinks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,aAAa;IACrB,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC5C,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC1C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAkC9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/NavLinks.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Flex, Button } from '@pega/cosmos-react-core';
+import { StyledNav, StyledLink } from './AppShell.styles';
+const NavLinks = forwardRef(({ navLinks, navAlignment, navPosition }, ref) => {
+    return (_jsx(Flex, { as: StyledNav, ref: ref, container: {
+            alignItems: 'center',
+            gap: 1,
+            justify: navAlignment
+        }, item: { grow: 1 }, navPosition: navPosition, children: navLinks.map(navLink => {
+            return (_jsx(StyledLink, { as: Button, "aria-current": navLink.current ? 'page' : undefined, variant: 'text', href: navLink.href, onClick: navLink.onClick, children: navLink.text }, navLink.id));
+        }) }));
+});
+export default NavLinks;
+//# sourceMappingURL=NavLinks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavLinks.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavLinks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAU1D,MAAM,QAAQ,GAAqC,UAAU,CAC3D,CACE,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAkC,EACvE,GAAyB,EACzB,EAAE;IACF,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,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,WAAW,EAAE,WAAW,YAEvB,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtB,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAE,MAAM,kBACI,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAClD,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,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\n\nimport { Flex, Button } from '@pega/cosmos-react-core';\n\nimport { StyledNav, StyledLink } from './AppShell.styles';\nimport { AppShellProps } from './AppShell.types';\n\ninterface NavLinksProps {\n  navLinks: AppShellProps['navLinks'];\n  navAlignment: AppShellProps['navAlignment'];\n  navPosition: AppShellProps['navPosition'];\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst NavLinks: FunctionComponent<NavLinksProps> = forwardRef(\n  (\n    { navLinks, navAlignment, navPosition }: 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={{ grow: 1 }}\n        navPosition={navPosition}\n      >\n        {navLinks.map(navLink => {\n          return (\n            <StyledLink\n              as={Button}\n              aria-current={navLink.current ? '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);\n\nexport default NavLinks;\n"]}

package/lib/components/AppShell/Notifications.d.ts

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+import { NotificationProps } from './AppShell.types';
+interface NotificationsViewProps extends NotificationProps {
+    popover?: boolean;
+    onClose?: () => void;
+}
+declare const Notifications: FunctionComponent<NotificationsViewProps>;
+export default Notifications;
+//# sourceMappingURL=Notifications.d.ts.map

package/lib/components/AppShell/Notifications.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Notifications.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAe1C,OAAO,EAAsC,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAWzF,UAAU,sBAAuB,SAAQ,iBAAiB;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,sBAAsB,CA4E5D,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/AppShell/Notifications.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Button, Icon, Text, Progress, MetaList, SummaryItem, Alert, EmptyState, useI18n } from '@pega/cosmos-react-core';
+import { StyledNotifications, StyledNotificationList, StyledNotification, StyledNotificationPrimary, StyledNotificationSecondary, StyledNotificationVisual, StyledPrimaryName } from './AppShell.styles';
+const Notifications = ({ title, items, loading, onItemClick, popover, onClose }) => {
+    const t = useI18n();
+    const renderContent = items.length ? (_jsx(Flex, { as: StyledNotificationList, item: { grow: 1 }, children: items.map(({ id, primary, secondary, visual, unread, href, onClick }) => {
+            const onSummaryItemClick = (e) => {
+                if (e.type === 'click' || (e.type === 'keyup' && e.key === 'Enter')) {
+                    onClick?.(e);
+                    onItemClick?.(id, e);
+                }
+            };
+            return (_jsxs("li", { children: [unread && (_jsx(StyledNotificationVisual, { unread: unread, children: _jsx(Alert, { variant: 'urgent' }) })), _jsx(SummaryItem, { as: StyledNotification, primary: _jsx(StyledNotificationPrimary, { unread: unread, children: primary }), secondary: secondary?.length ? (_jsx(StyledNotificationSecondary, { unread: unread, children: _jsx(MetaList, { items: secondary }) })) : undefined, visual: visual, href: href, onClick: onSummaryItemClick })] }, id));
+        }) })) : (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, item: { grow: 1 }, children: _jsx(EmptyState, { message: t('app_header_notifications_empty') }) }));
+    return (_jsxs(Flex, { as: StyledNotifications, container: { direction: 'column', gap: 1 }, popover: popover, children: [onClose && (_jsx(Flex, { container: { pad: 1 }, item: { alignSelf: 'end' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: onClose, label: t('close'), children: _jsx(Icon, { name: 'times' }) }) })), _jsx(Flex, { container: { pad: popover ? [2, 3, 0, 3] : [0, 3] }, children: _jsx(Text, { as: StyledPrimaryName, variant: 'h1', children: title }) }), loading ? (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, item: { grow: 1 }, children: _jsx(Progress, { placement: 'local', message: t('app_header_notifications_loading') }) })) : (renderContent)] }));
+};
+export default Notifications;
+//# sourceMappingURL=Notifications.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.js","sourceRoot":"","sources":["../../../src/components/AppShell/Notifications.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,KAAK,EACL,UAAU,EACV,OAAO,EACR,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,kBAAkB,EAClB,yBAAyB,EACzB,2BAA2B,EAC3B,wBAAwB,EACxB,iBAAiB,EAClB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,aAAa,GAA8C,CAAC,EAChE,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,OAAO,EACgB,EAAE,EAAE;IAC3B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACnC,KAAC,IAAI,IAAC,EAAE,EAAE,sBAAsB,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAChD,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE;YACzF,MAAM,kBAAkB,GAAG,CAAC,CAAmB,EAAE,EAAE;gBACjD,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,IAAK,CAAmB,CAAC,GAAG,KAAK,OAAO,CAAC,EAAE;oBACtF,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;oBACb,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;iBACtB;YACH,CAAC,CAAC;YAEF,OAAO,CACL,yBACG,MAAM,IAAI,CACT,KAAC,wBAAwB,IAAC,MAAM,EAAE,MAAM,YACtC,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,GAAG,GACD,CAC5B,EACD,KAAC,WAAW,IACV,EAAE,EAAE,kBAAkB,EACtB,OAAO,EACL,KAAC,yBAAyB,IAAC,MAAM,EAAE,MAAM,YAAG,OAAO,GAA6B,EAElF,SAAS,EACP,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAClB,KAAC,2BAA2B,IAAC,MAAM,EAAE,MAAM,YACzC,KAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,GAAI,GACF,CAC/B,CAAC,CAAC,CAAC,SAAS,EAEf,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,kBAAkB,GAC3B,KArBK,EAAE,CAsBN,CACN,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAC7E,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,gCAAgC,CAAC,GAAI,GACvD,CACR,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,aACxF,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,YACrD,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,YAC/D,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,GACJ,CACR,EACD,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,YACvD,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,OAAO,EAAC,IAAI,YACtC,KAAK,GACD,GACF,EACN,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAC7E,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,kCAAkC,CAAC,GAAI,GACzE,CACR,CAAC,CAAC,CAAC,CACF,aAAa,CACd,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n  Flex,\n  Button,\n  Icon,\n  Text,\n  Progress,\n  MetaList,\n  SummaryItem,\n  Alert,\n  EmptyState,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport { InteractionEvent, NotificationItem, NotificationProps } from './AppShell.types';\nimport {\n  StyledNotifications,\n  StyledNotificationList,\n  StyledNotification,\n  StyledNotificationPrimary,\n  StyledNotificationSecondary,\n  StyledNotificationVisual,\n  StyledPrimaryName\n} from './AppShell.styles';\n\ninterface NotificationsViewProps extends NotificationProps {\n  popover?: boolean;\n  onClose?: () => void;\n}\n\nconst Notifications: FunctionComponent<NotificationsViewProps> = ({\n  title,\n  items,\n  loading,\n  onItemClick,\n  popover,\n  onClose\n}: NotificationsViewProps) => {\n  const t = useI18n();\n\n  const renderContent = items.length ? (\n    <Flex as={StyledNotificationList} item={{ grow: 1 }}>\n      {items.map(({ id, primary, secondary, visual, unread, href, onClick }: NotificationItem) => {\n        const onSummaryItemClick = (e: InteractionEvent) => {\n          if (e.type === 'click' || (e.type === 'keyup' && (e as KeyboardEvent).key === 'Enter')) {\n            onClick?.(e);\n            onItemClick?.(id, e);\n          }\n        };\n\n        return (\n          <li key={id}>\n            {unread && (\n              <StyledNotificationVisual unread={unread}>\n                <Alert variant='urgent' />\n              </StyledNotificationVisual>\n            )}\n            <SummaryItem\n              as={StyledNotification}\n              primary={\n                <StyledNotificationPrimary unread={unread}>{primary}</StyledNotificationPrimary>\n              }\n              secondary={\n                secondary?.length ? (\n                  <StyledNotificationSecondary unread={unread}>\n                    <MetaList items={secondary} />\n                  </StyledNotificationSecondary>\n                ) : undefined\n              }\n              visual={visual}\n              href={href}\n              onClick={onSummaryItemClick}\n            />\n          </li>\n        );\n      })}\n    </Flex>\n  ) : (\n    <Flex container={{ justify: 'center', alignItems: 'center' }} item={{ grow: 1 }}>\n      <EmptyState message={t('app_header_notifications_empty')} />\n    </Flex>\n  );\n\n  return (\n    <Flex as={StyledNotifications} container={{ direction: 'column', gap: 1 }} popover={popover}>\n      {onClose && (\n        <Flex container={{ pad: 1 }} item={{ alignSelf: 'end' }}>\n          <Button variant='simple' icon onClick={onClose} label={t('close')}>\n            <Icon name='times' />\n          </Button>\n        </Flex>\n      )}\n      <Flex container={{ pad: popover ? [2, 3, 0, 3] : [0, 3] }}>\n        <Text as={StyledPrimaryName} variant='h1'>\n          {title}\n        </Text>\n      </Flex>\n      {loading ? (\n        <Flex container={{ justify: 'center', alignItems: 'center' }} item={{ grow: 1 }}>\n          <Progress placement='local' message={t('app_header_notifications_loading')} />\n        </Flex>\n      ) : (\n        renderContent\n      )}\n    </Flex>\n  );\n};\n\nexport default Notifications;\n"]}

package/lib/components/AppShell/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './AppShell';
+export { AppShellProps, NotificationItem } from './AppShell.types';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/AppShell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/AppShell/index.js

@@ -0,0 +1,2 @@
+export { default } from './AppShell';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { AppShellProps, NotificationItem } from './AppShell.types';\n"]}

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AppShell } from './components/AppShell';
+export * from './components/AppShell';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC"}

package/lib/index.js

@@ -0,0 +1,4 @@
+// This file is autogenerated. Any changes will be overwritten.
+export { default as AppShell } from './components/AppShell';
+export * from './components/AppShell';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\n"]}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@pega/cosmos-react-wss",
+  "version": "3.0.0-dev.11.0",
+  "author": "Pegasystems",
+  "license": "SEE LICENSE IN LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pegasystems/cosmos-react.git",
+    "directory": "packages/cosmos-wss"
+  },
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "lib"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -b"
+  },
+  "dependencies": {
+    "@pega/cosmos-react-core": "3.0.0-dev.11.0",
+    "polished": "^4.1.0",
+    "react": "^16.14.0 || ^17.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0",
+    "styled-components": "^5.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addon-toolbars": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/theming": "^6.4.19",
+    "enzyme": "^3.11.0",
+    "typescript": "~4.6.2"
+  }
+}