npm - @pega/cosmos-react-build - Versions diffs - 2.0.0-dev.18.0 → 2.0.0-dev.21.1 - Mend

@pega/cosmos-react-build 2.0.0-dev.18.0 → 2.0.0-dev.21.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 (133) hide show

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

@@ -4,7 +4,7 @@ import { Flex, Icon, MenuButton, Text, useI18n, useBreakpoint, SearchInput } fro
 import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
 import { StyledAppHeader, StyledTabs, StyledAppAvatar, StyledUtilsContainer, StyledBrandContainer, StyledBranchContainer, StyledPreviewButton, StyledTitle, StyledBrandButton, StyledIconContainer } from './AppHeader.styles';
 const BrandContainer = ({ name, onClick, href }) => {
-    return (_jsxs(StyledBrandContainer, Object.assign({ container: { alignItems: 'center', justify: 'between' }, onClick: onClick, href: href, forwardedAs: onClick || href ? StyledBrandButton : 'div' }, { children: [_jsx(StyledIconContainer, Object.assign({ container: { alignItems: 'center', justify: 'center' } }, { children: _jsx(Icon, { name: 'pegasus' }, void 0) }), void 0), _jsx(StyledTitle, { children: name }, void 0)] }), void 0));
+    return (_jsxs(StyledBrandContainer, { container: { alignItems: 'center', justify: 'between' }, onClick: onClick, href: href, forwardedAs: onClick || href ? StyledBrandButton : 'div', children: [_jsx(StyledIconContainer, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: 'pegasus' }, void 0) }, void 0), _jsx(StyledTitle, { children: name }, void 0)] }, void 0));
 };
 const Links = ({ links = [] }) => {
     const [currentTabId, setCurrentTabId] = useState(links[0].id || '');
@@ -23,10 +23,10 @@ const Links = ({ links = [] }) => {
 const Utils = ({ avatar, search, branchName, actions, onPreviewClick }) => {
     const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
-    return (_jsxs(StyledUtilsContainer, Object.assign({ isMediumOrAbove: isMediumOrAbove, container: { alignItems: 'center', justify: 'end' } }, { children: [search && (_jsx(StyledAppHeaderSearchForm, Object.assign({ role: 'search', "aria-label": search.searchInputAriaLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove }, { children: _jsx(SearchInput, Object.assign({}, search), void 0) }), void 0)), branchName && (_jsxs(StyledBranchContainer, Object.assign({ container: { alignItems: 'center', justify: 'between' } }, { children: [_jsx(Icon, { name: 'nodes-right' }, void 0), _jsx(Text, Object.assign({ "aria-label": branchName }, { children: branchName }), void 0)] }), void 0)), actions && actions.length > 0 && (_jsx(MenuButton, { variant: 'link', menu: { items: actions, scrollAt: 20 }, text: t('actions') }, void 0)), onPreviewClick && (_jsx(StyledPreviewButton, Object.assign({ variant: 'primary', onClick: onPreviewClick }, { children: t('preview') }), void 0)), _jsx(StyledAppAvatar, Object.assign({}, avatar), void 0)] }), void 0));
+    return (_jsxs(StyledUtilsContainer, { isMediumOrAbove: isMediumOrAbove, container: { alignItems: 'center', justify: 'end' }, children: [search && (_jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": search.searchInputAriaLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...search }, void 0) }, void 0)), branchName && (_jsxs(StyledBranchContainer, { container: { alignItems: 'center', justify: 'between' }, children: [_jsx(Icon, { name: 'nodes-right' }, void 0), _jsx(Text, { "aria-label": branchName, children: branchName }, void 0)] }, void 0)), actions && actions.length > 0 && (_jsx(MenuButton, { variant: 'link', menu: { items: actions, scrollAt: 20 }, text: t('actions') }, void 0)), onPreviewClick && (_jsx(StyledPreviewButton, { variant: 'primary', onClick: onPreviewClick, children: t('preview') }, void 0)), _jsx(StyledAppAvatar, { ...avatar }, void 0)] }, void 0));
 };
 const AppHeader = forwardRef(({ brand, utils, links }, ref) => {
-    return (_jsxs(Flex, Object.assign({ as: StyledAppHeader, container: { justify: 'between' }, ref: ref }, { children: [_jsx(BrandContainer, Object.assign({}, brand), void 0), links && links.length > 0 && _jsx(Links, { links: links }, void 0), utils && _jsx(Utils, Object.assign({}, utils), void 0)] }), void 0));
+    return (_jsxs(Flex, { as: StyledAppHeader, container: { justify: 'between' }, ref: ref, children: [_jsx(BrandContainer, { ...brand }, void 0), links && links.length > 0 && _jsx(Links, { links: links }, void 0), utils && _jsx(Utils, { ...utils }, void 0)] }, void 0));
 });
 export default AppHeader;
 //# sourceMappingURL=AppHeader.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAMV,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,IAAI,EAEJ,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,OAAO,EACP,aAAa,EAIb,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iEAAiE,CAAC;AAE5G,OAAO,EACL,eAAe,EACf,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AA6B5B,MAAM,cAAc,GAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;IACjE,OAAO,CACL,MAAC,oBAAoB,~~kBACnB~~,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACvD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,~~iBAExD~~,KAAC,mBAAmB,~~kBAAC~~,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,~~gBACzE~~,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,WAAG,~~YACH~~,EACtB,KAAC,WAAW,cAAE,IAAI,WAAe,~~aACZ~~,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,KAAK,GAA2C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE;IACvE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,EAAU,EAAE,CAAqD,EAAE,EAAE;QACpE,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACxD,IAAI,YAAY,EAAE;YAChB,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YAC9B,eAAe,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;SAClC;IACH,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,KAAC,UAAU,IAAC,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,WAAI,CAAC;AAC7F,CAAC,CAAC;AAEF,MAAM,KAAK,GAAmB,CAAC,EAC7B,MAAM,EACN,MAAM,EACN,UAAU,EACV,OAAO,EACP,cAAc,EACH,EAAE,EAAE;IACf,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE5C,OAAO,CACL,MAAC,oBAAoB,~~kBACnB~~,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,~~iBAElD~~,MAAM,IAAI,CACT,KAAC,yBAAyB,~~kBACxB~~,IAAI,EAAC,QAAQ,gBACD,MAAM,CAAC,oBAAoB,EACvC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACjC,eAAe,EAAE,eAAe,~~gBAEhC~~,KAAC,WAAW,~~oBAAK~~,MAAM,~~UAAI~~,~~YACD~~,CAC7B,EACA,UAAU,IAAI,CACb,MAAC,qBAAqB,~~kBAAC~~,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,~~iBAC5E~~,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,WAAG,EAC3B,KAAC,IAAI,~~gCAAa~~,UAAU,~~gBAAG~~,UAAU,~~YAAQ~~,~~aAC3B~~,CACzB,EACA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,WAAI,CAC1F,EACA,cAAc,IAAI,CACjB,KAAC,mBAAmB,~~kBAAC~~,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,cAAc,~~gBAC3D~~,CAAC,CAAC,SAAS,CAAC,~~YACO~~,CACvB,EACD,KAAC,eAAe,~~oBAAK~~,MAAM,~~UAAI~~,~~aACV~~,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAqD,UAAU,CAC5E,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAmC,EAAE,GAA0B,EAAE,EAAE;IACvF,OAAO,CACL,MAAC,IAAI,~~kBAAC~~,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,~~iBACpE~~,KAAC,cAAc,~~oBAAK~~,KAAK,~~UAAI~~,EAC5B,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,WAAI,EACpD,KAAK,IAAI,KAAC,KAAK,~~oBAAK~~,KAAK,~~UAAI~~,~~aACzB~~,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n Ref,\n MouseEvent,\n FC,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState\n} from 'react';\n\nimport {\n AvatarProps,\n BaseProps,\n Flex,\n ForwardProps,\n Icon,\n MenuButton,\n Text,\n useI18n,\n useBreakpoint,\n SearchInputProps,\n MenuItemProps,\n Tab,\n SearchInput,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledAppAvatar,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledBranchContainer,\n StyledPreviewButton,\n StyledTitle,\n StyledBrandButton,\n StyledIconContainer\n} from './AppHeader.styles';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n brand: BrandProps;\n links?: LinkProps[];\n utils?: UtilsProps;\n ref?: Ref<HTMLDivElement>;\n}\ninterface BrandProps {\n /** The primary text to render in the header. /\n name: string;\n /* URL or DOM id to navigate to. /\n href?: string;\n /* Click handler for the header. */\n onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface LinkProps extends Tab {\n onClick?: (id: string, e?: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void;\n}\n\ninterface UtilsProps {\n avatar: AvatarProps;\n search?: SearchInputProps;\n branchName?: string;\n actions?: MenuItemProps['items'];\n onPreviewClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst BrandContainer: FC<BrandProps> = ({ name, onClick, href }) => {\n return (\n <StyledBrandContainer\n container={{ alignItems: 'center', justify: 'between' }}\n onClick={onClick}\n href={href}\n forwardedAs={onClick \|\| href ? StyledBrandButton : 'div'}\n >\n <StyledIconContainer container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name='pegasus' />\n </StyledIconContainer>\n <StyledTitle>{name}</StyledTitle>\n </StyledBrandContainer>\n );\n};\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ links = [] }) => {\n const [currentTabId, setCurrentTabId] = useState(links[0].id \|\| '');\n\n useEffect(() => {\n setCurrentTabId(links[0].id \|\| '');\n }, [links]);\n\n const handleTabClick = useCallback(\n (id: string, e?: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n const newActiveTab = links.find(item => item.id === id);\n if (newActiveTab) {\n newActiveTab.onClick?.(id, e);\n setCurrentTabId(newActiveTab.id);\n }\n },\n [links]\n );\n\n return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst Utils: FC<UtilsProps> = ({\n avatar,\n search,\n branchName,\n actions,\n onPreviewClick\n}: UtilsProps) => {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n return (\n <StyledUtilsContainer\n isMediumOrAbove={isMediumOrAbove}\n container={{ alignItems: 'center', justify: 'end' }}\n >\n {search && (\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={search.searchInputAriaLabel}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...search} />\n </StyledAppHeaderSearchForm>\n )}\n {branchName && (\n <StyledBranchContainer container={{ alignItems: 'center', justify: 'between' }}>\n <Icon name='nodes-right' />\n <Text aria-label={branchName}>{branchName}</Text>\n </StyledBranchContainer>\n )}\n {actions && actions.length > 0 && (\n <MenuButton variant='link' menu={{ items: actions, scrollAt: 20 }} text={t('actions')} />\n )}\n {onPreviewClick && (\n <StyledPreviewButton variant='primary' onClick={onPreviewClick}>\n {t('preview')}\n </StyledPreviewButton>\n )}\n <StyledAppAvatar {...avatar} />\n </StyledUtilsContainer>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n ({ brand, utils, links }: PropsWithoutRef<AppHeaderProps>, ref: AppHeaderProps['ref']) => {\n return (\n <Flex as={StyledAppHeader} container={{ justify: 'between' }} ref={ref}>\n <BrandContainer {...brand} />\n {links && links.length > 0 && <Links links={links} />}\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}
1	+ {"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAMV,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,IAAI,EAEJ,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,OAAO,EACP,aAAa,EAIb,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iEAAiE,CAAC;AAE5G,OAAO,EACL,eAAe,EACf,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AA6B5B,MAAM,cAAc,GAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;IACjE,OAAO,CACL,MAAC,oBAAoB,IACnB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACvD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,aAExD,KAAC,mBAAmB,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,YACzE,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,WAAG,WACH,EACtB,KAAC,WAAW,cAAE,IAAI,WAAe,YACZ,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,KAAK,GAA2C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE;IACvE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,EAAU,EAAE,CAAqD,EAAE,EAAE;QACpE,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACxD,IAAI,YAAY,EAAE;YAChB,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YAC9B,eAAe,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;SAClC;IACH,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,KAAC,UAAU,IAAC,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,WAAI,CAAC;AAC7F,CAAC,CAAC;AAEF,MAAM,KAAK,GAAmB,CAAC,EAC7B,MAAM,EACN,MAAM,EACN,UAAU,EACV,OAAO,EACP,cAAc,EACH,EAAE,EAAE;IACf,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE5C,OAAO,CACL,MAAC,oBAAoB,IACnB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,aAElD,MAAM,IAAI,CACT,KAAC,yBAAyB,IACxB,IAAI,EAAC,QAAQ,gBACD,MAAM,CAAC,oBAAoB,EACvC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACjC,eAAe,EAAE,eAAe,YAEhC,KAAC,WAAW,OAAK,MAAM,WAAI,WACD,CAC7B,EACA,UAAU,IAAI,CACb,MAAC,qBAAqB,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,aAC5E,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,WAAG,EAC3B,KAAC,IAAI,kBAAa,UAAU,YAAG,UAAU,WAAQ,YAC3B,CACzB,EACA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,WAAI,CAC1F,EACA,cAAc,IAAI,CACjB,KAAC,mBAAmB,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,cAAc,YAC3D,CAAC,CAAC,SAAS,CAAC,WACO,CACvB,EACD,KAAC,eAAe,OAAK,MAAM,WAAI,YACV,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAqD,UAAU,CAC5E,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAmC,EAAE,GAA0B,EAAE,EAAE;IACvF,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,aACpE,KAAC,cAAc,OAAK,KAAK,WAAI,EAC5B,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,WAAI,EACpD,KAAK,IAAI,KAAC,KAAK,OAAK,KAAK,WAAI,YACzB,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n Ref,\n MouseEvent,\n FC,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState\n} from 'react';\n\nimport {\n AvatarProps,\n BaseProps,\n Flex,\n ForwardProps,\n Icon,\n MenuButton,\n Text,\n useI18n,\n useBreakpoint,\n SearchInputProps,\n MenuItemProps,\n Tab,\n SearchInput,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledAppAvatar,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledBranchContainer,\n StyledPreviewButton,\n StyledTitle,\n StyledBrandButton,\n StyledIconContainer\n} from './AppHeader.styles';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n brand: BrandProps;\n links?: LinkProps[];\n utils?: UtilsProps;\n ref?: Ref<HTMLDivElement>;\n}\ninterface BrandProps {\n /** The primary text to render in the header. /\n name: string;\n /* URL or DOM id to navigate to. /\n href?: string;\n /* Click handler for the header. */\n onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface LinkProps extends Tab {\n onClick?: (id: string, e?: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void;\n}\n\ninterface UtilsProps {\n avatar: AvatarProps;\n search?: SearchInputProps;\n branchName?: string;\n actions?: MenuItemProps['items'];\n onPreviewClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst BrandContainer: FC<BrandProps> = ({ name, onClick, href }) => {\n return (\n <StyledBrandContainer\n container={{ alignItems: 'center', justify: 'between' }}\n onClick={onClick}\n href={href}\n forwardedAs={onClick \|\| href ? StyledBrandButton : 'div'}\n >\n <StyledIconContainer container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name='pegasus' />\n </StyledIconContainer>\n <StyledTitle>{name}</StyledTitle>\n </StyledBrandContainer>\n );\n};\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ links = [] }) => {\n const [currentTabId, setCurrentTabId] = useState(links[0].id \|\| '');\n\n useEffect(() => {\n setCurrentTabId(links[0].id \|\| '');\n }, [links]);\n\n const handleTabClick = useCallback(\n (id: string, e?: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n const newActiveTab = links.find(item => item.id === id);\n if (newActiveTab) {\n newActiveTab.onClick?.(id, e);\n setCurrentTabId(newActiveTab.id);\n }\n },\n [links]\n );\n\n return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst Utils: FC<UtilsProps> = ({\n avatar,\n search,\n branchName,\n actions,\n onPreviewClick\n}: UtilsProps) => {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n return (\n <StyledUtilsContainer\n isMediumOrAbove={isMediumOrAbove}\n container={{ alignItems: 'center', justify: 'end' }}\n >\n {search && (\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={search.searchInputAriaLabel}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...search} />\n </StyledAppHeaderSearchForm>\n )}\n {branchName && (\n <StyledBranchContainer container={{ alignItems: 'center', justify: 'between' }}>\n <Icon name='nodes-right' />\n <Text aria-label={branchName}>{branchName}</Text>\n </StyledBranchContainer>\n )}\n {actions && actions.length > 0 && (\n <MenuButton variant='link' menu={{ items: actions, scrollAt: 20 }} text={t('actions')} />\n )}\n {onPreviewClick && (\n <StyledPreviewButton variant='primary' onClick={onPreviewClick}>\n {t('preview')}\n </StyledPreviewButton>\n )}\n <StyledAppAvatar {...avatar} />\n </StyledUtilsContainer>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n ({ brand, utils, links }: PropsWithoutRef<AppHeaderProps>, ref: AppHeaderProps['ref']) => {\n return (\n <Flex as={StyledAppHeader} container={{ justify: 'between' }} ref={ref}>\n <BrandContainer {...brand} />\n {links && links.length > 0 && <Links links={links} />}\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}

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":"~~AAgDA~~,OAAO,KAAK,~~EACV~~,aAAa,~~EAId~~,MAAM,kBAAkB,CAAC;~~AAmF1B~~,QAAA,MAAM,QAAQ,~~oLA2Ib~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,kBAAkB,CAAC;AA4FhF,QAAA,MAAM,QAAQ,oLA+Hb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,84 +1,81 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useMemo, useState, useContext, useRef, useCallback, useLayoutEffect } from 'react';
-import { Flex, Icon, Switch, SkipNavigation, Image, Drawer, useDirection, useI18n, useAfterInitialEffect, StandardTree, useConsolidatedRef } from '@pega/cosmos-react-core';
+import { forwardRef, useMemo, useState, useContext, useRef, useEffect } from 'react';
+import { Flex, Icon, Switch, SkipNavigation, Drawer, useDirection, useI18n, useAfterInitialEffect, StandardTree, useConsolidatedRef, useTransitionState } 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, StyledNavHeaderIcon, StyledDrawerHeader, StyledNavTitle, StyledNav, StyledInnerNav, StyledNavToggle, StyledDrawerCloseButton, StyledNavHeaderVisual } from './AppShell.styles';
+import Visual from '../Visual';
+import { StyledHeader, StyledUtils, StyledUtilItem, StyledScrollWrap, StyledNavContent, StyledMain, StyledDrawerWrapper, StyledDrawerHeader, StyledNavTitle, StyledNav, StyledInnerNav, StyledNavToggle, StyledDrawerCloseButton } from './AppShell.styles';
 import AppShellContext from './AppShellContext';
-const NavigationHeader = ({ text, visual: { backgroundColor, icon, imageSrc } }) => {
-    return (_jsxs(Flex, Object.assign({ container: { alignItems: 'center', pad: 2 }, as: StyledHeader }, { children: [(imageSrc || icon) && (_jsxs(Flex, Object.assign({ container: { justify: 'center', alignItems: 'center' }, bgColor: backgroundColor, as: StyledNavHeaderVisual }, { children: [imageSrc && _jsx(Image, { src: imageSrc, alt: text }, void 0), !imageSrc && icon && _jsx(StyledNavHeaderIcon, { name: icon }, void 0)] }), void 0)), _jsx(StyledNavTitle, Object.assign({ variant: 'h4' }, { children: text }), void 0)] }), void 0));
+const NavigationHeader = ({ text, visual }) => {
+    return (_jsxs(Flex, { container: { alignItems: 'center', pad: 2, gap: 1 }, as: StyledHeader, children: [visual && _jsx(Visual, { ...visual }, void 0), _jsx(StyledNavTitle, { variant: 'h4', children: text }, void 0)] }, void 0));
 };
 const DrawerHeader = forwardRef(({ text, visual: { icon } }, ref) => {
     const t = useI18n();
-    const { setDrawerTitle, setDrawerOpen } = useContext(AppShellContext);
+    const { setDrawerData, setDrawerOpen } = useContext(AppShellContext);
     const onDrawerClose = () => {
-        setDrawerTitle('');
+        setDrawerData({ label: '', id: '' });
         setDrawerOpen(false);
     };
-    return (_jsxs(Flex, Object.assign({ container: { alignItems: 'center' }, as: StyledDrawerHeader }, { children: [_jsx(StyledDrawerCloseButton, Object.assign({ variant: 'simple', onClick: onDrawerClose, "aria-label": t('close_noun', [text]), icon: true, ref: ref }, { children: icon && _jsx(Icon, { name: icon }, void 0) }), void 0), _jsx(StyledNavTitle, Object.assign({ variant: 'h4' }, { children: text }), void 0)] }), void 0));
+    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: icon && _jsx(Icon, { name: icon.name }, void 0) }, void 0), _jsx(StyledNavTitle, { variant: 'h4', children: text }, void 0)] }, void 0));
 });
-const Utils = ({ items, onItemClick, onClose }) => {
-    const { setDrawerTitle, setDrawerOpen } = useContext(AppShellContext);
-    const [showDevMode, setShowDevMode] = useState(false);
+const Utils = ({ items, onItemClick, onClose, currentItemId, devMode }) => {
+    const { setDrawerData, setDrawerOpen } = useContext(AppShellContext);
+    const [showDevMode, setShowDevMode] = useState(devMode ?? false);
     const t = useI18n();
-    const handleMenu = (label, id) => {
-        setDrawerTitle(label);
-        setDrawerOpen(true);
-        onItemClick(id);
-    };
+    useEffect(() => {
+        setShowDevMode(devMode ?? false);
+    }, [devMode]);
     useAfterInitialEffect(() => {
-        if (!showDevMode) {
+        if (!showDevMode)
             onClose();
-        }
     }, [showDevMode]);
-    return (_jsxs(StyledUtils, Object.assign({ showDevMode: showDevMode }, { children: [_jsx(Switch, { label: t('dev_mode'), onChange: () => setShowDevMode(cur => !cur), on: showDevMode }, void 0), showDevMode && (_jsx("ul", Object.assign({ role: 'menu' }, { children: items.map(({ label, id }) => {
-                    return (_jsx(StyledUtilItem, Object.assign({ role: 'menuitem' }, { children: _jsx(BareButton, Object.assign({ onClick: () => handleMenu(label, id) }, { children: label }), void 0) }), id));
-                }) }), void 0))] }), void 0));
+    return (_jsxs(StyledUtils, { showDevMode: showDevMode, children: [_jsx(Switch, { label: t('dev_mode').toUpperCase(), onChange: () => setShowDevMode(cur => !cur), on: showDevMode }, void 0), showDevMode && (_jsx("ul", { role: 'menu', children: items.map(({ label, id }) => {
+                    return (_jsx(StyledUtilItem, { role: 'menuitem', "aria-current": currentItemId === id ? 'true' : undefined, children: _jsx(BareButton, { onClick: () => {
+                                setDrawerData({ label, id });
+                                setDrawerOpen(true);
+                                onItemClick(id);
+                            }, children: label }, void 0) }, id));
+                }) }, void 0))] }, void 0));
 };
 const AppShell = forwardRef(({ main, appHeader, appInfo, utils, navigation, hideNav = false }, ref) => {
-    const [navExpanded, setNavExpanded] = useState(true);
     const [drawerOpen, setDrawerOpen] = useState(false);
-    const [drawerTitle, setDrawerTitle] = useState('');
+    const [drawerData, setDrawerData] = useState({ label: '', id: '' });
     const backButtonRef = useRef(null);
     const { rtl } = useDirection();
     const navRef = useConsolidatedRef(ref);
     const t = useI18n();
-    const [navState, setNavState] = useState('expanded');
+    const { state: navState, toggle: toggleNavState } = useTransitionState({
+        ref: navRef,
+        property: 'width',
+        states: expandCollapseStates,
+        defaultState: 'expanded'
+    });
+    const navExpanded = navState === 'expanded' || navState === 'expanding';
     const navContent = useMemo(() => {
-        return (_jsx(Flex, Object.assign({ item: { grow: 1 }, as: StyledScrollWrap }, { children: _jsx(StandardTree, Object.assign({}, navigation), void 0) }), void 0));
+        return (_jsx(Flex, { item: { grow: 1 }, as: StyledScrollWrap, children: _jsx(StandardTree, { ...navigation }, void 0) }, void 0));
     }, [navigation]);
-    const onNavTransitionEnd = useCallback((e) => {
-        if (e.target === navRef.current && e.propertyName === 'width') {
-            setNavState(navExpanded ? 'expanded' : 'collapsed');
-        }
-    }, [navExpanded]);
-    useLayoutEffect(() => {
-        if (navExpanded && navState !== 'expanded') {
-            setNavState('expanding');
-        }
-        if (!navExpanded && navState !== 'collapsed') {
-            setNavState('collapsing');
-        }
-    }, [navExpanded, navState]);
     const toggleButtonLabel = t(navExpanded ? 'collapse_noun' : 'expand_noun', [t('navigation')]);
-    return (_jsxs(AppShellContext.Provider, Object.assign({ value: useMemo(() => ({
-            navExpanded,
+    return (_jsxs(AppShellContext.Provider, { value: useMemo(() => ({
             drawerOpen,
             setDrawerOpen,
-            drawerTitle,
-            setDrawerTitle,
+            drawerData,
+            setDrawerData,
             navState
-        }), [navExpanded, drawerOpen, drawerTitle, navState]) }, { children: [_jsx(SkipNavigation, {}, void 0), _jsx(AppHeader, Object.assign({}, appHeader), void 0), _jsxs(Flex, Object.assign({ container: true }, { children: [!hideNav && (_jsxs(StyledNav, Object.assign({ ref: navRef, onTransitionEnd: onNavTransitionEnd }, { children: [_jsx(StyledInnerNav, { children: _jsxs(Flex, Object.assign({ container: { direction: 'column', justify: 'between' }, as: StyledNavContent, "aria-hidden": !navExpanded }, { children: [_jsx(Flex, Object.assign({ as: StyledDrawerWrapper }, { children: _jsxs(Drawer, Object.assign({ open: drawerOpen, nullWhenClosed: true, position: 'absolute', placement: rtl ? 'right' : 'left', onBeforeOpen: utils?.drawer?.onBeforeOpen, onAfterOpen: () => {
+        }), [navExpanded, drawerOpen, drawerData, navState]), children: [_jsx(SkipNavigation, {}, void 0), _jsx(AppHeader, { ...appHeader }, void 0), _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(Flex, { as: StyledDrawerWrapper, children: _jsxs(Drawer, { open: drawerOpen, 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: drawerTitle, visual: { icon: 'caret-left', backgroundColor: 'transparent' } }, void 0), navContent] }), void 0) }), void 0), !drawerOpen && (_jsxs(_Fragment, { children: [_jsx(NavigationHeader, Object.assign({}, appInfo), void 0), navContent] }, void 0)), utils && _jsx(Utils, Object.assign({}, utils, { onClose: () => setDrawerOpen(false) }), void 0)] }), void 0) }, void 0), _jsx(StyledNavToggle, Object.assign({ icon: true, "aria-expanded": navExpanded, label: navState === 'expanded' || navState === 'collapsed'
+                                                }, onBeforeClose: utils?.drawer?.onBeforeClose, onAfterClose: utils?.drawer?.onAfterClose, children: [_jsx(DrawerHeader, { ref: backButtonRef, text: drawerData.label, visual: {
+                                                            icon: {
+                                                                name: 'caret-left',
+                                                                bgColor: 'transparent'
+                                                            }
+                                                        } }, void 0), navContent] }, void 0) }, void 0), !drawerOpen && (_jsxs(_Fragment, { children: [_jsx(NavigationHeader, { ...appInfo }, void 0), navContent] }, void 0)), utils && _jsx(Utils, { ...utils, onClose: () => setDrawerOpen(false) }, void 0)] }, void 0) }, void 0), _jsx(StyledNavToggle, { icon: true, "aria-expanded": navExpanded, label: navState === 'expanded' || navState === 'collapsed'
                                     ? toggleButtonLabel
-                                    : undefined, "aria-label": toggleButtonLabel, onClick: () => {
-                                    setNavExpanded(cur => !cur);
-                                } }, { children: _jsx(Icon, { name: 'arrow-micro-right' }, void 0) }), void 0)] }), void 0)), _jsx(Flex, Object.assign({ item: { grow: 1 }, as: StyledMain }, { children: main }), void 0)] }), void 0)] }), void 0));
+                                    : undefined, "aria-label": toggleButtonLabel, onClick: toggleNavState, children: _jsx(Icon, { name: 'arrow-micro-right' }, void 0) }, void 0)] }, void 0)), _jsx(Flex, { item: { grow: 1 }, as: StyledMain, children: main }, void 0)] }, void 0)] }, void 0));
 });
 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 useCallback,\n TransitionEvent,\n useLayoutEffect\n} from 'react';\n\nimport {\n Flex,\n Icon,\n Switch,\n SkipNavigation,\n Image,\n Drawer,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n StandardTree,\n useConsolidatedRef\n} from '@pega/cosmos-react-core';\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 StyledNavHeaderIcon,\n StyledDrawerHeader,\n StyledNavTitle,\n StyledNav,\n StyledInnerNav,\n StyledNavToggle,\n StyledDrawerCloseButton,\n StyledNavHeaderVisual\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type {\n AppShellProps,\n AppInfoProps,\n UtilsProps,\n AppShellContextValue\n} from './AppShell.types';\n\nconst NavigationHeader = ({ text, visual: { backgroundColor, icon, imageSrc } }: AppInfoProps) => {\n return (\n <Flex container={{ alignItems: 'center', pad: 2 }} as={StyledHeader}>\n {(imageSrc \|\| icon) && (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n bgColor={backgroundColor}\n as={StyledNavHeaderVisual}\n >\n {imageSrc && <Image src={imageSrc} alt={text} />}\n {!imageSrc && icon && <StyledNavHeaderIcon name={icon} />}\n </Flex>\n )}\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n </Flex>\n );\n};\n\nconst DrawerHeader = forwardRef(\n ({ text, visual: { icon } }: PropsWithoutRef<AppInfoProps>, ref: Ref<HTMLButtonElement>) => {\n const t = useI18n();\n const { setDrawerTitle, setDrawerOpen } = useContext(AppShellContext);\n\n const onDrawerClose = () => {\n setDrawerTitle('');\n setDrawerOpen(false);\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 && <Icon name={icon} />}\n </StyledDrawerCloseButton>\n\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n </Flex>\n );\n }\n);\n\nconst Utils = ({ items, onItemClick, onClose }: UtilsProps & { onClose: () => void }) => {\n const { setDrawerTitle, setDrawerOpen } = useContext(AppShellContext);\n const [showDevMode, setShowDevMode] = useState(false);\n const t = useI18n();\n\n const handleMenu = (label: string, id: string) => {\n setDrawerTitle(label);\n setDrawerOpen(true);\n onItemClick(id);\n };\n\n useAfterInitialEffect(() => {\n if (!showDevMode) {\n onClose();\n }\n }, [showDevMode]);\n\n return (\n <StyledUtils showDevMode={showDevMode}>\n <Switch label={t('dev_mode')} onChange={() => setShowDevMode(cur => !cur)} on={showDevMode} />\n {showDevMode && (\n <ul role='menu'>\n {items.map(({ label, id }) => {\n return (\n <StyledUtilItem key={id} role='menuitem'>\n <BareButton onClick={() => handleMenu(label, id)}>{label}</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 [navExpanded, setNavExpanded] = useState(true);\n const [drawerOpen, setDrawerOpen] = useState(false);\n const [drawerTitle, setDrawerTitle] = useState('');\n const backButtonRef = useRef<HTMLButtonElement>(null);\n const { rtl } = useDirection();\n const navRef = useConsolidatedRef(ref);\n const t = useI18n();\n\n const [navState, setNavState] = useState<AppShellContextValue['navState']>('expanded');\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 onNavTransitionEnd = useCallback(\n (e: TransitionEvent \| TransitionEvent) => {\n if (e.target === navRef.current && e.propertyName === 'width') {\n setNavState(navExpanded ? 'expanded' : 'collapsed');\n }\n },\n [navExpanded]\n );\n\n useLayoutEffect(() => {\n if (navExpanded && navState !== 'expanded') {\n setNavState('expanding');\n }\n\n if (!navExpanded && navState !== 'collapsed') {\n setNavState('collapsing');\n }\n }, [navExpanded, navState]);\n\n const toggleButtonLabel = t(navExpanded ? 'collapse_noun' : 'expand_noun', [t('navigation')]);\n\n return (\n <AppShellContext.Provider\n value={useMemo(\n () => ({\n navExpanded,\n drawerOpen,\n setDrawerOpen,\n drawerTitle,\n setDrawerTitle,\n navState\n }),\n [navExpanded, drawerOpen, drawerTitle, navState]\n )}\n >\n <SkipNavigation />\n <AppHeader {...appHeader} />\n <Flex container>\n {!hideNav && (\n <StyledNav ref={navRef} onTransitionEnd={onNavTransitionEnd}>\n <StyledInnerNav>\n <Flex\n container={{ direction: 'column', justify: 'between' }}\n as={StyledNavContent}\n aria-hidden={!navExpanded}\n >\n <Flex as={StyledDrawerWrapper}>\n <Drawer\n open={drawerOpen}\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\n ref={backButtonRef}\n text={drawerTitle}\n visual={{ icon: 'caret-left', backgroundColor: 'transparent' }}\n />\n {navContent}\n </Drawer>\n </Flex>\n\n {!drawerOpen && (\n <>\n <NavigationHeader {...appInfo} />\n {navContent}\n </>\n )}\n\n {utils && <Utils {...utils} onClose={() => setDrawerOpen(false)} />}\n </Flex>\n </StyledInnerNav>\n\n <StyledNavToggle\n icon\n aria-expanded={navExpanded}\n label={\n navState === 'expanded' \|\| navState === 'collapsed'\n ? toggleButtonLabel\n : undefined\n }\n aria-label={toggleButtonLabel}\n onClick={() => {\n setNavExpanded(cur => !cur);\n }}\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":";AAAA,OAAO,EACL,UAAU,EAGV,OAAO,EACP,QAAQ,EACR,UAAU,EACV,MAAM,EACN,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,MAAM,EACN,YAAY,EACZ,OAAO,EACP,qBAAqB,EACrB,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAC5F,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,cAAc,EACd,eAAe,EACf,uBAAuB,EACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAGhD,MAAM,gBAAgB,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAgB,EAAE,EAAE;IAC1D,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,YAAY,aACxE,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,WAAI,EACjC,KAAC,cAAc,IAAC,OAAO,EAAC,IAAI,YAAE,IAAI,WAAkB,YAC/C,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAiC,EAAE,GAA2B,EAAE,EAAE;IACzF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAErE,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QACrC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,kBAAkB,aAC/D,KAAC,uBAAuB,IACtB,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,aAAa,gBACV,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EACnC,IAAI,QACJ,GAAG,EAAE,GAAG,YAEP,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,WAAI,WACV,EAE1B,KAAC,cAAc,IAAC,OAAO,EAAC,IAAI,YAAE,IAAI,WAAkB,YAC/C,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,WAAW,EACX,OAAO,EACP,aAAa,EACb,OAAO,EAC8B,EAAE,EAAE;IACzC,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACrE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC;IACjE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,WAAW;YAAE,OAAO,EAAE,CAAC;IAC9B,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,MAAC,WAAW,IAAC,WAAW,EAAE,WAAW,aACnC,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,WAAW,EAAE,EAClC,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EAC3C,EAAE,EAAE,WAAW,WACf,EACD,WAAW,IAAI,CACd,aAAI,IAAI,EAAC,MAAM,YACZ,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE;oBAC3B,OAAO,CACL,KAAC,cAAc,IAEb,IAAI,EAAC,UAAU,kBACD,aAAa,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAEvD,KAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE;gCACZ,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;gCAC7B,aAAa,CAAC,IAAI,CAAC,CAAC;gCACpB,WAAW,CAAC,EAAE,CAAC,CAAC;4BAClB,CAAC,YAEA,KAAK,WACK,IAZR,EAAE,CAaQ,CAClB,CAAC;gBACJ,CAAC,CAAC,WACC,CACN,YACW,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EACE,IAAI,EACJ,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,OAAO,GAAG,KAAK,EACgB,EACjC,GAAyB,EACzB,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACpE,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACvC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,kBAAkB,CAAC;QACrE,GAAG,EAAE,MAAM;QACX,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,oBAAoB;QAC5B,YAAY,EAAE,UAAU;KACzB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,QAAQ,KAAK,UAAU,IAAI,QAAQ,KAAK,WAAW,CAAC;IAExE,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,gBAAgB,YAC3C,KAAC,YAAY,OAAK,UAAU,WAAI,WAC3B,CACR,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,iBAAiB,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9F,OAAO,CACL,MAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,UAAU;YACV,aAAa;YACb,UAAU;YACV,aAAa;YACb,QAAQ;SACT,CAAC,EACF,CAAC,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAChD,aAED,KAAC,cAAc,aAAG,EAClB,KAAC,SAAS,OAAK,SAAS,WAAI,EAC5B,MAAC,IAAI,IAAC,SAAS,mBACZ,CAAC,OAAO,IAAI,CACX,MAAC,SAAS,IAAC,GAAG,EAAE,MAAM,aACpB,KAAC,cAAc,cACb,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACtD,EAAE,EAAE,gBAAgB,iBACP,CAAC,WAAW,aAEzB,KAAC,IAAI,IAAC,EAAE,EAAE,mBAAmB,YAC3B,MAAC,MAAM,IACL,IAAI,EAAE,UAAU,EAChB,cAAc,QACd,QAAQ,EAAC,UAAU,EACnB,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACjC,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EACzC,WAAW,EAAE,GAAG,EAAE;oDAChB,IACE,aAAa,CAAC,OAAO;wDACrB,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,OAAO,EAChD;wDACA,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;qDAC/B;oDACD,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC;gDACjC,CAAC,EACD,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAC3C,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,aAEzC,KAAC,YAAY,IACX,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,UAAU,CAAC,KAAK,EACtB,MAAM,EAAE;4DACN,IAAI,EAAE;gEACJ,IAAI,EAAE,YAAY;gEAClB,OAAO,EAAE,aAAa;6DACvB;yDACF,WACD,EACD,UAAU,YACJ,WACJ,EAEN,CAAC,UAAU,IAAI,CACd,8BACE,KAAC,gBAAgB,OAAK,OAAO,WAAI,EAChC,UAAU,YACV,CACJ,EAEA,KAAK,IAAI,KAAC,KAAK,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,WAAI,YAC9D,WACQ,EACjB,KAAC,eAAe,IACd,IAAI,yBACW,WAAW,EAC1B,KAAK,EACH,QAAQ,KAAK,UAAU,IAAI,QAAQ,KAAK,WAAW;oCACjD,CAAC,CAAC,iBAAiB;oCACnB,CAAC,CAAC,SAAS,gBAEH,iBAAiB,EAC7B,OAAO,EAAE,cAAc,YAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,mBAAmB,WAAG,WACjB,YACR,CACb,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,UAAU,YACpC,IAAI,WACA,YACF,YACkB,CAC5B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","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 SkipNavigation,\n Drawer,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n StandardTree,\n useConsolidatedRef,\n useTransitionState\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';\nimport Visual from '../Visual';\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 }: AppInfoProps) => {\n return (\n <Flex container={{ alignItems: 'center', pad: 2, gap: 1 }} as={StyledHeader}>\n {visual && <Visual {...visual} />}\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n </Flex>\n );\n};\n\nconst DrawerHeader = forwardRef(\n ({ text, visual: { icon } }: PropsWithoutRef<AppInfoProps>, ref: Ref<HTMLButtonElement>) => {\n const t = useI18n();\n const { setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n\n const onDrawerClose = () => {\n setDrawerData({ label: '', id: '' });\n setDrawerOpen(false);\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 && <Icon name={icon.name} />}\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 { 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) onClose();\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={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(false);\n const [drawerData, setDrawerData] = useState({ label: '', id: '' });\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 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_noun' : 'expand_noun', [t('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 <SkipNavigation />\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 <Flex as={StyledDrawerWrapper}>\n <Drawer\n open={drawerOpen}\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\n ref={backButtonRef}\n text={drawerData.label}\n visual={{\n icon: {\n name: 'caret-left',\n bgColor: 'transparent'\n }\n }}\n />\n {navContent}\n </Drawer>\n </Flex>\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={toggleButtonLabel}\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"]}

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,~~qOAgC1B~~,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAOzB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAA6B,OAAO;SA8B1D,CAAC;AAIH,eAAO,MAAM,cAAc,~~wGAsBzB~~,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAO3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAmB3B,CAAC;AAIH,eAAO,MAAM,UAAU,0GAOrB,CAAC;AAIH,eAAO,MAAM,mBAAmB,~~yGAO9B~~,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,~~yGAkHpB~~,CAAC"}
1	+ {"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA0BA,eAAO,MAAM,eAAe,qOA4B1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAOzB,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,yGAoHpB,CAAC"}

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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { lighten, hideVisually } from 'polished';
 import { useContext } from 'react';
-import { Icon, Text, tryCatch, defaultThemeProp, Button, useDirection, StyledIcon, StyledTooltip } from '@pega/cosmos-react-core';
+import { Icon, Text, tryCatch, defaultThemeProp, Button, useDirection, StyledIcon } from '@pega/cosmos-react-core';
 import { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';
 import { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 import { StyledNodeIcon, StyledNodeText, StyledNodeInteraction, StyledStandardTree } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';
@@ -33,10 +33,6 @@ export const StyledNavToggle = styled(Button)(({ theme }) => {
         transform: rotateY(180deg);
       }
     }
-    & + ${StyledTooltip} {
-      z-index: calc(${theme.base['z-index'].drawer} + 1);
-    }
   `;
 });
 StyledNavToggle.defaultProps = defaultThemeProp;
@@ -101,15 +97,12 @@ export const StyledUtils = styled.div(({ theme, showDevMode }) => {
 StyledUtils.defaultProps = defaultThemeProp;
 export const StyledUtilItem = styled.li(({ theme }) => {
     return css `
-    color: ${theme.base.colors.white};
-    &:hover {
+    &[aria-current='true'] {
       background-color: rgba(0, 0, 0, 0.4);
-    }
-    &:focus,
-    &:focus-within {
-      color: ${theme.base.colors.blue.light};
+      & > ${StyledBareButton} {
+        color: ${theme.base.colors.blue.light};
+      }
     }
     ${StyledBareButton} {
@@ -119,6 +112,14 @@ export const StyledUtilItem = styled.li(({ theme }) => {
       height: 100%;
       text-align: start;
       padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.4);
+      }
+      &:focus {
+        box-shadow: inset ${theme.base.shadow['focus-inverted']};
+      }
     }
   `;
 });
@@ -132,7 +133,7 @@ export const StyledScrollWrap = styled.div(() => {
 });
 StyledScrollWrap.defaultProps = defaultThemeProp;
 export const StyledNavContent = styled.div(({ theme }) => {
-    const { navExpanded, navState } = useContext(AppShellContext);
+    const { navState } = useContext(AppShellContext);
     return css `
     width: 14rem;
     height: 100%;
@@ -144,7 +145,7 @@ export const StyledNavContent = styled.div(({ theme }) => {
       display: none;
     `}
-    ${navExpanded &&
+    ${(navState === 'expanding' || navState === 'expanded') &&
         css `
       opacity: 1;
     `}
@@ -164,6 +165,7 @@ export const StyledDrawerWrapper = styled.div(() => {
     const { drawerOpen } = useContext(AppShellContext);
     return css `
     position: relative;
+    z-index: 1;
     height: ${drawerOpen ? '100%' : 'auto'};
   `;
 });
@@ -208,16 +210,16 @@ export const StyledInnerNav = styled.div(() => {
 });
 StyledInnerNav.defaultProps = defaultThemeProp;
 export const StyledNav = styled.nav(({ theme }) => {
-    const { navExpanded } = useContext(AppShellContext);
+    const { navState } = useContext(AppShellContext);
     return css `
     position: fixed;
-    z-index: ${theme.base['z-index'].drawer};
+    z-index: 1;
     height: calc(100vh - 3rem);
     background: ${theme.components['app-shell'].nav['background-color']};
     &,
     ${StyledInnerNav} {
-      width: ${navExpanded ? '14' : '1.5'}rem;
+      width: ${navState === 'expanding' || navState === 'expanded' ? '14' : '1.5'}rem;
       transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
     }
@@ -317,7 +319,9 @@ export const StyledNav = styled.nav(({ theme }) => {
     /* Style for main is here since nav(the "&") may be conditionally rendered. */
     & + ${StyledMain} {
-      margin-inline-start: ${navExpanded ? '14rem' : '1.5rem'};
+      margin-inline-start: ${navState === 'expanding' || navState === 'expanded'
+        ? '14rem'
+        : '1.5rem'};
     }
   `;
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n Icon,\n Text,\n tryCatch,\n defaultThemeProp,\n Button,\n useDirection,\n StyledIcon,\n StyledTooltip\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n StyledNodeIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n const { ltr } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block-start: calc(2 * ${theme.base.spacing});\n inset-inline-end: 0;\n min-width: 1.5rem;\n min-height: 1.5rem;\n border: none;\n color: ${theme.base.palette['foreground-color']};\n box-shadow: ${theme.base.shadow.low};\n border-radius: 50%;\n transition-property: background-color;\n transform: translateX(${ltr ? '50%' : '-50%'});\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n ${StyledIcon} {\n transform: rotateY(180deg);\n }\n }\n\n & + ${StyledTooltip} {\n z-index: calc(${theme.base['z-index'].drawer} + 1);\n }\n `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n width: 100%;\n min-height: 4rem;\n border-bottom: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n return css`\n padding-inline-start: ${theme.base.spacing};\n `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n border-top: 0.0625rem solid ${borderColor};\n ${StyledSwitch} {\n &:hover {\n background-color: ${hoverBg};\n }\n\n ${SwitchLabel} {\n height: calc(2rem + 4 * ${theme.base.spacing});\n padding: calc(2 * ${theme.base.spacing});\n text-transform: capitalize;\n color: ${theme.base.colors.gray.light};\n font-weight: ${theme.base['font-weight'].bold};\n\n &::before,\n &::after {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n }\n }\n & > ul {\n list-style: none;\n }\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n &:focus,\n &:focus-within {\n color: ${theme.base.colors.blue.light};\n }\n\n ${StyledBareButton} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n color: ${theme.base.colors.white};\n width: 100%;\n height: 100%;\n text-align: start;\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n const { navExpanded, navState } = useContext(AppShellContext);\n\n return css`\n width: 14rem;\n height: 100%;\n opacity: 0;\n transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n ${navState === 'collapsed' &&\n css`\n display: none;\n `}\n\n ${navExpanded &&\n css`\n opacity: 1;\n `}\n `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 3rem);\n background-color: ${theme.base.palette['app-background']};\n transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n position: relative;\n height: ${drawerOpen ? '100%' : 'auto'};\n `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n return css`\n min-width: 2rem;\n min-height: 2rem;\n border-radius: 0.4rem;\n background-color: ${bgColor};\n margin-inline-end: ${theme.base.spacing};\n color: ${theme.base.colors.white};\n & svg {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n return css`\n margin-inline-end: ${theme.base.spacing};\n min-width: 1.5rem;\n min-height: 1.5rem;\n color: ${theme.base.colors.white};\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n height: 100%;\n ${(navState === 'collapsing' \|\| navState === 'expanding') &&\n css`\n overflow: hidden;\n `}\n `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n const { navExpanded } = useContext(AppShellContext);\n\n return css`\n position: fixed;\n z-index: ${theme.base['z-index'].drawer};\n height: calc(100vh - 3rem);\n background: ${theme.components['app-shell'].nav['background-color']};\n\n &,\n ${StyledInnerNav} {\n width: ${navExpanded ? '14' : '1.5'}rem;\n transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n ${theme.base['custom-scrollbar'] &&\n css`\n * {\n scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n scrollbar-width: thin;\n }\n\n @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n /* stylelint-disable unit-allowed-list /\n\n ::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0.2);\n }\n\n ::-webkit-scrollbar-corner {\n background-color: rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: inherit;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 3px solid transparent;\n border-radius: calc(1.125 ${theme.base['border-radius']});\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n }\n\n ::-webkit-scrollbar-thumb:hover {\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n }\n\n ::-webkit-scrollbar-track:horizontal {\n border-bottom-left-radius: inherit;\n }\n\n ::-webkit-scrollbar-track:vertical {\n border-top-right-radius: inherit;\n }\n\n / stylelint-disable-next-line selector-pseudo-class-no-unknown /\n ::-webkit-scrollbar-track:not(:corner-present) {\n border-bottom-right-radius: inherit;\n }\n\n /* stylelint-enable unit-allowed-list /\n }\n `}\n\n &:not(:hover) {\n ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n ${hideVisually}\n }\n }\n\n /\n * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n /\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n width: calc(2 ${theme.base.spacing});\n height: 100%;\n }\n\n ${StyledStandardTree} {\n color: ${theme.base.colors.white};\n\n ${StyledNodeText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n\n ${StyledNodeInteraction} {\n &:hover,\n &[aria-current='true'] {\n background-color: ${hoverBg};\n }\n\n &[aria-current='true'] {\n ${StyledNodeIcon},\n ${StyledNodeText} {\n color: ${theme.base.colors.blue.light};\n }\n }\n }\n }\n\n /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n & + ${StyledMain} {\n margin-inline-start: ${navExpanded ? '14rem' : '1.5rem'};\n }\n `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n Icon,\n Text,\n tryCatch,\n defaultThemeProp,\n Button,\n useDirection,\n StyledIcon\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n StyledNodeIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n const { ltr } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block-start: calc(2 * ${theme.base.spacing});\n inset-inline-end: 0;\n min-width: 1.5rem;\n min-height: 1.5rem;\n border: none;\n color: ${theme.base.palette['foreground-color']};\n box-shadow: ${theme.base.shadow.low};\n border-radius: 50%;\n transition-property: background-color;\n transform: translateX(${ltr ? '50%' : '-50%'});\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n ${StyledIcon} {\n transform: rotateY(180deg);\n }\n }\n `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n width: 100%;\n min-height: 4rem;\n border-bottom: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n return css`\n padding-inline-start: ${theme.base.spacing};\n `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n border-top: 0.0625rem solid ${borderColor};\n ${StyledSwitch} {\n &:hover {\n background-color: ${hoverBg};\n }\n\n ${SwitchLabel} {\n height: calc(2rem + 4 * ${theme.base.spacing});\n padding: calc(2 * ${theme.base.spacing});\n text-transform: capitalize;\n color: ${theme.base.colors.gray.light};\n font-weight: ${theme.base['font-weight'].bold};\n\n &::before,\n &::after {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n }\n }\n & > ul {\n list-style: none;\n }\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n return css`\n &[aria-current='true'] {\n background-color: rgba(0, 0, 0, 0.4);\n\n & > ${StyledBareButton} {\n color: ${theme.base.colors.blue.light};\n }\n }\n\n ${StyledBareButton} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n color: ${theme.base.colors.white};\n width: 100%;\n height: 100%;\n text-align: start;\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n &:focus {\n box-shadow: inset ${theme.base.shadow['focus-inverted']};\n }\n }\n `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n width: 14rem;\n height: 100%;\n opacity: 0;\n transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n ${navState === 'collapsed' &&\n css`\n display: none;\n `}\n\n ${(navState === 'expanding' \|\| navState === 'expanded') &&\n css`\n opacity: 1;\n `}\n `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 3rem);\n background-color: ${theme.base.palette['app-background']};\n transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n position: relative;\n z-index: 1;\n height: ${drawerOpen ? '100%' : 'auto'};\n `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n return css`\n min-width: 2rem;\n min-height: 2rem;\n border-radius: 0.4rem;\n background-color: ${bgColor};\n margin-inline-end: ${theme.base.spacing};\n color: ${theme.base.colors.white};\n & svg {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n return css`\n margin-inline-end: ${theme.base.spacing};\n min-width: 1.5rem;\n min-height: 1.5rem;\n color: ${theme.base.colors.white};\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n height: 100%;\n ${(navState === 'collapsing' \|\| navState === 'expanding') &&\n css`\n overflow: hidden;\n `}\n `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n position: fixed;\n z-index: 1;\n height: calc(100vh - 3rem);\n background: ${theme.components['app-shell'].nav['background-color']};\n\n &,\n ${StyledInnerNav} {\n width: ${navState === 'expanding' \|\| navState === 'expanded' ? '14' : '1.5'}rem;\n transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n ${theme.base['custom-scrollbar'] &&\n css`\n * {\n scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n scrollbar-width: thin;\n }\n\n @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n /* stylelint-disable unit-allowed-list /\n\n ::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0.2);\n }\n\n ::-webkit-scrollbar-corner {\n background-color: rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: inherit;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 3px solid transparent;\n border-radius: calc(1.125 ${theme.base['border-radius']});\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n }\n\n ::-webkit-scrollbar-thumb:hover {\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n }\n\n ::-webkit-scrollbar-track:horizontal {\n border-bottom-left-radius: inherit;\n }\n\n ::-webkit-scrollbar-track:vertical {\n border-top-right-radius: inherit;\n }\n\n / stylelint-disable-next-line selector-pseudo-class-no-unknown /\n ::-webkit-scrollbar-track:not(:corner-present) {\n border-bottom-right-radius: inherit;\n }\n\n /* stylelint-enable unit-allowed-list /\n }\n `}\n\n &:not(:hover) {\n ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n ${hideVisually}\n }\n }\n\n /\n * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n /\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n width: calc(2 ${theme.base.spacing});\n height: 100%;\n }\n\n ${StyledStandardTree} {\n color: ${theme.base.colors.white};\n\n ${StyledNodeText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n\n ${StyledNodeInteraction} {\n &:hover,\n &[aria-current='true'] {\n background-color: ${hoverBg};\n }\n\n &[aria-current='true'] {\n ${StyledNodeIcon},\n ${StyledNodeText} {\n color: ${theme.base.colors.blue.light};\n }\n }\n }\n }\n\n /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n & + ${StyledMain} {\n margin-inline-start: ${navState === 'expanding' \|\| navState === 'expanded'\n ? '14rem'\n : '1.5rem'};\n }\n `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,6 +1,8 @@
 import { ReactNode, Ref } from 'react';
 import { StandardTreeProps, DrawerProps } from '@pega/cosmos-react-core';
+import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
 import { AppBarProps } from '../AppHeader';
+import { VisualProps } from '../Visual';
 export interface AppShellProps {
     main: ReactNode;
     appInfo: AppInfoProps;
@@ -12,8 +14,10 @@ export interface AppShellProps {
 }
 export interface UtilsProps {
     items: UtilItem[];
+    currentItemId?: UtilItem['id'];
     onItemClick: (id: UtilItem['id']) => void;
     drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;
+    devMode?: boolean;
 }
 export interface UtilItem {
     id: string;
@@ -21,18 +25,19 @@ export interface UtilItem {
 }
 export interface AppInfoProps {
     text: string;
-    visual: {
-        icon?: string;
-        imageSrc?: string;
-        backgroundColor: string;
-    };
+    visual: VisualProps;
 }
 export interface AppShellContextValue {
-    navExpanded: boolean;
     drawerOpen: boolean;
     setDrawerOpen: (open: boolean) => void;
-    drawerTitle: string;
-    setDrawerTitle: (title: string) => void;
-    navState: 'expanded' | 'expanding' | 'collapsed' | 'collapsing';
+    setDrawerData: (data: {
+        label: string;
+        id: string;
+    }) => void;
+    drawerData: {
+        label: string;
+        id: string;
+    };
+    navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];
 }
 //# sourceMappingURL=AppShell.types.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;~~AAEzE~~,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;~~AAE3C~~,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,WAAW,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;~~CAC/F~~;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE~~;QACN~~,~~IAAI~~,CAAC~~,EAAE,MAAM,CAAC~~;~~QACd,QAAQ,CAAC,EAAE,MAAM,CAAC~~;~~QAClB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;~~AAED,MAAM,WAAW,oBAAoB;IACnC,~~WAAW~~,EAAE,OAAO,CAAC;~~IACrB~~,~~UAAU~~,EAAE,OAAO,CAAC;~~IACpB~~,aAAa,EAAE,CAAC,IAAI,EAAE,~~OAAO,~~KAAK,~~IAAI~~,CAAC;~~IACvC~~,~~WAAW~~,EAAE,MAAM,CAAC;~~IACpB~~,~~cAAc~~,EAAE,~~CAAC,~~KAAK,EAAE,MAAM,~~KAAK~~,~~IAAI~~,CAAC;~~IACxC~~,QAAQ,EAAE,~~UAAU~~,~~GAAG~~,~~WAAW~~,~~GAAG~~,~~WAAW~~,~~GAAG~~,~~YAAY~~,CAAC;~~CACjE~~"}
1	+ {"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,QAAQ,EAAE,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;CAC1E"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { StandardTreeProps, DrawerProps } from '@pega/cosmos-react-core';\n\nimport { AppBarProps } from '../AppHeader';\n\nexport interface AppShellProps {\n main: ReactNode;\n appInfo: AppInfoProps;\n appHeader: AppBarProps;\n navigation: StandardTreeProps;\n hideNav?: boolean;\n utils?: UtilsProps;\n ref?: Ref<HTMLElement>;\n}\n\nexport interface UtilsProps {\n items: UtilItem[];\n onItemClick: (id: UtilItem['id']) => void;\n drawer?: Pick<DrawerProps, 'onBeforeOpen' \| 'onAfterOpen' \| 'onBeforeClose' \| 'onAfterClose'>;\n}\n\nexport interface UtilItem {\n id: string;\n label: string;\n}\n\nexport interface AppInfoProps {\n text: string;\n visual: ~~{\n icon?: string~~;\n ~~imageSrc?: string;\n backgroundColor: string;\n~~ }~~;\n}~~\n\nexport interface AppShellContextValue {\n ~~navExpanded: boolean;\n~~ drawerOpen: boolean;\n setDrawerOpen: (open: boolean) => void;\n ~~drawerTitle~~: ~~string;\n setDrawerTitle~~: ~~(title~~: string) => void;\n ~~navState~~: ~~'expanded'~~ \| ~~'expanding'~~ \| ~~'collapsed'~~ \| ~~'collapsing'~~;\n}\n"]}
1	+ {"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { StandardTreeProps, DrawerProps } from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppBarProps } from '../AppHeader';\nimport { VisualProps } from '../Visual';\n\nexport interface AppShellProps {\n main: ReactNode;\n appInfo: AppInfoProps;\n appHeader: AppBarProps;\n navigation: StandardTreeProps;\n hideNav?: boolean;\n utils?: UtilsProps;\n ref?: Ref<HTMLElement>;\n}\n\nexport interface UtilsProps {\n items: UtilItem[];\n currentItemId?: UtilItem['id'];\n onItemClick: (id: UtilItem['id']) => void;\n drawer?: Pick<DrawerProps, 'onBeforeOpen' \| 'onAfterOpen' \| 'onBeforeClose' \| 'onAfterClose'>;\n devMode?: boolean;\n}\n\nexport interface UtilItem {\n id: string;\n label: string;\n}\n\nexport interface AppInfoProps {\n text: string;\n visual: VisualProps;\n}\n\nexport interface AppShellContextValue {\n drawerOpen: boolean;\n setDrawerOpen: (open: boolean) => void;\n setDrawerData: (data: { label: string; id: string }) => void;\n drawerData: {\n label: string;\n id: string;\n };\n navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,QAAA,MAAM,eAAe,+~~CAOnB~~,CAAC;AAEH,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,QAAA,MAAM,eAAe,+CASnB,CAAC;AAEH,eAAe,eAAe,CAAC"}

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

@@ -1,10 +1,12 @@
 import { createContext } from 'react';
 const AppShellContext = createContext({
-    navExpanded: true,
     drawerOpen: false,
     setDrawerOpen: () => { },
-    drawerTitle: '',
-    setDrawerTitle: () => { },
+    drawerData: {
+        id: '',
+        label: ''
+    },
+    setDrawerData: () => { },
     navState: 'expanded'
 });
 export default AppShellContext;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,~~WAAW,EAAE,IAAI;IACjB,~~UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,~~WAAW~~,EAAE,EAAE;~~IACf~~,~~cAAc~~,EAAE,GAAG,EAAE,GAAE,CAAC;~~IACxB~~,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { AppShellContextValue } from './AppShell.types';\n\nconst AppShellContext = createContext<AppShellContextValue>({\n ~~navExpanded: true,\n~~ drawerOpen: false,\n setDrawerOpen: () => {},\n ~~drawerTitle~~: '',\n ~~setDrawerTitle~~: () => {},\n navState: 'expanded'\n});\n\nexport default AppShellContext;\n"]}
1	+ {"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,UAAU,EAAE;QACV,EAAE,EAAE,EAAE;QACN,KAAK,EAAE,EAAE;KACV;IACD,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { AppShellContextValue } from './AppShell.types';\n\nconst AppShellContext = createContext<AppShellContextValue>({\n drawerOpen: false,\n setDrawerOpen: () => {},\n drawerData: {\n id: '',\n label: ''\n },\n setDrawerData: () => {},\n navState: 'expanded'\n});\n\nexport default AppShellContext;\n"]}