@pega/cosmos-react-build 4.0.0-dev.2.0 → 4.0.0-dev.21.0

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

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
 import type { AppShellProps } from './AppShell.types';
-declare const AppShell: import("react").ForwardRefExoticComponent<Pick<AppShellProps, "main" | "children" | "navigation" | "appInfo" | "appHeader" | "utils" | "hideNav"> & import("react").RefAttributes<HTMLElement>>;
+declare const AppShell: FunctionComponent<AppShellProps & ForwardProps>;
 export default AppShell;
 //# sourceMappingURL=AppShell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":";AAgDA,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,kBAAkB,CAAC;AAmGhF,QAAA,MAAM,QAAQ,iMA+Ib,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA6C,MAAM,OAAO,CAAC;AAErF,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA8G7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/AppShell.js

@@ -1,96 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useMemo, useState, useContext, useRef, useEffect } from 'react';
-import { Flex, Icon, Switch, SkipLinks, Drawer, useDirection, useI18n, useAfterInitialEffect, StandardTree, useConsolidatedRef, useTransitionState, MetaList, Avatar } from '@pega/cosmos-react-core';
-import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
-import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
-import AppHeader from '../AppHeader';
-import { StyledHeader, StyledUtils, StyledUtilItem, StyledScrollWrap, StyledNavContent, StyledMain, StyledDrawerWrapper, StyledDrawerHeader, StyledNavTitle, StyledNav, StyledInnerNav, StyledNavToggle, StyledDrawerCloseButton } from './AppShell.styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { registerIcon, useI18n, Icon, useDirection, useConsolidatedRef, useElement, useTransitionState, Flex, Tooltip, SkipLinks } from '@pega/cosmos-react-core';
+import { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+import * as caseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/case-solid.icon';
+import * as barsIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bars.icon';
+import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
+import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
+import AppHeader from './Header/AppHeader';
+import { StyledScrollWrap, StyledMain, StyledUtils, StyledNav, StyledAppShellToggleButton } from './AppShell.styles';
 import AppShellContext from './AppShellContext';
-const NavigationHeader = ({ text, visual, meta }) => {
-    return (_jsxs(Flex, { container: { alignItems: 'center', pad: 2, gap: 1 }, as: StyledHeader, children: [visual && _jsx(Avatar, { ...visual, name: text, shape: 'squircle' }), _jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx(StyledNavTitle, { variant: 'h4', children: text }), meta && _jsx(MetaList, { wrapItems: true, items: meta })] })] }));
-};
-const DrawerHeader = forwardRef(({ text }, ref) => {
+import NavigationList from './NavigationList';
+registerIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon);
+const AppShell = forwardRef(({ main, appHeader, nav, ...restProps }, ref) => {
     const t = useI18n();
-    const { setDrawerData, setDrawerOpen } = useContext(AppShellContext);
-    const { start } = useDirection();
-    const onDrawerClose = () => {
-        setDrawerOpen(false);
-        setDrawerData(undefined);
-    };
-    return (_jsxs(Flex, { container: { alignItems: 'center' }, as: StyledDrawerHeader, children: [_jsx(StyledDrawerCloseButton, { variant: 'simple', onClick: onDrawerClose, "aria-label": t('close_noun', [text]), icon: true, ref: ref, children: _jsx(Icon, { name: `caret-${start}` }) }), _jsx(StyledNavTitle, { variant: 'h4', children: text })] }));
-});
-const Utils = ({ items, onItemClick, onClose, currentItemId, devMode }) => {
-    const { drawerData, setDrawerData, setDrawerOpen } = useContext(AppShellContext);
-    const [showDevMode, setShowDevMode] = useState(devMode ?? false);
-    const t = useI18n();
-    useEffect(() => {
-        setShowDevMode(devMode ?? false);
-    }, [devMode]);
-    useAfterInitialEffect(() => {
-        if (!showDevMode) {
-            setDrawerData(undefined);
-            onClose();
-        }
-    }, [showDevMode]);
-    return (_jsxs(StyledUtils, { showDevMode: showDevMode, children: [_jsx(Switch, { label: t('dev_mode').toUpperCase(), onChange: () => setShowDevMode(cur => !cur), on: showDevMode }), showDevMode && (_jsx("ul", { role: 'menu', children: items.map(({ label, id }) => {
-                    return (_jsx(StyledUtilItem, { role: 'menuitem', "aria-current": drawerData?.id !== id && currentItemId === id ? 'true' : undefined, children: _jsx(BareButton, { onClick: () => {
-                                setDrawerData({ label, id });
-                                setDrawerOpen(true);
-                                onItemClick(id);
-                            }, children: label }) }, id));
-                }) }))] }));
-};
-const AppShell = forwardRef(({ main, appHeader, appInfo, utils, navigation, hideNav = false }, ref) => {
-    const [drawerOpen, setDrawerOpen] = useState(!!utils?.currentItemId);
-    const [drawerData, setDrawerData] = useState(utils?.items.find(i => i.id === utils?.currentItemId));
-    const backButtonRef = useRef(null);
-    const { rtl } = useDirection();
+    const { start, end } = useDirection();
     const navRef = useConsolidatedRef(ref);
-    const t = useI18n();
-    const { state: navState, toggle: toggleNavState } = useTransitionState({
+    const [expandCollapseEl, setExpandCollapseEl] = useElement();
+    const { state: navState, set: setNavState } = useTransitionState({
         ref: navRef,
         property: 'width',
-        states: expandCollapseStates,
-        defaultState: 'expanded'
+        states: openCloseStates,
+        defaultState: nav?.defaultExpanded === false ? 'closed' : 'open'
     });
-    useAfterInitialEffect(() => {
-        const drawerItem = utils?.items.find(i => i.id === utils?.currentItemId);
-        if (drawerItem) {
-            setDrawerData(drawerItem);
-            setDrawerOpen(true);
-        }
-        else {
-            setDrawerData(undefined);
-            setDrawerOpen(false);
-        }
-    }, [utils?.currentItemId]);
     const skipLinks = useMemo(() => [
         {
             label: t('go_to_main_content'),
             target: { ariaLabel: t('main_content'), selector: 'main' }
         }
     ], [t]);
-    const navExpanded = navState === 'expanded' || navState === 'expanding';
-    const navContent = useMemo(() => {
-        return (_jsx(Flex, { item: { grow: 1 }, as: StyledScrollWrap, children: _jsx(StandardTree, { ...navigation }) }));
-    }, [navigation]);
-    const toggleButtonLabel = t(navExpanded ? 'collapse' : 'expand');
-    const toggleButtonA11y = t(navExpanded ? 'collapse_navigation' : 'expand_navigation');
+    const openNav = () => {
+        setNavState('open');
+    };
+    const closeNav = () => {
+        setNavState('closed');
+    };
     return (_jsxs(AppShellContext.Provider, { value: useMemo(() => ({
-            drawerOpen,
-            setDrawerOpen,
-            drawerData,
-            setDrawerData,
-            navState
-        }), [navExpanded, drawerOpen, drawerData, navState]), children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(AppHeader, { ...appHeader }), _jsxs(Flex, { container: true, children: [!hideNav && (_jsxs(StyledNav, { ref: navRef, children: [_jsx(StyledInnerNav, { children: _jsxs(Flex, { container: { direction: 'column', justify: 'between' }, as: StyledNavContent, "aria-hidden": !navExpanded, children: [_jsx(StyledDrawerWrapper, { children: _jsxs(Drawer, { open: drawerOpen && !!drawerData, nullWhenClosed: true, position: 'absolute', placement: rtl ? 'right' : 'left', onBeforeOpen: utils?.drawer?.onBeforeOpen, onAfterOpen: () => {
-                                                    if (backButtonRef.current &&
-                                                        document.activeElement !== backButtonRef.current) {
-                                                        backButtonRef.current.focus();
-                                                    }
-                                                    utils?.drawer?.onAfterOpen?.();
-                                                }, onBeforeClose: utils?.drawer?.onBeforeClose, onAfterClose: utils?.drawer?.onAfterClose, children: [_jsx(DrawerHeader, { ref: backButtonRef, text: drawerData?.label || '' }), navContent] }) }), !drawerOpen && (_jsxs(_Fragment, { children: [_jsx(NavigationHeader, { ...appInfo }), navContent] })), utils && _jsx(Utils, { ...utils, onClose: () => setDrawerOpen(false) })] }) }), _jsx(StyledNavToggle, { icon: true, "aria-expanded": navExpanded, label: navState === 'expanded' || navState === 'collapsed'
-                                    ? toggleButtonLabel
-                                    : undefined, "aria-label": toggleButtonA11y, onClick: toggleNavState, children: _jsx(Icon, { name: 'arrow-micro-right' }) })] })), _jsx(Flex, { item: { grow: 1 }, as: StyledMain, children: main })] })] }));
+            navOpen: navState === 'open' || navState === 'opening',
+            navState,
+            openNav
+        }), [navState]), children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(AppHeader, { ...appHeader }), nav && (_jsxs(Flex, { ...restProps, container: {
+                    direction: 'column',
+                    justify: 'between'
+                }, ref: navRef, as: StyledNav, children: [_jsx(StyledScrollWrap, { onClick: () => {
+                            if (['closing', 'closed'].includes(navState)) {
+                                openNav();
+                            }
+                            else {
+                                closeNav();
+                            }
+                        }, children: _jsx(NavigationList, { ...nav }) }), _jsxs(Flex, { as: StyledUtils, container: { justify: 'center' }, children: [_jsx(StyledAppShellToggleButton, { icon: true, ref: setExpandCollapseEl, compact: true, variant: 'simple', onClick: () => {
+                                    setNavState(navState === 'closed' ? 'open' : 'closed');
+                                }, "aria-label": navState === 'closed' ? t('expand_navigation') : t('collapse_navigation'), children: _jsx(Icon, { name: `arrow-micro-${['closed', 'closing'].includes(navState) ? end : start}` }) }), ['open', 'closed'].includes(navState) && (_jsx(Tooltip, { target: expandCollapseEl, placement: 'right', showDelay: 'none', hideDelay: 'none', children: t(navState === 'closed' ? 'expand_navigation' : 'collapse_navigation') }))] })] })), _jsx(StyledMain, { navOpen: ['open', 'opening'].includes(navState), hideNav: !nav, children: main })] }));
 });
 export default AppShell;
 //# sourceMappingURL=AppShell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useMemo,\n  useState,\n  useContext,\n  useRef,\n  useEffect\n} from 'react';\n\nimport {\n  Flex,\n  Icon,\n  Switch,\n  SkipLinks,\n  SkipLinksProps,\n  Drawer,\n  useDirection,\n  useI18n,\n  useAfterInitialEffect,\n  StandardTree,\n  useConsolidatedRef,\n  useTransitionState,\n  MetaList,\n  Avatar\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport AppHeader from '../AppHeader';\n\nimport {\n  StyledHeader,\n  StyledUtils,\n  StyledUtilItem,\n  StyledScrollWrap,\n  StyledNavContent,\n  StyledMain,\n  StyledDrawerWrapper,\n  StyledDrawerHeader,\n  StyledNavTitle,\n  StyledNav,\n  StyledInnerNav,\n  StyledNavToggle,\n  StyledDrawerCloseButton\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellProps, AppInfoProps, UtilsProps } from './AppShell.types';\n\nconst NavigationHeader = ({ text, visual, meta }: AppInfoProps) => {\n  return (\n    <Flex container={{ alignItems: 'center', pad: 2, gap: 1 }} as={StyledHeader}>\n      {visual && <Avatar {...visual} name={text} shape='squircle' />}\n      <Flex container={{ direction: 'column', alignItems: 'start' }}>\n        <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n        {meta && <MetaList wrapItems items={meta} />}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst DrawerHeader = forwardRef(\n  ({ text }: PropsWithoutRef<AppInfoProps>, ref: Ref<HTMLButtonElement>) => {\n    const t = useI18n();\n    const { setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n    const { start } = useDirection();\n\n    const onDrawerClose = () => {\n      setDrawerOpen(false);\n      setDrawerData(undefined);\n    };\n\n    return (\n      <Flex container={{ alignItems: 'center' }} as={StyledDrawerHeader}>\n        <StyledDrawerCloseButton\n          variant='simple'\n          onClick={onDrawerClose}\n          aria-label={t('close_noun', [text])}\n          icon\n          ref={ref}\n        >\n          <Icon name={`caret-${start}`} />\n        </StyledDrawerCloseButton>\n\n        <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n      </Flex>\n    );\n  }\n);\n\nconst Utils = ({\n  items,\n  onItemClick,\n  onClose,\n  currentItemId,\n  devMode\n}: UtilsProps & { onClose: () => void }) => {\n  const { drawerData, setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n  const [showDevMode, setShowDevMode] = useState(devMode ?? false);\n  const t = useI18n();\n\n  useEffect(() => {\n    setShowDevMode(devMode ?? false);\n  }, [devMode]);\n\n  useAfterInitialEffect(() => {\n    if (!showDevMode) {\n      setDrawerData(undefined);\n      onClose();\n    }\n  }, [showDevMode]);\n\n  return (\n    <StyledUtils showDevMode={showDevMode}>\n      <Switch\n        label={t('dev_mode').toUpperCase()}\n        onChange={() => setShowDevMode(cur => !cur)}\n        on={showDevMode}\n      />\n      {showDevMode && (\n        <ul role='menu'>\n          {items.map(({ label, id }) => {\n            return (\n              <StyledUtilItem\n                key={id}\n                role='menuitem'\n                aria-current={drawerData?.id !== id && currentItemId === id ? 'true' : undefined}\n              >\n                <BareButton\n                  onClick={() => {\n                    setDrawerData({ label, id });\n                    setDrawerOpen(true);\n                    onItemClick(id);\n                  }}\n                >\n                  {label}\n                </BareButton>\n              </StyledUtilItem>\n            );\n          })}\n        </ul>\n      )}\n    </StyledUtils>\n  );\n};\n\nconst AppShell = forwardRef(\n  (\n    {\n      main,\n      appHeader,\n      appInfo,\n      utils,\n      navigation,\n      hideNav = false\n    }: PropsWithoutRef<AppShellProps>,\n    ref: AppShellProps['ref']\n  ) => {\n    const [drawerOpen, setDrawerOpen] = useState(!!utils?.currentItemId);\n    const [drawerData, setDrawerData] = useState(\n      utils?.items.find(i => i.id === utils?.currentItemId)\n    );\n    const backButtonRef = useRef<HTMLButtonElement>(null);\n    const { rtl } = useDirection();\n    const navRef = useConsolidatedRef(ref);\n    const t = useI18n();\n\n    const { state: navState, toggle: toggleNavState } = useTransitionState({\n      ref: navRef,\n      property: 'width',\n      states: expandCollapseStates,\n      defaultState: 'expanded'\n    });\n\n    useAfterInitialEffect(() => {\n      const drawerItem = utils?.items.find(i => i.id === utils?.currentItemId);\n\n      if (drawerItem) {\n        setDrawerData(drawerItem);\n        setDrawerOpen(true);\n      } else {\n        setDrawerData(undefined);\n        setDrawerOpen(false);\n      }\n    }, [utils?.currentItemId]);\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 navExpanded = navState === 'expanded' || navState === 'expanding';\n\n    const navContent = useMemo(() => {\n      return (\n        <Flex item={{ grow: 1 }} as={StyledScrollWrap}>\n          <StandardTree {...navigation} />\n        </Flex>\n      );\n    }, [navigation]);\n\n    const toggleButtonLabel = t(navExpanded ? 'collapse' : 'expand');\n    const toggleButtonA11y = t(navExpanded ? 'collapse_navigation' : 'expand_navigation');\n\n    return (\n      <AppShellContext.Provider\n        value={useMemo(\n          () => ({\n            drawerOpen,\n            setDrawerOpen,\n            drawerData,\n            setDrawerData,\n            navState\n          }),\n          [navExpanded, drawerOpen, drawerData, navState]\n        )}\n      >\n        <SkipLinks items={skipLinks} />\n        <AppHeader {...appHeader} />\n        <Flex container>\n          {!hideNav && (\n            <StyledNav ref={navRef}>\n              <StyledInnerNav>\n                <Flex\n                  container={{ direction: 'column', justify: 'between' }}\n                  as={StyledNavContent}\n                  aria-hidden={!navExpanded}\n                >\n                  <StyledDrawerWrapper>\n                    <Drawer\n                      open={drawerOpen && !!drawerData}\n                      nullWhenClosed\n                      position='absolute'\n                      placement={rtl ? 'right' : 'left'}\n                      onBeforeOpen={utils?.drawer?.onBeforeOpen}\n                      onAfterOpen={() => {\n                        if (\n                          backButtonRef.current &&\n                          document.activeElement !== backButtonRef.current\n                        ) {\n                          backButtonRef.current.focus();\n                        }\n                        utils?.drawer?.onAfterOpen?.();\n                      }}\n                      onBeforeClose={utils?.drawer?.onBeforeClose}\n                      onAfterClose={utils?.drawer?.onAfterClose}\n                    >\n                      <DrawerHeader ref={backButtonRef} text={drawerData?.label || ''} />\n                      {navContent}\n                    </Drawer>\n                  </StyledDrawerWrapper>\n\n                  {!drawerOpen && (\n                    <>\n                      <NavigationHeader {...appInfo} />\n                      {navContent}\n                    </>\n                  )}\n\n                  {utils && <Utils {...utils} onClose={() => setDrawerOpen(false)} />}\n                </Flex>\n              </StyledInnerNav>\n              <StyledNavToggle\n                icon\n                aria-expanded={navExpanded}\n                label={\n                  navState === 'expanded' || navState === 'collapsed'\n                    ? toggleButtonLabel\n                    : undefined\n                }\n                aria-label={toggleButtonA11y}\n                onClick={toggleNavState}\n              >\n                <Icon name='arrow-micro-right' />\n              </StyledNavToggle>\n            </StyledNav>\n          )}\n          <Flex item={{ grow: 1 }} as={StyledMain}>\n            {main}\n          </Flex>\n        </Flex>\n      </AppShellContext.Provider>\n    );\n  }\n);\n\nexport default AppShell;\n"]}
+{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref, useMemo } from 'react';\n\nimport {\n  registerIcon,\n  useI18n,\n  Icon,\n  ForwardProps,\n  useDirection,\n  useConsolidatedRef,\n  useElement,\n  useTransitionState,\n  SkipLinksProps,\n  Flex,\n  Tooltip,\n  SkipLinks\n} from '@pega/cosmos-react-core';\nimport { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport * as caseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/case-solid.icon';\nimport * as barsIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bars.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport AppHeader from './Header/AppHeader';\nimport {\n  StyledScrollWrap,\n  StyledMain,\n  StyledUtils,\n  StyledNav,\n  StyledAppShellToggleButton\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellProps } from './AppShell.types';\nimport NavigationList from './NavigationList';\n\nregisterIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon);\n\nconst AppShell: FunctionComponent<AppShellProps & ForwardProps> = forwardRef(\n  (\n    { main, appHeader, nav, ...restProps }: PropsWithoutRef<AppShellProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n\n    const { start, end } = useDirection();\n    const navRef = useConsolidatedRef(ref);\n\n    const [expandCollapseEl, setExpandCollapseEl] = useElement<HTMLButtonElement>();\n\n    const { state: navState, set: setNavState } = useTransitionState({\n      ref: navRef,\n      property: 'width',\n      states: openCloseStates,\n      defaultState: nav?.defaultExpanded === false ? 'closed' : 'open'\n    });\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 openNav = () => {\n      setNavState('open');\n    };\n\n    const closeNav = () => {\n      setNavState('closed');\n    };\n\n    return (\n      <AppShellContext.Provider\n        value={useMemo(\n          () => ({\n            navOpen: navState === 'open' || navState === 'opening',\n            navState,\n            openNav\n          }),\n          [navState]\n        )}\n      >\n        <SkipLinks items={skipLinks} />\n        <AppHeader {...appHeader} />\n\n        {nav && (\n          <Flex\n            {...restProps}\n            container={{\n              direction: 'column',\n              justify: 'between'\n            }}\n            ref={navRef}\n            as={StyledNav}\n          >\n            <StyledScrollWrap\n              onClick={() => {\n                if (['closing', 'closed'].includes(navState)) {\n                  openNav();\n                } else {\n                  closeNav();\n                }\n              }}\n            >\n              <NavigationList {...nav} />\n            </StyledScrollWrap>\n\n            <Flex as={StyledUtils} container={{ justify: 'center' }}>\n              <StyledAppShellToggleButton\n                icon\n                ref={setExpandCollapseEl}\n                compact\n                variant='simple'\n                onClick={() => {\n                  setNavState(navState === 'closed' ? 'open' : 'closed');\n                }}\n                aria-label={\n                  navState === 'closed' ? t('expand_navigation') : t('collapse_navigation')\n                }\n              >\n                <Icon\n                  name={`arrow-micro-${['closed', 'closing'].includes(navState) ? end : start}`}\n                />\n              </StyledAppShellToggleButton>\n              {['open', 'closed'].includes(navState) && (\n                <Tooltip\n                  target={expandCollapseEl}\n                  placement='right'\n                  showDelay='none'\n                  hideDelay='none'\n                >\n                  {t(navState === 'closed' ? 'expand_navigation' : 'collapse_navigation')}\n                </Tooltip>\n              )}\n            </Flex>\n          </Flex>\n        )}\n\n        <StyledMain navOpen={['open', 'opening'].includes(navState)} hideNav={!nav}>\n          {main}\n        </StyledMain>\n      </AppShellContext.Provider>\n    );\n  }\n);\n\nexport default AppShell;\n"]}

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

@@ -1,21 +1,17 @@
 /// <reference types="react" />
-export declare const StyledNavToggle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDrawerHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledNavHeaderIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledNavTitle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledUtils: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    showDevMode: boolean;
-}, never>;
-export declare const StyledUtilItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledUtils: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppShellToggleButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledScrollWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledNavContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDrawerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledNavHeaderVisual: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    bgColor: string;
+export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {
+    navOpen: boolean;
+    hideNav: boolean;
 }, never>;
-export declare const StyledDrawerCloseButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledInnerNav: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledNav: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppShellCaretIcon: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {
+    nestedListCollapsed?: boolean | undefined;
+}, never>;
+export declare const StyledNavListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    activeTreeRoot?: boolean | undefined;
+}, never>;
+export declare const StyledNavList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=AppShell.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":";AA2BA,eAAO,MAAM,eAAe,qOA4B1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAwBvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAKzB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAA6B,OAAO;SA8B1D,CAAC;AAIH,eAAO,MAAM,cAAc,wGA2BzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAO3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAmB3B,CAAC;AAIH,eAAO,MAAM,UAAU,0GAOrB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAQ9B,CAAC;AAIH,eAAO,MAAM,qBAAqB;aAAyB,MAAM;SAY/D,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAYlC,CAAC;AAIH,eAAO,MAAM,cAAc,yGAUzB,CAAC;AAIH,eAAO,MAAM,SAAS,yGAsHpB,CAAC"}
+{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":";AAwBA,eAAO,MAAM,WAAW,yGAStB,CAAC;AAIH,eAAO,MAAM,0BAA0B,qOAiBrC,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;aACP,OAAO;SAoCjB,CAAC;AAIF,eAAO,MAAM,SAAS,yGAkIrB,CAAC;AAIF,eAAO,MAAM,uBAAuB;;SAenC,CAAC;AAIF,eAAO,MAAM,iBAAiB;;SAwE7B,CAAC;AAIF,eAAO,MAAM,aAAa,wGAAc,CAAC"}