@pega/cosmos-react-build 4.0.0-dev.8.2 → 4.0.0-dev.8.3
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.
- package/lib/components/AppShell/AppShell.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.js +2 -2
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/AppShell/AppShell.styles.d.ts +1 -0
- package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.styles.js +7 -1
- package/lib/components/AppShell/AppShell.styles.js.map +1 -1
- package/lib/components/AppShell/AppShell.types.d.ts +1 -1
- package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.types.js.map +1 -1
- package/lib/components/AppShell/index.d.ts +1 -1
- package/lib/components/AppShell/index.d.ts.map +1 -1
- package/lib/components/AppShell/index.js.map +1 -1
- package/lib/index.d.ts +0 -2
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +0 -2
- package/lib/index.js.map +1 -1
- package/package.json +3 -3
- package/lib/components/SiteHeader/SiteHeader.d.ts +0 -16
- package/lib/components/SiteHeader/SiteHeader.d.ts.map +0 -1
- package/lib/components/SiteHeader/SiteHeader.js +0 -49
- package/lib/components/SiteHeader/SiteHeader.js.map +0 -1
- package/lib/components/SiteHeader/SiteHeader.styles.d.ts +0 -9
- package/lib/components/SiteHeader/SiteHeader.styles.d.ts.map +0 -1
- package/lib/components/SiteHeader/SiteHeader.styles.js +0 -66
- package/lib/components/SiteHeader/SiteHeader.styles.js.map +0 -1
- package/lib/components/SiteHeader/index.d.ts +0 -4
- package/lib/components/SiteHeader/index.d.ts.map +0 -1
- package/lib/components/SiteHeader/index.js +0 -3
- package/lib/components/SiteHeader/index.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA6C,MAAM,OAAO,CAAC;AAErF,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA6C,MAAM,OAAO,CAAC;AAErF,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA6G7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -40,7 +40,7 @@ const AppShell = forwardRef(({ main, appHeader, nav, ...restProps }, ref) => {
|
|
|
40
40
|
navOpen: navState === 'open' || navState === 'opening',
|
|
41
41
|
navState,
|
|
42
42
|
openNav
|
|
43
|
-
}), [navState]), children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(AppHeader, { ...appHeader }), _jsxs(Flex, { ...restProps, container: {
|
|
43
|
+
}), [navState]), children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(AppHeader, { ...appHeader }), nav && (_jsxs(Flex, { ...restProps, container: {
|
|
44
44
|
direction: 'column',
|
|
45
45
|
justify: 'between'
|
|
46
46
|
}, ref: navRef, as: StyledNav, children: [_jsx(StyledScrollWrap, { onClick: () => {
|
|
@@ -52,7 +52,7 @@ const AppShell = forwardRef(({ main, appHeader, nav, ...restProps }, ref) => {
|
|
|
52
52
|
}
|
|
53
53
|
}, children: _jsx(NavigationList, { ...nav }) }), _jsxs(Flex, { as: StyledUtils, container: { justify: 'center' }, children: [_jsx(StyledAppShellToggleButton, { icon: true, ref: setExpandCollapseEl, compact: true, variant: 'simple', onClick: () => {
|
|
54
54
|
setNavState(navState === 'closed' ? 'open' : 'closed');
|
|
55
|
-
}, open: ['open', 'opening'].includes(navState), "aria-label": navState === 'closed' ? t('expand') : t('collapse'), children: _jsx(Icon, { name: `arrow-micro-${['closed', 'closing'].includes(navState) ? end : start}` }) }), ['open', 'closed'].includes(navState) && (_jsx(Tooltip, { target: expandCollapseEl, placement: 'right', showDelay: 'none', hideDelay: 'none', children: navState === 'closed' ? t('expand') : t('collapse') }))] })] }), _jsx(StyledMain, { navOpen: ['open', 'opening'].includes(navState), children: main })] }));
|
|
55
|
+
}, open: ['open', 'opening'].includes(navState), "aria-label": navState === 'closed' ? t('expand') : t('collapse'), children: _jsx(Icon, { name: `arrow-micro-${['closed', 'closing'].includes(navState) ? end : start}` }) }), ['open', 'closed'].includes(navState) && (_jsx(Tooltip, { target: expandCollapseEl, placement: 'right', showDelay: 'none', hideDelay: 'none', children: navState === 'closed' ? t('expand') : t('collapse') }))] })] })), _jsx(StyledMain, { navOpen: ['open', 'opening'].includes(navState), hideNav: !nav, children: main })] }));
|
|
56
56
|
});
|
|
57
57
|
export default AppShell;
|
|
58
58
|
//# sourceMappingURL=AppShell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,OAAO,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EACL,YAAY,EACZ,OAAO,EACP,IAAI,EAEJ,YAAY,EACZ,kBAAkB,EAClB,UAAU,EACV,kBAAkB,EAElB,IAAI,EACJ,OAAO,EACP,SAAS,EACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,sDAAsD,CAAC;AACvF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AAErG,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,SAAS,EACT,0BAA0B,EAC3B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,YAAY,CAAC,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC;AAE1F,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,SAAS,EAAkC,EACtE,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IACtC,MAAM,MAAM,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAEvC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,UAAU,EAAqB,CAAC;IAEhF,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,kBAAkB,CAAC;QAC/D,GAAG,EAAE,MAAM;QACX,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,eAAe;QACvB,YAAY,EAAE,QAAQ;KACvB,CAAC,CAAC;IAEH,MAAM,SAAS,GAA4B,OAAO,CAChD,GAAG,EAAE,CAAC;QACJ;YACE,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC;YAC9B,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE;SAC3D;KACF,EACD,CAAC,CAAC,CAAC,CACJ,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,WAAW,CAAC,QAAQ,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,OAAO,EAAE,QAAQ,KAAK,MAAM,IAAI,QAAQ,KAAK,SAAS;YACtD,QAAQ;YACR,OAAO;SACR,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,aAED,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,EAC/B,KAAC,SAAS,OAAK,SAAS,GAAI,
|
|
1
|
+
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref, useMemo } from 'react';\n\nimport {\n registerIcon,\n useI18n,\n Icon,\n ForwardProps,\n useDirection,\n useConsolidatedRef,\n useElement,\n useTransitionState,\n SkipLinksProps,\n Flex,\n Tooltip,\n SkipLinks\n} from '@pega/cosmos-react-core';\nimport { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport * as caseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/case-solid.icon';\nimport * as barsIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bars.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport AppHeader from './Header/AppHeader';\nimport {\n StyledScrollWrap,\n StyledMain,\n StyledUtils,\n StyledNav,\n StyledAppShellToggleButton\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellProps } from './AppShell.types';\nimport NavigationList from './NavigationList';\n\nregisterIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon);\n\nconst AppShell: FunctionComponent<AppShellProps & ForwardProps> = forwardRef(\n (\n { main, appHeader, nav, ...restProps }: PropsWithoutRef<AppShellProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n const t = useI18n();\n\n const { start, end } = useDirection();\n const navRef = useConsolidatedRef(ref);\n\n const [expandCollapseEl, setExpandCollapseEl] = useElement<HTMLButtonElement>();\n\n const { state: navState, set: setNavState } = useTransitionState({\n ref: navRef,\n property: 'width',\n states: openCloseStates,\n defaultState: 'closed'\n });\n\n const skipLinks: SkipLinksProps['items'] = useMemo(\n () => [\n {\n label: t('go_to_main_content'),\n target: { ariaLabel: t('main_content'), selector: 'main' }\n }\n ],\n [t]\n );\n\n const openNav = () => {\n setNavState('open');\n };\n\n const closeNav = () => {\n setNavState('closed');\n };\n\n return (\n <AppShellContext.Provider\n value={useMemo(\n () => ({\n navOpen: navState === 'open' || navState === 'opening',\n navState,\n openNav\n }),\n [navState]\n )}\n >\n <SkipLinks items={skipLinks} />\n <AppHeader {...appHeader} />\n\n {nav && (\n <Flex\n {...restProps}\n container={{\n direction: 'column',\n justify: 'between'\n }}\n ref={navRef}\n as={StyledNav}\n >\n <StyledScrollWrap\n onClick={() => {\n if (['closing', 'closed'].includes(navState)) {\n openNav();\n } else {\n closeNav();\n }\n }}\n >\n <NavigationList {...nav} />\n </StyledScrollWrap>\n\n <Flex as={StyledUtils} container={{ justify: 'center' }}>\n <StyledAppShellToggleButton\n icon\n ref={setExpandCollapseEl}\n compact\n variant='simple'\n onClick={() => {\n setNavState(navState === 'closed' ? 'open' : 'closed');\n }}\n open={['open', 'opening'].includes(navState)}\n aria-label={navState === 'closed' ? t('expand') : t('collapse')}\n >\n <Icon\n name={`arrow-micro-${['closed', 'closing'].includes(navState) ? end : start}`}\n />\n </StyledAppShellToggleButton>\n {['open', 'closed'].includes(navState) && (\n <Tooltip\n target={expandCollapseEl}\n placement='right'\n showDelay='none'\n hideDelay='none'\n >\n {navState === 'closed' ? t('expand') : t('collapse')}\n </Tooltip>\n )}\n </Flex>\n </Flex>\n )}\n\n <StyledMain navOpen={['open', 'opening'].includes(navState)} hideNav={!nav}>\n {main}\n </StyledMain>\n </AppShellContext.Provider>\n );\n }\n);\n\nexport default AppShell;\n"]}
|
|
@@ -6,6 +6,7 @@ export declare const StyledAppShellToggleButton: import("styled-components").Sty
|
|
|
6
6
|
export declare const StyledScrollWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
7
|
export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {
|
|
8
8
|
navOpen: boolean;
|
|
9
|
+
hideNav: boolean;
|
|
9
10
|
}, never>;
|
|
10
11
|
export declare const StyledNav: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
|
|
11
12
|
export declare const StyledAppShellCaretIcon: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":";AAwBA,eAAO,MAAM,WAAW,yGAStB,CAAC;AAIH,eAAO,MAAM,0BAA0B;UAA0B,OAAO;SAsBtE,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;
|
|
1
|
+
{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":";AAwBA,eAAO,MAAM,WAAW,yGAStB,CAAC;AAIH,eAAO,MAAM,0BAA0B;UAA0B,OAAO;SAsBtE,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;aACP,OAAO;SAoCjB,CAAC;AAIF,eAAO,MAAM,SAAS,yGAkIrB,CAAC;AAIF,eAAO,MAAM,uBAAuB;;SAenC,CAAC;AAIF,eAAO,MAAM,iBAAiB,wGAmE5B,CAAC;AAIH,eAAO,MAAM,aAAa,wGAAc,CAAC"}
|
|
@@ -45,7 +45,7 @@ export const StyledScrollWrap = styled.div(() => {
|
|
|
45
45
|
`;
|
|
46
46
|
});
|
|
47
47
|
StyledScrollWrap.defaultProps = defaultThemeProp;
|
|
48
|
-
export const StyledMain = styled.main(({ navOpen, theme: { base: { animation, breakpoints, palette } } }) => {
|
|
48
|
+
export const StyledMain = styled.main(({ navOpen, hideNav, theme: { base: { animation, breakpoints, palette } } }) => {
|
|
49
49
|
return css `
|
|
50
50
|
position: relative;
|
|
51
51
|
min-height: calc(100vh - 6rem);
|
|
@@ -65,6 +65,12 @@ export const StyledMain = styled.main(({ navOpen, theme: { base: { animation, br
|
|
|
65
65
|
css `
|
|
66
66
|
margin-inline-start: ${navOpenWidth};
|
|
67
67
|
`}
|
|
68
|
+
|
|
69
|
+
${hideNav &&
|
|
70
|
+
css `
|
|
71
|
+
transition-duration: 0s;
|
|
72
|
+
margin-inline-start: 0;
|
|
73
|
+
`}
|
|
68
74
|
`;
|
|
69
75
|
});
|
|
70
76
|
StyledMain.defaultProps = defaultThemeProp;
|
|
@@ -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, rgba } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n tryCatch,\n defaultThemeProp,\n Button,\n StyledIcon,\n useDirection,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport {\n StyledToggleIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst navWidth = '3rem';\nconst navOpenWidth = '14rem';\n\nexport const StyledUtils = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-block: ${theme.base.spacing};\n border-block-start: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)<{ open: boolean }>(({ theme, open }) => {\n return css`\n background-color: ${theme.base.palette.dark};\n color: ${theme.base.palette.light};\n border: none;\n\n ${open &&\n css`\n padding-inline: 1rem;\n `}\n\n ${StyledIcon} {\n width: 1.25rem;\n height: 1.25rem;\n font-weight: bold;\n }\n\n &:enabled:focus,\n :not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n return css`\n height: 100%;\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n navOpen: boolean;\n}>(\n ({\n navOpen,\n theme: {\n base: { animation, breakpoints, palette }\n }\n }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 6rem);\n background-color: ${palette['app-background']};\n margin-inline-start: ${navWidth};\n transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};\n\n @media (pointer: coarse) {\n min-height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: calc(100vh - 3rem);\n }\n\n ${navOpen &&\n css`\n margin-inline-start: ${navOpenWidth};\n `}\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(\n ({\n theme: {\n base: {\n breakpoints,\n colors,\n palette,\n animation,\n spacing,\n shadow,\n 'custom-scrollbar': customScrollbar,\n 'border-radius': borderRadius,\n 'font-size': fontSize,\n 'font-scale': fontScale\n },\n components: { 'app-shell': appShell }\n }\n }) => {\n const { navState } = useContext(AppShellContext);\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: fixed;\n z-index: 1;\n height: calc(100vh - 6rem);\n background: ${appShell.nav['background-color']};\n width: ${navState === 'opening' || navState === 'open' ? navOpenWidth : navWidth};\n transition: width ${animation.speed} ${animation.timing.ease};\n display: flex;\n\n ${StyledStandardTree} {\n background-color: ${palette.dark};\n\n ${StyledNodeText}, ${StyledToggleIcon} {\n color: rgba(255, 255, 255, 0.7);\n font-size: ${fontSizes.xxs};\n }\n\n ${StyledNodeInteraction} {\n padding-block-start: calc(0.5 * ${spacing});\n padding-block-end: calc(0.5 * ${spacing});\n\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n\n ${StyledNodeText} {\n color: ${palette.light};\n }\n }\n\n &:focus {\n box-shadow: ${shadow['focus-inset']};\n }\n\n &[aria-current='page'],\n &[aria-current='true'] {\n background: rgba(255, 255, 255, 0.05);\n\n ${StyledNodeText} {\n color: ${colors.blue.light};\n }\n }\n }\n\n &:has(:focus-visible) {\n box-shadow: inset 0 0 0 0.125rem #71c1ff99;\n }\n }\n\n ${customScrollbar &&\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 * ${borderRadius});\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 @media (pointer: coarse) {\n height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: calc(100vh - 3rem);\n }\n `;\n }\n);\n\nStyledNav.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellCaretIcon = styled.svg<{ nestedListCollapsed?: boolean }>(\n ({ nestedListCollapsed, theme }) => {\n const { rtl } = useDirection();\n\n return css`\n transition-property: transform;\n transition-duration: ${theme.base.animation.speed};\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n ${nestedListCollapsed === false &&\n css`\n transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n `}\n `;\n }\n);\n\nStyledAppShellCaretIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li(({ theme }) => {\n const { navOpen } = useContext(AppShellContext);\n const activeBackground = tryCatch(() =>\n rgba('#000000', theme.base.transparency['transparent-4'])\n );\n\n return css`\n display: block;\n position: relative;\n ${StyledIcon} {\n font-size: 1.25rem;\n }\n\n > :first-child {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n padding: calc(1.25 * ${theme.base.spacing}) 0;\n white-space: nowrap;\n color: rgba(255, 255, 255, 0.7);\n cursor: pointer;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n text-decoration: none;\n\n span {\n overflow: hidden;\n color: inherit;\n }\n\n &:hover,\n &:focus {\n color: ${theme.base.palette.light};\n background: rgba(255, 255, 255, 0.05);\n }\n\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n\n ${StyledAppShellCaretIcon}:last-child {\n position: absolute;\n left: ${navOpen ? 'auto' : '100%'};\n ${navOpen &&\n css`\n inset-inline-end: 1rem;\n `}\n margin: 0;\n opacity: ${navOpen ? '1' : '0'};\n transition-property: opacity;\n }\n\n ${StyledIcon}:first-child {\n flex-shrink: 0;\n margin: 0 calc((${navWidth} - 1.125rem) / 2);\n }\n }\n\n &[aria-current='page'] > :first-child,\n &[aria-current='true'] > :first-child,\n &:has([aria-current='page']) > :first-child,\n &:has([aria-current='true']) > :first-child {\n color: ${theme.base.colors.blue.light};\n background-color: ${activeBackground};\n }\n `;\n});\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\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, rgba } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n tryCatch,\n defaultThemeProp,\n Button,\n StyledIcon,\n useDirection,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport {\n StyledToggleIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst navWidth = '3rem';\nconst navOpenWidth = '14rem';\n\nexport const StyledUtils = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-block: ${theme.base.spacing};\n border-block-start: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)<{ open: boolean }>(({ theme, open }) => {\n return css`\n background-color: ${theme.base.palette.dark};\n color: ${theme.base.palette.light};\n border: none;\n\n ${open &&\n css`\n padding-inline: 1rem;\n `}\n\n ${StyledIcon} {\n width: 1.25rem;\n height: 1.25rem;\n font-weight: bold;\n }\n\n &:enabled:focus,\n :not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n return css`\n height: 100%;\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n navOpen: boolean;\n hideNav: boolean;\n}>(\n ({\n navOpen,\n hideNav,\n theme: {\n base: { animation, breakpoints, palette }\n }\n }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 6rem);\n background-color: ${palette['app-background']};\n margin-inline-start: ${navWidth};\n transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};\n\n @media (pointer: coarse) {\n min-height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: calc(100vh - 3rem);\n }\n\n ${navOpen &&\n css`\n margin-inline-start: ${navOpenWidth};\n `}\n\n ${hideNav &&\n css`\n transition-duration: 0s;\n margin-inline-start: 0;\n `}\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(\n ({\n theme: {\n base: {\n breakpoints,\n colors,\n palette,\n animation,\n spacing,\n shadow,\n 'custom-scrollbar': customScrollbar,\n 'border-radius': borderRadius,\n 'font-size': fontSize,\n 'font-scale': fontScale\n },\n components: { 'app-shell': appShell }\n }\n }) => {\n const { navState } = useContext(AppShellContext);\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: fixed;\n z-index: 1;\n height: calc(100vh - 6rem);\n background: ${appShell.nav['background-color']};\n width: ${navState === 'opening' || navState === 'open' ? navOpenWidth : navWidth};\n transition: width ${animation.speed} ${animation.timing.ease};\n display: flex;\n\n ${StyledStandardTree} {\n background-color: ${palette.dark};\n\n ${StyledNodeText}, ${StyledToggleIcon} {\n color: rgba(255, 255, 255, 0.7);\n font-size: ${fontSizes.xxs};\n }\n\n ${StyledNodeInteraction} {\n padding-block-start: calc(0.5 * ${spacing});\n padding-block-end: calc(0.5 * ${spacing});\n\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n\n ${StyledNodeText} {\n color: ${palette.light};\n }\n }\n\n &:focus {\n box-shadow: ${shadow['focus-inset']};\n }\n\n &[aria-current='page'],\n &[aria-current='true'] {\n background: rgba(255, 255, 255, 0.05);\n\n ${StyledNodeText} {\n color: ${colors.blue.light};\n }\n }\n }\n\n &:has(:focus-visible) {\n box-shadow: inset 0 0 0 0.125rem #71c1ff99;\n }\n }\n\n ${customScrollbar &&\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 * ${borderRadius});\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 @media (pointer: coarse) {\n height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: calc(100vh - 3rem);\n }\n `;\n }\n);\n\nStyledNav.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellCaretIcon = styled.svg<{ nestedListCollapsed?: boolean }>(\n ({ nestedListCollapsed, theme }) => {\n const { rtl } = useDirection();\n\n return css`\n transition-property: transform;\n transition-duration: ${theme.base.animation.speed};\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n ${nestedListCollapsed === false &&\n css`\n transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n `}\n `;\n }\n);\n\nStyledAppShellCaretIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li(({ theme }) => {\n const { navOpen } = useContext(AppShellContext);\n const activeBackground = tryCatch(() =>\n rgba('#000000', theme.base.transparency['transparent-4'])\n );\n\n return css`\n display: block;\n position: relative;\n ${StyledIcon} {\n font-size: 1.25rem;\n }\n\n > :first-child {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n padding: calc(1.25 * ${theme.base.spacing}) 0;\n white-space: nowrap;\n color: rgba(255, 255, 255, 0.7);\n cursor: pointer;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n text-decoration: none;\n\n span {\n overflow: hidden;\n color: inherit;\n }\n\n &:hover,\n &:focus {\n color: ${theme.base.palette.light};\n background: rgba(255, 255, 255, 0.05);\n }\n\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n\n ${StyledAppShellCaretIcon}:last-child {\n position: absolute;\n left: ${navOpen ? 'auto' : '100%'};\n ${navOpen &&\n css`\n inset-inline-end: 1rem;\n `}\n margin: 0;\n opacity: ${navOpen ? '1' : '0'};\n transition-property: opacity;\n }\n\n ${StyledIcon}:first-child {\n flex-shrink: 0;\n margin: 0 calc((${navWidth} - 1.125rem) / 2);\n }\n }\n\n &[aria-current='page'] > :first-child,\n &[aria-current='true'] > :first-child,\n &:has([aria-current='page']) > :first-child,\n &:has([aria-current='true']) > :first-child {\n color: ${theme.base.colors.blue.light};\n background-color: ${activeBackground};\n }\n `;\n});\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\n"]}
|
|
@@ -47,7 +47,7 @@ export interface AppShellProps extends NoChildrenProp {
|
|
|
47
47
|
/** Props related to the App Shell header. */
|
|
48
48
|
appHeader: AppHeaderProps;
|
|
49
49
|
/** Props related to the App Shell side navigation. */
|
|
50
|
-
nav
|
|
50
|
+
nav?: NavProps;
|
|
51
51
|
}
|
|
52
52
|
export interface AppShellContextValue {
|
|
53
53
|
navOpen: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,sDAAsD,CAAC;AAEvF,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxF,iCAAiC;IACjC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED,UAAU,kBAAkB;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,YAAY;IACpB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mGAAmG;IACnG,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,oBAAY,YAAY,GAAG;IACzB,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,CAAC,kBAAkB,GAAG,YAAY,CAAC,CAAC;AAExC,MAAM,WAAW,QAAQ;IACvB,sEAAsE;IACtE,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,qCAAqC;IACrC,aAAa,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,sCAAsC;IACtC,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,sDAAsD;IACtD,GAAG,EAAE,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,sDAAsD,CAAC;AAEvF,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxF,iCAAiC;IACjC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED,UAAU,kBAAkB;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,YAAY;IACpB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mGAAmG;IACnG,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,oBAAY,YAAY,GAAG;IACzB,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,CAAC,kBAAkB,GAAG,YAAY,CAAC,CAAC;AAExC,MAAM,WAAW,QAAQ;IACvB,sEAAsE;IACtE,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,qCAAqC;IACrC,aAAa,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,sCAAsC;IACtC,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,sDAAsD;IACtD,GAAG,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,eAAe,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,kBAAmB,SAAQ,MAAM,EAAE,SAAS,EAAE,cAAc;IAC3E,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CACpC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppHeaderProps } from './Header/AppHeader.types';\n\nexport interface NestedNavItemProps {\n /** Unique id for the nav item. */\n id: string;\n /** The display text of the nav item. */\n label: string;\n /** URL or DOM id to navigate to. This will render the nav item as a link. */\n href?: string;\n /** Click handler for the nav item. */\n onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n /** A set of nested nav items. */\n items?: NestedNavItemProps[];\n}\n\ninterface ParentNavItemProps {\n /** A set of nested nav items. */\n items?: NestedNavItemProps[];\n href?: never;\n onClick?: never;\n}\n\ninterface NavLinkProps {\n /** URL or DOM id to navigate to. This will render the nav item as a link. */\n href?: string;\n /** Click handler for the link. If no href if passed, this will render the nav item as a button. */\n onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n items?: never;\n}\n\nexport type NavItemProps = {\n /** Unique id for the nav item. */\n id: string;\n /** The display text of the nav item. */\n label: string;\n /** The name of the Cosmos Icon to render as a visual. Only applies to top-level nav items. */\n icon: string;\n} & (ParentNavItemProps | NavLinkProps);\n\nexport interface NavProps {\n /** A set of nav items that will render as a list in the App Shell. */\n items: NavItemProps[];\n /** The id of the active nav item. */\n currentItemId?: NavItemProps['id'];\n}\n\nexport interface AppShellProps extends NoChildrenProp {\n /** The content of the application. */\n main: ReactNode;\n /** Props related to the App Shell header. */\n appHeader: AppHeaderProps;\n /** Props related to the App Shell side navigation. */\n nav
|
|
1
|
+
{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppHeaderProps } from './Header/AppHeader.types';\n\nexport interface NestedNavItemProps {\n /** Unique id for the nav item. */\n id: string;\n /** The display text of the nav item. */\n label: string;\n /** URL or DOM id to navigate to. This will render the nav item as a link. */\n href?: string;\n /** Click handler for the nav item. */\n onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n /** A set of nested nav items. */\n items?: NestedNavItemProps[];\n}\n\ninterface ParentNavItemProps {\n /** A set of nested nav items. */\n items?: NestedNavItemProps[];\n href?: never;\n onClick?: never;\n}\n\ninterface NavLinkProps {\n /** URL or DOM id to navigate to. This will render the nav item as a link. */\n href?: string;\n /** Click handler for the link. If no href if passed, this will render the nav item as a button. */\n onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n items?: never;\n}\n\nexport type NavItemProps = {\n /** Unique id for the nav item. */\n id: string;\n /** The display text of the nav item. */\n label: string;\n /** The name of the Cosmos Icon to render as a visual. Only applies to top-level nav items. */\n icon: string;\n} & (ParentNavItemProps | NavLinkProps);\n\nexport interface NavProps {\n /** A set of nav items that will render as a list in the App Shell. */\n items: NavItemProps[];\n /** The id of the active nav item. */\n currentItemId?: NavItemProps['id'];\n}\n\nexport interface AppShellProps extends NoChildrenProp {\n /** The content of the application. */\n main: ReactNode;\n /** Props related to the App Shell header. */\n appHeader: AppHeaderProps;\n /** Props related to the App Shell side navigation. */\n nav?: NavProps;\n}\n\nexport interface AppShellContextValue {\n navOpen: boolean;\n navState: typeof openCloseStates[keyof typeof openCloseStates];\n openNav: () => void;\n}\n\nexport interface NavItemRenderProps extends AsProp, BaseProps, NoChildrenProp {\n id: NavItemProps['id'];\n label: NavItemProps['label'];\n visual: ReactNode;\n href?: NavLinkProps['href'];\n onClick?: NavLinkProps['onClick'];\n items?: NestedNavItemProps['items'];\n currentItemId?: NavItemProps['id'];\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default } from './AppShell';
|
|
2
2
|
export { AppShellProps, NavProps, NavItemProps, NestedNavItemProps } from './AppShell.types';
|
|
3
|
-
export { AppHeaderProps
|
|
3
|
+
export { AppHeaderProps } from './Header/AppHeader.types';
|
|
4
4
|
export { BranchButtonProps } from './Header/BranchButton';
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC7F,OAAO,EAAE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC7F,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { AppShellProps, NavProps, NavItemProps, NestedNavItemProps } from './AppShell.types';\nexport { AppHeaderProps
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { AppShellProps, NavProps, NavItemProps, NestedNavItemProps } from './AppShell.types';\nexport { AppHeaderProps } from './Header/AppHeader.types';\nexport { BranchButtonProps } from './Header/BranchButton';\n"]}
|
package/lib/index.d.ts
CHANGED
|
@@ -14,8 +14,6 @@ export * from './components/ObjectPreview';
|
|
|
14
14
|
export { default as ObjectSelect } from './components/ObjectSelect';
|
|
15
15
|
export * from './components/ObjectSelect';
|
|
16
16
|
export * from './components/PageTemplates';
|
|
17
|
-
export { default as SiteHeader } from './components/SiteHeader';
|
|
18
|
-
export * from './components/SiteHeader';
|
|
19
17
|
export { default as SummaryCard } from './components/SummaryCard';
|
|
20
18
|
export * from './components/SummaryCard';
|
|
21
19
|
export { default as Workbench } from './components/Workbench';
|
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,SAAS,CAAC"}
|
package/lib/index.js
CHANGED
|
@@ -15,8 +15,6 @@ export * from './components/ObjectPreview';
|
|
|
15
15
|
export { default as ObjectSelect } from './components/ObjectSelect';
|
|
16
16
|
export * from './components/ObjectSelect';
|
|
17
17
|
export * from './components/PageTemplates';
|
|
18
|
-
export { default as SiteHeader } from './components/SiteHeader';
|
|
19
|
-
export * from './components/SiteHeader';
|
|
20
18
|
export { default as SummaryCard } from './components/SummaryCard';
|
|
21
19
|
export * from './components/SummaryCard';
|
|
22
20
|
export { default as Workbench } from './components/Workbench';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,SAAS,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as DynamicContentEditor } from './components/DynamicContentEditor';\nexport * from './components/DynamicContentEditor';\nexport { default as ExpressionBuilder } from './components/ExpressionBuilder';\nexport * from './components/ExpressionBuilder';\nexport { default as FlowModeller } from './components/FlowModeller';\nexport * from './components/FlowModeller';\nexport * from './components/ItemLibrary';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport * from './components/MobileBuildSummary';\nexport * from './components/ObjectPreview';\nexport { default as ObjectSelect } from './components/ObjectSelect';\nexport * from './components/ObjectSelect';\nexport * from './components/PageTemplates';\nexport { default as SummaryCard } from './components/SummaryCard';\nexport * from './components/SummaryCard';\nexport { default as Workbench } from './components/Workbench';\nexport * from './utils';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-build",
|
|
3
|
-
"version": "4.0.0-dev.8.
|
|
3
|
+
"version": "4.0.0-dev.8.3",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "4.0.0-dev.8.
|
|
24
|
-
"@pega/cosmos-react-dnd": "4.0.0-dev.8.
|
|
23
|
+
"@pega/cosmos-react-core": "4.0.0-dev.8.3",
|
|
24
|
+
"@pega/cosmos-react-dnd": "4.0.0-dev.8.3",
|
|
25
25
|
"@types/codemirror": "^5.60.5",
|
|
26
26
|
"@types/dagre": "^0.7.46",
|
|
27
27
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent } from 'react';
|
|
2
|
-
import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
|
-
import { AppHeaderProps, AppShellProps, UtilsProps } from '../AppShell';
|
|
4
|
-
export interface SiteHeaderProps extends BaseProps, NoChildrenProp {
|
|
5
|
-
/** The content of the application. */
|
|
6
|
-
main: AppShellProps['main'];
|
|
7
|
-
/** Props related to the brand logo and its interactions. */
|
|
8
|
-
brand: AppHeaderProps['brand'];
|
|
9
|
-
/** Props to render the user avatar. */
|
|
10
|
-
avatar: UtilsProps['avatar'];
|
|
11
|
-
/** Props to render the search input. */
|
|
12
|
-
search?: UtilsProps['search'];
|
|
13
|
-
}
|
|
14
|
-
declare const SiteHeader: FunctionComponent<SiteHeaderProps>;
|
|
15
|
-
export default SiteHeader;
|
|
16
|
-
//# sourceMappingURL=SiteHeader.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SiteHeader.d.ts","sourceRoot":"","sources":["../../../src/components/SiteHeader/SiteHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,SAAS,EACT,cAAc,EAQf,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAaxE,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE,sCAAsC;IACtC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,4DAA4D;IAC5D,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,uCAAuC;IACvC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7B,wCAAwC;IACxC,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B;AAkED,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAoElD,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
|
|
3
|
-
import { Flex, useBreakpoint, useI18n, Button, Icon, SearchInput, registerIcon } from '@pega/cosmos-react-core';
|
|
4
|
-
import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
|
|
5
|
-
import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
|
|
6
|
-
import * as searchIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/search.icon';
|
|
7
|
-
import { StyledSiteHeader, StyledBrandButton, StyledBrandImage, StyledAvatar, StyledSiteHeaderSearch, StyledMain } from './SiteHeader.styles';
|
|
8
|
-
registerIcon(timesIcon, searchIcon);
|
|
9
|
-
const AppHeaderSearch = ({ showSearchButton, setShowSearchButton, ...restProps }) => {
|
|
10
|
-
const isMediumOrAbove = useBreakpoint('md');
|
|
11
|
-
const t = useI18n();
|
|
12
|
-
const searchInputRef = useCallback(node => {
|
|
13
|
-
if (!showSearchButton && node) {
|
|
14
|
-
node.focus();
|
|
15
|
-
}
|
|
16
|
-
}, [showSearchButton]);
|
|
17
|
-
const focusSearchBtn = useRef(false);
|
|
18
|
-
const searchButtonRef = useCallback(node => {
|
|
19
|
-
if (node && focusSearchBtn.current) {
|
|
20
|
-
node.focus();
|
|
21
|
-
}
|
|
22
|
-
}, []);
|
|
23
|
-
return isMediumOrAbove || !showSearchButton ? (_jsxs(Flex, { as: StyledSiteHeaderSearch, item: { shrink: 0, grow: 1 }, md: { item: { grow: 0, shrink: 1 } }, container: { justify: 'between', alignItems: 'center', gap: 1 }, children: [_jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": t('sitewide'), onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...restProps, ref: searchInputRef }) }), _jsx(Button, { variant: 'simple', icon: true, onClick: () => {
|
|
24
|
-
setShowSearchButton(true);
|
|
25
|
-
focusSearchBtn.current = true;
|
|
26
|
-
}, 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' }) }));
|
|
27
|
-
};
|
|
28
|
-
const SiteHeader = ({ main, brand, avatar, search }) => {
|
|
29
|
-
const isMediumOrAbove = useBreakpoint('md');
|
|
30
|
-
const [showSearchButton, setShowSearchButton] = useState(true);
|
|
31
|
-
useEffect(() => {
|
|
32
|
-
if (isMediumOrAbove && !showSearchButton) {
|
|
33
|
-
setShowSearchButton(true);
|
|
34
|
-
}
|
|
35
|
-
}, [isMediumOrAbove]);
|
|
36
|
-
const brandContent = useMemo(() => brand.onClick || brand.href ? (_jsx(StyledBrandButton, { variant: 'simple', "aria-label": brand.label, onClick: brand.onClick, href: brand.href, children: _jsx(StyledBrandImage, { src: brand.logo, alt: brand.label }) })) : (_jsx("div", { children: _jsx(StyledBrandImage, { src: brand.logo, alt: brand.label }) })), [brand]);
|
|
37
|
-
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledSiteHeader, container: {
|
|
38
|
-
justify: 'between',
|
|
39
|
-
alignItems: 'center',
|
|
40
|
-
gap: 2,
|
|
41
|
-
pad: [0, 1]
|
|
42
|
-
}, children: [isMediumOrAbove && brandContent, showSearchButton && !isMediumOrAbove && brandContent, _jsxs(Flex, { container: {
|
|
43
|
-
gap: 1,
|
|
44
|
-
justify: 'center',
|
|
45
|
-
alignItems: 'center'
|
|
46
|
-
}, item: { grow: showSearchButton ? 0 : 1 }, md: { item: { grow: showSearchButton ? 1 : 0 } }, children: [search && (_jsx(AppHeaderSearch, { ...search, showSearchButton: showSearchButton, setShowSearchButton: setShowSearchButton })), showSearchButton && !isMediumOrAbove && _jsx(StyledAvatar, { ...avatar })] }), isMediumOrAbove && _jsx(StyledAvatar, { ...avatar })] }), _jsx(StyledMain, { children: main })] }));
|
|
47
|
-
};
|
|
48
|
-
export default SiteHeader;
|
|
49
|
-
//# sourceMappingURL=SiteHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SiteHeader.js","sourceRoot":"","sources":["../../../src/components/SiteHeader/SiteHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n useEffect,\n useState,\n Dispatch,\n FC,\n SetStateAction,\n useCallback,\n useRef,\n useMemo\n} from 'react';\n\nimport {\n SearchInputProps,\n BaseProps,\n NoChildrenProp,\n Flex,\n useBreakpoint,\n useI18n,\n Button,\n Icon,\n SearchInput,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as searchIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/search.icon';\n\nimport { AppHeaderProps, AppShellProps, UtilsProps } from '../AppShell';\n\nimport {\n StyledSiteHeader,\n StyledBrandButton,\n StyledBrandImage,\n StyledAvatar,\n StyledSiteHeaderSearch,\n StyledMain\n} from './SiteHeader.styles';\n\nregisterIcon(timesIcon, searchIcon);\n\nexport interface SiteHeaderProps extends BaseProps, NoChildrenProp {\n /** The content of the application. */\n main: AppShellProps['main'];\n /** Props related to the brand logo and its interactions. */\n brand: AppHeaderProps['brand'];\n /** Props to render the user avatar. */\n avatar: UtilsProps['avatar'];\n /** Props to render the search input. */\n search?: UtilsProps['search'];\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={StyledSiteHeaderSearch}\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 SiteHeader: FunctionComponent<SiteHeaderProps> = ({ main, brand, avatar, search }) => {\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 const brandContent = useMemo(\n () =>\n brand.onClick || brand.href ? (\n <StyledBrandButton\n variant='simple'\n aria-label={brand.label}\n onClick={brand.onClick}\n href={brand.href}\n >\n <StyledBrandImage src={brand.logo} alt={brand.label} />\n </StyledBrandButton>\n ) : (\n <div>\n <StyledBrandImage src={brand.logo} alt={brand.label} />\n </div>\n ),\n [brand]\n );\n\n return (\n <>\n <Flex\n as={StyledSiteHeader}\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 2,\n pad: [0, 1]\n }}\n >\n {isMediumOrAbove && brandContent}\n {showSearchButton && !isMediumOrAbove && brandContent}\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 {search && (\n <AppHeaderSearch\n {...search}\n showSearchButton={showSearchButton}\n setShowSearchButton={setShowSearchButton}\n />\n )}\n {showSearchButton && !isMediumOrAbove && <StyledAvatar {...avatar} />}\n </Flex>\n\n {isMediumOrAbove && <StyledAvatar {...avatar} />}\n </Flex>\n\n <StyledMain>{main}</StyledMain>\n </>\n );\n};\n\nexport default SiteHeader;\n"]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Avatar } from '@pega/cosmos-react-core';
|
|
3
|
-
export declare const StyledSiteHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
-
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>;
|
|
5
|
-
export declare const StyledBrandImage: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ImageProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
-
export declare const StyledSiteHeaderSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
|
-
export declare const StyledAvatar: typeof Avatar;
|
|
8
|
-
export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {}, never>;
|
|
9
|
-
//# sourceMappingURL=SiteHeader.styles.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SiteHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SiteHeader/SiteHeader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAyC,MAAM,yBAAyB,CAAC;AAIxF,eAAO,MAAM,gBAAgB,4GAe5B,CAAC;AAIF,eAAO,MAAM,iBAAiB,0QAS5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,oOAG5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGA2BlC,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,OAAO,MAGjC,CAAC;AAEF,eAAO,MAAM,UAAU,0GAYtB,CAAC"}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import styled, { css } from 'styled-components';
|
|
2
|
-
import { Avatar, defaultThemeProp, Image, StyledButton } from '@pega/cosmos-react-core';
|
|
3
|
-
import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
|
|
4
|
-
import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
|
|
5
|
-
export const StyledSiteHeader = styled.header(({ theme: { base: { palette, 'z-index': zIndex } } }) => {
|
|
6
|
-
return css `
|
|
7
|
-
height: 3rem;
|
|
8
|
-
border-bottom: 0.0625rem solid ${palette['border-line']};
|
|
9
|
-
background-color: ${palette['primary-background']};
|
|
10
|
-
position: sticky;
|
|
11
|
-
top: 0;
|
|
12
|
-
z-index: calc(${zIndex.drawer + 1});
|
|
13
|
-
`;
|
|
14
|
-
});
|
|
15
|
-
StyledSiteHeader.defaultProps = defaultThemeProp;
|
|
16
|
-
export const StyledBrandButton = styled(BareButton)(({ theme }) => {
|
|
17
|
-
return css `
|
|
18
|
-
text-decoration: none;
|
|
19
|
-
min-width: 0;
|
|
20
|
-
|
|
21
|
-
&:not([disabled]):focus {
|
|
22
|
-
box-shadow: ${theme.base.shadow.focus};
|
|
23
|
-
}
|
|
24
|
-
`;
|
|
25
|
-
});
|
|
26
|
-
StyledBrandButton.defaultProps = defaultThemeProp;
|
|
27
|
-
export const StyledBrandImage = styled(Image) `
|
|
28
|
-
height: 1.5rem;
|
|
29
|
-
max-width: 17ch;
|
|
30
|
-
`;
|
|
31
|
-
export const StyledSiteHeaderSearch = styled.div(({ theme: { base: { spacing, breakpoints, 'content-width': contentWidth } } }) => {
|
|
32
|
-
return css `
|
|
33
|
-
padding-block: ${spacing};
|
|
34
|
-
width: 100%;
|
|
35
|
-
|
|
36
|
-
${StyledAppHeaderSearchForm} {
|
|
37
|
-
margin-inline-start: 0;
|
|
38
|
-
max-width: 100%;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@media (min-width: ${breakpoints.md}) {
|
|
42
|
-
${StyledAppHeaderSearchForm} {
|
|
43
|
-
margin-inline-start: auto;
|
|
44
|
-
max-width: ${contentWidth.lg};
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
${StyledButton} {
|
|
48
|
-
display: none;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
`;
|
|
52
|
-
});
|
|
53
|
-
StyledSiteHeaderSearch.defaultProps = defaultThemeProp;
|
|
54
|
-
export const StyledAvatar = styled(Avatar) `
|
|
55
|
-
width: 1.5rem;
|
|
56
|
-
height: 1.5rem;
|
|
57
|
-
`;
|
|
58
|
-
export const StyledMain = styled.main(({ theme: { base: { palette } } }) => {
|
|
59
|
-
return css `
|
|
60
|
-
position: relative;
|
|
61
|
-
min-height: calc(100vh - 3rem);
|
|
62
|
-
background-color: ${palette['app-background']};
|
|
63
|
-
`;
|
|
64
|
-
});
|
|
65
|
-
StyledMain.defaultProps = defaultThemeProp;
|
|
66
|
-
//# sourceMappingURL=SiteHeader.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SiteHeader.styles.js","sourceRoot":"","sources":["../../../src/components/SiteHeader/SiteHeader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACxF,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAClF,OAAO,EAAE,yBAAyB,EAAE,MAAM,kEAAkE,CAAC;AAE7G,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EACrC,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;uCAEyB,OAAO,CAAC,aAAa,CAAC;0BACnC,OAAO,CAAC,oBAAoB,CAAC;;;sBAGjC,MAAM,CAAC,MAAM,GAAG,CAAC;KAClC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA;;;;;oBAKQ,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,CAAA;;;CAG5C,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,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;;;QAGtB,yBAAyB;;;;;2BAKN,WAAW,CAAC,EAAE;UAC/B,yBAAyB;;uBAEZ,YAAY,CAAC,EAAE;;;UAG5B,YAAY;;;;KAIjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,YAAY,GAAkB,MAAM,CAAC,MAAM,CAAC,CAAA;;;CAGxD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CACnC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;0BAGY,OAAO,CAAC,gBAAgB,CAAC;KAC9C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Avatar, defaultThemeProp, Image, StyledButton } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nexport const StyledSiteHeader = styled.header(\n ({\n theme: {\n base: { palette, 'z-index': zIndex }\n }\n }) => {\n return css`\n height: 3rem;\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 `;\n }\n);\n\nStyledSiteHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n return css`\n text-decoration: none;\n min-width: 0;\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 height: 1.5rem;\n max-width: 17ch;\n`;\n\nexport const StyledSiteHeaderSearch = 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\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\nStyledSiteHeaderSearch.defaultProps = defaultThemeProp;\n\nexport const StyledAvatar: typeof Avatar = styled(Avatar)`\n width: 1.5rem;\n height: 1.5rem;\n`;\n\nexport const StyledMain = styled.main(\n ({\n theme: {\n base: { palette }\n }\n }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 3rem);\n background-color: ${palette['app-background']};\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SiteHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SiteHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './SiteHeader';\nexport type { SiteHeaderProps } from './SiteHeader';\nexport { StyledSiteHeader } from './SiteHeader.styles';\n"]}
|