npm - @pega/cosmos-react-build - Versions diffs - 4.0.0-dev.12.1 → 4.0.0-dev.13.0 - Mend

@pega/cosmos-react-build 4.0.0-dev.12.1 → 4.0.0-dev.13.0

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

Files changed (14) hide show

package/lib/components/AppShell/Header/AppHeader.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,YAAY,~~EAQb~~,MAAM,yBAAyB,CAAC;~~AAgBjC~~,OAAO,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;~~AA0I1E~~,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,~~CA8F~~/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAmBjC,OAAO,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;AAgJ1E,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAoG/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useState, useRef } from 'react';
-import { ContextSwitcher, Flex, SearchInput, useBreakpoint, Button, Icon, useI18n, Tooltip, useElement } from '@pega/cosmos-react-core';
-import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
-import { StyledAppHeader, StyledTabs, StyledAppAvatar, StyledUtilsContainer, StyledBrandContainer, StyledAppHeaderSearch, StyledAppName, StyledAppVersion, StyledBrandButton, StyledBrandImage, StyledContext } from './AppHeader.styles';
+import { ContextSwitcher, Flex, SearchInput, useBreakpoint, Button, Icon, useI18n, Tooltip, useElement, Avatar } from '@pega/cosmos-react-core';
+import AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';
+import { StyledAppHeaderSearchForm, StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
+import { StyledAppHeader, StyledTabs, StyledUtilsContainer, StyledBrandContainer, StyledAppHeaderSearch, StyledAppName, StyledAppVersion, StyledBrandButton, StyledBrandImage, StyledContext } from './AppHeader.styles';
 import BranchButton from './BranchButton';
 const Links = ({ links }) => {
     const [currentTabId, setCurrentTabId] = useState(links[0].id);
@@ -37,11 +38,11 @@ const AppHeaderSearch = ({ showSearchButton, setShowSearchButton, ...restProps }
                     focusSearchBtn.current = true;
                 }, label: t('collapse_search'), children: _jsx(Icon, { name: 'times' }) })] })) : (_jsx(Button, { variant: 'simple', icon: true, onClick: () => setShowSearchButton(false), ref: searchButtonRef, label: t('expand_search'), children: _jsx(Icon, { name: 'search' }) }));
 };
-const Utils = ({ avatar, branch, action, appInfo }) => {
+const Utils = ({ operator, branch, action, appInfo }) => {
     const isMediumOrAbove = useBreakpoint('md');
     const isSmallOrAbove = useBreakpoint('sm');
     const [appInfoEl, setAppInfoEl] = useElement(null);
-    return (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, md: { container: { justify: 'end' } }, item: { shrink: 1 }, as: StyledUtilsContainer, children: [appInfo && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 1 }, ref: setAppInfoEl, children: [_jsx(Flex, { as: StyledAppName, item: { shrink: 1 }, children: appInfo.name }), _jsx(StyledAppVersion, { children: appInfo.version }), _jsx(Tooltip, { target: appInfoEl, hideDelay: 'none', children: `${appInfo.name} ${appInfo.version}` })] })), _jsxs(Flex, { container: { alignItems: 'center' }, children: [branch && _jsx(BranchButton, { ...branch, compact: isSmallOrAbove ? branch.compact : true }), action && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 0 }, as: Button, variant: 'secondary', icon: !isMediumOrAbove, label: isMediumOrAbove ? undefined : action.text, onClick: (e) => action.onClick?.(action.id, e), disabled: action.disabled, children: [action.icon && _jsx(Icon, { name: action.icon }), isMediumOrAbove && action.text] }))] }), _jsx(StyledAppAvatar, { ...avatar })] }));
+    return (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, md: { container: { justify: 'end' } }, item: { shrink: 1 }, as: StyledUtilsContainer, children: [appInfo && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 1 }, ref: setAppInfoEl, children: [_jsx(Flex, { as: StyledAppName, item: { shrink: 1 }, children: appInfo.name }), _jsx(StyledAppVersion, { children: appInfo.version }), _jsx(Tooltip, { target: appInfoEl, hideDelay: 'none', children: `${appInfo.name} ${appInfo.version}` })] })), _jsxs(Flex, { container: { alignItems: 'center' }, children: [branch && _jsx(BranchButton, { ...branch, compact: isSmallOrAbove ? branch.compact : true }), action && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 0 }, as: Button, variant: 'secondary', icon: !isMediumOrAbove, label: isMediumOrAbove ? undefined : action.text, onClick: (e) => action.onClick?.(action.id, e), disabled: action.disabled, children: [action.icon && _jsx(Icon, { name: action.icon }), isMediumOrAbove && action.text] }))] }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-end' }, children: _jsx(Avatar, { ...operator.avatar }) })] }));
 };
 const AppHeader = forwardRef(({ contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, brand, utils, links }, ref) => {
     const selectedContext = contexts?.length > 1 ? contexts.find(ctx => ctx.selected) : contexts[0];
@@ -66,7 +67,7 @@ const AppHeader = forwardRef(({ contextSwitcher: { contexts, onContextClick, lab
                     gap: 1,
                     justify: 'center',
                     alignItems: 'center'
-                }, item: { grow: showSearchButton ? 0 : 1 }, md: { item: { grow: showSearchButton ? 1 : 0 } }, children: [utils?.search && (_jsx(AppHeaderSearch, { ...utils.search, showSearchButton: showSearchButton, setShowSearchButton: setShowSearchButton })), showSearchButton && !isMediumOrAbove && utils?.avatar && (_jsx(StyledAppAvatar, { ...utils.avatar }))] }), utils && _jsx(Utils, { ...utils })] }));
+                }, item: { grow: showSearchButton ? 0 : 1 }, md: { item: { grow: showSearchButton ? 1 : 0 } }, children: [utils?.search && (_jsx(AppHeaderSearch, { ...utils.search, showSearchButton: showSearchButton, setShowSearchButton: setShowSearchButton })), showSearchButton && !isMediumOrAbove && utils?.operator && (_jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: utils.operator.actions, popover: { placement: 'bottom-start' }, children: _jsx(Avatar, { ...utils.operator.avatar }) }))] }), utils && _jsx(Utils, { ...utils })] }));
 });
 export default AppHeader;
 //# sourceMappingURL=AppHeader.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MouseEvent,\n FC,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState,\n useRef,\n Dispatch,\n SetStateAction\n} from 'react';\n\nimport {\n ContextSwitcher,\n Flex,\n SearchInput,\n ForwardProps,\n SearchInputProps,\n useBreakpoint,\n Button,\n Icon,\n useI18n,\n Tooltip,\n useElement\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledAppAvatar,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledAppHeaderSearch,\n StyledAppName,\n StyledAppVersion,\n StyledBrandButton,\n StyledBrandImage,\n StyledContext\n} from './AppHeader.styles';\nimport { AppHeaderProps, LinkProps, UtilsProps } from './AppHeader.types';\nimport BranchButton from './BranchButton';\n\nconst Links: FC<{ links: LinkProps[] }> = ({ 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 AppHeaderSearch: FC<\n SearchInputProps & {\n showSearchButton: boolean;\n setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n const isMediumOrAbove = useBreakpoint('md');\n const t = useI18n();\n\n const searchInputRef = useCallback(\n node => {\n if (!showSearchButton && node) {\n node.focus();\n }\n },\n [showSearchButton]\n );\n const focusSearchBtn = useRef(false);\n const searchButtonRef = useCallback(node => {\n if (node && focusSearchBtn.current) {\n node.focus();\n }\n }, []);\n\n return isMediumOrAbove \|\| !showSearchButton ? (\n <Flex\n as={StyledAppHeaderSearch}\n item={{ shrink: 0, grow: 1 }}\n md={{ item: { grow: 0, shrink: 1 } }}\n container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n >\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={t('sitewide')}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...restProps} ref={searchInputRef} />\n </StyledAppHeaderSearchForm>\n <Button\n variant='simple'\n icon\n onClick={() => {\n setShowSearchButton(true);\n focusSearchBtn.current = true;\n }}\n label={t('collapse_search')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n ) : (\n <Button\n variant='simple'\n icon\n onClick={() => setShowSearchButton(false)}\n ref={searchButtonRef}\n label={t('expand_search')}\n >\n <Icon name='search' />\n </Button>\n );\n};\n\nconst Utils: FC<UtilsProps> = ({ avatar, branch, action, appInfo }) => {\n const isMediumOrAbove = useBreakpoint('md');\n const isSmallOrAbove = useBreakpoint('sm');\n const [appInfoEl, setAppInfoEl] = useElement(null);\n\n return (\n <Flex\n container={{ justify: 'between', alignItems: 'center' }}\n md={{ container: { justify: 'end' } }}\n item={{ shrink: 1 }}\n as={StyledUtilsContainer}\n >\n {appInfo && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 1 }}\n ref={setAppInfoEl}\n >\n <Flex as={StyledAppName} item={{ shrink: 1 }}>\n {appInfo.name}\n </Flex>\n <StyledAppVersion>{appInfo.version}</StyledAppVersion>\n <Tooltip target={appInfoEl} hideDelay='none'>\n {`${appInfo.name} ${appInfo.version}`}\n </Tooltip>\n </Flex>\n )}\n <Flex container={{ alignItems: 'center' }}>\n {branch && <BranchButton {...branch} compact={isSmallOrAbove ? branch.compact : true} />}\n {action && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 0 }}\n as={Button}\n variant='secondary'\n icon={!isMediumOrAbove}\n label={isMediumOrAbove ? undefined : action.text}\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n disabled={action.disabled}\n >\n {action.icon && <Icon name={action.icon} />}\n {isMediumOrAbove && action.text}\n </Flex>\n )}\n </Flex>\n <StyledAppAvatar {...avatar} />\n </Flex>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n (\n {\n contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n brand,\n utils,\n links\n }: PropsWithoutRef<AppHeaderProps>,\n ref: AppHeaderProps['ref']\n ) => {\n const selectedContext =\n contexts?.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n const isMediumOrAbove = useBreakpoint('md');\n const [showSearchButton, setShowSearchButton] = useState(true);\n\n useEffect(() => {\n if (isMediumOrAbove && !showSearchButton) {\n setShowSearchButton(true);\n }\n }, [isMediumOrAbove]);\n\n return (\n <Flex\n as={StyledAppHeader}\n container={{\n justify: 'between',\n alignItems: 'center',\n colGap: 2,\n wrap: 'wrap',\n pad: [0, 1]\n }}\n md={{ container: { wrap: 'nowrap' } }}\n ref={ref}\n >\n {showSearchButton && (\n <Flex\n as={StyledBrandContainer}\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 1\n }}\n item={{ shrink: 0, alignSelf: 'stretch' }}\n >\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n />\n )}\n <Flex\n as={brand.onClick \|\| brand.href ? StyledBrandButton : 'div'}\n variant='simple'\n container={{ alignItems: 'center', justify: 'between', gap: 2, pad: 1 }}\n aria-label={`${brand.label} - ${selectedContext.primary}`}\n onClick={brand.onClick}\n href={brand.href}\n >\n <Flex item={{ shrink: 0 }} as={StyledBrandImage} src={brand.logo} alt={brand.label} />\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n {selectedContext.visual}\n <StyledContext>{selectedContext.primary}</StyledContext>\n </Flex>\n </Flex>\n </Flex>\n )}\n {links && links.length > 0 && <Links links={links} />}\n\n <Flex\n container={{\n gap: 1,\n justify: 'center',\n alignItems: 'center'\n }}\n item={{ grow: showSearchButton ? 0 : 1 }}\n md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n >\n {utils?.search && (\n <AppHeaderSearch\n {...utils.search}\n showSearchButton={showSearchButton}\n setShowSearchButton={setShowSearchButton}\n />\n )}\n {showSearchButton && !isMediumOrAbove && utils?.avatar && (\n <StyledAppAvatar {...utils.avatar} />\n )}\n </Flex>\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}
1	+ {"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MouseEvent,\n FC,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState,\n useRef,\n Dispatch,\n SetStateAction\n} from 'react';\n\nimport {\n ContextSwitcher,\n Flex,\n SearchInput,\n ForwardProps,\n SearchInputProps,\n useBreakpoint,\n Button,\n Icon,\n useI18n,\n Tooltip,\n useElement,\n Avatar\n} from '@pega/cosmos-react-core';\nimport AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport {\n StyledAppHeaderSearchForm,\n StyledAppHeaderOperator\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledAppHeaderSearch,\n StyledAppName,\n StyledAppVersion,\n StyledBrandButton,\n StyledBrandImage,\n StyledContext\n} from './AppHeader.styles';\nimport { AppHeaderProps, LinkProps, UtilsProps } from './AppHeader.types';\nimport BranchButton from './BranchButton';\n\nconst Links: FC<{ links: LinkProps[] }> = ({ 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 AppHeaderSearch: FC<\n SearchInputProps & {\n showSearchButton: boolean;\n setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n const isMediumOrAbove = useBreakpoint('md');\n const t = useI18n();\n\n const searchInputRef = useCallback(\n node => {\n if (!showSearchButton && node) {\n node.focus();\n }\n },\n [showSearchButton]\n );\n const focusSearchBtn = useRef(false);\n const searchButtonRef = useCallback(node => {\n if (node && focusSearchBtn.current) {\n node.focus();\n }\n }, []);\n\n return isMediumOrAbove \|\| !showSearchButton ? (\n <Flex\n as={StyledAppHeaderSearch}\n item={{ shrink: 0, grow: 1 }}\n md={{ item: { grow: 0, shrink: 1 } }}\n container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n >\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={t('sitewide')}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...restProps} ref={searchInputRef} />\n </StyledAppHeaderSearchForm>\n <Button\n variant='simple'\n icon\n onClick={() => {\n setShowSearchButton(true);\n focusSearchBtn.current = true;\n }}\n label={t('collapse_search')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n ) : (\n <Button\n variant='simple'\n icon\n onClick={() => setShowSearchButton(false)}\n ref={searchButtonRef}\n label={t('expand_search')}\n >\n <Icon name='search' />\n </Button>\n );\n};\n\nconst Utils: FC<UtilsProps> = ({ operator, branch, action, appInfo }) => {\n const isMediumOrAbove = useBreakpoint('md');\n const isSmallOrAbove = useBreakpoint('sm');\n const [appInfoEl, setAppInfoEl] = useElement(null);\n\n return (\n <Flex\n container={{ justify: 'between', alignItems: 'center' }}\n md={{ container: { justify: 'end' } }}\n item={{ shrink: 1 }}\n as={StyledUtilsContainer}\n >\n {appInfo && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 1 }}\n ref={setAppInfoEl}\n >\n <Flex as={StyledAppName} item={{ shrink: 1 }}>\n {appInfo.name}\n </Flex>\n <StyledAppVersion>{appInfo.version}</StyledAppVersion>\n <Tooltip target={appInfoEl} hideDelay='none'>\n {`${appInfo.name} ${appInfo.version}`}\n </Tooltip>\n </Flex>\n )}\n <Flex container={{ alignItems: 'center' }}>\n {branch && <BranchButton {...branch} compact={isSmallOrAbove ? branch.compact : true} />}\n {action && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 0 }}\n as={Button}\n variant='secondary'\n icon={!isMediumOrAbove}\n label={isMediumOrAbove ? undefined : action.text}\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n disabled={action.disabled}\n >\n {action.icon && <Icon name={action.icon} />}\n {isMediumOrAbove && action.text}\n </Flex>\n )}\n </Flex>\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-end' }}\n >\n <Avatar {...operator.avatar} />\n </AppShellOperator>\n </Flex>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n (\n {\n contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n brand,\n utils,\n links\n }: PropsWithoutRef<AppHeaderProps>,\n ref: AppHeaderProps['ref']\n ) => {\n const selectedContext =\n contexts?.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n const isMediumOrAbove = useBreakpoint('md');\n const [showSearchButton, setShowSearchButton] = useState(true);\n\n useEffect(() => {\n if (isMediumOrAbove && !showSearchButton) {\n setShowSearchButton(true);\n }\n }, [isMediumOrAbove]);\n\n return (\n <Flex\n as={StyledAppHeader}\n container={{\n justify: 'between',\n alignItems: 'center',\n colGap: 2,\n wrap: 'wrap',\n pad: [0, 1]\n }}\n md={{ container: { wrap: 'nowrap' } }}\n ref={ref}\n >\n {showSearchButton && (\n <Flex\n as={StyledBrandContainer}\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 1\n }}\n item={{ shrink: 0, alignSelf: 'stretch' }}\n >\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n />\n )}\n <Flex\n as={brand.onClick \|\| brand.href ? StyledBrandButton : 'div'}\n variant='simple'\n container={{ alignItems: 'center', justify: 'between', gap: 2, pad: 1 }}\n aria-label={`${brand.label} - ${selectedContext.primary}`}\n onClick={brand.onClick}\n href={brand.href}\n >\n <Flex item={{ shrink: 0 }} as={StyledBrandImage} src={brand.logo} alt={brand.label} />\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n {selectedContext.visual}\n <StyledContext>{selectedContext.primary}</StyledContext>\n </Flex>\n </Flex>\n </Flex>\n )}\n {links && links.length > 0 && <Links links={links} />}\n\n <Flex\n container={{\n gap: 1,\n justify: 'center',\n alignItems: 'center'\n }}\n item={{ grow: showSearchButton ? 0 : 1 }}\n md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n >\n {utils?.search && (\n <AppHeaderSearch\n {...utils.search}\n showSearchButton={showSearchButton}\n setShowSearchButton={setShowSearchButton}\n />\n )}\n {showSearchButton && !isMediumOrAbove && utils?.operator && (\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={utils.operator.actions}\n popover={{ placement: 'bottom-start' }}\n >\n <Avatar {...utils.operator.avatar} />\n </AppShellOperator>\n )}\n </Flex>\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Avatar, Text, Tabs } from '@pega/cosmos-react-core';
+import { Text, Tabs } from '@pega/cosmos-react-core';
 export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBrandContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBrandButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
@@ -7,7 +7,6 @@ export declare const StyledBrandImage: import("styled-components").StyledCompone
 export declare const StyledContext: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTabs: typeof Tabs;
 export declare const StyledAppHeaderSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAppAvatar: typeof Avatar;
 export declare const StyledUtilsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledAppName: typeof Text;
 export declare const StyledAppVersion: typeof Text;

package/lib/components/AppShell/Header/AppHeader.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,~~EAAE,MAAM,~~EAAoB,IAAI,EAAE,IAAI,EAAuB,MAAM,yBAAyB,CAAC;~~AAIpG~~,eAAO,MAAM,eAAe,4GA8B3B,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAkBhC,CAAC;AAIF,eAAO,MAAM,iBAAiB,0QAgB5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,oOAgB5B,CAAC;AAEF,eAAO,MAAM,aAAa,0GAIzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,OAAO,IA8B/B,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGA0BjC,CAAC;AAIF,eAAO,MAAM,~~eAAe,EAAE,OAAO,MAGpC,CAAC;AAEF,eAAO,MAAM,~~oBAAoB,yGA2BhC,CAAC;AAIF,eAAO,MAAM,aAAa,EAAE,OAAO,IAUjC,CAAC;AAIH,eAAO,MAAM,gBAAgB,EAAE,OAAO,IAKpC,CAAC"}
1	+ {"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAoB,IAAI,EAAE,IAAI,EAAuB,MAAM,yBAAyB,CAAC;AAI5F,eAAO,MAAM,eAAe,4GA8B3B,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAkBhC,CAAC;AAIF,eAAO,MAAM,iBAAiB,0QAgB5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,oOAgB5B,CAAC;AAEF,eAAO,MAAM,aAAa,0GAIzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,OAAO,IA8B/B,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGA0BjC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGA2BhC,CAAC;AAIF,eAAO,MAAM,aAAa,EAAE,OAAO,IAUjC,CAAC;AAIH,eAAO,MAAM,gBAAgB,EAAE,OAAO,IAKpC,CAAC"}

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

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Avatar, defaultThemeProp, Text, Tabs, Image, StyledButton } from '@pega/cosmos-react-core';
+import { defaultThemeProp, Text, Tabs, Image, StyledButton } from '@pega/cosmos-react-core';
 import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 export const StyledAppHeader = styled.header(({ theme: { base: { palette, breakpoints, 'z-index': zIndex } } }) => {
@@ -124,10 +124,6 @@ export const StyledAppHeaderSearch = styled.div(({ theme: { base: { spacing, bre
     `;
 });
 StyledAppHeaderSearch.defaultProps = defaultThemeProp;
-export const StyledAppAvatar = styled(Avatar) `
-  width: 1.5rem;
-  height: 1.5rem;
-`;
 export const StyledUtilsContainer = styled.div(({ theme: { base: { spacing, breakpoints } } }) => {
     return css `
       width: 100%;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,~~MAAM,EAAE,~~gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;~~AACpG~~,OAAO,EAAE,yBAAyB,EAAE,MAAM,kEAAkE,CAAC;AAC7G,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,EAClD,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;uCAEyB,OAAO,CAAC,aAAa,CAAC;0BACnC,OAAO,CAAC,oBAAoB,CAAC;;;sBAGjC,MAAM,CAAC,MAAM,GAAG,CAAC;;;;;;;;;2BASZ,WAAW,CAAC,EAAE;;;;;;;KAOpC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,EACpD,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wCAC0B,OAAO,CAAC,KAAK;;2BAE1B,WAAW,CAAC,EAAE;0CACC,OAAO,CAAC,KAAK,gBAAgB,OAAO;;;2BAGnD,WAAW,CAAC,EAAE;;;KAGpC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA;;;;;;;;;;;;oBAYQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,EACtB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;2BAKa,WAAW,CAAC,EAAE;;;KAGpC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAA;;;;CAIvC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAgB,MAAM,CAAC,IAAI,CAAC,CACjD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,EACjD,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;;;;;;;uBAWS,UAAU,CAAC,WAAW,CAAC;;;;;;;;2BAQnB,WAAW,CAAC,EAAE;;;KAGpC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,EAC9D,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;uBACS,OAAO;;QAEtB,yBAAyB;;;;;2BAKN,WAAW,CAAC,EAAE;UAC/B,yBAAyB;;uBAEZ,YAAY,CAAC,EAAE;;;UAG5B,YAAY;;;;KAIjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,~~eAAe,GAAkB,MAAM,CAAC,MAAM,CAAC,CAAA;;;CAG3D,CAAC;AAEF,MAAM,CAAC,MAAM,~~oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,EAC/B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;+BAKiB,OAAO;;;;;;;2BAOX,WAAW,CAAC,EAAE;;;;;;;KAOpC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,aAAa,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnE,OAAO,GAAG,CAAA;iBACK,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;;aAIlC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;mBAChC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;GAEtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,gBAAgB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtE,OAAO,GAAG,CAAA;mBACO,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;GAEtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { ~~Avatar,~~ defaultThemeProp, Text, Tabs, Image, StyledButton } from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nexport const StyledAppHeader = styled.header(\n ({\n theme: {\n base: { palette, breakpoints, 'z-index': zIndex }\n }\n }) => {\n return css`\n height: 6rem;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n background-color: ${palette['primary-background']};\n position: sticky;\n top: 0;\n z-index: calc(${zIndex.drawer + 1});\n & > div {\n height: 50%;\n }\n\n @media (pointer: coarse) {\n height: 8rem;\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: 3rem;\n\n & > div {\n height: 100%;\n }\n }\n `;\n }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer = styled.div(\n ({\n theme: {\n base: { 'hit-area': hitArea, breakpoints, spacing }\n }\n }) => {\n return css`\n max-width: calc(100% - calc(3 * ${hitArea.mouse}));\n\n @media (min-width: ${breakpoints.xs}) and (pointer: coarse) {\n max-width: calc(100% - calc(3 * ${hitArea.mouse}) - calc(2 * ${spacing}));\n }\n\n @media (min-width: ${breakpoints.md}) {\n max-width: 30%;\n }\n `;\n }\n);\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n return css`\n text-decoration: none;\n min-width: 0;\n\n & > div:last-child {\n min-width: 0;\n svg {\n flex-shrink: 0;\n }\n }\n\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledBrandImage = styled(Image)(\n ({\n theme: {\n base: { breakpoints }\n }\n }) => {\n return css`\n height: 1.5rem;\n max-width: 17ch;\n display: none;\n\n @media (min-width: ${breakpoints.sm}) {\n display: unset;\n }\n `;\n }\n);\n\nexport const StyledContext = styled.span`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(\n ({\n theme: {\n base: { breakpoints, 'font-weight': fontWeight }\n }\n }) => {\n return css`\n display: none;\n border: none;\n min-height: 3rem;\n [role='tab'] {\n height: auto;\n span:first-of-type {\n text-transform: none;\n }\n }\n [role='tab'][aria-selected='false'] > span {\n font-weight: ${fontWeight['semi-bold']};\n }\n [role='tab']:hover,\n [role='tab']:focus,\n [role='tab']:active {\n box-shadow: none;\n }\n\n @media (min-width: ${breakpoints.md}) {\n display: inherit;\n }\n `;\n }\n);\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearch = styled.div(\n ({\n theme: {\n base: { spacing, breakpoints, 'content-width': contentWidth }\n }\n }) => {\n return css`\n padding-block: ${spacing};\n width: 100%;\n ${StyledAppHeaderSearchForm} {\n margin-inline-start: 0;\n max-width: 100%;\n }\n\n @media (min-width: ${breakpoints.md}) {\n ${StyledAppHeaderSearchForm} {\n margin-inline-start: auto;\n max-width: ${contentWidth.lg};\n }\n\n ${StyledButton} {\n display: none;\n }\n }\n `;\n }\n);\n\nStyledAppHeaderSearch.defaultProps = defaultThemeProp;\n\nexport const ~~StyledAppAvatar: typeof Avatar = styled(Avatar)`\n width: 1.5rem;\n height: 1.5rem;\n`;\n\nexport const~~ StyledUtilsContainer = styled.div(\n ({\n theme: {\n base: { spacing, breakpoints }\n }\n }) => {\n return css`\n width: 100%;\n & > div,\n & > span,\n & > button {\n margin-inline-start: ${spacing};\n }\n\n & > div:last-child {\n display: none;\n }\n\n @media (min-width: ${breakpoints.md}) {\n width: auto;\n\n & > div:last-child {\n display: unset;\n }\n }\n `;\n }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAppName: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: 0;\n `;\n});\n\nStyledAppName.defaultProps = defaultThemeProp;\n\nexport const StyledAppVersion: typeof Text = styled(Text)(({ theme }) => {\n return css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: 0;\n `;\n});\n\nStyledAppVersion.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Text, Tabs, Image, StyledButton } from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nexport const StyledAppHeader = styled.header(\n ({\n theme: {\n base: { palette, breakpoints, 'z-index': zIndex }\n }\n }) => {\n return css`\n height: 6rem;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n background-color: ${palette['primary-background']};\n position: sticky;\n top: 0;\n z-index: calc(${zIndex.drawer + 1});\n & > div {\n height: 50%;\n }\n\n @media (pointer: coarse) {\n height: 8rem;\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: 3rem;\n\n & > div {\n height: 100%;\n }\n }\n `;\n }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer = styled.div(\n ({\n theme: {\n base: { 'hit-area': hitArea, breakpoints, spacing }\n }\n }) => {\n return css`\n max-width: calc(100% - calc(3 * ${hitArea.mouse}));\n\n @media (min-width: ${breakpoints.xs}) and (pointer: coarse) {\n max-width: calc(100% - calc(3 * ${hitArea.mouse}) - calc(2 * ${spacing}));\n }\n\n @media (min-width: ${breakpoints.md}) {\n max-width: 30%;\n }\n `;\n }\n);\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n return css`\n text-decoration: none;\n min-width: 0;\n\n & > div:last-child {\n min-width: 0;\n svg {\n flex-shrink: 0;\n }\n }\n\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledBrandImage = styled(Image)(\n ({\n theme: {\n base: { breakpoints }\n }\n }) => {\n return css`\n height: 1.5rem;\n max-width: 17ch;\n display: none;\n\n @media (min-width: ${breakpoints.sm}) {\n display: unset;\n }\n `;\n }\n);\n\nexport const StyledContext = styled.span`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(\n ({\n theme: {\n base: { breakpoints, 'font-weight': fontWeight }\n }\n }) => {\n return css`\n display: none;\n border: none;\n min-height: 3rem;\n [role='tab'] {\n height: auto;\n span:first-of-type {\n text-transform: none;\n }\n }\n [role='tab'][aria-selected='false'] > span {\n font-weight: ${fontWeight['semi-bold']};\n }\n [role='tab']:hover,\n [role='tab']:focus,\n [role='tab']:active {\n box-shadow: none;\n }\n\n @media (min-width: ${breakpoints.md}) {\n display: inherit;\n }\n `;\n }\n);\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearch = styled.div(\n ({\n theme: {\n base: { spacing, breakpoints, 'content-width': contentWidth }\n }\n }) => {\n return css`\n padding-block: ${spacing};\n width: 100%;\n ${StyledAppHeaderSearchForm} {\n margin-inline-start: 0;\n max-width: 100%;\n }\n\n @media (min-width: ${breakpoints.md}) {\n ${StyledAppHeaderSearchForm} {\n margin-inline-start: auto;\n max-width: ${contentWidth.lg};\n }\n\n ${StyledButton} {\n display: none;\n }\n }\n `;\n }\n);\n\nStyledAppHeaderSearch.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer = styled.div(\n ({\n theme: {\n base: { spacing, breakpoints }\n }\n }) => {\n return css`\n width: 100%;\n & > div,\n & > span,\n & > button {\n margin-inline-start: ${spacing};\n }\n\n & > div:last-child {\n display: none;\n }\n\n @media (min-width: ${breakpoints.md}) {\n width: auto;\n\n & > div:last-child {\n display: unset;\n }\n }\n `;\n }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAppName: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: 0;\n `;\n});\n\nStyledAppName.defaultProps = defaultThemeProp;\n\nexport const StyledAppVersion: typeof Text = styled(Text)(({ theme }) => {\n return css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: 0;\n `;\n});\n\nStyledAppVersion.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,7 +1,10 @@
 import { Ref, MouseEvent } from 'react';
-import { Action, BaseProps, NoChildrenProp, Tab, AvatarProps, SearchInputProps } from '@pega/cosmos-react-core';
+import { AppShellProps, OmitStrict, Action, BaseProps, NoChildrenProp, Tab, AvatarProps, SearchInputProps } from '@pega/cosmos-react-core';
 import { ContextSwitcherProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';
 import { BranchButtonProps } from './BranchButton';
+export interface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {
+    avatar: Pick<AvatarProps, 'name' | 'imageSrc'>;
+}
 export interface AppHeaderProps extends BaseProps, NoChildrenProp {
     contextSwitcher: ContextSwitcherProps;
     brand: {
@@ -18,7 +21,7 @@ export interface LinkProps extends Tab {
     onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
 }
 export interface UtilsProps {
-    avatar: AvatarProps;
+    operator: OperatorProps;
     search?: SearchInputProps;
     branch?: BranchButtonProps;
     action?: Pick<Action, 'id' | 'text' | 'onClick' | 'disabled' | 'icon'>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EACL,MAAM,EACN,SAAS,EACT,cAAc,EACd,GAAG,EACH,WAAW,EACX,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AAEtG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,eAAe,EAAE,oBAAoB,CAAC;IACtC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC1E,CAAC;IACF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,SAAU,SAAQ,GAAG;IACpC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvF;AAED,MAAM,WAAW,UAAU;IACzB,~~MAAM~~,EAAE,~~WAAW~~,CAAC;~~IACpB~~,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;IACvE,OAAO,CAAC,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH"}
1	+ {"version":3,"file":"AppHeader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EACL,aAAa,EACb,UAAU,EACV,MAAM,EACN,SAAS,EACT,cAAc,EACd,GAAG,EACH,WAAW,EACX,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AAEtG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,WAAW,aAAc,SAAQ,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACpF,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;CAChD;AACD,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,eAAe,EAAE,oBAAoB,CAAC;IACtC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC1E,CAAC;IACF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,SAAU,SAAQ,GAAG;IACpC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvF;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;IACvE,OAAO,CAAC,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.types.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref, MouseEvent } from 'react';\n\nimport {\n Action,\n BaseProps,\n NoChildrenProp,\n Tab,\n AvatarProps,\n SearchInputProps\n} from '@pega/cosmos-react-core';\nimport { ContextSwitcherProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nimport { BranchButtonProps } from './BranchButton';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n contextSwitcher: ContextSwitcherProps;\n brand: {\n label: string;\n logo: string;\n href?: string;\n onClick?: (e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void;\n };\n links?: LinkProps[];\n utils?: UtilsProps;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface LinkProps extends Tab {\n onClick?: (id: string, e?: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void;\n}\n\nexport interface UtilsProps {\n ~~avatar~~: ~~AvatarProps~~;\n search?: SearchInputProps;\n branch?: BranchButtonProps;\n action?: Pick<Action, 'id' \| 'text' \| 'onClick' \| 'disabled' \| 'icon'>;\n appInfo?: {\n name: string;\n version: string;\n };\n}\n"]}
1	+ {"version":3,"file":"AppHeader.types.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref, MouseEvent } from 'react';\n\nimport {\n AppShellProps,\n OmitStrict,\n Action,\n BaseProps,\n NoChildrenProp,\n Tab,\n AvatarProps,\n SearchInputProps\n} from '@pega/cosmos-react-core';\nimport { ContextSwitcherProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nimport { BranchButtonProps } from './BranchButton';\n\nexport interface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {\n avatar: Pick<AvatarProps, 'name' \| 'imageSrc'>;\n}\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n contextSwitcher: ContextSwitcherProps;\n brand: {\n label: string;\n logo: string;\n href?: string;\n onClick?: (e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void;\n };\n links?: LinkProps[];\n utils?: UtilsProps;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface LinkProps extends Tab {\n onClick?: (id: string, e?: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void;\n}\n\nexport interface UtilsProps {\n operator: OperatorProps;\n search?: SearchInputProps;\n branch?: BranchButtonProps;\n action?: Pick<Action, 'id' \| 'text' \| 'onClick' \| 'disabled' \| 'icon'>;\n appInfo?: {\n name: string;\n version: string;\n };\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAmBf,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;~~AA0HhE~~,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,kBAAkB,CAgC7D,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,QAAQ,CA6B/C,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAmBf,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA+HhE,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,kBAAkB,CAgC7D,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,QAAQ,CA6B/C,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -26,7 +26,7 @@ const NavParentItem = ({ label, visual, items, currentItemId }) => {
     const { base: { animation } } = useTheme();
     const [collapsed, setCollapsed] = useState(true);
     const [managedItems, setManagedItems] = useState(() => transformItems(items, new Set()));
-    const buttonRef = useRef(null);
+    const [buttonEl, setButtonEl] = useElement();
     const treeRef = useRef(null);
     const toggleCollapsed = (e) => {
         e.stopPropagation();
@@ -39,7 +39,7 @@ const NavParentItem = ({ label, visual, items, currentItemId }) => {
     };
     useEscape(() => {
         setCollapsed(true);
-        buttonRef.current?.focus();
+        buttonEl?.focus();
     }, treeRef);
     useEffect(() => {
         if (currentItemId && treeHelpers.getNode(managedItems, currentItemId)) {
@@ -57,7 +57,7 @@ const NavParentItem = ({ label, visual, items, currentItemId }) => {
             return transformItems(items, expandedIds);
         });
     }, [items]);
-    return (_jsxs(_Fragment, { children: [_jsxs(BareButton, { ref: buttonRef, "aria-expanded": !collapsed, "aria-controls": treeId, "aria-label": label, onClick: toggleCollapsed, children: [visual, _jsx("span", { children: label }), navState === 'open' && (_jsx(Icon, { name: `caret-${end}`, as: StyledAppShellCaretIcon, nestedListCollapsed: collapsed }))] }), _jsx(ExpandCollapse, { id: treeId, collapsed: collapsed || !navOpen, transitionSpeed: managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed, children: _jsx(StandardTree, { ref: treeRef, nodes: managedItems, currentNodeId: currentItemId, selectableParents: false, onNodeToggle: nodeId => {
+    return (_jsxs(_Fragment, { children: [_jsxs(BareButton, { ref: setButtonEl, "aria-expanded": !collapsed, "aria-controls": treeId, "aria-label": label, onClick: toggleCollapsed, children: [visual, _jsx("span", { children: label }), navState === 'open' && (_jsx(Icon, { name: `caret-${end}`, as: StyledAppShellCaretIcon, nestedListCollapsed: collapsed }))] }), !navOpen && (_jsx(Tooltip, { target: buttonEl, placement: end, showDelay: 'none', hideDelay: 'none', children: label })), _jsx(ExpandCollapse, { id: treeId, collapsed: collapsed || !navOpen, transitionSpeed: managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed, children: _jsx(StandardTree, { ref: treeRef, nodes: managedItems, currentNodeId: currentItemId, selectableParents: false, onNodeToggle: nodeId => {
                         setManagedItems(nodes => treeHelpers.mapNode(nodes, nodeId, node => {
                             return {
                                 ...node,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ElementType,\n FunctionComponent,\n KeyboardEvent,\n MouseEvent,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n useTheme,\n useEscape,\n useDirection,\n Icon,\n Tooltip,\n ExpandCollapse,\n useElement,\n StandardTree,\n StandardTreeNode,\n StandardTreeProps,\n treeHelpers,\n useAfterInitialEffect,\n useUID\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { NavProps, NavItemRenderProps } from './AppShell.types';\nimport { StyledNavList, StyledAppShellCaretIcon, StyledNavListItem } from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nconst transformItems = (\n items: NavItemRenderProps['items'],\n expandedIds: Set<StandardTreeNode['id']>\n): StandardTreeProps['nodes'] => {\n if (!items) return [];\n\n return items.map(item => ({\n id: item.id,\n label: item.label,\n onClick: (id: string, e: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>) => {\n e.stopPropagation();\n item.onClick?.(id, e);\n },\n expanded: item.items ? expandedIds.has(item.id) : undefined,\n href: item.href,\n nodes: item.items ? transformItems(item.items, expandedIds) : undefined\n }));\n};\n\nconst NavParentItem: FunctionComponent<NavItemRenderProps> = ({\n label,\n visual,\n items,\n currentItemId\n}) => {\n const { navOpen, navState, openNav } = useContext(AppShellContext);\n const { end } = useDirection();\n const treeId = useUID();\n const {\n base: { animation }\n } = useTheme();\n const [collapsed, setCollapsed] = useState(true);\n const [managedItems, setManagedItems] = useState<StandardTreeProps['nodes']>(() =>\n transformItems(items, new Set())\n );\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const treeRef = useRef<HTMLUListElement>(null);\n\n const toggleCollapsed = (e: MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n if (!navOpen) {\n setCollapsed(false);\n openNav();\n } else setCollapsed(state => !state);\n };\n\n useEscape(() => {\n setCollapsed(true);\n buttonRef.current?.focus();\n }, treeRef);\n\n useEffect(() => {\n if (currentItemId && treeHelpers.getNode(managedItems, currentItemId)) {\n setManagedItems(nodes => treeHelpers.expandTo(nodes, currentItemId));\n setCollapsed(false);\n }\n }, [currentItemId]);\n\n useAfterInitialEffect(() => {\n setManagedItems(cur => {\n const expandedIds = new Set<StandardTreeNode['id']>();\n\n treeHelpers.forEachNode(cur, node => {\n if (node.expanded) expandedIds.add(node.id);\n });\n\n return transformItems(items, expandedIds);\n });\n }, [items]);\n\n return (\n <>\n <BareButton\n ref={buttonRef}\n aria-expanded={!collapsed}\n aria-controls={treeId}\n aria-label={label}\n onClick={toggleCollapsed}\n >\n {visual}\n <span>{label}</span>\n {navState === 'open' && (\n <Icon\n name={`caret-${end}`}\n as={StyledAppShellCaretIcon}\n nestedListCollapsed={collapsed}\n />\n )}\n </BareButton>\n <ExpandCollapse\n id={treeId}\n collapsed={collapsed \|\| !navOpen}\n transitionSpeed={\n managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed\n }\n >\n <StandardTree\n ref={treeRef}\n nodes={managedItems as StandardTreeNode[]}\n currentNodeId={currentItemId}\n selectableParents={false}\n onNodeToggle={nodeId => {\n setManagedItems(nodes =>\n treeHelpers.mapNode(nodes, nodeId, node => {\n return {\n ...node,\n expanded: !node.expanded\n };\n })\n );\n }}\n />\n </ExpandCollapse>\n </>\n );\n};\n\nexport const NavLinkItem: FunctionComponent<NavItemRenderProps> = ({\n id,\n label,\n visual,\n href,\n onClick\n}) => {\n const { navOpen } = useContext(AppShellContext);\n const { end } = useDirection();\n const [listItemEl, setListItemEl] = useElement<HTMLAnchorElement \| HTMLButtonElement>();\n\n return (\n <>\n <BareButton\n ref={setListItemEl}\n href={href}\n onClick={(e: MouseEvent<HTMLAnchorElement \| HTMLButtonElement>) => {\n e.stopPropagation();\n onClick?.(id, e);\n }}\n aria-label={label}\n >\n {visual}\n <span>{label}</span>\n </BareButton>\n {!navOpen && (\n <Tooltip target={listItemEl} placement={end} showDelay='none' hideDelay='none'>\n {label}\n </Tooltip>\n )}\n </>\n );\n};\n\nconst NavigationList: FunctionComponent<NavProps> = ({ items, currentItemId }) => {\n let ItemComponent: ElementType;\n\n return (\n <StyledNavList>\n {items.map(item => {\n if (item.items) {\n ItemComponent = NavParentItem;\n } else {\n ItemComponent = NavLinkItem;\n }\n\n const ariaCurrent = item.href ? 'page' : 'true';\n return (\n <StyledNavListItem\n aria-current={currentItemId === item.id ? ariaCurrent : undefined}\n key={item.id}\n id={item.id}\n >\n <ItemComponent\n {...item}\n visual={<Icon name={item.icon} />}\n currentItemId={currentItemId}\n />\n </StyledNavListItem>\n );\n })}\n </StyledNavList>\n );\n};\n\nexport default NavigationList;\n"]}
1	+ {"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAKL,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,cAAc,EACd,UAAU,EACV,YAAY,EAGZ,WAAW,EACX,qBAAqB,EACrB,MAAM,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAGlF,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC9F,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,MAAM,cAAc,GAAG,CACrB,KAAkC,EAClC,WAAwC,EACZ,EAAE;IAC9B,IAAI,CAAC,KAAK;QAAE,OAAO,EAAE,CAAC;IAEtB,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,CAAC,EAAU,EAAE,CAAuD,EAAE,EAAE;YAC/E,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QACxB,CAAC;QACD,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;QAC3D,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS;KACxE,CAAC,CAAC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,aAAa,GAA0C,CAAC,EAC5D,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACd,EAAE,EAAE;IACH,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACnE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,EACJ,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAA6B,GAAG,EAAE,CAChF,cAAc,CAAC,KAAK,EAAE,IAAI,GAAG,EAAE,CAAC,CACjC,CAAC;IAEF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAqB,CAAC;IAChE,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE/C,MAAM,eAAe,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC3D,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,OAAO,EAAE;YACZ,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,OAAO,EAAE,CAAC;SACX;;YAAM,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,QAAQ,EAAE,KAAK,EAAE,CAAC;IACpB,CAAC,EAAE,OAAO,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,IAAI,WAAW,CAAC,OAAO,CAAC,YAAY,EAAE,aAAa,CAAC,EAAE;YACrE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;YACrE,YAAY,CAAC,KAAK,CAAC,CAAC;SACrB;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,qBAAqB,CAAC,GAAG,EAAE;QACzB,eAAe,CAAC,GAAG,CAAC,EAAE;YACpB,MAAM,WAAW,GAAG,IAAI,GAAG,EAA0B,CAAC;YAEtD,WAAW,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE;gBAClC,IAAI,IAAI,CAAC,QAAQ;oBAAE,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC9C,CAAC,CAAC,CAAC;YAEH,OAAO,cAAc,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,8BACE,MAAC,UAAU,IACT,GAAG,EAAE,WAAW,mBACD,CAAC,SAAS,mBACV,MAAM,gBACT,KAAK,EACjB,OAAO,EAAE,eAAe,aAEvB,MAAM,EACP,yBAAO,KAAK,GAAQ,EACnB,QAAQ,KAAK,MAAM,IAAI,CACtB,KAAC,IAAI,IACH,IAAI,EAAE,SAAS,GAAG,EAAE,EACpB,EAAE,EAAE,uBAAuB,EAC3B,mBAAmB,EAAE,SAAS,GAC9B,CACH,IACU,EACZ,CAAC,OAAO,IAAI,CACX,KAAC,OAAO,IAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACzE,KAAK,GACE,CACX,EACD,KAAC,cAAc,IACb,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,SAAS,IAAI,CAAC,OAAO,EAChC,eAAe,EACb,YAAY,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,YAAY,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,YAG9E,KAAC,YAAY,IACX,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,YAAkC,EACzC,aAAa,EAAE,aAAa,EAC5B,iBAAiB,EAAE,KAAK,EACxB,YAAY,EAAE,MAAM,CAAC,EAAE;wBACrB,eAAe,CAAC,KAAK,CAAC,EAAE,CACtB,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;4BACxC,OAAO;gCACL,GAAG,IAAI;gCACP,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;6BACzB,CAAC;wBACJ,CAAC,CAAC,CACH,CAAC;oBACJ,CAAC,GACD,GACa,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA0C,CAAC,EACjE,EAAE,EACF,KAAK,EACL,MAAM,EACN,IAAI,EACJ,OAAO,EACR,EAAE,EAAE;IACH,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,UAAU,EAAyC,CAAC;IAExF,OAAO,CACL,8BACE,MAAC,UAAU,IACT,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAoD,EAAE,EAAE;oBAChE,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;gBACnB,CAAC,gBACW,KAAK,aAEhB,MAAM,EACP,yBAAO,KAAK,GAAQ,IACT,EACZ,CAAC,OAAO,IAAI,CACX,KAAC,OAAO,IAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YAC3E,KAAK,GACE,CACX,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAgC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE;IAC/E,IAAI,aAA0B,CAAC;IAE/B,OAAO,CACL,KAAC,aAAa,cACX,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,aAAa,GAAG,aAAa,CAAC;aAC/B;iBAAM;gBACL,aAAa,GAAG,WAAW,CAAC;aAC7B;YAED,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;YAChD,OAAO,CACL,KAAC,iBAAiB,oBACF,aAAa,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAEjE,EAAE,EAAE,IAAI,CAAC,EAAE,YAEX,KAAC,aAAa,OACR,IAAI,EACR,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACjC,aAAa,EAAE,aAAa,GAC5B,IAPG,IAAI,CAAC,EAAE,CAQM,CACrB,CAAC;QACJ,CAAC,CAAC,GACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import {\n ElementType,\n FunctionComponent,\n KeyboardEvent,\n MouseEvent,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n useTheme,\n useEscape,\n useDirection,\n Icon,\n Tooltip,\n ExpandCollapse,\n useElement,\n StandardTree,\n StandardTreeNode,\n StandardTreeProps,\n treeHelpers,\n useAfterInitialEffect,\n useUID\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { NavProps, NavItemRenderProps } from './AppShell.types';\nimport { StyledNavList, StyledAppShellCaretIcon, StyledNavListItem } from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nconst transformItems = (\n items: NavItemRenderProps['items'],\n expandedIds: Set<StandardTreeNode['id']>\n): StandardTreeProps['nodes'] => {\n if (!items) return [];\n\n return items.map(item => ({\n id: item.id,\n label: item.label,\n onClick: (id: string, e: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>) => {\n e.stopPropagation();\n item.onClick?.(id, e);\n },\n expanded: item.items ? expandedIds.has(item.id) : undefined,\n href: item.href,\n nodes: item.items ? transformItems(item.items, expandedIds) : undefined\n }));\n};\n\nconst NavParentItem: FunctionComponent<NavItemRenderProps> = ({\n label,\n visual,\n items,\n currentItemId\n}) => {\n const { navOpen, navState, openNav } = useContext(AppShellContext);\n const { end } = useDirection();\n const treeId = useUID();\n const {\n base: { animation }\n } = useTheme();\n const [collapsed, setCollapsed] = useState(true);\n const [managedItems, setManagedItems] = useState<StandardTreeProps['nodes']>(() =>\n transformItems(items, new Set())\n );\n\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n const treeRef = useRef<HTMLUListElement>(null);\n\n const toggleCollapsed = (e: MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n if (!navOpen) {\n setCollapsed(false);\n openNav();\n } else setCollapsed(state => !state);\n };\n\n useEscape(() => {\n setCollapsed(true);\n buttonEl?.focus();\n }, treeRef);\n\n useEffect(() => {\n if (currentItemId && treeHelpers.getNode(managedItems, currentItemId)) {\n setManagedItems(nodes => treeHelpers.expandTo(nodes, currentItemId));\n setCollapsed(false);\n }\n }, [currentItemId]);\n\n useAfterInitialEffect(() => {\n setManagedItems(cur => {\n const expandedIds = new Set<StandardTreeNode['id']>();\n\n treeHelpers.forEachNode(cur, node => {\n if (node.expanded) expandedIds.add(node.id);\n });\n\n return transformItems(items, expandedIds);\n });\n }, [items]);\n\n return (\n <>\n <BareButton\n ref={setButtonEl}\n aria-expanded={!collapsed}\n aria-controls={treeId}\n aria-label={label}\n onClick={toggleCollapsed}\n >\n {visual}\n <span>{label}</span>\n {navState === 'open' && (\n <Icon\n name={`caret-${end}`}\n as={StyledAppShellCaretIcon}\n nestedListCollapsed={collapsed}\n />\n )}\n </BareButton>\n {!navOpen && (\n <Tooltip target={buttonEl} placement={end} showDelay='none' hideDelay='none'>\n {label}\n </Tooltip>\n )}\n <ExpandCollapse\n id={treeId}\n collapsed={collapsed \|\| !navOpen}\n transitionSpeed={\n managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed\n }\n >\n <StandardTree\n ref={treeRef}\n nodes={managedItems as StandardTreeNode[]}\n currentNodeId={currentItemId}\n selectableParents={false}\n onNodeToggle={nodeId => {\n setManagedItems(nodes =>\n treeHelpers.mapNode(nodes, nodeId, node => {\n return {\n ...node,\n expanded: !node.expanded\n };\n })\n );\n }}\n />\n </ExpandCollapse>\n </>\n );\n};\n\nexport const NavLinkItem: FunctionComponent<NavItemRenderProps> = ({\n id,\n label,\n visual,\n href,\n onClick\n}) => {\n const { navOpen } = useContext(AppShellContext);\n const { end } = useDirection();\n const [listItemEl, setListItemEl] = useElement<HTMLAnchorElement \| HTMLButtonElement>();\n\n return (\n <>\n <BareButton\n ref={setListItemEl}\n href={href}\n onClick={(e: MouseEvent<HTMLAnchorElement \| HTMLButtonElement>) => {\n e.stopPropagation();\n onClick?.(id, e);\n }}\n aria-label={label}\n >\n {visual}\n <span>{label}</span>\n </BareButton>\n {!navOpen && (\n <Tooltip target={listItemEl} placement={end} showDelay='none' hideDelay='none'>\n {label}\n </Tooltip>\n )}\n </>\n );\n};\n\nconst NavigationList: FunctionComponent<NavProps> = ({ items, currentItemId }) => {\n let ItemComponent: ElementType;\n\n return (\n <StyledNavList>\n {items.map(item => {\n if (item.items) {\n ItemComponent = NavParentItem;\n } else {\n ItemComponent = NavLinkItem;\n }\n\n const ariaCurrent = item.href ? 'page' : 'true';\n return (\n <StyledNavListItem\n aria-current={currentItemId === item.id ? ariaCurrent : undefined}\n key={item.id}\n id={item.id}\n >\n <ItemComponent\n {...item}\n visual={<Icon name={item.icon} />}\n currentItemId={currentItemId}\n />\n </StyledNavListItem>\n );\n })}\n </StyledNavList>\n );\n};\n\nexport default NavigationList;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "4.0.0-dev.12.1",
+  "version": "4.0.0-dev.13.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.12.1",
-    "@pega/cosmos-react-dnd": "4.0.0-dev.12.1",
+    "@pega/cosmos-react-core": "4.0.0-dev.13.0",
+    "@pega/cosmos-react-dnd": "4.0.0-dev.13.0",
     "@types/codemirror": "^5.60.5",
     "@types/dagre": "^0.7.46",
     "@types/react": "^16.14.24 || ^17.0.38",