@pega/cosmos-react-build 3.0.0 → 4.0.0-dev.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AppHeader/AppHeader.d.ts +3 -28
- package/lib/components/AppHeader/AppHeader.d.ts.map +1 -1
- package/lib/components/AppHeader/AppHeader.js +17 -12
- package/lib/components/AppHeader/AppHeader.js.map +1 -1
- package/lib/components/AppHeader/AppHeader.styles.d.ts +3 -1
- package/lib/components/AppHeader/AppHeader.styles.d.ts.map +1 -1
- package/lib/components/AppHeader/AppHeader.styles.js +34 -26
- package/lib/components/AppHeader/AppHeader.styles.js.map +1 -1
- package/lib/components/AppHeader/AppHeader.types.d.ts +32 -0
- package/lib/components/AppHeader/AppHeader.types.d.ts.map +1 -0
- package/lib/components/AppHeader/AppHeader.types.js +2 -0
- package/lib/components/AppHeader/AppHeader.types.js.map +1 -0
- package/lib/components/AppHeader/index.d.ts +1 -1
- package/lib/components/AppHeader/index.d.ts.map +1 -1
- package/lib/components/AppHeader/index.js.map +1 -1
- package/lib/components/AppShell/AppShell.types.d.ts +2 -2
- package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.types.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,31 +1,6 @@
|
|
|
1
|
-
import { FunctionComponent
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
export interface AppHeaderProps extends BaseProps, NoChildrenProp {
|
|
5
|
-
brand: BrandProps;
|
|
6
|
-
links?: LinkProps[];
|
|
7
|
-
utils?: UtilsProps;
|
|
8
|
-
ref?: Ref<HTMLDivElement>;
|
|
9
|
-
}
|
|
10
|
-
interface BrandProps {
|
|
11
|
-
/** The primary text to render in the header. */
|
|
12
|
-
name: string;
|
|
13
|
-
/** The name of icon to render in the header. */
|
|
14
|
-
visual: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;
|
|
15
|
-
/** URL or DOM id to navigate to. */
|
|
16
|
-
href?: string;
|
|
17
|
-
/** Click handler for the header. */
|
|
18
|
-
onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
19
|
-
}
|
|
20
|
-
interface LinkProps extends Tab {
|
|
21
|
-
onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
22
|
-
}
|
|
23
|
-
interface UtilsProps {
|
|
24
|
-
avatar: AvatarProps;
|
|
25
|
-
search?: SearchInputProps;
|
|
26
|
-
branch?: BranchButtonProps;
|
|
27
|
-
action?: Pick<Action, 'id' | 'text' | 'onClick' | 'disabled'>;
|
|
28
|
-
}
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
+
import { AppHeaderProps } from './AppHeader.types';
|
|
29
4
|
declare const AppHeader: FunctionComponent<AppHeaderProps & ForwardProps>;
|
|
30
5
|
export default AppHeader;
|
|
31
6
|
//# sourceMappingURL=AppHeader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,
|
|
1
|
+
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAcjC,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AA2E/D,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAkD/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useCallback, useEffect, useState } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import { Flex, SearchInput, Avatar, useBreakpoint, useTheme, Button, tryCatch } from '@pega/cosmos-react-core';
|
|
3
|
+
import { Flex, SearchInput, useBreakpoint, Button, Icon, useI18n, MenuButton, Image } from '@pega/cosmos-react-core';
|
|
5
4
|
import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
|
|
6
|
-
import { StyledAppHeader, StyledTabs, StyledAppAvatar, StyledUtilsContainer, StyledBrandContainer,
|
|
5
|
+
import { StyledAppHeader, StyledTabs, StyledAppAvatar, StyledUtilsContainer, StyledBrandContainer, StyledBrandButton, StyledAppHeaderSearch, StyledAppInfo } from './AppHeader.styles';
|
|
7
6
|
import BranchButton from './BranchButton';
|
|
8
|
-
const BrandContainer = ({ name, onClick, href, visual }) => {
|
|
9
|
-
const { base: { palette } } = useTheme();
|
|
10
|
-
return (_jsxs(StyledBrandContainer, { container: { alignItems: 'center', justify: 'between' }, onClick: onClick, href: href, forwardedAs: onClick || href ? StyledBrandButton : 'div', children: [_jsx(Avatar, { ...visual, shape: 'squircle', name: name, backgroundColor: visual.backgroundColor || palette['brand-primary'], color: visual.color ||
|
|
11
|
-
tryCatch(() => readableColor(visual.backgroundColor || palette['brand-primary'])) }), _jsx(StyledTitle, { children: name })] }));
|
|
12
|
-
};
|
|
13
7
|
const Links = ({ links = [] }) => {
|
|
14
8
|
const [currentTabId, setCurrentTabId] = useState(links[0].id || '');
|
|
15
9
|
useEffect(() => {
|
|
@@ -24,12 +18,23 @@ const Links = ({ links = [] }) => {
|
|
|
24
18
|
}, [links]);
|
|
25
19
|
return _jsx(StyledTabs, { tabs: links, currentTabId: currentTabId, onTabClick: handleTabClick });
|
|
26
20
|
};
|
|
27
|
-
const
|
|
21
|
+
const AppHeaderSearch = props => {
|
|
22
|
+
const isMediumOrAbove = useBreakpoint('md');
|
|
23
|
+
const t = useI18n();
|
|
24
|
+
return (_jsx(Flex, { as: StyledAppHeaderSearch, item: { basis: '40%', shrink: 1 }, children: _jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": t('sitewide'), onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...props }) }) }));
|
|
25
|
+
};
|
|
26
|
+
const Utils = ({ avatar, branch, action, appInfo }) => {
|
|
28
27
|
const isMediumOrAbove = useBreakpoint('md');
|
|
29
|
-
return (_jsxs(
|
|
28
|
+
return (_jsxs(Flex, { isMediumOrAbove: isMediumOrAbove, container: { justify: 'end', alignItems: 'center' }, item: { shrink: 0 }, as: StyledUtilsContainer, children: [appInfo && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, children: [_jsx(StyledAppInfo, { children: appInfo.name }), _jsx(StyledAppInfo, { children: appInfo.version })] })), branch && _jsx(BranchButton, { ...branch }), action && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.3 }, item: { shrink: 0 }, as: Button, variant: 'secondary', onClick: (e) => action.onClick?.(action.id, e), disabled: action.disabled, children: [action.icon && _jsx(Icon, { name: action.icon }), action.text] })), _jsx(StyledAppAvatar, { ...avatar })] }));
|
|
30
29
|
};
|
|
31
|
-
const AppHeader = forwardRef(({ brand, utils, links }, ref) => {
|
|
32
|
-
|
|
30
|
+
const AppHeader = forwardRef(({ contexts, onContextClick, brand, utils, links }, ref) => {
|
|
31
|
+
const t = useI18n();
|
|
32
|
+
const selectedContext = contexts.length > 1 ? contexts.find(ctx => ctx.selected) : contexts[0];
|
|
33
|
+
return (_jsxs(Flex, { as: StyledAppHeader, container: { justify: 'between', alignItems: 'center', gap: 2 }, ref: ref, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 2 }, item: { shrink: 0 }, children: [contexts.length > 1 && (_jsx(MenuButton, { text: t('switch_to'), variant: 'simple', icon: 'dot-9-solid', iconOnly: true, menu: {
|
|
34
|
+
mode: 'single-select',
|
|
35
|
+
items: contexts,
|
|
36
|
+
onItemClick: onContextClick
|
|
37
|
+
} })), _jsxs(StyledBrandContainer, { container: { alignItems: 'center', justify: 'between', gap: 2 }, onClick: brand.onClick, href: brand.href, forwardedAs: brand.onClick || brand.href ? StyledBrandButton : 'div', "aria-label": `${brand.label} - ${selectedContext.primary}`, children: [_jsx(Image, { src: brand.logo, alt: brand.label }), _jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 1 }, children: [selectedContext.visual, selectedContext.primary] })] }), links && links.length > 0 && _jsx(Links, { links: links })] }), utils?.search && _jsx(AppHeaderSearch, { ...utils.search }), utils && _jsx(Utils, { ...utils })] }));
|
|
33
38
|
});
|
|
34
39
|
export default AppHeader;
|
|
35
40
|
//# sourceMappingURL=AppHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,
|
|
1
|
+
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/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} from 'react';\n\nimport {\n Flex,\n SearchInput,\n ForwardProps,\n SearchInputProps,\n useBreakpoint,\n Button,\n Icon,\n useI18n,\n MenuButton,\n Image\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 StyledBrandButton,\n StyledAppHeaderSearch,\n StyledAppInfo\n} from './AppHeader.styles';\nimport BranchButton from './BranchButton';\nimport { AppHeaderProps, UtilsProps } from './AppHeader.types';\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ links = [] }) => {\n const [currentTabId, setCurrentTabId] = useState(links[0].id || '');\n\n useEffect(() => {\n setCurrentTabId(links[0].id || '');\n }, [links]);\n\n const handleTabClick = useCallback(\n (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const newActiveTab = links.find(item => item.id === id);\n if (newActiveTab) {\n newActiveTab.onClick?.(id, e);\n setCurrentTabId(newActiveTab.id);\n }\n },\n [links]\n );\n\n return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst AppHeaderSearch: FC<SearchInputProps> = props => {\n const isMediumOrAbove = useBreakpoint('md');\n const t = useI18n();\n\n return (\n <Flex as={StyledAppHeaderSearch} item={{ basis: '40%', shrink: 1 }}>\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={t('sitewide')}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...props} />\n </StyledAppHeaderSearchForm>\n </Flex>\n );\n};\n\nconst Utils: FC<UtilsProps> = ({ avatar, branch, action, appInfo }) => {\n const isMediumOrAbove = useBreakpoint('md');\n return (\n <Flex\n isMediumOrAbove={isMediumOrAbove}\n container={{ justify: 'end', alignItems: 'center' }}\n item={{ shrink: 0 }}\n as={StyledUtilsContainer}\n >\n {appInfo && (\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}>\n <StyledAppInfo>{appInfo.name}</StyledAppInfo>\n <StyledAppInfo>{appInfo.version}</StyledAppInfo>\n </Flex>\n )}\n {branch && <BranchButton {...branch} />}\n {action && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.3 }}\n item={{ shrink: 0 }}\n as={Button}\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n disabled={action.disabled}\n >\n {action.icon && <Icon name={action.icon} />}\n {action.text}\n </Flex>\n )}\n <StyledAppAvatar {...avatar} />\n </Flex>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n (\n { contexts, onContextClick, brand, utils, links }: PropsWithoutRef<AppHeaderProps>,\n ref: AppHeaderProps['ref']\n ) => {\n const t = useI18n();\n\n const selectedContext = contexts.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n return (\n <Flex\n as={StyledAppHeader}\n container={{ justify: 'between', alignItems: 'center', gap: 2 }}\n ref={ref}\n >\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }} item={{ shrink: 0 }}>\n {contexts.length > 1 && (\n <MenuButton\n text={t('switch_to')}\n variant='simple'\n icon='dot-9-solid'\n iconOnly\n menu={{\n mode: 'single-select',\n items: contexts,\n onItemClick: onContextClick\n }}\n />\n )}\n <StyledBrandContainer\n container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n onClick={brand.onClick}\n href={brand.href}\n forwardedAs={brand.onClick || brand.href ? StyledBrandButton : 'div'}\n aria-label={`${brand.label} - ${selectedContext.primary}`}\n >\n <Image src={brand.logo} alt={brand.label} />\n\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n {selectedContext.visual}\n {selectedContext.primary}\n </Flex>\n </StyledBrandContainer>\n {links && links.length > 0 && <Links links={links} />}\n </Flex>\n {utils?.search && <AppHeaderSearch {...utils.search} />}\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}
|
|
@@ -5,7 +5,9 @@ export declare const StyledTitle: typeof Text;
|
|
|
5
5
|
export declare const StyledBrandContainer: typeof Flex;
|
|
6
6
|
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
|
export declare const StyledTabs: typeof Tabs;
|
|
8
|
-
export declare const StyledUtilsContainer:
|
|
8
|
+
export declare const StyledUtilsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
9
|
+
export declare const StyledAppHeaderSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
|
+
export declare const StyledAppInfo: typeof Text;
|
|
9
11
|
export declare const StyledBranchContainer: typeof Flex;
|
|
10
12
|
export declare const StyledAppAvatar: typeof Avatar;
|
|
11
13
|
//# sourceMappingURL=AppHeader.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAoB,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIrF,eAAO,MAAM,eAAe,4GAU1B,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAoB,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIrF,eAAO,MAAM,eAAe,4GAU1B,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAUxC,CAAC;AAIH,eAAO,MAAM,iBAAiB,0QAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAqB9B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAY/B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAIjC,CAAC;AAIF,eAAO,MAAM,aAAa,EAAE,OAAO,IAKjC,CAAC;AAIH,eAAO,MAAM,qBAAqB,EAAE,OAAO,IAYzC,CAAC;AAIH,eAAO,MAAM,eAAe,EAAE,OAAO,MAGpC,CAAC"}
|
|
@@ -16,7 +16,7 @@ export const StyledAppHeader = styled.header(({ theme }) => {
|
|
|
16
16
|
StyledAppHeader.defaultProps = defaultThemeProp;
|
|
17
17
|
export const StyledTitle = styled(Text)(({ theme }) => {
|
|
18
18
|
return css `
|
|
19
|
-
max-width: ${theme.base['content-width'].
|
|
19
|
+
max-width: ${theme.base['content-width'].sm};
|
|
20
20
|
text-overflow: ellipsis;
|
|
21
21
|
overflow: hidden;
|
|
22
22
|
white-space: nowrap;
|
|
@@ -30,6 +30,11 @@ export const StyledBrandContainer = styled(Flex)(({ theme }) => {
|
|
|
30
30
|
return css `
|
|
31
31
|
padding-block: ${theme.base.spacing};
|
|
32
32
|
text-decoration: none;
|
|
33
|
+
max-height: 2.5rem;
|
|
34
|
+
|
|
35
|
+
> img {
|
|
36
|
+
min-width: ${theme.base['content-width'].xs};
|
|
37
|
+
}
|
|
33
38
|
`;
|
|
34
39
|
});
|
|
35
40
|
StyledBrandContainer.defaultProps = defaultThemeProp;
|
|
@@ -64,25 +69,33 @@ export const StyledTabs = styled(Tabs)(({ theme }) => {
|
|
|
64
69
|
`;
|
|
65
70
|
});
|
|
66
71
|
StyledTabs.defaultProps = defaultThemeProp;
|
|
67
|
-
export const StyledUtilsContainer = styled(
|
|
72
|
+
export const StyledUtilsContainer = styled.div(({ theme }) => {
|
|
68
73
|
return css `
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
${StyledAppHeaderSearchForm} {
|
|
81
|
-
margin-inline-end: ${theme.base.spacing};
|
|
82
|
-
}
|
|
83
|
-
`;
|
|
74
|
+
padding-block: ${theme.base.spacing};
|
|
75
|
+
& > div,
|
|
76
|
+
& > span,
|
|
77
|
+
& > button {
|
|
78
|
+
margin-inline-start: ${theme.base.spacing};
|
|
79
|
+
}
|
|
80
|
+
& > div:last-child {
|
|
81
|
+
margin-inline: calc(2 * ${theme.base.spacing}) 0;
|
|
82
|
+
}
|
|
83
|
+
`;
|
|
84
84
|
});
|
|
85
85
|
StyledUtilsContainer.defaultProps = defaultThemeProp;
|
|
86
|
+
export const StyledAppHeaderSearch = styled.div `
|
|
87
|
+
${StyledAppHeaderSearchForm} {
|
|
88
|
+
max-width: 100%;
|
|
89
|
+
}
|
|
90
|
+
`;
|
|
91
|
+
StyledAppHeaderSearch.defaultProps = defaultThemeProp;
|
|
92
|
+
export const StyledAppInfo = styled(StyledTitle)(({ theme }) => {
|
|
93
|
+
return css `
|
|
94
|
+
font-weight: ${theme.base['font-weight']['semi-bold']};
|
|
95
|
+
margin-inline-start: 0;
|
|
96
|
+
`;
|
|
97
|
+
});
|
|
98
|
+
StyledAppInfo.defaultProps = defaultThemeProp;
|
|
86
99
|
export const StyledBranchContainer = styled(Flex)(({ theme }) => {
|
|
87
100
|
return css `
|
|
88
101
|
span {
|
|
@@ -97,14 +110,9 @@ export const StyledBranchContainer = styled(Flex)(({ theme }) => {
|
|
|
97
110
|
`;
|
|
98
111
|
});
|
|
99
112
|
StyledBranchContainer.defaultProps = defaultThemeProp;
|
|
100
|
-
export const StyledAppAvatar = styled(Avatar)
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
&& {
|
|
105
|
-
margin-inline-start: calc(2 * ${theme.base.spacing});
|
|
106
|
-
}
|
|
107
|
-
`;
|
|
108
|
-
});
|
|
113
|
+
export const StyledAppAvatar = styled(Avatar) `
|
|
114
|
+
width: 1.5rem;
|
|
115
|
+
height: 1.5rem;
|
|
116
|
+
`;
|
|
109
117
|
StyledAppAvatar.defaultProps = defaultThemeProp;
|
|
110
118
|
//# sourceMappingURL=AppHeader.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/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,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAClF,OAAO,EAAE,yBAAyB,EAAE,MAAM,kEAAkE,CAAC;AAE7G,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;;0BAEc,KAAK,CAAC,IAAI,CAAC,OAAO;qCACP,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;wBACzC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;oBAG5C,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC;GACjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,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,IAAI;uCACV,KAAK,CAAC,IAAI,CAAC,OAAO;GACtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,oBAAoB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1E,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,OAAO;;
|
|
1
|
+
{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Avatar, defaultThemeProp, Flex, Text, Tabs } 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 StyledAppHeader = styled.header(({ theme }) => {\n return css`\n height: 3rem;\n padding: 0 calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};\n background-color: ${theme.base.palette['primary-background']};\n position: sticky;\n top: 0;\n z-index: calc(${theme.base['z-index'].drawer + 1});\n `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: 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'].bold};\n margin-inline-start: calc(0.75 * ${theme.base.spacing});\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n text-decoration: none;\n max-height: 2.5rem;\n\n > img {\n min-width: ${theme.base['content-width'].xs};\n }\n `;\n});\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(({ theme }) => {\n return css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n margin-inline-end: calc(2 * ${theme.base.spacing});\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: ${theme.base['font-weight']['semi-bold']};\n }\n [role='tab']:hover,\n [role='tab']:focus,\n [role='tab']:active {\n box-shadow: none;\n }\n `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer = styled.div(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n & > div,\n & > span,\n & > button {\n margin-inline-start: ${theme.base.spacing};\n }\n & > div:last-child {\n margin-inline: calc(2 * ${theme.base.spacing}) 0;\n }\n `;\n});\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearch = styled.div`\n ${StyledAppHeaderSearchForm} {\n max-width: 100%;\n }\n`;\n\nStyledAppHeaderSearch.defaultProps = defaultThemeProp;\n\nexport const StyledAppInfo: typeof Text = styled(StyledTitle)(({ theme }) => {\n return css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: 0;\n `;\n});\n\nStyledAppInfo.defaultProps = defaultThemeProp;\n\nexport const StyledBranchContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n span {\n white-space: nowrap;\n max-width: 25ch;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n margin-inline-end: calc(0.75 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledBranchContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAppAvatar: typeof Avatar = styled(Avatar)`\n width: 1.5rem;\n height: 1.5rem;\n`;\n\nStyledAppAvatar.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { Ref, MouseEvent } from 'react';
|
|
2
|
+
import { Action, MenuItemProps, BaseProps, NoChildrenProp, MenuProps, Tab, AvatarProps, SearchInputProps } from '@pega/cosmos-react-core';
|
|
3
|
+
import { BranchButtonProps } from './BranchButton';
|
|
4
|
+
export interface ContextItem extends Pick<MenuItemProps, 'id' | 'primary' | 'visual' | 'href' | 'selected'> {
|
|
5
|
+
}
|
|
6
|
+
export interface AppHeaderProps extends BaseProps, NoChildrenProp {
|
|
7
|
+
contexts: ContextItem[];
|
|
8
|
+
onContextClick?: MenuProps['onItemClick'];
|
|
9
|
+
brand: {
|
|
10
|
+
label: string;
|
|
11
|
+
logo: string;
|
|
12
|
+
href?: string;
|
|
13
|
+
onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
14
|
+
};
|
|
15
|
+
links?: LinkProps[];
|
|
16
|
+
utils?: UtilsProps;
|
|
17
|
+
ref?: Ref<HTMLDivElement>;
|
|
18
|
+
}
|
|
19
|
+
export interface LinkProps extends Tab {
|
|
20
|
+
onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
21
|
+
}
|
|
22
|
+
export interface UtilsProps {
|
|
23
|
+
avatar: AvatarProps;
|
|
24
|
+
search?: SearchInputProps;
|
|
25
|
+
branch?: BranchButtonProps;
|
|
26
|
+
action?: Pick<Action, 'id' | 'text' | 'onClick' | 'disabled' | 'icon'>;
|
|
27
|
+
appInfo?: {
|
|
28
|
+
name: string;
|
|
29
|
+
version: string;
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=AppHeader.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AppHeader.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EACL,MAAM,EACN,aAAa,EACb,SAAS,EACT,cAAc,EACd,SAAS,EACT,GAAG,EACH,WAAW,EACX,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;CAAG;AAEnF,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IAC1C,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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AppHeader.types.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref, MouseEvent } from 'react';\n\nimport {\n Action,\n MenuItemProps,\n BaseProps,\n NoChildrenProp,\n MenuProps,\n Tab,\n AvatarProps,\n SearchInputProps\n} from '@pega/cosmos-react-core';\n\nimport { BranchButtonProps } from './BranchButton';\n\nexport interface ContextItem\n extends Pick<MenuItemProps, 'id' | 'primary' | 'visual' | 'href' | 'selected'> {}\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n contexts: ContextItem[];\n onContextClick?: MenuProps['onItemClick'];\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,4 +1,4 @@
|
|
|
1
1
|
export { default } from './AppHeader';
|
|
2
2
|
export { default as BranchButton, BranchButtonProps } from './BranchButton';
|
|
3
|
-
export { AppHeaderProps
|
|
3
|
+
export { AppHeaderProps } from './AppHeader.types';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAqB,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './AppHeader';\nexport { default as BranchButton, BranchButtonProps } from './BranchButton';\nexport { AppHeaderProps
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAqB,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './AppHeader';\nexport { default as BranchButton, BranchButtonProps } from './BranchButton';\nexport { AppHeaderProps } from './AppHeader.types';\n"]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { Dispatch, ReactNode, Ref, SetStateAction } from 'react';
|
|
2
2
|
import { StandardTreeProps, DrawerProps, NoChildrenProp, AvatarProps, OmitStrict } from '@pega/cosmos-react-core';
|
|
3
3
|
import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
|
|
4
|
-
import {
|
|
4
|
+
import { AppHeaderProps } from '../AppHeader';
|
|
5
5
|
export interface AppShellProps extends NoChildrenProp {
|
|
6
6
|
main: ReactNode;
|
|
7
7
|
appInfo: AppInfoProps;
|
|
8
|
-
appHeader:
|
|
8
|
+
appHeader: AppHeaderProps;
|
|
9
9
|
navigation: StandardTreeProps;
|
|
10
10
|
hideNav?: boolean;
|
|
11
11
|
utils?: UtilsProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,cAAc,CAAC;IAC1B,UAAU,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;IACvE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACjD,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC;IAC9D,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,QAAQ,EAAE,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;CAC1E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Dispatch, ReactNode, Ref, SetStateAction } from 'react';\n\nimport {\n StandardTreeProps,\n DrawerProps,\n NoChildrenProp,\n AvatarProps,\n OmitStrict\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport {
|
|
1
|
+
{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Dispatch, ReactNode, Ref, SetStateAction } from 'react';\n\nimport {\n StandardTreeProps,\n DrawerProps,\n NoChildrenProp,\n AvatarProps,\n OmitStrict\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppHeaderProps } from '../AppHeader';\n\nexport interface AppShellProps extends NoChildrenProp {\n main: ReactNode;\n appInfo: AppInfoProps;\n appHeader: AppHeaderProps;\n navigation: StandardTreeProps;\n hideNav?: boolean;\n utils?: UtilsProps;\n ref?: Ref<HTMLElement>;\n}\n\nexport interface UtilsProps {\n items: UtilItem[];\n currentItemId?: UtilItem['id'];\n onItemClick: (id: UtilItem['id']) => void;\n drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;\n devMode?: boolean;\n}\n\nexport interface UtilItem {\n id: string;\n label: string;\n}\n\nexport interface AppInfoProps {\n text: string;\n visual?: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;\n meta?: string[];\n}\n\nexport interface AppShellContextValue {\n drawerOpen: boolean;\n setDrawerOpen: Dispatch<SetStateAction<boolean>>;\n setDrawerData: Dispatch<SetStateAction<UtilItem | undefined>>;\n drawerData?: {\n label: string;\n id: string;\n };\n navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-build",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0-dev.1.1",
|
|
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": "
|
|
24
|
-
"@pega/cosmos-react-dnd": "
|
|
23
|
+
"@pega/cosmos-react-core": "4.0.0-dev.1.1",
|
|
24
|
+
"@pega/cosmos-react-dnd": "4.0.0-dev.1.1",
|
|
25
25
|
"@types/codemirror": "^5.60.5",
|
|
26
26
|
"@types/dagre": "^0.7.46",
|
|
27
27
|
"@types/react": "^16.14.24 || ^17.0.38",
|