@pega/cosmos-react-build 9.0.0-build.9.9 → 9.0.0

package/lib/components/FlowModeller/DeleteDialog.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { Select, Option, Text, Flex, useI18n, useElement, FormDialog, defaultThemeProp } from '@pega/cosmos-react-core';
+import { DirectedGraph } from './Renderer/Utils/Graph';
+import deleteNodeUtils from './Utils/deleteNodeUtils';
+import { getReferences } from './helper';
+export const StyledDeleteDialog = styled(FormDialog)(({ theme }) => {
+    return css `
+    min-width: calc(30 * ${theme.base.spacing});
+  `;
+});
+StyledDeleteDialog.defaultProps = defaultThemeProp;
+const DeleteDialog = ({ target, flowGraphData, rendererGraphData, nodeId, onChange, onSubmit, onCancel }) => {
+    const [currentSelection, setCurrentSelection] = useState(0);
+    const [currNode, setCurrNode] = useElement();
+    const t = useI18n();
+    const graph = new DirectedGraph(rendererGraphData);
+    const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);
+    const deleteOptions = deleteOptionsResult.options;
+    const selectedPath = useMemo(() => {
+        if (currentSelection === -1 || !deleteOptions[currentSelection]) {
+            return 'none';
+        }
+        const option = deleteOptions[currentSelection];
+        return option.connector.label || option.connector.id;
+    }, [deleteOptions, currentSelection]);
+    const nodeType = graph.getNode(nodeId).type.name;
+    useEffect(() => {
+        if (deleteOptionsResult && deleteOptions[currentSelection]) {
+            const itemsToDelete = nodeType !== 'Decision'
+                ? deleteOptionsResult.allItems
+                : deleteOptions[currentSelection].restItems;
+            // add the actual node to be deleted also, to the list
+            itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);
+            setCurrNode(target);
+            onChange?.(itemsToDelete, deleteOptions[currentSelection].pathItems);
+        }
+    }, [rendererGraphData]);
+    const onChangeHandler = (ev) => {
+        const newSelection = ev.target.selectedIndex >= deleteOptions.length ? -1 : ev.target.selectedIndex;
+        setCurrentSelection(newSelection);
+        let itemsToDelete;
+        if (deleteOptionsResult) {
+            itemsToDelete = deleteOptionsResult.allItems;
+        }
+        let itemsToRetain;
+        if (newSelection !== -1) {
+            itemsToDelete = deleteOptions[newSelection].restItems;
+            itemsToRetain = deleteOptions[newSelection].pathItems;
+        }
+        // add the actual node to be deleted also, to the list
+        if (itemsToDelete) {
+            itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);
+        }
+        if (itemsToDelete) {
+            onChange?.(itemsToDelete, itemsToRetain, ev);
+        }
+    };
+    const submitHandler = () => {
+        let error = true;
+        const finalGraph = new DirectedGraph(flowGraphData);
+        const finalDeleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(finalGraph, nodeId);
+        let newTargetNode = finalDeleteOptionsResult?.destinationNodeId
+            ? finalGraph.getNode(finalDeleteOptionsResult.destinationNodeId)
+            : undefined;
+        let itemsToDelete = finalDeleteOptionsResult.allItems;
+        const selectedOption = currentSelection === -1 || nodeType !== 'Decision'
+            ? undefined
+            : finalDeleteOptionsResult?.options[currentSelection];
+        let finalMetaData = selectedOption;
+        if (selectedOption) {
+            const pathConnectors = selectedOption.pathItems.connectors;
+            const connectors = Object.keys(pathConnectors);
+            for (let i = 0; i < connectors.length; i += 1) {
+                const connectorData = pathConnectors[connectors[i]];
+                if (connectorData &&
+                    finalGraph.getNode(connectorData.fromNodeId).type?.minConnectors !== 0 &&
+                    connectorData.toNodeId === finalDeleteOptionsResult.destinationNodeId) {
+                    error = false;
+                    break;
+                }
+            }
+            const references = getReferences(Object.values(itemsToDelete.nodes), finalGraph);
+            if (error || references.length > 0) {
+                onSubmit?.({
+                    graphData: {
+                        nodes: [],
+                        connectors: []
+                    },
+                    updates: {
+                        connectors: []
+                    },
+                    deletes: { nodes: {}, connectors: {} },
+                    error: true,
+                    references
+                });
+                return;
+            }
+            finalMetaData = finalDeleteOptionsResult.options.find(current => selectedOption.connector.id === current.connector.id);
+            if (finalMetaData) {
+                // get the ref of the first node of the retaining path
+                newTargetNode = finalGraph.getNode(finalMetaData.connector.toNodeId);
+                itemsToDelete = finalMetaData.restItems;
+            }
+        }
+        // get the in-connectors of the selected node
+        const nodeInConnectors = finalGraph.getInConnectors(nodeId);
+        // iterate and set the targetNode to the above first node instead of the selected node.
+        if (newTargetNode) {
+            nodeInConnectors.forEach(con => {
+                finalGraph.setConnector(con.id, {
+                    toNodeId: newTargetNode.id
+                });
+            });
+        }
+        else {
+            // if no retaining path, then remove the in connectors of the deleted node as well
+            nodeInConnectors.forEach(con => {
+                finalGraph.removeConnector(con.id);
+            });
+        }
+        const resultGraphData = finalGraph.getGraphData();
+        itemsToDelete.nodes[nodeId] = finalGraph.getNode(nodeId);
+        // filter the highlighted nodes, including the selected node
+        const nodes = resultGraphData.nodes.filter(item => {
+            return itemsToDelete.nodes[item.id] === undefined;
+        });
+        if (finalMetaData) {
+            itemsToDelete.connectors[finalMetaData.connector.id] = finalMetaData.connector;
+        }
+        // filter the highlighted connectors
+        const connectors = resultGraphData.connectors.filter(item => {
+            return itemsToDelete.connectors[item.id] === undefined;
+        });
+        const outcome = {
+            graphData: {
+                nodes,
+                connectors
+            },
+            updates: {
+                connectors: nodeInConnectors
+            },
+            deletes: itemsToDelete,
+            error: false
+        };
+        onSubmit?.(outcome);
+    };
+    const onCancelHandler = () => {
+        currNode?.focus();
+        onCancel?.();
+    };
+    return (_jsx(StyledDeleteDialog, { target: target, heading: t('delete_step_title'), onCancel: onCancelHandler, onSubmit: submitHandler, placement: 'right-end', children: _jsx(Flex, { container: { gap: 2, pad: 2, direction: 'column' }, children: nodeType === 'Decision' ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: t('delete_decision_step') }), _jsxs(Select, { id: 'select-demo', label: t('delete_step_outcome'), value: selectedPath, required: true, onChange: onChangeHandler, children: [deleteOptions.map(item => {
+                                return (_jsx(Option, { value: item.connector.label ? item.connector.label : item.connector.id, children: item.connector.label ? item.connector.label : item.connector.id }, item.connector.id));
+                            }), _jsx(Option, { value: 'none', children: t('delete_all_outcomes') }, 'none')] })] })) : (_jsx(Text, { children: t('delete_step') })) }) }));
+};
+export default DeleteDialog;
+//# sourceMappingURL=DeleteDialog.js.map

package/lib/components/FlowModeller/DeleteDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteDialog.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/DeleteDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport type { ChangeEventHandler, ChangeEvent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Select,\n  Option,\n  Text,\n  Flex,\n  useI18n,\n  useElement,\n  FormDialog,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type { FormDialogProps } from '@pega/cosmos-react-core';\n\nimport { DirectedGraph } from './Renderer/Utils/Graph';\nimport type { GraphData } from './Renderer/Utils/Graph';\nimport type {\n  GraphDataAsMap,\n  DeleteNodeOutcome,\n  DeleteNodeModalOption\n} from './Utils/deleteNodeUtils';\nimport deleteNodeUtils from './Utils/deleteNodeUtils';\nimport type { NodeProps } from './Node/Node.types';\nimport { getReferences } from './helper';\n\nexport interface DeleteDialogProps {\n  target: FormDialogProps['target'];\n  flowGraphData: GraphData<NodeProps>;\n  rendererGraphData: GraphData<NodeProps>;\n  nodeId: string;\n  onChange?: (\n    itemsToDelete: GraphDataAsMap,\n    itemsToRetain: GraphDataAsMap | undefined,\n    ev?: ChangeEvent\n  ) => void;\n  onSubmit?: (outcome: DeleteNodeOutcome) => void;\n  onCancel?: () => void;\n  ref?: FormDialogProps['ref'];\n}\n\nexport const StyledDeleteDialog = styled(FormDialog)(({ theme }) => {\n  return css`\n    min-width: calc(30 * ${theme.base.spacing});\n  `;\n});\n\nStyledDeleteDialog.defaultProps = defaultThemeProp;\n\nconst DeleteDialog = ({\n  target,\n  flowGraphData,\n  rendererGraphData,\n  nodeId,\n  onChange,\n  onSubmit,\n  onCancel\n}: PropsWithoutRef<DeleteDialogProps>) => {\n  const [currentSelection, setCurrentSelection] = useState<number>(0);\n\n  const [currNode, setCurrNode] = useElement<HTMLElement>();\n\n  const t = useI18n();\n\n  const graph = new DirectedGraph<NodeProps>(rendererGraphData);\n\n  const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);\n\n  const deleteOptions: DeleteNodeModalOption[] = deleteOptionsResult.options;\n\n  const selectedPath: string = useMemo(() => {\n    if (currentSelection === -1 || !deleteOptions[currentSelection]) {\n      return 'none';\n    }\n    const option = deleteOptions[currentSelection];\n    return option.connector.label || option.connector.id;\n  }, [deleteOptions, currentSelection]);\n\n  const nodeType = graph.getNode(nodeId).type.name;\n\n  useEffect(() => {\n    if (deleteOptionsResult && deleteOptions[currentSelection]) {\n      const itemsToDelete: GraphDataAsMap =\n        nodeType !== 'Decision'\n          ? deleteOptionsResult.allItems\n          : deleteOptions[currentSelection].restItems;\n\n      // add the actual node to be deleted also, to the list\n      itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n      setCurrNode(target);\n      onChange?.(itemsToDelete, deleteOptions[currentSelection].pathItems);\n    }\n  }, [rendererGraphData]);\n\n  const onChangeHandler: ChangeEventHandler = (ev: ChangeEvent<HTMLSelectElement>) => {\n    const newSelection =\n      ev.target.selectedIndex >= deleteOptions.length ? -1 : ev.target.selectedIndex;\n\n    setCurrentSelection(newSelection);\n\n    let itemsToDelete;\n    if (deleteOptionsResult) {\n      itemsToDelete = deleteOptionsResult.allItems;\n    }\n\n    let itemsToRetain;\n\n    if (newSelection !== -1) {\n      itemsToDelete = deleteOptions[newSelection].restItems;\n      itemsToRetain = deleteOptions[newSelection].pathItems;\n    }\n\n    // add the actual node to be deleted also, to the list\n    if (itemsToDelete) {\n      itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n    }\n\n    if (itemsToDelete) {\n      onChange?.(itemsToDelete, itemsToRetain, ev);\n    }\n  };\n\n  const submitHandler = () => {\n    let error = true;\n    const finalGraph = new DirectedGraph<NodeProps>(flowGraphData);\n    const finalDeleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(finalGraph, nodeId);\n\n    let newTargetNode = finalDeleteOptionsResult?.destinationNodeId\n      ? finalGraph.getNode(finalDeleteOptionsResult.destinationNodeId)\n      : undefined;\n    let itemsToDelete = finalDeleteOptionsResult.allItems;\n\n    const selectedOption =\n      currentSelection === -1 || nodeType !== 'Decision'\n        ? undefined\n        : finalDeleteOptionsResult?.options[currentSelection];\n    let finalMetaData = selectedOption;\n\n    if (selectedOption) {\n      const pathConnectors = selectedOption.pathItems.connectors;\n      const connectors = Object.keys(pathConnectors);\n      for (let i = 0; i < connectors.length; i += 1) {\n        const connectorData = pathConnectors[connectors[i]];\n        if (\n          connectorData &&\n          finalGraph.getNode(connectorData.fromNodeId).type?.minConnectors !== 0 &&\n          connectorData.toNodeId === finalDeleteOptionsResult.destinationNodeId\n        ) {\n          error = false;\n          break;\n        }\n      }\n\n      const references = getReferences(Object.values(itemsToDelete.nodes), finalGraph);\n      if (error || references.length > 0) {\n        onSubmit?.({\n          graphData: {\n            nodes: [],\n            connectors: []\n          },\n          updates: {\n            connectors: []\n          },\n          deletes: { nodes: {}, connectors: {} },\n          error: true,\n          references\n        });\n        return;\n      }\n\n      finalMetaData = finalDeleteOptionsResult.options.find(\n        current => selectedOption.connector.id === current.connector.id\n      );\n\n      if (finalMetaData) {\n        // get the ref of the first node of the retaining path\n        newTargetNode = finalGraph.getNode(finalMetaData.connector.toNodeId);\n        itemsToDelete = finalMetaData.restItems;\n      }\n    }\n\n    // get the in-connectors of the selected node\n    const nodeInConnectors = finalGraph.getInConnectors(nodeId);\n\n    // iterate and set the targetNode to the above first node instead of the selected node.\n    if (newTargetNode) {\n      nodeInConnectors.forEach(con => {\n        finalGraph.setConnector(con.id, {\n          toNodeId: newTargetNode.id\n        });\n      });\n    } else {\n      // if no retaining path, then remove the in connectors of the deleted node as well\n      nodeInConnectors.forEach(con => {\n        finalGraph.removeConnector(con.id);\n      });\n    }\n\n    const resultGraphData = finalGraph.getGraphData();\n\n    itemsToDelete.nodes[nodeId] = finalGraph.getNode(nodeId);\n\n    // filter the highlighted nodes, including the selected node\n    const nodes = resultGraphData.nodes.filter(item => {\n      return itemsToDelete.nodes[item.id] === undefined;\n    });\n\n    if (finalMetaData) {\n      itemsToDelete.connectors[finalMetaData.connector.id] = finalMetaData.connector;\n    }\n\n    // filter the highlighted connectors\n    const connectors = resultGraphData.connectors.filter(item => {\n      return itemsToDelete.connectors[item.id] === undefined;\n    });\n\n    const outcome: DeleteNodeOutcome = {\n      graphData: {\n        nodes,\n        connectors\n      },\n      updates: {\n        connectors: nodeInConnectors\n      },\n      deletes: itemsToDelete,\n      error: false\n    };\n    onSubmit?.(outcome);\n  };\n\n  const onCancelHandler = () => {\n    currNode?.focus();\n    onCancel?.();\n  };\n\n  return (\n    <StyledDeleteDialog\n      target={target}\n      heading={t('delete_step_title')}\n      onCancel={onCancelHandler}\n      onSubmit={submitHandler}\n      placement='right-end'\n    >\n      <Flex container={{ gap: 2, pad: 2, direction: 'column' }}>\n        {nodeType === 'Decision' ? (\n          <>\n            <Text>{t('delete_decision_step')}</Text>\n            <Select\n              id='select-demo'\n              label={t('delete_step_outcome')}\n              value={selectedPath}\n              required\n              onChange={onChangeHandler}\n            >\n              {deleteOptions.map(item => {\n                return (\n                  <Option\n                    key={item.connector.id}\n                    value={item.connector.label ? item.connector.label : item.connector.id}\n                  >\n                    {item.connector.label ? item.connector.label : item.connector.id}\n                  </Option>\n                );\n              })}\n\n              <Option key='none' value='none'>\n                {t('delete_all_outcomes')}\n              </Option>\n            </Select>\n          </>\n        ) : (\n          <Text>{t('delete_step')}</Text>\n        )}\n      </Flex>\n    </StyledDeleteDialog>\n  );\n};\n\nexport default DeleteDialog;\n"]}

package/lib/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.d.ts

@@ -0,0 +1,4 @@
+import type { FlowAuthoringPanelProps } from './FlowAuthoringPanel.types';
+declare const FlowAuthoringPanel: ({ open, content, header, onDismiss, progress, target }: FlowAuthoringPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default FlowAuthoringPanel;
+//# sourceMappingURL=FlowAuthoringPanel.d.ts.map

package/lib/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowAuthoringPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AA8D1E,QAAA,MAAM,kBAAkB,GAAI,wDAOzB,uBAAuB,mDA2FzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Icon, registerIcon, Text, Button, Progress, Flex, useEscape, useDirection, Drawer, useI18n } from '@pega/cosmos-react-core';
+import { resizeDrawerDefaultWidth } from '@pega/cosmos-react-core/lib/styles/constants';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import IconTile from '../../IconTile';
+import { StyledPreviewDrawer, StyledFlowAuthoringPanel, StyledProgressContainer, StyledPanelContent, StyledPanelHeader, StyledPanelPage } from './FlowAuthoringPanel.styles';
+registerIcon(timesIcon);
+const FlowAuthoringPanelHeader = ({ header, onDismiss, dismissButtonRef }) => {
+    const t = useI18n();
+    return (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 2 }, children: [_jsxs(Flex, { container: { gap: 1.5 }, children: [header?.visual && (_jsx(IconTile, { name: header.visual.name, label: header.visual.label, category: header.visual.category, inverted: header.visual.inverted, set: header.visual.set, size: 'xl' })), _jsxs(Flex, { container: { direction: 'column', gap: 0.5 }, children: [header?.secondary?.title && (_jsx(Text, { variant: 'primary', id: 'panel-title', children: header.secondary.title })), header?.primary?.title && _jsx(Text, { variant: 'h2', children: header.primary.title })] })] }), onDismiss && (_jsx(Button, { icon: true, variant: 'simple', compact: true, ref: dismissButtonRef, label: t('close_panel'), onClick: onDismiss, children: _jsx(Icon, { name: 'times' }) }))] }));
+};
+const FlowAuthoringPanel = ({ open, content, header, onDismiss, progress = false, target }) => {
+    const panelRef = useRef(null);
+    const dismissButtonRef = useRef(null);
+    const direction = useDirection();
+    const t = useI18n();
+    useEffect(() => {
+        if (open && dismissButtonRef.current && !progress) {
+            dismissButtonRef.current.focus();
+        }
+    }, [open, progress]);
+    const dismissPanel = () => {
+        onDismiss?.(target || undefined);
+    };
+    useEscape(() => {
+        if (open) {
+            dismissPanel();
+        }
+    });
+    if (!open) {
+        return null;
+    }
+    return (_jsx(Drawer, { as: StyledPreviewDrawer, role: 'complementary', forwardedAs: Flex, container: { direction: 'column' }, ref: panelRef, open: open, position: 'absolute', placement: direction.end, "aria-label": header?.primary?.title, shadow: true, nullWhenClosed: true, resizeable: true, size: resizeDrawerDefaultWidth, children: open && (_jsx(Flex, { container: { direction: 'column' }, item: { grow: 1, shrink: 1 }, as: StyledFlowAuthoringPanel, open: open, children: progress ? (_jsxs(Flex, { container: { direction: 'column' }, as: StyledProgressContainer, children: [onDismiss && (_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { icon: true, variant: 'simple', compact: true, ref: dismissButtonRef, label: t('close_panel'), onClick: dismissPanel, children: _jsx(Icon, { name: 'times' }) }) })), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: 'local', message: typeof progress === 'string' ? progress : undefined })] })) : (_jsxs(Flex, { as: StyledPanelPage, container: { direction: 'column' }, children: [_jsx(Flex, { item: { shrink: 0 }, as: StyledPanelHeader, children: _jsx(FlowAuthoringPanelHeader, { header: header, onDismiss: onDismiss ? dismissPanel : undefined, dismissButtonRef: dismissButtonRef }) }), _jsx(Flex, { item: { grow: 1, shrink: 1 }, as: StyledPanelContent, children: content })] })) })) }));
+};
+export default FlowAuthoringPanel;
+//# sourceMappingURL=FlowAuthoringPanel.js.map

package/lib/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowAuthoringPanel.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport {\n  Icon,\n  registerIcon,\n  Text,\n  Button,\n  Progress,\n  Flex,\n  useEscape,\n  useDirection,\n  Drawer,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { resizeDrawerDefaultWidth } from '@pega/cosmos-react-core/lib/styles/constants';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport IconTile from '../../IconTile';\n\nimport type { FlowAuthoringPanelProps } from './FlowAuthoringPanel.types';\nimport {\n  StyledPreviewDrawer,\n  StyledFlowAuthoringPanel,\n  StyledProgressContainer,\n  StyledPanelContent,\n  StyledPanelHeader,\n  StyledPanelPage\n} from './FlowAuthoringPanel.styles';\n\nregisterIcon(timesIcon);\n\nconst FlowAuthoringPanelHeader = ({\n  header,\n  onDismiss,\n  dismissButtonRef\n}: {\n  header?: FlowAuthoringPanelProps['header'];\n  onDismiss?: () => void;\n  dismissButtonRef: React.RefObject<HTMLButtonElement>;\n}) => {\n  const t = useI18n();\n  return (\n    <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }}>\n      <Flex container={{ gap: 1.5 }}>\n        {header?.visual && (\n          <IconTile\n            name={header.visual.name}\n            label={header.visual.label}\n            category={header.visual.category}\n            inverted={header.visual.inverted}\n            set={header.visual.set}\n            size='xl'\n          />\n        )}\n\n        <Flex container={{ direction: 'column', gap: 0.5 }}>\n          {header?.secondary?.title && (\n            <Text variant='primary' id='panel-title'>\n              {header.secondary.title}\n            </Text>\n          )}\n          {header?.primary?.title && <Text variant='h2'>{header.primary.title}</Text>}\n        </Flex>\n      </Flex>\n\n      {onDismiss && (\n        <Button\n          icon\n          variant='simple'\n          compact\n          ref={dismissButtonRef}\n          label={t('close_panel')}\n          onClick={onDismiss}\n        >\n          <Icon name='times' />\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\nconst FlowAuthoringPanel = ({\n  open,\n  content,\n  header,\n  onDismiss,\n  progress = false,\n  target\n}: FlowAuthoringPanelProps) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const dismissButtonRef = useRef<HTMLButtonElement>(null);\n  const direction = useDirection();\n  const t = useI18n();\n\n  useEffect(() => {\n    if (open && dismissButtonRef.current && !progress) {\n      dismissButtonRef.current.focus();\n    }\n  }, [open, progress]);\n\n  const dismissPanel = () => {\n    onDismiss?.(target || undefined);\n  };\n\n  useEscape(() => {\n    if (open) {\n      dismissPanel();\n    }\n  });\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <Drawer\n      as={StyledPreviewDrawer}\n      role='complementary'\n      forwardedAs={Flex}\n      container={{ direction: 'column' }}\n      ref={panelRef}\n      open={open}\n      position='absolute'\n      placement={direction.end}\n      aria-label={header?.primary?.title}\n      shadow\n      nullWhenClosed\n      resizeable\n      size={resizeDrawerDefaultWidth}\n    >\n      {open && (\n        <Flex\n          container={{ direction: 'column' }}\n          item={{ grow: 1, shrink: 1 }}\n          as={StyledFlowAuthoringPanel}\n          open={open}\n        >\n          {progress ? (\n            <Flex container={{ direction: 'column' }} as={StyledProgressContainer}>\n              {onDismiss && (\n                <Flex container={{ justify: 'end' }}>\n                  <Button\n                    icon\n                    variant='simple'\n                    compact\n                    ref={dismissButtonRef}\n                    label={t('close_panel')}\n                    onClick={dismissPanel}\n                  >\n                    <Icon name='times' />\n                  </Button>\n                </Flex>\n              )}\n\n              <Progress\n                visible={!!progress}\n                focusOnVisible\n                placement='local'\n                message={typeof progress === 'string' ? progress : undefined}\n              />\n            </Flex>\n          ) : (\n            <Flex as={StyledPanelPage} container={{ direction: 'column' }}>\n              <Flex item={{ shrink: 0 }} as={StyledPanelHeader}>\n                <FlowAuthoringPanelHeader\n                  header={header}\n                  onDismiss={onDismiss ? dismissPanel : undefined}\n                  dismissButtonRef={dismissButtonRef}\n                />\n              </Flex>\n              <Flex item={{ grow: 1, shrink: 1 }} as={StyledPanelContent}>\n                {content}\n              </Flex>\n            </Flex>\n          )}\n        </Flex>\n      )}\n    </Drawer>\n  );\n};\n\nexport default FlowAuthoringPanel;\n"]}

package/lib/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.styles.d.ts

@@ -0,0 +1,8 @@
+import type { FlowAuthoringPanelProps } from './FlowAuthoringPanel.types';
+export declare const StyledPreviewDrawer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFlowAuthoringPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<FlowAuthoringPanelProps, "open">>> & string;
+export declare const StyledProgressContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledPanelContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledPanelPage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledPanelHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+//# sourceMappingURL=FlowAuthoringPanel.styles.d.ts.map

package/lib/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowAuthoringPanel.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.styles.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E,eAAO,MAAM,mBAAmB,6NAqB9B,CAAC;AAGH,eAAO,MAAM,wBAAwB,0QAgBpC,CAAC;AAGF,eAAO,MAAM,uBAAuB,6NAQlC,CAAC;AAGH,eAAO,MAAM,kBAAkB,6NAM7B,CAAC;AAGH,eAAO,MAAM,eAAe,6NAQ1B,CAAC;AAGH,eAAO,MAAM,iBAAiB,6NAO5B,CAAC"}

package/lib/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.styles.js

@@ -0,0 +1,80 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, StyledButton, readableHue } from '@pega/cosmos-react-core';
+import { resizeDrawerMaxWidth, resizeDrawerMinWidth } from '@pega/cosmos-react-core/lib/styles/constants';
+export const StyledPreviewDrawer = styled.div(({ theme }) => {
+    return css `
+    min-width: ${resizeDrawerMinWidth};
+    max-width: ${resizeDrawerMaxWidth};
+    width: var(--resize-drawer-width);
+    background: ${theme.base.palette['primary-background']};
+    height: 100%;
+    z-index: 0;
+    transition-property: transform, box-shadow, opacity, border-inline-start;
+    transition-duration: max(${theme.base.animation.speed}, 0.0001s);
+    transition-timing-function: ${theme.base.animation.timing.ease};
+
+    @media (min-width: ${theme.base.breakpoints.xl}) {
+      box-shadow: none;
+      border-inline-start: 0.0625rem solid
+        ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {
+        mode: 'both',
+        level: 'AANonText'
+    })};
+    }
+  `;
+});
+StyledPreviewDrawer.defaultProps = defaultThemeProp;
+export const StyledFlowAuthoringPanel = styled.div(({ open, theme }) => {
+    const { animation, palette, spacing } = theme.base;
+    const translate = open ? 0 : '100%';
+    return css `
+      height: 100%;
+      min-height: 0;
+      overflow: hidden;
+      position: relative;
+      border: solid calc(0.125 * ${spacing}) ${palette['border-line']};
+      transition-property: transform, opacity;
+      transition-duration: calc(2 * ${animation.speed});
+      transition-timing-function: ${animation.timing.ease};
+      transform: ${open ? 'none' : `translateX(${translate})`};
+    `;
+});
+StyledFlowAuthoringPanel.defaultProps = defaultThemeProp;
+export const StyledProgressContainer = styled.div(({ theme }) => {
+    return css `
+    padding: calc(2 * ${theme.base.spacing});
+    width: 100%;
+    ${StyledButton} {
+      z-index: ${theme.base['z-index'].drawer};
+    }
+  `;
+});
+StyledProgressContainer.defaultProps = defaultThemeProp;
+export const StyledPanelContent = styled.div(({ theme }) => {
+    return css `
+    min-height: 0;
+    overflow: auto;
+    padding: calc(2 * ${theme.base.spacing});
+  `;
+});
+StyledPanelContent.defaultProps = defaultThemeProp;
+export const StyledPanelPage = styled.div(({ theme }) => {
+    return css `
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    background: ${theme.base.palette['primary-background']};
+  `;
+});
+StyledPanelPage.defaultProps = defaultThemeProp;
+export const StyledPanelHeader = styled.div(({ theme }) => {
+    const { spacing, palette } = theme.base;
+    return css `
+    padding-block: calc(2 * ${spacing});
+    padding-inline: calc(2 * ${spacing});
+    border-bottom: solid calc(0.125 * ${spacing}) ${palette['border-line']};
+  `;
+});
+StyledPanelHeader.defaultProps = defaultThemeProp;
+//# sourceMappingURL=FlowAuthoringPanel.styles.js.map

package/lib/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowAuthoringPanel.styles.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledButton, readableHue } from '@pega/cosmos-react-core';\nimport {\n  resizeDrawerMaxWidth,\n  resizeDrawerMinWidth\n} from '@pega/cosmos-react-core/lib/styles/constants';\n\nimport type { FlowAuthoringPanelProps } from './FlowAuthoringPanel.types';\n\nexport const StyledPreviewDrawer = styled.div(({ theme }) => {\n  return css`\n    min-width: ${resizeDrawerMinWidth};\n    max-width: ${resizeDrawerMaxWidth};\n    width: var(--resize-drawer-width);\n    background: ${theme.base.palette['primary-background']};\n    height: 100%;\n    z-index: 0;\n    transition-property: transform, box-shadow, opacity, border-inline-start;\n    transition-duration: max(${theme.base.animation.speed}, 0.0001s);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\n      box-shadow: none;\n      border-inline-start: 0.0625rem solid\n        ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n          mode: 'both',\n          level: 'AANonText'\n        })};\n    }\n  `;\n});\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledFlowAuthoringPanel = styled.div<Pick<FlowAuthoringPanelProps, 'open'>>(\n  ({ open, theme }) => {\n    const { animation, palette, spacing } = theme.base;\n    const translate = open ? 0 : '100%';\n    return css`\n      height: 100%;\n      min-height: 0;\n      overflow: hidden;\n      position: relative;\n      border: solid calc(0.125 * ${spacing}) ${palette['border-line']};\n      transition-property: transform, opacity;\n      transition-duration: calc(2 * ${animation.speed});\n      transition-timing-function: ${animation.timing.ease};\n      transform: ${open ? 'none' : `translateX(${translate})`};\n    `;\n  }\n);\nStyledFlowAuthoringPanel.defaultProps = defaultThemeProp;\n\nexport const StyledProgressContainer = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    width: 100%;\n    ${StyledButton} {\n      z-index: ${theme.base['z-index'].drawer};\n    }\n  `;\n});\nStyledProgressContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPanelContent = styled.div(({ theme }) => {\n  return css`\n    min-height: 0;\n    overflow: auto;\n    padding: calc(2 * ${theme.base.spacing});\n  `;\n});\nStyledPanelContent.defaultProps = defaultThemeProp;\n\nexport const StyledPanelPage = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: ${theme.base.palette['primary-background']};\n  `;\n});\nStyledPanelPage.defaultProps = defaultThemeProp;\n\nexport const StyledPanelHeader = styled.div(({ theme }) => {\n  const { spacing, palette } = theme.base;\n  return css`\n    padding-block: calc(2 * ${spacing});\n    padding-inline: calc(2 * ${spacing});\n    border-bottom: solid calc(0.125 * ${spacing}) ${palette['border-line']};\n  `;\n});\nStyledPanelHeader.defaultProps = defaultThemeProp;\n"]}

package/lib/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.types.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode, MouseEvent, KeyboardEvent } from 'react';
+import type { ProgressProps, OmitStrict } from '@pega/cosmos-react-core';
+import type { IconTileProps } from '../../IconTile';
+export interface FlowAuthoringPanelProps {
+    /** If true, the Panel will be visible. */
+    open: boolean;
+    /** A region to display panel content. */
+    content: ReactNode;
+    /** Panel header configuration. */
+    header?: {
+        primary?: {
+            /** The primary header text on the panel. */
+            title: string;
+            href?: string;
+            onClick?: (e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+        };
+        secondary?: {
+            /** The secondary header text on the panel. */
+            title: string;
+            href?: string;
+            onClick?: (e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+        };
+        /** A visual associated with the panel header. */
+        visual?: OmitStrict<IconTileProps, 'size'>;
+    };
+    /** Dismiss handler for the panel. */
+    onDismiss?: (element?: HTMLElement) => void;
+    /** If true, the Panel will render a progress loader. */
+    progress?: boolean | ProgressProps['message'];
+    /**
+     * An element the panel is contextually and visually associated with.
+     * On dismiss, focus is returned back to this element.
+     */
+    target?: HTMLElement | null;
+}
+//# sourceMappingURL=FlowAuthoringPanel.types.d.ts.map

package/lib/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowAuthoringPanel.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,uBAAuB;IACtC,0CAA0C;IAC1C,IAAI,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,kCAAkC;IAClC,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE;YACR,4CAA4C;YAC5C,KAAK,EAAE,MAAM,CAAC;YACd,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;SAC7E,CAAC;QACF,SAAS,CAAC,EAAE;YACV,8CAA8C;YAC9C,KAAK,EAAE,MAAM,CAAC;YACd,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;SAC7E,CAAC;QACF,iDAAiD;QACjD,MAAM,CAAC,EAAE,UAAU,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KAC5C,CAAC;IACF,qCAAqC;IACrC,SAAS,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B"}

package/lib/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FlowAuthoringPanel.types.js.map

package/lib/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowAuthoringPanel.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/FlowAuthoringPanel/FlowAuthoringPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, MouseEvent, KeyboardEvent } from 'react';\n\nimport type { ProgressProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport type { IconTileProps } from '../../IconTile';\n\nexport interface FlowAuthoringPanelProps {\n  /** If true, the Panel will be visible. */\n  open: boolean;\n  /** A region to display panel content. */\n  content: ReactNode;\n  /** Panel header configuration. */\n  header?: {\n    primary?: {\n      /** The primary header text on the panel. */\n      title: string;\n      href?: string;\n      onClick?: (e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n    };\n    secondary?: {\n      /** The secondary header text on the panel. */\n      title: string;\n      href?: string;\n      onClick?: (e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n    };\n    /** A visual associated with the panel header. */\n    visual?: OmitStrict<IconTileProps, 'size'>;\n  };\n  /** Dismiss handler for the panel. */\n  onDismiss?: (element?: HTMLElement) => void;\n  /** If true, the Panel will render a progress loader. */\n  progress?: boolean | ProgressProps['message'];\n  /**\n   * An element the panel is contextually and visually associated with.\n   * On dismiss, focus is returned back to this element.\n   */\n  target?: HTMLElement | null;\n}\n"]}

package/lib/components/FlowModeller/FlowModeller.d.ts

@@ -0,0 +1,5 @@
+import type { PropsWithoutRef } from 'react';
+import type { FlowModellerProps } from './FlowModeller.types';
+declare const _default: import("react").MemoExoticComponent<({ graphData, highlightData, onNodeActionClick, onNodeAdd, nodeLibrary, onNodeClick, onDelete, actions, readOnly, selectedNodeId, panel }: PropsWithoutRef<FlowModellerProps>) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+//# sourceMappingURL=FlowModeller.d.ts.map

package/lib/components/FlowModeller/FlowModeller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAuB,eAAe,EAAE,MAAM,OAAO,CAAC;AAyBlE,OAAO,KAAK,EAAE,iBAAiB,EAAgC,MAAM,sBAAsB,CAAC;uMAsHzF,eAAe,CAAC,iBAAiB,CAAC;AAkUrC,wBAAkC"}