@pega/cosmos-react-build 8.0.0-build.9.1 → 8.0.1

package/lib/components/LifeCycle/Task.js

@@ -1,10 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, defaultThemeProp, Button, Icon, useElement, Actions, useI18n, Avatar, useOuterEvent, useEscape } from '@pega/cosmos-react-core';
+import { Flex, defaultThemeProp, Button, Icon, useElement, Actions, useI18n, Avatar, useTestIds, withTestIds, Text, Tooltip, StyledButton, StyledIcon } from '@pega/cosmos-react-core';
 import { ItemLibrary } from '../ItemLibrary';
-import Step from './Step';
+import { generateDynamicTestId } from './utils';
+import Step, {} from './Step';
 import LifeCycleContext from './LifeCycleContext';
+import { getStepTestIds, getTaskTestIds } from './LifeCycle.test-ids';
+import LifeCycleDragDropList from './LifeCycleDragDropList';
 export const StyledTaskList = styled.li(({ theme }) => {
     return css `
     list-style-type: none;
@@ -16,39 +20,61 @@ export const StyledTaskList = styled.li(({ theme }) => {
   `;
 });
 StyledTaskList.defaultProps = defaultThemeProp;
-export const StyledCardHeader = styled.header(({ theme }) => {
+export const StyledCardHeader = styled.header(({ theme: { base: { spacing } } }) => {
     return css `
-    padding: 0;
-    margin: 0 0 calc(0.5 * ${theme.base.spacing});
-  `;
+      padding: 0 calc(0.25 * ${spacing});
+      margin: calc(0.25 * ${spacing});
+    `;
 });
 StyledCardHeader.defaultProps = defaultThemeProp;
-export const StyledCardContent = styled.div(() => {
-    return css `
-    padding: 0;
-  `;
-});
-export const StyledTaskButton = styled.button(({ theme }) => {
+export const StyledAddCustomStepButton = styled(Button)(({ theme }) => {
     return css `
-    background: ${theme.base.palette['primary-background']};
-    border: none;
     height: ${theme.components.button.height};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: start;
+    margin-inline-start: calc(0.5 * ${theme.base.spacing});
 
-    &:hover {
-      cursor: pointer;
+    ${StyledIcon} {
+      margin-inline-end: ${theme.base.spacing};
     }
-
-    &:focus {
-      outline: none;
+  `;
+});
+StyledAddCustomStepButton.defaultProps = defaultThemeProp;
+export const StyledAddStepButton = styled(Button) ``;
+export const StyledCardContent = styled.div(({ hasSteps, theme }) => {
+    if (!hasSteps)
+        return;
+    return css `
+    & > ${StyledButton}, & > ${StyledAddCustomStepButton} {
+      margin-block-start: calc(0.5 * ${theme.base.spacing});
     }
   `;
 });
+StyledCardContent.defaultProps = defaultThemeProp;
+export const StyledTaskButton = styled.button(({ theme, visual }) => {
+    return css `
+      background: ${theme.base.palette['primary-background']};
+      border: none;
+      height: ${theme.components.button.height};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-align: start;
+
+      ${visual.imgSrc &&
+        css `
+        padding-inline-start: calc(0.5 * ${theme.base.spacing});
+      `}
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    `;
+});
 StyledTaskButton.defaultProps = defaultThemeProp;
-export const StyledTask = styled.article(({ hasFocus, theme }) => {
+export const StyledTask = styled.article(({ hasFocus, hasSteps, theme, dragEnabled }) => {
     return css `
     background: ${theme.base.palette['primary-background']};
     border: 0.125rem solid transparent;
@@ -67,13 +93,22 @@ export const StyledTask = styled.article(({ hasFocus, theme }) => {
     &[aria-current='true'] {
       border-color: ${theme.base.palette.interactive};
     }
+
+    ${hasSteps &&
+        !dragEnabled &&
+        css `
+      ${StyledAddCustomStepButton} ,${StyledAddStepButton} {
+        margin-block-start: calc(0.5 * ${theme.base.spacing});
+      }
+    `}
   `;
 });
 StyledTask.defaultProps = defaultThemeProp;
 export const StyledWarnIcon = styled(Icon)(({ theme }) => {
     return css `
     color: ${theme.base.palette.urgent};
-    margin-inline: ${theme.base.spacing};
+    margin-inline-start: calc(0.5 * ${theme.base.spacing});
+    margin-inline-end: ${theme.base.spacing};
 
     &:hover {
       cursor: pointer;
@@ -81,13 +116,15 @@ export const StyledWarnIcon = styled(Icon)(({ theme }) => {
   `;
 });
 StyledWarnIcon.defaultProps = defaultThemeProp;
-const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem, error, onAddStep, onClick, categoryItem, id, step: stepProp, nodeLibrary, ...restProps }) => {
+const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem, error, onAddStep, onAddCustomStep, onClick, categoryItem, id, step: stepProp, nodeLibrary, ...restProps }) => {
     const t = useI18n();
-    const { selectedItemId, readOnly } = useContext(LifeCycleContext);
+    const { selectedItemId, readOnly, dragEnabled, onDragDrop } = useContext(LifeCycleContext);
     const [taskHasFocus, setTaskHasFocus] = useState(false);
-    const [showLibrary, setLibrary] = useState(false);
-    const [popoverEl, setPopoverEl] = useElement(null);
-    const [addEl, setAddEl] = useElement();
+    const [taskButtonEl, setTaskButtonEl] = useElement();
+    const [addEl, setAddEl] = useElement(null);
+    const taskTestID = generateDynamicTestId([stageItem.label, categoryItem.categoryLabel, value]);
+    const testIds = useTestIds(taskTestID, getTaskTestIds);
+    const stepTestIds = useTestIds(taskTestID, getStepTestIds);
     const onActionItemClick = (actionId, e) => {
         const param = {
             task: item,
@@ -109,7 +146,10 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
                 actionCloneItem[key] = actionItem[key];
             });
             actionCloneItem.onClick = onActionItemClick;
-            actionsClone.push(actionCloneItem);
+            actionsClone.push({
+                ...actionCloneItem,
+                'data-testid': testIds.actionButton
+            });
             return actionItem;
         });
     }
@@ -130,29 +170,53 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
             category: categoryItem
         };
         onAddStep?.(param, libItem);
-        setLibrary(false);
     }, [onAddStep]);
-    useEscape(() => {
-        setLibrary(false);
-    });
-    useOuterEvent('mousedown', [addEl, popoverEl], () => setLibrary(false));
-    return (_jsx(StyledTaskList, { ...restProps, id: item.id, children: _jsxs(Flex, { as: StyledTask, "aria-current": selectedItemId === id ? true : undefined, container: { direction: 'column' }, id: `${id}-task`, hasFocus: taskHasFocus && selectedItemId !== id, children: [_jsxs(Flex, { as: StyledCardHeader, container: { inline: true, alignItems: 'center' }, children: [visual?.imgurl.length > 0 && _jsx(Avatar, { name: value, imageSrc: visual?.imgurl }), error && _jsx(StyledWarnIcon, { name: 'warn-solid' }), _jsx(Flex, { item: { grow: 1 }, container: { inline: true, alignItems: 'center' }, onClick: onTaskClick, children: _jsx(StyledTaskButton, { onFocus: () => {
-                                    setTaskHasFocus(true);
-                                }, onBlur: () => {
-                                    setTaskHasFocus(false);
-                                }, "aria-label": t(error ? 'process_name_error' : 'process_name', [value]), children: value }) }), actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true })] }), _jsxs(StyledCardContent, { children: [item?.steps.map((steps) => {
-                            const badgeStatus = steps?.status?.type ? steps.status.type : '';
-                            const badgeLabel = steps?.status?.label ? steps.status.label : '';
-                            return (_jsx(Step, { id: steps.id, value: steps.label, visual: {
-                                    imgurl: steps.visual.imgurl,
-                                    color: steps.visual.color,
-                                    icon: steps.visual.icon,
-                                    title: steps.visual.label
-                                }, item: steps, taskItem: item, stageItem: stageItem, badge: {
-                                    type: badgeStatus,
-                                    label: badgeLabel
-                                }, error: steps.error, categoryItem: categoryItem, ...stepProp }, steps.id));
-                        }), !readOnly && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'simple', ref: setAddEl, label: t('add_noun', [addStepTitle]), onClick: () => setLibrary(prev => !prev), icon: true, children: _jsx(Icon, { name: 'plus' }) }), _jsx(ItemLibrary, { items: nodeLibrary, show: showLibrary, target: addEl, onClick: onLibraryItemSelect, ref: setPopoverEl, placeholder: t('search_nodes') })] }))] })] }) }));
+    const isEmpty = (readOnly || (!readOnly && !addStepTitle)) && !item?.steps?.length && !value;
+    const getStepProps = useCallback((step, index) => {
+        return {
+            id: step.id,
+            value: step.label,
+            visual: {
+                imgSrc: step.visual.imgSrc,
+                name: step.visual.name,
+                label: step.visual.label,
+                category: step.visual.category,
+                inverted: step.visual.inverted
+            },
+            item: { ...step, index, alternate: item.alternate },
+            taskItem: item,
+            stageItem,
+            badge: {
+                type: step?.status?.type ?? '',
+                label: step?.status?.label ?? ''
+            },
+            error: step.error,
+            categoryItem
+        };
+    }, [categoryItem, item, stageItem]);
+    const addStepRegion = (_jsxs(_Fragment, { children: [!readOnly && addStepTitle && nodeLibrary && (_jsxs(_Fragment, { children: [_jsx(Button, { as: StyledAddStepButton, "data-testid": stepTestIds.addButton, variant: 'simple', label: t('add_noun', [addStepTitle]), onClick: (e) => setAddEl(e.currentTarget), icon: true, children: _jsx(Icon, { name: 'plus' }) }), addEl && (_jsx(ItemLibrary, { items: nodeLibrary, target: addEl, onClick: onLibraryItemSelect, onDismiss: () => setAddEl(null), placeholder: t('search_placeholder_default') }))] })), !readOnly && addStepTitle && !nodeLibrary && onAddCustomStep && (_jsxs(Button, { as: StyledAddCustomStepButton, "data-testid": stepTestIds.addButton, variant: 'link', onClick: () => {
+                    const param = {
+                        task: item,
+                        stage: stageItem,
+                        category: categoryItem
+                    };
+                    onAddCustomStep(param);
+                }, children: [_jsx(Icon, { name: 'plus' }), t('add_noun', [addStepTitle])] }))] }));
+    return (_jsx(StyledTaskList, { "data-testid": testIds.root, ...restProps, id: item.id, children: isEmpty ? (_jsx(Flex, { container: { justify: 'center', pad: 1 }, children: _jsx(Text, { variant: 'secondary', children: "No Steps" }) })) : (_jsxs(Flex, { as: StyledTask, "aria-current": selectedItemId === id ? 'true' : undefined, container: { direction: 'column' }, hasFocus: taskHasFocus && selectedItemId !== id, hasSteps: !!item?.steps?.length, dragEnabled: dragEnabled, children: [!!value && (_jsxs(Flex, { as: StyledCardHeader, container: { inline: true, alignItems: 'center' }, children: [visual?.imgSrc?.length > 0 && _jsx(Avatar, { name: value, imageSrc: visual?.imgSrc }), error && _jsx(StyledWarnIcon, { name: 'warn-solid' }), _jsxs(Flex, { item: { grow: 1 }, container: { inline: true, alignItems: 'center' }, onClick: onTaskClick, children: [_jsx(StyledTaskButton, { onFocus: () => {
+                                        setTaskHasFocus(true);
+                                    }, onBlur: () => {
+                                        setTaskHasFocus(false);
+                                    }, "aria-label": t(error ? 'process_name_error' : 'process_name', [value]), visual: visual, ref: setTaskButtonEl, children: value }), taskButtonEl && (_jsx(Tooltip, { target: taskButtonEl, smart: true, children: value }))] }), actionsClone && (_jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true, contextualLabel: t('process_name', [value]) }))] })), _jsx(StyledCardContent, { hasSteps: !!item?.steps?.length, as: dragEnabled ? 'div' : 'ul', children: dragEnabled ? (_jsx(LifeCycleDragDropList, { type: stageItem.alternate ? 'alternate-step' : 'step', listLocation: {
+                            alternate: !!stageItem.alternate,
+                            stage: stageItem.index,
+                            category: categoryItem.index,
+                            task: item.index,
+                            subTask: item.subIndex
+                        }, items: item?.steps?.map((step, index) => ({
+                            id: step.id,
+                            type: stageItem.alternate ? 'alternate-step' : 'step',
+                            data: { ...stepProp, ...getStepProps(step, index) }
+                        })), itemRenderer: Step, onDragDrop: onDragDrop, additionalDropZone: addStepRegion })) : (_jsx(_Fragment, { children: item?.steps?.map((step, index) => (_createElement(Step, { ...stepProp, key: step.id, ...getStepProps(step, index) }))) })) }), !dragEnabled && _jsx("div", { children: addStepRegion })] })) }));
 };
-export default Task;
+export default withTestIds(Task, getTaskTestIds);
 //# sourceMappingURL=Task.js.map

package/lib/components/LifeCycle/Task.js.map

@@ -1 +1 @@
-{"version":3,"file":"Task.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,UAAU,EACV,OAAO,EACP,OAAO,EACP,MAAM,EACN,aAAa,EACb,SAAS,EACV,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,OAAO,IAAI,MAAM,QAAQ,CAAC;AAU1B,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAuBlD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAKvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;6BAEiB,KAAK,CAAC,IAAI,CAAC,OAAO;GAC5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC/C,OAAO,GAAG,CAAA;;GAET,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;cAE5C,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;;GAazC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAwB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACtF,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;gCAE1B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;oBACvC,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEhC,QAAQ;QACV,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;KACtC;;;;;;;sBAOiB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;qBACjB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAKpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,IAAI,GAAyD,CAAC,EAClE,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAS,EACT,OAAO,EACP,YAAY,EACZ,EAAE,EACF,IAAI,EAAE,QAAQ,EACd,WAAW,EACX,GAAG,SAAS,EAC0B,EAAE,EAAE;IAC1C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAClE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,EAAE,CAAC;IAEvC,MAAM,iBAAiB,GAAG,CACxB,QAAgB,EAChB,CAAuE,EACvE,EAAE;QACF,MAAM,KAAK,GAAyB;YAClC,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,YAAY;SACvB,CAAC;QACF,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE;YAC5B,IAAI,UAAU,CAAC,EAAE,KAAK,QAAQ,EAAE,CAAC;gBAC/B,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,qFAAqF;IACrF,MAAM,YAAY,GAAa,EAAE,CAAC;IAElC,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC3B,MAAM,eAAe,GAAG,EAAY,CAAC;YACrC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,GAAW,EAAE,EAAE;gBAC9C,eAAe,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;YACzC,CAAC,CAAC,CAAC;YACH,eAAe,CAAC,OAAO,GAAG,iBAAiB,CAAC;YAC5C,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACnC,OAAO,UAAU,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,WAAW,GAAG,CAAC,CAAa,EAAE,EAAE;QACpC,MAAM,WAAW,GAAyB;YACxC,KAAK;YACL,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,YAAY;YACtB,IAAI,EAAE,MAAM;SACb,CAAC;QACF,OAAO,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,OAAoB,EAAE,EAAE;QACvB,MAAM,KAAK,GAAyB;YAClC,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,YAAY;SACvB,CAAC;QACF,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAC5B,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,aAAa,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IAExE,OAAO,CACL,KAAC,cAAc,OAAK,SAAS,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,YACxC,MAAC,IAAI,IACH,EAAE,EAAE,UAAU,kBACA,cAAc,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACtD,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,GAAG,EAAE,OAAO,EAChB,QAAQ,EAAE,YAAY,IAAI,cAAc,KAAK,EAAE,aAE/C,MAAC,IAAI,IAAC,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC1E,MAAM,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,MAAM,IAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,EAC9E,KAAK,IAAI,KAAC,cAAc,IAAC,IAAI,EAAC,YAAY,GAAG,EAC9C,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,EACjD,OAAO,EAAE,WAAW,YAEpB,KAAC,gBAAgB,IACf,OAAO,EAAE,GAAG,EAAE;oCACZ,eAAe,CAAC,IAAI,CAAC,CAAC;gCACxB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oCACX,eAAe,CAAC,KAAK,CAAC,CAAC;gCACzB,CAAC,gBACW,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,CAAC,YAEpE,KAAK,GACW,GACd,EACN,YAAY,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,SAAG,IAChE,EACP,MAAC,iBAAiB,eACf,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,KAAoB,EAAE,EAAE;4BACxC,MAAM,WAAW,GAAG,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;4BACjE,MAAM,UAAU,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;4BAClE,OAAO,CACL,KAAC,IAAI,IAEH,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE;oCACN,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;oCAC3B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;oCACzB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;oCACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;iCAC1B,EACD,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;oCACL,IAAI,EAAE,WAAW;oCACjB,KAAK,EAAE,UAAU;iCAClB,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,YAAY,EAAE,YAAY,KACtB,QAAQ,IAlBP,KAAK,CAAC,EAAE,CAmBb,CACH,CAAC;wBACJ,CAAC,CAAC,EACD,CAAC,QAAQ,IAAI,CACZ,8BACE,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC,YAAY,CAAC,CAAC,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EACxC,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,EACT,KAAC,WAAW,IACV,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,KAAoB,EAC5B,OAAO,EAAE,mBAAmB,EAC5B,GAAG,EAAE,YAAY,EACjB,WAAW,EAAE,CAAC,CAAC,cAAc,CAAC,GAC9B,IACD,CACJ,IACiB,IACf,GACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { useState, useCallback, useContext } from 'react';\nimport type { FunctionComponent, PropsWithChildren, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  defaultThemeProp,\n  Button,\n  Icon,\n  useElement,\n  Actions,\n  useI18n,\n  Avatar,\n  useOuterEvent,\n  useEscape\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardProps, Action } from '@pega/cosmos-react-core';\n\nimport { ItemLibrary } from '../ItemLibrary';\nimport type { LibraryItem } from '../ItemLibrary';\n\nimport Step from './Step';\nimport type {\n  TaskItemProps,\n  StageItemProps,\n  StepItemProps,\n  CategoryItemProps,\n  LifeCycleActionParam,\n  StepProps,\n  TaskProps\n} from './LifeCycle.types';\nimport LifeCycleContext from './LifeCycleContext';\n\ninterface TaskComponentProps extends BaseProps, TaskProps {\n  /** Pass text for the task. */\n  value: string;\n  /** support for an Avatar, Icon, or other supporting visual. */\n  visual: {\n    imgurl: string;\n  };\n  /** Pass task data */\n  item: TaskItemProps;\n  /** The status is used to show the input error status and the info on tooltip in case of error */\n  error?: string;\n  /** Step Props */\n  step?: StepProps;\n  /** Stage data to pass it as callback */\n  stageItem: StageItemProps;\n  /** Category data to pass it as callback */\n  categoryItem: CategoryItemProps;\n  /** unique id of task */\n  id: string;\n}\n\nexport const StyledTaskList = styled.li(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin-block-end: ${theme.base.spacing};\n\n    &:last-child > article {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled.header(({ theme }) => {\n  return css`\n    padding: 0;\n    margin: 0 0 calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(() => {\n  return css`\n    padding: 0;\n  `;\n});\n\nexport const StyledTaskButton = styled.button(({ theme }) => {\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    border: none;\n    height: ${theme.components.button.height};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: start;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus {\n      outline: none;\n    }\n  `;\n});\n\nStyledTaskButton.defaultProps = defaultThemeProp;\n\nexport const StyledTask = styled.article<{ hasFocus: boolean }>(({ hasFocus, theme }) => {\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    border: 0.125rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    padding: calc(${theme.base.spacing} - 0.125rem);\n\n    ${hasFocus &&\n    css`\n      box-shadow: ${theme.base.shadow.focus};\n    `}\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &[aria-current='true'] {\n      border-color: ${theme.base.palette.interactive};\n    }\n  `;\n});\n\nStyledTask.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline: ${theme.base.spacing};\n\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst Task: FunctionComponent<TaskComponentProps & ForwardProps> = ({\n  value,\n  visual,\n  actions,\n  item,\n  addStepTitle,\n  addTask,\n  stageItem,\n  error,\n  onAddStep,\n  onClick,\n  categoryItem,\n  id,\n  step: stepProp,\n  nodeLibrary,\n  ...restProps\n}: PropsWithChildren<TaskComponentProps>) => {\n  const t = useI18n();\n  const { selectedItemId, readOnly } = useContext(LifeCycleContext);\n  const [taskHasFocus, setTaskHasFocus] = useState(false);\n  const [showLibrary, setLibrary] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const [addEl, setAddEl] = useElement();\n\n  const onActionItemClick = (\n    actionId: string,\n    e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n  ) => {\n    const param: LifeCycleActionParam = {\n      task: item,\n      stage: stageItem,\n      category: categoryItem\n    };\n    actions?.forEach(actionItem => {\n      if (actionItem.id === actionId) {\n        actionItem.onClick(param, e);\n      }\n    });\n  };\n  // Deep copy of actions is required to provide consistent callback objects on actions\n  const actionsClone: Action[] = [];\n\n  if (actions) {\n    actions.forEach(actionItem => {\n      const actionCloneItem = {} as Action;\n      Object.keys(actionItem).forEach((key: string) => {\n        actionCloneItem[key] = actionItem[key];\n      });\n      actionCloneItem.onClick = onActionItemClick;\n      actionsClone.push(actionCloneItem);\n      return actionItem;\n    });\n  }\n\n  const onTaskClick = (e: MouseEvent) => {\n    const actionParam: LifeCycleActionParam = {\n      value,\n      task: item,\n      stage: stageItem,\n      category: categoryItem,\n      type: 'Task'\n    };\n    onClick?.(actionParam, e);\n  };\n\n  const onLibraryItemSelect = useCallback(\n    (libItem: LibraryItem) => {\n      const param: LifeCycleActionParam = {\n        task: item,\n        stage: stageItem,\n        category: categoryItem\n      };\n      onAddStep?.(param, libItem);\n      setLibrary(false);\n    },\n    [onAddStep]\n  );\n\n  useEscape(() => {\n    setLibrary(false);\n  });\n\n  useOuterEvent('mousedown', [addEl, popoverEl], () => setLibrary(false));\n\n  return (\n    <StyledTaskList {...restProps} id={item.id}>\n      <Flex\n        as={StyledTask}\n        aria-current={selectedItemId === id ? true : undefined}\n        container={{ direction: 'column' }}\n        id={`${id}-task`}\n        hasFocus={taskHasFocus && selectedItemId !== id}\n      >\n        <Flex as={StyledCardHeader} container={{ inline: true, alignItems: 'center' }}>\n          {visual?.imgurl.length > 0 && <Avatar name={value} imageSrc={visual?.imgurl} />}\n          {error && <StyledWarnIcon name='warn-solid' />}\n          <Flex\n            item={{ grow: 1 }}\n            container={{ inline: true, alignItems: 'center' }}\n            onClick={onTaskClick}\n          >\n            <StyledTaskButton\n              onFocus={() => {\n                setTaskHasFocus(true);\n              }}\n              onBlur={() => {\n                setTaskHasFocus(false);\n              }}\n              aria-label={t(error ? 'process_name_error' : 'process_name', [value])}\n            >\n              {value}\n            </StyledTaskButton>\n          </Flex>\n          {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n        </Flex>\n        <StyledCardContent>\n          {item?.steps.map((steps: StepItemProps) => {\n            const badgeStatus = steps?.status?.type ? steps.status.type : '';\n            const badgeLabel = steps?.status?.label ? steps.status.label : '';\n            return (\n              <Step\n                key={steps.id}\n                id={steps.id}\n                value={steps.label}\n                visual={{\n                  imgurl: steps.visual.imgurl,\n                  color: steps.visual.color,\n                  icon: steps.visual.icon,\n                  title: steps.visual.label\n                }}\n                item={steps}\n                taskItem={item}\n                stageItem={stageItem}\n                badge={{\n                  type: badgeStatus,\n                  label: badgeLabel\n                }}\n                error={steps.error}\n                categoryItem={categoryItem}\n                {...stepProp}\n              />\n            );\n          })}\n          {!readOnly && (\n            <>\n              <Button\n                variant='simple'\n                ref={setAddEl}\n                label={t('add_noun', [addStepTitle])}\n                onClick={() => setLibrary(prev => !prev)}\n                icon\n              >\n                <Icon name='plus' />\n              </Button>\n              <ItemLibrary\n                items={nodeLibrary}\n                show={showLibrary}\n                target={addEl as HTMLElement}\n                onClick={onLibraryItemSelect}\n                ref={setPopoverEl}\n                placeholder={t('search_nodes')}\n              />\n            </>\n          )}\n        </StyledCardContent>\n      </Flex>\n    </StyledTaskList>\n  );\n};\n\nexport default Task;\n"]}
+{"version":3,"file":"Task.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useCallback, useContext } from 'react';\nimport type { FunctionComponent, PropsWithChildren, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  defaultThemeProp,\n  Button,\n  Icon,\n  useElement,\n  Actions,\n  useI18n,\n  Avatar,\n  useTestIds,\n  withTestIds,\n  Text,\n  Tooltip,\n  StyledButton,\n  StyledIcon\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardProps, Action } from '@pega/cosmos-react-core';\n\nimport { ItemLibrary } from '../ItemLibrary';\nimport type { LibraryItem } from '../ItemLibrary';\n\nimport { generateDynamicTestId } from './utils';\nimport Step, { type StepComponentProps } from './Step';\nimport type {\n  TaskItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  LifeCycleActionParam,\n  StepProps,\n  TaskProps,\n  StepItemProps\n} from './LifeCycle.types';\nimport LifeCycleContext from './LifeCycleContext';\nimport { getStepTestIds, getTaskTestIds } from './LifeCycle.test-ids';\nimport LifeCycleDragDropList from './LifeCycleDragDropList';\n\ninterface CategoryLabelProp {\n  categoryLabel?: string;\n}\nexport interface TaskComponentProps extends BaseProps, TaskProps {\n  /** Pass text for the task. */\n  value: string;\n  /** support for an Avatar, Icon, or other supporting visual. */\n  visual: {\n    imgSrc: string;\n  };\n  /** Pass task data */\n  item: TaskItemProps;\n  /** The status is used to show the input error status and the info on tooltip in case of error */\n  error?: string;\n  /** Step Props */\n  step?: StepProps;\n  /** Stage data to pass it as callback */\n  stageItem: StageItemProps;\n  /** Category data to pass it as callback */\n  categoryItem: CategoryItemProps & CategoryLabelProp;\n  /** unique id of task */\n  id: string;\n}\n\nexport const StyledTaskList = styled.li(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin-block-end: ${theme.base.spacing};\n\n    &:last-child > article {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled.header(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      padding: 0 calc(0.25 * ${spacing});\n      margin: calc(0.25 * ${spacing});\n    `;\n  }\n);\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledAddCustomStepButton = styled(Button)(({ theme }) => {\n  return css`\n    height: ${theme.components.button.height};\n    margin-inline-start: calc(0.5 * ${theme.base.spacing});\n\n    ${StyledIcon} {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledAddCustomStepButton.defaultProps = defaultThemeProp;\n\nexport const StyledAddStepButton = styled(Button)``;\n\nexport const StyledCardContent = styled.div<{ hasSteps?: boolean }>(({ hasSteps, theme }) => {\n  if (!hasSteps) return;\n\n  return css`\n    & > ${StyledButton}, & > ${StyledAddCustomStepButton} {\n      margin-block-start: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledTaskButton = styled.button<Pick<TaskComponentProps, 'visual'>>(\n  ({ theme, visual }) => {\n    return css`\n      background: ${theme.base.palette['primary-background']};\n      border: none;\n      height: ${theme.components.button.height};\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      text-align: start;\n\n      ${visual.imgSrc &&\n      css`\n        padding-inline-start: calc(0.5 * ${theme.base.spacing});\n      `}\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:focus {\n        outline: none;\n      }\n    `;\n  }\n);\n\nStyledTaskButton.defaultProps = defaultThemeProp;\n\nexport const StyledTask = styled.article<{\n  hasFocus: boolean;\n  hasSteps?: boolean;\n  dragEnabled?: boolean;\n}>(({ hasFocus, hasSteps, theme, dragEnabled }) => {\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    border: 0.125rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    padding: calc(${theme.base.spacing} - 0.125rem);\n\n    ${hasFocus &&\n    css`\n      box-shadow: ${theme.base.shadow.focus};\n    `}\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &[aria-current='true'] {\n      border-color: ${theme.base.palette.interactive};\n    }\n\n    ${hasSteps &&\n    !dragEnabled &&\n    css`\n      ${StyledAddCustomStepButton} ,${StyledAddStepButton} {\n        margin-block-start: calc(0.5 * ${theme.base.spacing});\n      }\n    `}\n  `;\n});\n\nStyledTask.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-start: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst Task: FunctionComponent<TaskComponentProps & ForwardProps> = ({\n  value,\n  visual,\n  actions,\n  item,\n  addStepTitle,\n  addTask,\n  stageItem,\n  error,\n  onAddStep,\n  onAddCustomStep,\n  onClick,\n  categoryItem,\n  id,\n  step: stepProp,\n  nodeLibrary,\n  ...restProps\n}: PropsWithChildren<TaskComponentProps>) => {\n  const t = useI18n();\n  const { selectedItemId, readOnly, dragEnabled, onDragDrop } = useContext(LifeCycleContext);\n  const [taskHasFocus, setTaskHasFocus] = useState(false);\n  const [taskButtonEl, setTaskButtonEl] = useElement();\n  const [addEl, setAddEl] = useElement<HTMLButtonElement>(null);\n\n  const taskTestID = generateDynamicTestId([stageItem.label, categoryItem.categoryLabel, value]);\n  const testIds = useTestIds(taskTestID, getTaskTestIds);\n  const stepTestIds = useTestIds(taskTestID, getStepTestIds);\n\n  const onActionItemClick = (\n    actionId: string,\n    e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n  ) => {\n    const param: LifeCycleActionParam = {\n      task: item,\n      stage: stageItem,\n      category: categoryItem\n    };\n    actions?.forEach(actionItem => {\n      if (actionItem.id === actionId) {\n        actionItem.onClick(param, e);\n      }\n    });\n  };\n  // Deep copy of actions is required to provide consistent callback objects on actions\n  const actionsClone: Action[] = [];\n\n  if (actions) {\n    actions.forEach(actionItem => {\n      const actionCloneItem = {} as Action;\n      Object.keys(actionItem).forEach((key: string) => {\n        actionCloneItem[key] = actionItem[key];\n      });\n      actionCloneItem.onClick = onActionItemClick;\n      actionsClone.push({\n        ...actionCloneItem,\n        'data-testid': testIds.actionButton\n      });\n      return actionItem;\n    });\n  }\n\n  const onTaskClick = (e: MouseEvent) => {\n    const actionParam: LifeCycleActionParam = {\n      value,\n      task: item,\n      stage: stageItem,\n      category: categoryItem,\n      type: 'Task'\n    };\n    onClick?.(actionParam, e);\n  };\n\n  const onLibraryItemSelect = useCallback(\n    (libItem: LibraryItem) => {\n      const param: LifeCycleActionParam = {\n        task: item,\n        stage: stageItem,\n        category: categoryItem\n      };\n      onAddStep?.(param, libItem);\n    },\n    [onAddStep]\n  );\n\n  const isEmpty = (readOnly || (!readOnly && !addStepTitle)) && !item?.steps?.length && !value;\n\n  const getStepProps = useCallback(\n    (step: StepItemProps, index: number): StepComponentProps => {\n      return {\n        id: step.id,\n        value: step.label,\n        visual: {\n          imgSrc: step.visual.imgSrc,\n          name: step.visual.name,\n          label: step.visual.label,\n          category: step.visual.category,\n          inverted: step.visual.inverted\n        },\n        item: { ...step, index, alternate: item.alternate },\n        taskItem: item,\n        stageItem,\n        badge: {\n          type: step?.status?.type ?? '',\n          label: step?.status?.label ?? ''\n        },\n        error: step.error,\n        categoryItem\n      };\n    },\n    [categoryItem, item, stageItem]\n  );\n\n  const addStepRegion = (\n    <>\n      {!readOnly && addStepTitle && nodeLibrary && (\n        <>\n          <Button\n            as={StyledAddStepButton}\n            data-testid={stepTestIds.addButton}\n            variant='simple'\n            label={t('add_noun', [addStepTitle])}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => setAddEl(e.currentTarget)}\n            icon\n          >\n            <Icon name='plus' />\n          </Button>\n          {addEl && (\n            <ItemLibrary\n              items={nodeLibrary}\n              target={addEl}\n              onClick={onLibraryItemSelect}\n              onDismiss={() => setAddEl(null)}\n              placeholder={t('search_placeholder_default')}\n            />\n          )}\n        </>\n      )}\n      {!readOnly && addStepTitle && !nodeLibrary && onAddCustomStep && (\n        <Button\n          as={StyledAddCustomStepButton}\n          data-testid={stepTestIds.addButton}\n          variant='link'\n          onClick={() => {\n            const param: LifeCycleActionParam = {\n              task: item,\n              stage: stageItem,\n              category: categoryItem\n            };\n            onAddCustomStep(param);\n          }}\n        >\n          <Icon name='plus' />\n          {t('add_noun', [addStepTitle])}\n        </Button>\n      )}\n    </>\n  );\n\n  return (\n    <StyledTaskList data-testid={testIds.root} {...restProps} id={item.id}>\n      {isEmpty ? (\n        <Flex container={{ justify: 'center', pad: 1 }}>\n          <Text variant='secondary'>No Steps</Text>\n        </Flex>\n      ) : (\n        <Flex\n          as={StyledTask}\n          aria-current={selectedItemId === id ? 'true' : undefined}\n          container={{ direction: 'column' }}\n          hasFocus={taskHasFocus && selectedItemId !== id}\n          hasSteps={!!item?.steps?.length}\n          dragEnabled={dragEnabled}\n        >\n          {!!value && (\n            <Flex as={StyledCardHeader} container={{ inline: true, alignItems: 'center' }}>\n              {visual?.imgSrc?.length > 0 && <Avatar name={value} imageSrc={visual?.imgSrc} />}\n              {error && <StyledWarnIcon name='warn-solid' />}\n              <Flex\n                item={{ grow: 1 }}\n                container={{ inline: true, alignItems: 'center' }}\n                onClick={onTaskClick}\n              >\n                <StyledTaskButton\n                  onFocus={() => {\n                    setTaskHasFocus(true);\n                  }}\n                  onBlur={() => {\n                    setTaskHasFocus(false);\n                  }}\n                  aria-label={t(error ? 'process_name_error' : 'process_name', [value])}\n                  visual={visual}\n                  ref={setTaskButtonEl}\n                >\n                  {value}\n                </StyledTaskButton>\n                {taskButtonEl && (\n                  <Tooltip target={taskButtonEl} smart>\n                    {value}\n                  </Tooltip>\n                )}\n              </Flex>\n              {actionsClone && (\n                <Actions\n                  items={actionsClone}\n                  menuAt={2}\n                  iconOnly\n                  contextualLabel={t('process_name', [value])}\n                />\n              )}\n            </Flex>\n          )}\n          <StyledCardContent hasSteps={!!item?.steps?.length} as={dragEnabled ? 'div' : 'ul'}>\n            {dragEnabled ? (\n              <LifeCycleDragDropList\n                type={stageItem.alternate ? 'alternate-step' : 'step'}\n                listLocation={{\n                  alternate: !!stageItem.alternate,\n                  stage: stageItem.index,\n                  category: categoryItem.index,\n                  task: item.index,\n                  subTask: item.subIndex\n                }}\n                items={item?.steps?.map((step, index) => ({\n                  id: step.id,\n                  type: stageItem.alternate ? 'alternate-step' : 'step',\n                  data: { ...stepProp, ...getStepProps(step, index) }\n                }))}\n                itemRenderer={Step}\n                onDragDrop={onDragDrop}\n                additionalDropZone={addStepRegion}\n              />\n            ) : (\n              <>\n                {item?.steps?.map((step, index) => (\n                  <Step {...stepProp} key={step.id} {...getStepProps(step, index)} />\n                ))}\n              </>\n            )}\n          </StyledCardContent>\n          {!dragEnabled && <div>{addStepRegion}</div>}\n        </Flex>\n      )}\n    </StyledTaskList>\n  );\n};\n\nexport default withTestIds(Task, getTaskTestIds);\n"]}

package/lib/components/LifeCycle/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './LifeCycle';
-export type { StepItemProps, TaskItemProps, StageItemProps, CategoryItemProps, CategoriesItemProps, LifeCycleActionParam, LifeCycleAction, LifeCycleProps } from './LifeCycle.types';
+export { defaultDragDropConfig, moveStage, moveStep } from './utils';
+export type { StepItemProps, TaskItemProps, StageItemProps, CategoryItemProps, CategoriesItemProps, LifeCycleActionParam, LifeCycleAction, LifeCycleDragDropEvent, DragDropConfig, LifeCycleProps } from './LifeCycle.types';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/LifeCycle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,EACf,cAAc,EACf,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrE,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,cAAc,EACd,cAAc,EACf,MAAM,mBAAmB,CAAC"}

package/lib/components/LifeCycle/index.js

@@ -1,2 +1,3 @@
 export { default } from './LifeCycle';
+export { defaultDragDropConfig, moveStage, moveStep } from './utils';
 //# sourceMappingURL=index.js.map

package/lib/components/LifeCycle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default } from './LifeCycle';\nexport type {\n  StepItemProps,\n  TaskItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  CategoriesItemProps,\n  LifeCycleActionParam,\n  LifeCycleAction,\n  LifeCycleProps\n} from './LifeCycle.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default } from './LifeCycle';\nexport { defaultDragDropConfig, moveStage, moveStep } from './utils';\nexport type {\n  StepItemProps,\n  TaskItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  CategoriesItemProps,\n  LifeCycleActionParam,\n  LifeCycleAction,\n  LifeCycleDragDropEvent,\n  DragDropConfig,\n  LifeCycleProps\n} from './LifeCycle.types';\n"]}

package/lib/components/LifeCycle/utils.d.ts

@@ -0,0 +1,14 @@
+import type { DragDropConfig, IndexData, LifeCycleDragDropEvent, StageItemProps } from './LifeCycle.types';
+import type { LifeCycleContextValue } from './LifeCycleContext';
+export declare const defaultDragDropConfig: DragDropConfig;
+export declare const generateDynamicTestId: (arr: (string | undefined)[]) => string;
+export declare const moveStage: (event: LifeCycleDragDropEvent, stages: StageItemProps[], alternateStages: StageItemProps[]) => {
+    stages: StageItemProps[];
+    alternateStages: StageItemProps[];
+} | undefined;
+export declare const moveStep: (event: LifeCycleDragDropEvent, stages: StageItemProps[], alternateStages: StageItemProps[]) => {
+    stages: StageItemProps[];
+    alternateStages: StageItemProps[];
+} | undefined;
+export declare const getListLocation: (currentListLocation: IndexData, type: LifeCycleDragDropEvent["type"], lifeCycleData: LifeCycleContextValue["lifeCycleData"], direction: "prev" | "next") => IndexData | undefined;
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/LifeCycle/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,sBAAsB,EACtB,cAAc,EAGf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,eAAO,MAAM,qBAAqB,EAAE,cAiBnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,QAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,WAKhE,CAAC;AAgCF,eAAO,MAAM,SAAS,UACb,sBAAsB,UACrB,cAAc,EAAE,mBACP,cAAc,EAAE;;;aA0BlC,CAAC;AAEF,eAAO,MAAM,QAAQ,UACZ,sBAAsB,UACrB,cAAc,EAAE,mBACP,cAAc,EAAE;;;aAqBlC,CAAC;AAmKF,eAAO,MAAM,eAAe,wBACL,SAAS,QACxB,sBAAsB,CAAC,MAAM,CAAC,iBACrB,qBAAqB,CAAC,eAAe,CAAC,aAC1C,MAAM,GAAG,MAAM,KACzB,SAAS,GAAG,SAmDd,CAAC"}

package/lib/components/LifeCycle/utils.js

@@ -0,0 +1,250 @@
+export const defaultDragDropConfig = {
+    stage: {
+        enabled: true,
+        accept: ['stage', 'alternate-stage']
+    },
+    step: {
+        enabled: true,
+        accept: ['step', 'alternate-step']
+    },
+    'alternate-stage': {
+        enabled: true,
+        accept: ['stage', 'alternate-stage']
+    },
+    'alternate-step': {
+        enabled: true,
+        accept: ['step', 'alternate-step']
+    }
+};
+export const generateDynamicTestId = (arr) => {
+    return arr
+        .filter(element => element)
+        .map(element => element?.replace(/\s+/g, '-').toLowerCase())
+        .join('_');
+};
+const getStageData = (stages, indexData) => {
+    if (indexData.stage === undefined)
+        return;
+    return stages[indexData.stage];
+};
+const getCategoryData = (stages, indexData) => {
+    if (indexData.category === undefined)
+        return;
+    const stage = getStageData(stages, indexData);
+    if (!stage)
+        return;
+    return stage.categories[indexData.category];
+};
+const getTaskData = (stages, indexData) => {
+    if (indexData.task === undefined)
+        return;
+    const category = getCategoryData(stages, indexData);
+    if (!category)
+        return;
+    if (Array.isArray(category.tasks[indexData.task])) {
+        if (indexData.subTask === undefined)
+            return;
+        return category.tasks[indexData.task][indexData.subTask];
+    }
+    return category.tasks[indexData.task];
+};
+const getStepData = (stages, indexData) => {
+    if (indexData.step === undefined)
+        return;
+    const task = getTaskData(stages, indexData);
+    if (!task)
+        return;
+    return task.steps[indexData.step];
+};
+export const moveStage = (event, stages, alternateStages) => {
+    let stagesClone = JSON.parse(JSON.stringify(stages));
+    let alternateStagesClone = JSON.parse(JSON.stringify(alternateStages));
+    // Remove the stage from its original position
+    let sourceData = event.sourceData.alternate ? alternateStagesClone : stagesClone;
+    const stage = getStageData(sourceData, event.sourceData);
+    if (!stage || event.targetData.stage === undefined)
+        return;
+    sourceData = sourceData.filter((item) => item.id !== stage.id);
+    if (event.sourceData.alternate) {
+        alternateStagesClone = sourceData;
+    }
+    else {
+        stagesClone = sourceData;
+    }
+    // Insert the stage in its new position
+    const targetData = event.targetData.alternate ? alternateStagesClone : stagesClone;
+    targetData.splice(event.targetData.stage, 0, stage);
+    if (event.targetData.alternate) {
+        alternateStagesClone = targetData;
+    }
+    else {
+        stagesClone = targetData;
+    }
+    return { stages: stagesClone, alternateStages: alternateStagesClone };
+};
+export const moveStep = (event, stages, alternateStages) => {
+    const stagesClone = JSON.parse(JSON.stringify(stages));
+    const alternateStagesClone = JSON.parse(JSON.stringify(alternateStages));
+    const sourceData = event.sourceData.alternate ? alternateStagesClone : stagesClone;
+    const targetData = event.targetData.alternate ? alternateStagesClone : stagesClone;
+    // Remove the step from its original position
+    const parentTask = getTaskData(sourceData, event.sourceData);
+    const step = getStepData(sourceData, event.sourceData);
+    if (!parentTask || !step)
+        return;
+    parentTask.steps = parentTask.steps.filter((item) => item.id !== step.id);
+    // Insert the step in its new position
+    const targetTask = getTaskData(targetData, event.targetData);
+    if (!targetTask || event.targetData.step === undefined)
+        return;
+    targetTask.steps = targetTask.steps || [];
+    targetTask.steps.splice(event.targetData.step, 0, step);
+    return { stages: stagesClone, alternateStages: alternateStagesClone };
+};
+const getTargetTaskLocation = (stages, currentListLocation, direction, layer) => {
+    const { stage, category, task } = currentListLocation;
+    if (currentListLocation[layer] === undefined || stage === undefined) {
+        return;
+    }
+    const jump = direction === 'next' ? 1 : -1;
+    let targetIndex = currentListLocation[layer] + jump;
+    if (layer === 'subTask') {
+        if (category === undefined || task === undefined) {
+            return;
+        }
+        const parentList = stages[stage].categories[category].tasks[task];
+        if (!Array.isArray(parentList)) {
+            return;
+        }
+        if (targetIndex < 0 || targetIndex >= parentList.length) {
+            return getTargetTaskLocation(stages, { ...currentListLocation, subTask: undefined }, direction, 'task');
+        }
+        return { ...currentListLocation, subTask: targetIndex, step: 0 };
+    }
+    if (layer === 'task') {
+        if (category === undefined) {
+            return;
+        }
+        const parentList = stages[stage].categories[category].tasks;
+        if (!Array.isArray(parentList)) {
+            return;
+        }
+        if (targetIndex < 0 || targetIndex >= parentList.length) {
+            return getTargetTaskLocation(stages, { ...currentListLocation, task: undefined }, direction, 'category');
+        }
+        if (Array.isArray(parentList[targetIndex])) {
+            return {
+                ...currentListLocation,
+                task: targetIndex,
+                subTask: direction === 'next' ? 0 : parentList[targetIndex].length - 1,
+                step: 0
+            };
+        }
+        return { ...currentListLocation, task: targetIndex, step: 0 };
+    }
+    if (layer === 'category') {
+        const parentList = stages[stage].categories;
+        if (!Array.isArray(parentList)) {
+            return;
+        }
+        if (targetIndex < 0 || targetIndex >= parentList.length) {
+            return getTargetTaskLocation(stages, { ...currentListLocation, category: undefined }, direction, 'stage');
+        }
+        while (parentList[targetIndex].tasks.length === 0) {
+            targetIndex += jump;
+            if (targetIndex < 0 || targetIndex >= parentList.length) {
+                return getTargetTaskLocation(stages, { ...currentListLocation, category: undefined }, direction, 'stage');
+            }
+        }
+        const taskIndex = direction === 'next' ? 0 : parentList[targetIndex].tasks.length - 1;
+        if (Array.isArray(parentList[targetIndex].tasks[taskIndex])) {
+            return {
+                ...currentListLocation,
+                category: targetIndex,
+                task: taskIndex,
+                subTask: direction === 'next'
+                    ? 0
+                    : parentList[targetIndex].tasks[taskIndex].length - 1,
+                step: 0
+            };
+        }
+        return { ...currentListLocation, category: targetIndex, task: taskIndex, step: 0 };
+    }
+    if (layer === 'stage') {
+        const parentList = stages;
+        if (!Array.isArray(parentList)) {
+            return;
+        }
+        if (targetIndex < 0 || targetIndex >= parentList.length) {
+            // Returns false to indicate that the target may be in an adjacent stages list
+            return false;
+        }
+        if (parentList[targetIndex].categories.length === 0 ||
+            parentList[targetIndex].categories[0].tasks.length === 0) {
+            while (parentList[targetIndex].categories.length === 0 ||
+                parentList[targetIndex].categories[0].tasks.length === 0) {
+                targetIndex += jump;
+                if (targetIndex < 0 || targetIndex >= parentList.length) {
+                    // Returns false to indicate that the target may be in an adjacent stages list
+                    return false;
+                }
+            }
+        }
+        const categoryIndex = direction === 'next' ? 0 : parentList[targetIndex].categories.length - 1;
+        const taskIndex = direction === 'next' ? 0 : parentList[targetIndex].categories[categoryIndex].tasks.length - 1;
+        if (Array.isArray(parentList[targetIndex].categories[categoryIndex].tasks[taskIndex])) {
+            return {
+                ...currentListLocation,
+                stage: targetIndex,
+                category: categoryIndex,
+                task: taskIndex,
+                subTask: direction === 'next'
+                    ? 0
+                    : parentList[targetIndex].categories[categoryIndex].tasks[taskIndex].length - 1,
+                step: 0
+            };
+        }
+        return {
+            ...currentListLocation,
+            stage: targetIndex,
+            category: categoryIndex,
+            task: taskIndex,
+            step: 0
+        };
+    }
+};
+export const getListLocation = (currentListLocation, type, lifeCycleData, direction) => {
+    const { stages, alternateStages } = lifeCycleData;
+    const alternate = currentListLocation.alternate;
+    if (type === 'stage') {
+        const targetList = alternate ? stages : alternateStages;
+        if (targetList.length === 0) {
+            return;
+        }
+        return { stage: direction === 'next' ? 0 : targetList.length, alternate: !alternate };
+    }
+    if (type === 'step') {
+        const { stage, category, task } = currentListLocation;
+        if (stage === undefined || category === undefined || task === undefined) {
+            return;
+        }
+        const sourceList = alternate ? alternateStages : stages;
+        const currentStage = sourceList[stage];
+        const currentCategory = currentStage.categories[category];
+        const currentTask = currentCategory.tasks[task];
+        let targetTaskLocation = getTargetTaskLocation(sourceList, currentListLocation, direction, Array.isArray(currentTask) ? 'subTask' : 'task');
+        // If the target task location is false, it means that the target could be in an adjacent list
+        if (targetTaskLocation === false) {
+            const adjacentList = alternate ? stages : alternateStages;
+            // Set the entry point to 1 index out of bounds since getTargetTaskLocation will move the target index by 1
+            const entryPoint = direction === 'next' ? -1 : adjacentList.length;
+            targetTaskLocation = getTargetTaskLocation(adjacentList, { alternate: !alternate, stage: entryPoint }, direction, 'stage');
+            // If the target is not in an adjacent list, return undefined
+            if (targetTaskLocation === false) {
+                return;
+            }
+        }
+        return targetTaskLocation;
+    }
+};
+//# sourceMappingURL=utils.js.map