@pega/cosmos-react-build 2.0.0-dev.16.3 → 2.0.0-dev.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AppHeader/AppHeader.js +3 -3
- package/lib/components/AppHeader/AppHeader.js.map +1 -1
- package/lib/components/AppShell/AppShell.js +10 -10
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.styles.js +0 -1
- package/lib/components/AppShell/AppShell.styles.js.map +1 -1
- package/lib/components/FlowModeller/Connector.js +1 -1
- package/lib/components/FlowModeller/Connector.js.map +1 -1
- package/lib/components/FlowModeller/FlowModeller.js +3 -3
- package/lib/components/FlowModeller/FlowModeller.js.map +1 -1
- package/lib/components/FlowModeller/Node/NodeTemplates.js +4 -4
- package/lib/components/FlowModeller/Node/NodeTemplates.js.map +1 -1
- package/lib/components/LifeCycle/Category.js +5 -5
- package/lib/components/LifeCycle/Category.js.map +1 -1
- package/lib/components/LifeCycle/LifeCycle.js +5 -5
- package/lib/components/LifeCycle/LifeCycle.js.map +1 -1
- package/lib/components/LifeCycle/LifeCycleList.js +2 -2
- package/lib/components/LifeCycle/LifeCycleList.js.map +1 -1
- package/lib/components/LifeCycle/Stage.js +1 -1
- package/lib/components/LifeCycle/Stage.js.map +1 -1
- package/lib/components/LifeCycle/Step.js +1 -1
- package/lib/components/LifeCycle/Step.js.map +1 -1
- package/lib/components/LifeCycle/Task.js +4 -4
- package/lib/components/LifeCycle/Task.js.map +1 -1
- package/lib/components/PageTemplates/GalleryPage.d.ts +23 -0
- package/lib/components/PageTemplates/GalleryPage.d.ts.map +1 -0
- package/lib/components/PageTemplates/GalleryPage.js +23 -0
- package/lib/components/PageTemplates/GalleryPage.js.map +1 -0
- package/lib/components/PageTemplates/GalleryPage.styles.d.ts +9 -0
- package/lib/components/PageTemplates/GalleryPage.styles.d.ts.map +1 -0
- package/lib/components/PageTemplates/GalleryPage.styles.js +70 -0
- package/lib/components/PageTemplates/GalleryPage.styles.js.map +1 -0
- package/lib/components/PageTemplates/PageTemplates.d.ts +10 -3
- package/lib/components/PageTemplates/PageTemplates.d.ts.map +1 -1
- package/lib/components/PageTemplates/PageTemplates.js +48 -8
- package/lib/components/PageTemplates/PageTemplates.js.map +1 -1
- package/lib/components/PageTemplates/index.d.ts +2 -0
- package/lib/components/PageTemplates/index.d.ts.map +1 -1
- package/lib/components/PageTemplates/index.js +1 -0
- package/lib/components/PageTemplates/index.js.map +1 -1
- package/lib/components/SummaryCard/SummaryCard.d.ts +16 -0
- package/lib/components/SummaryCard/SummaryCard.d.ts.map +1 -0
- package/lib/components/SummaryCard/SummaryCard.js +30 -0
- package/lib/components/SummaryCard/SummaryCard.js.map +1 -0
- package/lib/components/SummaryCard/index.d.ts +3 -0
- package/lib/components/SummaryCard/index.d.ts.map +1 -0
- package/lib/components/SummaryCard/index.js +3 -0
- package/lib/components/SummaryCard/index.js.map +1 -0
- package/lib/components/Visual/Visual.d.ts +17 -0
- package/lib/components/Visual/Visual.d.ts.map +1 -0
- package/lib/components/Visual/Visual.js +28 -0
- package/lib/components/Visual/Visual.js.map +1 -0
- package/lib/components/Visual/index.d.ts +3 -0
- package/lib/components/Visual/index.d.ts.map +1 -0
- package/lib/components/Visual/index.js +3 -0
- package/lib/components/Visual/index.js.map +1 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +2 -0
- package/lib/index.js.map +1 -1
- package/package.json +4 -5
|
@@ -4,7 +4,7 @@ import { Flex, Icon, MenuButton, Text, useI18n, useBreakpoint, SearchInput } fro
|
|
|
4
4
|
import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
|
|
5
5
|
import { StyledAppHeader, StyledTabs, StyledAppAvatar, StyledUtilsContainer, StyledBrandContainer, StyledBranchContainer, StyledPreviewButton, StyledTitle, StyledBrandButton, StyledIconContainer } from './AppHeader.styles';
|
|
6
6
|
const BrandContainer = ({ name, onClick, href }) => {
|
|
7
|
-
return (_jsxs(StyledBrandContainer,
|
|
7
|
+
return (_jsxs(StyledBrandContainer, { container: { alignItems: 'center', justify: 'between' }, onClick: onClick, href: href, forwardedAs: onClick || href ? StyledBrandButton : 'div', children: [_jsx(StyledIconContainer, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: 'pegasus' }, void 0) }, void 0), _jsx(StyledTitle, { children: name }, void 0)] }, void 0));
|
|
8
8
|
};
|
|
9
9
|
const Links = ({ links = [] }) => {
|
|
10
10
|
const [currentTabId, setCurrentTabId] = useState(links[0].id || '');
|
|
@@ -23,10 +23,10 @@ const Links = ({ links = [] }) => {
|
|
|
23
23
|
const Utils = ({ avatar, search, branchName, actions, onPreviewClick }) => {
|
|
24
24
|
const t = useI18n();
|
|
25
25
|
const isMediumOrAbove = useBreakpoint('md');
|
|
26
|
-
return (_jsxs(StyledUtilsContainer,
|
|
26
|
+
return (_jsxs(StyledUtilsContainer, { isMediumOrAbove: isMediumOrAbove, container: { alignItems: 'center', justify: 'end' }, children: [search && (_jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": search.searchInputAriaLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...search }, void 0) }, void 0)), branchName && (_jsxs(StyledBranchContainer, { container: { alignItems: 'center', justify: 'between' }, children: [_jsx(Icon, { name: 'nodes-right' }, void 0), _jsx(Text, { "aria-label": branchName, children: branchName }, void 0)] }, void 0)), actions && actions.length > 0 && (_jsx(MenuButton, { variant: 'link', menu: { items: actions, scrollAt: 20 }, text: t('actions') }, void 0)), onPreviewClick && (_jsx(StyledPreviewButton, { variant: 'primary', onClick: onPreviewClick, children: t('preview') }, void 0)), _jsx(StyledAppAvatar, { ...avatar }, void 0)] }, void 0));
|
|
27
27
|
};
|
|
28
28
|
const AppHeader = forwardRef(({ brand, utils, links }, ref) => {
|
|
29
|
-
return (_jsxs(Flex,
|
|
29
|
+
return (_jsxs(Flex, { as: StyledAppHeader, container: { justify: 'between' }, ref: ref, children: [_jsx(BrandContainer, { ...brand }, void 0), links && links.length > 0 && _jsx(Links, { links: links }, void 0), utils && _jsx(Utils, { ...utils }, void 0)] }, void 0));
|
|
30
30
|
});
|
|
31
31
|
export default AppHeader;
|
|
32
32
|
//# 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,EAMV,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,IAAI,EAEJ,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,OAAO,EACP,aAAa,EAIb,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iEAAiE,CAAC;AAE5G,OAAO,EACL,eAAe,EACf,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AA6B5B,MAAM,cAAc,GAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;IACjE,OAAO,CACL,MAAC,oBAAoB,
|
|
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 Ref,\n MouseEvent,\n FC,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState\n} from 'react';\n\nimport {\n AvatarProps,\n BaseProps,\n Flex,\n ForwardProps,\n Icon,\n MenuButton,\n Text,\n useI18n,\n useBreakpoint,\n SearchInputProps,\n MenuItemProps,\n Tab,\n SearchInput,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledAppAvatar,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledBranchContainer,\n StyledPreviewButton,\n StyledTitle,\n StyledBrandButton,\n StyledIconContainer\n} from './AppHeader.styles';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n brand: BrandProps;\n links?: LinkProps[];\n utils?: UtilsProps;\n ref?: Ref<HTMLDivElement>;\n}\ninterface BrandProps {\n /** The primary text to render in the header. */\n name: string;\n /** URL or DOM id to navigate to. */\n href?: string;\n /** Click handler for the header. */\n onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface LinkProps extends Tab {\n onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\ninterface UtilsProps {\n avatar: AvatarProps;\n search?: SearchInputProps;\n branchName?: string;\n actions?: MenuItemProps['items'];\n onPreviewClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst BrandContainer: FC<BrandProps> = ({ name, onClick, href }) => {\n return (\n <StyledBrandContainer\n container={{ alignItems: 'center', justify: 'between' }}\n onClick={onClick}\n href={href}\n forwardedAs={onClick || href ? StyledBrandButton : 'div'}\n >\n <StyledIconContainer container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name='pegasus' />\n </StyledIconContainer>\n <StyledTitle>{name}</StyledTitle>\n </StyledBrandContainer>\n );\n};\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ links = [] }) => {\n const [currentTabId, setCurrentTabId] = useState(links[0].id || '');\n\n useEffect(() => {\n setCurrentTabId(links[0].id || '');\n }, [links]);\n\n const handleTabClick = useCallback(\n (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const newActiveTab = links.find(item => item.id === id);\n if (newActiveTab) {\n newActiveTab.onClick?.(id, e);\n setCurrentTabId(newActiveTab.id);\n }\n },\n [links]\n );\n\n return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst Utils: FC<UtilsProps> = ({\n avatar,\n search,\n branchName,\n actions,\n onPreviewClick\n}: UtilsProps) => {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n return (\n <StyledUtilsContainer\n isMediumOrAbove={isMediumOrAbove}\n container={{ alignItems: 'center', justify: 'end' }}\n >\n {search && (\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={search.searchInputAriaLabel}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...search} />\n </StyledAppHeaderSearchForm>\n )}\n {branchName && (\n <StyledBranchContainer container={{ alignItems: 'center', justify: 'between' }}>\n <Icon name='nodes-right' />\n <Text aria-label={branchName}>{branchName}</Text>\n </StyledBranchContainer>\n )}\n {actions && actions.length > 0 && (\n <MenuButton variant='link' menu={{ items: actions, scrollAt: 20 }} text={t('actions')} />\n )}\n {onPreviewClick && (\n <StyledPreviewButton variant='primary' onClick={onPreviewClick}>\n {t('preview')}\n </StyledPreviewButton>\n )}\n <StyledAppAvatar {...avatar} />\n </StyledUtilsContainer>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n ({ brand, utils, links }: PropsWithoutRef<AppHeaderProps>, ref: AppHeaderProps['ref']) => {\n return (\n <Flex as={StyledAppHeader} container={{ justify: 'between' }} ref={ref}>\n <BrandContainer {...brand} />\n {links && links.length > 0 && <Links links={links} />}\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}
|
|
@@ -6,7 +6,7 @@ import AppHeader from '../AppHeader';
|
|
|
6
6
|
import { StyledHeader, StyledUtils, StyledUtilItem, StyledScrollWrap, StyledNavContent, StyledMain, StyledDrawerWrapper, StyledNavHeaderIcon, StyledDrawerHeader, StyledNavTitle, StyledNav, StyledInnerNav, StyledNavToggle, StyledDrawerCloseButton, StyledNavHeaderVisual } from './AppShell.styles';
|
|
7
7
|
import AppShellContext from './AppShellContext';
|
|
8
8
|
const NavigationHeader = ({ text, visual: { backgroundColor, icon, imageSrc } }) => {
|
|
9
|
-
return (_jsxs(Flex,
|
|
9
|
+
return (_jsxs(Flex, { container: { alignItems: 'center', pad: 2 }, as: StyledHeader, children: [(imageSrc || icon) && (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, bgColor: backgroundColor, as: StyledNavHeaderVisual, children: [imageSrc && _jsx(Image, { src: imageSrc, alt: text }, void 0), !imageSrc && icon && _jsx(StyledNavHeaderIcon, { name: icon }, void 0)] }, void 0)), _jsx(StyledNavTitle, { variant: 'h4', children: text }, void 0)] }, void 0));
|
|
10
10
|
};
|
|
11
11
|
const DrawerHeader = forwardRef(({ text, visual: { icon } }, ref) => {
|
|
12
12
|
const t = useI18n();
|
|
@@ -15,7 +15,7 @@ const DrawerHeader = forwardRef(({ text, visual: { icon } }, ref) => {
|
|
|
15
15
|
setDrawerTitle('');
|
|
16
16
|
setDrawerOpen(false);
|
|
17
17
|
};
|
|
18
|
-
return (_jsxs(Flex,
|
|
18
|
+
return (_jsxs(Flex, { container: { alignItems: 'center' }, as: StyledDrawerHeader, children: [_jsx(StyledDrawerCloseButton, { variant: 'simple', onClick: onDrawerClose, "aria-label": t('close_noun', [text]), icon: true, ref: ref, children: icon && _jsx(Icon, { name: icon }, void 0) }, void 0), _jsx(StyledNavTitle, { variant: 'h4', children: text }, void 0)] }, void 0));
|
|
19
19
|
});
|
|
20
20
|
const Utils = ({ items, onItemClick, onClose }) => {
|
|
21
21
|
const { setDrawerTitle, setDrawerOpen } = useContext(AppShellContext);
|
|
@@ -31,9 +31,9 @@ const Utils = ({ items, onItemClick, onClose }) => {
|
|
|
31
31
|
onClose();
|
|
32
32
|
}
|
|
33
33
|
}, [showDevMode]);
|
|
34
|
-
return (_jsxs(StyledUtils,
|
|
35
|
-
return (_jsx(StyledUtilItem,
|
|
36
|
-
}) }
|
|
34
|
+
return (_jsxs(StyledUtils, { showDevMode: showDevMode, children: [_jsx(Switch, { label: t('dev_mode'), onChange: () => setShowDevMode(cur => !cur), on: showDevMode }, void 0), showDevMode && (_jsx("ul", { role: 'menu', children: items.map(({ label, id }) => {
|
|
35
|
+
return (_jsx(StyledUtilItem, { role: 'menuitem', children: _jsx(BareButton, { onClick: () => handleMenu(label, id), children: label }, void 0) }, id));
|
|
36
|
+
}) }, void 0))] }, void 0));
|
|
37
37
|
};
|
|
38
38
|
const AppShell = forwardRef(({ main, appHeader, appInfo, utils, navigation, hideNav = false }, ref) => {
|
|
39
39
|
const [navExpanded, setNavExpanded] = useState(true);
|
|
@@ -45,7 +45,7 @@ const AppShell = forwardRef(({ main, appHeader, appInfo, utils, navigation, hide
|
|
|
45
45
|
const t = useI18n();
|
|
46
46
|
const [navState, setNavState] = useState('expanded');
|
|
47
47
|
const navContent = useMemo(() => {
|
|
48
|
-
return (_jsx(Flex,
|
|
48
|
+
return (_jsx(Flex, { item: { grow: 1 }, as: StyledScrollWrap, children: _jsx(StandardTree, { ...navigation }, void 0) }, void 0));
|
|
49
49
|
}, [navigation]);
|
|
50
50
|
const onNavTransitionEnd = useCallback((e) => {
|
|
51
51
|
if (e.target === navRef.current && e.propertyName === 'width') {
|
|
@@ -61,24 +61,24 @@ const AppShell = forwardRef(({ main, appHeader, appInfo, utils, navigation, hide
|
|
|
61
61
|
}
|
|
62
62
|
}, [navExpanded, navState]);
|
|
63
63
|
const toggleButtonLabel = t(navExpanded ? 'collapse_noun' : 'expand_noun', [t('navigation')]);
|
|
64
|
-
return (_jsxs(AppShellContext.Provider,
|
|
64
|
+
return (_jsxs(AppShellContext.Provider, { value: useMemo(() => ({
|
|
65
65
|
navExpanded,
|
|
66
66
|
drawerOpen,
|
|
67
67
|
setDrawerOpen,
|
|
68
68
|
drawerTitle,
|
|
69
69
|
setDrawerTitle,
|
|
70
70
|
navState
|
|
71
|
-
}), [navExpanded, drawerOpen, drawerTitle, navState])
|
|
71
|
+
}), [navExpanded, drawerOpen, drawerTitle, navState]), children: [_jsx(SkipNavigation, {}, void 0), _jsx(AppHeader, { ...appHeader }, void 0), _jsxs(Flex, { container: true, children: [!hideNav && (_jsxs(StyledNav, { ref: navRef, onTransitionEnd: onNavTransitionEnd, children: [_jsx(StyledInnerNav, { children: _jsxs(Flex, { container: { direction: 'column', justify: 'between' }, as: StyledNavContent, "aria-hidden": !navExpanded, children: [_jsx(Flex, { as: StyledDrawerWrapper, children: _jsxs(Drawer, { open: drawerOpen, nullWhenClosed: true, position: 'absolute', placement: rtl ? 'right' : 'left', onBeforeOpen: utils?.drawer?.onBeforeOpen, onAfterOpen: () => {
|
|
72
72
|
if (backButtonRef.current &&
|
|
73
73
|
document.activeElement !== backButtonRef.current) {
|
|
74
74
|
backButtonRef.current.focus();
|
|
75
75
|
}
|
|
76
76
|
utils?.drawer?.onAfterOpen?.();
|
|
77
|
-
}, onBeforeClose: utils?.drawer?.onBeforeClose, onAfterClose: utils?.drawer?.onAfterClose
|
|
77
|
+
}, onBeforeClose: utils?.drawer?.onBeforeClose, onAfterClose: utils?.drawer?.onAfterClose, children: [_jsx(DrawerHeader, { ref: backButtonRef, text: drawerTitle, visual: { icon: 'caret-left', backgroundColor: 'transparent' } }, void 0), navContent] }, void 0) }, void 0), !drawerOpen && (_jsxs(_Fragment, { children: [_jsx(NavigationHeader, { ...appInfo }, void 0), navContent] }, void 0)), utils && _jsx(Utils, { ...utils, onClose: () => setDrawerOpen(false) }, void 0)] }, void 0) }, void 0), _jsx(StyledNavToggle, { icon: true, "aria-expanded": navExpanded, label: navState === 'expanded' || navState === 'collapsed'
|
|
78
78
|
? toggleButtonLabel
|
|
79
79
|
: undefined, "aria-label": toggleButtonLabel, onClick: () => {
|
|
80
80
|
setNavExpanded(cur => !cur);
|
|
81
|
-
}
|
|
81
|
+
}, children: _jsx(Icon, { name: 'arrow-micro-right' }, void 0) }, void 0)] }, void 0)), _jsx(Flex, { item: { grow: 1 }, as: StyledMain, children: main }, void 0)] }, void 0)] }, void 0));
|
|
82
82
|
});
|
|
83
83
|
export default AppShell;
|
|
84
84
|
//# sourceMappingURL=AppShell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n PropsWithoutRef,\n Ref,\n useMemo,\n useState,\n useContext,\n useRef,\n useCallback,\n TransitionEvent,\n useLayoutEffect\n} from 'react';\n\nimport {\n Flex,\n Icon,\n Switch,\n SkipNavigation,\n Image,\n Drawer,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n StandardTree,\n useConsolidatedRef\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport AppHeader from '../AppHeader';\n\nimport {\n StyledHeader,\n StyledUtils,\n StyledUtilItem,\n StyledScrollWrap,\n StyledNavContent,\n StyledMain,\n StyledDrawerWrapper,\n StyledNavHeaderIcon,\n StyledDrawerHeader,\n StyledNavTitle,\n StyledNav,\n StyledInnerNav,\n StyledNavToggle,\n StyledDrawerCloseButton,\n StyledNavHeaderVisual\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type {\n AppShellProps,\n AppInfoProps,\n UtilsProps,\n AppShellContextValue\n} from './AppShell.types';\n\nconst NavigationHeader = ({ text, visual: { backgroundColor, icon, imageSrc } }: AppInfoProps) => {\n return (\n <Flex container={{ alignItems: 'center', pad: 2 }} as={StyledHeader}>\n {(imageSrc || icon) && (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n bgColor={backgroundColor}\n as={StyledNavHeaderVisual}\n >\n {imageSrc && <Image src={imageSrc} alt={text} />}\n {!imageSrc && icon && <StyledNavHeaderIcon name={icon} />}\n </Flex>\n )}\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n </Flex>\n );\n};\n\nconst DrawerHeader = forwardRef(\n ({ text, visual: { icon } }: PropsWithoutRef<AppInfoProps>, ref: Ref<HTMLButtonElement>) => {\n const t = useI18n();\n const { setDrawerTitle, setDrawerOpen } = useContext(AppShellContext);\n\n const onDrawerClose = () => {\n setDrawerTitle('');\n setDrawerOpen(false);\n };\n\n return (\n <Flex container={{ alignItems: 'center' }} as={StyledDrawerHeader}>\n <StyledDrawerCloseButton\n variant='simple'\n onClick={onDrawerClose}\n aria-label={t('close_noun', [text])}\n icon\n ref={ref}\n >\n {icon && <Icon name={icon} />}\n </StyledDrawerCloseButton>\n\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n </Flex>\n );\n }\n);\n\nconst Utils = ({ items, onItemClick, onClose }: UtilsProps & { onClose: () => void }) => {\n const { setDrawerTitle, setDrawerOpen } = useContext(AppShellContext);\n const [showDevMode, setShowDevMode] = useState(false);\n const t = useI18n();\n\n const handleMenu = (label: string, id: string) => {\n setDrawerTitle(label);\n setDrawerOpen(true);\n onItemClick(id);\n };\n\n useAfterInitialEffect(() => {\n if (!showDevMode) {\n onClose();\n }\n }, [showDevMode]);\n\n return (\n <StyledUtils showDevMode={showDevMode}>\n <Switch label={t('dev_mode')} onChange={() => setShowDevMode(cur => !cur)} on={showDevMode} />\n {showDevMode && (\n <ul role='menu'>\n {items.map(({ label, id }) => {\n return (\n <StyledUtilItem key={id} role='menuitem'>\n <BareButton onClick={() => handleMenu(label, id)}>{label}</BareButton>\n </StyledUtilItem>\n );\n })}\n </ul>\n )}\n </StyledUtils>\n );\n};\n\nconst AppShell = forwardRef(\n (\n {\n main,\n appHeader,\n appInfo,\n utils,\n navigation,\n hideNav = false\n }: PropsWithoutRef<AppShellProps>,\n ref: AppShellProps['ref']\n ) => {\n const [navExpanded, setNavExpanded] = useState(true);\n const [drawerOpen, setDrawerOpen] = useState(false);\n const [drawerTitle, setDrawerTitle] = useState('');\n const backButtonRef = useRef<HTMLButtonElement>(null);\n const { rtl } = useDirection();\n const navRef = useConsolidatedRef(ref);\n const t = useI18n();\n\n const [navState, setNavState] = useState<AppShellContextValue['navState']>('expanded');\n\n const navContent = useMemo(() => {\n return (\n <Flex item={{ grow: 1 }} as={StyledScrollWrap}>\n <StandardTree {...navigation} />\n </Flex>\n );\n }, [navigation]);\n\n const onNavTransitionEnd = useCallback(\n (e: TransitionEvent | TransitionEvent) => {\n if (e.target === navRef.current && e.propertyName === 'width') {\n setNavState(navExpanded ? 'expanded' : 'collapsed');\n }\n },\n [navExpanded]\n );\n\n useLayoutEffect(() => {\n if (navExpanded && navState !== 'expanded') {\n setNavState('expanding');\n }\n\n if (!navExpanded && navState !== 'collapsed') {\n setNavState('collapsing');\n }\n }, [navExpanded, navState]);\n\n const toggleButtonLabel = t(navExpanded ? 'collapse_noun' : 'expand_noun', [t('navigation')]);\n\n return (\n <AppShellContext.Provider\n value={useMemo(\n () => ({\n navExpanded,\n drawerOpen,\n setDrawerOpen,\n drawerTitle,\n setDrawerTitle,\n navState\n }),\n [navExpanded, drawerOpen, drawerTitle, navState]\n )}\n >\n <SkipNavigation />\n <AppHeader {...appHeader} />\n <Flex container>\n {!hideNav && (\n <StyledNav ref={navRef} onTransitionEnd={onNavTransitionEnd}>\n <StyledInnerNav>\n <Flex\n container={{ direction: 'column', justify: 'between' }}\n as={StyledNavContent}\n aria-hidden={!navExpanded}\n >\n <Flex as={StyledDrawerWrapper}>\n <Drawer\n open={drawerOpen}\n nullWhenClosed\n position='absolute'\n placement={rtl ? 'right' : 'left'}\n onBeforeOpen={utils?.drawer?.onBeforeOpen}\n onAfterOpen={() => {\n if (\n backButtonRef.current &&\n document.activeElement !== backButtonRef.current\n ) {\n backButtonRef.current.focus();\n }\n utils?.drawer?.onAfterOpen?.();\n }}\n onBeforeClose={utils?.drawer?.onBeforeClose}\n onAfterClose={utils?.drawer?.onAfterClose}\n >\n <DrawerHeader\n ref={backButtonRef}\n text={drawerTitle}\n visual={{ icon: 'caret-left', backgroundColor: 'transparent' }}\n />\n {navContent}\n </Drawer>\n </Flex>\n\n {!drawerOpen && (\n <>\n <NavigationHeader {...appInfo} />\n {navContent}\n </>\n )}\n\n {utils && <Utils {...utils} onClose={() => setDrawerOpen(false)} />}\n </Flex>\n </StyledInnerNav>\n\n <StyledNavToggle\n icon\n aria-expanded={navExpanded}\n label={\n navState === 'expanded' || navState === 'collapsed'\n ? toggleButtonLabel\n : undefined\n }\n aria-label={toggleButtonLabel}\n onClick={() => {\n setNavExpanded(cur => !cur);\n }}\n >\n <Icon name='arrow-micro-right' />\n </StyledNavToggle>\n </StyledNav>\n )}\n <Flex item={{ grow: 1 }} as={StyledMain}>\n {main}\n </Flex>\n </Flex>\n </AppShellContext.Provider>\n );\n }\n);\n\nexport default AppShell;\n"]}
|
|
1
|
+
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n PropsWithoutRef,\n Ref,\n useMemo,\n useState,\n useContext,\n useRef,\n useCallback,\n TransitionEvent,\n useLayoutEffect\n} from 'react';\n\nimport {\n Flex,\n Icon,\n Switch,\n SkipNavigation,\n Image,\n Drawer,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n StandardTree,\n useConsolidatedRef\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport AppHeader from '../AppHeader';\n\nimport {\n StyledHeader,\n StyledUtils,\n StyledUtilItem,\n StyledScrollWrap,\n StyledNavContent,\n StyledMain,\n StyledDrawerWrapper,\n StyledNavHeaderIcon,\n StyledDrawerHeader,\n StyledNavTitle,\n StyledNav,\n StyledInnerNav,\n StyledNavToggle,\n StyledDrawerCloseButton,\n StyledNavHeaderVisual\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type {\n AppShellProps,\n AppInfoProps,\n UtilsProps,\n AppShellContextValue\n} from './AppShell.types';\n\nconst NavigationHeader = ({ text, visual: { backgroundColor, icon, imageSrc } }: AppInfoProps) => {\n return (\n <Flex container={{ alignItems: 'center', pad: 2 }} as={StyledHeader}>\n {(imageSrc || icon) && (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n bgColor={backgroundColor}\n as={StyledNavHeaderVisual}\n >\n {imageSrc && <Image src={imageSrc} alt={text} />}\n {!imageSrc && icon && <StyledNavHeaderIcon name={icon} />}\n </Flex>\n )}\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n </Flex>\n );\n};\n\nconst DrawerHeader = forwardRef(\n ({ text, visual: { icon } }: PropsWithoutRef<AppInfoProps>, ref: Ref<HTMLButtonElement>) => {\n const t = useI18n();\n const { setDrawerTitle, setDrawerOpen } = useContext(AppShellContext);\n\n const onDrawerClose = () => {\n setDrawerTitle('');\n setDrawerOpen(false);\n };\n\n return (\n <Flex container={{ alignItems: 'center' }} as={StyledDrawerHeader}>\n <StyledDrawerCloseButton\n variant='simple'\n onClick={onDrawerClose}\n aria-label={t('close_noun', [text])}\n icon\n ref={ref}\n >\n {icon && <Icon name={icon} />}\n </StyledDrawerCloseButton>\n\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n </Flex>\n );\n }\n);\n\nconst Utils = ({ items, onItemClick, onClose }: UtilsProps & { onClose: () => void }) => {\n const { setDrawerTitle, setDrawerOpen } = useContext(AppShellContext);\n const [showDevMode, setShowDevMode] = useState(false);\n const t = useI18n();\n\n const handleMenu = (label: string, id: string) => {\n setDrawerTitle(label);\n setDrawerOpen(true);\n onItemClick(id);\n };\n\n useAfterInitialEffect(() => {\n if (!showDevMode) {\n onClose();\n }\n }, [showDevMode]);\n\n return (\n <StyledUtils showDevMode={showDevMode}>\n <Switch label={t('dev_mode')} onChange={() => setShowDevMode(cur => !cur)} on={showDevMode} />\n {showDevMode && (\n <ul role='menu'>\n {items.map(({ label, id }) => {\n return (\n <StyledUtilItem key={id} role='menuitem'>\n <BareButton onClick={() => handleMenu(label, id)}>{label}</BareButton>\n </StyledUtilItem>\n );\n })}\n </ul>\n )}\n </StyledUtils>\n );\n};\n\nconst AppShell = forwardRef(\n (\n {\n main,\n appHeader,\n appInfo,\n utils,\n navigation,\n hideNav = false\n }: PropsWithoutRef<AppShellProps>,\n ref: AppShellProps['ref']\n ) => {\n const [navExpanded, setNavExpanded] = useState(true);\n const [drawerOpen, setDrawerOpen] = useState(false);\n const [drawerTitle, setDrawerTitle] = useState('');\n const backButtonRef = useRef<HTMLButtonElement>(null);\n const { rtl } = useDirection();\n const navRef = useConsolidatedRef(ref);\n const t = useI18n();\n\n const [navState, setNavState] = useState<AppShellContextValue['navState']>('expanded');\n\n const navContent = useMemo(() => {\n return (\n <Flex item={{ grow: 1 }} as={StyledScrollWrap}>\n <StandardTree {...navigation} />\n </Flex>\n );\n }, [navigation]);\n\n const onNavTransitionEnd = useCallback(\n (e: TransitionEvent | TransitionEvent) => {\n if (e.target === navRef.current && e.propertyName === 'width') {\n setNavState(navExpanded ? 'expanded' : 'collapsed');\n }\n },\n [navExpanded]\n );\n\n useLayoutEffect(() => {\n if (navExpanded && navState !== 'expanded') {\n setNavState('expanding');\n }\n\n if (!navExpanded && navState !== 'collapsed') {\n setNavState('collapsing');\n }\n }, [navExpanded, navState]);\n\n const toggleButtonLabel = t(navExpanded ? 'collapse_noun' : 'expand_noun', [t('navigation')]);\n\n return (\n <AppShellContext.Provider\n value={useMemo(\n () => ({\n navExpanded,\n drawerOpen,\n setDrawerOpen,\n drawerTitle,\n setDrawerTitle,\n navState\n }),\n [navExpanded, drawerOpen, drawerTitle, navState]\n )}\n >\n <SkipNavigation />\n <AppHeader {...appHeader} />\n <Flex container>\n {!hideNav && (\n <StyledNav ref={navRef} onTransitionEnd={onNavTransitionEnd}>\n <StyledInnerNav>\n <Flex\n container={{ direction: 'column', justify: 'between' }}\n as={StyledNavContent}\n aria-hidden={!navExpanded}\n >\n <Flex as={StyledDrawerWrapper}>\n <Drawer\n open={drawerOpen}\n nullWhenClosed\n position='absolute'\n placement={rtl ? 'right' : 'left'}\n onBeforeOpen={utils?.drawer?.onBeforeOpen}\n onAfterOpen={() => {\n if (\n backButtonRef.current &&\n document.activeElement !== backButtonRef.current\n ) {\n backButtonRef.current.focus();\n }\n utils?.drawer?.onAfterOpen?.();\n }}\n onBeforeClose={utils?.drawer?.onBeforeClose}\n onAfterClose={utils?.drawer?.onAfterClose}\n >\n <DrawerHeader\n ref={backButtonRef}\n text={drawerTitle}\n visual={{ icon: 'caret-left', backgroundColor: 'transparent' }}\n />\n {navContent}\n </Drawer>\n </Flex>\n\n {!drawerOpen && (\n <>\n <NavigationHeader {...appInfo} />\n {navContent}\n </>\n )}\n\n {utils && <Utils {...utils} onClose={() => setDrawerOpen(false)} />}\n </Flex>\n </StyledInnerNav>\n\n <StyledNavToggle\n icon\n aria-expanded={navExpanded}\n label={\n navState === 'expanded' || navState === 'collapsed'\n ? toggleButtonLabel\n : undefined\n }\n aria-label={toggleButtonLabel}\n onClick={() => {\n setNavExpanded(cur => !cur);\n }}\n >\n <Icon name='arrow-micro-right' />\n </StyledNavToggle>\n </StyledNav>\n )}\n <Flex item={{ grow: 1 }} as={StyledMain}>\n {main}\n </Flex>\n </Flex>\n </AppShellContext.Provider>\n );\n }\n);\n\nexport default AppShell;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qOAgC1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAOzB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAA6B,OAAO;SA8B1D,CAAC;AAIH,eAAO,MAAM,cAAc,wGAsBzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAO3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAmB3B,CAAC;AAIH,eAAO,MAAM,UAAU,0GAOrB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAO9B,CAAC;AAIH,eAAO,MAAM,qBAAqB;aAAyB,MAAM;SAY/D,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAYlC,CAAC;AAIH,eAAO,MAAM,cAAc,yGAUzB,CAAC;AAIH,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qOAgC1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAOzB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAA6B,OAAO;SA8B1D,CAAC;AAIH,eAAO,MAAM,cAAc,wGAsBzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAO3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAmB3B,CAAC;AAIH,eAAO,MAAM,UAAU,0GAOrB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAO9B,CAAC;AAIH,eAAO,MAAM,qBAAqB;aAAyB,MAAM;SAY/D,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAYlC,CAAC;AAIH,eAAO,MAAM,cAAc,yGAUzB,CAAC;AAIH,eAAO,MAAM,SAAS,yGAiHpB,CAAC"}
|
|
@@ -211,7 +211,6 @@ export const StyledNav = styled.nav(({ theme }) => {
|
|
|
211
211
|
const { navExpanded } = useContext(AppShellContext);
|
|
212
212
|
return css `
|
|
213
213
|
position: fixed;
|
|
214
|
-
z-index: ${theme.base['z-index'].drawer};
|
|
215
214
|
height: calc(100vh - 3rem);
|
|
216
215
|
background: ${theme.components['app-shell'].nav['background-color']};
|
|
217
216
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n Icon,\n Text,\n tryCatch,\n defaultThemeProp,\n Button,\n useDirection,\n StyledIcon,\n StyledTooltip\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n StyledNodeIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n const { ltr } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block-start: calc(2 * ${theme.base.spacing});\n inset-inline-end: 0;\n min-width: 1.5rem;\n min-height: 1.5rem;\n border: none;\n color: ${theme.base.palette['foreground-color']};\n box-shadow: ${theme.base.shadow.low};\n border-radius: 50%;\n transition-property: background-color;\n transform: translateX(${ltr ? '50%' : '-50%'});\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n ${StyledIcon} {\n transform: rotateY(180deg);\n }\n }\n\n & + ${StyledTooltip} {\n z-index: calc(${theme.base['z-index'].drawer} + 1);\n }\n `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n width: 100%;\n min-height: 4rem;\n border-bottom: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n return css`\n padding-inline-start: ${theme.base.spacing};\n `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n border-top: 0.0625rem solid ${borderColor};\n ${StyledSwitch} {\n &:hover {\n background-color: ${hoverBg};\n }\n\n ${SwitchLabel} {\n height: calc(2rem + 4 * ${theme.base.spacing});\n padding: calc(2 * ${theme.base.spacing});\n text-transform: capitalize;\n color: ${theme.base.colors.gray.light};\n font-weight: ${theme.base['font-weight'].bold};\n\n &::before,\n &::after {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n }\n }\n & > ul {\n list-style: none;\n }\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n &:focus,\n &:focus-within {\n color: ${theme.base.colors.blue.light};\n }\n\n ${StyledBareButton} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n color: ${theme.base.colors.white};\n width: 100%;\n height: 100%;\n text-align: start;\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n const { navExpanded, navState } = useContext(AppShellContext);\n\n return css`\n width: 14rem;\n height: 100%;\n opacity: 0;\n transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n ${navState === 'collapsed' &&\n css`\n display: none;\n `}\n\n ${navExpanded &&\n css`\n opacity: 1;\n `}\n `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 3rem);\n background-color: ${theme.base.palette['app-background']};\n transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n position: relative;\n height: ${drawerOpen ? '100%' : 'auto'};\n `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n return css`\n min-width: 2rem;\n min-height: 2rem;\n border-radius: 0.4rem;\n background-color: ${bgColor};\n margin-inline-end: ${theme.base.spacing};\n color: ${theme.base.colors.white};\n & svg {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n return css`\n margin-inline-end: ${theme.base.spacing};\n min-width: 1.5rem;\n min-height: 1.5rem;\n color: ${theme.base.colors.white};\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n height: 100%;\n ${(navState === 'collapsing' || navState === 'expanding') &&\n css`\n overflow: hidden;\n `}\n `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n const { navExpanded } = useContext(AppShellContext);\n\n return css`\n position: fixed;\n z-index: ${theme.base['z-index'].drawer};\n height: calc(100vh - 3rem);\n background: ${theme.components['app-shell'].nav['background-color']};\n\n &,\n ${StyledInnerNav} {\n width: ${navExpanded ? '14' : '1.5'}rem;\n transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n ${theme.base['custom-scrollbar'] &&\n css`\n * {\n scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n scrollbar-width: thin;\n }\n\n @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n /* stylelint-disable unit-allowed-list */\n\n *::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n }\n\n *::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0.2);\n }\n\n *::-webkit-scrollbar-corner {\n background-color: rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: inherit;\n }\n\n *::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 3px solid transparent;\n border-radius: calc(1.125 * ${theme.base['border-radius']});\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n }\n\n *::-webkit-scrollbar-thumb:hover {\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n }\n\n *::-webkit-scrollbar-track:horizontal {\n border-bottom-left-radius: inherit;\n }\n\n *::-webkit-scrollbar-track:vertical {\n border-top-right-radius: inherit;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n *::-webkit-scrollbar-track:not(:corner-present) {\n border-bottom-right-radius: inherit;\n }\n\n /* stylelint-enable unit-allowed-list */\n }\n `}\n\n &:not(:hover) {\n ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n ${hideVisually}\n }\n }\n\n /*\n * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n */\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n width: calc(2 * ${theme.base.spacing});\n height: 100%;\n }\n\n ${StyledStandardTree} {\n color: ${theme.base.colors.white};\n\n ${StyledNodeText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n\n ${StyledNodeInteraction} {\n &:hover,\n &[aria-current='true'] {\n background-color: ${hoverBg};\n }\n\n &[aria-current='true'] {\n ${StyledNodeIcon},\n ${StyledNodeText} {\n color: ${theme.base.colors.blue.light};\n }\n }\n }\n }\n\n /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n & + ${StyledMain} {\n margin-inline-start: ${navExpanded ? '14rem' : '1.5rem'};\n }\n `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n Icon,\n Text,\n tryCatch,\n defaultThemeProp,\n Button,\n useDirection,\n StyledIcon,\n StyledTooltip\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n StyledNodeIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n const { ltr } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block-start: calc(2 * ${theme.base.spacing});\n inset-inline-end: 0;\n min-width: 1.5rem;\n min-height: 1.5rem;\n border: none;\n color: ${theme.base.palette['foreground-color']};\n box-shadow: ${theme.base.shadow.low};\n border-radius: 50%;\n transition-property: background-color;\n transform: translateX(${ltr ? '50%' : '-50%'});\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n ${StyledIcon} {\n transform: rotateY(180deg);\n }\n }\n\n & + ${StyledTooltip} {\n z-index: calc(${theme.base['z-index'].drawer} + 1);\n }\n `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n width: 100%;\n min-height: 4rem;\n border-bottom: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n return css`\n padding-inline-start: ${theme.base.spacing};\n `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n border-top: 0.0625rem solid ${borderColor};\n ${StyledSwitch} {\n &:hover {\n background-color: ${hoverBg};\n }\n\n ${SwitchLabel} {\n height: calc(2rem + 4 * ${theme.base.spacing});\n padding: calc(2 * ${theme.base.spacing});\n text-transform: capitalize;\n color: ${theme.base.colors.gray.light};\n font-weight: ${theme.base['font-weight'].bold};\n\n &::before,\n &::after {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n }\n }\n & > ul {\n list-style: none;\n }\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n &:focus,\n &:focus-within {\n color: ${theme.base.colors.blue.light};\n }\n\n ${StyledBareButton} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n color: ${theme.base.colors.white};\n width: 100%;\n height: 100%;\n text-align: start;\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n const { navExpanded, navState } = useContext(AppShellContext);\n\n return css`\n width: 14rem;\n height: 100%;\n opacity: 0;\n transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n ${navState === 'collapsed' &&\n css`\n display: none;\n `}\n\n ${navExpanded &&\n css`\n opacity: 1;\n `}\n `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 3rem);\n background-color: ${theme.base.palette['app-background']};\n transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n position: relative;\n height: ${drawerOpen ? '100%' : 'auto'};\n `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n return css`\n min-width: 2rem;\n min-height: 2rem;\n border-radius: 0.4rem;\n background-color: ${bgColor};\n margin-inline-end: ${theme.base.spacing};\n color: ${theme.base.colors.white};\n & svg {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n return css`\n margin-inline-end: ${theme.base.spacing};\n min-width: 1.5rem;\n min-height: 1.5rem;\n color: ${theme.base.colors.white};\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n height: 100%;\n ${(navState === 'collapsing' || navState === 'expanding') &&\n css`\n overflow: hidden;\n `}\n `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n const { navExpanded } = useContext(AppShellContext);\n\n return css`\n position: fixed;\n height: calc(100vh - 3rem);\n background: ${theme.components['app-shell'].nav['background-color']};\n\n &,\n ${StyledInnerNav} {\n width: ${navExpanded ? '14' : '1.5'}rem;\n transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n ${theme.base['custom-scrollbar'] &&\n css`\n * {\n scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n scrollbar-width: thin;\n }\n\n @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n /* stylelint-disable unit-allowed-list */\n\n *::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n }\n\n *::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0.2);\n }\n\n *::-webkit-scrollbar-corner {\n background-color: rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: inherit;\n }\n\n *::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 3px solid transparent;\n border-radius: calc(1.125 * ${theme.base['border-radius']});\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n }\n\n *::-webkit-scrollbar-thumb:hover {\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n }\n\n *::-webkit-scrollbar-track:horizontal {\n border-bottom-left-radius: inherit;\n }\n\n *::-webkit-scrollbar-track:vertical {\n border-top-right-radius: inherit;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n *::-webkit-scrollbar-track:not(:corner-present) {\n border-bottom-right-radius: inherit;\n }\n\n /* stylelint-enable unit-allowed-list */\n }\n `}\n\n &:not(:hover) {\n ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n ${hideVisually}\n }\n }\n\n /*\n * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n */\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n width: calc(2 * ${theme.base.spacing});\n height: 100%;\n }\n\n ${StyledStandardTree} {\n color: ${theme.base.colors.white};\n\n ${StyledNodeText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n\n ${StyledNodeInteraction} {\n &:hover,\n &[aria-current='true'] {\n background-color: ${hoverBg};\n }\n\n &[aria-current='true'] {\n ${StyledNodeIcon},\n ${StyledNodeText} {\n color: ${theme.base.colors.blue.light};\n }\n }\n }\n }\n\n /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n & + ${StyledMain} {\n margin-inline-start: ${navExpanded ? '14rem' : '1.5rem'};\n }\n `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -83,7 +83,7 @@ const Connector = forwardRef(({ label, onAddClick, active = false }, ref) => {
|
|
|
83
83
|
const t = useI18n();
|
|
84
84
|
const [, setButtonEl] = useElement();
|
|
85
85
|
const buttonRef = useConsolidatedRef(ref, setButtonEl);
|
|
86
|
-
return (_jsx(_Fragment, { children: _jsxs(Flex,
|
|
86
|
+
return (_jsx(_Fragment, { children: _jsxs(Flex, { as: StyledWrapper, withLabel: !!label, container: { alignItems: 'center', direction: 'column' }, children: [label && (_jsx(Flex, { as: StyledLabelWrapper, container: { justify: 'center' }, children: _jsx(StyledLabel, { children: label }, void 0) }, void 0)), _jsx(Flex, { "aria-disabled": 'true', as: StyledConnector, children: _jsx("svg", { children: _jsx("path", { strokeWidth: '2', stroke: theme.base.colors.slate.light, d: 'M 16 0 v100' }, void 0) }, void 0) }, void 0), _jsxs(Flex, { as: StyledButtonWrapper, children: [_jsx(StyledDot, { children: _jsx(Icon, { name: 'circle-solid' }, void 0) }, void 0), _jsx(StyledButton, { label: t('add_noun', [t('node').toLowerCase()]), active: active, icon: true, onClick: onAddClick, ref: buttonRef, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0)] }, void 0) }, void 0));
|
|
87
87
|
});
|
|
88
88
|
export default Connector;
|
|
89
89
|
//# sourceMappingURL=Connector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Icon,\n Label,\n useConsolidatedRef,\n useElement,\n useI18n,\n useTheme\n} from '@pega/cosmos-react-core';\n\nexport interface ConnectorProps {\n /** Unique id of connector */\n id: string;\n /** Label for connector if there */\n label?: string;\n /** Node id which connector should connect to */\n targetNodeId?: string;\n /** Callback for adding the nodes */\n onAddClick?: () => void;\n /** Ref of the connector */\n ref?: Ref<HTMLButtonElement>;\n /** Boolean if the button on the connector is active */\n active?: boolean;\n}\n\nexport const StyledWrapper = styled.div<{ withLabel: boolean }>(({ withLabel }) => {\n return css`\n width: 17.5rem;\n ${withLabel\n ? css`\n height: 6rem;\n `\n : css`\n height: 4.5rem;\n `}\n align-self: center;\n `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledConnector = styled.div`\n width: 2rem;\n align-self: center;\n height: 100%;\n svg {\n width: 100%;\n }\n`;\n\nStyledConnector.defaultProps = defaultThemeProp;\n\nexport const StyledButtonWrapper = styled.div`\n height: 0;\n width: 100%;\n display: flex;\n justify-content: center;\n position: relative;\n`;\n\nStyledButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDot = styled.div(({ theme }) => {\n return css`\n top: -3rem;\n position: absolute;\n color: ${theme.base.colors.slate.medium};\n `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)<{ active: ConnectorProps }>(({ theme, active }) => {\n return css`\n opacity: 0;\n top: -3.25rem;\n border: 0;\n color: ${theme.base.colors.black};\n background: ${theme.base.colors.white};\n ${active &&\n css`\n box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};\n opacity: 1;\n `}\n &:hover,\n &:active,\n &:focus {\n opacity: 1;\n background: ${theme.base.colors.white};\n }\n `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledLabelWrapper = styled.div`\n position: relative;\n width: 100%;\n`;\n\nStyledLabelWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Label)(({ theme }) => {\n return css`\n padding: calc(0.5 * ${theme.base.spacing});\n border-radius: 0.25rem;\n position: absolute;\n bottom: -2.25rem;\n background: ${theme.base.colors.slate.medium};\n color: ${theme.base.colors.white};\n `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nconst Connector: FunctionComponent<ConnectorProps & ForwardProps> = forwardRef(\n (\n { label, onAddClick, active = false }: PropsWithoutRef<ConnectorProps>,\n ref: ConnectorProps['ref']\n ) => {\n const theme = useTheme();\n const t = useI18n();\n const [, setButtonEl] = useElement<HTMLButtonElement>();\n const buttonRef = useConsolidatedRef(ref, setButtonEl);\n\n return (\n <>\n <Flex\n as={StyledWrapper}\n withLabel={!!label}\n container={{ alignItems: 'center', direction: 'column' }}\n >\n {label && (\n <Flex as={StyledLabelWrapper} container={{ justify: 'center' }}>\n <StyledLabel>{label}</StyledLabel>\n </Flex>\n )}\n <Flex aria-disabled='true' as={StyledConnector}>\n <svg>\n <path strokeWidth='2' stroke={theme.base.colors.slate.light} d='M 16 0 v100' />\n </svg>\n </Flex>\n\n <Flex as={StyledButtonWrapper}>\n <StyledDot>\n <Icon name='circle-solid' />\n </StyledDot>\n <StyledButton\n label={t('add_noun', [t('node').toLowerCase()])}\n active={active}\n icon\n onClick={onAddClick}\n ref={buttonRef}\n >\n <Icon name='plus' />\n </StyledButton>\n </Flex>\n </Flex>\n </>\n );\n }\n);\n\nexport default Connector;\n"]}
|
|
@@ -59,20 +59,20 @@ const FlowModeller = ({ nodes, nodeLibrary, actions, onNodeAdd, onNodeClick, onN
|
|
|
59
59
|
const nodeItem = node;
|
|
60
60
|
return {
|
|
61
61
|
...node,
|
|
62
|
-
visual: nodeItem.type ? (_jsx(StyledIcon,
|
|
62
|
+
visual: nodeItem.type ? (_jsx(StyledIcon, { id: node.id, type: nodeItem.type, children: _jsx(Icon, { name: assignmentVisual[nodeItem.type] }, void 0) }, void 0)) : undefined,
|
|
63
63
|
count: node.items ? node.items.length : undefined,
|
|
64
64
|
secondary: node.secondary,
|
|
65
65
|
selected: selectable ? !!node.selected : undefined
|
|
66
66
|
};
|
|
67
67
|
});
|
|
68
68
|
}, [search, nodeLibrary, searchRegex]);
|
|
69
|
-
return (_jsxs(Flex,
|
|
69
|
+
return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, ...restProps, children: [nodes.map(node => (_jsxs(Fragment, { children: [node.type === 'start' && (_jsx(StartNode, { id: node.id, type: node.type, label: t('start').toUpperCase() }, void 0)), node.type !== 'start' && node.type !== 'stop' && (_jsx(DefaultNode, { id: node.id, ref: nodeRef, label: node.label, type: node.type, description: node.description, onActionClick: onNodeActionClick, onClick: onNodeClick, actions: actions, additionalData: node.additionalData }, void 0)), node.type === 'stop' && (_jsx(EndNode, { id: node.id, type: node.type, label: t('end').toUpperCase() }, void 0)), node.connectors &&
|
|
70
70
|
node.connectors?.map(({ id, label, targetNodeId }) => (_jsx(Connector, { id: id, label: label, ref: el => {
|
|
71
71
|
buttonRefs.current[node.id] = el;
|
|
72
72
|
}, targetNodeId: targetNodeId, onAddClick: () => {
|
|
73
73
|
setPreviousNodeId(node.id);
|
|
74
74
|
setOpen(cur => !cur);
|
|
75
|
-
}, active: open && previousNodeId === node.id }, id)))] }, node.id))), _jsx(StyledPopover,
|
|
75
|
+
}, active: open && previousNodeId === node.id }, id)))] }, node.id))), _jsx(StyledPopover, { show: open, target: previousNodeId ? buttonRefs.current[previousNodeId] : null, ref: setPopoverEl, children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchElRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: t('search_nodes'), placeholder: t('search_nodes') }, void 0) }, void 0) }, void 0)] }, void 0));
|
|
76
76
|
};
|
|
77
77
|
export default FlowModeller;
|
|
78
78
|
//# sourceMappingURL=FlowModeller.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n PropsWithoutRef,\n Fragment,\n useState,\n useCallback,\n useRef,\n useEffect,\n useMemo,\n MouseEvent\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n Action,\n escapeRegExp,\n Flex,\n Icon,\n Menu,\n menuHelpers,\n Popover,\n SearchInput,\n useAfterInitialEffect,\n useElement,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nimport { assignmentVisual, StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';\nimport { StyledIcon } from './Node/NodeTemplate.styles';\nimport Connector from './Connector';\nimport { ActionParams, NodeProps, SelectedNodeParam, NodeLibraryItem } from './Node/Node.types';\n\nexport interface FlowModellerProps {\n /** List of nodes */\n nodes: NodeProps[];\n /** Node actions */\n actions?: Action[];\n /** Callback to add node from connector */\n onNodeAdd: (selectedNode: SelectedNodeParam) => void;\n /** Callback for handling the click on the node */\n onNodeClick?: (nodeId: string) => void;\n /** Callback for actions on Node */\n onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n /** Types of nodes */\n nodeLibrary: NodeLibraryItem[];\n}\n\nconst StyledPopover: typeof Popover = styled(Popover)`\n min-width: 40ch;\n`;\n\nconst FlowModeller = ({\n nodes,\n nodeLibrary,\n actions,\n onNodeAdd,\n onNodeClick,\n onNodeActionClick,\n ...restProps\n}: PropsWithoutRef<FlowModellerProps>) => {\n const [open, setOpen] = useState(false);\n const buttonRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});\n const nodeRef = useRef<HTMLElement>(null);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [previousNodeId, setPreviousNodeId] = useState('');\n const [search, setSearch] = useState('');\n const searchElRef = useRef<HTMLInputElement>(null);\n const t = useI18n();\n const searchRegex = useMemo(() => {\n return new RegExp(escapeRegExp(search));\n }, [search]);\n\n const closeMenu = useCallback(() => {\n setOpen(false);\n }, []);\n\n const onItemSelect = useCallback(\n id => {\n const selectedNode = menuHelpers.getItem(nodeLibrary, id) as NodeLibraryItem;\n onNodeAdd({ nodeId: previousNodeId, node: selectedNode });\n closeMenu();\n },\n [previousNodeId]\n );\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n closeMenu();\n }\n },\n [closeMenu]\n );\n\n useOuterEvent('mousedown', [popoverEl, buttonRefs.current[previousNodeId]], closeMenu);\n\n useEffect(() => {\n if (open) {\n searchElRef?.current?.focus();\n }\n }, [open, searchElRef.current]);\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [onKeydown]);\n\n useAfterInitialEffect(() => {\n nodeRef?.current?.focus();\n }, [nodes]);\n\n const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n const itemsToRender = useMemo(() => {\n return menuHelpers.mapTree(\n search\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return searchRegex.test(primary);\n })\n : items,\n node => {\n const selectable = !node.items;\n\n const nodeItem: NodeLibraryItem = node as NodeLibraryItem;\n return {\n ...node,\n visual: nodeItem.type ? (\n <StyledIcon id={node.id} type={nodeItem.type}>\n <Icon name={assignmentVisual[nodeItem.type]} />\n </StyledIcon>\n ) : undefined,\n count: node.items ? node.items.length : undefined,\n secondary: node.secondary,\n selected: selectable ? !!node.selected : undefined\n };\n }\n );\n }, [search, nodeLibrary, searchRegex]);\n\n return (\n <Flex container={{ justify: 'center', direction: 'column' }} {...restProps}>\n {nodes.map(node => (\n <Fragment key={node.id}>\n {node.type === 'start' && (\n <StartNode id={node.id} type={node.type} label={t('start').toUpperCase()} />\n )}\n {node.type !== 'start' && node.type !== 'stop' && (\n <DefaultNode\n id={node.id}\n ref={nodeRef}\n label={node.label}\n type={node.type}\n description={node.description}\n onActionClick={onNodeActionClick}\n onClick={onNodeClick}\n actions={actions}\n additionalData={node.additionalData}\n />\n )}\n {node.type === 'stop' && (\n <EndNode id={node.id} type={node.type} label={t('end').toUpperCase()} />\n )}\n {node.connectors &&\n node.connectors?.map(({ id, label, targetNodeId }) => (\n <Connector\n key={id}\n id={id}\n label={label}\n ref={el => {\n buttonRefs.current[node.id] = el;\n }}\n targetNodeId={targetNodeId}\n onAddClick={() => {\n setPreviousNodeId(node.id);\n setOpen(cur => !cur);\n }}\n active={open && previousNodeId === node.id}\n />\n ))}\n </Fragment>\n ))}\n <StyledPopover\n show={open}\n target={previousNodeId ? buttonRefs.current[previousNodeId] : null}\n ref={setPopoverEl}\n >\n <Menu\n items={itemsToRender}\n onItemClick={onItemSelect}\n header={\n <SearchInput\n ref={searchElRef}\n onSearchChange={setSearch}\n value={search}\n searchInputAriaLabel={t('search_nodes')}\n placeholder={t('search_nodes')}\n />\n }\n />\n </StyledPopover>\n </Flex>\n );\n};\n\nexport default FlowModeller;\n"]}
|
|
1
|
+
{"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n PropsWithoutRef,\n Fragment,\n useState,\n useCallback,\n useRef,\n useEffect,\n useMemo,\n MouseEvent\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n Action,\n escapeRegExp,\n Flex,\n Icon,\n Menu,\n menuHelpers,\n Popover,\n SearchInput,\n useAfterInitialEffect,\n useElement,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nimport { assignmentVisual, StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';\nimport { StyledIcon } from './Node/NodeTemplate.styles';\nimport Connector from './Connector';\nimport { ActionParams, NodeProps, SelectedNodeParam, NodeLibraryItem } from './Node/Node.types';\n\nexport interface FlowModellerProps {\n /** List of nodes */\n nodes: NodeProps[];\n /** Node actions */\n actions?: Action[];\n /** Callback to add node from connector */\n onNodeAdd: (selectedNode: SelectedNodeParam) => void;\n /** Callback for handling the click on the node */\n onNodeClick?: (nodeId: string) => void;\n /** Callback for actions on Node */\n onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n /** Types of nodes */\n nodeLibrary: NodeLibraryItem[];\n}\n\nconst StyledPopover: typeof Popover = styled(Popover)`\n min-width: 40ch;\n`;\n\nconst FlowModeller = ({\n nodes,\n nodeLibrary,\n actions,\n onNodeAdd,\n onNodeClick,\n onNodeActionClick,\n ...restProps\n}: PropsWithoutRef<FlowModellerProps>) => {\n const [open, setOpen] = useState(false);\n const buttonRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});\n const nodeRef = useRef<HTMLElement>(null);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [previousNodeId, setPreviousNodeId] = useState('');\n const [search, setSearch] = useState('');\n const searchElRef = useRef<HTMLInputElement>(null);\n const t = useI18n();\n const searchRegex = useMemo(() => {\n return new RegExp(escapeRegExp(search));\n }, [search]);\n\n const closeMenu = useCallback(() => {\n setOpen(false);\n }, []);\n\n const onItemSelect = useCallback(\n id => {\n const selectedNode = menuHelpers.getItem(nodeLibrary, id) as NodeLibraryItem;\n onNodeAdd({ nodeId: previousNodeId, node: selectedNode });\n closeMenu();\n },\n [previousNodeId]\n );\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n closeMenu();\n }\n },\n [closeMenu]\n );\n\n useOuterEvent('mousedown', [popoverEl, buttonRefs.current[previousNodeId]], closeMenu);\n\n useEffect(() => {\n if (open) {\n searchElRef?.current?.focus();\n }\n }, [open, searchElRef.current]);\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [onKeydown]);\n\n useAfterInitialEffect(() => {\n nodeRef?.current?.focus();\n }, [nodes]);\n\n const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n const itemsToRender = useMemo(() => {\n return menuHelpers.mapTree(\n search\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return searchRegex.test(primary);\n })\n : items,\n node => {\n const selectable = !node.items;\n\n const nodeItem: NodeLibraryItem = node as NodeLibraryItem;\n return {\n ...node,\n visual: nodeItem.type ? (\n <StyledIcon id={node.id} type={nodeItem.type}>\n <Icon name={assignmentVisual[nodeItem.type]} />\n </StyledIcon>\n ) : undefined,\n count: node.items ? node.items.length : undefined,\n secondary: node.secondary,\n selected: selectable ? !!node.selected : undefined\n };\n }\n );\n }, [search, nodeLibrary, searchRegex]);\n\n return (\n <Flex container={{ justify: 'center', direction: 'column' }} {...restProps}>\n {nodes.map(node => (\n <Fragment key={node.id}>\n {node.type === 'start' && (\n <StartNode id={node.id} type={node.type} label={t('start').toUpperCase()} />\n )}\n {node.type !== 'start' && node.type !== 'stop' && (\n <DefaultNode\n id={node.id}\n ref={nodeRef}\n label={node.label}\n type={node.type}\n description={node.description}\n onActionClick={onNodeActionClick}\n onClick={onNodeClick}\n actions={actions}\n additionalData={node.additionalData}\n />\n )}\n {node.type === 'stop' && (\n <EndNode id={node.id} type={node.type} label={t('end').toUpperCase()} />\n )}\n {node.connectors &&\n node.connectors?.map(({ id, label, targetNodeId }) => (\n <Connector\n key={id}\n id={id}\n label={label}\n ref={el => {\n buttonRefs.current[node.id] = el;\n }}\n targetNodeId={targetNodeId}\n onAddClick={() => {\n setPreviousNodeId(node.id);\n setOpen(cur => !cur);\n }}\n active={open && previousNodeId === node.id}\n />\n ))}\n </Fragment>\n ))}\n <StyledPopover\n show={open}\n target={previousNodeId ? buttonRefs.current[previousNodeId] : null}\n ref={setPopoverEl}\n >\n <Menu\n items={itemsToRender}\n onItemClick={onItemSelect}\n header={\n <SearchInput\n ref={searchElRef}\n onSearchChange={setSearch}\n value={search}\n searchInputAriaLabel={t('search_nodes')}\n placeholder={t('search_nodes')}\n />\n }\n />\n </StyledPopover>\n </Flex>\n );\n};\n\nexport default FlowModeller;\n"]}
|
|
@@ -36,14 +36,14 @@ export const DefaultNode = forwardRef(({ id, label, type = 'assignment', descrip
|
|
|
36
36
|
const [nodeDescription, setNodeDescription] = useElement();
|
|
37
37
|
const [nodeAdditionalData, setNodeAdditionalData] = useElement();
|
|
38
38
|
const [nodeIcon, setNodeIcon] = useElement();
|
|
39
|
-
return (_jsxs(StyledCard,
|
|
39
|
+
return (_jsxs(StyledCard, { "aria-label": label, onClick: () => onClick?.(id), onKeyDown: handleEnterKeyDown, ref: ref, ...restProps, children: [_jsxs(Flex, { as: StyledCardHeader, container: { alignItems: 'center', justify: 'between', pad: 1, gap: 1 }, children: [_jsxs(Flex, { container: { alignItems: 'center', wrap: 'nowrap' }, children: [_jsx(StyledIcon, { id: id, type: type, ref: setNodeIcon, children: _jsx(Icon, { name: assignmentVisual[type] }, void 0) }, void 0), _jsx(Tooltip, { target: nodeIcon, hideDelay: 'none', children: cap(type) }, void 0), _jsx(StyledText, { variant: 'h4', ref: setNodeLabel, children: label }, void 0), _jsx(Tooltip, { describeTarget: false, target: nodeLabel, hideDelay: 'none', children: label }, void 0)] }, void 0), _jsx(MenuButton, { portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), menu: {
|
|
40
40
|
items: actionItems
|
|
41
|
-
} }, void 0)] }
|
|
41
|
+
} }, void 0)] }, void 0), description && (_jsxs(_Fragment, { children: [_jsx(StyledCardContent, { ref: setNodeDescription, children: description }, void 0), _jsx(Tooltip, { describeTarget: false, target: nodeDescription, hideDelay: 'none', children: description }, void 0)] }, void 0)), additionalDataValue && (_jsxs(_Fragment, { children: [_jsx(StyledAdditionalData, { ref: setNodeAdditionalData, children: _jsx(Text, { variant: 'secondary', children: additionalDataValue }, void 0) }, void 0), _jsx(Tooltip, { describeTarget: false, target: nodeAdditionalData, hideDelay: 'none', children: additionalDataValue }, void 0)] }, void 0))] }, void 0));
|
|
42
42
|
});
|
|
43
43
|
export const StartNode = ({ type, label }) => {
|
|
44
|
-
return (_jsxs(Flex,
|
|
44
|
+
return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledLabel, type: type, children: label }, void 0), _jsx(Flex, { as: StyledCircle, type: type, tabIndex: '0', "aria-label": label, role: 'button' }, void 0)] }, void 0));
|
|
45
45
|
};
|
|
46
46
|
export const EndNode = ({ type, label }) => {
|
|
47
|
-
return (_jsxs(Flex,
|
|
47
|
+
return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledCircle, type: type, tabIndex: '0', "aria-label": label, role: 'button' }, void 0), _jsx(Flex, { as: StyledLabel, type: type, children: label }, void 0)] }, void 0));
|
|
48
48
|
};
|
|
49
49
|
//# sourceMappingURL=NodeTemplates.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodeTemplates.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,WAAW,EAA6B,UAAU,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,EACL,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,GAAG,EACH,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,MAAM,CAAC,MAAM,gBAAgB,GAA2C;IACtE,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,iBAAiB;IAC3B,QAAQ,EAAE,WAAW;IACrB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,gBAAgB;IAC5B,UAAU,EAAE,SAAS;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EACE,EAAE,EACF,KAAK,EACL,IAAI,GAAG,YAAY,EACnB,WAAW,EACX,cAAc,EACd,OAAO,GAAG,EAAE,EACZ,aAAa,EACb,OAAO,EACP,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,WAAW,GAAG,OAAO,EAAE,GAAG,CAAC,UAAU,CAAC,EAAE;QAC5C,OAAO;YACL,EAAE,EAAE,UAAU,CAAC,EAAE;YACjB,OAAO,EAAE,UAAU,CAAC,IAAI;YACxB,OAAO,EAAE,CAAC,QAAgB,EAAE,CAAa,EAAE,EAAE;gBAC3C,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,aAAa,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;YAC/C,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE;YACpC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;SACf;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,mBAAmB,GACvB,cAAc;QACd,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACjC,OAAO,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,KAAK,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QAC1F,CAAC,CAAC,CAAC;IAEL,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAC/C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,UAAU,EAAE,CAAC;IAC3D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAE,CAAC;IACjE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAE,CAAC;IAE7C,OAAO,CACL,MAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"NodeTemplates.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PropsWithoutRef, useCallback, MouseEvent, KeyboardEvent, forwardRef } from 'react';\n\nimport {\n MenuButton,\n Icon,\n Flex,\n Tooltip,\n useElement,\n useI18n,\n cap,\n Text\n} from '@pega/cosmos-react-core';\n\nimport {\n StyledLabel,\n StyledCircle,\n StyledIcon,\n StyledCardHeader,\n StyledCardContent,\n StyledCard,\n StyledText,\n StyledAdditionalData\n} from './NodeTemplate.styles';\nimport { NodeProps, NodeComponentProps } from './Node.types';\n\nexport const assignmentVisual: { [key in NodeProps['type']]: string } = {\n start: '',\n stop: '',\n decision: 'arrow-bend-left',\n question: 'chat-help',\n message: 'chat',\n assignment: 'clipboard-data',\n automation: 'polaris'\n};\n\nexport const DefaultNode = forwardRef(\n (\n {\n id,\n label,\n type = 'assignment',\n description,\n additionalData,\n actions = [],\n onActionClick,\n onClick,\n ...restProps\n }: PropsWithoutRef<NodeComponentProps>,\n ref: NodeComponentProps['ref']\n ) => {\n const t = useI18n();\n const actionItems = actions?.map(actionItem => {\n return {\n id: actionItem.id,\n primary: actionItem.text,\n onClick: (actionId: string, e: MouseEvent) => {\n e.stopPropagation();\n onActionClick?.({ actionId, nodeId: id }, e);\n }\n };\n });\n\n const handleEnterKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n onClick?.(id);\n }\n },\n [onClick]\n );\n\n const additionalDataValue =\n additionalData &&\n additionalData.map((data, index) => {\n return `${data.label}: ${data.value}${index === additionalData.length - 1 ? '' : ', '}`;\n });\n\n const [nodeLabel, setNodeLabel] = useElement();\n const [nodeDescription, setNodeDescription] = useElement();\n const [nodeAdditionalData, setNodeAdditionalData] = useElement();\n const [nodeIcon, setNodeIcon] = useElement();\n\n return (\n <StyledCard\n aria-label={label}\n onClick={() => onClick?.(id)}\n onKeyDown={handleEnterKeyDown}\n ref={ref}\n {...restProps}\n >\n <Flex\n as={StyledCardHeader}\n container={{ alignItems: 'center', justify: 'between', pad: 1, gap: 1 }}\n >\n <Flex container={{ alignItems: 'center', wrap: 'nowrap' }}>\n <StyledIcon id={id} type={type} ref={setNodeIcon}>\n <Icon name={assignmentVisual[type]} />\n </StyledIcon>\n <Tooltip target={nodeIcon} hideDelay='none'>\n {cap(type)}\n </Tooltip>\n <StyledText variant='h4' ref={setNodeLabel}>\n {label}\n </StyledText>\n <Tooltip describeTarget={false} target={nodeLabel} hideDelay='none'>\n {label}\n </Tooltip>\n </Flex>\n <MenuButton\n portal\n variant='simple'\n text={t('actions')}\n icon='more'\n iconOnly\n onClick={(e: MouseEvent) => e.stopPropagation()}\n onKeyDown={(e: KeyboardEvent) => e.stopPropagation()}\n menu={{\n items: actionItems\n }}\n />\n </Flex>\n {description && (\n <>\n <StyledCardContent ref={setNodeDescription}>{description}</StyledCardContent>\n <Tooltip describeTarget={false} target={nodeDescription} hideDelay='none'>\n {description}\n </Tooltip>\n </>\n )}\n {additionalDataValue && (\n <>\n <StyledAdditionalData ref={setNodeAdditionalData}>\n <Text variant='secondary'>{additionalDataValue}</Text>\n </StyledAdditionalData>\n <Tooltip describeTarget={false} target={nodeAdditionalData} hideDelay='none'>\n {additionalDataValue}\n </Tooltip>\n </>\n )}\n </StyledCard>\n );\n }\n);\n\nexport const StartNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n return (\n <Flex container={{ justify: 'center', direction: 'column' }}>\n <Flex as={StyledLabel} type={type}>\n {label}\n </Flex>\n <Flex as={StyledCircle} type={type} tabIndex='0' aria-label={label} role='button' />\n </Flex>\n );\n};\n\nexport const EndNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n return (\n <Flex container={{ justify: 'center', direction: 'column' }}>\n <Flex as={StyledCircle} type={type} tabIndex='0' aria-label={label} role='button' />\n <Flex as={StyledLabel} type={type}>\n {label}\n </Flex>\n </Flex>\n );\n};\n"]}
|
|
@@ -78,7 +78,7 @@ const Category = forwardRef(({ item, showTitle = false, stageItem, category, id,
|
|
|
78
78
|
};
|
|
79
79
|
task?.addTask.onAddTask?.(param, e);
|
|
80
80
|
};
|
|
81
|
-
return (_jsxs(_Fragment, { children: [category?.label && (_jsx(StyledCategory,
|
|
81
|
+
return (_jsxs(_Fragment, { children: [category?.label && (_jsx(StyledCategory, { showTitle: showTitle, tabIndex: -1, id: item?.categoryId, children: category?.label }, void 0)), _jsxs(StyledList, { ref: ref, role: 'gridcell', category: category, id: item?.id, "data-id": item?.categoryId, children: [item &&
|
|
82
82
|
item.tasks.length !== 0 &&
|
|
83
83
|
item.tasks.map((TaskItem, index) => {
|
|
84
84
|
if (Array.isArray(TaskItem)) {
|
|
@@ -87,12 +87,12 @@ const Category = forwardRef(({ item, showTitle = false, stageItem, category, id,
|
|
|
87
87
|
}
|
|
88
88
|
/* Using creatUID instead of useUID, since it is a list item and multiple ref is trying to get created which causes issue */
|
|
89
89
|
const parallelListItemId = createUID();
|
|
90
|
-
return (_jsxs(Fragment, { children: [index !== 0 && (_jsx(Flex,
|
|
91
|
-
return (_jsx(Task,
|
|
90
|
+
return (_jsxs(Fragment, { children: [index !== 0 && (_jsx(Flex, { as: StyledParallelTitle, container: { justify: 'center' }, children: _jsx("span", { children: t('parallel') }, void 0) }, void 0)), TaskItem.map((parallelTask) => {
|
|
91
|
+
return (_jsx(Task, { id: parallelTask.id, value: parallelTask.label, item: parallelTask, visual: parallelTask.visual, stageItem: stageItem, categoryItem: item, error: parallelTask.error, ...task, ...restProps }, parallelTask.id));
|
|
92
92
|
})] }, parallelListItemId));
|
|
93
93
|
}
|
|
94
|
-
return (_jsx(Task,
|
|
95
|
-
}), (showAddTaskButton || !item) && (_jsxs(_Fragment, { children: [_jsx(Flex,
|
|
94
|
+
return (_jsx(Task, { id: TaskItem.id, value: TaskItem.label, item: TaskItem, visual: TaskItem.visual, stageItem: stageItem, categoryItem: item, onAddStep: task?.onAddStep, error: TaskItem.error, ...task, ...restProps }, TaskItem.id));
|
|
95
|
+
}), (showAddTaskButton || !item) && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledAddTask, children: _jsxs(Button, { variant: 'simple', icon: true, ref: setAddTaskEl, onClick: onAddTaskClick, children: [_jsx(Icon, { name: 'plus' }, void 0), _jsx(Flex, { children: task?.addTask.title }, void 0)] }, void 0) }, void 0), _jsx(Tooltip, { target: addTaskEl, "aria-hidden": 'true', children: `${t('add')} ${task?.addTask.title}` }, void 0)] }, void 0))] }, void 0)] }, void 0));
|
|
96
96
|
});
|
|
97
97
|
export default Category;
|
|
98
98
|
//# sourceMappingURL=Category.js.map
|