@pega/cosmos-react-build 9.0.0-build.21.8 → 9.0.0-build.22.0

package/lib/components/DynamicInput/DynamicInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAAiB,CAAC;AAEtD,eAAO,MAAM,kBAAkB;eAA2B,OAAO;eAAa,OAAO;YA+FpF,CAAC"}
+{"version":3,"file":"DynamicInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAAiB,CAAC;AAEtD,eAAO,MAAM,kBAAkB;eAA2B,OAAO;eAAa,OAAO;YA6FpF,CAAC"}

package/lib/components/DynamicInput/DynamicInput.styles.js

@@ -49,12 +49,10 @@ export const StyledDynamicInput = styled.div(({ theme: { base: { palette: { 'for
 
       ${StyledMenuButton} {
         z-index: 0;
-        height: 100%;
         border-inline-end: 0;
         border-color: ${formControlBorderColor};
         border-start-end-radius: 0;
         border-end-end-radius: 0;
-        align-self: flex-start;
         color: ${foregroundColor};
         &:focus {
           z-index: 2;

package/lib/components/DynamicInput/DynamicInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicInput.styles.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,8DAA8D,CAAC;AAEhG,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AACnG,OAAO,EACL,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,yCAAyC,CAAC;AAEjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAEtD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,eAAe,EAAE,YAAY,EAC9B,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EACd,cAAc,EAAE,sBAAsB,EACtC,YAAY,EAAE,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,EAC9D,EACF,EACF,EACD,QAAQ,EACT,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;QAIN,eAAe;;;;QAIf,0BAA0B,MAAM,yBAAyB,MAAM,UAAU;;;;QAIzE,oBAAoB;;;;QAIpB,iBAAiB;;;;QAIjB,iBAAiB;;;;;;QAMjB,uBAAuB;;;;;;;;;;0BAUL,sBAAsB;;;;;;QAMxC,gBAAgB;;;;wBAIA,sBAAsB;;;;iBAI7B,eAAe;;;;;;;;UAQtB,gBAAgB;;;;;QAKlB,QAAQ;QACV,GAAG,CAAA;UACC,gBAAgB;8BACI,uBAAuB;;OAE9C;;QAEC,gBAAgB;;;;;qBAKH,YAAY,CAAC,EAAE;;KAE/B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  StyledFormControl,\n  StyledGrid,\n  StyledSelectInput,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';\n\nimport { StyledContentWrapper, StyledInputTree } from '../ObjectSelect/InputTree/InputTree.styles';\nimport {\n  StyledFieldReferenceInput,\n  StyledFieldReferencePicker\n} from '../FieldReference/FieldReference.styles';\n\nexport const StyledExpressionControl = styled(Flex)``;\n\nexport const StyledDynamicInput = styled.div<{ disabled?: boolean; readOnly?: boolean }>(\n  ({\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor },\n        'content-width': contentWidth\n      },\n      components: {\n        'form-control': {\n          'border-color': formControlBorderColor,\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        }\n      }\n    },\n    readOnly\n  }) => {\n    return css`\n      display: flex;\n      flex-grow: 1;\n\n      ${StyledInputTree} {\n        margin-inline-start: -2.5rem;\n      }\n\n      ${StyledFieldReferencePicker} > ${StyledFieldReferenceInput} > ${StyledGrid} {\n        padding: 0;\n      }\n\n      ${StyledContentWrapper} {\n        padding-block-start: 0;\n      }\n\n      ${StyledSelectInput} {\n        height: 100%;\n      }\n\n      ${StyledFormControl} {\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n        width: 100%;\n      }\n\n      ${StyledExpressionControl} {\n        position: relative;\n        z-index: 1;\n\n        .react-codemirror2 {\n          min-height: 0;\n        }\n\n        .CodeMirror,\n        .CodeMirror-wrap {\n          border-color: ${formControlBorderColor};\n          border-start-start-radius: 0;\n          border-end-start-radius: 0;\n        }\n      }\n\n      ${StyledMenuButton} {\n        z-index: 0;\n        height: 100%;\n        border-inline-end: 0;\n        border-color: ${formControlBorderColor};\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        align-self: flex-start;\n        color: ${foregroundColor};\n        &:focus {\n          z-index: 2;\n        }\n      }\n\n      /* disabled-opacity is already being applied on DynamicInput, so we need to unset it on MenuButton */\n      &[disabled] {\n        ${StyledMenuButton}:disabled {\n          opacity: 1;\n        }\n      }\n\n      ${readOnly &&\n      css`\n        ${StyledMenuButton} {\n          background-color: ${readOnlyBackgroundColor};\n        }\n      `}\n\n      ${StyledMenuButton} + * {\n        flex-grow: 1;\n        z-index: 1;\n        width: 100%;\n        height: auto;\n        min-width: ${contentWidth.xs};\n      }\n    `;\n  }\n);\n\nStyledDynamicInput.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"DynamicInput.styles.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,8DAA8D,CAAC;AAEhG,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AACnG,OAAO,EACL,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,yCAAyC,CAAC;AAEjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAEtD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,eAAe,EAAE,YAAY,EAC9B,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EACd,cAAc,EAAE,sBAAsB,EACtC,YAAY,EAAE,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,EAC9D,EACF,EACF,EACD,QAAQ,EACT,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;QAIN,eAAe;;;;QAIf,0BAA0B,MAAM,yBAAyB,MAAM,UAAU;;;;QAIzE,oBAAoB;;;;QAIpB,iBAAiB;;;;QAIjB,iBAAiB;;;;;;QAMjB,uBAAuB;;;;;;;;;;0BAUL,sBAAsB;;;;;;QAMxC,gBAAgB;;;wBAGA,sBAAsB;;;iBAG7B,eAAe;;;;;;;;UAQtB,gBAAgB;;;;;QAKlB,QAAQ;QACV,GAAG,CAAA;UACC,gBAAgB;8BACI,uBAAuB;;OAE9C;;QAEC,gBAAgB;;;;;qBAKH,YAAY,CAAC,EAAE;;KAE/B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  StyledFormControl,\n  StyledGrid,\n  StyledSelectInput,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';\n\nimport { StyledContentWrapper, StyledInputTree } from '../ObjectSelect/InputTree/InputTree.styles';\nimport {\n  StyledFieldReferenceInput,\n  StyledFieldReferencePicker\n} from '../FieldReference/FieldReference.styles';\n\nexport const StyledExpressionControl = styled(Flex)``;\n\nexport const StyledDynamicInput = styled.div<{ disabled?: boolean; readOnly?: boolean }>(\n  ({\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor },\n        'content-width': contentWidth\n      },\n      components: {\n        'form-control': {\n          'border-color': formControlBorderColor,\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        }\n      }\n    },\n    readOnly\n  }) => {\n    return css`\n      display: flex;\n      flex-grow: 1;\n\n      ${StyledInputTree} {\n        margin-inline-start: -2.5rem;\n      }\n\n      ${StyledFieldReferencePicker} > ${StyledFieldReferenceInput} > ${StyledGrid} {\n        padding: 0;\n      }\n\n      ${StyledContentWrapper} {\n        padding-block-start: 0;\n      }\n\n      ${StyledSelectInput} {\n        height: 100%;\n      }\n\n      ${StyledFormControl} {\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n        width: 100%;\n      }\n\n      ${StyledExpressionControl} {\n        position: relative;\n        z-index: 1;\n\n        .react-codemirror2 {\n          min-height: 0;\n        }\n\n        .CodeMirror,\n        .CodeMirror-wrap {\n          border-color: ${formControlBorderColor};\n          border-start-start-radius: 0;\n          border-end-start-radius: 0;\n        }\n      }\n\n      ${StyledMenuButton} {\n        z-index: 0;\n        border-inline-end: 0;\n        border-color: ${formControlBorderColor};\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        color: ${foregroundColor};\n        &:focus {\n          z-index: 2;\n        }\n      }\n\n      /* disabled-opacity is already being applied on DynamicInput, so we need to unset it on MenuButton */\n      &[disabled] {\n        ${StyledMenuButton}:disabled {\n          opacity: 1;\n        }\n      }\n\n      ${readOnly &&\n      css`\n        ${StyledMenuButton} {\n          background-color: ${readOnlyBackgroundColor};\n        }\n      `}\n\n      ${StyledMenuButton} + * {\n        flex-grow: 1;\n        z-index: 1;\n        width: 100%;\n        height: auto;\n        min-width: ${contentWidth.xs};\n      }\n    `;\n  }\n);\n\nStyledDynamicInput.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,22 @@
+import type { MouseEvent } from 'react';
+import type { PlottedGraphNode } from './Renderer/Utils/GraphLayout';
+import type { NodeEvents, NodeLabels } from './Node/Node.types';
+export declare const StyledDot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, {
+    highlight: boolean | undefined;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledPlus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, keyof import("react").Component<any, {}, any>>;
+export interface AddNodeProps extends PlottedGraphNode {
+    onClick?: (ev: Event) => void;
+    addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;
+    highlight?: boolean;
+}
+type AddButtonProps = Pick<AddNodeProps, 'addNodeHandler' | 'highlight'> & Pick<NodeEvents, 'active' | 'onFocus'> & NodeLabels;
+declare const _default: (({ addNodeHandler, highlight, active, fromNodeLabel, toNodeLabel, ...restProps }: AddButtonProps) => import("react/jsx-runtime").JSX.Element) & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+};
+export default _default;
+//# sourceMappingURL=AddNode.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddNode.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAexC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGhE,eAAO,MAAM,SAAS;eAA6B,OAAO,GAAG,SAAS;0JAcpE,CAAC;AAIH,eAAO,MAAM,UAAU,kaAEtB,CAAC;AAEF,eAAO,MAAM,aAAa,6NASxB,CAAC;AAIH,eAAO,MAAM,YAAY;;2LA0BvB,CAAC;AAIH,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,KAAK,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,gBAAgB,GAAG,WAAW,CAAC,GACtE,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAC,GACtC,UAAU,CAAC;2GASV,cAAc;;;AAuDjB,wBAA2D"}

package/lib/components/FlowModeller/AddNode.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { useContext, useState, useEffect, useRef } from 'react';
+import { Button, defaultThemeProp, Flex, Icon, StyledTooltip, useI18n, withTestIds, useTestIds } from '@pega/cosmos-react-core';
+import { generateDynamicTestId } from '../../utils/utils';
+import FlowModellerContext from './FlowModellerContext';
+import { getConnectorTestIds } from './FlowModeller.test-ids';
+export const StyledDot = styled(Icon)(({ highlight, theme }) => {
+    return css `
+    position: absolute;
+    color: transparent;
+    background-color: ${highlight ? theme.base.colors.red.dark : theme.base.colors.slate.dark};
+    border-radius: 50%;
+
+    path {
+      fill: ${highlight ? theme.base.colors.red.dark : theme.base.colors.slate.dark};
+    }
+  `;
+});
+StyledDot.defaultProps = defaultThemeProp;
+export const StyledPlus = styled(Icon) `
+  opacity: 0;
+`;
+export const StyledWrapper = styled.div(({ theme }) => {
+    return css `
+    margin-block-start: ${theme.base.spacing};
+
+    ${StyledTooltip} {
+      min-width: calc(${theme.base['content-width'].xs} * 0.6);
+      text-align: center;
+    }
+  `;
+});
+StyledWrapper.defaultProps = defaultThemeProp;
+export const StyledButton = styled(Button)(({ theme }) => {
+    return css `
+    top: calc(-0.5 * ${theme.base.spacing});
+    border: 0;
+    background: transparent;
+    color: ${theme.base.colors.black};
+    &:hover,
+    &:focus {
+      background: ${theme.base.colors.white};
+      ${StyledDot} {
+        opacity: 0;
+      }
+      ${StyledPlus} {
+        opacity: 1;
+      }
+    }
+    &[aria-haspopup='menu'] {
+      background: ${theme.base.colors.white};
+      ${StyledDot} {
+        opacity: 0;
+      }
+      ${StyledPlus} {
+        opacity: 1;
+      }
+    }
+  `;
+});
+StyledButton.defaultProps = defaultThemeProp;
+const AddButton = ({ addNodeHandler, highlight, active = false, fromNodeLabel, toNodeLabel, ...restProps }) => {
+    const t = useI18n();
+    const [hasMenuActive, setHasMenuActive] = useState(false);
+    const { showNodeLibrary } = useContext(FlowModellerContext);
+    const addNodeRef = useRef(null);
+    const [isFocused, setFocused] = useState(false);
+    const addNodeClickHandler = (e) => {
+        setHasMenuActive(true);
+        addNodeHandler(e);
+    };
+    useEffect(() => {
+        if (active) {
+            addNodeRef.current?.focus();
+        }
+    }, [active]);
+    useEffect(() => {
+        if (!showNodeLibrary) {
+            setHasMenuActive(false);
+        }
+    }, [showNodeLibrary]);
+    const connectorTestID = generateDynamicTestId([
+        fromNodeLabel || 'merge',
+        toNodeLabel || 'branch-end'
+    ]);
+    const testIds = useTestIds(connectorTestID, getConnectorTestIds);
+    return (_jsx(Flex, { "data-testid": testIds.root, container: { justify: 'center' }, as: StyledWrapper, children: _jsxs(StyledButton, { ...restProps, ref: addNodeRef, label: t('step_name', [t('add')]), "aria-haspopup": hasMenuActive ? 'menu' : false, icon: true, onClick: addNodeClickHandler, tabIndex: isFocused ? 0 : -1, onFocus: () => {
+                setFocused(true);
+            }, onBlur: () => {
+                setFocused(false);
+            }, children: [_jsx(StyledDot, { name: 'circle', highlight: highlight }), _jsx(StyledPlus, { name: 'plus' })] }) }));
+};
+export default withTestIds(AddButton, getConnectorTestIds);
+//# sourceMappingURL=AddNode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddNode.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGhE,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,OAAO,EACP,WAAW,EACX,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAqC,CAAC,EACzE,SAAS,EACT,KAAK,EACN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;wBAGY,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;;;;cAI/E,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;;GAEhF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;0BACc,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEtC,aAAa;wBACK,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;GAGnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;uBACW,KAAK,CAAC,IAAI,CAAC,OAAO;;;aAG5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;oBAGhB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;QACnC,SAAS;;;QAGT,UAAU;;;;;oBAKE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;QACnC,SAAS;;;QAGT,UAAU;;;;GAIf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAY7C,MAAM,SAAS,GAAG,CAAC,EACjB,cAAc,EACd,SAAS,EACT,MAAM,GAAG,KAAK,EACd,aAAa,EACb,WAAW,EACX,GAAG,SAAS,EACG,EAAE,EAAE;IACnB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,EAAE,eAAe,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAC5D,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,mBAAmB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC/D,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,cAAc,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,eAAe,GAAG,qBAAqB,CAAC;QAC5C,aAAa,IAAI,OAAO;QACxB,WAAW,IAAI,YAAY;KAC5B,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAC;IAEjE,OAAO,CACL,KAAC,IAAI,mBAAc,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,aAAa,YAClF,MAAC,YAAY,OACP,SAAS,EACb,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,mBAClB,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAC7C,IAAI,QACJ,OAAO,EAAE,mBAAmB,EAC5B,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC5B,OAAO,EAAE,GAAG,EAAE;gBACZ,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;gBACX,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC,aAED,KAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,GAAI,EACjD,KAAC,UAAU,IAAC,IAAI,EAAC,MAAM,GAAG,IACb,GACV,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { useContext, useState, useEffect, useRef } from 'react';\nimport type { MouseEvent } from 'react';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  StyledTooltip,\n  useI18n,\n  withTestIds,\n  useTestIds\n} from '@pega/cosmos-react-core';\n\nimport { generateDynamicTestId } from '../../utils/utils';\n\nimport type { PlottedGraphNode } from './Renderer/Utils/GraphLayout';\nimport FlowModellerContext from './FlowModellerContext';\nimport type { NodeEvents, NodeLabels } from './Node/Node.types';\nimport { getConnectorTestIds } from './FlowModeller.test-ids';\n\nexport const StyledDot = styled(Icon)<{ highlight: boolean | undefined }>(({\n  highlight,\n  theme\n}) => {\n  return css`\n    position: absolute;\n    color: transparent;\n    background-color: ${highlight ? theme.base.colors.red.dark : theme.base.colors.slate.dark};\n    border-radius: 50%;\n\n    path {\n      fill: ${highlight ? theme.base.colors.red.dark : theme.base.colors.slate.dark};\n    }\n  `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledPlus = styled(Icon)`\n  opacity: 0;\n`;\n\nexport const StyledWrapper = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: ${theme.base.spacing};\n\n    ${StyledTooltip} {\n      min-width: calc(${theme.base['content-width'].xs} * 0.6);\n      text-align: center;\n    }\n  `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    top: calc(-0.5 * ${theme.base.spacing});\n    border: 0;\n    background: transparent;\n    color: ${theme.base.colors.black};\n    &:hover,\n    &:focus {\n      background: ${theme.base.colors.white};\n      ${StyledDot} {\n        opacity: 0;\n      }\n      ${StyledPlus} {\n        opacity: 1;\n      }\n    }\n    &[aria-haspopup='menu'] {\n      background: ${theme.base.colors.white};\n      ${StyledDot} {\n        opacity: 0;\n      }\n      ${StyledPlus} {\n        opacity: 1;\n      }\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport interface AddNodeProps extends PlottedGraphNode {\n  onClick?: (ev: Event) => void;\n  addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;\n  highlight?: boolean;\n}\n\ntype AddButtonProps = Pick<AddNodeProps, 'addNodeHandler' | 'highlight'> &\n  Pick<NodeEvents, 'active' | 'onFocus'> &\n  NodeLabels;\n\nconst AddButton = ({\n  addNodeHandler,\n  highlight,\n  active = false,\n  fromNodeLabel,\n  toNodeLabel,\n  ...restProps\n}: AddButtonProps) => {\n  const t = useI18n();\n  const [hasMenuActive, setHasMenuActive] = useState(false);\n  const { showNodeLibrary } = useContext(FlowModellerContext);\n  const addNodeRef = useRef<HTMLButtonElement>(null);\n  const [isFocused, setFocused] = useState(false);\n\n  const addNodeClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n    setHasMenuActive(true);\n    addNodeHandler(e);\n  };\n\n  useEffect(() => {\n    if (active) {\n      addNodeRef.current?.focus();\n    }\n  }, [active]);\n\n  useEffect(() => {\n    if (!showNodeLibrary) {\n      setHasMenuActive(false);\n    }\n  }, [showNodeLibrary]);\n\n  const connectorTestID = generateDynamicTestId([\n    fromNodeLabel || 'merge',\n    toNodeLabel || 'branch-end'\n  ]);\n\n  const testIds = useTestIds(connectorTestID, getConnectorTestIds);\n\n  return (\n    <Flex data-testid={testIds.root} container={{ justify: 'center' }} as={StyledWrapper}>\n      <StyledButton\n        {...restProps}\n        ref={addNodeRef}\n        label={t('step_name', [t('add')])}\n        aria-haspopup={hasMenuActive ? 'menu' : false}\n        icon\n        onClick={addNodeClickHandler}\n        tabIndex={isFocused ? 0 : -1}\n        onFocus={() => {\n          setFocused(true);\n        }}\n        onBlur={() => {\n          setFocused(false);\n        }}\n      >\n        <StyledDot name='circle' highlight={highlight} />\n        <StyledPlus name='plus' />\n      </StyledButton>\n    </Flex>\n  );\n};\n\nexport default withTestIds(AddButton, getConnectorTestIds);\n"]}

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

@@ -0,0 +1,12 @@
+import type { PlaceHolderConnector } from './Utils/addNodeUtils';
+import type { PlottedGraphConnector } from './Renderer/Utils/GraphLayout';
+import type { NodeEvents } from './Node/Node.types';
+export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, {
+    highlight: boolean;
+}>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
+type ConnectorProps = Pick<PlottedGraphConnector, 'id' | 'data' | 'labelLayout' | 'points'> & Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;
+declare const _default: import("react").MemoExoticComponent<({ id, data, labelLayout, points, realConnectors, onKeyDown, ...restProps }: ConnectorProps & NodeEvents) => import("react/jsx-runtime").JSX.Element | null>;
+export default _default;
+//# sourceMappingURL=Connector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAWpD,eAAO,MAAM,WAAW;;;eAA6B,OAAO;kLAmB1D,CAAC;AAsDH,KAAK,cAAc,GAAG,IAAI,CAAC,qBAAqB,EAAE,IAAI,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC,GACzF,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC,CAAC;yIAUrD,cAAc,GAAG,UAAU;AAwD9B,wBAA+B"}

package/lib/components/FlowModeller/Connector.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useContext, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Flex, Text, useTheme } from '@pega/cosmos-react-core';
+import AddButton from './AddNode';
+import FlowModellerContext from './FlowModellerContext';
+const isConnectorData = (data) => typeof data === 'object' && data !== null && 'type' in data && typeof data.type === 'string';
+export const StyledLabel = styled(Text)(({ highlight, theme }) => {
+    return css `
+    border-radius: ${theme.base['border-radius']};
+    background: ${theme.base.colors.slate.dark};
+    color: ${theme.base.colors.white};
+    text-align: center;
+    padding: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(1.2 * ${theme.base['content-width'].xs});
+    white-space: nowrap;
+
+    ${highlight &&
+        css `
+      && {
+        background-color: ${theme.base.colors.red.dark};
+      }
+    `}
+  `;
+});
+StyledLabel.defaultProps = defaultThemeProp;
+const curveRadius = 12;
+const genLine = (points) => {
+    const lineStr = points
+        .map((point, idx, arr) => {
+        const { x, y } = point;
+        const prev = arr[idx - 1];
+        const next = arr[idx + 1];
+        const line = `L${x},${y}`;
+        // if the point is extreme end, no need to add a curve
+        if (!prev || !next) {
+            return line;
+        }
+        // if point is colinear with prev and next, no need to add a curve
+        if (prev.x === next.x || prev.y === next.y) {
+            return line;
+        }
+        if (point.x > next.x) {
+            // BOTTOM-RIGHT ↲
+            return `L${x},${y - curveRadius}a${curveRadius},${curveRadius} 0 0 1 -${curveRadius},${curveRadius}`;
+        }
+        // BOTTOM-LEFT ↳
+        if (point.x < next.x) {
+            return `L${x},${y - curveRadius}a${curveRadius},${curveRadius} 0 0 0 ${curveRadius},${curveRadius}`;
+        }
+        // TOP-LEFT ↱
+        if (point.x < prev.x) {
+            return `L${x + curveRadius},${y}a${curveRadius},${curveRadius} 0 0 0 -${curveRadius},${curveRadius}`;
+        }
+        // TOP-RIGHT ↴
+        if (point.x > prev.x) {
+            return `L${x - curveRadius},${y}a${curveRadius},${curveRadius} 0 0 1 ${curveRadius},${curveRadius}`;
+        }
+        return `L${x},${y}`;
+    })
+        .join('');
+    return `M${lineStr.substr(1)}`;
+};
+const Connector = ({ id, data, labelLayout, points, realConnectors, onKeyDown, ...restProps }) => {
+    const refId = realConnectors || id;
+    const { readOnly, highlights } = useContext(FlowModellerContext);
+    const theme = useTheme();
+    const connectorRef = useRef(null);
+    const metaData = {
+        refType: 'connector',
+        refId
+    };
+    return isConnectorData(data) && data.type === 'default' ? (_jsxs("g", { onKeyDown: onKeyDown, children: [_jsx("path", { id: id, d: genLine(points), stroke: highlights?.connectors?.[id] ? theme.base.colors.red.medium : theme.base.colors.slate.dark, strokeWidth: highlights?.connectors?.[id] ? 2 : 1, fill: 'none' }), labelLayout && (_jsxs("foreignObject", { x: labelLayout.x - labelLayout.width, y: points[3].y - 20, width: labelLayout.width, height: labelLayout.height, ref: connectorRef, children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { highlight: !!highlights?.connectors?.[id], children: labelLayout.value }) })), !readOnly && data.onNodeCreate && (_jsx(AddButton, { ...restProps, highlight: !!highlights?.connectors?.[id], addNodeHandler: (e) => {
+                            data.onNodeCreate?.(e.currentTarget, metaData);
+                            connectorRef.current?.scrollIntoView({
+                                block: 'center',
+                                behavior: 'smooth'
+                            });
+                        } }))] }))] }, id)) : null;
+};
+export default memo(Connector);
+//# sourceMappingURL=Connector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { memo, useContext, useRef } from 'react';\nimport type { MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport AddButton from './AddNode';\nimport type { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport type { PlaceHolderConnector } from './Utils/addNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\nimport type { PlottedGraphConnector } from './Renderer/Utils/GraphLayout';\nimport type { NodeEvents } from './Node/Node.types';\n\ninterface ConnectorData {\n  type: string;\n  label?: string;\n  onNodeCreate?: (el: HTMLElement | SVGForeignObjectElement, meta: AddNodeHandlerParams) => void;\n}\n\nconst isConnectorData = (data: unknown): data is ConnectorData =>\n  typeof data === 'object' && data !== null && 'type' in data && typeof data.type === 'string';\n\nexport const StyledLabel = styled(Text)<{ highlight: boolean }>(({ highlight, theme }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n    background: ${theme.base.colors.slate.dark};\n    color: ${theme.base.colors.white};\n    text-align: center;\n    padding: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: calc(1.2 * ${theme.base['content-width'].xs});\n    white-space: nowrap;\n\n    ${highlight &&\n    css`\n      && {\n        background-color: ${theme.base.colors.red.dark};\n      }\n    `}\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\ninterface Points {\n  x: number;\n  y: number;\n}\n\nconst curveRadius = 12;\nconst genLine = (points: Points[]) => {\n  const lineStr: string = points\n    .map((point: Points, idx: number, arr: Points[]) => {\n      const { x, y } = point;\n      const prev = arr[idx - 1];\n      const next = arr[idx + 1];\n      const line = `L${x},${y}`;\n\n      // if the point is extreme end, no need to add a curve\n      if (!prev || !next) {\n        return line;\n      }\n\n      // if point is colinear with prev and next, no need to add a curve\n      if (prev.x === next.x || prev.y === next.y) {\n        return line;\n      }\n\n      if (point.x > next.x) {\n        // BOTTOM-RIGHT ↲\n        return `L${x},${y - curveRadius}a${curveRadius},${curveRadius} 0 0 1 -${curveRadius},${curveRadius}`;\n      }\n\n      // BOTTOM-LEFT ↳\n      if (point.x < next.x) {\n        return `L${x},${y - curveRadius}a${curveRadius},${curveRadius} 0 0 0 ${curveRadius},${curveRadius}`;\n      }\n\n      // TOP-LEFT ↱\n      if (point.x < prev.x) {\n        return `L${x + curveRadius},${y}a${curveRadius},${curveRadius} 0 0 0 -${curveRadius},${curveRadius}`;\n      }\n\n      // TOP-RIGHT ↴\n      if (point.x > prev.x) {\n        return `L${x - curveRadius},${y}a${curveRadius},${curveRadius} 0 0 1 ${curveRadius},${curveRadius}`;\n      }\n\n      return `L${x},${y}`;\n    })\n    .join('');\n  return `M${lineStr.substr(1)}`;\n};\n\ntype ConnectorProps = Pick<PlottedGraphConnector, 'id' | 'data' | 'labelLayout' | 'points'> &\n  Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;\n\nconst Connector = ({\n  id,\n  data,\n  labelLayout,\n  points,\n  realConnectors,\n  onKeyDown,\n  ...restProps\n}: ConnectorProps & NodeEvents) => {\n  const refId = realConnectors || id;\n  const { readOnly, highlights } = useContext(FlowModellerContext);\n  const theme = useTheme();\n  const connectorRef = useRef<SVGForeignObjectElement>(null);\n\n  const metaData: AddNodeHandlerParams = {\n    refType: 'connector',\n    refId\n  };\n\n  return isConnectorData(data) && data.type === 'default' ? (\n    <g key={id} onKeyDown={onKeyDown}>\n      <path\n        id={id}\n        d={genLine(points)}\n        stroke={\n          highlights?.connectors?.[id] ? theme.base.colors.red.medium : theme.base.colors.slate.dark\n        }\n        strokeWidth={highlights?.connectors?.[id] ? 2 : 1}\n        fill='none'\n      />\n      {labelLayout && (\n        <foreignObject\n          x={labelLayout.x - labelLayout.width}\n          y={points[3].y - 20}\n          width={labelLayout.width}\n          height={labelLayout.height}\n          ref={connectorRef}\n        >\n          {labelLayout?.value && (\n            <Flex container={{ justify: 'center' }}>\n              <StyledLabel highlight={!!highlights?.connectors?.[id]}>\n                {labelLayout.value}\n              </StyledLabel>\n            </Flex>\n          )}\n          {!readOnly && data.onNodeCreate && (\n            <AddButton\n              {...restProps}\n              highlight={!!highlights?.connectors?.[id]}\n              addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n                data.onNodeCreate?.(e.currentTarget, metaData);\n                connectorRef.current?.scrollIntoView({\n                  block: 'center',\n                  behavior: 'smooth'\n                });\n              }}\n            />\n          )}\n        </foreignObject>\n      )}\n    </g>\n  ) : null;\n};\n\nexport default memo(Connector);\n"]}

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

@@ -0,0 +1,39 @@
+import type { ChangeEvent, PropsWithoutRef } from 'react';
+import type { FormDialogProps } from '@pega/cosmos-react-core';
+import type { GraphData } from './Renderer/Utils/Graph';
+import type { GraphDataAsMap, DeleteNodeOutcome } from './Utils/deleteNodeUtils';
+import type { NodeProps } from './Node/Node.types';
+export interface DeleteDialogProps {
+    target: FormDialogProps['target'];
+    flowGraphData: GraphData<NodeProps>;
+    rendererGraphData: GraphData<NodeProps>;
+    nodeId: string;
+    onChange?: (itemsToDelete: GraphDataAsMap, itemsToRetain: GraphDataAsMap | undefined, ev?: ChangeEvent) => void;
+    onSubmit?: (outcome: DeleteNodeOutcome) => void;
+    onCancel?: () => void;
+    ref?: FormDialogProps['ref'];
+}
+export declare const StyledDeleteDialog: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").BaseDialogProps & {
+    onDismiss?: () => void;
+    onCancel: import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").FormAction;
+    onSubmit: import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").FormAction;
+} & {
+    heading: string;
+    additionalInfo?: import("@pega/cosmos-react-core").AdditionalInfoProps;
+    'aria-label'?: never;
+} & Omit<import("@pega/cosmos-react-core").Attributes<"div">, "aria-label" | "onSubmit" | "onCancel" | "heading" | keyof import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").BaseDialogProps | "onDismiss" | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}) | (Omit<Omit<import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").BaseDialogProps & {
+    onDismiss?: () => void;
+    onCancel: import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").FormAction;
+    onSubmit: import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").FormAction;
+} & {
+    heading?: never;
+    'aria-label': string;
+    additionalInfo?: never;
+} & Omit<import("@pega/cosmos-react-core").Attributes<"div">, "aria-label" | "onSubmit" | "onCancel" | "heading" | keyof import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").BaseDialogProps | "onDismiss" | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}), import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<PropsWithoutRef<FormDialogProps> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+declare const DeleteDialog: ({ target, flowGraphData, rendererGraphData, nodeId, onChange, onSubmit, onCancel }: PropsWithoutRef<DeleteDialogProps>) => import("react/jsx-runtime").JSX.Element;
+export default DeleteDialog;
+//# sourceMappingURL=DeleteDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteDialog.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/DeleteDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAsB,WAAW,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAa9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,aAAa,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,iBAAiB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CACT,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,cAAc,GAAG,SAAS,EACzC,EAAE,CAAC,EAAE,WAAW,KACb,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;mPAI7B,CAAC;AAIH,QAAA,MAAM,YAAY,GAAI,oFAQnB,eAAe,CAAC,iBAAiB,CAAC,4CA2NpC,CAAC;AAEF,eAAe,YAAY,CAAC"}

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":"AAoBA,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, OneColumnPage, 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, { item: { shrink: 0 }, 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 })] })) : (_jsx(Flex, { container: { gap: 1 }, as: OneColumnPage, forwardedAs: StyledPanelPage, title: header?.primary?.title, header: _jsx(StyledPanelHeader, { children: _jsx(FlowAuthoringPanelHeader, { header: header, onDismiss: onDismiss ? dismissPanel : undefined, dismissButtonRef: dismissButtonRef }) }), scrollContent: true, a: _jsx(StyledPanelContent, { children: content }) })) })) }));
+};
+export default FlowAuthoringPanel;
+//# sourceMappingURL=FlowAuthoringPanel.js.map