npm - @pega/cosmos-react-build - Versions diffs - 2.1.3 → 3.0.0-dev.2.1 - Mend

@pega/cosmos-react-build 2.1.3 → 3.0.0-dev.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/lib/components/ItemLibrary/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { default as ItemLibrary } from './ItemLibrary';
+export * from './ItemLibrary';
+//# sourceMappingURL=index.js.map

package/lib/components/ItemLibrary/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ItemLibrary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,eAAe,CAAC","sourcesContent":["export { default as ItemLibrary } from './ItemLibrary';\nexport * from './ItemLibrary';\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LifeCycle.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAKZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAE/D,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B,KAAK,EAAE,cAAc,EAAE,CAAC;IAExB,cAAc,CAAC,EAAE,cAAc,EAAE,CAAC;IAElC,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,EAAE,UAAU,CAAC;IAElB,cAAc,EAAE,UAAU,CAAC;IAE3B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAeD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,~~CA4H~~/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"LifeCycle.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAKZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAE/D,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B,KAAK,EAAE,cAAc,EAAE,CAAC;IAExB,cAAc,CAAC,EAAE,cAAc,EAAE,CAAC;IAElC,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,EAAE,UAAU,CAAC;IAElB,cAAc,EAAE,UAAU,CAAC;IAE3B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAeD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAkI/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/LifeCycle/LifeCycle.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp, Flex, Button, Icon, useI18n } from '@pega/cosmos-react-core';
@@ -63,10 +64,10 @@ const LifeCycle = forwardRef(({ items, categories, alternateItems = [], onAddSta
     });
     return (_jsxs(Flex, { container: { itemGap: 2 }, ref: ref, children: [_jsxs(Flex, { as: StyledLifeCycle, ref: lifeCycleEl, container: true, role: 'grid', "aria-label": t('stage'), children: [items.map((stageItem, index, stageArray) => {
                         const listId = stageItem.id;
-                        return (_jsx(LifeCycleList, { id: listId, item: stageItem, isFirstItem: index === 0, isLastItem: index === stageArray.length - 1, ref: setRef, stage: stage, categories: categoriesState, ...restProps }, listId));
-                    }), _jsx(StyledAddButton, { variant: 'simple', label: t('add_stage'), icon: true, onClick: onAddStage, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0), alternateItems.length !== 0 && (_jsxs(Flex, { as: StyledLifeCycle, container: true, ref: lifeCycleEl, role: 'grid', "aria-label": t('alternate_stage'), children: [alternateItems.map((stageItem) => {
+                        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 }));
+                    }), _jsx(StyledAddButton, { variant: 'simple', label: t('add_stage'), icon: true, onClick: onAddStage, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0), alternateItems.length !== 0 && (_jsxs(Flex, { as: StyledLifeCycle, container: true, ref: lifeCycleEl, role: 'grid', "aria-label": t('alternate_stage'), children: [alternateItems.map((stageItem, index, stageArray) => {
                         const listId = stageItem.id;
-                        return (_jsx(LifeCycleList, { id: listId, item: stageItem, ref: setRef, categories: categoriesState, stageVariant: 'alternate', stage: alternateStage, ...restProps }, listId));
+                        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 }));
                     }), _jsx(StyledAddButton, { variant: 'simple', label: t('add_alternate_stage'), icon: true, onClick: onAddAlternateStage, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0))] }, void 0));
 });
 export default LifeCycle;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LifeCycle.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useLayoutEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Flex,\n Button,\n Icon,\n useI18n,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport LifeCycleList from './LifeCycleList';\nimport { StageItemProps } from './LifeCycle.types';\nimport { StageProps } from './Stage';\nimport { CategoriesProps } from './Category';\nimport { TaskProps } from './Task';\nimport { StepProps } from './Step';\n\nexport interface LifeCycleProps extends BaseProps, NoChildrenProp {\n /* Pass reference to the LifeCycleComponent /\n ref?: Ref<HTMLDivElement>;\n / Array of stages and its contents /\n items: StageItemProps[];\n / Array of alternate stages and its contents /\n alternateItems?: StageItemProps[];\n / Props for the task component /\n task: TaskProps[];\n / Props for the Stage component /\n stage: StageProps;\n / Props for the AlternatStage component /\n alternateStage: StageProps;\n / Props for the Cluster component /\n categories: CategoriesProps[];\n / Props for the Step component /\n step: StepProps[];\n / Call back function for on AddState /\n onAddStage: () => void;\n / Call back function to add alternate stages */\n onAddAlternateStage: () => void;\n}\n\nconst StyledLifeCycle = styled.ol``;\n\nStyledLifeCycle.defaultProps = defaultThemeProp;\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(\n (\n {\n items,\n categories,\n alternateItems = [],\n onAddStage,\n onAddAlternateStage,\n stage,\n alternateStage,\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 return (\n <Flex container={{ itemGap: 2 }} ref={ref}>\n <Flex as={StyledLifeCycle} ref={lifeCycleEl} container role='grid' aria-label={t('stage')}>\n {items.map((stageItem: StageItemProps, index: number, stageArray: StageItemProps[]) => {\n const listId = stageItem.id;\n return (\n <LifeCycleList\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 categories={categoriesState}\n {...restProps}\n />\n );\n })}\n <StyledAddButton variant='simple' label={t('add_stage')} icon onClick={onAddStage}>\n <Icon name='plus' />\n </StyledAddButton>\n </Flex>\n {alternateItems.length !== 0 && (\n <Flex\n as={StyledLifeCycle}\n container\n ref={lifeCycleEl}\n role='grid'\n aria-label={t('alternate_stage')}\n >\n {alternateItems.map((stageItem: StageItemProps) => {\n const listId = stageItem.id;\n return (\n <LifeCycleList\n key={listId}\n id={listId}\n item={stageItem}\n ref={setRef}\n categories={categoriesState}\n stageVariant='alternate'\n stage={alternateStage}\n {...restProps}\n />\n );\n })}\n <StyledAddButton\n variant='simple'\n label={t('add_alternate_stage')}\n icon\n onClick={onAddAlternateStage}\n >\n <Icon name='plus' />\n </StyledAddButton>\n </Flex>\n )}\n </Flex>\n );\n }\n);\n\nexport default LifeCycle;\n"]}
1	+ {"version":3,"file":"LifeCycle.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useLayoutEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Flex,\n Button,\n Icon,\n useI18n,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport LifeCycleList from './LifeCycleList';\nimport { StageItemProps } from './LifeCycle.types';\nimport { StageProps } from './Stage';\nimport { CategoriesProps } from './Category';\nimport { TaskProps } from './Task';\nimport { StepProps } from './Step';\n\nexport interface LifeCycleProps extends BaseProps, NoChildrenProp {\n /* Pass reference to the LifeCycleComponent /\n ref?: Ref<HTMLDivElement>;\n / Array of stages and its contents /\n items: StageItemProps[];\n / Array of alternate stages and its contents /\n alternateItems?: StageItemProps[];\n / Props for the task component /\n task: TaskProps[];\n / Props for the Stage component /\n stage: StageProps;\n / Props for the AlternatStage component /\n alternateStage: StageProps;\n / Props for the Cluster component /\n categories: CategoriesProps[];\n / Props for the Step component /\n step: StepProps[];\n / Call back function for on AddState /\n onAddStage: () => void;\n / Call back function to add alternate stages */\n onAddAlternateStage: () => void;\n}\n\nconst StyledLifeCycle = styled.ol``;\n\nStyledLifeCycle.defaultProps = defaultThemeProp;\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(\n (\n {\n items,\n categories,\n alternateItems = [],\n onAddStage,\n onAddAlternateStage,\n stage,\n alternateStage,\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 return (\n <Flex container={{ itemGap: 2 }} ref={ref}>\n <Flex as={StyledLifeCycle} ref={lifeCycleEl} container role='grid' 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 <StyledAddButton variant='simple' label={t('add_stage')} icon onClick={onAddStage}>\n <Icon name='plus' />\n </StyledAddButton>\n </Flex>\n {alternateItems.length !== 0 && (\n <Flex\n as={StyledLifeCycle}\n container\n ref={lifeCycleEl}\n role='grid'\n aria-label={t('alternate_stage')}\n >\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 <StyledAddButton\n variant='simple'\n label={t('add_alternate_stage')}\n icon\n onClick={onAddAlternateStage}\n >\n <Icon name='plus' />\n </StyledAddButton>\n </Flex>\n )}\n </Flex>\n );\n }\n);\n\nexport default LifeCycle;\n"]}

package/lib/components/LifeCycle/LifeCycle.types.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import { Action, StatusProps } from '@pega/cosmos-react-core';
 export interface VisualColorProps {
     color: 'magenta' | 'studio' | 'congressBlue' | 'Japaneselaurel' | 'violet' | 'yellow' | 'orange' | 'darkyellow';
 }
+export declare type StageType = 'start' | 'default' | 'default-wait' | 'resolution' | 'alternate' | 'alternate-wait';
 export interface StepItemProps {
     id: string;
     label: string;
@@ -31,7 +32,7 @@ export interface StageItemProps {
     id: string;
     label: string;
     categories: CategoryItemProps[];
-    type: 'start' | 'default' | 'resolution' | 'alternate';
+    type: StageType;
     error: string;
 }
 export interface CategoryItemProps {
@@ -53,4 +54,14 @@ export interface LifeCycleActionParam {
 export interface LifeCycleAction extends Omit<Action, 'onClick'> {
     onClick: (param: LifeCycleActionParam, e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>) => void;
 }
+export interface StageInfo {
+    id: StageType;
+    visual: {
+        bgColor: string;
+        bgHover: string;
+        tailPointed?: boolean;
+        headPointed?: boolean;
+    };
+}
+export declare const getStageInfo: (currentType: StageType, prevType: StageType | null, isLastItem: boolean | undefined) => StageInfo;
 //# sourceMappingURL=LifeCycle.types.d.ts.map

package/lib/components/LifeCycle/LifeCycle.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LifeCycle.types.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,WAAW,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAE9D~~,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EACD,SAAS,GACT,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAE7B,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,MAAM,CAAC;IAEd,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAEhC,IAAI,EAAE,~~OAAO,GAAG,~~SAAS,~~GAAG,YAAY,GAAG,WAAW,~~CAAC;~~IACvD~~,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAEhC,EAAE,EAAE,MAAM,CAAC;IAEX,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;IAC9D,OAAO,EAAE,CACP,KAAK,EAAE,oBAAoB,EAC3B,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;CACX"}
1	+ {"version":3,"file":"LifeCycle.types.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAsB,MAAM,yBAAyB,CAAC;AAElF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EACD,SAAS,GACT,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;CAClB;AAED,oBAAY,SAAS,GACjB,OAAO,GACP,SAAS,GACT,cAAc,GACd,YAAY,GACZ,WAAW,GACX,gBAAgB,CAAC;AAErB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAE7B,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,MAAM,CAAC;IAEd,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAEhC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAEhC,EAAE,EAAE,MAAM,CAAC;IAEX,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;IAC9D,OAAO,EAAE,CACP,KAAK,EAAE,oBAAoB,EAC3B,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;CACX;AAED,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,SAAS,CAAC;IACd,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,CAAC;CACH;AA6DD,eAAO,MAAM,YAAY,gBACV,SAAS,YACZ,SAAS,GAAG,IAAI,cACd,OAAO,GAAG,SAAS,cAoBhC,CAAC"}

package/lib/components/LifeCycle/LifeCycle.types.js CHANGED Viewed

@@ -1,2 +1,79 @@
-export {};
+import { WorkTheme as Theme } from '@pega/cosmos-react-core';
+const StageTypeDefaults = {
+    start: {
+        id: 'start',
+        visual: {
+            bgColor: Theme.base.colors.blue.dark,
+            bgHover: Theme.base.colors.blue.medium,
+            tailPointed: false,
+            headPointed: true
+        }
+    },
+    default: {
+        id: 'default',
+        visual: {
+            bgColor: Theme.base.colors.blue.medium,
+            bgHover: Theme.base.colors.blue.light,
+            tailPointed: true,
+            headPointed: true
+        }
+    },
+    'default-wait': {
+        id: 'default-wait',
+        visual: {
+            bgColor: Theme.base.colors.blue.medium,
+            bgHover: Theme.base.colors.blue.light,
+            tailPointed: true,
+            headPointed: false
+        }
+    },
+    resolution: {
+        id: 'resolution',
+        visual: {
+            bgColor: Theme.base.colors.green.medium,
+            bgHover: Theme.base.colors.green.light,
+            tailPointed: true,
+            headPointed: false
+        }
+    },
+    alternate: {
+        id: 'alternate',
+        visual: {
+            bgColor: Theme.base.colors.red.dark,
+            bgHover: Theme.base.colors.red.medium,
+            tailPointed: false,
+            headPointed: false
+        }
+    },
+    'alternate-wait': {
+        id: 'alternate-wait',
+        visual: {
+            bgColor: Theme.base.colors.red.dark,
+            bgHover: Theme.base.colors.red.medium,
+            tailPointed: false,
+            headPointed: false
+        }
+    }
+};
+// calculates the final stage info based on prev type and returns the final stage info
+// second param is mandatory for accurate results, optional only for the first stage
+export const getStageInfo = (currentType, prevType, isLastItem) => {
+    const currentStageInfo = StageTypeDefaults[currentType] || StageTypeDefaults.default;
+    // cloning, to avoid getting modified
+    const result = {
+        ...currentStageInfo,
+        visual: {
+            ...currentStageInfo.visual
+        }
+    };
+    if (prevType) {
+        const prevStageInfo = StageTypeDefaults[prevType] || StageTypeDefaults.start;
+        result.visual.tailPointed =
+            currentStageInfo.visual.tailPointed && prevStageInfo.visual.headPointed;
+    }
+    if (isLastItem) {
+        result.visual.headPointed = false;
+    }
+    return result;
+};
 //# sourceMappingURL=LifeCycle.types.js.map

package/lib/components/LifeCycle/LifeCycle.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LifeCycle.types.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent } from 'react';\n\nimport { Action, StatusProps } from '@pega/cosmos-react-core';\n\nexport interface VisualColorProps {\n color:\n \| 'magenta'\n \| 'studio'\n \| 'congressBlue'\n \| 'Japaneselaurel'\n \| 'violet'\n \| 'yellow'\n \| 'orange'\n \| 'darkyellow';\n}\n\nexport interface StepItemProps {\n id: string;\n label: string;\n visual: {\n color: VisualColorProps['color'];\n icon: string;\n label: string;\n imgurl: string;\n };\n status: { type?: StatusProps['variant'] \| ''; label: string };\n error: string;\n}\n\nexport interface TaskItemProps {\n id: string;\n label: string;\n visual: {\n imgurl: string;\n };\n error: string;\n steps: StepItemProps[];\n}\n\nexport interface StageItemProps {\n /* Data model should have id of the stage item /\n id: string;\n / Data model should have the stage label /\n label: string;\n / Data model should have the categoryData array /\n categories: CategoryItemProps[];\n / Data model should have the stageType as below /\n type: ~~'start' \| 'default' \| 'resolution' \| 'alternate'~~;\n error: string;\n}\n\nexport interface CategoryItemProps {\n / Data model should have id of the stage item /\n id: string;\n / Data model should have id of the stage item /\n categoryId: string;\n / Data model should have the categoryData array */\n tasks: TaskItemProps[] \| TaskItemProps[][];\n}\n\nexport interface CategoriesItemProps {\n label: string;\n id: string;\n}\n\nexport interface LifeCycleActionParam {\n value?: string;\n stage?: StageItemProps;\n task?: TaskItemProps;\n category?: CategoryItemProps;\n step?: StepItemProps;\n}\n\nexport interface LifeCycleAction extends Omit<Action, 'onClick'> {\n onClick: (\n param: LifeCycleActionParam,\n e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement \| HTMLInputElement>\n ) => void;\n}\n"]}
1	+ {"version":3,"file":"LifeCycle.types.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent } from 'react';\n\nimport { Action, StatusProps, WorkTheme as Theme } from '@pega/cosmos-react-core';\n\nexport interface VisualColorProps {\n color:\n \| 'magenta'\n \| 'studio'\n \| 'congressBlue'\n \| 'Japaneselaurel'\n \| 'violet'\n \| 'yellow'\n \| 'orange'\n \| 'darkyellow';\n}\n\nexport type StageType =\n \| 'start'\n \| 'default'\n \| 'default-wait'\n \| 'resolution'\n \| 'alternate'\n \| 'alternate-wait';\n\nexport interface StepItemProps {\n id: string;\n label: string;\n visual: {\n color: VisualColorProps['color'];\n icon: string;\n label: string;\n imgurl: string;\n };\n status: { type?: StatusProps['variant'] \| ''; label: string };\n error: string;\n}\n\nexport interface TaskItemProps {\n id: string;\n label: string;\n visual: {\n imgurl: string;\n };\n error: string;\n steps: StepItemProps[];\n}\n\nexport interface StageItemProps {\n /* Data model should have id of the stage item /\n id: string;\n / Data model should have the stage label /\n label: string;\n / Data model should have the categoryData array /\n categories: CategoryItemProps[];\n / Data model should have the stageType as below /\n type: StageType;\n error: string;\n}\n\nexport interface CategoryItemProps {\n / Data model should have id of the stage item /\n id: string;\n / Data model should have id of the stage item /\n categoryId: string;\n / Data model should have the categoryData array */\n tasks: TaskItemProps[] \| TaskItemProps[][];\n}\n\nexport interface CategoriesItemProps {\n label: string;\n id: string;\n}\n\nexport interface LifeCycleActionParam {\n value?: string;\n stage?: StageItemProps;\n task?: TaskItemProps;\n category?: CategoryItemProps;\n step?: StepItemProps;\n}\n\nexport interface LifeCycleAction extends Omit<Action, 'onClick'> {\n onClick: (\n param: LifeCycleActionParam,\n e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement \| HTMLInputElement>\n ) => void;\n}\n\nexport interface StageInfo {\n id: StageType;\n visual: {\n bgColor: string;\n bgHover: string;\n tailPointed?: boolean;\n headPointed?: boolean;\n };\n}\n\nconst StageTypeDefaults: Record<StageType, StageInfo> = {\n start: {\n id: 'start',\n visual: {\n bgColor: Theme.base.colors.blue.dark,\n bgHover: Theme.base.colors.blue.medium,\n tailPointed: false,\n headPointed: true\n }\n },\n default: {\n id: 'default',\n visual: {\n bgColor: Theme.base.colors.blue.medium,\n bgHover: Theme.base.colors.blue.light,\n tailPointed: true,\n headPointed: true\n }\n },\n 'default-wait': {\n id: 'default-wait',\n visual: {\n bgColor: Theme.base.colors.blue.medium,\n bgHover: Theme.base.colors.blue.light,\n tailPointed: true,\n headPointed: false\n }\n },\n resolution: {\n id: 'resolution',\n visual: {\n bgColor: Theme.base.colors.green.medium,\n bgHover: Theme.base.colors.green.light,\n tailPointed: true,\n headPointed: false\n }\n },\n alternate: {\n id: 'alternate',\n visual: {\n bgColor: Theme.base.colors.red.dark,\n bgHover: Theme.base.colors.red.medium,\n tailPointed: false,\n headPointed: false\n }\n },\n 'alternate-wait': {\n id: 'alternate-wait',\n visual: {\n bgColor: Theme.base.colors.red.dark,\n bgHover: Theme.base.colors.red.medium,\n tailPointed: false,\n headPointed: false\n }\n }\n};\n\n// calculates the final stage info based on prev type and returns the final stage info\n// second param is mandatory for accurate results, optional only for the first stage\nexport const getStageInfo = (\n currentType: StageType,\n prevType: StageType \| null,\n isLastItem: boolean \| undefined\n) => {\n const currentStageInfo = StageTypeDefaults[currentType] \|\| StageTypeDefaults.default;\n // cloning, to avoid getting modified\n const result: StageInfo = {\n ...currentStageInfo,\n visual: {\n ...currentStageInfo.visual\n }\n };\n\n if (prevType) {\n const prevStageInfo = StageTypeDefaults[prevType] \|\| StageTypeDefaults.start;\n result.visual.tailPointed =\n currentStageInfo.visual.tailPointed && prevStageInfo.visual.headPointed;\n }\n if (isLastItem) {\n result.visual.headPointed = false;\n }\n return result;\n};\n"]}

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

@@ -1,6 +1,6 @@
 import { FunctionComponent, Ref } from 'react';
 import type { NoChildrenProp } from '@pega/cosmos-react-core';
-import { StageItemProps } from './LifeCycle.types';
+import { StageItemProps, StageType } from './LifeCycle.types';
 import { StageProps } from './Stage';
 import { CategoriesProps } from './Category';
 import { TaskProps } from './Task';
@@ -14,7 +14,8 @@ export interface LifeCycleListProps extends NoChildrenProp {
     item: StageItemProps;
     isFirstItem?: boolean;
     isLastItem?: boolean;
-    stageVariant?: 'start' | 'default' | 'resolution' | 'alternate';
+    stageVariant?: StageType;
+    prevStageVariant: StageType;
     id?: string;
 }
 declare const LifeCycleList: FunctionComponent<LifeCycleListProps>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LifeCycleList.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,EAAE,cAAc,~~EAAqB~~,MAAM,mBAAmB,CAAC;~~AACtE~~,OAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAiB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IAExD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IAEnB,IAAI,EAAE,cAAc,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY,CAAC,EAAE,~~OAAO,GAAG,~~SAAS,~~GAAG~~,~~YAAY~~,~~GAAG~~,~~WAAW~~,CAAC;~~IAEhE~~,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAoBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAiGxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"LifeCycleList.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAmC,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC/F,OAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAiB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IAExD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IAEnB,IAAI,EAAE,cAAc,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gBAAgB,EAAE,SAAS,CAAC;IAE5B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAoBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAiGxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/LifeCycle/LifeCycleList.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { createUID, useDirection } from '@pega/cosmos-react-core';
+import { getStageInfo } from './LifeCycle.types';
 import Stage from './Stage';
 import Category from './Category';
 const StyledLifeCycleList = styled.li(({ theme, lastItem }) => {
@@ -22,7 +23,7 @@ const StyledLifeCycleList = styled.li(({ theme, lastItem }) => {
     `}
   `;
 });
-const LifeCycleList = forwardRef(({ item, isFirstItem, categories, isLastItem, stage: stageProps, task, step, stageVariant, id, ...restProps }, ref) => {
+const LifeCycleList = forwardRef(({ item, isFirstItem, isLastItem, categories, stage: stageProps, task, step, prevStageVariant, stageVariant, id, ...restProps }, ref) => {
     const showTitle = isFirstItem || false;
     let sortedCategory = [];
     const listId = id || createUID();
@@ -43,7 +44,8 @@ const LifeCycleList = forwardRef(({ item, isFirstItem, categories, isLastItem, s
     if (categories && categories.length !== 0) {
         sortedCategory = catgoryItem(item.categories);
     }
-    return (_jsxs(StyledLifeCycleList, { role: 'row', lastItem: isLastItem, children: [_jsx(Stage, { value: item.label, variant: stageVariant || (item.type ? item.type : 'default'), item: item, tailPointed: isFirstItem, headPointed: isLastItem, error: item.error, id: item.id, ...stageProps }, void 0), sortedCategory.length !== 0 &&
+    const stageInfo = getStageInfo(item.type, prevStageVariant, isLastItem);
+    return (_jsxs(StyledLifeCycleList, { role: 'row', lastItem: isLastItem, children: [_jsx(Stage, { value: item.label, stageInfo: stageInfo, item: item, error: item.error, id: item.id, ...stageProps }, void 0), sortedCategory.length !== 0 &&
                 sortedCategory.map((categoryItem, categoryindex) => {
                     const taskProps = task[categoryindex];
                     let stepProps;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LifeCycleList.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;~~AAGlE~~,OAAO,KAAqB,MAAM,SAAS,CAAC;AAC5C,OAAO,QAA6B,MAAM,YAAY,CAAC;~~AA2BvD~~,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAAoC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/F,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;iBAEK,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE7B,QAAQ;QACV,GAAG,CAAA;8BACuB,KAAK,CAAC,IAAI,CAAC,OAAO;KAC3C;MACC,QAAQ;QACV,GAAG;QACH,GAAG,CAAA;mBACY,KAAK,CAAC,IAAI,CAAC,OAAO,iBAAiB,KAAK,CAAC,IAAI,CAAC,OAAO;KACnE;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,aAAa,GAA0C,UAAU,CACrE,CACE,EACE,IAAI,EACJ,WAAW,EACX,UAAU,EACV,UAAU,EACV,KAAK,EAAE,UAAU,EACjB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,EAAE,EACF,GAAG,SAAS,EACO,EACrB,GAA8B,EAC9B,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,IAAI,KAAK,CAAC;IACvC,IAAI,cAAc,GAAwB,EAAE,CAAC;IAC7C,MAAM,MAAM,GAAG,EAAE,IAAI,SAAS,EAAE,CAAC;IAEjC,8EAA8E;IAC9E,MAAM,WAAW,GAAG,CAAC,YAAiC,EAAE,EAAE;QACxD,MAAM,YAAY,GAAwB,EAAE,CAAC;QAC7C,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;YAClE,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE;gBACtC,YAAY,CAAC,OAAO,CAAC,CAAC,YAA+B,EAAE,EAAE;oBACvD,IAAI,YAAY,CAAC,UAAU,KAAK,kBAAkB,CAAC,EAAE,EAAE;wBACrD,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;qBACjC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;SACJ;QACD,OAAO,YAAY,CAAC;IACtB,CAAC,CAAC;IAEF,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;QACzC,cAAc,GAAG,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC/C;IAED,OAAO,CACL,MAAC,mBAAmB,IAAc,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAE,UAAU,aAC/D,KAAC,KAAK,IACJ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,~~OAAO~~,EAAE,~~YAAY,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,~~SAAS,~~CAAC~~,~~EAC5D,~~IAAI,EAAE,IAAI,EACV,~~WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,UAAU,EACvB,~~KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,IAAI,CAAC,EAAE,KACP,UAAU,WACd,EACD,cAAc,CAAC,MAAM,KAAK,CAAC;gBAC1B,cAAc,CAAC,GAAG,CAAC,CAAC,YAA+B,EAAE,aAAqB,EAAE,EAAE;oBAC5E,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;oBACtC,IAAI,SAAS,CAAC;oBACd,IAAI,IAAI;wBAAE,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;oBAC1C,OAAO,CACL,eAAC,QAAQ,OACH,SAAS,EACb,GAAG,EAAE,YAAY,CAAC,UAAU,EAC5B,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,YAAY,CAAC,UAAU,EAC3B,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,UAAU,CAAC,aAAa,CAAC,EACnC,IAAI,EAAE,YAAY,EAClB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,IAAI,EACf,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,SAAS,GACf,CACH,CAAC;gBACJ,CAAC,CAAC,EACH,cAAc,CAAC,MAAM,KAAK,CAAC;gBAC1B,UAAU,CAAC,MAAM,KAAK,CAAC;gBACvB,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;gBAC1B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,YAA+B,EAAE,aAAqB,EAAE,EAAE;oBAC7E,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;oBACtC,IAAI,SAAS,CAAC;oBACd,IAAI,IAAI;wBAAE,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;oBAE1C,OAAO,CACL,KAAC,QAAQ,IAEP,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,YAAY,CAAC,UAAU,EAC3B,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,YAAY,EAClB,SAAS,EAAE,IAAI,EACf,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,SAAS,IARf,YAAY,CAAC,UAAU,CAS5B,CACH,CAAC;gBACJ,CAAC,CAAC,~~KArDoB~~,MAAM,~~CAsDV~~,CACvB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { NoChildrenProp } from '@pega/cosmos-react-core';\nimport { createUID, useDirection } from '@pega/cosmos-react-core';\n\nimport { StageItemProps, CategoryItemProps } from './LifeCycle.types';\nimport Stage, { StageProps } from './Stage';\nimport Category, { CategoriesProps } from './Category';\nimport { TaskProps } from './Task';\nimport { StepProps } from './Step';\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 stages /\n stageVariant?: ~~'start'~~ ~~\| 'default' \| 'resolution' \| 'alternate'~~;\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\nconst LifeCycleList: FunctionComponent<LifeCycleListProps> = forwardRef(\n (\n {\n item,\n isFirstItem,\n ~~categories~~,\n ~~isLastItem~~,\n stage: stageProps,\n task,\n step,\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 return (\n <StyledLifeCycleList key={listId} role='row' lastItem={isLastItem}>\n <Stage\n value={item.label}\n ~~variant~~={~~stageVariant \|\| (item.type ? item.type : 'default')~~}\n item={item}\n ~~tailPointed={isFirstItem}\n headPointed={isLastItem}\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 role='gridcell'\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 role='gridcell'\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);\n\nexport default LifeCycleList;\n"]}
1	+ {"version":3,"file":"LifeCycleList.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { NoChildrenProp } from '@pega/cosmos-react-core';\nimport { createUID, useDirection } from '@pega/cosmos-react-core';\n\nimport { StageItemProps, CategoryItemProps, getStageInfo, StageType } from './LifeCycle.types';\nimport Stage, { StageProps } from './Stage';\nimport Category, { CategoriesProps } from './Category';\nimport { TaskProps } from './Task';\nimport { StepProps } from './Step';\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 stages /\n stageVariant?: StageType;\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\nconst LifeCycleList: FunctionComponent<LifeCycleListProps> = forwardRef(\n (\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} role='row' 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 role='gridcell'\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 role='gridcell'\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);\n\nexport default LifeCycleList;\n"]}

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

@@ -1,9 +1,9 @@
 import { FunctionComponent, Ref, ChangeEvent, FocusEvent } from 'react';
 import { BaseProps, ForwardProps, FormControlProps } from '@pega/cosmos-react-core';
-import { LifeCycleAction, LifeCycleActionParam, StageItemProps } from './LifeCycle.types';
+import { LifeCycleAction, LifeCycleActionParam, StageInfo, StageItemProps, StageType } from './LifeCycle.types';
 export interface StageProps extends Omit<FormControlProps, 'status' | 'id'> {
     /** Pass an array of Action objects to append button(s) inline with the Input. */
-    actions?: LifeCycleAction[];
+    actions?: Record<StageType, LifeCycleAction[]> | LifeCycleAction[];
     /** Callback for Add stage */
     onAddStage?: () => void;
     /** Callback for Adding alternate stage */
@@ -12,6 +12,8 @@ export interface StageProps extends Omit<FormControlProps, 'status' | 'id'> {
     onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;
     /** onFocus of input */
     onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
+    /** onBlur of input */
+    onBlur?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface StageComponentProps extends BaseProps, StageProps {
     ref?: Ref<HTMLDivElement>;
@@ -19,11 +21,7 @@ export interface StageComponentProps extends BaseProps, StageProps {
     value: string;
     id: string;
     /** Controls the styling of the stage. */
-    variant?: StageItemProps['type'] | 'default';
-    /** To make the stage with pointed tail */
-    tailPointed?: boolean;
-    /** To make the stage with pointed head */
-    headPointed?: boolean;
+    stageInfo: StageInfo;
     /** Full data object which can be passed to the callback */
     item: StageItemProps;
     error?: string;
@@ -38,9 +36,7 @@ export declare const StyledInput: import("styled-components").StyledComponent<"i
 export declare const StyledStageActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     error?: string | undefined;
 }, never>;
-export declare const StyledStage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<StageComponentProps, "variant"> & {
-    tailPointed: boolean;
-    headPointed: boolean;
+export declare const StyledStage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<StageComponentProps, "stageInfo"> & {
     status: boolean;
 }, never>;
 export declare const StyledInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stage.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EACH,WAAW,EACX,UAAU,EAEX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAKZ,gBAAgB,EAMjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,~~EAAE~~,eAAe,~~EAAE~~,oBAAoB,~~EAAE~~,cAAc,~~EAAE~~,MAAM,mBAAmB,CAAC;~~AAE1F~~,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACzE,iFAAiF;IACjF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;~~IAC5B~~,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,uBAAuB;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;~~CAClF~~;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,UAAU;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IAEd,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,~~OAAO~~,~~CAAC,~~EAAE,~~cAAc,CAAC,MAAM,CAAC,GAAG,~~SAAS,CAAC;~~IAC7C~~,~~0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,~~2DAA2D;IAC3D,IAAI,EAAE,cAAc,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,eAAO,MAAM,cAAc;WAAuB,MAAM;SAatD,CAAC;AAEH,eAAO,MAAM,WAAW;WAAyB,MAAM,GAAG,SAAS;SA+BjE,CAAC;AAEH,eAAO,MAAM,kBAAkB;;SAiB7B,CAAC;AAEH,eAAO,MAAM,WAAW;~~iBAEP~~,OAAO;~~iBACP~~,~~OAAO;YACZ,OAAO;SA2KjB,~~CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,~~CAgHhE~~,CAAC;AAEF,eAAe,KAAK,CAAC"}
1	+ {"version":3,"file":"Stage.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EACH,WAAW,EACX,UAAU,EAEX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAKZ,gBAAgB,EAMjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,eAAe,EACf,oBAAoB,EACpB,SAAS,EACT,cAAc,EACd,SAAS,EACV,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACzE,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,eAAe,EAAE,CAAC,GAAG,eAAe,EAAE,CAAC;IACnE,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,uBAAuB;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjF,sBAAsB;IACtB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACjF;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,UAAU;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IAEd,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,SAAS,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,IAAI,EAAE,cAAc,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,eAAO,MAAM,cAAc;WAAuB,MAAM;SAatD,CAAC;AAEH,eAAO,MAAM,WAAW;WAAyB,MAAM,GAAG,SAAS;SA+BjE,CAAC;AAEH,eAAO,MAAM,kBAAkB;;SAiB7B,CAAC;AAEH,eAAO,MAAM,WAAW;YAEZ,OAAO;SAuJjB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAyIhE,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/LifeCycle/Stage.js CHANGED Viewed

@@ -67,31 +67,8 @@ export const StyledStageActions = styled.div(({ theme, error }) => {
     }
   `;
 });
-export const StyledStage = styled.div(({ variant, theme, tailPointed, headPointed, status }) => {
-    let bgColor;
-    let bgHover = '';
-    switch (variant) {
-        case 'start':
-            bgColor = theme.base.colors.blue.dark;
-            bgHover = theme.base.colors.blue.medium;
-            break;
-        case 'default':
-            bgColor = theme.base.colors.blue.medium;
-            bgHover = theme.base.colors.blue.light;
-            break;
-        case 'resolution':
-            bgColor = theme.base.colors.green.medium;
-            bgHover = theme.base.colors.green.light;
-            break;
-        case 'alternate':
-            bgColor = theme.base.colors.red.light;
-            bgHover = theme.base.colors.red['extra-light'];
-            break;
-        // eslint-disable-next-line sonarjs/no-duplicated-branches
-        default:
-            bgColor = theme.base.colors.blue.medium;
-            bgHover = theme.base.colors.blue.light;
-    }
+export const StyledStage = styled.div(({ stageInfo, theme, status }) => {
+    const { visual: { bgColor, bgHover, tailPointed, headPointed } } = stageInfo;
     const { rtl } = useDirection();
     const roundedEndsStyles = css `
     content: '';
@@ -133,7 +110,7 @@ export const StyledStage = styled.div(({ variant, theme, tailPointed, headPointe
     }
     &:focus-within {
       border: 0.0625rem solid ${theme.base.colors.blue.medium};
-      ${!headPointed &&
+      ${headPointed &&
         css `
         &::after {
           border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};
@@ -146,7 +123,7 @@ export const StyledStage = styled.div(({ variant, theme, tailPointed, headPointe
               `}
         }
       `}
-      ${!tailPointed &&
+      ${tailPointed &&
         css `
         &::before {
           border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};
@@ -181,7 +158,7 @@ export const StyledStage = styled.div(({ variant, theme, tailPointed, headPointe
       }
     }
-    ${!headPointed &&
+    ${headPointed &&
         css `
       &::after {
         ${roundedEndsStyles}
@@ -201,7 +178,7 @@ export const StyledStage = styled.div(({ variant, theme, tailPointed, headPointe
       }
     `}
-    ${!tailPointed &&
+    ${tailPointed &&
         css `
       &::before {
         ${roundedEndsStyles}
@@ -211,11 +188,11 @@ export const StyledStage = styled.div(({ variant, theme, tailPointed, headPointe
         ${rtl
             ? css `
               border-block-end: 0.0625rem solid transparent;
-              border-radius: 0.0625rem 0 0.0625rem calc(0.75 * ${theme.base['border-radius']});
+              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 0;
+              border-radius: 0.0625rem calc(0.75 * ${theme.base['border-radius']}) 0.0625rem 1rem;
             `}
       }
     `}
@@ -246,13 +223,13 @@ export const StyledInputWrapper = styled.div `
     }
   }
 `;
-const Stage = forwardRef(({ value, actions, variant = 'default', headPointed = true, tailPointed = true, onChange, onFocus, id, item, error, ...restProps }, ref) => {
+const Stage = forwardRef(({ value, actions, stageInfo, onChange, onFocus, onBlur, id, item, error, ...restProps }, ref) => {
     const [inputEl, setInputEl] = useElement();
     const [stageName, setStageName] = useState(value);
     const onInputChange = (e) => {
         setStageName(e.target.value);
         const param = {
-            value: stageName,
+            value: e.target.value,
             stage: item
         };
         onChange?.(param, e);
@@ -264,20 +241,44 @@ const Stage = forwardRef(({ value, actions, variant = 'default', headPointed = t
         };
         onFocus?.(param, e);
     };
+    const onInputBlur = (e) => {
+        setStageName(e.target.value);
+        const param = {
+            value: e.target.value,
+            stage: item
+        };
+        onBlur?.(param, e);
+    };
     const onActionItemClick = (actionId, e) => {
         const param = {
             stage: item
         };
-        actions?.forEach((actionItem) => {
-            if (actionItem.id === actionId) {
-                actionItem.onClick?.(param, e);
+        if (actions) {
+            let actionsList = [];
+            if (Array.isArray(actions)) {
+                actionsList = actions;
             }
-        });
+            else {
+                actionsList = actions[item.type];
+            }
+            actionsList?.forEach((actionItem) => {
+                if (actionItem.id === actionId) {
+                    actionItem.onClick?.(param, e);
+                }
+            });
+        }
     };
     /* Deep copy of actions object is required to provide consistent callback objects on actions */
     const actionsClone = [];
     if (actions) {
-        actions.forEach(actionItem => {
+        let actionsList = [];
+        if (Array.isArray(actions)) {
+            actionsList = actions;
+        }
+        else {
+            actionsList = actions[item.type];
+        }
+        actionsList.forEach(actionItem => {
             const actionCloneItem = {};
             Object.keys(actionItem).forEach((key) => {
                 actionCloneItem[key] = actionItem[key];
@@ -287,7 +288,7 @@ const Stage = forwardRef(({ value, actions, variant = 'default', headPointed = t
             return actionItem;
         });
     }
-    return (_jsx(Flex, { container: { inline: true }, as: StyledStage, ...restProps, ref: ref, variant: variant || 'default', tailPointed: tailPointed, headPointed: headPointed, status: error, role: 'columnheader', children: _jsxs(Flex, { as: StyledWrapper, container: { inline: true }, children: [_jsx(Flex, { as: StyledDragIcon, error: error, children: _jsx(Icon, { name: 'drag' }, void 0) }, void 0), _jsxs(Flex, { container: true, children: [_jsxs(Flex, { as: StyledInputWrapper, item: { grow: 1 }, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledInput, { value: stageName, type: 'text', ref: setInputEl, error: error, id: item.id, onChange: onInputChange, "aria-label": stageName, onFocus: onInputFocus }, void 0), stageName && (_jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || stageName }, void 0))] }, void 0), _jsx(StyledStageActions, { error: error, children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0) }, void 0)] }, void 0)] }, void 0) }, void 0));
+    return (_jsx(Flex, { container: { inline: true }, as: StyledStage, ...restProps, ref: ref, stageInfo: stageInfo, status: error, role: 'columnheader', children: _jsxs(Flex, { as: StyledWrapper, container: { inline: true }, children: [_jsx(Flex, { as: StyledDragIcon, error: error, children: _jsx(Icon, { name: 'drag' }, void 0) }, void 0), _jsxs(Flex, { container: true, children: [_jsxs(Flex, { as: StyledInputWrapper, item: { grow: 1 }, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledInput, { value: stageName, type: 'text', ref: setInputEl, error: error, id: item.id, onChange: onInputChange, "aria-label": stageName, onFocus: onInputFocus, onBlur: onInputBlur }, void 0), stageName && (_jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || stageName }, void 0))] }, void 0), _jsx(StyledStageActions, { error: error, children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0) }, void 0)] }, void 0)] }, void 0) }, void 0));
 });
 export default Stage;
 //# sourceMappingURL=Stage.js.map