@pega/cosmos-react-build 3.0.0-dev.9.1 → 3.0.0-rc.10

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

@@ -1 +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\nimport { ColorName } from '../../utils';\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: ColorName;\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"]}
+{"version":3,"file":"LifeCycle.types.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent, Ref } from 'react';\n\nimport {\n  Action,\n  StatusProps,\n  WorkTheme as Theme,\n  NoChildrenProp,\n  BaseProps,\n  FormControlProps\n} from '@pega/cosmos-react-core';\n\nimport { ColorName } from '../../utils';\nimport { LibraryItem } from '../ItemLibrary';\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: ColorName;\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  /* id to map with category items */\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 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  /** callback for Click of stage */\n  onClick?: (param: LifeCycleActionParam, e: MouseEvent) => void;\n}\n\nexport interface CategoriesProps extends CategoriesItemProps {\n  /* height property used to manipulate height of catergory dom */\n  height?: number;\n  elementId?: string;\n}\n\nexport interface CategoryProps extends BaseProps, NoChildrenProp {\n  ref?: Ref<HTMLOListElement>;\n  /* Pass the category items */\n  item: CategoryItemProps;\n  /* Enable the title for categories */\n  showTitle?: boolean;\n  /* Props of the categoryColumn */\n  category?: CategoriesProps;\n  /** Task component prop */\n  task: TaskProps;\n  /** Stage data - to be passed in callbacks */\n  stageItem: StageItemProps;\n  /** Id for the component */\n  id: string;\n}\n\nexport interface TaskProps extends Omit<FormControlProps, 'status' | 'id'> {\n  /** Pass an array of Action objects to append button(s) inline with the Input. */\n  actions?: LifeCycleAction[];\n  /** Tooltip for adding items to the task component */\n  addStepTitle: string;\n  /** Region for adding the task component */\n  addTask: {\n    title: string;\n    showOnce: boolean;\n    onAddTask?: LifeCycleAction['onClick'];\n  };\n  onAddStep?: (param: LifeCycleActionParam, selectedItem: LibraryItem) => void;\n  /** callback for Click of a task */\n  onClick?: (param: LifeCycleActionParam, e: MouseEvent) => void;\n  /** Types of Nodes */\n  nodeLibrary: LibraryItem[];\n}\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  /** callback for Click of a step */\n  onClick?: (param: LifeCycleActionParam, e: MouseEvent) => void;\n}\n\nexport interface LifeCycleActionParam {\n  value?: string;\n  stage?: StageItemProps;\n  task?: TaskItemProps;\n  category?: CategoryItemProps;\n  step?: StepItemProps;\n  type?: 'Stage' | 'Step' | 'Task' | 'Alternate Stage';\n  routeTo?: string;\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 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  /** Selected stage or task or step */\n  selectedItemId?: string;\n  /** makes component read-only */\n  readOnly?: boolean;\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/LifeCycleContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { LifeCycleProps } from './LifeCycle.types';
+export interface LifeCycleContextValue {
+    selectedItemId: LifeCycleProps['selectedItemId'];
+    readOnly: LifeCycleProps['readOnly'];
+}
+declare const LifeCycleContext: import("react").Context<LifeCycleContextValue>;
+export default LifeCycleContext;
+//# sourceMappingURL=LifeCycleContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeCycleContext.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IACjD,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACtC;AAED,QAAA,MAAM,gBAAgB,gDAGpB,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/lib/components/LifeCycle/LifeCycleContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+const LifeCycleContext = createContext({
+    selectedItemId: undefined,
+    readOnly: false
+});
+export default LifeCycleContext;
+//# sourceMappingURL=LifeCycleContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeCycleContext.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAStC,MAAM,gBAAgB,GAAG,aAAa,CAAwB;IAC5D,cAAc,EAAE,SAAS;IACzB,QAAQ,EAAE,KAAK;CAChB,CAAC,CAAC;AAEH,eAAe,gBAAgB,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { LifeCycleProps } from './LifeCycle.types';\n\nexport interface LifeCycleContextValue {\n  selectedItemId: LifeCycleProps['selectedItemId'];\n  readOnly: LifeCycleProps['readOnly'];\n}\n\nconst LifeCycleContext = createContext<LifeCycleContextValue>({\n  selectedItemId: undefined,\n  readOnly: false\n});\n\nexport default LifeCycleContext;\n"]}

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

@@ -1,10 +1,6 @@
 import { FunctionComponent, Ref } from 'react';
 import { NoChildrenProp } from '@pega/cosmos-react-core';
-import { StageItemProps, StageType } from './LifeCycle.types';
-import { StageProps } from './Stage';
-import { CategoriesProps } from './Category';
-import { TaskProps } from './Task';
-import { StepProps } from './Step';
+import { StageItemProps, TaskProps, StepProps, CategoriesProps, StageType, StageProps } from './LifeCycle.types';
 export interface LifeCycleListProps extends NoChildrenProp {
     ref?: Ref<HTMLOListElement>;
     categories: CategoriesProps[];

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycleList.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAoB,cAAc,EAA2B,MAAM,yBAAyB,CAAC;AAEpG,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;AAsBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAiGxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"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,EAAoB,cAAc,EAA2B,MAAM,yBAAyB,CAAC;AAEpG,OAAO,EACL,cAAc,EAEd,SAAS,EACT,SAAS,EAET,eAAe,EACf,SAAS,EACT,UAAU,EACX,MAAM,mBAAmB,CAAC;AAI3B,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;AAsBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CA+FxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/LifeCycle/LifeCycleList.js

@@ -46,13 +46,13 @@ const LifeCycleList = forwardRef(({ item, isFirstItem, isLastItem, categories, s
         sortedCategory = catgoryItem(item.categories);
     }
     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 }), sortedCategory.length !== 0 &&
+    return (_jsxs(StyledLifeCycleList, { lastItem: isLastItem, children: [_jsx(Stage, { value: item.label, stageInfo: stageInfo, item: item, error: item.error, id: item.id, ...stageProps }), sortedCategory.length !== 0 &&
                 sortedCategory.map((categoryItem, categoryindex) => {
                     const taskProps = task[categoryindex];
                     let stepProps;
                     if (step)
                         stepProps = step[categoryindex];
-                    return (_createElement(Category, { ...restProps, key: categoryItem.categoryId, role: 'gridcell', id: categoryItem.categoryId, ref: ref, category: categories[categoryindex], item: categoryItem, showTitle: showTitle, stageItem: item, task: taskProps, step: stepProps }));
+                    return (_createElement(Category, { ...restProps, key: categoryItem.categoryId, id: categoryItem.categoryId, ref: ref, category: categories[categoryindex], item: categoryItem, showTitle: showTitle, stageItem: item, task: taskProps, step: stepProps }));
                 }), sortedCategory.length === 0 &&
                 categories.length === 0 &&
                 item.categories.length > 0 &&
@@ -61,7 +61,7 @@ const LifeCycleList = forwardRef(({ item, isFirstItem, isLastItem, categories, s
                     let stepProps;
                     if (step)
                         stepProps = step[categoryindex];
-                    return (_jsx(Category, { role: 'gridcell', id: categoryItem.categoryId, ref: ref, item: categoryItem, stageItem: item, task: taskProps, step: stepProps, showTitle: showTitle }, categoryItem.categoryId));
+                    return (_jsx(Category, { id: categoryItem.categoryId, ref: ref, item: categoryItem, stageItem: item, task: taskProps, step: stepProps, showTitle: showTitle }, categoryItem.categoryId));
                 })] }, listId));
 });
 export default LifeCycleList;

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycleList.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, NoChildrenProp, 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\nStyledLifeCycleList.defaultProps = defaultThemeProp;\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"]}
+{"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 { defaultThemeProp, NoChildrenProp, createUID, useDirection } from '@pega/cosmos-react-core';\n\nimport {\n  StageItemProps,\n  CategoryItemProps,\n  TaskProps,\n  StepProps,\n  getStageInfo,\n  CategoriesProps,\n  StageType,\n  StageProps\n} from './LifeCycle.types';\nimport Stage from './Stage';\nimport Category from './Category';\n\nexport interface LifeCycleListProps extends NoChildrenProp {\n  /* Pass reference to the LifeCycleComponent */\n  ref?: Ref<HTMLOListElement>;\n  /* Array of categories  column props */\n  categories: CategoriesProps[];\n  /* Array of Task props */\n  task: TaskProps[];\n  /* Array of Step props */\n  stage?: StageProps;\n  /* Array of Stage props */\n  step?: StepProps[];\n  /* Data model should be have stages array */\n  item: StageItemProps;\n  /* Count of number of stages */\n  isFirstItem?: boolean;\n  /* Index of stages item */\n  isLastItem?: boolean;\n  /* type of 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\nStyledLifeCycleList.defaultProps = defaultThemeProp;\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} lastItem={isLastItem}>\n        <Stage\n          value={item.label}\n          stageInfo={stageInfo}\n          item={item}\n          error={item.error}\n          id={item.id}\n          {...stageProps}\n        />\n        {sortedCategory.length !== 0 &&\n          sortedCategory.map((categoryItem: CategoryItemProps, categoryindex: number) => {\n            const taskProps = task[categoryindex];\n            let stepProps;\n            if (step) stepProps = step[categoryindex];\n            return (\n              <Category\n                {...restProps}\n                key={categoryItem.categoryId}\n                id={categoryItem.categoryId}\n                ref={ref}\n                category={categories[categoryindex]}\n                item={categoryItem}\n                showTitle={showTitle}\n                stageItem={item}\n                task={taskProps}\n                step={stepProps}\n              />\n            );\n          })}\n        {sortedCategory.length === 0 &&\n          categories.length === 0 &&\n          item.categories.length > 0 &&\n          item.categories.map((categoryItem: CategoryItemProps, categoryindex: number) => {\n            const taskProps = task[categoryindex];\n            let stepProps;\n            if (step) stepProps = step[categoryindex];\n\n            return (\n              <Category\n                key={categoryItem.categoryId}\n                id={categoryItem.categoryId}\n                ref={ref}\n                item={categoryItem}\n                stageItem={item}\n                task={taskProps}\n                step={stepProps}\n                showTitle={showTitle}\n              />\n            );\n          })}\n      </StyledLifeCycleList>\n    );\n  }\n);\n\nexport default LifeCycleList;\n"]}

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

@@ -1,20 +1,6 @@
-import { FunctionComponent, Ref, ChangeEvent, FocusEvent } from 'react';
-import { BaseProps, ForwardProps, FormControlProps } from '@pega/cosmos-react-core';
-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?: Record<StageType, LifeCycleAction[]> | LifeCycleAction[];
-    /** Callback for Add stage */
-    onAddStage?: () => void;
-    /** Callback for Adding alternate stage */
-    onAddAlternateStage?: () => void;
-    /** Input Change */
-    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;
-}
+import { FunctionComponent, Ref } from 'react';
+import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
+import { StageInfo, StageItemProps, StageProps } from './LifeCycle.types';
 export interface StageComponentProps extends BaseProps, StageProps {
     ref?: Ref<HTMLDivElement>;
     /** Pass text for the task. */
@@ -27,19 +13,15 @@ export interface StageComponentProps extends BaseProps, StageProps {
     error?: string;
 }
 export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDragIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    error: string;
-}, never>;
-export declare const StyledInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+export declare const StyledStageButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     error: string | undefined;
 }, never>;
-export declare const StyledStageActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    error?: string | undefined;
-}, never>;
+export declare const StyledStageActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledWarnIcon: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").IconProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<StageComponentProps, "stageInfo"> & {
     status: boolean;
+    error: string;
 }, never>;
-export declare const StyledInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const Stage: FunctionComponent<StageComponentProps & ForwardProps>;
 export default Stage;
 //# sourceMappingURL=Stage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stage.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"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;AAIH,eAAO,MAAM,WAAW;WAAyB,MAAM,GAAG,SAAS;SA+BjE,CAAC;AAIH,eAAO,MAAM,kBAAkB;;SAiB7B,CAAC;AAIH,eAAO,MAAM,WAAW;YAEZ,OAAO;SA2IjB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAyIhE,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Stage.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAqB,GAAG,EAAc,MAAM,OAAO,CAAC;AAI1F,OAAO,EAEL,SAAS,EACT,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAGL,SAAS,EACT,cAAc,EACd,UAAU,EACX,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,UAAU;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;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;AAIF,eAAO,MAAM,iBAAiB;WACrB,MAAM,GAAG,SAAS;SAyBzB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAE9B,CAAC;AAIF,eAAO,MAAM,cAAc,iLAazB,CAAC;AAIH,eAAO,MAAM,WAAW;YAEZ,OAAO;WACR,MAAM;SAsIf,CAAC;AAIH,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAiHhE,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/LifeCycle/Stage.js

@@ -1,78 +1,61 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, forwardRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, Actions, Icon, Tooltip, useElement, defaultThemeProp, useDirection, StyledTooltip, StyledButton } from '@pega/cosmos-react-core';
+import { readableColor } from 'polished';
+import { Flex, Actions, Tooltip, useElement, defaultThemeProp, useDirection, StyledButton, Icon, useI18n } from '@pega/cosmos-react-core';
 export const StyledWrapper = styled.div `
   overflow: hidden;
 `;
-export const StyledDragIcon = styled.div(({ theme, error }) => {
+StyledWrapper.defaultProps = defaultThemeProp;
+export const StyledStageButton = styled.button(({ error, theme }) => {
     return css `
-    width: 1.5rem;
-    visibility: hidden;
+    height: ${theme.components.button.height};
+    outline: none;
+    border: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: start;
+    margin-inline-start: ${theme.base.spacing};
+
     ${error &&
         css `
-      display: block;
+      margin-inline-start: 0;
     `}
-    padding: 0 calc(0.5 * ${theme.base.spacing});
-    margin: calc(0.5 * ${theme.base.spacing}) 0;
-    color: ${theme.base.colors.white};
-    text-align: center;
-  `;
-});
-StyledDragIcon.defaultProps = defaultThemeProp;
-export const StyledInput = styled.input(({ error, theme }) => {
-    return css `
-    height: ${theme.components.input.height};
-    padding: 0 calc(0.5 * ${theme.base.spacing});
-    text-overflow: ellipsis;
-    border: 0.0625rem solid transparent;
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
-    width: 100%;
-    color: ${theme.base.colors.white};
-    outline: none;
+
     &:hover {
       cursor: pointer;
     }
+
     &:disabled {
       cursor: not-allowed;
     }
-    ${error
-        ? css `
-          background: ${theme.base.colors.red['extra-light']};
-          border: 0.0625rem solid ${theme.base.colors.red.medium};
-          color: ${theme.base.colors.black};
-        `
-        : css `
-          background: ${theme.base.palette['primary-background']};
-          &&:focus:enabled {
-            color: ${theme.base.colors.black};
-            background: ${theme.base.palette['primary-background']};
-            border: 0.0625rem solid ${theme.base.colors.blue.medium};
-          }
-        `}
   `;
 });
-StyledInput.defaultProps = defaultThemeProp;
-export const StyledStageActions = styled.div(({ theme, error }) => {
+StyledStageButton.defaultProps = defaultThemeProp;
+export const StyledStageActions = styled.div `
+  z-index: 2;
+`;
+StyledStageActions.defaultProps = defaultThemeProp;
+export const StyledWarnIcon = styled(Icon)(({ theme }) => {
     return css `
-    z-index: 2;
-    visibility: hidden;
-    margin-inline-start: calc(0.5 * ${theme.base.spacing});
+    margin-inline: calc(0.5 * ${theme.base.spacing});
 
-    ${error &&
-        css `
-      visibility: visible;
-    `}
+    &:hover {
+      cursor: pointer;
+    }
 
-    & > ${StyledButton} {
-      color: ${theme.base.colors.white};
+    &:focus {
+      outline: none;
+      box-shadow: ${theme.base.shadow.focus};
     }
   `;
 });
-StyledStageActions.defaultProps = defaultThemeProp;
-export const StyledStage = styled.div(({ stageInfo, theme, status }) => {
-    const { visual: { bgColor, bgHover, tailPointed, headPointed } } = stageInfo;
+StyledWarnIcon.defaultProps = defaultThemeProp;
+export const StyledStage = styled.div(({ stageInfo, theme, status, error }) => {
+    const { visual: { bgColor, tailPointed, headPointed } } = stageInfo;
     const { rtl } = useDirection();
+    const contrastColor = readableColor(bgColor);
     const roundedEndsStyles = css `
     content: '';
     position: absolute;
@@ -92,61 +75,38 @@ export const StyledStage = styled.div(({ stageInfo, theme, status }) => {
 
     &:hover {
       cursor: pointer;
-
-      ${StyledDragIcon},${StyledStageActions} {
-        ${css `
-          visibility: visible;
-        `}
-      }
     }
+
     &:focus-within {
-      border: 0.0625rem solid ${theme.base.colors.blue.medium};
+      border: 0.0625rem solid ${theme.base.palette.interactive};
+
       ${headPointed &&
         css `
         &::after {
-          border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};
+          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};
           ${rtl
             ? css `
-                border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};
+                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};
               `
             : css `
-                border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};
+                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};
               `}
         }
       `}
+
       ${tailPointed &&
         css `
         &::before {
-          border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};
+          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};
           ${rtl
             ? css `
-                border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};
+                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};
               `
             : css `
-                border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};
+                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};
               `}
         }
       `}
-      ${StyledDragIcon} {
-        ${css `
-          @keyframes anim {
-            0% {
-              transform: scale(0);
-            }
-            100% {
-              transform: scale(1);
-            }
-          }
-          animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
-          width: 10%;
-          transition: width ${theme.base.animation.speed};
-        `}
-      }
-      ${StyledStageActions} {
-        ${css `
-          visibility: visible;
-        `}
-      }
     }
 
     ${headPointed &&
@@ -171,6 +131,20 @@ export const StyledStage = styled.div(({ stageInfo, theme, status }) => {
 
     ${tailPointed &&
         css `
+      ${!error &&
+            css `
+        ${StyledStageButton} {
+          margin-inline-start: calc(1.5 * ${theme.base.spacing});
+        }
+      `}
+
+      ${error &&
+            css `
+        ${StyledWarnIcon} {
+          margin-inline-start: ${theme.base.spacing};
+        }
+      `}
+
       &::before {
         ${roundedEndsStyles}
         background: ${theme.base.palette['app-background']};
@@ -188,57 +162,36 @@ export const StyledStage = styled.div(({ stageInfo, theme, status }) => {
       }
     `}
 
-    ${StyledInput} {
+    ${StyledWarnIcon} {
+      color: ${contrastColor};
+    }
+
+    ${StyledStageActions} {
+      & > ${StyledButton} {
+        color: ${contrastColor};
+      }
+    }
+
+    ${StyledStageButton} {
+      color: ${contrastColor};
       ${!status &&
         css `
-        border: 0.0625rem solid transparent;
         background: ${bgColor};
       `}
-      :hover:not([readonly]):not([disabled]):not(:focus) {
-        ${!status &&
-        css `
-          border: 0.0625rem solid transparent;
-          background: ${bgHover};
-        `}
-      }
     }
   `;
 });
 StyledStage.defaultProps = defaultThemeProp;
-export const StyledInputWrapper = styled.div `
-  &:focus-within {
-    ${StyledTooltip} {
-      ${css `
-        display: none;
-      `}
-    }
-  }
-`;
-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: e.target.value,
-            stage: item
-        };
-        onChange?.(param, e);
-    };
-    const onInputFocus = (e) => {
-        const param = {
-            value: stageName,
-            stage: item
-        };
-        onFocus?.(param, e);
-    };
-    const onInputBlur = (e) => {
-        setStageName(e.target.value);
-        const param = {
-            value: e.target.value,
-            stage: item
+const Stage = forwardRef(({ value, actions, stageInfo, onClick, id, item, error, ...restProps }, ref) => {
+    const t = useI18n();
+    const [errorIcon, setErrorIcon] = useElement();
+    const onStageClick = (e) => {
+        const actionParam = {
+            value,
+            stage: item,
+            type: 'Stage'
         };
-        onBlur?.(param, e);
+        onClick?.(actionParam, e);
     };
     const onActionItemClick = (actionId, e) => {
         const param = {
@@ -279,7 +232,7 @@ const Stage = forwardRef(({ value, actions, stageInfo, onChange, onFocus, onBlur
             return actionItem;
         });
     }
-    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' }) }), _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 }), stageName && (_jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || stageName }))] }), _jsx(StyledStageActions, { error: error, children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }) })] })] }) }));
+    return (_jsxs(Flex, { ...restProps, container: { inline: true, alignItems: 'center' }, as: StyledStage, ref: ref, error: error, stageInfo: stageInfo, id: item.id, children: [error && (_jsxs(_Fragment, { children: [_jsx(StyledWarnIcon, { ref: setErrorIcon, role: 'status', tabIndex: '0', "aria-label": t('item_error', [error]), name: 'warn-solid' }), _jsx(Tooltip, { target: errorIcon, "aria-hidden": !!error, hideDelay: 'none', children: error })] })), _jsx(Flex, { as: StyledWrapper, container: { inline: true }, item: { grow: 1 }, onClick: onStageClick, children: _jsx(StyledStageButton, { error: error, "aria-label": t('stage_name', [value]), children: value }) }), _jsx(StyledStageActions, { children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }) })] }));
 });
 export default Stage;
 //# sourceMappingURL=Stage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,UAAU,EAOX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EAGJ,OAAO,EACP,IAAI,EACJ,OAAO,EACP,UAAU,EAEV,gBAAgB,EAChB,YAAY,EACZ,aAAa,EAEb,YAAY,EACb,MAAM,yBAAyB,CAAC;AAuCjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAoB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/E,OAAO,GAAG,CAAA;;;MAGN,KAAK;QACP,GAAG,CAAA;;KAEF;4BACuB,KAAK,CAAC,IAAI,CAAC,OAAO;yBACrB,KAAK,CAAC,IAAI,CAAC,OAAO;aAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAEjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAgC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1F,OAAO,GAAG,CAAA;cACE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM;4BACf,KAAK,CAAC,IAAI,CAAC,OAAO;;;gCAGd,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;aAE9C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;;;MAQ9B,KAAK;QACL,CAAC,CAAC,GAAG,CAAA;wBACa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC;oCACxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM;mBAC7C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;SACjC;QACH,CAAC,CAAC,GAAG,CAAA;wBACa,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;qBAE3C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;0BAClB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;sCAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;;SAE1D;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAEzC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IACtB,OAAO,GAAG,CAAA;;;sCAG0B,KAAK,CAAC,IAAI,CAAC,OAAO;;MAElD,KAAK;QACP,GAAG,CAAA;;KAEF;;UAEK,YAAY;eACP,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAEnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAInC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IACjC,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,EACvD,GAAG,SAAS,CAAC;IAEd,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;sBAIT,KAAK,CAAC,IAAI,CAAC,OAAO;uBACjB,KAAK,CAAC,IAAI,CAAC,OAAO;oBACrB,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGnC,CAAC;IAEF,OAAO,GAAG,CAAA;;0BAEc,KAAK,CAAC,IAAI,CAAC,OAAO;kBAC1B,OAAO;;;;;;;QAOjB,cAAc,IAAI,kBAAkB;UAClC,GAAG,CAAA;;SAEJ;;;;gCAIuB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;QACrD,WAAW;QACb,GAAG,CAAA;;+CAEsC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;YAChE,GAAG;YACH,CAAC,CAAC,GAAG,CAAA;sDACqC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;eACpE;YACH,CAAC,CAAC,GAAG,CAAA;oDACmC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;eAClE;;OAER;QACC,WAAW;QACb,GAAG,CAAA;;+CAEsC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;YAChE,GAAG;YACH,CAAC,CAAC,GAAG,CAAA;oDACmC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;eAClE;YACH,CAAC,CAAC,GAAG,CAAA;sDACqC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;eACpE;;OAER;QACC,cAAc;UACZ,GAAG,CAAA;;;;;;;;;4BASe,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;8BAE5D,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;SAC/C;;QAED,kBAAkB;UAChB,GAAG,CAAA;;SAEJ;;;;MAIH,WAAW;QACb,GAAG,CAAA;;UAEG,iBAAiB;;;;uCAIY,KAAK,CAAC,IAAI,CAAC,OAAO;;UAE/C,GAAG;YACH,CAAC,CAAC,GAAG,CAAA;2CAC4B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;aACzD;YACH,CAAC,CAAC,GAAG,CAAA;8DAC+C,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;aAE5E;;KAER;;MAEC,WAAW;QACb,GAAG,CAAA;;UAEG,iBAAiB;sBACL,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;0CAEhB,KAAK,CAAC,IAAI,CAAC,OAAO;UAClD,GAAG;YACH,CAAC,CAAC,GAAG,CAAA;;oEAEqD,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;aAClF;YACH,CAAC,CAAC,GAAG,CAAA;;qDAEsC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;aACnE;;KAER;;MAEC,WAAW;QACT,CAAC,MAAM;QACT,GAAG,CAAA;;sBAEa,OAAO;OACtB;;UAEG,CAAC,MAAM;QACT,GAAG,CAAA;;wBAEa,OAAO;SACtB;;;GAGN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;MAEtC,aAAa;QACX,GAAG,CAAA;;OAEJ;;;CAGN,CAAC;AAEF,MAAM,KAAK,GAA0D,UAAU,CAC7E,CACE,EACE,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,OAAO,EACP,MAAM,EACN,EAAE,EACF,IAAI,EACJ,KAAK,EACL,GAAG,SAAS,EAC2B,EACzC,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,aAAa,GAAG,CAAC,CAAgC,EAAE,EAAE;QACzD,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7B,MAAM,KAAK,GAAyB;YAClC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;YACrB,KAAK,EAAE,IAAI;SACZ,CAAC;QACF,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAA+B,EAAE,EAAE;QACvD,MAAM,KAAK,GAAyB;YAClC,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,IAAI;SACZ,CAAC;QACF,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAA+B,EAAE,EAAE;QACtD,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7B,MAAM,KAAK,GAAyB;YAClC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;YACrB,KAAK,EAAE,IAAI;SACZ,CAAC;QACF,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CACxB,QAAgB,EAChB,CAAuE,EACvE,EAAE;QACF,MAAM,KAAK,GAAyB;YAClC,KAAK,EAAE,IAAI;SACZ,CAAC;QAEF,IAAI,OAAO,EAAE;YACX,IAAI,WAAW,GAAsB,EAAE,CAAC;YAExC,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;gBAC1B,WAAW,GAAG,OAAO,CAAC;aACvB;iBAAM;gBACL,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAClC;YAED,WAAW,EAAE,OAAO,CAAC,CAAC,UAA2B,EAAE,EAAE;gBACnD,IAAI,UAAU,CAAC,EAAE,KAAK,QAAQ,EAAE;oBAC9B,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;iBAChC;YACH,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,+FAA+F;IAC/F,MAAM,YAAY,GAAa,EAAE,CAAC;IAElC,IAAI,OAAO,EAAE;QACX,IAAI,WAAW,GAAsB,EAAE,CAAC;QACxC,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,WAAW,GAAG,OAAO,CAAC;SACvB;aAAM;YACL,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAClC;QAED,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC/B,MAAM,eAAe,GAAG,EAAY,CAAC;YACrC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,GAAW,EAAE,EAAE;gBAC9C,eAAe,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;YACzC,CAAC,CAAC,CAAC;YACH,eAAe,CAAC,OAAO,GAAG,iBAAiB,CAAC;YAC5C,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACnC,OAAO,UAAU,CAAC;QACpB,CAAC,CAAC,CAAC;KACJ;IAED,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAC3B,EAAE,EAAE,WAAW,KACX,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,cAAc,YAEnB,MAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,aAClD,KAAC,IAAI,IAAC,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,YACpC,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,MAAC,IAAI,IAAC,SAAS,mBACb,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,aAEjD,KAAC,WAAW,IACV,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,QAAQ,EAAE,aAAa,gBACX,SAAS,EACrB,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,WAAW,GACnB,EACD,SAAS,IAAI,CACZ,KAAC,OAAO,IAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,YACvC,KAAK,IAAI,SAAS,GACX,CACX,IACI,EACP,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,YAC7B,YAAY,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,SAAG,GAClD,IAChB,IACF,GACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","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: 1.5rem;\n    visibility: hidden;\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\nStyledDragIcon.defaultProps = defaultThemeProp;\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\nStyledInput.defaultProps = defaultThemeProp;\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\nStyledStageActions.defaultProps = defaultThemeProp;\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\n      ${StyledDragIcon},${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"]}
+{"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithChildren, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Flex,\n  BaseProps,\n  ForwardProps,\n  Actions,\n  Tooltip,\n  useElement,\n  defaultThemeProp,\n  useDirection,\n  Action,\n  StyledButton,\n  Icon,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport {\n  LifeCycleAction,\n  LifeCycleActionParam,\n  StageInfo,\n  StageItemProps,\n  StageProps\n} from './LifeCycle.types';\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\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStageButton = styled.button<{\n  error: string | undefined;\n}>(({ error, theme }) => {\n  return css`\n    height: ${theme.components.button.height};\n    outline: none;\n    border: none;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: start;\n    margin-inline-start: ${theme.base.spacing};\n\n    ${error &&\n    css`\n      margin-inline-start: 0;\n    `}\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  `;\n});\n\nStyledStageButton.defaultProps = defaultThemeProp;\n\nexport const StyledStageActions = styled.div`\n  z-index: 2;\n`;\n\nStyledStageActions.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n  return css`\n    margin-inline: calc(0.5 * ${theme.base.spacing});\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nexport const StyledStage = styled.div<\n  Pick<StageComponentProps, 'stageInfo'> & {\n    status: boolean;\n    error: string;\n  }\n>(({ stageInfo, theme, status, error }) => {\n  const {\n    visual: { bgColor, tailPointed, headPointed }\n  } = stageInfo;\n\n  const { rtl } = useDirection();\n  const contrastColor = readableColor(bgColor);\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    }\n\n    &:focus-within {\n      border: 0.0625rem solid ${theme.base.palette.interactive};\n\n      ${headPointed &&\n      css`\n        &::after {\n          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};\n          ${rtl\n            ? css`\n                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};\n              `\n            : css`\n                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};\n              `}\n        }\n      `}\n\n      ${tailPointed &&\n      css`\n        &::before {\n          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};\n          ${rtl\n            ? css`\n                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};\n              `\n            : css`\n                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};\n              `}\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      ${!error &&\n      css`\n        ${StyledStageButton} {\n          margin-inline-start: calc(1.5 * ${theme.base.spacing});\n        }\n      `}\n\n      ${error &&\n      css`\n        ${StyledWarnIcon} {\n          margin-inline-start: ${theme.base.spacing};\n        }\n      `}\n\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    ${StyledWarnIcon} {\n      color: ${contrastColor};\n    }\n\n    ${StyledStageActions} {\n      & > ${StyledButton} {\n        color: ${contrastColor};\n      }\n    }\n\n    ${StyledStageButton} {\n      color: ${contrastColor};\n      ${!status &&\n      css`\n        background: ${bgColor};\n      `}\n    }\n  `;\n});\n\nStyledStage.defaultProps = defaultThemeProp;\n\nconst Stage: FunctionComponent<StageComponentProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      actions,\n      stageInfo,\n      onClick,\n      id,\n      item,\n      error,\n      ...restProps\n    }: PropsWithChildren<StageComponentProps>,\n    ref: StageComponentProps['ref']\n  ) => {\n    const t = useI18n();\n    const [errorIcon, setErrorIcon] = useElement();\n\n    const onStageClick = (e: MouseEvent) => {\n      const actionParam: LifeCycleActionParam = {\n        value,\n        stage: item,\n        type: 'Stage'\n      };\n      onClick?.(actionParam, 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        {...restProps}\n        container={{ inline: true, alignItems: 'center' }}\n        as={StyledStage}\n        ref={ref}\n        error={error}\n        stageInfo={stageInfo}\n        id={item.id}\n      >\n        {error && (\n          <>\n            <StyledWarnIcon\n              ref={setErrorIcon}\n              role='status'\n              tabIndex='0'\n              aria-label={t('item_error', [error])}\n              name='warn-solid'\n            />\n            <Tooltip target={errorIcon} aria-hidden={!!error} hideDelay='none'>\n              {error}\n            </Tooltip>\n          </>\n        )}\n        <Flex\n          as={StyledWrapper}\n          container={{ inline: true }}\n          item={{ grow: 1 }}\n          onClick={onStageClick}\n        >\n          <StyledStageButton error={error} aria-label={t('stage_name', [value])}>\n            {value}\n          </StyledStageButton>\n        </Flex>\n        <StyledStageActions>\n          {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n        </StyledStageActions>\n      </Flex>\n    );\n  }\n);\n\nexport default Stage;\n"]}