@pega/cosmos-react-build 10.0.0-build.2.14 → 10.0.0-build.2.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AppShell/AppShell.styles.js +1 -1
- package/lib/components/AppShell/AppShell.styles.js.map +1 -1
- package/lib/components/FlowModeller/Renderer/Renderer.js +2 -2
- package/lib/components/FlowModeller/Renderer/Renderer.js.map +1 -1
- package/lib/components/Workbench/Workbench.styles.js +1 -1
- package/lib/components/Workbench/Workbench.styles.js.map +1 -1
- package/package.json +4 -4
|
@@ -44,7 +44,7 @@ export const StyledMain = styled.main(({ navOpen, hideNav, theme: { base: { anim
|
|
|
44
44
|
return css `
|
|
45
45
|
position: relative;
|
|
46
46
|
min-height: calc(100vh - 6rem);
|
|
47
|
-
background
|
|
47
|
+
background: ${palette['app-background']};
|
|
48
48
|
margin-inline-start: ${navWidth};
|
|
49
49
|
transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};
|
|
50
50
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, rgba } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n tryCatch,\n defaultThemeProp,\n Button,\n StyledIcon,\n useDirection,\n calculateFontSize,\n Icon\n} from '@pega/cosmos-react-core';\nimport {\n StyledToggleIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst navWidth = '3rem';\nconst navOpenWidth = '14rem';\n\nexport const StyledUtils = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-block: ${theme.base.spacing};\n border-block-start: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n return css`\n background-color: ${theme.base.palette.dark};\n color: ${theme.base.palette.light};\n border: none;\n\n ${StyledIcon} {\n width: 1.25rem;\n height: 1.25rem;\n font-weight: bold;\n }\n\n &:enabled:focus,\n :not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n return css`\n height: 100%;\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n navOpen: boolean;\n hideNav: boolean;\n}>(\n ({\n navOpen,\n hideNav,\n theme: {\n base: { animation, breakpoints, palette }\n }\n }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 6rem);\n background-color: ${palette['app-background']};\n margin-inline-start: ${navWidth};\n transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};\n\n @media (pointer: coarse) {\n min-height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n min-height: calc(100vh - 3rem);\n }\n\n ${navOpen &&\n css`\n margin-inline-start: ${navOpenWidth};\n `}\n\n ${hideNav &&\n css`\n transition-duration: 0s;\n margin-inline-start: 0;\n `}\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(\n ({\n theme: {\n base: {\n breakpoints,\n colors,\n palette,\n animation,\n spacing,\n shadow,\n 'custom-scrollbar': customScrollbar,\n 'font-size': fontSize,\n 'font-scale': fontScale\n },\n components: { 'app-shell': appShell }\n }\n }) => {\n const { navState } = useContext(AppShellContext);\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: fixed;\n z-index: 1;\n height: calc(100vh - 6rem);\n background: ${appShell.nav['background-color']};\n width: ${navState === 'opening' || navState === 'open' ? navOpenWidth : navWidth};\n transition: width ${animation.speed} ${animation.timing.ease};\n display: flex;\n\n ${StyledStandardTree} {\n background-color: ${palette.dark};\n\n ${StyledNodeText}, ${StyledToggleIcon} {\n color: rgba(255, 255, 255, 0.7);\n font-size: ${fontSizes.s};\n }\n\n ${StyledNodeInteraction} {\n padding-block-start: calc(0.5 * ${spacing});\n padding-block-end: calc(0.5 * ${spacing});\n\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n\n ${StyledNodeText} {\n color: ${palette.light};\n }\n }\n\n &:focus {\n box-shadow: ${shadow['focus-inset']};\n }\n\n &[aria-current='page'],\n &[aria-current='true'] {\n background: rgba(255, 255, 255, 0.05);\n\n ${StyledNodeText} {\n color: ${colors.blue.light};\n }\n }\n }\n\n &:has(:focus-visible) {\n box-shadow: inset 0 0 0 0.125rem #71c1ff99;\n }\n }\n\n ${customScrollbar &&\n css`\n * {\n scrollbar-width: thin;\n }\n `}\n\n @media (pointer: coarse) {\n height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: calc(100vh - 3rem);\n }\n `;\n }\n);\n\nStyledNav.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellCaretIcon = styled(Icon)<{ nestedListCollapsed?: boolean }>(({\n nestedListCollapsed,\n theme\n}) => {\n const { rtl } = useDirection();\n\n return css`\n transition-property: transform;\n transition-duration: ${theme.base.animation.speed};\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n ${nestedListCollapsed === false &&\n css`\n transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n `}\n `;\n});\n\nStyledAppShellCaretIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li<{ activeTreeRoot?: boolean }>(\n ({ activeTreeRoot, theme }) => {\n const { navOpen } = useContext(AppShellContext);\n const activeBackground = tryCatch(() =>\n rgba('#000000', theme.base.transparency['transparent-4'])\n );\n\n return css`\n display: block;\n position: relative;\n ${StyledIcon} {\n font-size: 1.25rem;\n }\n\n > :first-child {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n padding: calc(1.25 * ${theme.base.spacing}) 0;\n white-space: nowrap;\n color: rgba(255, 255, 255, 0.7);\n cursor: pointer;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n text-decoration: none;\n\n span {\n overflow: hidden;\n color: inherit;\n }\n\n &:hover,\n &:focus {\n color: ${theme.base.palette.light};\n background: rgba(255, 255, 255, 0.05);\n }\n\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n\n ${activeTreeRoot &&\n css`\n color: ${theme.base.colors.blue.light};\n background-color: ${activeBackground};\n `}\n\n ${StyledAppShellCaretIcon}:last-child {\n position: absolute;\n left: ${navOpen ? 'auto' : '100%'};\n ${navOpen &&\n css`\n inset-inline-end: 1rem;\n `}\n margin: 0;\n opacity: ${navOpen ? '1' : '0'};\n transition-property: opacity;\n }\n\n ${StyledIcon}:first-child {\n margin: 0 calc((${navWidth} - 1.125rem) / 2);\n }\n }\n\n &[aria-current='page'] > :first-child,\n &[aria-current='true'] > :first-child {\n color: ${theme.base.colors.blue.light};\n background-color: ${activeBackground};\n }\n `;\n }\n);\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\n"]}
|
|
1
|
+
{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, rgba } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n tryCatch,\n defaultThemeProp,\n Button,\n StyledIcon,\n useDirection,\n calculateFontSize,\n Icon\n} from '@pega/cosmos-react-core';\nimport {\n StyledToggleIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst navWidth = '3rem';\nconst navOpenWidth = '14rem';\n\nexport const StyledUtils = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-block: ${theme.base.spacing};\n border-block-start: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n return css`\n background-color: ${theme.base.palette.dark};\n color: ${theme.base.palette.light};\n border: none;\n\n ${StyledIcon} {\n width: 1.25rem;\n height: 1.25rem;\n font-weight: bold;\n }\n\n &:enabled:focus,\n :not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n return css`\n height: 100%;\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n navOpen: boolean;\n hideNav: boolean;\n}>(\n ({\n navOpen,\n hideNav,\n theme: {\n base: { animation, breakpoints, palette }\n }\n }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 6rem);\n background: ${palette['app-background']};\n margin-inline-start: ${navWidth};\n transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};\n\n @media (pointer: coarse) {\n min-height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n min-height: calc(100vh - 3rem);\n }\n\n ${navOpen &&\n css`\n margin-inline-start: ${navOpenWidth};\n `}\n\n ${hideNav &&\n css`\n transition-duration: 0s;\n margin-inline-start: 0;\n `}\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(\n ({\n theme: {\n base: {\n breakpoints,\n colors,\n palette,\n animation,\n spacing,\n shadow,\n 'custom-scrollbar': customScrollbar,\n 'font-size': fontSize,\n 'font-scale': fontScale\n },\n components: { 'app-shell': appShell }\n }\n }) => {\n const { navState } = useContext(AppShellContext);\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: fixed;\n z-index: 1;\n height: calc(100vh - 6rem);\n background: ${appShell.nav['background-color']};\n width: ${navState === 'opening' || navState === 'open' ? navOpenWidth : navWidth};\n transition: width ${animation.speed} ${animation.timing.ease};\n display: flex;\n\n ${StyledStandardTree} {\n background-color: ${palette.dark};\n\n ${StyledNodeText}, ${StyledToggleIcon} {\n color: rgba(255, 255, 255, 0.7);\n font-size: ${fontSizes.s};\n }\n\n ${StyledNodeInteraction} {\n padding-block-start: calc(0.5 * ${spacing});\n padding-block-end: calc(0.5 * ${spacing});\n\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n\n ${StyledNodeText} {\n color: ${palette.light};\n }\n }\n\n &:focus {\n box-shadow: ${shadow['focus-inset']};\n }\n\n &[aria-current='page'],\n &[aria-current='true'] {\n background: rgba(255, 255, 255, 0.05);\n\n ${StyledNodeText} {\n color: ${colors.blue.light};\n }\n }\n }\n\n &:has(:focus-visible) {\n box-shadow: inset 0 0 0 0.125rem #71c1ff99;\n }\n }\n\n ${customScrollbar &&\n css`\n * {\n scrollbar-width: thin;\n }\n `}\n\n @media (pointer: coarse) {\n height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: calc(100vh - 3rem);\n }\n `;\n }\n);\n\nStyledNav.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellCaretIcon = styled(Icon)<{ nestedListCollapsed?: boolean }>(({\n nestedListCollapsed,\n theme\n}) => {\n const { rtl } = useDirection();\n\n return css`\n transition-property: transform;\n transition-duration: ${theme.base.animation.speed};\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n ${nestedListCollapsed === false &&\n css`\n transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n `}\n `;\n});\n\nStyledAppShellCaretIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li<{ activeTreeRoot?: boolean }>(\n ({ activeTreeRoot, theme }) => {\n const { navOpen } = useContext(AppShellContext);\n const activeBackground = tryCatch(() =>\n rgba('#000000', theme.base.transparency['transparent-4'])\n );\n\n return css`\n display: block;\n position: relative;\n ${StyledIcon} {\n font-size: 1.25rem;\n }\n\n > :first-child {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n padding: calc(1.25 * ${theme.base.spacing}) 0;\n white-space: nowrap;\n color: rgba(255, 255, 255, 0.7);\n cursor: pointer;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n text-decoration: none;\n\n span {\n overflow: hidden;\n color: inherit;\n }\n\n &:hover,\n &:focus {\n color: ${theme.base.palette.light};\n background: rgba(255, 255, 255, 0.05);\n }\n\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n\n ${activeTreeRoot &&\n css`\n color: ${theme.base.colors.blue.light};\n background-color: ${activeBackground};\n `}\n\n ${StyledAppShellCaretIcon}:last-child {\n position: absolute;\n left: ${navOpen ? 'auto' : '100%'};\n ${navOpen &&\n css`\n inset-inline-end: 1rem;\n `}\n margin: 0;\n opacity: ${navOpen ? '1' : '0'};\n transition-property: opacity;\n }\n\n ${StyledIcon}:first-child {\n margin: 0 calc((${navWidth} - 1.125rem) / 2);\n }\n }\n\n &[aria-current='page'] > :first-child,\n &[aria-current='true'] > :first-child {\n color: ${theme.base.colors.blue.light};\n background-color: ${activeBackground};\n }\n `;\n }\n);\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\n"]}
|
|
@@ -19,9 +19,9 @@ const StyledContentWrapper = styled.div(({ theme }) => {
|
|
|
19
19
|
top: 0;
|
|
20
20
|
left: 0;
|
|
21
21
|
width: 100%;
|
|
22
|
-
background
|
|
22
|
+
background: ${theme.base.palette['app-background']};
|
|
23
23
|
> svg {
|
|
24
|
-
background
|
|
24
|
+
background: ${theme.base.palette['app-background']};
|
|
25
25
|
}
|
|
26
26
|
`;
|
|
27
27
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport FlowModellerContext from '../FlowModellerContext';\n\nimport type { RendererProps } from './Renderer.types';\nimport GraphLayout from './Utils/GraphLayout';\nimport type { PlottedGraphConnector, PlottedGraphNode } from './Utils/GraphLayout';\nimport { DirectedGraph } from './Utils/Graph';\nimport GraphTraversal from './Utils/GraphTraversal';\nimport {\n getParentConvergence,\n groupByPosition,\n arrowUpKey,\n arrowDownKey,\n horizontalNavigation\n} from './Utils/RendererUtils';\n\nconst StyledWrapper = styled.div`\n position: relative;\n width: 100%;\n height: 100%;\n`;\n\nconst StyledContentWrapper = styled.div(({ theme }) => {\n return css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n background-color: ${theme.base.palette['app-background']};\n > svg {\n background-color: ${theme.base.palette['app-background']};\n }\n `;\n});\n\nStyledContentWrapper.defaultProps = defaultThemeProp;\n\nconst StyledNodeWrapper = styled(StyledContentWrapper)(() => {\n return css`\n width: var(--width);\n height: var(--height);\n transform: translate(var(--xPos), var(--yPos));\n `;\n});\n\nconst StyledRootNodeWrapper = styled.foreignObject`\n overflow: visible;\n`;\n\nconst Renderer = ({\n graphData,\n connector: Connector,\n node: Node,\n selectedNodeId\n}: RendererProps) => {\n // apply the plotted positions\n const { readOnly } = useContext(FlowModellerContext);\n const graph: DirectedGraph<PlottedGraphNode, PlottedGraphConnector> = new DirectedGraph(\n graphData\n );\n\n const rootNode = useMemo(() => {\n const rootNodeId = GraphTraversal.findRootNode(graph);\n return rootNodeId ? graph.getNode(rootNodeId) : undefined;\n }, [graph]);\n\n const graphDimensions = GraphLayout.plot<RendererProps['graphData']>(graphData, readOnly);\n const positions = useMemo(() => groupByPosition(graph), [graph]);\n\n const [activeGraphItemId, setActiveGraphItemId] = useState<string>();\n const rendererRef = useRef<HTMLDivElement>(null);\n const prevItem = useRef<string>();\n const prevSelectedNodeId = useRef<string>();\n\n const activeGraphItem: PlottedGraphNode | PlottedGraphConnector | undefined = useMemo(\n () =>\n [...graph.getNodes(), ...graph.getConnectors()].find(data => {\n return data.id === activeGraphItemId;\n }),\n [activeGraphItemId, graph]\n );\n\n useEffect(() => {\n // Set PREVIOUS Connector - If current focused item is a node, we are saving the previous connector id.\n let inConnectors = activeGraphItem ? graph.getInConnectors(activeGraphItem.id) : [];\n if (\n activeGraphItem &&\n 'dimensions' in activeGraphItem &&\n activeGraphItem.dimensions?.height &&\n inConnectors.length\n ) {\n const prevNode = graph.getNode(inConnectors[0].fromNodeId);\n inConnectors = !prevNode.dimensions.height\n ? graph.getInConnectors(prevNode.id)\n : inConnectors;\n const parentConvergence = getParentConvergence(prevNode, graph);\n if (inConnectors.length) {\n prevItem.current =\n !prevNode.dimensions.height && inConnectors.length > 1 && parentConvergence\n ? parentConvergence.parent.id\n : inConnectors[0].id;\n }\n }\n\n /** DELETE NODE - If no item is found and prevItem has a value then we assume that a node has been deleted\n * set activeGraphItemId to prevItem and reset it\n */\n if (!activeGraphItem && prevItem.current && !selectedNodeId) {\n const convergence = GraphTraversal.getConvergenceData(graphData, prevItem.current);\n\n setActiveGraphItemId(\n convergence ? graph.getOutConnectors(convergence.nodeId)[0].id : prevItem.current\n );\n\n prevItem.current = undefined;\n }\n }, [activeGraphItemId, graph]);\n\n const elementScrollIntoView = (focusElementId: string) => {\n const isConnector = graphData?.connectors?.find(item => item.id === focusElementId);\n const elementRef = isConnector\n ? rendererRef.current?.querySelector(`[id='${focusElementId}']`)?.nextElementSibling\n : rendererRef.current?.querySelector(`[id='modeller-node-${focusElementId}']`);\n\n if (elementRef) {\n setTimeout(() => {\n elementRef.scrollIntoView({\n block: 'center',\n behavior: 'smooth'\n });\n });\n }\n };\n\n const onKeyDown = (e: KeyboardEvent<HTMLButtonElement | HTMLDivElement | SVGGElement>) => {\n if (\n activeGraphItemId &&\n activeGraphItem &&\n ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key) &&\n !selectedNodeId\n ) {\n let focusElementId: string | undefined | false;\n switch (e.key) {\n case 'ArrowUp':\n focusElementId = arrowUpKey({\n activeGraphItemId,\n graph,\n activeGraphItem,\n readOnly: readOnly ?? false\n });\n break;\n case 'ArrowDown':\n focusElementId = arrowDownKey({\n activeGraphItemId,\n graph,\n activeGraphItem,\n readOnly: readOnly ?? false\n });\n break;\n case 'ArrowLeft':\n focusElementId = horizontalNavigation({\n keyEvent: 'ArrowLeft',\n positions,\n activeGraphItem,\n graph,\n readOnly\n });\n break;\n case 'ArrowRight':\n focusElementId = horizontalNavigation({\n keyEvent: 'ArrowRight',\n positions,\n activeGraphItem,\n graph,\n readOnly\n });\n break;\n default:\n break;\n }\n\n if (focusElementId) {\n setActiveGraphItemId(focusElementId);\n elementScrollIntoView(focusElementId);\n }\n }\n };\n\n /** Saving the last selectedNodeId in a variable\n * so on close of workbench the focus can return to the node\n * might be removed in future when workbench handles re-focusing the target element on close\n */\n useEffect(() => {\n if (selectedNodeId) {\n prevSelectedNodeId.current = selectedNodeId;\n } else if (!selectedNodeId && prevSelectedNodeId.current) {\n setActiveGraphItemId(prevSelectedNodeId.current);\n prevSelectedNodeId.current = undefined;\n }\n }, [selectedNodeId]);\n\n const getNodeLabel = (target: string | undefined): string | undefined => {\n if (target) {\n const targetNode = graphData.nodes.find(nodeItem => nodeItem.id === target);\n return targetNode && 'label' in targetNode ? String(targetNode.label) : undefined;\n }\n return target;\n };\n\n return (\n <StyledWrapper ref={rendererRef}>\n <StyledContentWrapper>\n <svg\n width={graphDimensions.width}\n height={graphDimensions.height}\n viewBox={`0 0 ${graphDimensions.width} ${graphDimensions.height}`}\n >\n {rootNode && (\n <StyledRootNodeWrapper\n width={rootNode.dimensions.width}\n height={rootNode.dimensions.height}\n x={rootNode.position.x}\n y={rootNode.position.y}\n >\n <Node\n {...rootNode}\n active={rootNode.id === activeGraphItemId}\n onFocus={() => {\n setActiveGraphItemId(rootNode.id);\n }}\n onKeyDown={onKeyDown}\n />\n </StyledRootNodeWrapper>\n )}\n {graphData.connectors.map(item => {\n const fromNodeLabel = getNodeLabel(item.fromNodeId);\n const toNodeLabel = getNodeLabel(item.toNodeId);\n return (\n <Connector\n {...item}\n fromNodeLabel={fromNodeLabel}\n toNodeLabel={toNodeLabel}\n key={item.id}\n active={item.id === activeGraphItemId}\n onFocus={() => {\n setActiveGraphItemId(item.id);\n }}\n onKeyDown={onKeyDown}\n />\n );\n })}\n </svg>\n </StyledContentWrapper>\n <StyledContentWrapper>\n {graphData.nodes\n .filter(node => node.id !== rootNode?.id)\n .map(item => {\n let referencedNode;\n if (item.type?.minConnectors === 0 && item.reference) {\n referencedNode = graph.getNode(item.reference);\n }\n const prevNodeId = graphData.connectors.find(\n connector => connector.toNodeId === item.id\n )?.fromNodeId;\n const fromNodeLabel = getNodeLabel(prevNodeId);\n\n const nextNodeId = graphData.connectors.find(\n connector => connector.fromNodeId === item.id\n )?.toNodeId;\n const toNodeLabel = getNodeLabel(nextNodeId);\n\n return (\n <Flex\n key={item.id}\n as={StyledNodeWrapper}\n id={item.id}\n style={{\n '--width': `${item.dimensions.width}px`,\n '--height': `${item.dimensions.height}px`,\n '--xPos': `${item.position.x}px`,\n '--yPos': `${item.position.y}px`\n }}\n container={{ justify: 'center' }}\n >\n <Node\n {...item}\n fromNodeLabel={fromNodeLabel}\n toNodeLabel={toNodeLabel}\n referencedNode={referencedNode}\n active={item.id === activeGraphItemId}\n onFocus={() => {\n setActiveGraphItemId(item.id);\n }}\n onKeyDown={onKeyDown}\n />\n </Flex>\n );\n })}\n </StyledContentWrapper>\n </StyledWrapper>\n );\n};\n\nexport default Renderer;\n"]}
|
|
1
|
+
{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport FlowModellerContext from '../FlowModellerContext';\n\nimport type { RendererProps } from './Renderer.types';\nimport GraphLayout from './Utils/GraphLayout';\nimport type { PlottedGraphConnector, PlottedGraphNode } from './Utils/GraphLayout';\nimport { DirectedGraph } from './Utils/Graph';\nimport GraphTraversal from './Utils/GraphTraversal';\nimport {\n getParentConvergence,\n groupByPosition,\n arrowUpKey,\n arrowDownKey,\n horizontalNavigation\n} from './Utils/RendererUtils';\n\nconst StyledWrapper = styled.div`\n position: relative;\n width: 100%;\n height: 100%;\n`;\n\nconst StyledContentWrapper = styled.div(({ theme }) => {\n return css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n background: ${theme.base.palette['app-background']};\n > svg {\n background: ${theme.base.palette['app-background']};\n }\n `;\n});\n\nStyledContentWrapper.defaultProps = defaultThemeProp;\n\nconst StyledNodeWrapper = styled(StyledContentWrapper)(() => {\n return css`\n width: var(--width);\n height: var(--height);\n transform: translate(var(--xPos), var(--yPos));\n `;\n});\n\nconst StyledRootNodeWrapper = styled.foreignObject`\n overflow: visible;\n`;\n\nconst Renderer = ({\n graphData,\n connector: Connector,\n node: Node,\n selectedNodeId\n}: RendererProps) => {\n // apply the plotted positions\n const { readOnly } = useContext(FlowModellerContext);\n const graph: DirectedGraph<PlottedGraphNode, PlottedGraphConnector> = new DirectedGraph(\n graphData\n );\n\n const rootNode = useMemo(() => {\n const rootNodeId = GraphTraversal.findRootNode(graph);\n return rootNodeId ? graph.getNode(rootNodeId) : undefined;\n }, [graph]);\n\n const graphDimensions = GraphLayout.plot<RendererProps['graphData']>(graphData, readOnly);\n const positions = useMemo(() => groupByPosition(graph), [graph]);\n\n const [activeGraphItemId, setActiveGraphItemId] = useState<string>();\n const rendererRef = useRef<HTMLDivElement>(null);\n const prevItem = useRef<string>();\n const prevSelectedNodeId = useRef<string>();\n\n const activeGraphItem: PlottedGraphNode | PlottedGraphConnector | undefined = useMemo(\n () =>\n [...graph.getNodes(), ...graph.getConnectors()].find(data => {\n return data.id === activeGraphItemId;\n }),\n [activeGraphItemId, graph]\n );\n\n useEffect(() => {\n // Set PREVIOUS Connector - If current focused item is a node, we are saving the previous connector id.\n let inConnectors = activeGraphItem ? graph.getInConnectors(activeGraphItem.id) : [];\n if (\n activeGraphItem &&\n 'dimensions' in activeGraphItem &&\n activeGraphItem.dimensions?.height &&\n inConnectors.length\n ) {\n const prevNode = graph.getNode(inConnectors[0].fromNodeId);\n inConnectors = !prevNode.dimensions.height\n ? graph.getInConnectors(prevNode.id)\n : inConnectors;\n const parentConvergence = getParentConvergence(prevNode, graph);\n if (inConnectors.length) {\n prevItem.current =\n !prevNode.dimensions.height && inConnectors.length > 1 && parentConvergence\n ? parentConvergence.parent.id\n : inConnectors[0].id;\n }\n }\n\n /** DELETE NODE - If no item is found and prevItem has a value then we assume that a node has been deleted\n * set activeGraphItemId to prevItem and reset it\n */\n if (!activeGraphItem && prevItem.current && !selectedNodeId) {\n const convergence = GraphTraversal.getConvergenceData(graphData, prevItem.current);\n\n setActiveGraphItemId(\n convergence ? graph.getOutConnectors(convergence.nodeId)[0].id : prevItem.current\n );\n\n prevItem.current = undefined;\n }\n }, [activeGraphItemId, graph]);\n\n const elementScrollIntoView = (focusElementId: string) => {\n const isConnector = graphData?.connectors?.find(item => item.id === focusElementId);\n const elementRef = isConnector\n ? rendererRef.current?.querySelector(`[id='${focusElementId}']`)?.nextElementSibling\n : rendererRef.current?.querySelector(`[id='modeller-node-${focusElementId}']`);\n\n if (elementRef) {\n setTimeout(() => {\n elementRef.scrollIntoView({\n block: 'center',\n behavior: 'smooth'\n });\n });\n }\n };\n\n const onKeyDown = (e: KeyboardEvent<HTMLButtonElement | HTMLDivElement | SVGGElement>) => {\n if (\n activeGraphItemId &&\n activeGraphItem &&\n ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key) &&\n !selectedNodeId\n ) {\n let focusElementId: string | undefined | false;\n switch (e.key) {\n case 'ArrowUp':\n focusElementId = arrowUpKey({\n activeGraphItemId,\n graph,\n activeGraphItem,\n readOnly: readOnly ?? false\n });\n break;\n case 'ArrowDown':\n focusElementId = arrowDownKey({\n activeGraphItemId,\n graph,\n activeGraphItem,\n readOnly: readOnly ?? false\n });\n break;\n case 'ArrowLeft':\n focusElementId = horizontalNavigation({\n keyEvent: 'ArrowLeft',\n positions,\n activeGraphItem,\n graph,\n readOnly\n });\n break;\n case 'ArrowRight':\n focusElementId = horizontalNavigation({\n keyEvent: 'ArrowRight',\n positions,\n activeGraphItem,\n graph,\n readOnly\n });\n break;\n default:\n break;\n }\n\n if (focusElementId) {\n setActiveGraphItemId(focusElementId);\n elementScrollIntoView(focusElementId);\n }\n }\n };\n\n /** Saving the last selectedNodeId in a variable\n * so on close of workbench the focus can return to the node\n * might be removed in future when workbench handles re-focusing the target element on close\n */\n useEffect(() => {\n if (selectedNodeId) {\n prevSelectedNodeId.current = selectedNodeId;\n } else if (!selectedNodeId && prevSelectedNodeId.current) {\n setActiveGraphItemId(prevSelectedNodeId.current);\n prevSelectedNodeId.current = undefined;\n }\n }, [selectedNodeId]);\n\n const getNodeLabel = (target: string | undefined): string | undefined => {\n if (target) {\n const targetNode = graphData.nodes.find(nodeItem => nodeItem.id === target);\n return targetNode && 'label' in targetNode ? String(targetNode.label) : undefined;\n }\n return target;\n };\n\n return (\n <StyledWrapper ref={rendererRef}>\n <StyledContentWrapper>\n <svg\n width={graphDimensions.width}\n height={graphDimensions.height}\n viewBox={`0 0 ${graphDimensions.width} ${graphDimensions.height}`}\n >\n {rootNode && (\n <StyledRootNodeWrapper\n width={rootNode.dimensions.width}\n height={rootNode.dimensions.height}\n x={rootNode.position.x}\n y={rootNode.position.y}\n >\n <Node\n {...rootNode}\n active={rootNode.id === activeGraphItemId}\n onFocus={() => {\n setActiveGraphItemId(rootNode.id);\n }}\n onKeyDown={onKeyDown}\n />\n </StyledRootNodeWrapper>\n )}\n {graphData.connectors.map(item => {\n const fromNodeLabel = getNodeLabel(item.fromNodeId);\n const toNodeLabel = getNodeLabel(item.toNodeId);\n return (\n <Connector\n {...item}\n fromNodeLabel={fromNodeLabel}\n toNodeLabel={toNodeLabel}\n key={item.id}\n active={item.id === activeGraphItemId}\n onFocus={() => {\n setActiveGraphItemId(item.id);\n }}\n onKeyDown={onKeyDown}\n />\n );\n })}\n </svg>\n </StyledContentWrapper>\n <StyledContentWrapper>\n {graphData.nodes\n .filter(node => node.id !== rootNode?.id)\n .map(item => {\n let referencedNode;\n if (item.type?.minConnectors === 0 && item.reference) {\n referencedNode = graph.getNode(item.reference);\n }\n const prevNodeId = graphData.connectors.find(\n connector => connector.toNodeId === item.id\n )?.fromNodeId;\n const fromNodeLabel = getNodeLabel(prevNodeId);\n\n const nextNodeId = graphData.connectors.find(\n connector => connector.fromNodeId === item.id\n )?.toNodeId;\n const toNodeLabel = getNodeLabel(nextNodeId);\n\n return (\n <Flex\n key={item.id}\n as={StyledNodeWrapper}\n id={item.id}\n style={{\n '--width': `${item.dimensions.width}px`,\n '--height': `${item.dimensions.height}px`,\n '--xPos': `${item.position.x}px`,\n '--yPos': `${item.position.y}px`\n }}\n container={{ justify: 'center' }}\n >\n <Node\n {...item}\n fromNodeLabel={fromNodeLabel}\n toNodeLabel={toNodeLabel}\n referencedNode={referencedNode}\n active={item.id === activeGraphItemId}\n onFocus={() => {\n setActiveGraphItemId(item.id);\n }}\n onKeyDown={onKeyDown}\n />\n </Flex>\n );\n })}\n </StyledContentWrapper>\n </StyledWrapper>\n );\n};\n\nexport default Renderer;\n"]}
|
|
@@ -45,7 +45,7 @@ export const StyledMain = styled.div(({ theme: { base: { palette } } }) => {
|
|
|
45
45
|
return css `
|
|
46
46
|
height: 100%;
|
|
47
47
|
overflow: auto;
|
|
48
|
-
background
|
|
48
|
+
background: ${palette['app-background']};
|
|
49
49
|
`;
|
|
50
50
|
});
|
|
51
51
|
StyledMain.defaultProps = defaultThemeProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Workbench.styles.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAElG,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAC3B,EACF,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAE3E,OAAO,GAAG,CAAA;;aAEC,KAAK;;;0BAGQ,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;eACrC,SAAS;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;4BAEc,OAAO;0BACT,OAAO,CAAC,oBAAoB,CAAC;oCACnB,OAAO,CAAC,aAAa,CAAC;uCACnB,OAAO,CAAC,aAAa,CAAC;;QAErD,wBAAwB;;;;QAIxB,wBAAwB;;;+BAGD,OAAO;;oCAEF,OAAO,CAAC,aAAa,CAAC;;;KAGrD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;
|
|
1
|
+
{"version":3,"file":"Workbench.styles.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAElG,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAC3B,EACF,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAE3E,OAAO,GAAG,CAAA;;aAEC,KAAK;;;0BAGQ,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;eACrC,SAAS;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;4BAEc,OAAO;0BACT,OAAO,CAAC,oBAAoB,CAAC;oCACnB,OAAO,CAAC,aAAa,CAAC;uCACnB,OAAO,CAAC,aAAa,CAAC;;QAErD,wBAAwB;;;;QAIxB,wBAAwB;;;+BAGD,OAAO;;oCAEF,OAAO,CAAC,aAAa,CAAC;;;KAGrD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;oBAGM,OAAO,CAAC,gBAAgB,CAAC;KACxC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE3C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Button, Text, defaultThemeProp, readableColor, tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledPanelToggleWrapper = styled.div`\n height: 100%;\n`;\n\nStyledPanelToggleWrapper.defaultProps = defaultThemeProp;\n\nexport const UtilityPanelToggle = styled(Button)(props => {\n const {\n theme: {\n base: { colors, palette },\n components: {\n link: { color: linkColor }\n }\n }\n } = props;\n\n const color = tryCatch(() => readableColor(palette['primary-background']));\n\n return css`\n background-color: transparent;\n color: ${color};\n\n &[aria-selected='true'] {\n background-color: ${colors.blue['extra-light']};\n color: ${linkColor};\n }\n `;\n});\n\nUtilityPanelToggle.defaultProps = defaultThemeProp;\n\nexport const StyledToolbar = styled.div(\n ({\n theme: {\n base: { spacing, palette }\n }\n }) => {\n return css`\n height: 2.5rem;\n padding: 0 calc(2 * ${spacing});\n background-color: ${palette['primary-background']};\n border-top: 0.0625rem solid ${palette['border-line']};\n border-bottom: 0.0625rem solid ${palette['border-line']};\n\n ${StyledPanelToggleWrapper}:empty {\n display: none;\n }\n\n ${StyledPanelToggleWrapper}:not(:last-child) {\n ::after {\n content: '';\n margin: 0 calc(2 * ${spacing});\n height: 100%;\n border: 0.0625rem solid ${palette['border-line']};\n }\n }\n `;\n }\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div(\n ({\n theme: {\n base: { palette }\n }\n }) => {\n return css`\n height: 100%;\n overflow: auto;\n background: ${palette['app-background']};\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledWorkbench = styled.div`\n height: 100%;\n`;\n\nStyledWorkbench.defaultProps = defaultThemeProp;\n\nexport const StyledPanel = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n height: 100%;\n overflow-y: auto;\n `;\n});\n\nStyledPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPanelContent = styled.div`\n width: 25rem;\n`;\n\nStyledPanelContent.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`;\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-build",
|
|
3
|
-
"version": "10.0.0-build.2.
|
|
3
|
+
"version": "10.0.0-build.2.15",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@dagrejs/dagre": "^3.0.0",
|
|
18
|
-
"@pega/cosmos-react-core": "10.0.0-build.2.
|
|
19
|
-
"@pega/cosmos-react-dnd": "10.0.0-build.2.
|
|
20
|
-
"@pega/cosmos-react-rte": "10.0.0-build.2.
|
|
18
|
+
"@pega/cosmos-react-core": "10.0.0-build.2.15",
|
|
19
|
+
"@pega/cosmos-react-dnd": "10.0.0-build.2.15",
|
|
20
|
+
"@pega/cosmos-react-rte": "10.0.0-build.2.15",
|
|
21
21
|
"@types/codemirror": "^5.60.15",
|
|
22
22
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
23
23
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|