npm - @pega/cosmos-react-build - Versions diffs - 4.0.0-dev.7.0 → 4.0.0-dev.8.1 - Mend

@pega/cosmos-react-build 4.0.0-dev.7.0 → 4.0.0-dev.8.1

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

Files changed (40) hide show

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":";~~AA+CA~~,OAAO,KAAK,EAAE,aAAa,~~EAA4B~~,MAAM,kBAAkB,CAAC;~~AAmGhF~~,QAAA,MAAM,QAAQ,~~iMA+Ib~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"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,CAyG7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -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 { 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 { StyledHeader, StyledUtils, StyledUtilItem, StyledScrollWrap, StyledNavContent, StyledMain, StyledDrawerWrapper, StyledDrawerHeader, StyledNavTitle, StyledNav, StyledInnerNav, StyledNavToggle, StyledDrawerCloseButton } from './AppShell.styles';
+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 { start, end } = useDirection();
     const navRef = useConsolidatedRef(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 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: 'closed'
     });
-    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 }), _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');
+                                }, open: ['open', 'opening'].includes(navState), "aria-label": navState === 'closed' ? t('expand') : t('collapse'), 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: navState === 'closed' ? t('expand') : t('collapse') }))] })] }), _jsx(StyledMain, { navOpen: ['open', 'opening'].includes(navState), children: main })] }));
 });
 export default AppShell;
 //# sourceMappingURL=AppShell.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\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 './Header/AppHeader';\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 navRef = useConsolidatedRef(ref);\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 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"]}
1	+ {"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: 'closed'\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 <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 open={['open', 'opening'].includes(navState)}\n aria-label={navState === 'closed' ? t('expand') : t('collapse')}\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 {navState === 'closed' ? t('expand') : t('collapse')}\n </Tooltip>\n )}\n </Flex>\n </Flex>\n\n <StyledMain navOpen={['open', 'opening'].includes(navState)}>{main}</StyledMain>\n </AppShellContext.Provider>\n );\n }\n);\n\nexport default AppShell;\n"]}

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

@@ -1,21 +1,16 @@
 /// <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;
+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, {
+    open: boolean;
 }, never>;
-export declare const StyledUtilItem: import("styled-components").StyledComponent<"li", 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;
 }, 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, {}, 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 CHANGED Viewed

	@@ -1 +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,0GAqBtB,CAAC;~~AAIF,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~~,~~yGA6IrB~~,CAAC"}
1	+ {"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;UAA0B,OAAO;SAsBtE,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;SA6BjB,CAAC;AAIF,eAAO,MAAM,SAAS,yGAkIrB,CAAC;AAIF,eAAO,MAAM,uBAAuB;;SAenC,CAAC;AAIF,eAAO,MAAM,iBAAiB,wGAmE5B,CAAC;AAIH,eAAO,MAAM,aAAa,wGAAc,CAAC"}