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

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeCycleDragDropList.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleDragDropList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useMemo, useContext, useLayoutEffect, useEffect } from 'react';\nimport type { ComponentType, ReactNode, RefObject } from 'react';\nimport type { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport { useElement, useUID } from '@pega/cosmos-react-core';\nimport type {\n  AsProp,\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp,\n  OmitStrict,\n  TestIdProp\n} from '@pega/cosmos-react-core';\nimport { Draggable, DragDropListContext, Droppable } from '@pega/cosmos-react-dnd';\nimport type { DraggableItem, DragDropListContextValue } from '@pega/cosmos-react-dnd';\n\nimport type {\n  IndexData,\n  LifeCycleDragDropEvent,\n  LifeCycleDragItemType,\n  LifeCycleProps\n} from './LifeCycle.types';\nimport type { StageComponentProps } from './Stage';\nimport type { StepComponentProps } from './Step';\nimport LifeCycleContext from './LifeCycleContext';\nimport { getListLocation } from './utils';\n\ninterface LifeCycleDragDropListProps<T extends object = object>\n  extends AsProp,\n    BaseProps,\n    NoChildrenProp,\n    TestIdProp,\n    Pick<LifeCycleProps, 'onDragDrop'> {\n  /** Unique identifier for the list */\n  id?: string;\n  /** The type of item within the list. */\n  type: LifeCycleDragItemType;\n  /** A set of indices that identify the list's location within the LifeCycle. */\n  listLocation: IndexData;\n  /** Array of data objects used for the list. */\n  items: DraggableItem<T>[];\n  /** User defined function that should return content for the draggable element. */\n  itemRenderer: ComponentType<T>;\n  /** A region for non-list item elements to be included in the droppable region. */\n  additionalDropZone?: ReactNode;\n}\n\ninterface LifeCycleDragDropListItem<T extends object = object> extends DraggableItem<T> {\n  /** Returns the dragged item to its original position. */\n  returnToSource?: (item: DraggableItem<T>) => void;\n  /** Removes the dragged item from its original position. */\n  removeFromSource?: () => void;\n  /** Triggers onDragDrop with data related to the new item position. */\n  changeTarget?: (item: LifeCycleDragDropListItem<T>) => void;\n  /** Data related to the item being dragged. */\n  sourceData?: LifeCycleDragDropEvent['sourceData'];\n  /** Data related to the target position of the dragged item. */\n  targetData?: LifeCycleDragDropEvent['targetData'];\n  /** The id of the list that the dragged item originated from. */\n  sourceListId?: string;\n  /** The id of the list that the item was dropped into. */\n  targetListId?: string;\n  /** Ref for the items in the droppable list. */\n  targetItemsRef?: RefObject<LifeCycleDragDropListItem<T>[]>;\n}\n\nconst LifeCycleDragDropList = <T extends object = object>({\n  testId,\n  id: idProp,\n  type,\n  listLocation,\n  items,\n  itemRenderer: ItemRenderer,\n  additionalDropZone,\n  onDragDrop,\n  as: Component = 'ul',\n  ...restProps\n}: LifeCycleDragDropListProps<T> & ForwardProps) => {\n  const { lifeCycleData, dragDropConfig, draggedItem, setDraggedItem } =\n    useContext(LifeCycleContext);\n  const [clonedItems, setClonedItems] = useState<LifeCycleDragDropListItem<T>[]>(items);\n  const draggedItemRef = useRef<LifeCycleDragDropListItem<T> | null>(null);\n  const draggedItemElRef = useRef<HTMLElement | null>(null);\n  const itemHoveringRef = useRef(false);\n  const itemRectsRef = useRef<DOMRect[] | null>(null);\n  const [listEl, setListEl] = useElement<HTMLElement>();\n  const uniqueId = useUID();\n  const listId = idProp ?? uniqueId;\n\n  const normalizedType = type.replace('alternate-', '') as LifeCycleDragDropEvent['type'];\n\n  const getItemData = (\n    item: LifeCycleDragDropListItem<T>,\n    newIndex?: number\n  ): LifeCycleDragDropEvent['sourceData'] => {\n    if (item.type === 'stage' || item.type === 'alternate-stage') {\n      const data = item.data as StageComponentProps;\n      return { alternate: !!data.item.alternate, stage: newIndex ?? data.item.index };\n    }\n    if (item.type === 'step' || item.type === 'alternate-step') {\n      const data = item.data as StepComponentProps;\n      return {\n        alternate: !!data.item.alternate,\n        stage: data.stageItem.index,\n        category: data.categoryItem.index,\n        task: data.taskItem.index,\n        subTask: data.taskItem.subIndex,\n        step: newIndex ?? data.item.index\n      };\n    }\n    return { alternate: false, stage: -1 };\n  };\n\n  const getItemRects = (): DOMRect[] | null => {\n    if (!listEl || listEl.children.length === 0) return null;\n    return [...listEl.children].map(itemEl => {\n      return itemEl.getBoundingClientRect();\n    });\n  };\n\n  useLayoutEffect(() => {\n    if (\n      !dragDropConfig.loading &&\n      (!draggedItem?.navigatingWithKeyboard ||\n        (draggedItem?.navigatingWithKeyboard && !draggedItemRef.current))\n    ) {\n      setClonedItems(items);\n    }\n  }, [items]);\n\n  const internalItemsRef = useRef(clonedItems);\n  internalItemsRef.current = clonedItems;\n\n  const triggerOnChange = (\n    sourceData?: LifeCycleDragDropEvent['sourceData'],\n    targetData?: LifeCycleDragDropEvent['targetData']\n  ) => {\n    if (\n      !onDragDrop ||\n      !sourceData ||\n      !targetData ||\n      JSON.stringify(sourceData) === JSON.stringify(targetData)\n    )\n      return;\n    onDragDrop({\n      type: normalizedType,\n      sourceData,\n      targetData\n    });\n  };\n\n  const getInsertIndex = (\n    item: DraggableItem<T>,\n    monitor: DropTargetMonitor | DragSourceMonitor\n  ): number => {\n    itemRectsRef.current = getItemRects();\n    const { current: itemRects } = itemRectsRef;\n    let insertIndex = -1;\n    const prevIndex = clonedItems.findIndex(({ id }) => id === item.id);\n\n    const clientXY = monitor.getClientOffset();\n    if (!itemRects || !clientXY) return insertIndex;\n\n    // If dragging stages, position must be calculated on the x-axis rather than the y-axis\n    const dragPreviewRectAnchor = normalizedType === 'stage' ? clientXY.x : clientXY.y;\n    const orientation = normalizedType === 'stage' ? 'horizontal' : 'vertical';\n\n    const calculateMiddle = ({ left, right, top, bottom }: DOMRect): number => {\n      if (orientation === 'horizontal') {\n        return left + (right - left) / 2;\n      }\n      return top + (bottom - top) / 2;\n    };\n\n    const atHead = dragPreviewRectAnchor < calculateMiddle(itemRects[0]);\n    const atTail = dragPreviewRectAnchor >= calculateMiddle(itemRects[itemRects.length - 1]);\n\n    if (atHead) {\n      insertIndex = 0;\n    } else if (atTail) {\n      insertIndex = prevIndex === itemRects.length - 1 ? prevIndex : itemRects.length;\n    } else {\n      itemRects.some((rect, i, rects) => {\n        if (i === rects.length - 1) {\n          if (prevIndex === i) insertIndex = i;\n          return true;\n        }\n        const afterCurrent = dragPreviewRectAnchor >= calculateMiddle(rect);\n        const beforeNext = dragPreviewRectAnchor < calculateMiddle(rects[i + 1]);\n\n        if (afterCurrent && beforeNext) {\n          if (prevIndex !== -1 && i >= prevIndex) insertIndex = i;\n          else insertIndex = i + 1;\n          return true;\n        }\n        return false;\n      });\n    }\n\n    return insertIndex;\n  };\n\n  // Re-arrange items within the applicable lists in relation to the position of the item being dragged\n  const positionItems = (item: LifeCycleDragDropListItem<T>, monitor: DropTargetMonitor): void => {\n    if (!monitor.canDrop() || !monitor.isOver({ shallow: true })) return;\n\n    const prevIndex = clonedItems.findIndex(({ id }) => id === item.id);\n\n    const insertIndex = getInsertIndex(item, monitor);\n    const targetData = { ...listLocation };\n    targetData[normalizedType] = insertIndex;\n    item.targetData = targetData;\n    item.targetListId = listId;\n\n    item.changeTarget = i => triggerOnChange(i.sourceData, i.targetData);\n    item.targetItemsRef = internalItemsRef;\n\n    let newItems: DraggableItem<T>[];\n\n    if (prevIndex !== -1) {\n      if (insertIndex === prevIndex) return;\n\n      newItems = clonedItems.filter(({ id }) => id !== item.id);\n      newItems.splice(insertIndex, 0, item);\n\n      setClonedItems(newItems);\n    } else {\n      newItems = [...clonedItems];\n      newItems.splice(insertIndex, 0, item);\n\n      setClonedItems(newItems);\n    }\n  };\n\n  // Setup data to manage the item being dragged\n  const onBegin =\n    (itemId: DraggableItem<T>['id']) =>\n    (): OmitStrict<LifeCycleDragDropListItem<T>, keyof DraggableItem<T>> => {\n      setDraggedItem({ type: normalizedType, id: itemId, navigatingWithKeyboard: false });\n\n      const initialIndex = clonedItems.findIndex(({ id }) => id === itemId);\n      const itemToDrag = clonedItems[initialIndex];\n      draggedItemRef.current = { ...itemToDrag, sourceListId: listId };\n      if (listEl) {\n        draggedItemElRef.current = listEl.querySelector(`[id=\"${itemToDrag.id}\"]`);\n        if (draggedItemElRef.current) {\n          draggedItemElRef.current.setAttribute('style', 'opacity: 0.5');\n        }\n      }\n      const itemData = getItemData(itemToDrag);\n\n      return {\n        returnToSource: (item: DraggableItem<T>) => {\n          setClonedItems(currentItems => {\n            const newItems = currentItems.filter(({ id }) => id !== itemId);\n            newItems.splice(initialIndex, 0, item);\n            return newItems;\n          });\n        },\n        removeFromSource: () => {\n          setClonedItems(currentItems => currentItems.filter(({ id }) => id !== itemId));\n        },\n        changeTarget: i => triggerOnChange(i.sourceData, i.targetData),\n        targetItemsRef: internalItemsRef,\n        sourceData: itemData,\n        targetData: itemData,\n        sourceListId: listId,\n        targetListId: listId\n      };\n    };\n\n  // Execute necessary actions for when the item is dropped\n  const onEnd = (item: LifeCycleDragDropListItem<T> | undefined, monitor: DragSourceMonitor) => {\n    if (!item) return;\n\n    if (monitor.didDrop()) {\n      if (JSON.stringify(item.sourceData) === JSON.stringify(item.targetData)) {\n        setDraggedItem(undefined);\n      } else {\n        item.changeTarget?.(item);\n        if (item.sourceListId !== item.targetListId) {\n          item.removeFromSource?.();\n        }\n      }\n    } else {\n      setDraggedItem(undefined);\n      item.returnToSource?.(item);\n    }\n    draggedItemRef.current = null;\n    if (draggedItemElRef.current) {\n      draggedItemElRef.current.setAttribute('style', 'opacity: unset');\n      draggedItemElRef.current = null;\n    }\n  };\n\n  const contextValue: DragDropListContextValue = useMemo(\n    () => ({\n      orientation: normalizedType === 'stage' ? 'horizontal' : 'vertical',\n      keyboardDragStart: itemId => {\n        const index = clonedItems.findIndex(({ id }) => id === itemId);\n        if (index === -1) return;\n\n        const itemToDrag = clonedItems[index];\n\n        if (itemToDrag) {\n          setDraggedItem({ type: normalizedType, id: itemId, navigatingWithKeyboard: true });\n          const itemData = getItemData(itemToDrag);\n\n          itemToDrag.returnToSource = (item: DraggableItem<T>) => {\n            setClonedItems(currentItems => {\n              const newItems = currentItems.filter(({ id }) => id !== itemId);\n              newItems.splice(index, 0, item);\n              return newItems;\n            });\n          };\n          itemToDrag.sourceData = itemData;\n          itemToDrag.targetData = itemData;\n          itemToDrag.sourceListId = listId;\n          itemToDrag.targetListId = listId;\n\n          draggedItemRef.current = itemToDrag;\n          setClonedItems(currentItems => {\n            const newItems = currentItems.filter(({ id }) => id !== itemId);\n            newItems.splice(index, 0, itemToDrag);\n            return newItems;\n          });\n        }\n      },\n      keyboardDragEnd: itemId => {\n        const item = clonedItems.find(({ id }) => id === itemId);\n        if (!item) return;\n\n        draggedItemRef.current = null;\n        triggerOnChange(item.sourceData, item.targetData);\n      },\n      keyboardDragCancel: itemId => {\n        const index = clonedItems.findIndex(({ id }) => id === itemId);\n        if (index === -1) return;\n\n        setDraggedItem(undefined);\n        draggedItemRef.current = null;\n        clonedItems[index].returnToSource?.(clonedItems[index]);\n      },\n      keyboardReorderItem: (itemId, direction) => {\n        const index = clonedItems.findIndex(({ id }) => id === itemId);\n        if (index === -1) return;\n\n        const itemData = getItemData(clonedItems[index]);\n\n        const newItems = [...clonedItems];\n\n        if (direction === 'prev' && index !== 0) {\n          const item = newItems.splice(index, 1)[0];\n          newItems.splice(index - 1, 0, {\n            ...item,\n            targetData: { ...itemData, [normalizedType]: index - 1 }\n          });\n          setClonedItems(newItems);\n        } else if (direction === 'next' && index !== clonedItems.length - 1) {\n          const item = newItems.splice(index, 1)[0];\n          newItems.splice(index + 1, 0, {\n            ...item,\n            targetData: { ...itemData, [normalizedType]: index + 1 }\n          });\n          setClonedItems(newItems);\n        }\n      },\n      keyboardMoveLists: (itemId, direction) => {\n        const item = clonedItems.find(({ id }) => id === itemId);\n        if (!item) return;\n\n        draggedItemRef.current = null;\n        setDraggedItem({ type: normalizedType, id: itemId, navigatingWithKeyboard: false });\n        const itemData = getItemData(item);\n\n        const targetListLocation = getListLocation(\n          listLocation,\n          normalizedType,\n          lifeCycleData,\n          direction\n        );\n\n        if (targetListLocation) {\n          triggerOnChange(itemData, targetListLocation);\n        }\n      }\n    }),\n    [clonedItems, triggerOnChange, normalizedType, listLocation, lifeCycleData]\n  );\n\n  return (\n    <DragDropListContext.Provider value={contextValue}>\n      <Droppable\n        accept={dragDropConfig[type].accept}\n        onHover={positionItems}\n        onDrop={positionItems}\n      >\n        {({ dropRef, collected: { isOver } }) => {\n          // Reset list items to original state if the item is no longer hovering over the list\n          // The useEffect is necessary for setting state within a render function\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          useEffect(() => {\n            if (!isOver && itemHoveringRef.current) {\n              const sourceItem = clonedItems.find(i => i.id === draggedItemRef.current?.id);\n              if (!sourceItem && !dragDropConfig.loading) {\n                // If item dragged away from target list, reset the items in that list to their original state\n                setClonedItems(items);\n              }\n            }\n            itemHoveringRef.current = isOver;\n          }, [isOver]);\n\n          return (\n            <Component\n              ref={(el: HTMLElement) => {\n                dropRef(el);\n                setListEl(el);\n              }}\n              {...restProps}\n            >\n              {clonedItems.map(item => {\n                return (\n                  <Draggable\n                    key={item.id}\n                    id={item.id}\n                    type={item.type}\n                    data={item.data}\n                    onBegin={onBegin(item.id)}\n                    onEnd={onEnd}\n                  >\n                    {({ dragRef, previewRef, collected }) => {\n                      return (\n                        <ItemRenderer\n                          testId={testId}\n                          id={item.id}\n                          type={item.type}\n                          {...item.data}\n                          dragRef={dragRef}\n                          previewRef={previewRef}\n                          {...collected}\n                          isDragging={!!item.sourceListId}\n                        />\n                      );\n                    }}\n                  </Draggable>\n                );\n              })}\n\n              {additionalDropZone}\n            </Component>\n          );\n        }}\n      </Droppable>\n    </DragDropListContext.Provider>\n  );\n};\n\nexport default LifeCycleDragDropList;\n"]}

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

@@ -1,5 +1,5 @@
-import type { FunctionComponent, Ref } from 'react';
-import type { NoChildrenProp } from '@pega/cosmos-react-core';
+import type { Ref, RefCallback } from 'react';
+import type { ForwardRefForwardPropsComponent, NoChildrenProp } from '@pega/cosmos-react-core';
 import type { StageItemProps, TaskProps, StepProps, CategoriesProps, StageType, StageProps } from './LifeCycle.types';
 export interface LifeCycleListProps extends NoChildrenProp {
     /** Pass reference to the LifeCycleComponent */
@@ -14,17 +14,19 @@ export interface LifeCycleListProps extends NoChildrenProp {
     step?: StepProps[];
     /** Data model should be have stages array */
     item: StageItemProps;
-    /** Count of number of stages */
+    /** Is first stage in list */
     isFirstItem?: boolean;
-    /** Index of stages item */
+    /** Is last stage in list */
     isLastItem?: boolean;
     /** type of stage */
     stageVariant?: StageType;
     /** type of previous stage */
-    prevStageVariant: StageType;
+    prevStageItem: StageItemProps;
     /** id for the list item */
     id?: string;
+    dragRef?: RefCallback<HTMLElement>;
+    previewRef?: RefCallback<HTMLElement>;
 }
-declare const LifeCycleList: FunctionComponent<LifeCycleListProps>;
+declare const LifeCycleList: ForwardRefForwardPropsComponent<LifeCycleListProps>;
 export default LifeCycleList;
 //# sourceMappingURL=LifeCycleList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycleList.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,KAAK,EACV,cAAc,EAEd,SAAS,EACT,SAAS,EACT,eAAe,EACf,SAAS,EACT,UAAU,EACX,MAAM,mBAAmB,CAAC;AAI3B,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,+CAA+C;IAC/C,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wCAAwC;IACxC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,0BAA0B;IAC1B,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IACnB,6CAA6C;IAC7C,IAAI,EAAE,cAAc,CAAC;IACrB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,6BAA6B;IAC7B,gBAAgB,EAAE,SAAS,CAAC;IAC5B,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAsBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CA6FvD,CAAC;AAEH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"LifeCycleList.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAE,+BAA+B,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG/F,OAAO,KAAK,EACV,cAAc,EAEd,SAAS,EACT,SAAS,EACT,eAAe,EACf,SAAS,EACT,UAAU,EACX,MAAM,mBAAmB,CAAC;AAI3B,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,+CAA+C;IAC/C,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wCAAwC;IACxC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,0BAA0B;IAC1B,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IACnB,6CAA6C;IAC7C,IAAI,EAAE,cAAc,CAAC;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,6BAA6B;IAC7B,aAAa,EAAE,cAAc,CAAC;IAC9B,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CACvC;AAOD,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CAgHtE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/LifeCycle/LifeCycleList.js

@@ -1,33 +1,20 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { defaultThemeProp, createUID, useDirection } from '@pega/cosmos-react-core';
+import styled from 'styled-components';
+import { useTheme, useUID } from '@pega/cosmos-react-core';
 import { getStageInfo } from './LifeCycle.types';
-import Stage from './Stage';
 import Category from './Category';
-const StyledLifeCycleList = styled.li(({ theme, lastItem }) => {
-    const { rtl } = useDirection();
-    return css `
-    list-style-type: none;
-    padding: 0 ${theme.base.spacing} 0 0;
-    width: 15rem;
-    ${lastItem &&
-        css `
-      padding: 0 calc(0.5 * ${theme.base.spacing}) 0 0;
-    `}
-    ${lastItem &&
-        rtl &&
-        css `
-      padding: 0 ${theme.base.spacing} 0 calc(0.5 * ${theme.base.spacing});
-    `}
-  `;
-});
-StyledLifeCycleList.defaultProps = defaultThemeProp;
-const LifeCycleList = forwardRef(function LifeCycleList({ item, isFirstItem, isLastItem, categories, stage: stageProps, task, step, prevStageVariant, stageVariant, id, ...restProps }, ref) {
+import Stage from './Stage';
+const StyledLifeCycleList = styled.li `
+  list-style-type: none;
+  width: 15rem;
+`;
+const LifeCycleList = forwardRef(({ item, isFirstItem, isLastItem, categories, stage: stageProps, task, step, prevStageItem, stageVariant, id, dragRef, previewRef, ...restProps }, ref) => {
     const showTitle = isFirstItem || false;
     let sortedCategory = [];
-    const listId = id || createUID();
+    const labelId = useUID();
+    const listId = id || labelId;
     // Function used to rearrange the category data depends on Categories order
     const catgoryItem = (categoryData) => {
         const sortedColumn = [];
@@ -45,24 +32,27 @@ const LifeCycleList = forwardRef(function LifeCycleList({ item, isFirstItem, isL
     if (categories && categories.length !== 0) {
         sortedCategory = catgoryItem(item.categories);
     }
-    const stageInfo = getStageInfo(item.type, prevStageVariant, isLastItem);
-    return (_jsxs(StyledLifeCycleList, { lastItem: isLastItem, children: [_jsx(Stage, { value: item.label, stageInfo: stageInfo, item: item, error: item.error, id: item.id, ...stageProps }), sortedCategory.length !== 0 &&
+    const theme = useTheme();
+    const stageInfo = getStageInfo(item.type, item.transitionType, prevStageItem, isLastItem, theme);
+    return (_jsxs(StyledLifeCycleList, { id: listId, ref: previewRef, children: [_jsx(Stage, { value: item.label, stageInfo: stageInfo, item: item, error: item.error, id: item.id, dragRef: dragRef, ...stageProps }), sortedCategory.length !== 0 &&
                 sortedCategory.map((categoryItem, categoryindex) => {
                     const taskProps = task[categoryindex];
                     let stepProps;
-                    if (step)
+                    if (step) {
                         stepProps = step[categoryindex];
-                    return (_createElement(Category, { ...restProps, key: categoryItem.categoryId, id: categoryItem.categoryId, ref: ref, category: categories[categoryindex], item: categoryItem, showTitle: showTitle, stageItem: item, task: taskProps, step: stepProps }));
+                    }
+                    return (_createElement(Category, { ...restProps, key: categoryItem.categoryId, id: categoryItem.categoryId, ref: ref, category: categories[categoryindex], item: { ...categoryItem, index: categoryindex, alternate: item.alternate }, showTitle: showTitle, stageItem: item, task: taskProps, step: stepProps }));
                 }), sortedCategory.length === 0 &&
                 categories.length === 0 &&
                 item.categories.length > 0 &&
                 item.categories.map((categoryItem, categoryindex) => {
                     const taskProps = task[categoryindex];
                     let stepProps;
-                    if (step)
+                    if (step) {
                         stepProps = step[categoryindex];
-                    return (_jsx(Category, { id: categoryItem.categoryId, ref: ref, item: categoryItem, stageItem: item, task: taskProps, step: stepProps, showTitle: showTitle }, categoryItem.categoryId));
-                })] }, listId));
+                    }
+                    return (_jsx(Category, { id: categoryItem.categoryId, ref: ref, item: { ...categoryItem, index: categoryindex, alternate: item.alternate }, stageItem: item, task: taskProps, step: stepProps, showTitle: showTitle }, categoryItem.categoryId));
+                })] }));
 });
 export default LifeCycleList;
 //# sourceMappingURL=LifeCycleList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycleList.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, createUID, useDirection } from '@pega/cosmos-react-core';\nimport type { NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport { getStageInfo } from './LifeCycle.types';\nimport type {\n  StageItemProps,\n  CategoryItemProps,\n  TaskProps,\n  StepProps,\n  CategoriesProps,\n  StageType,\n  StageProps\n} from './LifeCycle.types';\nimport Stage from './Stage';\nimport Category from './Category';\n\nexport interface LifeCycleListProps extends NoChildrenProp {\n  /** Pass reference to the LifeCycleComponent */\n  ref?: Ref<HTMLOListElement>;\n  /** Array of categories  column props */\n  categories: CategoriesProps[];\n  /** Array of Task props */\n  task: TaskProps[];\n  /** Array of Step props */\n  stage?: StageProps;\n  /** Array of Stage props */\n  step?: StepProps[];\n  /** Data model should be have stages array */\n  item: StageItemProps;\n  /** Count of number of stages */\n  isFirstItem?: boolean;\n  /** Index of stages item */\n  isLastItem?: boolean;\n  /** type of stage */\n  stageVariant?: StageType;\n  /** type of previous stage */\n  prevStageVariant: StageType;\n  /** id for the list item */\n  id?: string;\n}\n\nconst StyledLifeCycleList = styled.li<{ lastItem: boolean | undefined }>(({ theme, lastItem }) => {\n  const { rtl } = useDirection();\n  return css`\n    list-style-type: none;\n    padding: 0 ${theme.base.spacing} 0 0;\n    width: 15rem;\n    ${lastItem &&\n    css`\n      padding: 0 calc(0.5 * ${theme.base.spacing}) 0 0;\n    `}\n    ${lastItem &&\n    rtl &&\n    css`\n      padding: 0 ${theme.base.spacing} 0 calc(0.5 * ${theme.base.spacing});\n    `}\n  `;\n});\n\nStyledLifeCycleList.defaultProps = defaultThemeProp;\n\nconst LifeCycleList: FunctionComponent<LifeCycleListProps> = forwardRef(function LifeCycleList(\n  {\n    item,\n    isFirstItem,\n    isLastItem,\n    categories,\n    stage: stageProps,\n    task,\n    step,\n    prevStageVariant,\n    stageVariant,\n    id,\n    ...restProps\n  }: LifeCycleListProps,\n  ref: LifeCycleListProps['ref']\n) {\n  const showTitle = isFirstItem || false;\n  let sortedCategory: CategoryItemProps[] = [];\n  const listId = id || createUID();\n\n  // Function used to rearrange the category data depends on Categories order\n  const catgoryItem = (categoryData: CategoryItemProps[]) => {\n    const sortedColumn: CategoryItemProps[] = [];\n    if (categories && categories.length > 0 && categoryData.length > 0) {\n      categories.forEach(categoryColumnItem => {\n        categoryData.forEach((categoryItem: CategoryItemProps) => {\n          if (categoryItem.categoryId === categoryColumnItem.id) {\n            sortedColumn.push(categoryItem);\n          }\n        });\n      });\n    }\n    return sortedColumn;\n  };\n\n  if (categories && categories.length !== 0) {\n    sortedCategory = catgoryItem(item.categories);\n  }\n\n  const stageInfo = getStageInfo(item.type, prevStageVariant, isLastItem);\n  return (\n    <StyledLifeCycleList key={listId} lastItem={isLastItem}>\n      <Stage\n        value={item.label}\n        stageInfo={stageInfo}\n        item={item}\n        error={item.error}\n        id={item.id}\n        {...stageProps}\n      />\n      {sortedCategory.length !== 0 &&\n        sortedCategory.map((categoryItem: CategoryItemProps, categoryindex: number) => {\n          const taskProps = task[categoryindex];\n          let stepProps;\n          if (step) stepProps = step[categoryindex];\n          return (\n            <Category\n              {...restProps}\n              key={categoryItem.categoryId}\n              id={categoryItem.categoryId}\n              ref={ref}\n              category={categories[categoryindex]}\n              item={categoryItem}\n              showTitle={showTitle}\n              stageItem={item}\n              task={taskProps}\n              step={stepProps}\n            />\n          );\n        })}\n      {sortedCategory.length === 0 &&\n        categories.length === 0 &&\n        item.categories.length > 0 &&\n        item.categories.map((categoryItem: CategoryItemProps, categoryindex: number) => {\n          const taskProps = task[categoryindex];\n          let stepProps;\n          if (step) stepProps = step[categoryindex];\n\n          return (\n            <Category\n              key={categoryItem.categoryId}\n              id={categoryItem.categoryId}\n              ref={ref}\n              item={categoryItem}\n              stageItem={item}\n              task={taskProps}\n              step={stepProps}\n              showTitle={showTitle}\n            />\n          );\n        })}\n    </StyledLifeCycleList>\n  );\n});\n\nexport default LifeCycleList;\n"]}
+{"version":3,"file":"LifeCycleList.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, RefCallback } from 'react';\nimport styled from 'styled-components';\n\nimport { useTheme, useUID } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport { getStageInfo } from './LifeCycle.types';\nimport type {\n  StageItemProps,\n  CategoryItemProps,\n  TaskProps,\n  StepProps,\n  CategoriesProps,\n  StageType,\n  StageProps\n} from './LifeCycle.types';\nimport Category from './Category';\nimport Stage from './Stage';\n\nexport interface LifeCycleListProps extends NoChildrenProp {\n  /** Pass reference to the LifeCycleComponent */\n  ref?: Ref<HTMLOListElement>;\n  /** Array of categories  column props */\n  categories: CategoriesProps[];\n  /** Array of Task props */\n  task: TaskProps[];\n  /** Array of Step props */\n  stage?: StageProps;\n  /** Array of Stage props */\n  step?: StepProps[];\n  /** Data model should be have stages array */\n  item: StageItemProps;\n  /** Is first stage in list */\n  isFirstItem?: boolean;\n  /** Is last stage in list */\n  isLastItem?: boolean;\n  /** type of stage */\n  stageVariant?: StageType;\n  /** type of previous stage */\n  prevStageItem: StageItemProps;\n  /** id for the list item */\n  id?: string;\n  dragRef?: RefCallback<HTMLElement>;\n  previewRef?: RefCallback<HTMLElement>;\n}\n\nconst StyledLifeCycleList = styled.li`\n  list-style-type: none;\n  width: 15rem;\n`;\n\nconst LifeCycleList: ForwardRefForwardPropsComponent<LifeCycleListProps> = forwardRef(\n  (\n    {\n      item,\n      isFirstItem,\n      isLastItem,\n      categories,\n      stage: stageProps,\n      task,\n      step,\n      prevStageItem,\n      stageVariant,\n      id,\n      dragRef,\n      previewRef,\n      ...restProps\n    }: LifeCycleListProps,\n    ref: LifeCycleListProps['ref']\n  ) => {\n    const showTitle = isFirstItem || false;\n    let sortedCategory: CategoryItemProps[] = [];\n    const labelId = useUID();\n    const listId = id || labelId;\n\n    // Function used to rearrange the category data depends on Categories order\n    const catgoryItem = (categoryData: CategoryItemProps[]) => {\n      const sortedColumn: CategoryItemProps[] = [];\n      if (categories && categories.length > 0 && categoryData.length > 0) {\n        categories.forEach(categoryColumnItem => {\n          categoryData.forEach((categoryItem: CategoryItemProps) => {\n            if (categoryItem.categoryId === categoryColumnItem.id) {\n              sortedColumn.push(categoryItem);\n            }\n          });\n        });\n      }\n      return sortedColumn;\n    };\n\n    if (categories && categories.length !== 0) {\n      sortedCategory = catgoryItem(item.categories);\n    }\n\n    const theme = useTheme();\n\n    const stageInfo = getStageInfo(\n      item.type,\n      item.transitionType,\n      prevStageItem,\n      isLastItem,\n      theme\n    );\n\n    return (\n      <StyledLifeCycleList id={listId} ref={previewRef}>\n        <Stage\n          value={item.label}\n          stageInfo={stageInfo}\n          item={item}\n          error={item.error}\n          id={item.id}\n          dragRef={dragRef}\n          {...stageProps}\n        />\n        {sortedCategory.length !== 0 &&\n          sortedCategory.map((categoryItem: CategoryItemProps, categoryindex: number) => {\n            const taskProps = task[categoryindex];\n            let stepProps;\n            if (step) {\n              stepProps = step[categoryindex];\n            }\n            return (\n              <Category\n                {...restProps}\n                key={categoryItem.categoryId}\n                id={categoryItem.categoryId}\n                ref={ref}\n                category={categories[categoryindex]}\n                item={{ ...categoryItem, index: categoryindex, alternate: item.alternate }}\n                showTitle={showTitle}\n                stageItem={item}\n                task={taskProps}\n                step={stepProps}\n              />\n            );\n          })}\n        {sortedCategory.length === 0 &&\n          categories.length === 0 &&\n          item.categories.length > 0 &&\n          item.categories.map((categoryItem: CategoryItemProps, categoryindex: number) => {\n            const taskProps = task[categoryindex];\n            let stepProps;\n            if (step) {\n              stepProps = step[categoryindex];\n            }\n\n            return (\n              <Category\n                key={categoryItem.categoryId}\n                id={categoryItem.categoryId}\n                ref={ref}\n                item={{ ...categoryItem, index: categoryindex, alternate: item.alternate }}\n                stageItem={item}\n                task={taskProps}\n                step={stepProps}\n                showTitle={showTitle}\n              />\n            );\n          })}\n      </StyledLifeCycleList>\n    );\n  }\n);\n\nexport default LifeCycleList;\n"]}

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

@@ -1,6 +1,7 @@
-import type { FunctionComponent, Ref } from 'react';
-import type { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
+import type { Ref, RefCallback } from 'react';
+import type { BaseProps, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { StageInfo, StageItemProps, StageProps } from './LifeCycle.types';
+import { type LifeCycleContextValue } from './LifeCycleContext';
 export interface StageComponentProps extends BaseProps, StageProps {
     ref?: Ref<HTMLDivElement>;
     /** Pass text for the task. */
@@ -13,17 +14,21 @@ export interface StageComponentProps extends BaseProps, StageProps {
     item: StageItemProps;
     /** The status is used to show the input error status and the info on tooltip in case of error */
     error?: string;
+    dragRef?: RefCallback<HTMLElement>;
 }
-export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStageButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     error: string | undefined;
+    dragEnabled?: LifeCycleContextValue["dragEnabled"];
 }, never>;
 export declare const StyledStageActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledWarnIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<StageComponentProps, "stageInfo"> & {
-    status: boolean;
     error: string;
-}, never>;
-declare const Stage: FunctionComponent<StageComponentProps & ForwardProps>;
-export default Stage;
+    dragEnabled?: LifeCycleContextValue["dragEnabled"];
+    dragging?: boolean;
+} & Pick<StageItemProps, "transitionType">, never>;
+declare const _default: ForwardRefForwardPropsComponent<StageComponentProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly string[]>;
+};
+export default _default;
 //# sourceMappingURL=Stage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stage.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,GAAG,EAAc,MAAM,OAAO,CAAC;AAanF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAU,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAGV,SAAS,EACT,cAAc,EACd,UAAU,EACX,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,UAAU;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,SAAS,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,IAAI,EAAE,cAAc,CAAC;IACrB,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAIF,eAAO,MAAM,iBAAiB;WACrB,MAAM,GAAG,SAAS;SAyBzB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAE9B,CAAC;AAIF,eAAO,MAAM,cAAc,0LAQzB,CAAC;AAIH,eAAO,MAAM,WAAW;YAEZ,OAAO;WACR,MAAM;SAsIf,CAAC;AAIH,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAkG/D,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Stage.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAqB,GAAG,EAAc,WAAW,EAAE,MAAM,OAAO,CAAC;AAkB7E,OAAO,KAAK,EAAE,SAAS,EAAU,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAIlG,OAAO,KAAK,EAGV,SAAS,EACT,cAAc,EACd,UAAU,EACX,MAAM,mBAAmB,CAAC;AAE3B,OAAyB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAElF,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,UAAU;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,SAAS,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,IAAI,EAAE,cAAc,CAAC;IACrB,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,iBAAiB;WACrB,MAAM,GAAG,SAAS;kBACX,qBAAqB,CAAC,aAAa,CAAC;SAkClD,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAIH,eAAO,MAAM,cAAc,0LAQzB,CAAC;AAIH,eAAO,MAAM,WAAW;WAEb,MAAM;kBACC,qBAAqB,CAAC,aAAa,CAAC;eACvC,OAAO;kDAwHpB,CAAC;;;;AA+IH,wBAAmD"}

package/lib/components/LifeCycle/Stage.js

@@ -1,21 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, Actions, defaultThemeProp, useDirection, StyledButton, Icon, useI18n, readableColor } from '@pega/cosmos-react-core';
-export const StyledWrapper = styled.div `
-  overflow: hidden;
-`;
-StyledWrapper.defaultProps = defaultThemeProp;
-export const StyledStageButton = styled.button(({ error, theme }) => {
+import { Flex, Actions, defaultThemeProp, useDirection, StyledButton, Icon, useI18n, readableColor, useTestIds, withTestIds, useElement, Tooltip, readableHue } from '@pega/cosmos-react-core';
+import { DragHandle, StyledDragHandle } from '@pega/cosmos-react-dnd';
+import { generateDynamicTestId } from './utils';
+import { getStageTestIds } from './LifeCycle.test-ids';
+import LifeCycleContext, {} from './LifeCycleContext';
+export const StyledStageButton = styled.button(({ error, dragEnabled, theme }) => {
     return css `
     height: ${theme.components.button.height};
     outline: none;
     border: none;
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     text-align: start;
-    margin-inline-start: ${theme.base.spacing};
+    margin-inline-start: calc(${dragEnabled ? 0.25 : 0.5} * ${theme.base.spacing});
+    padding-inline: calc(${dragEnabled ? 0.25 : 0.5} * ${theme.base.spacing});
+    background: transparent;
+    z-index: 2;
 
     ${error &&
         css `
@@ -26,15 +30,23 @@ export const StyledStageButton = styled.button(({ error, theme }) => {
       cursor: pointer;
     }
 
+    &:focus {
+      outline: none;
+      box-shadow: ${theme.base.shadow.focus};
+    }
+
     &:disabled {
       cursor: not-allowed;
     }
   `;
 });
 StyledStageButton.defaultProps = defaultThemeProp;
-export const StyledStageActions = styled.div `
-  z-index: 2;
-`;
+export const StyledStageActions = styled.div(({ theme }) => {
+    return css `
+    z-index: 2;
+    margin-inline-end: calc(0.875 * ${theme.base.spacing});
+  `;
+});
 StyledStageActions.defaultProps = defaultThemeProp;
 export const StyledWarnIcon = styled(Icon)(({ theme }) => {
     return css `
@@ -46,10 +58,11 @@ export const StyledWarnIcon = styled(Icon)(({ theme }) => {
   `;
 });
 StyledWarnIcon.defaultProps = defaultThemeProp;
-export const StyledStage = styled.div(({ stageInfo, theme, status, error }) => {
+export const StyledStage = styled.div(({ stageInfo, theme, error, dragEnabled, dragging, transitionType }) => {
     const { visual: { bgColor, tailPointed, headPointed } } = stageInfo;
     const { rtl } = useDirection();
     const contrastColor = readableColor(bgColor);
+    const borderRadius = 'border-radius';
     const roundedEndsStyles = css `
     content: '';
     position: absolute;
@@ -60,50 +73,29 @@ export const StyledStage = styled.div(({ stageInfo, theme, status, error }) => {
     border: 0;
     border-inline-end: 0.0625rem solid transparent;
   `;
+    const spacing = `calc(0.5 * ${theme.base.spacing})`;
     return css `
     position: relative;
-    padding: calc(0.5 * ${theme.base.spacing});
+    padding: ${spacing};
     background: ${bgColor};
     border: 0.0625rem solid transparent;
     width: 100%;
-
+    height: '${theme.base.spacing}';
     &:hover {
       cursor: pointer;
     }
-
-    &:focus-within {
-      border: 0.0625rem solid ${theme.base.palette.interactive};
-
-      ${headPointed &&
+    ${transitionType === 'resolution' &&
+        stageInfo.id === 'alternate' &&
         css `
-        &::after {
-          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};
-          ${rtl
-            ? css `
-                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};
-              `
-            : css `
-                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};
-              `}
-        }
-      `}
+      border: none;
+      box-shadow: inset 0 -0.5rem 0 0 ${readableHue(theme.base.colors.green.medium, theme.base.palette.light)};
 
-      ${tailPointed &&
-        css `
-        &::before {
-          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};
-          ${rtl
-            ? css `
-                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};
-              `
-            : css `
-                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};
-              `}
-        }
-      `}
-    }
+      /* adding 0.0625rem to padding since 0.0625rem border is removed. */
+      padding: calc(${spacing} + 0.0625rem);
+    `}
 
     ${headPointed &&
+        !dragging &&
         css `
       &::after {
         ${roundedEndsStyles}
@@ -114,11 +106,10 @@ export const StyledStage = styled.div(({ stageInfo, theme, status, error }) => {
         border-block-end: 0.0625rem solid transparent;
         ${rtl
             ? css `
-              border-radius: calc(0.75 * ${theme.base['border-radius']}) 0.1rem 0.1rem 0.1rem;
+              border-radius: calc(0.75 * ${theme.base[borderRadius]}) 0.1rem 0.1rem 0.1rem;
             `
             : css `
-              border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base['border-radius']})
-                0.0625rem;
+              border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base[borderRadius]}) 0.0625rem;
             `}
       }
     `}
@@ -126,6 +117,7 @@ export const StyledStage = styled.div(({ stageInfo, theme, status, error }) => {
     ${tailPointed &&
         css `
       ${!error &&
+            !dragEnabled &&
             css `
         ${StyledStageButton} {
           margin-inline-start: calc(1.5 * ${theme.base.spacing});
@@ -139,25 +131,30 @@ export const StyledStage = styled.div(({ stageInfo, theme, status, error }) => {
         }
       `}
 
-      &::before {
-        ${roundedEndsStyles}
-        background: ${theme.base.palette['app-background']};
-        transform: rotateZ(45deg) skew(15deg, 15deg);
-        inset-inline-start: calc(-1.6 * ${theme.base.spacing});
-        ${rtl
-            ? css `
-              border-block-end: 0.0625rem solid transparent;
-              border-radius: 0.0625rem 1rem 0.0625rem calc(0.75 * ${theme.base['border-radius']});
-            `
-            : css `
-              border-block-start: 0.0625rem solid transparent;
-              border-radius: 0.0625rem calc(0.75 * ${theme.base['border-radius']}) 0.0625rem 1rem;
-            `}
-      }
+      ${!dragging &&
+            css `
+        &::before {
+          ${roundedEndsStyles}
+          background: ${theme.base.palette['app-background']};
+          transform: rotateZ(45deg) skew(15deg, 15deg);
+          inset-inline-start: calc(-1.6 * ${theme.base.spacing});
+          ${rtl
+                ? css `
+                border-block-end: 0.0625rem solid transparent;
+                border-radius: 0.0625rem 1rem 0.0625rem calc(0.75 * ${theme.base[borderRadius]});
+              `
+                : css `
+                border-block-start: 0.0625rem solid transparent;
+                border-radius: 0.0625rem calc(0.75 * ${theme.base[borderRadius]}) 0.0625rem 1rem;
+              `}
+        }
+      `}
     `}
 
     ${StyledWarnIcon} {
       color: ${contrastColor};
+      margin-inline-start: calc(${dragEnabled ? 0.5 : 1.25} * ${theme.base.spacing});
+      margin-inline-end: ${theme.base.spacing};
     }
 
     ${StyledStageActions} {
@@ -168,16 +165,22 @@ export const StyledStage = styled.div(({ stageInfo, theme, status, error }) => {
 
     ${StyledStageButton} {
       color: ${contrastColor};
-      ${!status &&
-        css `
-        background: ${bgColor};
-      `}
+    }
+
+    ${StyledDragHandle} {
+      color: ${contrastColor};
+      margin-inline-start: ${theme.base.spacing};
     }
   `;
 });
 StyledStage.defaultProps = defaultThemeProp;
-const Stage = forwardRef(function Stage({ value, actions, stageInfo, onClick, id, item, error, ...restProps }, ref) {
+const Stage = forwardRef(({ value, actions, stageInfo, onClick, id, item, error, dragRef, ...restProps }, ref) => {
+    const { dragDropConfig, dragEnabled, draggedItem } = useContext(LifeCycleContext);
+    const [stageButtonEl, setStageButtonEl] = useElement();
     const t = useI18n();
+    let accessibilityLabel;
+    const stageTestID = generateDynamicTestId([value]);
+    const testIds = useTestIds(stageTestID, getStageTestIds);
     const onStageClick = (e) => {
         const actionParam = {
             value,
@@ -186,7 +189,7 @@ const Stage = forwardRef(function Stage({ value, actions, stageInfo, onClick, id
         };
         onClick?.(actionParam, e);
     };
-    const onActionItemClick = (actionId, e) => {
+    const onActionItemClick = (actionId, e, menuButtonEl) => {
         const param = {
             stage: item
         };
@@ -200,7 +203,7 @@ const Stage = forwardRef(function Stage({ value, actions, stageInfo, onClick, id
             }
             actionsList?.forEach((actionItem) => {
                 if (actionItem.id === actionId) {
-                    actionItem.onClick?.(param, e);
+                    actionItem.onClick?.(param, e, menuButtonEl);
                 }
             });
         }
@@ -221,11 +224,23 @@ const Stage = forwardRef(function Stage({ value, actions, stageInfo, onClick, id
                 actionCloneItem[key] = actionItem[key];
             });
             actionCloneItem.onClick = onActionItemClick;
-            actionsClone.push(actionCloneItem);
+            actionsClone.push({
+                ...actionCloneItem
+            });
             return actionItem;
         });
     }
-    return (_jsxs(Flex, { ...restProps, container: { inline: true, alignItems: 'center' }, as: StyledStage, ref: ref, error: error, stageInfo: stageInfo, id: item.id, "aria-label": error ? t('stage_name_error', [value]) : undefined, children: [error && _jsx(StyledWarnIcon, { name: 'warn-solid' }), _jsx(Flex, { as: StyledWrapper, container: { inline: true }, item: { grow: 1 }, onClick: onStageClick, children: _jsx(StyledStageButton, { error: error, "aria-label": error ? undefined : t('stage_name', [value]), children: value }) }), _jsx(StyledStageActions, { children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }) })] }));
+    if (item.transitionType === 'resolution') {
+        accessibilityLabel = `${t('wait_for_user_action', [t('stage_name', [value])])}`;
+    }
+    else if (item.transitionType === 'wait') {
+        accessibilityLabel = `${t('resolve_case', [t('stage_name', [value])])}`;
+    }
+    else {
+        accessibilityLabel = t('stage_name', [value]);
+    }
+    const stageDragEnabled = dragEnabled && dragDropConfig[item.alternate ? 'alternate-stage' : 'stage'].enabled;
+    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { inline: true, alignItems: 'center' }, as: StyledStage, ref: ref, error: error, dragEnabled: stageDragEnabled, dragging: draggedItem?.type === 'stage', stageInfo: stageInfo, "aria-label": error ? t('stage_name_error', [value]) : undefined, transitionType: item.transitionType, children: [stageDragEnabled && (_jsx(DragHandle, { itemId: id, ref: dragRef, onClick: e => e.stopPropagation() })), error && _jsx(StyledWarnIcon, { name: 'warn-solid' }), _jsxs(Flex, { container: { inline: true }, item: { grow: 1 }, onClick: onStageClick, children: [_jsx(StyledStageButton, { error: error, dragEnabled: stageDragEnabled, "aria-label": error ? undefined : accessibilityLabel, ref: setStageButtonEl, children: value }), stageButtonEl && (_jsx(Tooltip, { target: stageButtonEl, smart: true, children: value }))] }), _jsx(StyledStageActions, { children: actionsClone && (_jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true, contextualLabel: t('stage_name', [value]) })) })] }));
 });
-export default Stage;
+export default withTestIds(Stage, getStageTestIds);
 //# sourceMappingURL=Stage.js.map