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

package/lib/components/ItemLibrary/ItemLibrary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemLibrary.js","sourceRoot":"","sources":["../../../src/components/ItemLibrary/ItemLibrary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, PropsWithoutRef, Ref, CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Icon,\n  Menu,\n  menuHelpers,\n  Popover,\n  SearchInput,\n  cap,\n  createStringMatcher,\n  defaultThemeProp,\n  readableColor\n} from '@pega/cosmos-react-core';\nimport type {\n  SearchInputProps,\n  ForwardProps,\n  MenuGroupProps,\n  MenuItemProps,\n  PopoverProps\n} from '@pega/cosmos-react-core';\n\nimport { colorMap } from '../../utils';\nimport type { ColorName } from '../../utils';\n\nexport interface LibraryItem extends MenuItemProps {\n  id: string;\n  type: ItemVisual;\n  items?: LibraryItem[];\n}\nexport interface ItemVisual {\n  color: ColorName;\n  icon: string;\n}\nexport interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {\n  show: boolean;\n  target: HTMLElement | null;\n  items: T[];\n  onClick?: (libItem: T) => void;\n  ref?: Ref<HTMLDivElement>;\n  placeholder?: SearchInputProps['placeholder'];\n  position?: PopoverProps['placement'];\n}\n\nexport const StyledIcon = styled.div(({ theme }) => {\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nconst ItemLibrary: FC<ItemLibraryProps & ForwardProps> = forwardRef(function ItemLibrary(\n  {\n    show,\n    target,\n    items,\n    onClick,\n    placeholder,\n    position = 'bottom-start'\n  }: PropsWithoutRef<ItemLibraryProps>,\n  ref: ItemLibraryProps['ref']\n) {\n  const [search, setSearch] = useState('');\n\n  const searchEleRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (show) {\n      setSearch('');\n      searchEleRef?.current?.focus();\n    }\n  }, [show, searchEleRef.current]);\n\n  const searchRegex = useMemo(\n    () => (search ? createStringMatcher(cap(search), 'contains', '') : null),\n    [search]\n  );\n\n  const itemsToRender: (MenuItemProps | MenuGroupProps)[] = useMemo(() => {\n    return menuHelpers.mapTree(\n      searchRegex\n        ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n            return searchRegex.test(primary);\n          })\n        : items,\n      node => {\n        let selectable = false;\n        if (!node.items) {\n          selectable = true;\n        }\n\n        const nodeItem: LibraryItem = node as LibraryItem;\n        return {\n          ...node,\n          visual: nodeItem.type ? (\n            <StyledIcon\n              id={node.id}\n              style={\n                {\n                  '--bg-color': colorMap[nodeItem.type.color],\n                  '--fg-color': readableColor(colorMap[nodeItem.type.color])\n                } as CSSProperties\n              }\n            >\n              <Icon name={nodeItem.type.icon} />\n            </StyledIcon>\n          ) : undefined,\n          count: node.items ? node.items.length : undefined,\n          secondary: node.secondary,\n          selected: selectable ? !!node.selected : undefined\n        };\n      }\n    );\n  }, [items, searchRegex]);\n\n  const onItemSelect = useCallback(\n    (id: MenuItemProps['id']) => {\n      const selectedNode = menuHelpers.getItem(items, id) as LibraryItem;\n      if (onClick) {\n        onClick(selectedNode);\n      }\n    },\n    [onClick]\n  );\n\n  return show ? (\n    <Popover show={show} placement={position} target={target} ref={ref}>\n      <Menu\n        items={itemsToRender}\n        onItemClick={onItemSelect}\n        header={\n          <SearchInput\n            ref={searchEleRef}\n            onSearchChange={setSearch}\n            value={search}\n            searchInputAriaLabel={placeholder}\n            placeholder={placeholder}\n          />\n        }\n        focusControlEl={searchEleRef.current || undefined}\n      />\n    </Popover>\n  ) : null;\n});\n\nexport default ItemLibrary;\n"]}
+{"version":3,"file":"ItemLibrary.js","sourceRoot":"","sources":["../../../src/components/ItemLibrary/ItemLibrary.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { PropsWithoutRef, MutableRefObject, Ref, MouseEvent } from 'react';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n  SearchInputProps,\n  MenuGroupProps,\n  MenuItemProps,\n  PopoverProps,\n  OmitStrict,\n  ForwardRefForwardPropsComponent\n} from '@pega/cosmos-react-core';\nimport {\n  Menu,\n  menuHelpers,\n  Popover,\n  SearchInput,\n  cap,\n  createStringMatcher,\n  defaultThemeProp,\n  Flex\n} from '@pega/cosmos-react-core';\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useOuterEvent,\n  useFocusTrap\n} from '@pega/cosmos-react-core/lib/hooks';\n\nimport IconTile from '../IconTile';\nimport type { IconTileProps } from '../IconTile/IconTile.types';\n\nexport interface LibraryItem extends MenuItemProps {\n  id: string;\n  type: {\n    icon: OmitStrict<IconTileProps, 'size'>;\n  };\n  items?: LibraryItem[];\n}\nexport interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {\n  target: HTMLElement | null;\n  items: T[];\n  onClick?: (libItem: T) => void;\n  ref?: Ref<HTMLDivElement>;\n  placeholder?: SearchInputProps['placeholder'];\n  position?: PopoverProps['placement'];\n  onDismiss: () => void;\n  /** If true, skip focus on the selected target during unmount */\n  skipTargetFocus?: MutableRefObject<boolean>;\n}\n\nexport const StyledIcon = styled.div(({ theme }) => {\n  const {\n    base: { 'border-radius': baseRadius },\n    components: {\n      icon: { 'border-radius-multiplier': borderRadiusMultiplier }\n    }\n  } = theme;\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    margin-inline-end: ${theme.base.spacing};\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    border-radius: calc(0.5 * ${borderRadiusMultiplier} * ${baseRadius});\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nconst ItemLibrary: ForwardRefForwardPropsComponent<ItemLibraryProps> = forwardRef(\n  (\n    {\n      target,\n      items,\n      onClick,\n      placeholder,\n      position = 'bottom-start',\n      onDismiss,\n      skipTargetFocus\n    }: PropsWithoutRef<ItemLibraryProps>,\n    ref: ItemLibraryProps['ref']\n  ) => {\n    const dialogRef = useConsolidatedRef(ref);\n    const dialogContentRef = useRef<HTMLDivElement>(null);\n    const [search, setSearch] = useState('');\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    const searchRegex = useMemo(\n      () => (search ? createStringMatcher(cap(search), 'contains', '') : null),\n      [search]\n    );\n\n    useEscape(() => onDismiss?.());\n\n    useOuterEvent('mousedown', [target, dialogRef], () => onDismiss?.());\n\n    useFocusTrap(dialogRef);\n\n    useEffect(() => {\n      searchEleRef.current?.focus();\n      return () => {\n        if (!skipTargetFocus?.current && document.contains(target)) {\n          const timeInMillis = 20;\n          // Bug Fix for .focus event in mozilla (https://bugzilla.mozilla.org/show_bug.cgi?id=1220143)\n          setTimeout(() => target?.focus(), timeInMillis);\n        }\n      };\n    }, []);\n\n    const itemsToRender: (MenuItemProps | MenuGroupProps)[] = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchRegex\n          ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n              return searchRegex.test(primary);\n            })\n          : items,\n        node => {\n          let selectable = false;\n          if (!node.items) {\n            selectable = true;\n          }\n\n          const nodeItem: LibraryItem = node as LibraryItem;\n          return {\n            ...node,\n            visual: nodeItem.type ? (\n              <Flex\n                as={StyledIcon}\n                container={{ inline: true, alignItems: 'center', justify: 'center' }}\n                id={node.id}\n              >\n                <IconTile\n                  name={nodeItem.type?.icon?.name}\n                  category={nodeItem.type?.icon?.category}\n                  label={nodeItem.type?.icon?.label}\n                  inverted={nodeItem.type?.icon?.inverted}\n                />\n              </Flex>\n            ) : undefined,\n            count: node.items ? node.items.length : undefined,\n            secondary: node.secondary,\n            selected: selectable ? !!node.selected : undefined\n          };\n        }\n      );\n    }, [items, searchRegex]);\n\n    const onItemSelect = useCallback(\n      (id: MenuItemProps['id'], e: MouseEvent) => {\n        const selectedNode = menuHelpers.getItem(items, id) as LibraryItem;\n        if (onClick) {\n          onClick(selectedNode);\n          onDismiss?.();\n        }\n        e.stopPropagation();\n      },\n      [onClick]\n    );\n\n    return (\n      <Popover placement={position} target={target} ref={dialogRef}>\n        <Menu\n          items={itemsToRender}\n          onItemClick={onItemSelect}\n          ref={dialogContentRef}\n          header={\n            <SearchInput\n              ref={searchEleRef}\n              onSearchChange={setSearch}\n              value={search}\n              searchInputAriaLabel={placeholder}\n              placeholder={placeholder}\n            />\n          }\n          focusControlEl={searchEleRef.current || undefined}\n        />\n      </Popover>\n    );\n  }\n);\n\nexport default ItemLibrary;\n"]}

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

@@ -1,15 +1,17 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { CategoriesProps, CategoryProps } from './LifeCycle.types';
 export declare const StyledCategory: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {
     showTitle: boolean;
 }, never>;
-export declare const StyledList: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {
+export declare const StyledList: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     category?: CategoriesProps | undefined;
     id: string;
 }, never>;
 export declare const StyledParallelTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAddTask: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const Category: FunctionComponent<CategoryProps & ForwardProps>;
-export default Category;
+export declare const StyledAddTask: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const _default: ForwardRefForwardPropsComponent<CategoryProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+};
+export default _default;
 //# sourceMappingURL=Category.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,KAAK,EAGV,eAAe,EACf,aAAa,EACd,MAAM,mBAAmB,CAAC;AAI3B,eAAO,MAAM,cAAc;eAA0B,OAAO;SAQ1D,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,eAAe,GAAG,SAAS;QAAM,MAAM;SAWvF,CAAC;AAIF,eAAO,MAAM,mBAAmB,yGA0B9B,CAAC;AAIH,eAAO,MAAM,aAAa,yGAaxB,CAAC;AAIH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA2G5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAG/E,OAAO,KAAK,EAGV,eAAe,EACf,aAAa,EACd,MAAM,mBAAmB,CAAC;AAK3B,eAAO,MAAM,cAAc;eAA0B,OAAO;SAQ1D,CAAC;AAIH,eAAO,MAAM,UAAU,wGAIrB,CAAC;AAGH,eAAO,MAAM,aAAa;eAA2B,eAAe,GAAG,SAAS;QAAM,MAAM;SAW3F,CAAC;AAGF,eAAO,MAAM,mBAAmB,yGA4B9B,CAAC;AAIH,eAAO,MAAM,aAAa,kLAaxB,CAAC;;;;AAiIH,wBAAyD"}

package/lib/components/LifeCycle/Category.js

@@ -2,9 +2,11 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, Button, Icon, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Flex, Button, Icon, useI18n, defaultThemeProp, useTestIds, withTestIds, readableColor, tryCatch } from '@pega/cosmos-react-core';
+import { generateDynamicTestId } from './utils';
 import Task from './Task';
 import LifeCycleContext from './LifeCycleContext';
+import { getCategoryTestIds, getTaskTestIds } from './LifeCycle.test-ids';
 export const StyledCategory = styled.h3(({ showTitle, theme }) => {
     return css `
     ${!showTitle &&
@@ -15,25 +17,32 @@ export const StyledCategory = styled.h3(({ showTitle, theme }) => {
   `;
 });
 StyledCategory.defaultProps = defaultThemeProp;
-export const StyledList = styled.ol(({ category, theme, id }) => {
+export const StyledList = styled.ol(() => {
+    return css `
+    list-style-type: none;
+  `;
+});
+StyledList.defaultProps = defaultThemeProp;
+export const StyledWrapper = styled.div(({ category, theme, id }) => {
+    const categoryHeight = `${category?.height}px`;
     return css `
       margin-block-start: ${theme.base.spacing};
-      margin-block-end: calc(2 * ${theme.base.spacing});
-      list-style-type: none;
+      margin-block-end: ${theme.base.spacing};
       ${category?.elementId !== id &&
-        ` min-height: ${category?.height ? `${category.height}px` : 'auto'};
+        ` min-height: ${category?.height ? categoryHeight : 'auto'};
   `}
     `;
 });
-StyledList.defaultProps = defaultThemeProp;
+StyledWrapper.defaultProps = defaultThemeProp;
 export const StyledParallelTitle = styled.div(({ theme }) => {
+    const backgroundColor = theme.base.colors.slate.dark;
     return css `
     position: relative;
     z-index: 1;
     margin-block-end: 0.5rem;
     text-align: center;
     &::before {
-      border-block-start: calc(0.2 * ${theme.base.spacing}) solid ${theme.base.colors.slate.medium};
+      border-block-start: calc(0.2 * ${theme.base.spacing}) solid ${backgroundColor};
       content: '';
       margin: 0 auto;
       position: absolute;
@@ -45,34 +54,37 @@ export const StyledParallelTitle = styled.div(({ theme }) => {
       z-index: -1;
     }
     span {
-      background: ${theme.base.colors.slate.medium};
+      background: ${backgroundColor};
       padding: 0 ${theme.base.spacing};
       border-radius: calc(0.25 * ${theme.base['border-radius']});
-      color: ${theme.base.colors.white};
+      color: ${tryCatch(() => readableColor(backgroundColor))};
       text-transform: uppercase;
     }
   `;
 });
 StyledParallelTitle.defaultProps = defaultThemeProp;
-export const StyledAddTask = styled.div(({ theme }) => {
+export const StyledAddTask = styled(Button)(({ theme }) => {
     return css `
-    > button {
-      background: ${theme.base.palette['secondary-background']};
-      border-radius: calc(0.5 * ${theme.base['border-radius']});
-      width: 100%;
-      justify-content: flex-start;
-      padding: calc(1 * ${theme.base.spacing}) calc(1.75 * ${theme.base.spacing});
-      > div {
-        margin: 0 calc(2 * ${theme.base.spacing});
-      }
+    margin-block-end: calc(${theme.base.spacing});
+    background: ${theme.base.palette['secondary-background']};
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    width: 100%;
+    justify-content: flex-start;
+    padding: calc(1 * ${theme.base.spacing}) calc(1.75 * ${theme.base.spacing});
+
+    > div {
+      margin: 0 calc(2 * ${theme.base.spacing});
     }
   `;
 });
 StyledAddTask.defaultProps = defaultThemeProp;
-const Category = forwardRef(function Category({ item, showTitle = false, stageItem, category, id, task, ...restProps }, ref) {
+const Category = forwardRef(({ item, showTitle = false, stageItem, category, id, task, ...restProps }, ref) => {
     const { readOnly } = useContext(LifeCycleContext);
     let showAddTaskButton = true;
     const t = useI18n();
+    const categoryTestID = generateDynamicTestId([stageItem.label, category?.label]);
+    const testIds = useTestIds(categoryTestID, getCategoryTestIds);
+    const taskTestIds = useTestIds(categoryTestID, getTaskTestIds);
     if (task?.addTask?.showOnce && item?.tasks?.length !== 0) {
         showAddTaskButton = false;
     }
@@ -82,23 +94,28 @@ const Category = forwardRef(function Category({ item, showTitle = false, stageIt
             category: item,
             stage: stageItem
         };
-        task?.addTask.onAddTask?.(param, e);
+        task?.addTask?.onAddTask?.(param, e);
     };
-    return (_jsxs(_Fragment, { children: [category?.label && (_jsx(StyledCategory, { showTitle: showTitle, tabIndex: -1, id: item?.categoryId, children: category?.label })), _jsxs(StyledList, { ref: ref, category: category, id: item?.id, "data-id": item?.categoryId, children: [item &&
-                        item.tasks.length !== 0 &&
-                        item.tasks.map((taskItem, i) => {
-                            if (Array.isArray(taskItem)) {
-                                if (task && task.addTask && task.addTask.showOnce && taskItem.length !== 0) {
-                                    showAddTaskButton = false;
+    return (_jsxs(_Fragment, { children: [category?.label && (_jsx(StyledCategory, { showTitle: showTitle, tabIndex: -1, id: item?.categoryId, children: category?.label })), _jsxs(StyledWrapper, { category: category, id: item?.id, "data-id": item?.categoryId, ref: ref, children: [_jsx(StyledList, { "data-testid": testIds.root, children: item &&
+                            item.tasks.length !== 0 &&
+                            item.tasks.map((taskItem, i) => {
+                                if (Array.isArray(taskItem)) {
+                                    if (task && task.addTask && task.addTask.showOnce && taskItem.length !== 0) {
+                                        showAddTaskButton = false;
+                                    }
+                                    return (
+                                    // eslint-disable-next-line react/no-array-index-key
+                                    _jsxs("li", { children: [i !== 0 && (_jsx(Flex, { as: StyledParallelTitle, container: { justify: 'center' }, children: _jsx("span", { children: t('parallel') }) })), taskItem.length > 0 && (_jsx("ol", { children: taskItem.map((parallelTask, p) => {
+                                                    return (_createElement(Task, { ...restProps, ...task, key: parallelTask.id, id: parallelTask.id, value: parallelTask.label, item: {
+                                                            ...parallelTask,
+                                                            index: i,
+                                                            subIndex: p,
+                                                            alternate: item.alternate
+                                                        }, visual: parallelTask.visual, stageItem: stageItem, categoryItem: item, error: parallelTask.error }));
+                                                }) }))] }, i));
                                 }
-                                return (
-                                // eslint-disable-next-line react/no-array-index-key
-                                _jsxs("li", { children: [i !== 0 && (_jsx(Flex, { as: StyledParallelTitle, container: { justify: 'center' }, children: _jsx("span", { children: t('parallel') }) })), taskItem.length > 0 && (_jsx("ol", { children: taskItem.map((parallelTask) => {
-                                                return (_createElement(Task, { ...restProps, ...task, key: parallelTask.id, id: parallelTask.id, value: parallelTask.label, item: parallelTask, visual: parallelTask.visual, stageItem: stageItem, categoryItem: item, error: parallelTask.error }));
-                                            }) }))] }, i));
-                            }
-                            return (_createElement(Task, { ...restProps, ...task, key: taskItem.id, id: taskItem.id, value: taskItem.label, item: taskItem, visual: taskItem.visual, stageItem: stageItem, categoryItem: item, onAddStep: task?.onAddStep, error: taskItem.error }));
-                        }), (showAddTaskButton || !item) && !readOnly && (_jsx(StyledAddTask, { children: _jsxs(Button, { variant: 'simple', label: t('add_noun', [task.addTask.title]), icon: true, onClick: onAddTaskClick, children: [_jsx(Icon, { name: 'plus' }), _jsx("div", { children: task.addTask.title })] }) }))] })] }));
+                                return (_createElement(Task, { ...restProps, ...task, key: taskItem.id, id: taskItem.id, value: taskItem.label, item: { ...taskItem, index: i, alternate: item.alternate }, visual: taskItem.visual, stageItem: stageItem, categoryItem: { ...item, categoryLabel: category?.label }, onAddStep: task?.onAddStep, error: taskItem.error }));
+                            }) }), (showAddTaskButton || !item) && !readOnly && !!task?.addTask && (_jsxs(StyledAddTask, { "data-testid": taskTestIds.addButton, variant: 'simple', label: t('add_noun', [task.addTask.title]), icon: true, onClick: onAddTaskClick, children: [_jsx(Icon, { name: 'plus' }), _jsx("div", { children: task.addTask.title })] }))] })] }));
 });
-export default Category;
+export default withTestIds(Category, getCategoryTestIds);
 //# sourceMappingURL=Category.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Category.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Button, Icon, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport type {\n  TaskItemProps,\n  LifeCycleActionParam,\n  CategoriesProps,\n  CategoryProps\n} from './LifeCycle.types';\nimport Task from './Task';\nimport LifeCycleContext from './LifeCycleContext';\n\nexport const StyledCategory = styled.h3<{ showTitle: boolean }>(({ showTitle, theme }) => {\n  return css`\n    ${!showTitle &&\n    css`\n      visibility: hidden;\n    `}\n    margin: ${theme.base.spacing} 0 0 0;\n  `;\n});\n\nStyledCategory.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.ol<{ category?: CategoriesProps | undefined; id: string }>(\n  ({ category, theme, id }) => {\n    return css`\n      margin-block-start: ${theme.base.spacing};\n      margin-block-end: calc(2 * ${theme.base.spacing});\n      list-style-type: none;\n      ${category?.elementId !== id &&\n      ` min-height: ${category?.height ? `${category.height}px` : 'auto'};\n  `}\n    `;\n  }\n);\n\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledParallelTitle = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    z-index: 1;\n    margin-block-end: 0.5rem;\n    text-align: center;\n    &::before {\n      border-block-start: calc(0.2 * ${theme.base.spacing}) solid ${theme.base.colors.slate.medium};\n      content: '';\n      margin: 0 auto;\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100%;\n      z-index: -1;\n    }\n    span {\n      background: ${theme.base.colors.slate.medium};\n      padding: 0 ${theme.base.spacing};\n      border-radius: calc(0.25 * ${theme.base['border-radius']});\n      color: ${theme.base.colors.white};\n      text-transform: uppercase;\n    }\n  `;\n});\n\nStyledParallelTitle.defaultProps = defaultThemeProp;\n\nexport const StyledAddTask = styled.div(({ theme }) => {\n  return css`\n    > button {\n      background: ${theme.base.palette['secondary-background']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n      width: 100%;\n      justify-content: flex-start;\n      padding: calc(1 * ${theme.base.spacing}) calc(1.75 * ${theme.base.spacing});\n      > div {\n        margin: 0 calc(2 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledAddTask.defaultProps = defaultThemeProp;\n\nconst Category: FunctionComponent<CategoryProps & ForwardProps> = forwardRef(function Category(\n  {\n    item,\n    showTitle = false,\n    stageItem,\n    category,\n    id,\n    task,\n    ...restProps\n  }: PropsWithoutRef<CategoryProps>,\n  ref: CategoryProps['ref']\n) {\n  const { readOnly } = useContext(LifeCycleContext);\n  let showAddTaskButton = true;\n  const t = useI18n();\n\n  if (task?.addTask?.showOnce && item?.tasks?.length !== 0) {\n    showAddTaskButton = false;\n  }\n  // Callback for click of add task button\n  const onAddTaskClick = (e: MouseEvent<HTMLButtonElement>) => {\n    const param: LifeCycleActionParam = {\n      category: item,\n      stage: stageItem\n    };\n    task?.addTask.onAddTask?.(param, e);\n  };\n\n  return (\n    <>\n      {category?.label && (\n        <StyledCategory showTitle={showTitle} tabIndex={-1} id={item?.categoryId}>\n          {category?.label}\n        </StyledCategory>\n      )}\n      <StyledList ref={ref} category={category} id={item?.id} data-id={item?.categoryId}>\n        {item &&\n          item.tasks.length !== 0 &&\n          item.tasks.map((taskItem: TaskItemProps | TaskItemProps[], i: number) => {\n            if (Array.isArray(taskItem)) {\n              if (task && task.addTask && task.addTask.showOnce && taskItem.length !== 0) {\n                showAddTaskButton = false;\n              }\n\n              return (\n                // eslint-disable-next-line react/no-array-index-key\n                <li key={i}>\n                  {i !== 0 && (\n                    <Flex as={StyledParallelTitle} container={{ justify: 'center' }}>\n                      <span>{t('parallel')}</span>\n                    </Flex>\n                  )}\n                  {taskItem.length > 0 && (\n                    <ol>\n                      {taskItem.map((parallelTask: TaskItemProps) => {\n                        return (\n                          <Task\n                            {...restProps}\n                            {...task}\n                            key={parallelTask.id}\n                            id={parallelTask.id}\n                            value={parallelTask.label}\n                            item={parallelTask}\n                            visual={parallelTask.visual}\n                            stageItem={stageItem}\n                            categoryItem={item}\n                            error={parallelTask.error}\n                          />\n                        );\n                      })}\n                    </ol>\n                  )}\n                </li>\n              );\n            }\n            return (\n              <Task\n                {...restProps}\n                {...task}\n                key={taskItem.id}\n                id={taskItem.id}\n                value={taskItem.label}\n                item={taskItem}\n                visual={taskItem.visual}\n                stageItem={stageItem}\n                categoryItem={item}\n                onAddStep={task?.onAddStep}\n                error={taskItem.error}\n              />\n            );\n          })}\n        {(showAddTaskButton || !item) && !readOnly && (\n          <StyledAddTask>\n            <Button\n              variant='simple'\n              label={t('add_noun', [task.addTask.title])}\n              icon\n              onClick={onAddTaskClick}\n            >\n              <Icon name='plus' />\n              <div>{task.addTask.title}</div>\n            </Button>\n          </StyledAddTask>\n        )}\n      </StyledList>\n    </>\n  );\n});\n\nexport default Category;\n"]}
+{"version":3,"file":"Category.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext } from 'react';\nimport type { PropsWithoutRef, MouseEvent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Button,\n  Icon,\n  useI18n,\n  defaultThemeProp,\n  useTestIds,\n  withTestIds,\n  readableColor,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport { generateDynamicTestId } from './utils';\nimport type {\n  TaskItemProps,\n  LifeCycleActionParam,\n  CategoriesProps,\n  CategoryProps\n} from './LifeCycle.types';\nimport Task from './Task';\nimport LifeCycleContext from './LifeCycleContext';\nimport { getCategoryTestIds, getTaskTestIds } from './LifeCycle.test-ids';\n\nexport const StyledCategory = styled.h3<{ showTitle: boolean }>(({ showTitle, theme }) => {\n  return css`\n    ${!showTitle &&\n    css`\n      visibility: hidden;\n    `}\n    margin: ${theme.base.spacing} 0 0 0;\n  `;\n});\n\nStyledCategory.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.ol(() => {\n  return css`\n    list-style-type: none;\n  `;\n});\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledWrapper = styled.div<{ category?: CategoriesProps | undefined; id: string }>(\n  ({ category, theme, id }) => {\n    const categoryHeight = `${category?.height}px`;\n    return css`\n      margin-block-start: ${theme.base.spacing};\n      margin-block-end: ${theme.base.spacing};\n      ${category?.elementId !== id &&\n      ` min-height: ${category?.height ? categoryHeight : 'auto'};\n  `}\n    `;\n  }\n);\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledParallelTitle = styled.div(({ theme }) => {\n  const backgroundColor = theme.base.colors.slate.dark;\n\n  return css`\n    position: relative;\n    z-index: 1;\n    margin-block-end: 0.5rem;\n    text-align: center;\n    &::before {\n      border-block-start: calc(0.2 * ${theme.base.spacing}) solid ${backgroundColor};\n      content: '';\n      margin: 0 auto;\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100%;\n      z-index: -1;\n    }\n    span {\n      background: ${backgroundColor};\n      padding: 0 ${theme.base.spacing};\n      border-radius: calc(0.25 * ${theme.base['border-radius']});\n      color: ${tryCatch(() => readableColor(backgroundColor))};\n      text-transform: uppercase;\n    }\n  `;\n});\n\nStyledParallelTitle.defaultProps = defaultThemeProp;\n\nexport const StyledAddTask = styled(Button)(({ theme }) => {\n  return css`\n    margin-block-end: calc(${theme.base.spacing});\n    background: ${theme.base.palette['secondary-background']};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    width: 100%;\n    justify-content: flex-start;\n    padding: calc(1 * ${theme.base.spacing}) calc(1.75 * ${theme.base.spacing});\n\n    > div {\n      margin: 0 calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledAddTask.defaultProps = defaultThemeProp;\n\nconst Category: ForwardRefForwardPropsComponent<CategoryProps> = forwardRef(\n  (\n    {\n      item,\n      showTitle = false,\n      stageItem,\n      category,\n      id,\n      task,\n      ...restProps\n    }: PropsWithoutRef<CategoryProps>,\n    ref: CategoryProps['ref']\n  ) => {\n    const { readOnly } = useContext(LifeCycleContext);\n    let showAddTaskButton = true;\n    const t = useI18n();\n    const categoryTestID = generateDynamicTestId([stageItem.label, category?.label]);\n    const testIds = useTestIds(categoryTestID, getCategoryTestIds);\n    const taskTestIds = useTestIds(categoryTestID, getTaskTestIds);\n\n    if (task?.addTask?.showOnce && item?.tasks?.length !== 0) {\n      showAddTaskButton = false;\n    }\n    // Callback for click of add task button\n    const onAddTaskClick = (e: MouseEvent<HTMLButtonElement>) => {\n      const param: LifeCycleActionParam = {\n        category: item,\n        stage: stageItem\n      };\n      task?.addTask?.onAddTask?.(param, e);\n    };\n\n    return (\n      <>\n        {category?.label && (\n          <StyledCategory showTitle={showTitle} tabIndex={-1} id={item?.categoryId}>\n            {category?.label}\n          </StyledCategory>\n        )}\n        <StyledWrapper\n          category={category}\n          id={item?.id}\n          data-id={item?.categoryId}\n          ref={ref as Ref<HTMLDivElement>}\n        >\n          <StyledList data-testid={testIds.root}>\n            {item &&\n              item.tasks.length !== 0 &&\n              item.tasks.map((taskItem: TaskItemProps | TaskItemProps[], i: number) => {\n                if (Array.isArray(taskItem)) {\n                  if (task && task.addTask && task.addTask.showOnce && taskItem.length !== 0) {\n                    showAddTaskButton = false;\n                  }\n\n                  return (\n                    // eslint-disable-next-line react/no-array-index-key\n                    <li key={i}>\n                      {i !== 0 && (\n                        <Flex as={StyledParallelTitle} container={{ justify: 'center' }}>\n                          <span>{t('parallel')}</span>\n                        </Flex>\n                      )}\n                      {taskItem.length > 0 && (\n                        <ol>\n                          {taskItem.map((parallelTask: TaskItemProps, p: number) => {\n                            return (\n                              <Task\n                                {...restProps}\n                                {...task}\n                                key={parallelTask.id}\n                                id={parallelTask.id}\n                                value={parallelTask.label}\n                                item={{\n                                  ...parallelTask,\n                                  index: i,\n                                  subIndex: p,\n                                  alternate: item.alternate\n                                }}\n                                visual={parallelTask.visual}\n                                stageItem={stageItem}\n                                categoryItem={item}\n                                error={parallelTask.error}\n                              />\n                            );\n                          })}\n                        </ol>\n                      )}\n                    </li>\n                  );\n                }\n                return (\n                  <Task\n                    {...restProps}\n                    {...task}\n                    key={taskItem.id}\n                    id={taskItem.id}\n                    value={taskItem.label}\n                    item={{ ...taskItem, index: i, alternate: item.alternate }}\n                    visual={taskItem.visual}\n                    stageItem={stageItem}\n                    categoryItem={{ ...item, categoryLabel: category?.label }}\n                    onAddStep={task?.onAddStep}\n                    error={taskItem.error}\n                  />\n                );\n              })}\n          </StyledList>\n          {(showAddTaskButton || !item) && !readOnly && !!task?.addTask && (\n            <StyledAddTask\n              data-testid={taskTestIds.addButton}\n              variant='simple'\n              label={t('add_noun', [task.addTask.title])}\n              icon\n              onClick={onAddTaskClick}\n            >\n              <Icon name='plus' />\n              <div>{task.addTask.title}</div>\n            </StyledAddTask>\n          )}\n        </StyledWrapper>\n      </>\n    );\n  }\n);\n\nexport default withTestIds(Category, getCategoryTestIds);\n"]}

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

@@ -1,6 +1,10 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { LifeCycleProps } from './LifeCycle.types';
-declare const LifeCycle: FunctionComponent<LifeCycleProps & ForwardProps>;
-export default LifeCycle;
+export declare const StyledLifeCycleWrapper: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {
+    hasLabel?: boolean;
+}, never>;
+declare const _default: ForwardRefForwardPropsComponent<LifeCycleProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly string[]>;
+};
+export default _default;
 //# sourceMappingURL=LifeCycle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycle.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAIhE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAAkB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAaxE,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA0I9D,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"LifeCycle.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAI/E,OAAO,KAAK,EAAkB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAkBxE,eAAO,MAAM,sBAAsB;eAA6B,OAAO;SAuBrE,CAAC;;;;AAiSH,wBAAuD"}

package/lib/components/LifeCycle/LifeCycle.js

@@ -1,10 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { forwardRef, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, Flex, Button, Icon, useI18n } from '@pega/cosmos-react-core';
-import LifeCycleList from './LifeCycleList';
+import { defaultThemeProp, Flex, Button, Icon, Text, useI18n, useTestIds, withTestIds, useAfterInitialEffect, useUID, usePrevious, registerIcon } from '@pega/cosmos-react-core';
+import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+import { DragDropManager } from '@pega/cosmos-react-dnd';
+import LifeCycleList, {} from './LifeCycleList';
 import LifeCycleContext from './LifeCycleContext';
+import { getAlternateStageTestIds, getStageTestIds } from './LifeCycle.test-ids';
+import LifeCycleDragDropList from './LifeCycleDragDropList';
+import { defaultDragDropConfig } from './utils';
+registerIcon(plusIcon);
 const StyledAddButton = styled(Button)(({ theme }) => {
     return css `
     align-self: flex-start;
@@ -12,10 +18,33 @@ const StyledAddButton = styled(Button)(({ theme }) => {
   `;
 });
 StyledAddButton.defaultProps = defaultThemeProp;
-const LifeCycle = forwardRef(function LifeCycle({ items, categories, alternateItems = [], onAddStage, onAddAlternateStage, stage, alternateStage, selectedItemId, readOnly, ...restProps }, ref) {
-    const lifeCycleEl = useRef(null);
+export const StyledLifeCycleWrapper = styled(Flex)(({ hasLabel, theme }) => {
+    const { spacing, palette } = theme.base;
+    return css `
+    padding: calc(2 * ${spacing});
+    margin: 0 calc(-2 * ${spacing}) calc(-2 * ${spacing}) calc(-2 * ${spacing});
+    position: absolute;
+    min-width: 100%;
+    min-height: 100%;
+    top: 0;
+    background-color: ${palette['app-background']};
+
+    ${hasLabel &&
+        css `
+      padding-block-start: ${theme.base.spacing};
+    `}
+
+    li {
+      list-style-type: none;
+    }
+  `;
+});
+StyledLifeCycleWrapper.defaultProps = defaultThemeProp;
+const LifeCycle = forwardRef(({ items, categories = [], task = [], alternateItems = [], onAddStage, onAddAlternateStage, onDragDrop, dragDropConfig = defaultDragDropConfig, stage, alternateStage, selectedItemId, readOnly, ...restProps }, ref) => {
+    const labelId = useUID();
     const t = useI18n();
-    const [categoriesState, setcategoriesState] = useState(categories);
+    const [draggedItem, setDraggedItem] = useState();
+    const [categoriesState, setCategoriesState] = useState(categories);
     const categoryElements = [];
     const setRef = (element) => {
         if (element) {
@@ -50,28 +79,93 @@ const LifeCycle = forwardRef(function LifeCycle({ items, categories, alternateIt
                         (categoryItem.elementId === elementId && height !== columnHeight)) {
                         isHeightChanged = true;
                         categoriesColumn[index].height = height;
-                        if (elementId)
+                        if (elementId) {
                             categoriesColumn[index].elementId = elementId;
+                        }
                     }
                 });
             });
             if (isHeightChanged) {
                 isHeightChanged = false;
-                setcategoriesState(categoriesColumn);
+                setCategoriesState(categoriesColumn);
             }
         }
     });
+    const previouslyLoading = usePrevious(dragDropConfig.loading);
+    useAfterInitialEffect(() => {
+        // If the drag drop loading state is false and there was a dragged item, focus on the drag handle of the dragged item
+        if (!dragDropConfig.loading && previouslyLoading && draggedItem) {
+            setTimeout(() => {
+                const dragHandle = document.querySelector(`[data-drag-handle-for="${draggedItem.id}"]`);
+                if (dragHandle) {
+                    dragHandle.focus();
+                }
+                setDraggedItem(undefined);
+            }, 100);
+        }
+    }, [dragDropConfig.loading, previouslyLoading, draggedItem?.id]);
+    const getLifeCycleListProps = useCallback((stageItem, index, stageArray, alternate) => {
+        return {
+            id: stageItem.id,
+            item: { ...stageItem, index, alternate },
+            isFirstItem: index === 0,
+            isLastItem: index === stageArray.length - 1,
+            ref: setRef,
+            task,
+            categories: categoriesState,
+            stageVariant: alternate ? 'alternate' : undefined,
+            prevStageItem: stageArray[index - 1],
+            stage: alternate ? alternateStage : stage
+        };
+    }, [setRef, task, categoriesState, alternateStage, stage]);
+    const stageTestIds = useTestIds('', getStageTestIds);
+    const alternateStageTestIds = useTestIds('', getAlternateStageTestIds);
+    const dragEnabled = !!onDragDrop && !readOnly;
+    const addStageButton = (_jsx(StyledAddButton, { "data-testid": stageTestIds.addButton, variant: 'simple', label: t('add_stage'), icon: true, onClick: onAddStage, children: _jsx(Icon, { name: 'plus' }) }));
+    const addAlternateStageButton = (_jsx(StyledAddButton, { "data-testid": alternateStageTestIds.addButton, variant: 'simple', label: t('add_alternate_stage'), icon: true, onClick: onAddAlternateStage, children: _jsx(Icon, { name: 'plus' }) }));
     const lifeCycleContext = useMemo(() => ({
+        lifeCycleData: { stages: items, alternateStages: alternateItems },
+        selectedItemId,
+        readOnly,
+        dragDropConfig,
+        dragEnabled,
+        draggedItem,
+        setDraggedItem,
+        onDragDrop
+    }), [
+        items,
+        alternateItems,
         selectedItemId,
-        readOnly
-    }), [selectedItemId, readOnly]);
-    return (_jsx(Flex, { container: { gap: 2 }, ref: ref, children: _jsxs(LifeCycleContext.Provider, { value: lifeCycleContext, children: [_jsxs(Flex, { ref: lifeCycleEl, container: true, "aria-label": t('stage'), children: [items.map((stageItem, index, stageArray) => {
-                            const listId = stageItem.id;
-                            return (_createElement(LifeCycleList, { ...restProps, key: listId, id: listId, item: stageItem, isFirstItem: index === 0, isLastItem: index === stageArray.length - 1, ref: setRef, stage: stage, prevStageVariant: stageArray[index - 1]?.type, categories: categoriesState }));
-                        }), !readOnly && (_jsx(StyledAddButton, { variant: 'simple', label: t('add_stage'), icon: true, onClick: onAddStage, children: _jsx(Icon, { name: 'plus' }) }))] }), alternateItems.length !== 0 && (_jsxs(Flex, { container: true, ref: lifeCycleEl, "aria-label": t('alternate_stage'), children: [alternateItems.map((stageItem, index, stageArray) => {
-                            const listId = stageItem.id;
-                            return (_createElement(LifeCycleList, { ...restProps, key: listId, id: listId, item: stageItem, isFirstItem: index === 0, isLastItem: index === stageArray.length - 1, ref: setRef, categories: categoriesState, stageVariant: 'alternate', prevStageVariant: stageArray[index - 1]?.type, stage: alternateStage }));
-                        }), !readOnly && (_jsx(StyledAddButton, { variant: 'simple', label: t('add_alternate_stage'), icon: true, onClick: onAddAlternateStage, children: _jsx(Icon, { name: 'plus' }) }))] }))] }) }));
+        readOnly,
+        dragDropConfig,
+        dragEnabled,
+        draggedItem,
+        setDraggedItem,
+        onDragDrop
+    ]);
+    return (_jsx(DragDropManager, { children: _jsx(StyledLifeCycleWrapper, { container: { gap: 2 }, hasLabel: !!stage?.label || !!alternateStage?.label, ref: ref, children: _jsxs(LifeCycleContext.Provider, { value: lifeCycleContext, children: [items.length !== 0 && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [!!stage?.label && (_jsx(Text, { id: `${labelId}-stage-label`, variant: 'secondary', children: stage.label })), dragEnabled ? (_jsx(LifeCycleDragDropList, { type: 'stage', listLocation: {
+                                    alternate: false
+                                }, items: items.map((stageItem, index, stageArray) => ({
+                                    id: stageItem.id,
+                                    type: 'stage',
+                                    data: {
+                                        ...restProps,
+                                        ...getLifeCycleListProps(stageItem, index, stageArray, false)
+                                    }
+                                })), itemRenderer: LifeCycleList, onDragDrop: onDragDrop, additionalDropZone: onAddStage ? addStageButton : undefined, as: Flex, forwardedAs: 'ul', container: { gap: 1 }, "aria-label": t('stage'), "aria-labelledby": `${labelId}-stage-label` })) : (_jsxs(Flex, { container: { gap: 1 }, "aria-label": t('stage'), "aria-labelledby": `${labelId}-stage-label`, as: 'ul', children: [items.map((stageItem, index, stageArray) => {
+                                        return (_createElement(LifeCycleList, { ...restProps, key: stageItem.id, ...getLifeCycleListProps(stageItem, index, stageArray, false) }));
+                                    }), !readOnly && onAddStage && _jsx("li", { children: addStageButton })] }))] })), alternateItems.length !== 0 && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [!!alternateStage?.label && (_jsx(Text, { id: `${labelId}-alt-stage-label`, variant: 'secondary', children: alternateStage.label })), dragEnabled ? (_jsx(LifeCycleDragDropList, { type: 'alternate-stage', listLocation: {
+                                    alternate: true
+                                }, items: alternateItems.map((stageItem, index, stageArray) => ({
+                                    id: stageItem.id,
+                                    type: 'alternate-stage',
+                                    data: {
+                                        ...restProps,
+                                        ...getLifeCycleListProps(stageItem, index, stageArray, true)
+                                    }
+                                })), itemRenderer: LifeCycleList, onDragDrop: onDragDrop, additionalDropZone: onAddAlternateStage ? addAlternateStageButton : undefined, as: Flex, forwardedAs: 'ul', container: { gap: 1 }, "aria-label": t('alternate_stage'), "aria-labelledby": `${labelId}-alt-stage-label` })) : (_jsxs(Flex, { container: { gap: 1 }, "aria-label": t('alternate_stage'), "aria-labelledby": `${labelId}-alt-stage-label`, as: 'ul', children: [alternateItems.map((stageItem, index, stageArray) => {
+                                        return (_createElement(LifeCycleList, { ...restProps, key: stageItem.id, ...getLifeCycleListProps(stageItem, index, stageArray, true) }));
+                                    }), !readOnly && onAddAlternateStage && _jsx("li", { children: addAlternateStageButton })] }))] }))] }) }) }));
 });
-export default LifeCycle;
+export default withTestIds(LifeCycle, getStageTestIds);
 //# sourceMappingURL=LifeCycle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycle.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Button, Icon, useI18n } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport LifeCycleList from './LifeCycleList';\nimport type { StageItemProps, LifeCycleProps } from './LifeCycle.types';\nimport LifeCycleContext from './LifeCycleContext';\nimport type { LifeCycleContextValue } from './LifeCycleContext';\n\nconst StyledAddButton = styled(Button)(({ theme }) => {\n  return css`\n    align-self: flex-start;\n    margin-block-start: calc(${theme.base.spacing} / 2);\n  `;\n});\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst LifeCycle: FunctionComponent<LifeCycleProps & ForwardProps> = forwardRef(function LifeCycle(\n  {\n    items,\n    categories,\n    alternateItems = [],\n    onAddStage,\n    onAddAlternateStage,\n    stage,\n    alternateStage,\n    selectedItemId,\n    readOnly,\n    ...restProps\n  }: PropsWithoutRef<LifeCycleProps>,\n  ref: LifeCycleProps['ref']\n) {\n  const lifeCycleEl = useRef(null);\n  const t = useI18n();\n  const [categoriesState, setcategoriesState] = useState(categories);\n  const categoryElements: HTMLElement[] = [];\n  const setRef = (element: HTMLOListElement) => {\n    if (element) {\n      categoryElements.push(element);\n    }\n  };\n\n  useLayoutEffect(() => {\n    let isHeightChanged = false;\n    const categoriesColumn = [...categories];\n    if (categoriesColumn && categoriesColumn.length > 0) {\n      categoriesColumn.forEach((categoryItem, index) => {\n        const categoryElm = [...categoryElements];\n        let isActiveElement = false;\n        const categoryComponent = categoryElm.filter((element: HTMLElement) => {\n          if (element.getAttribute('data-id') === categoryItem.id) {\n            if (categoryItem.elementId === element.getAttribute('id')) {\n              isActiveElement = true;\n            }\n            return true;\n          }\n          return false;\n        });\n        if (!isActiveElement) {\n          categoryItem.elementId = '';\n          categoryItem.height = 0;\n        }\n        categoryComponent.forEach(categoryElement => {\n          const columnHeight = categoryItem?.height ?? 0;\n          const height = categoryElement.scrollHeight;\n          const elementId = categoryElement.getAttribute('id');\n          if (\n            height > columnHeight ||\n            (categoryItem.elementId === elementId && height !== columnHeight)\n          ) {\n            isHeightChanged = true;\n            categoriesColumn[index].height = height;\n            if (elementId) categoriesColumn[index].elementId = elementId;\n          }\n        });\n      });\n      if (isHeightChanged) {\n        isHeightChanged = false;\n        setcategoriesState(categoriesColumn);\n      }\n    }\n  });\n\n  const lifeCycleContext: LifeCycleContextValue = useMemo(\n    () => ({\n      selectedItemId,\n      readOnly\n    }),\n    [selectedItemId, readOnly]\n  );\n\n  return (\n    <Flex container={{ gap: 2 }} ref={ref}>\n      <LifeCycleContext.Provider value={lifeCycleContext}>\n        <Flex ref={lifeCycleEl} container aria-label={t('stage')}>\n          {items.map((stageItem: StageItemProps, index: number, stageArray: StageItemProps[]) => {\n            const listId = stageItem.id;\n            return (\n              <LifeCycleList\n                {...restProps}\n                key={listId}\n                id={listId}\n                item={stageItem}\n                isFirstItem={index === 0}\n                isLastItem={index === stageArray.length - 1}\n                ref={setRef}\n                stage={stage}\n                prevStageVariant={stageArray[index - 1]?.type}\n                categories={categoriesState}\n              />\n            );\n          })}\n          {!readOnly && (\n            <StyledAddButton variant='simple' label={t('add_stage')} icon onClick={onAddStage}>\n              <Icon name='plus' />\n            </StyledAddButton>\n          )}\n        </Flex>\n        {alternateItems.length !== 0 && (\n          <Flex container ref={lifeCycleEl} aria-label={t('alternate_stage')}>\n            {alternateItems.map(\n              (stageItem: StageItemProps, index: number, stageArray: StageItemProps[]) => {\n                const listId = stageItem.id;\n                return (\n                  <LifeCycleList\n                    {...restProps}\n                    key={listId}\n                    id={listId}\n                    item={stageItem}\n                    isFirstItem={index === 0}\n                    isLastItem={index === stageArray.length - 1}\n                    ref={setRef}\n                    categories={categoriesState}\n                    stageVariant='alternate'\n                    prevStageVariant={stageArray[index - 1]?.type}\n                    stage={alternateStage}\n                  />\n                );\n              }\n            )}\n            {!readOnly && (\n              <StyledAddButton\n                variant='simple'\n                label={t('add_alternate_stage')}\n                icon\n                onClick={onAddAlternateStage}\n              >\n                <Icon name='plus' />\n              </StyledAddButton>\n            )}\n          </Flex>\n        )}\n      </LifeCycleContext.Provider>\n    </Flex>\n  );\n});\n\nexport default LifeCycle;\n"]}
+{"version":3,"file":"LifeCycle.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useLayoutEffect, useMemo, useState } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  Button,\n  Icon,\n  Text,\n  useI18n,\n  useTestIds,\n  withTestIds,\n  useAfterInitialEffect,\n  useUID,\n  usePrevious,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\nimport { DragDropManager } from '@pega/cosmos-react-dnd';\n\nimport LifeCycleList, { type LifeCycleListProps } from './LifeCycleList';\nimport type { StageItemProps, LifeCycleProps } from './LifeCycle.types';\nimport LifeCycleContext from './LifeCycleContext';\nimport type { LifeCycleContextValue, LifeCycleDraggedItem } from './LifeCycleContext';\nimport { getAlternateStageTestIds, getStageTestIds } from './LifeCycle.test-ids';\nimport LifeCycleDragDropList from './LifeCycleDragDropList';\nimport { defaultDragDropConfig } from './utils';\n\nregisterIcon(plusIcon);\n\nconst StyledAddButton = styled(Button)(({ theme }) => {\n  return css`\n    align-self: flex-start;\n    margin-block-start: calc(${theme.base.spacing} / 2);\n  `;\n});\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nexport const StyledLifeCycleWrapper = styled(Flex)<{ hasLabel?: boolean }>(({\n  hasLabel,\n  theme\n}) => {\n  const { spacing, palette } = theme.base;\n  return css`\n    padding: calc(2 * ${spacing});\n    margin: 0 calc(-2 * ${spacing}) calc(-2 * ${spacing}) calc(-2 * ${spacing});\n    position: absolute;\n    min-width: 100%;\n    min-height: 100%;\n    top: 0;\n    background-color: ${palette['app-background']};\n\n    ${hasLabel &&\n    css`\n      padding-block-start: ${theme.base.spacing};\n    `}\n\n    li {\n      list-style-type: none;\n    }\n  `;\n});\n\nStyledLifeCycleWrapper.defaultProps = defaultThemeProp;\n\nconst LifeCycle: ForwardRefForwardPropsComponent<LifeCycleProps> = forwardRef(\n  (\n    {\n      items,\n      categories = [],\n      task = [],\n      alternateItems = [],\n      onAddStage,\n      onAddAlternateStage,\n      onDragDrop,\n      dragDropConfig = defaultDragDropConfig,\n      stage,\n      alternateStage,\n      selectedItemId,\n      readOnly,\n      ...restProps\n    }: PropsWithoutRef<LifeCycleProps>,\n    ref: LifeCycleProps['ref']\n  ) => {\n    const labelId = useUID();\n    const t = useI18n();\n    const [draggedItem, setDraggedItem] = useState<LifeCycleDraggedItem | undefined>();\n    const [categoriesState, setCategoriesState] = useState(categories);\n    const categoryElements: HTMLElement[] = [];\n    const setRef = (element: HTMLOListElement) => {\n      if (element) {\n        categoryElements.push(element);\n      }\n    };\n\n    useLayoutEffect(() => {\n      let isHeightChanged = false;\n      const categoriesColumn = [...categories];\n      if (categoriesColumn && categoriesColumn.length > 0) {\n        categoriesColumn.forEach((categoryItem, index) => {\n          const categoryElm = [...categoryElements];\n          let isActiveElement = false;\n          const categoryComponent = categoryElm.filter((element: HTMLElement) => {\n            if (element.getAttribute('data-id') === categoryItem.id) {\n              if (categoryItem.elementId === element.getAttribute('id')) {\n                isActiveElement = true;\n              }\n              return true;\n            }\n            return false;\n          });\n          if (!isActiveElement) {\n            categoryItem.elementId = '';\n            categoryItem.height = 0;\n          }\n          categoryComponent.forEach(categoryElement => {\n            const columnHeight = categoryItem?.height ?? 0;\n            const height = categoryElement.scrollHeight;\n            const elementId = categoryElement.getAttribute('id');\n            if (\n              height > columnHeight ||\n              (categoryItem.elementId === elementId && height !== columnHeight)\n            ) {\n              isHeightChanged = true;\n              categoriesColumn[index].height = height;\n              if (elementId) {\n                categoriesColumn[index].elementId = elementId;\n              }\n            }\n          });\n        });\n        if (isHeightChanged) {\n          isHeightChanged = false;\n          setCategoriesState(categoriesColumn);\n        }\n      }\n    });\n\n    const previouslyLoading = usePrevious(dragDropConfig.loading);\n    useAfterInitialEffect(() => {\n      // If the drag drop loading state is false and there was a dragged item, focus on the drag handle of the dragged item\n      if (!dragDropConfig.loading && previouslyLoading && draggedItem) {\n        setTimeout(() => {\n          const dragHandle = document.querySelector(\n            `[data-drag-handle-for=\"${draggedItem.id}\"]`\n          ) as HTMLElement;\n          if (dragHandle) {\n            dragHandle.focus();\n          }\n          setDraggedItem(undefined);\n        }, 100);\n      }\n    }, [dragDropConfig.loading, previouslyLoading, draggedItem?.id]);\n\n    const getLifeCycleListProps = useCallback(\n      (\n        stageItem: StageItemProps,\n        index: number,\n        stageArray: StageItemProps[],\n        alternate: boolean\n      ): LifeCycleListProps => {\n        return {\n          id: stageItem.id,\n          item: { ...stageItem, index, alternate },\n          isFirstItem: index === 0,\n          isLastItem: index === stageArray.length - 1,\n          ref: setRef,\n          task,\n          categories: categoriesState,\n          stageVariant: alternate ? 'alternate' : undefined,\n          prevStageItem: stageArray[index - 1],\n          stage: alternate ? alternateStage : stage\n        };\n      },\n      [setRef, task, categoriesState, alternateStage, stage]\n    );\n\n    const stageTestIds = useTestIds('', getStageTestIds);\n    const alternateStageTestIds = useTestIds('', getAlternateStageTestIds);\n    const dragEnabled = !!onDragDrop && !readOnly;\n\n    const addStageButton = (\n      <StyledAddButton\n        data-testid={stageTestIds.addButton}\n        variant='simple'\n        label={t('add_stage')}\n        icon\n        onClick={onAddStage}\n      >\n        <Icon name='plus' />\n      </StyledAddButton>\n    );\n\n    const addAlternateStageButton = (\n      <StyledAddButton\n        data-testid={alternateStageTestIds.addButton}\n        variant='simple'\n        label={t('add_alternate_stage')}\n        icon\n        onClick={onAddAlternateStage}\n      >\n        <Icon name='plus' />\n      </StyledAddButton>\n    );\n\n    const lifeCycleContext: LifeCycleContextValue = useMemo(\n      () => ({\n        lifeCycleData: { stages: items, alternateStages: alternateItems },\n        selectedItemId,\n        readOnly,\n        dragDropConfig,\n        dragEnabled,\n        draggedItem,\n        setDraggedItem,\n        onDragDrop\n      }),\n      [\n        items,\n        alternateItems,\n        selectedItemId,\n        readOnly,\n        dragDropConfig,\n        dragEnabled,\n        draggedItem,\n        setDraggedItem,\n        onDragDrop\n      ]\n    );\n\n    return (\n      <DragDropManager>\n        <StyledLifeCycleWrapper\n          container={{ gap: 2 }}\n          hasLabel={!!stage?.label || !!alternateStage?.label}\n          ref={ref}\n        >\n          <LifeCycleContext.Provider value={lifeCycleContext}>\n            {items.length !== 0 && (\n              <Flex container={{ direction: 'column', gap: 1 }}>\n                {!!stage?.label && (\n                  <Text id={`${labelId}-stage-label`} variant='secondary'>\n                    {stage.label}\n                  </Text>\n                )}\n\n                {dragEnabled ? (\n                  <LifeCycleDragDropList\n                    type='stage'\n                    listLocation={{\n                      alternate: false\n                    }}\n                    items={items.map((stageItem, index, stageArray) => ({\n                      id: stageItem.id,\n                      type: 'stage',\n                      data: {\n                        ...restProps,\n                        ...getLifeCycleListProps(stageItem, index, stageArray, false)\n                      }\n                    }))}\n                    itemRenderer={LifeCycleList}\n                    onDragDrop={onDragDrop}\n                    additionalDropZone={onAddStage ? addStageButton : undefined}\n                    as={Flex}\n                    forwardedAs='ul'\n                    container={{ gap: 1 }}\n                    aria-label={t('stage')}\n                    aria-labelledby={`${labelId}-stage-label`}\n                  />\n                ) : (\n                  <Flex\n                    container={{ gap: 1 }}\n                    aria-label={t('stage')}\n                    aria-labelledby={`${labelId}-stage-label`}\n                    as='ul'\n                  >\n                    {items.map((stageItem, index, stageArray) => {\n                      return (\n                        <LifeCycleList\n                          {...restProps}\n                          key={stageItem.id}\n                          {...getLifeCycleListProps(stageItem, index, stageArray, false)}\n                        />\n                      );\n                    })}\n\n                    {!readOnly && onAddStage && <li>{addStageButton}</li>}\n                  </Flex>\n                )}\n              </Flex>\n            )}\n            {alternateItems.length !== 0 && (\n              <Flex container={{ direction: 'column', gap: 1 }}>\n                {!!alternateStage?.label && (\n                  <Text id={`${labelId}-alt-stage-label`} variant='secondary'>\n                    {alternateStage.label}\n                  </Text>\n                )}\n\n                {dragEnabled ? (\n                  <LifeCycleDragDropList\n                    type='alternate-stage'\n                    listLocation={{\n                      alternate: true\n                    }}\n                    items={alternateItems.map((stageItem, index, stageArray) => ({\n                      id: stageItem.id,\n                      type: 'alternate-stage',\n                      data: {\n                        ...restProps,\n                        ...getLifeCycleListProps(stageItem, index, stageArray, true)\n                      }\n                    }))}\n                    itemRenderer={LifeCycleList}\n                    onDragDrop={onDragDrop}\n                    additionalDropZone={onAddAlternateStage ? addAlternateStageButton : undefined}\n                    as={Flex}\n                    forwardedAs='ul'\n                    container={{ gap: 1 }}\n                    aria-label={t('alternate_stage')}\n                    aria-labelledby={`${labelId}-alt-stage-label`}\n                  />\n                ) : (\n                  <Flex\n                    container={{ gap: 1 }}\n                    aria-label={t('alternate_stage')}\n                    aria-labelledby={`${labelId}-alt-stage-label`}\n                    as='ul'\n                  >\n                    {alternateItems.map((stageItem, index, stageArray) => {\n                      return (\n                        <LifeCycleList\n                          {...restProps}\n                          key={stageItem.id}\n                          {...getLifeCycleListProps(stageItem, index, stageArray, true)}\n                        />\n                      );\n                    })}\n\n                    {!readOnly && onAddAlternateStage && <li>{addAlternateStageButton}</li>}\n                  </Flex>\n                )}\n              </Flex>\n            )}\n          </LifeCycleContext.Provider>\n        </StyledLifeCycleWrapper>\n      </DragDropManager>\n    );\n  }\n);\n\nexport default withTestIds(LifeCycle, getStageTestIds);\n"]}

package/lib/components/LifeCycle/LifeCycle.test-ids.d.ts

@@ -0,0 +1,6 @@
+export declare const getCategoryTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+export declare const getStageTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly string[]>;
+export declare const getAlternateStageTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly string[]>;
+export declare const getTaskTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly string[]>;
+export declare const getStepTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly string[]>;
+//# sourceMappingURL=LifeCycle.test-ids.d.ts.map

package/lib/components/LifeCycle/LifeCycle.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LifeCycle.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.test-ids.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,uIAAyC,CAAC;AACzE,eAAO,MAAM,eAAe,6IAAyD,CAAC;AACtF,eAAO,MAAM,wBAAwB,6IAE1B,CAAC;AACZ,eAAO,MAAM,cAAc,6IAA2D,CAAC;AACvF,eAAO,MAAM,cAAc,6IAAwD,CAAC"}

package/lib/components/LifeCycle/LifeCycle.test-ids.js

@@ -0,0 +1,10 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+const lifeCycleActions = ['action-button', 'add-button'];
+export const getCategoryTestIds = createTestIds('category', []);
+export const getStageTestIds = createTestIds('stage', [...lifeCycleActions]);
+export const getAlternateStageTestIds = createTestIds('alternate-stage', [
+    ...lifeCycleActions
+]);
+export const getTaskTestIds = createTestIds('process', [...lifeCycleActions]);
+export const getStepTestIds = createTestIds('step', [...lifeCycleActions]);
+//# sourceMappingURL=LifeCycle.test-ids.js.map

package/lib/components/LifeCycle/LifeCycle.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LifeCycle.test-ids.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,gBAAgB,GAAG,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AAEzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,UAAU,EAAE,EAAW,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,EAAE,CAAC,GAAG,gBAAgB,CAAU,CAAC,CAAC;AACtF,MAAM,CAAC,MAAM,wBAAwB,GAAG,aAAa,CAAC,iBAAiB,EAAE;IACvE,GAAG,gBAAgB;CACX,CAAC,CAAC;AACZ,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,SAAS,EAAE,CAAC,GAAG,gBAAgB,CAAU,CAAC,CAAC;AACvF,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,GAAG,gBAAgB,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nconst lifeCycleActions = ['action-button', 'add-button'];\n\nexport const getCategoryTestIds = createTestIds('category', [] as const);\nexport const getStageTestIds = createTestIds('stage', [...lifeCycleActions] as const);\nexport const getAlternateStageTestIds = createTestIds('alternate-stage', [\n  ...lifeCycleActions\n] as const);\nexport const getTaskTestIds = createTestIds('process', [...lifeCycleActions] as const);\nexport const getStepTestIds = createTestIds('step', [...lifeCycleActions] as const);\n"]}