npm - @pega/cosmos-react-build - Versions diffs - 2.1.1 → 3.0.0-dev.1.0 - Mend

@pega/cosmos-react-build 2.1.1 → 3.0.0-dev.1.0

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 (72) hide show

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useState,\n forwardRef,\n FunctionComponent,\n PropsWithChildren,\n Ref,\n ChangeEvent,\n FocusEvent,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n BaseProps,\n ForwardProps,\n Actions,\n Icon,\n Tooltip,\n useElement,\n FormControlProps,\n defaultThemeProp,\n useDirection,\n StyledTooltip,\n Action,\n StyledButton\n} from '@pega/cosmos-react-core';\n\nimport { LifeCycleAction, LifeCycleActionParam, StageItemProps } from './LifeCycle.types';\n\nexport interface StageProps extends Omit<FormControlProps, 'status' \| 'id'> {\n /** Pass an array of Action objects to append button(s) inline with the Input. /\n actions?: LifeCycleAction[];\n /* Callback for Add stage /\n onAddStage?: () => void;\n /* Callback for Adding alternate stage /\n onAddAlternateStage?: () => void;\n /* Input Change /\n onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n /* onFocus of input /\n onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n}\n\nexport interface StageComponentProps extends BaseProps, StageProps {\n ref?: Ref<HTMLDivElement>;\n /* Pass text for the task. /\n value: string;\n / unique id of the component /\n id: string;\n /* Controls the styling of the stage. /\n variant?: StageItemProps['type'] \| 'default';\n /* To make the stage with pointed tail /\n tailPointed?: boolean;\n /* To make the stage with pointed head /\n headPointed?: boolean;\n /* Full data object which can be passed to the callback /\n item: StageItemProps;\n / The status is used to show the input error status and the info on tooltip in case of error /\n error?: string;\n}\n\nexport const StyledWrapper = styled.div`\n overflow: hidden;\n`;\n\nexport const StyledDragIcon = styled.div<{ error: string }>(({ theme, error }) => {\n return css`\n width: 0%;\n transition: width ${theme.base.animation.speed};\n ${error &&\n css`\n display: block;\n `}\n padding: 0 calc(0.5 ${theme.base.spacing});\n margin: calc(0.5 * ${theme.base.spacing}) 0;\n color: ${theme.base.colors.white};\n text-align: center;\n `;\n});\n\nexport const StyledInput = styled.input<{ error: string \| undefined }>(({ error, theme }) => {\n return css`\n height: ${theme.components.input.height};\n padding: 0 calc(0.5 * ${theme.base.spacing});\n text-overflow: ellipsis;\n border: 0.0625rem solid transparent;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n width: 100%;\n color: ${theme.base.colors.white};\n outline: none;\n &:hover {\n cursor: pointer;\n }\n &:disabled {\n cursor: not-allowed;\n }\n ${error\n ? css`\n background: ${theme.base.colors.red['extra-light']};\n border: 0.0625rem solid ${theme.base.colors.red.medium};\n color: ${theme.base.colors.black};\n `\n : css`\n background: ${theme.base.palette['primary-background']};\n &&:focus:enabled {\n color: ${theme.base.colors.black};\n background: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.colors.blue.medium};\n }\n `}\n `;\n});\n\nexport const StyledStageActions = styled.div<{\n error?: string;\n}>(({ theme, error }) => {\n return css`\n z-index: 2;\n visibility: hidden;\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n\n ${error &&\n css`\n visibility: visible;\n `}\n\n & > ${StyledButton} {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nexport const StyledStage = styled.div<\n Pick<StageComponentProps, 'variant'> & {\n tailPointed: boolean;\n headPointed: boolean;\n status: boolean;\n }\n>(({ variant, theme, tailPointed, headPointed, status }) => {\n let bgColor;\n let bgHover = '';\n switch (variant) {\n case 'start':\n bgColor = theme.base.colors.blue.dark;\n bgHover = theme.base.colors.blue.medium;\n break;\n case 'default':\n bgColor = theme.base.colors.blue.medium;\n bgHover = theme.base.colors.blue.light;\n break;\n case 'resolution':\n bgColor = theme.base.colors.green.medium;\n bgHover = theme.base.colors.green.light;\n break;\n case 'alternate':\n bgColor = theme.base.colors.red.light;\n bgHover = theme.base.colors.red['extra-light'];\n break;\n // eslint-disable-next-line sonarjs/no-duplicated-branches\n default:\n bgColor = theme.base.colors.blue.medium;\n bgHover = theme.base.colors.blue.light;\n }\n const { rtl } = useDirection();\n const roundedEndsStyles = css`\n content: '';\n position: absolute;\n display: block;\n width: calc(3 * ${theme.base.spacing});\n height: calc(3 * ${theme.base.spacing});\n top: calc(1 * ${theme.base.spacing});\n border: 0;\n border-inline-end: 0.0625rem solid transparent;\n `;\n\n return css`\n position: relative;\n padding: calc(0.5 * ${theme.base.spacing});\n background: ${bgColor};\n border: 0.0625rem solid transparent;\n width: 100%;\n\n &:hover {\n cursor: pointer;\n ${StyledDragIcon} {\n @keyframes anim {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 10%;\n transition: width ${theme.base.animation.speed};\n }\n ${StyledStageActions} {\n ${css`\n visibility: visible;\n `}\n }\n }\n &:focus-within {\n border: 0.0625rem solid ${theme.base.colors.blue.medium};\n ${!headPointed &&\n css`\n &::after {\n border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n ${rtl\n ? css`\n border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};\n `\n : css`\n border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n `}\n }\n `}\n ${!tailPointed &&\n css`\n &::before {\n border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n ${rtl\n ? css`\n border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n `\n : css`\n border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};\n `}\n }\n `}\n ${StyledDragIcon} {\n ${css`\n @keyframes anim {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 10%;\n transition: width ${theme.base.animation.speed};\n `}\n }\n ${StyledStageActions} {\n ${css`\n visibility: visible;\n `}\n }\n }\n\n ${!headPointed &&\n css`\n &::after {\n ${roundedEndsStyles}\n z-index: 1;\n background: inherit;\n transform: rotateZ(-45deg) skew(-15deg, -15deg);\n inset-inline-end: calc(1.6 * ${theme.base.spacing} * -1);\n border-block-end: 0.0625rem solid transparent;\n ${rtl\n ? css`\n border-radius: calc(0.75 * ${theme.base['border-radius']}) 0.1rem 0.1rem 0.1rem;\n `\n : css`\n border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base['border-radius']})\n 0.0625rem;\n `}\n }\n `}\n\n ${!tailPointed &&\n css`\n &::before {\n ${roundedEndsStyles}\n background: ${theme.base.palette['app-background']};\n transform: rotateZ(45deg) skew(15deg, 15deg);\n inset-inline-start: calc(-1.6 * ${theme.base.spacing});\n ${rtl\n ? css`\n border-block-end: 0.0625rem solid transparent;\n border-radius: 0.0625rem 0 0.0625rem calc(0.75 * ${theme.base['border-radius']});\n `\n : css`\n border-block-start: 0.0625rem solid transparent;\n border-radius: 0.0625rem calc(0.75 * ${theme.base['border-radius']}) 0.0625rem 0;\n `}\n }\n `}\n\n ${StyledInput} {\n ${!status &&\n css`\n border: 0.0625rem solid transparent;\n background: ${bgColor};\n `}\n :hover:not([readonly]):not([disabled]):not(:focus) {\n ${!status &&\n css`\n border: 0.0625rem solid transparent;\n background: ${bgHover};\n `}\n }\n }\n `;\n});\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledInputWrapper = styled.div`\n &:focus-within {\n ${StyledTooltip} {\n ${css`\n display: none;\n `}\n }\n }\n`;\n\nconst Stage: FunctionComponent<StageComponentProps & ForwardProps> = forwardRef(\n (\n {\n value,\n actions,\n variant = 'default',\n headPointed = true,\n tailPointed = true,\n onChange,\n onFocus,\n id,\n item,\n error,\n ...restProps\n }: PropsWithChildren<StageComponentProps>,\n ref: StageComponentProps['ref']\n ) => {\n const [inputEl, setInputEl] = useElement();\n const [stageName, setStageName] = useState(value);\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n setStageName(e.target.value);\n const param: LifeCycleActionParam = {\n value: stageName,\n stage: item\n };\n onChange?.(param, e);\n };\n\n const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n const param: LifeCycleActionParam = {\n value: stageName,\n stage: item\n };\n onFocus?.(param, e);\n };\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement \| HTMLAnchorElement \| HTMLButtonElement>\n ) => {\n const param: LifeCycleActionParam = {\n stage: item\n };\n actions?.forEach((actionItem: LifeCycleAction) => {\n if (actionItem.id === actionId) {\n actionItem.onClick?.(param, e);\n }\n });\n };\n\n /* Deep copy of actions object is required to provide consistent callback objects on actions */\n const actionsClone: Action[] = [];\n\n if (actions) {\n actions.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push(actionCloneItem);\n return actionItem;\n });\n }\n\n return (\n <Flex\n container={{ inline: true }}\n as={StyledStage}\n {...restProps}\n ref={ref}\n variant={variant \|\| 'default'}\n tailPointed={tailPointed}\n headPointed={headPointed}\n status={error}\n role='columnheader'\n >\n <Flex as={StyledWrapper} container={{ inline: true }}>\n <Flex as={StyledDragIcon} error={error}>\n <Icon name='drag' />\n </Flex>\n <Flex container>\n <Flex\n as={StyledInputWrapper}\n item={{ grow: 1 }}\n container={{ inline: true, alignItems: 'center' }}\n >\n <StyledInput\n value={stageName}\n type='text'\n ref={setInputEl}\n error={error}\n id={item.id}\n onChange={onInputChange}\n aria-label={stageName}\n onFocus={onInputFocus}\n />\n {stageName && (\n <Tooltip target={inputEl} hideDelay='none'>\n {error \|\| stageName}\n </Tooltip>\n )}\n </Flex>\n <StyledStageActions error={error}>\n {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n </StyledStageActions>\n </Flex>\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default Stage;\n"]}
1	+ {"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useState,\n forwardRef,\n FunctionComponent,\n PropsWithChildren,\n Ref,\n ChangeEvent,\n FocusEvent,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n BaseProps,\n ForwardProps,\n Actions,\n Icon,\n Tooltip,\n useElement,\n FormControlProps,\n defaultThemeProp,\n useDirection,\n StyledTooltip,\n Action,\n StyledButton\n} from '@pega/cosmos-react-core';\n\nimport {\n LifeCycleAction,\n LifeCycleActionParam,\n StageInfo,\n StageItemProps,\n StageType\n} from './LifeCycle.types';\n\nexport interface StageProps extends Omit<FormControlProps, 'status' \| 'id'> {\n /** Pass an array of Action objects to append button(s) inline with the Input. /\n actions?: Record<StageType, LifeCycleAction[]> \| LifeCycleAction[];\n /* Callback for Add stage /\n onAddStage?: () => void;\n /* Callback for Adding alternate stage /\n onAddAlternateStage?: () => void;\n /* Input Change /\n onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n /* onFocus of input /\n onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n /* onBlur of input /\n onBlur?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n}\n\nexport interface StageComponentProps extends BaseProps, StageProps {\n ref?: Ref<HTMLDivElement>;\n /* Pass text for the task. /\n value: string;\n / unique id of the component /\n id: string;\n /* Controls the styling of the stage. /\n stageInfo: StageInfo;\n /* Full data object which can be passed to the callback /\n item: StageItemProps;\n / The status is used to show the input error status and the info on tooltip in case of error /\n error?: string;\n}\n\nexport const StyledWrapper = styled.div`\n overflow: hidden;\n`;\n\nexport const StyledDragIcon = styled.div<{ error: string }>(({ theme, error }) => {\n return css`\n width: 0%;\n transition: width ${theme.base.animation.speed};\n ${error &&\n css`\n display: block;\n `}\n padding: 0 calc(0.5 ${theme.base.spacing});\n margin: calc(0.5 * ${theme.base.spacing}) 0;\n color: ${theme.base.colors.white};\n text-align: center;\n `;\n});\n\nexport const StyledInput = styled.input<{ error: string \| undefined }>(({ error, theme }) => {\n return css`\n height: ${theme.components.input.height};\n padding: 0 calc(0.5 * ${theme.base.spacing});\n text-overflow: ellipsis;\n border: 0.0625rem solid transparent;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n width: 100%;\n color: ${theme.base.colors.white};\n outline: none;\n &:hover {\n cursor: pointer;\n }\n &:disabled {\n cursor: not-allowed;\n }\n ${error\n ? css`\n background: ${theme.base.colors.red['extra-light']};\n border: 0.0625rem solid ${theme.base.colors.red.medium};\n color: ${theme.base.colors.black};\n `\n : css`\n background: ${theme.base.palette['primary-background']};\n &&:focus:enabled {\n color: ${theme.base.colors.black};\n background: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.colors.blue.medium};\n }\n `}\n `;\n});\n\nexport const StyledStageActions = styled.div<{\n error?: string;\n}>(({ theme, error }) => {\n return css`\n z-index: 2;\n visibility: hidden;\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n\n ${error &&\n css`\n visibility: visible;\n `}\n\n & > ${StyledButton} {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nexport const StyledStage = styled.div<\n Pick<StageComponentProps, 'stageInfo'> & {\n status: boolean;\n }\n>(({ stageInfo, theme, status }) => {\n const {\n visual: { bgColor, bgHover, tailPointed, headPointed }\n } = stageInfo;\n\n const { rtl } = useDirection();\n const roundedEndsStyles = css`\n content: '';\n position: absolute;\n display: block;\n width: calc(3 * ${theme.base.spacing});\n height: calc(3 * ${theme.base.spacing});\n top: calc(1 * ${theme.base.spacing});\n border: 0;\n border-inline-end: 0.0625rem solid transparent;\n `;\n\n return css`\n position: relative;\n padding: calc(0.5 * ${theme.base.spacing});\n background: ${bgColor};\n border: 0.0625rem solid transparent;\n width: 100%;\n\n &:hover {\n cursor: pointer;\n ${StyledDragIcon} {\n @keyframes anim {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 10%;\n transition: width ${theme.base.animation.speed};\n }\n ${StyledStageActions} {\n ${css`\n visibility: visible;\n `}\n }\n }\n &:focus-within {\n border: 0.0625rem solid ${theme.base.colors.blue.medium};\n ${headPointed &&\n css`\n &::after {\n border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n ${rtl\n ? css`\n border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};\n `\n : css`\n border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n `}\n }\n `}\n ${tailPointed &&\n css`\n &::before {\n border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n ${rtl\n ? css`\n border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n `\n : css`\n border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};\n `}\n }\n `}\n ${StyledDragIcon} {\n ${css`\n @keyframes anim {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 10%;\n transition: width ${theme.base.animation.speed};\n `}\n }\n ${StyledStageActions} {\n ${css`\n visibility: visible;\n `}\n }\n }\n\n ${headPointed &&\n css`\n &::after {\n ${roundedEndsStyles}\n z-index: 1;\n background: inherit;\n transform: rotateZ(-45deg) skew(-15deg, -15deg);\n inset-inline-end: calc(1.6 * ${theme.base.spacing} * -1);\n border-block-end: 0.0625rem solid transparent;\n ${rtl\n ? css`\n border-radius: calc(0.75 * ${theme.base['border-radius']}) 0.1rem 0.1rem 0.1rem;\n `\n : css`\n border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base['border-radius']})\n 0.0625rem;\n `}\n }\n `}\n\n ${tailPointed &&\n css`\n &::before {\n ${roundedEndsStyles}\n background: ${theme.base.palette['app-background']};\n transform: rotateZ(45deg) skew(15deg, 15deg);\n inset-inline-start: calc(-1.6 * ${theme.base.spacing});\n ${rtl\n ? css`\n border-block-end: 0.0625rem solid transparent;\n border-radius: 0.0625rem 1rem 0.0625rem calc(0.75 * ${theme.base['border-radius']});\n `\n : css`\n border-block-start: 0.0625rem solid transparent;\n border-radius: 0.0625rem calc(0.75 * ${theme.base['border-radius']}) 0.0625rem 1rem;\n `}\n }\n `}\n\n ${StyledInput} {\n ${!status &&\n css`\n border: 0.0625rem solid transparent;\n background: ${bgColor};\n `}\n :hover:not([readonly]):not([disabled]):not(:focus) {\n ${!status &&\n css`\n border: 0.0625rem solid transparent;\n background: ${bgHover};\n `}\n }\n }\n `;\n});\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledInputWrapper = styled.div`\n &:focus-within {\n ${StyledTooltip} {\n ${css`\n display: none;\n `}\n }\n }\n`;\n\nconst Stage: FunctionComponent<StageComponentProps & ForwardProps> = forwardRef(\n (\n {\n value,\n actions,\n stageInfo,\n onChange,\n onFocus,\n onBlur,\n id,\n item,\n error,\n ...restProps\n }: PropsWithChildren<StageComponentProps>,\n ref: StageComponentProps['ref']\n ) => {\n const [inputEl, setInputEl] = useElement();\n const [stageName, setStageName] = useState(value);\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n setStageName(e.target.value);\n const param: LifeCycleActionParam = {\n value: e.target.value,\n stage: item\n };\n onChange?.(param, e);\n };\n\n const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n const param: LifeCycleActionParam = {\n value: stageName,\n stage: item\n };\n onFocus?.(param, e);\n };\n\n const onInputBlur = (e: FocusEvent<HTMLInputElement>) => {\n setStageName(e.target.value);\n const param: LifeCycleActionParam = {\n value: e.target.value,\n stage: item\n };\n onBlur?.(param, e);\n };\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement \| HTMLAnchorElement \| HTMLButtonElement>\n ) => {\n const param: LifeCycleActionParam = {\n stage: item\n };\n\n if (actions) {\n let actionsList: LifeCycleAction[] = [];\n\n if (Array.isArray(actions)) {\n actionsList = actions;\n } else {\n actionsList = actions[item.type];\n }\n\n actionsList?.forEach((actionItem: LifeCycleAction) => {\n if (actionItem.id === actionId) {\n actionItem.onClick?.(param, e);\n }\n });\n }\n };\n\n /* Deep copy of actions object is required to provide consistent callback objects on actions */\n const actionsClone: Action[] = [];\n\n if (actions) {\n let actionsList: LifeCycleAction[] = [];\n if (Array.isArray(actions)) {\n actionsList = actions;\n } else {\n actionsList = actions[item.type];\n }\n\n actionsList.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push(actionCloneItem);\n return actionItem;\n });\n }\n\n return (\n <Flex\n container={{ inline: true }}\n as={StyledStage}\n {...restProps}\n ref={ref}\n stageInfo={stageInfo}\n status={error}\n role='columnheader'\n >\n <Flex as={StyledWrapper} container={{ inline: true }}>\n <Flex as={StyledDragIcon} error={error}>\n <Icon name='drag' />\n </Flex>\n <Flex container>\n <Flex\n as={StyledInputWrapper}\n item={{ grow: 1 }}\n container={{ inline: true, alignItems: 'center' }}\n >\n <StyledInput\n value={stageName}\n type='text'\n ref={setInputEl}\n error={error}\n id={item.id}\n onChange={onInputChange}\n aria-label={stageName}\n onFocus={onInputFocus}\n onBlur={onInputBlur}\n />\n {stageName && (\n <Tooltip target={inputEl} hideDelay='none'>\n {error \|\| stageName}\n </Tooltip>\n )}\n </Flex>\n <StyledStageActions error={error}>\n {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n </StyledStageActions>\n </Flex>\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default Stage;\n"]}

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

@@ -8,6 +8,8 @@ export interface StepProps extends Omit<FormControlProps, 'status' | 'id'> {
     onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;
     /** callback for Focus of input */
     onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
+    /** callback for Blur of input */
+    onBlur?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
 }
 interface StepComponentProps extends BaseProps, StepProps {
     /** Pass text for the step. */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,WAAW,EACX,UAAU,EAEX,MAAM,OAAO,CAAC;AAIf,OAAO,EAGL,SAAS,EACT,YAAY,EAKZ,gBAAgB,EAMjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxE,iFAAiF;IACjF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,mBAAmB;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;~~CAClF~~;AAED,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;oDAEgD;IAChD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EACD,SAAS,GACT,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IAEF,KAAK,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAEhC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC;IAC1B,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;CACjC;AAED,eAAO,MAAM,cAAc;WAAuB,MAAM;SAAO,cAAc;SAAO,MAAM;SAgDzF,CAAC;AAEF,eAAO,MAAM,eAAe,yGAY1B,CAAC;AAYH,eAAO,MAAM,oBAAoB;WAAyB,MAAM,GAAG,SAAS;SAoC3E,CAAC;AAEF,eAAO,MAAM,gBAAgB;WACpB,MAAM;WACN,MAAM;SAqBb,CAAC;AAEH,eAAO,MAAM,UAAU;WAAuB,MAAM;SAkDlD,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,~~CA6H9D~~,CAAC;AAEF,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,WAAW,EACX,UAAU,EAEX,MAAM,OAAO,CAAC;AAIf,OAAO,EAGL,SAAS,EACT,YAAY,EAKZ,gBAAgB,EAMjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxE,iFAAiF;IACjF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,mBAAmB;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjF,iCAAiC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACjF;AAED,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;oDAEgD;IAChD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EACD,SAAS,GACT,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IAEF,KAAK,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAEhC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC;IAC1B,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;CACjC;AAED,eAAO,MAAM,cAAc;WAAuB,MAAM;SAAO,cAAc;SAAO,MAAM;SAgDzF,CAAC;AAEF,eAAO,MAAM,eAAe,yGAY1B,CAAC;AAYH,eAAO,MAAM,oBAAoB;WAAyB,MAAM,GAAG,SAAS;SAoC3E,CAAC;AAEF,eAAO,MAAM,gBAAgB;WACpB,MAAM;WACN,MAAM;SAqBb,CAAC;AAEH,eAAO,MAAM,UAAU;WAAuB,MAAM;SAkDlD,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA0I9D,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -178,7 +178,7 @@ export const StyledStep = styled.div(({ theme, error }) => {
   `;
 });
 StyledStep.defaultProps = defaultThemeProp;
-const Step = ({ value, id, visual, actions, badge, error, onChange, categoryItem, item, stageItem, taskItem, onFocus, ...restProps }) => {
+const Step = ({ value, id, visual, actions, badge, error, onChange, categoryItem, item, stageItem, taskItem, onFocus, onBlur, ...restProps }) => {
     const t = useI18n();
     const [stepValue, setStepValue] = useState(value);
     const [iconEl, setIconEl] = useElement();
@@ -235,7 +235,17 @@ const Step = ({ value, id, visual, actions, badge, error, onChange, categoryItem
         };
         onFocus?.(actionParam, e);
     };
-    return (_jsxs(Flex, { as: StyledStep, container: { inline: true }, error: error, children: [_jsxs(Flex, { as: StyledStepType, color: visual.color, ref: setIconEl, img: visual.imgurl, children: [visual.imgurl.length > 0 && (_jsx(Avatar, { name: visual.title || '', imageSrc: visual?.imgurl, shape: 'squircle', size: 'm' }, void 0)), !visual.imgurl && _jsx(Icon, { name: visual.icon }, void 0)] }, void 0), _jsx(Tooltip, { target: iconEl, children: visual.title }, void 0), _jsxs(Flex, { as: StyledStepValue, item: { grow: 2 }, error: error, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledStepValueInput, { value: stepValue, type: 'text', ref: setInputEl, error: error, onChange: onInputChange, "aria-label": stepValue, id: item.id, ...restProps, onFocus: onInputFocus }, void 0), badge?.type && (_jsx(Flex, { as: StyledStepBadge, container: { inline: true, alignItems: 'center' }, children: _jsx(Status, { variant: badge?.type || 'success', children: badge?.label }, void 0) }, void 0))] }, void 0), _jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || tooltipValue || 'test' }, void 0), _jsx(Flex, { as: StyledStepStatus, ref: setActionEl, badge: badge?.type, error: error, children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0) }, void 0), _jsx(Tooltip, { target: actionEl, "aria-hidden": 'true', children: actions && actions?.length > 1 ? actionsLabel : singleActionLabel }, void 0)] }, void 0));
+    const onInputBlur = (e) => {
+        const actionParam = {
+            value: e.target.value,
+            step: item,
+            task: taskItem,
+            category: categoryItem,
+            stage: stageItem
+        };
+        onBlur?.(actionParam, e);
+    };
+    return (_jsxs(Flex, { as: StyledStep, container: { inline: true }, error: error, children: [_jsxs(Flex, { as: StyledStepType, color: visual.color, ref: setIconEl, img: visual.imgurl, children: [visual.imgurl.length > 0 && (_jsx(Avatar, { name: visual.title || '', imageSrc: visual?.imgurl, shape: 'squircle', size: 'm' }, void 0)), !visual.imgurl && _jsx(Icon, { name: visual.icon }, void 0)] }, void 0), _jsx(Tooltip, { target: iconEl, children: visual.title }, void 0), _jsxs(Flex, { as: StyledStepValue, item: { grow: 2 }, error: error, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledStepValueInput, { value: stepValue, type: 'text', ref: setInputEl, error: error, onChange: onInputChange, "aria-label": stepValue, id: item.id, ...restProps, onFocus: onInputFocus, onBlur: onInputBlur }, void 0), badge?.type && (_jsx(Flex, { as: StyledStepBadge, container: { inline: true, alignItems: 'center' }, children: _jsx(Status, { variant: badge?.type || 'success', children: badge?.label }, void 0) }, void 0))] }, void 0), _jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || tooltipValue || 'test' }, void 0), _jsx(Flex, { as: StyledStepStatus, ref: setActionEl, badge: badge?.type, error: error, children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0) }, void 0), _jsx(Tooltip, { target: actionEl, "aria-hidden": 'true', children: actions && actions?.length > 1 ? actionsLabel : singleActionLabel }, void 0)] }, void 0));
 };
 export default Step;
 //# sourceMappingURL=Step.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useState,\n FunctionComponent,\n PropsWithoutRef,\n ChangeEvent,\n FocusEvent,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Flex,\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Icon,\n Tooltip,\n useElement,\n Status,\n FormControlProps,\n Actions,\n useI18n,\n Avatar,\n StyledTooltip,\n Action\n} from '@pega/cosmos-react-core';\n\nimport {\n TaskItemProps,\n StepItemProps,\n StageItemProps,\n CategoryItemProps,\n LifeCycleAction,\n LifeCycleActionParam\n} from './LifeCycle.types';\n\nexport interface StepProps extends Omit<FormControlProps, 'status' \| 'id'> {\n /** Pass an array of Action objects to append button(s) inline with the Input. /\n actions?: LifeCycleAction[];\n /* Input Change /\n onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n /* callback for Focus of input /\n onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n}\n\ninterface StepComponentProps extends BaseProps, StepProps {\n /* Pass text for the step. /\n value?: string;\n /* step data id /\n id?: string;\n /* Determines the visual for icon, color and label to render.\n * This color is passed as a variant and accessible colors are used to display.\n * Icon and label are passed as normal string /\n visual: {\n imgurl: string;\n color:\n \| 'magenta'\n \| 'studio'\n \| 'congressBlue'\n \| 'Japaneselaurel'\n \| 'violet'\n \| 'yellow'\n \| 'orange'\n \| 'darkyellow';\n icon: string;\n title: string;\n };\n / Determines the variant and label for the badges /\n badge?: StepItemProps['status'];\n / The status is used to show the input error status and the info on tooltip in case of error /\n error?: string;\n / Data of the steps which can be used to send the full info back /\n item: StepItemProps;\n stageItem: StageItemProps;\n taskItem: TaskItemProps;\n categoryItem: CategoryItemProps;\n}\n\nexport const StyledStepType = styled.div<{ color: string; ref: HTMLDivElement; img: string }>(\n ({ theme, color, img }) => {\n let bgColor = '';\n switch (color) {\n case 'magenta':\n bgColor = '#AC1361';\n break;\n case 'studio':\n bgColor = '#684AAE';\n break;\n case 'congressBlue':\n bgColor = '#0076d1';\n break;\n case 'Japaneselaurel':\n bgColor = '#27813E';\n break;\n case 'violet':\n bgColor = '#8C479F';\n break;\n case 'yellow':\n bgColor = '#f7a801';\n break;\n case 'darkyellow':\n bgColor = '#f7951c';\n break;\n case 'orange':\n bgColor = '#f46c22';\n break;\n\n default:\n bgColor = '#27813E';\n }\n\n const contrastColor = readableColor(bgColor);\n return img\n ? css`\n height: 2rem;\n padding-inline-end: calc(0.25 ${theme.base.spacing});\n `\n : css`\n background: ${bgColor};\n margin: calc(0.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n color: ${contrastColor};\n text-align: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n `;\n }\n);\n\nexport const StyledStepBadge = styled.div(({ theme }) => {\n return css`\n padding: 0 calc(0.5 * ${theme.base.spacing});\n justify-content: flex-end;\n width: auto;\n max-width: calc(50% - ${theme.base.spacing});\n > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n `;\n});\n\nconst StyledStepValue = styled.div<{ error: string }>(({ theme, error }) => {\n return css`\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n ${error &&\n css`\n background: ${theme.base.colors.red['extra-light']};\n `}\n `;\n});\n\nexport const StyledStepValueInput = styled.input<{ error: string \| undefined }>(\n ({ error, theme }) => {\n return css`\n height: ${theme.components.input.height};\n padding: 0 calc(0.5 * ${theme.base.spacing});\n border: none;\n border-inline-start: 0.0625rem solid transparent;\n border-inline-end: 0.0625rem solid transparent;\n text-overflow: ellipsis;\n min-width: 40%;\n outline: none;\n &:hover {\n cursor: pointer;\n }\n &:disabled {\n cursor: not-allowed;\n }\n ${error\n ? css`\n background: ${theme.base.colors.red['extra-light']};\n &:focus:enabled {\n border-color: ${theme.base.colors.red.medium};\n }\n `\n : css`\n background: ${theme.base.palette['secondary-background']};\n &&:hover {\n background: ${theme.base.palette['app-background']};\n }\n &&:focus:enabled {\n background: ${theme.base.palette['primary-background']};\n border-color: ${theme.base.colors.blue.medium};\n }\n `}\n `;\n }\n);\n\nexport const StyledStepStatus = styled.div<{\n badge: string;\n error: string;\n}>(({ theme, badge, error }) => {\n return css`\n border: none;\n ${badge &&\n css`\n display: none;\n `}\n visibility: hidden;\n &:hover {\n cursor: pointer;\n }\n &:focus:not([disabled]) {\n outline: 0.0625rem solid ${theme.base.colors.blue.medium};\n }\n ${error &&\n !badge &&\n css`\n visibility: visible;\n `}\n `;\n});\n\nexport const StyledStep = styled.div<{ error: string }>(({ theme, error }) => {\n return css`\n background: ${theme.base.palette['secondary-background']};\n border: 0.0625rem solid transparent;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n margin: 0 0 calc(0.5 * ${theme.base.spacing});\n width: 100%;\n ${error &&\n css`\n border-color: ${theme.base.colors.red.medium};\n box-shadow: none;\n `}\n &:hover {\n cursor: pointer;\n ${StyledStepBadge} {\n ${css`\n display: none;\n `}\n }\n ${StyledStepStatus} {\n ${css`\n visibility: visible;\n display: inline-block;\n `}\n }\n }\n &:focus-within {\n ${!error &&\n css`\n border-color: ${theme.base.colors.blue.medium};\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n `}\n ${StyledStepBadge} {\n ${css`\n display: none;\n `}\n }\n ${StyledStepStatus} {\n ${css`\n display: inline-block;\n visibility: visible;\n `}\n }\n ${StyledTooltip} {\n ${css`\n visibility: hidden;\n `}\n }\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nconst Step: FunctionComponent<StepComponentProps & ForwardProps> = ({\n value,\n id,\n visual,\n actions,\n badge,\n error,\n onChange,\n categoryItem,\n item,\n stageItem,\n taskItem,\n onFocus,\n ...restProps\n}: PropsWithoutRef<StepComponentProps>) => {\n const t = useI18n();\n const [stepValue, setStepValue] = useState(value);\n const [iconEl, setIconEl] = useElement();\n const [actionEl, setActionEl] = useElement();\n const [inputEl, setInputEl] = useElement();\n const actionsLabel = t('actions');\n const singleActionLabel = (actions?.[0]?.text as string) ?? '';\n const tooltipValue = stepValue \|\| error;\n\n /* Need to check the value with statusProps /\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement \| HTMLAnchorElement \| HTMLButtonElement>\n ) => {\n const param: LifeCycleActionParam = {\n task: taskItem,\n stage: stageItem,\n step: item,\n category: categoryItem\n };\n actions?.forEach(actionItem => {\n if (actionItem.id === actionId) {\n actionItem.onClick(param, e);\n }\n });\n };\n / Deep copy of actions is required to provide consistent callback objects on actions */\n const actionsClone: Action[] = [];\n\n if (actions) {\n actions.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push(actionCloneItem);\n return actionItem;\n });\n }\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n setStepValue(e.target.value);\n const actionParam: LifeCycleActionParam = {\n value: e.target.value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem\n };\n onChange?.(actionParam, e);\n };\n\n const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n const actionParam: LifeCycleActionParam = {\n value: e.target.value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem\n };\n onFocus?.(actionParam, e);\n };\n\n return (\n <Flex as={StyledStep} container={{ inline: true }} error={error}>\n <Flex as={StyledStepType} color={visual.color} ref={setIconEl} img={visual.imgurl}>\n {visual.imgurl.length > 0 && (\n <Avatar name={visual.title \|\| ''} imageSrc={visual?.imgurl} shape='squircle' size='m' />\n )}\n {!visual.imgurl && <Icon name={visual.icon} />}\n </Flex>\n\n <Tooltip target={iconEl}>{visual.title}</Tooltip>\n\n <Flex\n as={StyledStepValue}\n item={{ grow: 2 }}\n error={error}\n container={{ inline: true, alignItems: 'center' }}\n >\n <StyledStepValueInput\n value={stepValue}\n type='text'\n ref={setInputEl}\n error={error}\n onChange={onInputChange}\n aria-label={stepValue}\n id={item.id}\n {...restProps}\n onFocus={onInputFocus}\n />\n {badge?.type && (\n <Flex as={StyledStepBadge} container={{ inline: true, alignItems: 'center' }}>\n <Status variant={badge?.type \|\| 'success'}>{badge?.label}</Status>\n </Flex>\n )}\n </Flex>\n <Tooltip target={inputEl} hideDelay='none'>\n {error \|\| tooltipValue \|\| 'test'}\n </Tooltip>\n <Flex as={StyledStepStatus} ref={setActionEl} badge={badge?.type} error={error}>\n {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n </Flex>\n <Tooltip target={actionEl} aria-hidden='true'>\n {actions && actions?.length > 1 ? actionsLabel : singleActionLabel}\n </Tooltip>\n </Flex>\n );\n};\n\nexport default Step;\n"]}
1	+ {"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useState,\n FunctionComponent,\n PropsWithoutRef,\n ChangeEvent,\n FocusEvent,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Flex,\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Icon,\n Tooltip,\n useElement,\n Status,\n FormControlProps,\n Actions,\n useI18n,\n Avatar,\n StyledTooltip,\n Action\n} from '@pega/cosmos-react-core';\n\nimport {\n TaskItemProps,\n StepItemProps,\n StageItemProps,\n CategoryItemProps,\n LifeCycleAction,\n LifeCycleActionParam\n} from './LifeCycle.types';\n\nexport interface StepProps extends Omit<FormControlProps, 'status' \| 'id'> {\n /** Pass an array of Action objects to append button(s) inline with the Input. /\n actions?: LifeCycleAction[];\n /* Input Change /\n onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n /* callback for Focus of input /\n onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n /* callback for Blur of input /\n onBlur?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n}\n\ninterface StepComponentProps extends BaseProps, StepProps {\n /* Pass text for the step. /\n value?: string;\n /* step data id /\n id?: string;\n /* Determines the visual for icon, color and label to render.\n * This color is passed as a variant and accessible colors are used to display.\n * Icon and label are passed as normal string /\n visual: {\n imgurl: string;\n color:\n \| 'magenta'\n \| 'studio'\n \| 'congressBlue'\n \| 'Japaneselaurel'\n \| 'violet'\n \| 'yellow'\n \| 'orange'\n \| 'darkyellow';\n icon: string;\n title: string;\n };\n / Determines the variant and label for the badges /\n badge?: StepItemProps['status'];\n / The status is used to show the input error status and the info on tooltip in case of error /\n error?: string;\n / Data of the steps which can be used to send the full info back /\n item: StepItemProps;\n stageItem: StageItemProps;\n taskItem: TaskItemProps;\n categoryItem: CategoryItemProps;\n}\n\nexport const StyledStepType = styled.div<{ color: string; ref: HTMLDivElement; img: string }>(\n ({ theme, color, img }) => {\n let bgColor = '';\n switch (color) {\n case 'magenta':\n bgColor = '#AC1361';\n break;\n case 'studio':\n bgColor = '#684AAE';\n break;\n case 'congressBlue':\n bgColor = '#0076d1';\n break;\n case 'Japaneselaurel':\n bgColor = '#27813E';\n break;\n case 'violet':\n bgColor = '#8C479F';\n break;\n case 'yellow':\n bgColor = '#f7a801';\n break;\n case 'darkyellow':\n bgColor = '#f7951c';\n break;\n case 'orange':\n bgColor = '#f46c22';\n break;\n\n default:\n bgColor = '#27813E';\n }\n\n const contrastColor = readableColor(bgColor);\n return img\n ? css`\n height: 2rem;\n padding-inline-end: calc(0.25 ${theme.base.spacing});\n `\n : css`\n background: ${bgColor};\n margin: calc(0.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n color: ${contrastColor};\n text-align: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n `;\n }\n);\n\nexport const StyledStepBadge = styled.div(({ theme }) => {\n return css`\n padding: 0 calc(0.5 * ${theme.base.spacing});\n justify-content: flex-end;\n width: auto;\n max-width: calc(50% - ${theme.base.spacing});\n > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n `;\n});\n\nconst StyledStepValue = styled.div<{ error: string }>(({ theme, error }) => {\n return css`\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n ${error &&\n css`\n background: ${theme.base.colors.red['extra-light']};\n `}\n `;\n});\n\nexport const StyledStepValueInput = styled.input<{ error: string \| undefined }>(\n ({ error, theme }) => {\n return css`\n height: ${theme.components.input.height};\n padding: 0 calc(0.5 * ${theme.base.spacing});\n border: none;\n border-inline-start: 0.0625rem solid transparent;\n border-inline-end: 0.0625rem solid transparent;\n text-overflow: ellipsis;\n min-width: 40%;\n outline: none;\n &:hover {\n cursor: pointer;\n }\n &:disabled {\n cursor: not-allowed;\n }\n ${error\n ? css`\n background: ${theme.base.colors.red['extra-light']};\n &:focus:enabled {\n border-color: ${theme.base.colors.red.medium};\n }\n `\n : css`\n background: ${theme.base.palette['secondary-background']};\n &&:hover {\n background: ${theme.base.palette['app-background']};\n }\n &&:focus:enabled {\n background: ${theme.base.palette['primary-background']};\n border-color: ${theme.base.colors.blue.medium};\n }\n `}\n `;\n }\n);\n\nexport const StyledStepStatus = styled.div<{\n badge: string;\n error: string;\n}>(({ theme, badge, error }) => {\n return css`\n border: none;\n ${badge &&\n css`\n display: none;\n `}\n visibility: hidden;\n &:hover {\n cursor: pointer;\n }\n &:focus:not([disabled]) {\n outline: 0.0625rem solid ${theme.base.colors.blue.medium};\n }\n ${error &&\n !badge &&\n css`\n visibility: visible;\n `}\n `;\n});\n\nexport const StyledStep = styled.div<{ error: string }>(({ theme, error }) => {\n return css`\n background: ${theme.base.palette['secondary-background']};\n border: 0.0625rem solid transparent;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n margin: 0 0 calc(0.5 * ${theme.base.spacing});\n width: 100%;\n ${error &&\n css`\n border-color: ${theme.base.colors.red.medium};\n box-shadow: none;\n `}\n &:hover {\n cursor: pointer;\n ${StyledStepBadge} {\n ${css`\n display: none;\n `}\n }\n ${StyledStepStatus} {\n ${css`\n visibility: visible;\n display: inline-block;\n `}\n }\n }\n &:focus-within {\n ${!error &&\n css`\n border-color: ${theme.base.colors.blue.medium};\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n `}\n ${StyledStepBadge} {\n ${css`\n display: none;\n `}\n }\n ${StyledStepStatus} {\n ${css`\n display: inline-block;\n visibility: visible;\n `}\n }\n ${StyledTooltip} {\n ${css`\n visibility: hidden;\n `}\n }\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nconst Step: FunctionComponent<StepComponentProps & ForwardProps> = ({\n value,\n id,\n visual,\n actions,\n badge,\n error,\n onChange,\n categoryItem,\n item,\n stageItem,\n taskItem,\n onFocus,\n onBlur,\n ...restProps\n}: PropsWithoutRef<StepComponentProps>) => {\n const t = useI18n();\n const [stepValue, setStepValue] = useState(value);\n const [iconEl, setIconEl] = useElement();\n const [actionEl, setActionEl] = useElement();\n const [inputEl, setInputEl] = useElement();\n const actionsLabel = t('actions');\n const singleActionLabel = (actions?.[0]?.text as string) ?? '';\n const tooltipValue = stepValue \|\| error;\n\n /* Need to check the value with statusProps /\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement \| HTMLAnchorElement \| HTMLButtonElement>\n ) => {\n const param: LifeCycleActionParam = {\n task: taskItem,\n stage: stageItem,\n step: item,\n category: categoryItem\n };\n actions?.forEach(actionItem => {\n if (actionItem.id === actionId) {\n actionItem.onClick(param, e);\n }\n });\n };\n / Deep copy of actions is required to provide consistent callback objects on actions */\n const actionsClone: Action[] = [];\n\n if (actions) {\n actions.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push(actionCloneItem);\n return actionItem;\n });\n }\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n setStepValue(e.target.value);\n const actionParam: LifeCycleActionParam = {\n value: e.target.value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem\n };\n onChange?.(actionParam, e);\n };\n\n const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n const actionParam: LifeCycleActionParam = {\n value: e.target.value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem\n };\n onFocus?.(actionParam, e);\n };\n\n const onInputBlur = (e: FocusEvent<HTMLInputElement>) => {\n const actionParam: LifeCycleActionParam = {\n value: e.target.value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem\n };\n onBlur?.(actionParam, e);\n };\n\n return (\n <Flex as={StyledStep} container={{ inline: true }} error={error}>\n <Flex as={StyledStepType} color={visual.color} ref={setIconEl} img={visual.imgurl}>\n {visual.imgurl.length > 0 && (\n <Avatar name={visual.title \|\| ''} imageSrc={visual?.imgurl} shape='squircle' size='m' />\n )}\n {!visual.imgurl && <Icon name={visual.icon} />}\n </Flex>\n\n <Tooltip target={iconEl}>{visual.title}</Tooltip>\n\n <Flex\n as={StyledStepValue}\n item={{ grow: 2 }}\n error={error}\n container={{ inline: true, alignItems: 'center' }}\n >\n <StyledStepValueInput\n value={stepValue}\n type='text'\n ref={setInputEl}\n error={error}\n onChange={onInputChange}\n aria-label={stepValue}\n id={item.id}\n {...restProps}\n onFocus={onInputFocus}\n onBlur={onInputBlur}\n />\n {badge?.type && (\n <Flex as={StyledStepBadge} container={{ inline: true, alignItems: 'center' }}>\n <Status variant={badge?.type \|\| 'success'}>{badge?.label}</Status>\n </Flex>\n )}\n </Flex>\n <Tooltip target={inputEl} hideDelay='none'>\n {error \|\| tooltipValue \|\| 'test'}\n </Tooltip>\n <Flex as={StyledStepStatus} ref={setActionEl} badge={badge?.type} error={error}>\n {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n </Flex>\n <Tooltip target={actionEl} aria-hidden='true'>\n {actions && actions?.length > 1 ? actionsLabel : singleActionLabel}\n </Tooltip>\n </Flex>\n );\n};\n\nexport default Step;\n"]}

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

@@ -17,6 +17,8 @@ export interface TaskProps extends Omit<FormControlProps, 'status' | 'id'> {
     onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;
     /** callback for Focus of input */
     onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
+    /** callback for Blur of input */
+    onBlur?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
 }
 interface TaskComponentProps extends BaseProps, TaskProps {
     /** Pass text for the task. */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Task.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,WAAW,EACX,UAAU,EAEX,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,SAAS,EACT,YAAY,EAOZ,gBAAgB,EAIjB,MAAM,yBAAyB,CAAC;AAEjC,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EACL,aAAa,EACb,cAAc,EAEd,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxE,iFAAiF;IACjF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,qDAAqD;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;IACF,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;~~CAClF~~;AAED,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,qBAAqB;IACrB,IAAI,EAAE,aAAa,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wCAAwC;IACxC,SAAS,EAAE,cAAc,CAAC;IAC1B,2CAA2C;IAC3C,YAAY,EAAE,iBAAiB,CAAC;IAChC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,wGAQzB,CAAC;AAEH,eAAO,MAAM,gBAAgB,4GAK3B,CAAC;AAGH,eAAO,MAAM,iBAAiB,yGAI5B,CAAC;AAGH,eAAO,MAAM,WAAW;WAAyB,MAAM,GAAG,SAAS;SA+BjE,CAAC;AAGH,eAAO,MAAM,iBAAiB;SACvB,cAAc;WACZ,MAAM;SAoBb,CAAC;AAGH,eAAO,MAAM,UAAU,6GAoBrB,CAAC;AAGH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,~~CAqK9D~~,CAAC;AAEF,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Task.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,WAAW,EACX,UAAU,EAEX,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,SAAS,EACT,YAAY,EAOZ,gBAAgB,EAIjB,MAAM,yBAAyB,CAAC;AAEjC,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EACL,aAAa,EACb,cAAc,EAEd,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxE,iFAAiF;IACjF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,qDAAqD;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;IACF,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjF,iCAAiC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACjF;AAED,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,qBAAqB;IACrB,IAAI,EAAE,aAAa,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wCAAwC;IACxC,SAAS,EAAE,cAAc,CAAC;IAC1B,2CAA2C;IAC3C,YAAY,EAAE,iBAAiB,CAAC;IAChC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,wGAQzB,CAAC;AAEH,eAAO,MAAM,gBAAgB,4GAK3B,CAAC;AAGH,eAAO,MAAM,iBAAiB,yGAI5B,CAAC;AAGH,eAAO,MAAM,WAAW;WAAyB,MAAM,GAAG,SAAS;SA+BjE,CAAC;AAGH,eAAO,MAAM,iBAAiB;SACvB,cAAc;WACZ,MAAM;SAoBb,CAAC;AAGH,eAAO,MAAM,UAAU,6GAoBrB,CAAC;AAGH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiL9D,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -110,7 +110,7 @@ export const StyledInputWrapper = styled.div `
     }
   }
 `;
-const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem, error, onAddStep, onChange, onFocus, categoryItem, id, step: stepProp, ...restProps }) => {
+const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem, error, onAddStep, onChange, onFocus, onBlur, categoryItem, id, step: stepProp, ...restProps }) => {
     const t = useI18n();
     const [taskValue, setTaskValue] = useState(value);
     const [actionEl, setActionEl] = useElement();
@@ -146,7 +146,7 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
     const onInputChange = (e) => {
         setTaskValue(e.target.value);
         const param = {
-            value: taskValue,
+            value: e.target.value,
             task: item,
             stage: stageItem,
             category: categoryItem
@@ -162,6 +162,15 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
         };
         onFocus?.(param, e);
     };
+    const onInputBlur = (e) => {
+        const param = {
+            value: taskValue,
+            task: item,
+            stage: stageItem,
+            category: categoryItem
+        };
+        onBlur?.(param, e);
+    };
     const onAddStepClick = (e) => {
         const param = {
             task: item,
@@ -170,7 +179,7 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
         };
         onAddStep?.(param, e);
     };
-    return (_jsx(Flex, { as: StyledTaskList, ...restProps, children: _jsxs(Flex, { as: StyledTask, container: { direction: 'column' }, role: 'region', children: [_jsxs(Flex, { as: StyledCardHeader, container: { itemGap: 0.4 }, children: [visual?.imgurl.length > 0 && _jsx(Avatar, { name: taskValue || '', imageSrc: visual?.imgurl }, void 0), _jsxs(Flex, { item: { grow: 1 }, as: StyledInputWrapper, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledInput, { value: taskValue, type: 'text', onChange: onInputChange, ref: setInputEl, error: error, id: item.id, "aria-labelledby": categoryItem.categoryId, onFocus: onInputFocus }, void 0), taskValue && (_jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || taskValue }, void 0))] }, void 0), _jsxs(Flex, { as: StyledTaskActions, ref: setActionEl, error: error, children: [actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0), _jsx(Tooltip, { target: actionEl, "aria-hidden": 'true', children: actions && actions?.length > 1 ? actionsLabel : singleActionLabel }, void 0)] }, void 0)] }, void 0), _jsxs(Flex, { as: StyledCardContent, children: [item?.steps.map((steps) => {
+    return (_jsx(Flex, { as: StyledTaskList, ...restProps, children: _jsxs(Flex, { as: StyledTask, container: { direction: 'column' }, role: 'region', children: [_jsxs(Flex, { as: StyledCardHeader, container: { itemGap: 0.4 }, children: [visual?.imgurl.length > 0 && _jsx(Avatar, { name: taskValue || '', imageSrc: visual?.imgurl }, void 0), _jsxs(Flex, { item: { grow: 1 }, as: StyledInputWrapper, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledInput, { value: taskValue, type: 'text', onChange: onInputChange, ref: setInputEl, error: error, id: item.id, "aria-labelledby": categoryItem.categoryId, onFocus: onInputFocus, onBlur: onInputBlur }, void 0), taskValue && (_jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || taskValue }, void 0))] }, void 0), _jsxs(Flex, { as: StyledTaskActions, ref: setActionEl, error: error, children: [actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0), _jsx(Tooltip, { target: actionEl, "aria-hidden": 'true', children: actions && actions?.length > 1 ? actionsLabel : singleActionLabel }, void 0)] }, void 0)] }, void 0), _jsxs(Flex, { as: StyledCardContent, children: [item?.steps.map((steps) => {
                             const badgeStatus = steps?.status?.type ? steps.status.type : '';
                             const badgeLabel = steps?.status?.label ? steps.status.label : '';
                             return (_jsx(Step, { id: steps.id, value: steps.label, visual: {