@pega/cosmos-react-build 2.0.0-dev.20.0 → 2.0.0-dev.21.0

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, Ref, ChangeEvent } from 'react';
+import { FunctionComponent, Ref, ChangeEvent, FocusEvent } from 'react';
 import { BaseProps, ForwardProps, FormControlProps } from '@pega/cosmos-react-core';
 import { LifeCycleAction, LifeCycleActionParam, StageItemProps } from './LifeCycle.types';
 export interface StageProps extends Omit<FormControlProps, 'status' | 'id'> {
@@ -10,6 +10,8 @@ export interface StageProps extends Omit<FormControlProps, 'status' | 'id'> {
     onAddAlternateStage?: () => void;
     /** Input Change */
     onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;
+    /** onFocus of input */
+    onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface StageComponentProps extends BaseProps, StageProps {
     ref?: Ref<HTMLDivElement>;

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,EAEZ,MAAM,OAAO,CAAC;AAIf,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;CACpF;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;SA8KjB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAoGhE,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"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;AAIf,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;SA8KjB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAgHhE,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/LifeCycle/Stage.js

@@ -250,7 +250,7 @@ export const StyledInputWrapper = styled.div `
     }
   }
 `;
-const Stage = forwardRef(({ value, actions, variant = 'default', headPointed = true, tailPointed = true, onChange, id, item, error, ...restProps }, ref) => {
+const Stage = forwardRef(({ value, actions, variant = 'default', headPointed = true, tailPointed = true, onChange, onFocus, id, item, error, ...restProps }, ref) => {
     const [inputEl, setInputEl] = useElement();
     const [stageName, setStageName] = useState(value);
     const onInputChange = (e) => {
@@ -261,6 +261,13 @@ const Stage = forwardRef(({ value, actions, variant = 'default', headPointed = t
         };
         onChange?.(param, e);
     };
+    const onInputFocus = (e) => {
+        const param = {
+            value: stageName,
+            stage: item
+        };
+        onFocus?.(param, e);
+    };
     const onActionItemClick = (actionId, e) => {
         const param = {
             stage: item
@@ -284,7 +291,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 }, 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, 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));
 });
 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":"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","sourcesContent":["import {\n  useState,\n  forwardRef,\n  FunctionComponent,\n  PropsWithChildren,\n  Ref,\n  ChangeEvent,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\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}\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 textColor = readableColor(bgHover);\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          /* color: ${textColor}; */\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      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    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    /* 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              />\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 {\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';\nimport { readableColor } from 'polished';\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 textColor = readableColor(bgHover);\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          /* color: ${textColor}; */\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"]}

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

@@ -1,10 +1,13 @@
-import { FunctionComponent, ChangeEvent } from 'react';
+import { FunctionComponent, ChangeEvent, FocusEvent } from 'react';
 import { BaseProps, ForwardProps, FormControlProps } from '@pega/cosmos-react-core';
 import { TaskItemProps, StepItemProps, StageItemProps, CategoryItemProps, LifeCycleAction, LifeCycleActionParam } from './LifeCycle.types';
 export interface StepProps extends Omit<FormControlProps, 'status' | 'id'> {
     /** Pass an array of Action objects to append button(s) inline with the Input. */
     actions?: LifeCycleAction[];
+    /** Input Change */
     onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;
+    /** callback for Focus of input */
+    onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
 }
 interface StepComponentProps extends BaseProps, StepProps {
     /** Pass text for the step. */

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

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAmB,WAAW,EAAc,MAAM,OAAO,CAAC;AAI9F,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,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACpF;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,CAgH9D,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"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"}

package/lib/components/LifeCycle/Step.js

@@ -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, ...restProps }) => {
+const Step = ({ value, id, visual, actions, badge, error, onChange, categoryItem, item, stageItem, taskItem, onFocus, ...restProps }) => {
     const t = useI18n();
     const [stepValue, setStepValue] = useState(value);
     const [iconEl, setIconEl] = useElement();
@@ -225,7 +225,17 @@ const Step = ({ value, id, visual, actions, badge, error, onChange, categoryItem
         };
         onChange?.(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 }, 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 onInputFocus = (e) => {
+        const actionParam = {
+            value: e.target.value,
+            step: item,
+            task: taskItem,
+            category: categoryItem,
+            stage: stageItem
+        };
+        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));
 };
 export default Step;
 //# sourceMappingURL=Step.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FunctionComponent, PropsWithoutRef, ChangeEvent, MouseEvent } 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  onChange?: (param: LifeCycleActionParam, e: ChangeEvent<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  ...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  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        />\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"]}
+{"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"]}

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ChangeEvent } from 'react';
+import { FunctionComponent, ChangeEvent, FocusEvent } from 'react';
 import { BaseProps, ForwardProps, FormControlProps } from '@pega/cosmos-react-core';
 import { StepProps } from './Step';
 import { TaskItemProps, StageItemProps, CategoryItemProps, LifeCycleAction, LifeCycleActionParam } from './LifeCycle.types';
@@ -15,6 +15,8 @@ export interface TaskProps extends Omit<FormControlProps, 'status' | 'id'> {
     };
     onAddStep?: LifeCycleAction['onClick'];
     onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;
+    /** callback for Focus of input */
+    onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
 }
 interface TaskComponentProps extends BaseProps, TaskProps {
     /** Pass text for the task. */

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

@@ -1 +1 @@
-{"version":3,"file":"Task.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAqB,WAAW,EAAc,MAAM,OAAO,CAAC;AAGhG,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;CACpF;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,CAwJ9D,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"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"}

package/lib/components/LifeCycle/Task.js

@@ -110,7 +110,7 @@ export const StyledInputWrapper = styled.div `
     }
   }
 `;
-const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem, error, onAddStep, onChange, categoryItem, id, step: stepProp, ...restProps }) => {
+const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem, error, onAddStep, onChange, onFocus, categoryItem, id, step: stepProp, ...restProps }) => {
     const t = useI18n();
     const [taskValue, setTaskValue] = useState(value);
     const [actionEl, setActionEl] = useElement();
@@ -153,6 +153,15 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
         };
         onChange?.(param, e);
     };
+    const onInputFocus = (e) => {
+        const param = {
+            value: taskValue,
+            task: item,
+            stage: stageItem,
+            category: categoryItem
+        };
+        onFocus?.(param, e);
+    };
     const onAddStepClick = (e) => {
         const param = {
             task: item,
@@ -161,7 +170,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 }, 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 }, 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: {

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

@@ -1 +1 @@
-{"version":3,"file":"Task.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FunctionComponent, PropsWithChildren, ChangeEvent, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  Button,\n  Icon,\n  Action,\n  Tooltip,\n  useElement,\n  Actions,\n  FormControlProps,\n  useI18n,\n  Avatar,\n  StyledTooltip\n} from '@pega/cosmos-react-core';\n\nimport Step, { StepProps } from './Step';\nimport {\n  TaskItemProps,\n  StageItemProps,\n  StepItemProps,\n  CategoryItemProps,\n  LifeCycleAction,\n  LifeCycleActionParam\n} from './LifeCycle.types';\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?: LifeCycleAction['onClick'];\n  onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\ninterface TaskComponentProps extends BaseProps, TaskProps {\n  /** Pass text for the task. */\n  value?: string;\n  /** support for an Avatar, Icon, or other supporting visual. */\n  visual: {\n    imgurl: string;\n  };\n  /** Pass task data */\n  item: TaskItemProps;\n  /* The status is used to show the input error status and the info on tooltip in case of error */\n  error?: string;\n  /** Step Props */\n  step?: StepProps;\n  /** Stage data to pass it as callback */\n  stageItem: StageItemProps;\n  /** Category data to pass it as callback */\n  categoryItem: CategoryItemProps;\n  id: string;\n}\n\nexport const StyledTaskList = styled.li(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin-block-end: ${theme.base.spacing};\n    &:last-child > article {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nexport const StyledCardHeader = styled.header(({ theme }) => {\n  return css`\n    padding: 0;\n    margin: 0 0 calc(0.5 * ${theme.base.spacing});\n  `;\n});\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(() => {\n  return css`\n    padding: 0;\n  `;\n});\nStyledCardContent.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    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        `\n      : css`\n          background: ${theme.base.palette['primary-background']};\n          &&:hover {\n            background: ${theme.base.palette['secondary-background']};\n          }\n          &&:focus:enabled {\n            border: 0.0625rem solid ${theme.base.colors.blue.medium};\n            background: ${theme.base.palette['primary-background']};\n          }\n        `}\n  `;\n});\nStyledInput.defaultProps = defaultThemeProp;\n\nexport const StyledTaskActions = styled.div<{\n  ref: HTMLDivElement;\n  error: string;\n}>(({ error }) => {\n  return css`\n    border: none;\n    visibility: hidden;\n    &:hover {\n      cursor: pointer;\n    }\n    ${error &&\n    css`\n      visibility: visible;\n    `}\n    &:focus-within {\n      ${StyledTooltip} {\n        ${css`\n          display: none;\n        `}\n      }\n    }\n  `;\n});\nStyledTaskActions.defaultProps = defaultThemeProp;\n\nexport const StyledTask = styled.article(({ theme }) => {\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    padding: ${theme.base.spacing};\n    &:focus-within,\n    &:hover {\n      ${StyledTaskActions} {\n        ${css`\n          visibility: visible;\n        `}\n      }\n    }\n    &:focus-within {\n      box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};\n    }\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\nStyledTask.defaultProps = defaultThemeProp;\n\nexport const StyledInputWrapper = styled.div`\n  &:focus-within {\n    ${StyledTooltip} {\n      ${css`\n        display: none;\n      `}\n    }\n  }\n`;\n\nconst Task: FunctionComponent<TaskComponentProps & ForwardProps> = ({\n  value,\n  visual,\n  actions,\n  item,\n  addStepTitle,\n  addTask,\n  stageItem,\n  error,\n  onAddStep,\n  onChange,\n  categoryItem,\n  id,\n  step: stepProp,\n  ...restProps\n}: PropsWithChildren<TaskComponentProps>) => {\n  const t = useI18n();\n  const [taskValue, setTaskValue] = useState(value);\n  const [actionEl, setActionEl] = useElement();\n  const [inputEl, setInputEl] = useElement();\n  const [addEl, setAddEl] = useElement();\n  const actionsLabel = t('actions');\n  const singleActionLabel = (actions?.[0]?.text as string) || '';\n\n  const onActionItemClick = (\n    actionId: string,\n    e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n  ) => {\n    const param: LifeCycleActionParam = {\n      task: item,\n      stage: stageItem,\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    setTaskValue(e.target.value);\n    const param: LifeCycleActionParam = {\n      value: taskValue,\n      task: item,\n      stage: stageItem,\n      category: categoryItem\n    };\n    onChange?.(param, e);\n  };\n  const onAddStepClick = (e: MouseEvent<HTMLButtonElement>) => {\n    const param: LifeCycleActionParam = {\n      task: item,\n      stage: stageItem,\n      category: categoryItem\n    };\n    onAddStep?.(param, e);\n  };\n\n  return (\n    <Flex as={StyledTaskList} {...restProps}>\n      <Flex as={StyledTask} container={{ direction: 'column' }} role='region'>\n        <Flex as={StyledCardHeader} container={{ itemGap: 0.4 }}>\n          {visual?.imgurl.length > 0 && <Avatar name={taskValue || ''} imageSrc={visual?.imgurl} />}\n          <Flex\n            item={{ grow: 1 }}\n            as={StyledInputWrapper}\n            container={{ inline: true, alignItems: 'center' }}\n          >\n            <StyledInput\n              value={taskValue}\n              type='text'\n              onChange={onInputChange}\n              ref={setInputEl}\n              error={error}\n              id={item.id}\n              aria-labelledby={categoryItem.categoryId}\n            />\n            {taskValue && (\n              <Tooltip target={inputEl} hideDelay='none'>\n                {error || taskValue}\n              </Tooltip>\n            )}\n          </Flex>\n          <Flex as={StyledTaskActions} ref={setActionEl} error={error}>\n            {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n            <Tooltip target={actionEl} aria-hidden='true'>\n              {actions && actions?.length > 1 ? actionsLabel : singleActionLabel}\n            </Tooltip>\n          </Flex>\n        </Flex>\n        <Flex as={StyledCardContent}>\n          {item?.steps.map((steps: StepItemProps) => {\n            const badgeStatus = steps?.status?.type ? steps.status.type : '';\n            const badgeLabel = steps?.status?.label ? steps.status.label : '';\n            return (\n              <Step\n                key={steps.id}\n                id={steps.id}\n                value={steps.label}\n                visual={{\n                  imgurl: steps.visual.imgurl,\n                  color: steps.visual.color,\n                  icon: steps.visual.icon,\n                  title: steps.visual.label\n                }}\n                item={steps}\n                taskItem={item}\n                stageItem={stageItem}\n                badge={{\n                  type: badgeStatus,\n                  label: badgeLabel\n                }}\n                error={steps.error}\n                categoryItem={categoryItem}\n                {...stepProp}\n              />\n            );\n          })}\n          <Flex>\n            <Button\n              variant='simple'\n              label={addStepTitle}\n              onClick={onAddStepClick}\n              ref={setAddEl}\n              icon\n              aria-label={`${t('add')} ${addStepTitle}`}\n            >\n              <Icon name='plus' />\n            </Button>\n            <Tooltip target={addEl} aria-hidden='true'>\n              {`${t('add')} ${addStepTitle}`}\n            </Tooltip>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Task;\n"]}
+{"version":3,"file":"Task.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useState,\n  FunctionComponent,\n  PropsWithChildren,\n  ChangeEvent,\n  FocusEvent,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  Button,\n  Icon,\n  Action,\n  Tooltip,\n  useElement,\n  Actions,\n  FormControlProps,\n  useI18n,\n  Avatar,\n  StyledTooltip\n} from '@pega/cosmos-react-core';\n\nimport Step, { StepProps } from './Step';\nimport {\n  TaskItemProps,\n  StageItemProps,\n  StepItemProps,\n  CategoryItemProps,\n  LifeCycleAction,\n  LifeCycleActionParam\n} from './LifeCycle.types';\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?: LifeCycleAction['onClick'];\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 TaskComponentProps extends BaseProps, TaskProps {\n  /** Pass text for the task. */\n  value?: string;\n  /** support for an Avatar, Icon, or other supporting visual. */\n  visual: {\n    imgurl: string;\n  };\n  /** Pass task data */\n  item: TaskItemProps;\n  /* The status is used to show the input error status and the info on tooltip in case of error */\n  error?: string;\n  /** Step Props */\n  step?: StepProps;\n  /** Stage data to pass it as callback */\n  stageItem: StageItemProps;\n  /** Category data to pass it as callback */\n  categoryItem: CategoryItemProps;\n  id: string;\n}\n\nexport const StyledTaskList = styled.li(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin-block-end: ${theme.base.spacing};\n    &:last-child > article {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nexport const StyledCardHeader = styled.header(({ theme }) => {\n  return css`\n    padding: 0;\n    margin: 0 0 calc(0.5 * ${theme.base.spacing});\n  `;\n});\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(() => {\n  return css`\n    padding: 0;\n  `;\n});\nStyledCardContent.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    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        `\n      : css`\n          background: ${theme.base.palette['primary-background']};\n          &&:hover {\n            background: ${theme.base.palette['secondary-background']};\n          }\n          &&:focus:enabled {\n            border: 0.0625rem solid ${theme.base.colors.blue.medium};\n            background: ${theme.base.palette['primary-background']};\n          }\n        `}\n  `;\n});\nStyledInput.defaultProps = defaultThemeProp;\n\nexport const StyledTaskActions = styled.div<{\n  ref: HTMLDivElement;\n  error: string;\n}>(({ error }) => {\n  return css`\n    border: none;\n    visibility: hidden;\n    &:hover {\n      cursor: pointer;\n    }\n    ${error &&\n    css`\n      visibility: visible;\n    `}\n    &:focus-within {\n      ${StyledTooltip} {\n        ${css`\n          display: none;\n        `}\n      }\n    }\n  `;\n});\nStyledTaskActions.defaultProps = defaultThemeProp;\n\nexport const StyledTask = styled.article(({ theme }) => {\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    padding: ${theme.base.spacing};\n    &:focus-within,\n    &:hover {\n      ${StyledTaskActions} {\n        ${css`\n          visibility: visible;\n        `}\n      }\n    }\n    &:focus-within {\n      box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};\n    }\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\nStyledTask.defaultProps = defaultThemeProp;\n\nexport const StyledInputWrapper = styled.div`\n  &:focus-within {\n    ${StyledTooltip} {\n      ${css`\n        display: none;\n      `}\n    }\n  }\n`;\n\nconst Task: FunctionComponent<TaskComponentProps & ForwardProps> = ({\n  value,\n  visual,\n  actions,\n  item,\n  addStepTitle,\n  addTask,\n  stageItem,\n  error,\n  onAddStep,\n  onChange,\n  onFocus,\n  categoryItem,\n  id,\n  step: stepProp,\n  ...restProps\n}: PropsWithChildren<TaskComponentProps>) => {\n  const t = useI18n();\n  const [taskValue, setTaskValue] = useState(value);\n  const [actionEl, setActionEl] = useElement();\n  const [inputEl, setInputEl] = useElement();\n  const [addEl, setAddEl] = useElement();\n  const actionsLabel = t('actions');\n  const singleActionLabel = (actions?.[0]?.text as string) || '';\n\n  const onActionItemClick = (\n    actionId: string,\n    e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n  ) => {\n    const param: LifeCycleActionParam = {\n      task: item,\n      stage: stageItem,\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    setTaskValue(e.target.value);\n    const param: LifeCycleActionParam = {\n      value: taskValue,\n      task: item,\n      stage: stageItem,\n      category: categoryItem\n    };\n    onChange?.(param, e);\n  };\n\n  const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n    const param: LifeCycleActionParam = {\n      value: taskValue,\n      task: item,\n      stage: stageItem,\n      category: categoryItem\n    };\n    onFocus?.(param, e);\n  };\n\n  const onAddStepClick = (e: MouseEvent<HTMLButtonElement>) => {\n    const param: LifeCycleActionParam = {\n      task: item,\n      stage: stageItem,\n      category: categoryItem\n    };\n    onAddStep?.(param, e);\n  };\n\n  return (\n    <Flex as={StyledTaskList} {...restProps}>\n      <Flex as={StyledTask} container={{ direction: 'column' }} role='region'>\n        <Flex as={StyledCardHeader} container={{ itemGap: 0.4 }}>\n          {visual?.imgurl.length > 0 && <Avatar name={taskValue || ''} imageSrc={visual?.imgurl} />}\n          <Flex\n            item={{ grow: 1 }}\n            as={StyledInputWrapper}\n            container={{ inline: true, alignItems: 'center' }}\n          >\n            <StyledInput\n              value={taskValue}\n              type='text'\n              onChange={onInputChange}\n              ref={setInputEl}\n              error={error}\n              id={item.id}\n              aria-labelledby={categoryItem.categoryId}\n              onFocus={onInputFocus}\n            />\n            {taskValue && (\n              <Tooltip target={inputEl} hideDelay='none'>\n                {error || taskValue}\n              </Tooltip>\n            )}\n          </Flex>\n          <Flex as={StyledTaskActions} ref={setActionEl} error={error}>\n            {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n            <Tooltip target={actionEl} aria-hidden='true'>\n              {actions && actions?.length > 1 ? actionsLabel : singleActionLabel}\n            </Tooltip>\n          </Flex>\n        </Flex>\n        <Flex as={StyledCardContent}>\n          {item?.steps.map((steps: StepItemProps) => {\n            const badgeStatus = steps?.status?.type ? steps.status.type : '';\n            const badgeLabel = steps?.status?.label ? steps.status.label : '';\n            return (\n              <Step\n                key={steps.id}\n                id={steps.id}\n                value={steps.label}\n                visual={{\n                  imgurl: steps.visual.imgurl,\n                  color: steps.visual.color,\n                  icon: steps.visual.icon,\n                  title: steps.visual.label\n                }}\n                item={steps}\n                taskItem={item}\n                stageItem={stageItem}\n                badge={{\n                  type: badgeStatus,\n                  label: badgeLabel\n                }}\n                error={steps.error}\n                categoryItem={categoryItem}\n                {...stepProp}\n              />\n            );\n          })}\n          <Flex>\n            <Button\n              variant='simple'\n              label={addStepTitle}\n              onClick={onAddStepClick}\n              ref={setAddEl}\n              icon\n              aria-label={`${t('add')} ${addStepTitle}`}\n            >\n              <Icon name='plus' />\n            </Button>\n            <Tooltip target={addEl} aria-hidden='true'>\n              {`${t('add')} ${addStepTitle}`}\n            </Tooltip>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Task;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryCard.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,IAAI,EAGJ,IAAI,EAEJ,aAAa,EACd,MAAM,yBAAyB,CAAC;AAGjC,OAAe,EAAE,WAAW,EAAyB,MAAM,WAAW,CAAC;AAEvE,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9D,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,IAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,IAarC,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAmBrC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SummaryCard.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,IAAI,EAGJ,IAAI,EAEJ,aAAa,EACd,MAAM,yBAAyB,CAAC;AAIjC,OAAe,EAAE,WAAW,EAAyB,MAAM,WAAW,CAAC;AAEvE,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9D,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,IAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,IAarC,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAkBrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/SummaryCard/SummaryCard.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
 import { Text, Flex, MetaList, Card, defaultThemeProp } from '@pega/cosmos-react-core';
+import BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';
 import { StyledDescription } from '../PageTemplates/GalleryPage.styles';
 import Visual, { StyledVisualContainer } from '../Visual';
 export const StyledTitle = styled(Text) `
@@ -24,7 +25,7 @@ export const StyledSummaryCard = styled(Card)(({ theme }) => {
 });
 StyledSummaryCard.defaultProps = defaultThemeProp;
 const SummaryCard = ({ id, title, description, visual, meta, onClick }) => {
-    return (_jsxs(Flex, { container: { direction: 'column', rowGap: 2, justify: 'between' }, as: StyledSummaryCard, onClick: (e) => onClick?.(id, e), role: onClick ? 'button' : undefined, children: [_jsxs(Flex, { container: { alignItems: 'center', colGap: 1 }, children: [visual && _jsx(Visual, { ...visual }, void 0), _jsx(StyledTitle, { variant: 'h3', children: title }, void 0)] }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledDescription, children: description }, void 0), _jsx(MetaList, { items: meta, wrapItems: false }, void 0)] }, id));
+    return (_jsxs(BareRoleButton, { container: { direction: 'column', rowGap: 2, justify: 'between' }, as: StyledSummaryCard, onClick: (e) => onClick?.(id, e), children: [_jsxs(Flex, { container: { alignItems: 'center', colGap: 1 }, children: [visual && _jsx(Visual, { ...visual }, void 0), _jsx(StyledTitle, { variant: 'h3', children: title }, void 0)] }, void 0), _jsx(Flex, { item: { grow: 1 }, children: _jsx(StyledDescription, { children: description }, void 0) }, void 0), _jsx(MetaList, { items: meta, wrapItems: false }, void 0)] }, id));
 };
 export default SummaryCard;
 //# sourceMappingURL=SummaryCard.js.map

package/lib/components/SummaryCard/SummaryCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryCard.js","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,MAAM,EAAE,EAAe,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAWvE,MAAM,CAAC,MAAM,WAAW,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAInD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;oBAItB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;MAGrC,qBAAqB;;;GAGxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAyB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9F,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EACjE,EAAE,EAAE,iBAAiB,EAErB,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAC5D,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,aAEpC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,aACjD,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,WAAI,EACjC,KAAC,WAAW,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,WAAe,YAC1C,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,iBAAiB,YAC3C,WAAW,WACP,EACP,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,WAAI,KAXtC,EAAE,CAYF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Text,\n  Flex,\n  MetaList,\n  Card,\n  defaultThemeProp,\n  MetaListProps\n} from '@pega/cosmos-react-core';\n\nimport { StyledDescription } from '../PageTemplates/GalleryPage.styles';\nimport Visual, { VisualProps, StyledVisualContainer } from '../Visual';\n\nexport interface SummaryCardProps {\n  id: string;\n  title: string;\n  description?: string;\n  onClick?: (id: string, e: MouseEvent<HTMLDivElement>) => void;\n  meta: MetaListProps['items'];\n  visual?: VisualProps;\n}\n\nexport const StyledTitle: typeof Text = styled(Text)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nexport const StyledSummaryCard: typeof Card = styled(Card)(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    &:hover,\n    &:focus {\n      cursor: pointer;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${StyledVisualContainer} {\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledSummaryCard.defaultProps = defaultThemeProp;\n\nconst SummaryCard: FC<SummaryCardProps> = ({ id, title, description, visual, meta, onClick }) => {\n  return (\n    <Flex\n      container={{ direction: 'column', rowGap: 2, justify: 'between' }}\n      as={StyledSummaryCard}\n      key={id}\n      onClick={(e: MouseEvent<HTMLDivElement>) => onClick?.(id, e)}\n      role={onClick ? 'button' : undefined}\n    >\n      <Flex container={{ alignItems: 'center', colGap: 1 }}>\n        {visual && <Visual {...visual} />}\n        <StyledTitle variant='h3'>{title}</StyledTitle>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledDescription}>\n        {description}\n      </Flex>\n      <MetaList items={meta} wrapItems={false} />\n    </Flex>\n  );\n};\n\nexport default SummaryCard;\n"]}
+{"version":3,"file":"SummaryCard.js","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAE1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,MAAM,EAAE,EAAe,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAWvE,MAAM,CAAC,MAAM,WAAW,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAInD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;oBAItB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;MAGrC,qBAAqB;;;GAGxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAyB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9F,OAAO,CACL,MAAC,cAAc,IACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EACjE,EAAE,EAAE,iBAAiB,EAErB,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,aAE5D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,aACjD,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,WAAI,EACjC,KAAC,WAAW,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,WAAe,YAC1C,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,iBAAiB,cAAE,WAAW,WAAqB,WAC/C,EACP,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,WAAI,KAVtC,EAAE,CAWQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Text,\n  Flex,\n  MetaList,\n  Card,\n  defaultThemeProp,\n  MetaListProps\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { StyledDescription } from '../PageTemplates/GalleryPage.styles';\nimport Visual, { VisualProps, StyledVisualContainer } from '../Visual';\n\nexport interface SummaryCardProps {\n  id: string;\n  title: string;\n  description?: string;\n  onClick?: (id: string, e: MouseEvent<HTMLDivElement>) => void;\n  meta: MetaListProps['items'];\n  visual?: VisualProps;\n}\n\nexport const StyledTitle: typeof Text = styled(Text)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nexport const StyledSummaryCard: typeof Card = styled(Card)(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    &:hover,\n    &:focus {\n      cursor: pointer;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${StyledVisualContainer} {\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledSummaryCard.defaultProps = defaultThemeProp;\n\nconst SummaryCard: FC<SummaryCardProps> = ({ id, title, description, visual, meta, onClick }) => {\n  return (\n    <BareRoleButton\n      container={{ direction: 'column', rowGap: 2, justify: 'between' }}\n      as={StyledSummaryCard}\n      key={id}\n      onClick={(e: MouseEvent<HTMLDivElement>) => onClick?.(id, e)}\n    >\n      <Flex container={{ alignItems: 'center', colGap: 1 }}>\n        {visual && <Visual {...visual} />}\n        <StyledTitle variant='h3'>{title}</StyledTitle>\n      </Flex>\n      <Flex item={{ grow: 1 }}>\n        <StyledDescription>{description}</StyledDescription>\n      </Flex>\n      <MetaList items={meta} wrapItems={false} />\n    </BareRoleButton>\n  );\n};\n\nexport default SummaryCard;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "2.0.0-dev.20.0",
+  "version": "2.0.0-dev.21.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,9 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.0.0-dev.20.0",
-    "@pega/cosmos-react-dnd": "2.0.0-dev.20.0",
+    "@pega/cosmos-react-core": "2.0.0-dev.21.0",
+    "@pega/cosmos-react-dnd": "2.0.0-dev.21.0",
+    "dagre": "^0.8.5",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",

package/lib/components/FlowModeller/Connector.d.ts

@@ -1,30 +0,0 @@
-import { FunctionComponent, Ref } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-export interface ConnectorProps {
-    /** Unique id of connector */
-    id: string;
-    /** Label for connector if there */
-    label?: string;
-    /** Node id which connector should connect to */
-    targetNodeId?: string;
-    /** Callback for adding the nodes */
-    onAddClick?: () => void;
-    /** Ref of the connector */
-    ref?: Ref<HTMLButtonElement>;
-    /** Boolean if the button on the connector is active */
-    active?: boolean;
-}
-export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    withLabel: boolean;
-}, never>;
-export declare const StyledConnector: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledButton: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {
-    active: ConnectorProps;
-}, never>;
-export declare const StyledLabelWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledLabel: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").LabelProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-declare const Connector: FunctionComponent<ConnectorProps & ForwardProps>;
-export default Connector;
-//# sourceMappingURL=Connector.d.ts.map

package/lib/components/FlowModeller/Connector.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAIL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,2BAA2B;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,aAAa;eAA2B,OAAO;SAY1D,CAAC;AAIH,eAAO,MAAM,eAAe,yGAO3B,CAAC;AAIF,eAAO,MAAM,mBAAmB,yGAM/B,CAAC;AAIF,eAAO,MAAM,SAAS,yGAMpB,CAAC;AAIH,eAAO,MAAM,YAAY;YAA4B,cAAc;SAmBjE,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAG9B,CAAC;AAIF,eAAO,MAAM,WAAW,kLAStB,CAAC;AAIH,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA8C/D,CAAC;AAEF,eAAe,SAAS,CAAC"}