@pega/cosmos-react-build 4.0.0-dev.6.1 → 4.0.0-dev.7.0

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,EAAc,iBAAiB,EAAqB,GAAG,EAAc,MAAM,OAAO,CAAC;AAI1F,OAAO,EAEL,SAAS,EACT,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAGL,SAAS,EACT,cAAc,EACd,UAAU,EACX,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,UAAU;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IAEd,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,SAAS,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,IAAI,EAAE,cAAc,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAIF,eAAO,MAAM,iBAAiB;WACrB,MAAM,GAAG,SAAS;SAyBzB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAE9B,CAAC;AAIF,eAAO,MAAM,cAAc,iLAazB,CAAC;AAIH,eAAO,MAAM,WAAW;YAEZ,OAAO;WACR,MAAM;SAsIf,CAAC;AAIH,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAiHhE,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Stage.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAqB,GAAG,EAAc,MAAM,OAAO,CAAC;AAI1F,OAAO,EAEL,SAAS,EACT,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAGL,SAAS,EACT,cAAc,EACd,UAAU,EACX,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,UAAU;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IAEd,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,SAAS,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,IAAI,EAAE,cAAc,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAIF,eAAO,MAAM,iBAAiB;WACrB,MAAM,GAAG,SAAS;SAyBzB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAE9B,CAAC;AAIF,eAAO,MAAM,cAAc,iLAQzB,CAAC;AAIH,eAAO,MAAM,WAAW;YAEZ,OAAO;WACR,MAAM;SAsIf,CAAC;AAIH,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAuGhE,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/LifeCycle/Stage.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
-import { Flex, Actions, Tooltip, useElement, defaultThemeProp, useDirection, StyledButton, Icon, useI18n } from '@pega/cosmos-react-core';
+import { Flex, Actions, defaultThemeProp, useDirection, StyledButton, Icon, useI18n } from '@pega/cosmos-react-core';
 export const StyledWrapper = styled.div `
   overflow: hidden;
 `;
@@ -44,11 +44,6 @@ export const StyledWarnIcon = styled(Icon)(({ theme }) => {
     &:hover {
       cursor: pointer;
     }
-
-    &:focus {
-      outline: none;
-      box-shadow: ${theme.base.shadow.focus};
-    }
   `;
 });
 StyledWarnIcon.defaultProps = defaultThemeProp;
@@ -184,7 +179,6 @@ export const StyledStage = styled.div(({ stageInfo, theme, status, error }) => {
 StyledStage.defaultProps = defaultThemeProp;
 const Stage = forwardRef(({ value, actions, stageInfo, onClick, id, item, error, ...restProps }, ref) => {
     const t = useI18n();
-    const [errorIcon, setErrorIcon] = useElement();
     const onStageClick = (e) => {
         const actionParam = {
             value,
@@ -232,7 +226,7 @@ const Stage = forwardRef(({ value, actions, stageInfo, onClick, id, item, error,
             return actionItem;
         });
     }
-    return (_jsxs(Flex, { ...restProps, container: { inline: true, alignItems: 'center' }, as: StyledStage, ref: ref, error: error, stageInfo: stageInfo, id: item.id, children: [error && (_jsxs(_Fragment, { children: [_jsx(StyledWarnIcon, { ref: setErrorIcon, role: 'status', tabIndex: '0', "aria-label": t('item_error', [error]), name: 'warn-solid' }), _jsx(Tooltip, { target: errorIcon, "aria-hidden": !!error, hideDelay: 'none', children: error })] })), _jsx(Flex, { as: StyledWrapper, container: { inline: true }, item: { grow: 1 }, onClick: onStageClick, children: _jsx(StyledStageButton, { error: error, "aria-label": t('stage_name', [value]), children: value }) }), _jsx(StyledStageActions, { children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }) })] }));
+    return (_jsxs(Flex, { ...restProps, container: { inline: true, alignItems: 'center' }, as: StyledStage, ref: ref, error: error, stageInfo: stageInfo, id: item.id, "aria-label": error ? t('stage_name_error', [value]) : undefined, children: [error && _jsx(StyledWarnIcon, { name: 'warn-solid' }), _jsx(Flex, { as: StyledWrapper, container: { inline: true }, item: { grow: 1 }, onClick: onStageClick, children: _jsx(StyledStageButton, { error: error, "aria-label": error ? undefined : t('stage_name', [value]), children: value }) }), _jsx(StyledStageActions, { children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }) })] }));
 });
 export default Stage;
 //# sourceMappingURL=Stage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithChildren, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Flex,\n  BaseProps,\n  ForwardProps,\n  Actions,\n  Tooltip,\n  useElement,\n  defaultThemeProp,\n  useDirection,\n  Action,\n  StyledButton,\n  Icon,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport {\n  LifeCycleAction,\n  LifeCycleActionParam,\n  StageInfo,\n  StageItemProps,\n  StageProps\n} from './LifeCycle.types';\n\nexport interface StageComponentProps extends BaseProps, StageProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Pass text for the task. */\n  value: string;\n  /* unique id of the component */\n  id: string;\n  /** Controls the styling of the stage. */\n  stageInfo: StageInfo;\n  /** Full data object which can be passed to the callback */\n  item: StageItemProps;\n  /* The status is used to show the input error status and the info on tooltip in case of error */\n  error?: string;\n}\n\nexport const StyledWrapper = styled.div`\n  overflow: hidden;\n`;\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStageButton = styled.button<{\n  error: string | undefined;\n}>(({ error, theme }) => {\n  return css`\n    height: ${theme.components.button.height};\n    outline: none;\n    border: none;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: start;\n    margin-inline-start: ${theme.base.spacing};\n\n    ${error &&\n    css`\n      margin-inline-start: 0;\n    `}\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  `;\n});\n\nStyledStageButton.defaultProps = defaultThemeProp;\n\nexport const StyledStageActions = styled.div`\n  z-index: 2;\n`;\n\nStyledStageActions.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n  return css`\n    margin-inline: calc(0.5 * ${theme.base.spacing});\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nexport const StyledStage = styled.div<\n  Pick<StageComponentProps, 'stageInfo'> & {\n    status: boolean;\n    error: string;\n  }\n>(({ stageInfo, theme, status, error }) => {\n  const {\n    visual: { bgColor, tailPointed, headPointed }\n  } = stageInfo;\n\n  const { rtl } = useDirection();\n  const contrastColor = readableColor(bgColor);\n  const roundedEndsStyles = css`\n    content: '';\n    position: absolute;\n    display: block;\n    width: calc(3 * ${theme.base.spacing});\n    height: calc(3 * ${theme.base.spacing});\n    top: calc(1 * ${theme.base.spacing});\n    border: 0;\n    border-inline-end: 0.0625rem solid transparent;\n  `;\n\n  return css`\n    position: relative;\n    padding: calc(0.5 * ${theme.base.spacing});\n    background: ${bgColor};\n    border: 0.0625rem solid transparent;\n    width: 100%;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus-within {\n      border: 0.0625rem solid ${theme.base.palette.interactive};\n\n      ${headPointed &&\n      css`\n        &::after {\n          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};\n          ${rtl\n            ? css`\n                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};\n              `\n            : css`\n                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};\n              `}\n        }\n      `}\n\n      ${tailPointed &&\n      css`\n        &::before {\n          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};\n          ${rtl\n            ? css`\n                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};\n              `\n            : css`\n                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};\n              `}\n        }\n      `}\n    }\n\n    ${headPointed &&\n    css`\n      &::after {\n        ${roundedEndsStyles}\n        z-index: 1;\n        background: inherit;\n        transform: rotateZ(-45deg) skew(-15deg, -15deg);\n        inset-inline-end: calc(1.6 * ${theme.base.spacing} * -1);\n        border-block-end: 0.0625rem solid transparent;\n        ${rtl\n          ? css`\n              border-radius: calc(0.75 * ${theme.base['border-radius']}) 0.1rem 0.1rem 0.1rem;\n            `\n          : css`\n              border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base['border-radius']})\n                0.0625rem;\n            `}\n      }\n    `}\n\n    ${tailPointed &&\n    css`\n      ${!error &&\n      css`\n        ${StyledStageButton} {\n          margin-inline-start: calc(1.5 * ${theme.base.spacing});\n        }\n      `}\n\n      ${error &&\n      css`\n        ${StyledWarnIcon} {\n          margin-inline-start: ${theme.base.spacing};\n        }\n      `}\n\n      &::before {\n        ${roundedEndsStyles}\n        background: ${theme.base.palette['app-background']};\n        transform: rotateZ(45deg) skew(15deg, 15deg);\n        inset-inline-start: calc(-1.6 * ${theme.base.spacing});\n        ${rtl\n          ? css`\n              border-block-end: 0.0625rem solid transparent;\n              border-radius: 0.0625rem 1rem 0.0625rem calc(0.75 * ${theme.base['border-radius']});\n            `\n          : css`\n              border-block-start: 0.0625rem solid transparent;\n              border-radius: 0.0625rem calc(0.75 * ${theme.base['border-radius']}) 0.0625rem 1rem;\n            `}\n      }\n    `}\n\n    ${StyledWarnIcon} {\n      color: ${contrastColor};\n    }\n\n    ${StyledStageActions} {\n      & > ${StyledButton} {\n        color: ${contrastColor};\n      }\n    }\n\n    ${StyledStageButton} {\n      color: ${contrastColor};\n      ${!status &&\n      css`\n        background: ${bgColor};\n      `}\n    }\n  `;\n});\n\nStyledStage.defaultProps = defaultThemeProp;\n\nconst Stage: FunctionComponent<StageComponentProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      actions,\n      stageInfo,\n      onClick,\n      id,\n      item,\n      error,\n      ...restProps\n    }: PropsWithChildren<StageComponentProps>,\n    ref: StageComponentProps['ref']\n  ) => {\n    const t = useI18n();\n    const [errorIcon, setErrorIcon] = useElement();\n\n    const onStageClick = (e: MouseEvent) => {\n      const actionParam: LifeCycleActionParam = {\n        value,\n        stage: item,\n        type: 'Stage'\n      };\n      onClick?.(actionParam, e);\n    };\n\n    const onActionItemClick = (\n      actionId: string,\n      e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n    ) => {\n      const param: LifeCycleActionParam = {\n        stage: item\n      };\n\n      if (actions) {\n        let actionsList: LifeCycleAction[] = [];\n\n        if (Array.isArray(actions)) {\n          actionsList = actions;\n        } else {\n          actionsList = actions[item.type];\n        }\n\n        actionsList?.forEach((actionItem: LifeCycleAction) => {\n          if (actionItem.id === actionId) {\n            actionItem.onClick?.(param, e);\n          }\n        });\n      }\n    };\n\n    /* Deep copy of actions object is required to provide consistent callback objects on actions */\n    const actionsClone: Action[] = [];\n\n    if (actions) {\n      let actionsList: LifeCycleAction[] = [];\n      if (Array.isArray(actions)) {\n        actionsList = actions;\n      } else {\n        actionsList = actions[item.type];\n      }\n\n      actionsList.forEach(actionItem => {\n        const actionCloneItem = {} as Action;\n        Object.keys(actionItem).forEach((key: string) => {\n          actionCloneItem[key] = actionItem[key];\n        });\n        actionCloneItem.onClick = onActionItemClick;\n        actionsClone.push(actionCloneItem);\n        return actionItem;\n      });\n    }\n\n    return (\n      <Flex\n        {...restProps}\n        container={{ inline: true, alignItems: 'center' }}\n        as={StyledStage}\n        ref={ref}\n        error={error}\n        stageInfo={stageInfo}\n        id={item.id}\n      >\n        {error && (\n          <>\n            <StyledWarnIcon\n              ref={setErrorIcon}\n              role='status'\n              tabIndex='0'\n              aria-label={t('item_error', [error])}\n              name='warn-solid'\n            />\n            <Tooltip target={errorIcon} aria-hidden={!!error} hideDelay='none'>\n              {error}\n            </Tooltip>\n          </>\n        )}\n        <Flex\n          as={StyledWrapper}\n          container={{ inline: true }}\n          item={{ grow: 1 }}\n          onClick={onStageClick}\n        >\n          <StyledStageButton error={error} aria-label={t('stage_name', [value])}>\n            {value}\n          </StyledStageButton>\n        </Flex>\n        <StyledStageActions>\n          {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n        </StyledStageActions>\n      </Flex>\n    );\n  }\n);\n\nexport default Stage;\n"]}
+{"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithChildren, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Flex,\n  BaseProps,\n  ForwardProps,\n  Actions,\n  defaultThemeProp,\n  useDirection,\n  Action,\n  StyledButton,\n  Icon,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport {\n  LifeCycleAction,\n  LifeCycleActionParam,\n  StageInfo,\n  StageItemProps,\n  StageProps\n} from './LifeCycle.types';\n\nexport interface StageComponentProps extends BaseProps, StageProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Pass text for the task. */\n  value: string;\n  /* unique id of the component */\n  id: string;\n  /** Controls the styling of the stage. */\n  stageInfo: StageInfo;\n  /** Full data object which can be passed to the callback */\n  item: StageItemProps;\n  /* The status is used to show the input error status and the info on tooltip in case of error */\n  error?: string;\n}\n\nexport const StyledWrapper = styled.div`\n  overflow: hidden;\n`;\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStageButton = styled.button<{\n  error: string | undefined;\n}>(({ error, theme }) => {\n  return css`\n    height: ${theme.components.button.height};\n    outline: none;\n    border: none;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: start;\n    margin-inline-start: ${theme.base.spacing};\n\n    ${error &&\n    css`\n      margin-inline-start: 0;\n    `}\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  `;\n});\n\nStyledStageButton.defaultProps = defaultThemeProp;\n\nexport const StyledStageActions = styled.div`\n  z-index: 2;\n`;\n\nStyledStageActions.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n  return css`\n    margin-inline: calc(0.5 * ${theme.base.spacing});\n\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nexport const StyledStage = styled.div<\n  Pick<StageComponentProps, 'stageInfo'> & {\n    status: boolean;\n    error: string;\n  }\n>(({ stageInfo, theme, status, error }) => {\n  const {\n    visual: { bgColor, tailPointed, headPointed }\n  } = stageInfo;\n\n  const { rtl } = useDirection();\n  const contrastColor = readableColor(bgColor);\n  const roundedEndsStyles = css`\n    content: '';\n    position: absolute;\n    display: block;\n    width: calc(3 * ${theme.base.spacing});\n    height: calc(3 * ${theme.base.spacing});\n    top: calc(1 * ${theme.base.spacing});\n    border: 0;\n    border-inline-end: 0.0625rem solid transparent;\n  `;\n\n  return css`\n    position: relative;\n    padding: calc(0.5 * ${theme.base.spacing});\n    background: ${bgColor};\n    border: 0.0625rem solid transparent;\n    width: 100%;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus-within {\n      border: 0.0625rem solid ${theme.base.palette.interactive};\n\n      ${headPointed &&\n      css`\n        &::after {\n          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};\n          ${rtl\n            ? css`\n                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};\n              `\n            : css`\n                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};\n              `}\n        }\n      `}\n\n      ${tailPointed &&\n      css`\n        &::before {\n          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};\n          ${rtl\n            ? css`\n                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};\n              `\n            : css`\n                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};\n              `}\n        }\n      `}\n    }\n\n    ${headPointed &&\n    css`\n      &::after {\n        ${roundedEndsStyles}\n        z-index: 1;\n        background: inherit;\n        transform: rotateZ(-45deg) skew(-15deg, -15deg);\n        inset-inline-end: calc(1.6 * ${theme.base.spacing} * -1);\n        border-block-end: 0.0625rem solid transparent;\n        ${rtl\n          ? css`\n              border-radius: calc(0.75 * ${theme.base['border-radius']}) 0.1rem 0.1rem 0.1rem;\n            `\n          : css`\n              border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base['border-radius']})\n                0.0625rem;\n            `}\n      }\n    `}\n\n    ${tailPointed &&\n    css`\n      ${!error &&\n      css`\n        ${StyledStageButton} {\n          margin-inline-start: calc(1.5 * ${theme.base.spacing});\n        }\n      `}\n\n      ${error &&\n      css`\n        ${StyledWarnIcon} {\n          margin-inline-start: ${theme.base.spacing};\n        }\n      `}\n\n      &::before {\n        ${roundedEndsStyles}\n        background: ${theme.base.palette['app-background']};\n        transform: rotateZ(45deg) skew(15deg, 15deg);\n        inset-inline-start: calc(-1.6 * ${theme.base.spacing});\n        ${rtl\n          ? css`\n              border-block-end: 0.0625rem solid transparent;\n              border-radius: 0.0625rem 1rem 0.0625rem calc(0.75 * ${theme.base['border-radius']});\n            `\n          : css`\n              border-block-start: 0.0625rem solid transparent;\n              border-radius: 0.0625rem calc(0.75 * ${theme.base['border-radius']}) 0.0625rem 1rem;\n            `}\n      }\n    `}\n\n    ${StyledWarnIcon} {\n      color: ${contrastColor};\n    }\n\n    ${StyledStageActions} {\n      & > ${StyledButton} {\n        color: ${contrastColor};\n      }\n    }\n\n    ${StyledStageButton} {\n      color: ${contrastColor};\n      ${!status &&\n      css`\n        background: ${bgColor};\n      `}\n    }\n  `;\n});\n\nStyledStage.defaultProps = defaultThemeProp;\n\nconst Stage: FunctionComponent<StageComponentProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      actions,\n      stageInfo,\n      onClick,\n      id,\n      item,\n      error,\n      ...restProps\n    }: PropsWithChildren<StageComponentProps>,\n    ref: StageComponentProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const onStageClick = (e: MouseEvent) => {\n      const actionParam: LifeCycleActionParam = {\n        value,\n        stage: item,\n        type: 'Stage'\n      };\n      onClick?.(actionParam, e);\n    };\n\n    const onActionItemClick = (\n      actionId: string,\n      e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n    ) => {\n      const param: LifeCycleActionParam = {\n        stage: item\n      };\n\n      if (actions) {\n        let actionsList: LifeCycleAction[] = [];\n\n        if (Array.isArray(actions)) {\n          actionsList = actions;\n        } else {\n          actionsList = actions[item.type];\n        }\n\n        actionsList?.forEach((actionItem: LifeCycleAction) => {\n          if (actionItem.id === actionId) {\n            actionItem.onClick?.(param, e);\n          }\n        });\n      }\n    };\n\n    /* Deep copy of actions object is required to provide consistent callback objects on actions */\n    const actionsClone: Action[] = [];\n\n    if (actions) {\n      let actionsList: LifeCycleAction[] = [];\n      if (Array.isArray(actions)) {\n        actionsList = actions;\n      } else {\n        actionsList = actions[item.type];\n      }\n\n      actionsList.forEach(actionItem => {\n        const actionCloneItem = {} as Action;\n        Object.keys(actionItem).forEach((key: string) => {\n          actionCloneItem[key] = actionItem[key];\n        });\n        actionCloneItem.onClick = onActionItemClick;\n        actionsClone.push(actionCloneItem);\n        return actionItem;\n      });\n    }\n\n    return (\n      <Flex\n        {...restProps}\n        container={{ inline: true, alignItems: 'center' }}\n        as={StyledStage}\n        ref={ref}\n        error={error}\n        stageInfo={stageInfo}\n        id={item.id}\n        aria-label={error ? t('stage_name_error', [value]) : undefined}\n      >\n        {error && <StyledWarnIcon name='warn-solid' />}\n        <Flex\n          as={StyledWrapper}\n          container={{ inline: true }}\n          item={{ grow: 1 }}\n          onClick={onStageClick}\n        >\n          <StyledStageButton\n            error={error}\n            aria-label={error ? undefined : t('stage_name', [value])}\n          >\n            {value}\n          </StyledStageButton>\n        </Flex>\n        <StyledStageActions>\n          {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n        </StyledStageActions>\n      </Flex>\n    );\n  }\n);\n\nexport default Stage;\n"]}

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

@@ -25,10 +25,11 @@ interface StepComponentProps extends BaseProps, StepProps {
 }
 export declare const StyledStepType: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<StepComponentProps, "visual">, never>;
 export declare const StyledStepBadge: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStepWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStep: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledStepWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     hasFocus: boolean;
+    selected: boolean;
 }, never>;
+export declare const StyledStep: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStepButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledWarnIcon: typeof Icon;
 declare const Step: FunctionComponent<StepComponentProps & ForwardProps>;

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,EAA2C,MAAM,OAAO,CAAC;AAI7F,OAAO,EAGL,SAAS,EACT,YAAY,EACZ,IAAI,EAQL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAY,SAAS,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EACL,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EAEjB,SAAS,EACV,MAAM,mBAAmB,CAAC;AAG3B,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX;;oDAEgD;IAChD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,SAAS,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,yIAkB1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAa1B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAK5B,CAAC;AAIH,eAAO,MAAM,UAAU;cAA0B,OAAO;SAmBtD,CAAC;AAYH,eAAO,MAAM,gBAAgB,4GAkB3B,CAAC;AAIH,eAAO,MAAM,cAAc,EAAE,OAAO,IAclC,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiI9D,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAI7F,OAAO,EAGL,SAAS,EACT,YAAY,EACZ,IAAI,EAOL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAY,SAAS,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EACL,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EAEjB,SAAS,EACV,MAAM,mBAAmB,CAAC;AAG3B,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX;;oDAEgD;IAChD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,SAAS,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,yIAkB1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAa1B,CAAC;AAIH,eAAO,MAAM,iBAAiB;cAClB,OAAO;cACP,OAAO;SAuBjB,CAAC;AAIH,eAAO,MAAM,UAAU,yGAUrB,CAAC;AAYH,eAAO,MAAM,gBAAgB,4GAkB3B,CAAC;AAIH,eAAO,MAAM,cAAc,EAAE,OAAO,IASlC,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAuH9D,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/LifeCycle/Step.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
-import { Flex, defaultThemeProp, Icon, Tooltip, useElement, Status, Actions, useI18n, Avatar } from '@pega/cosmos-react-core';
+import { Flex, defaultThemeProp, Icon, Status, Actions, useI18n, Avatar, useUID } from '@pega/cosmos-react-core';
 import { colorMap } from '../../utils';
 import LifeCycleContext from './LifeCycleContext';
 export const StyledStepType = styled.div(({ visual, theme }) => {
@@ -38,16 +38,10 @@ export const StyledStepBadge = styled.div(({ theme }) => {
   `;
 });
 StyledStepBadge.defaultProps = defaultThemeProp;
-export const StyledStepWrapper = styled.div(({ theme }) => {
+export const StyledStepWrapper = styled.div(({ hasFocus, theme, selected }) => {
     return css `
     width: 100%;
     margin: 0 0 calc(0.5 * ${theme.base.spacing});
-  `;
-});
-StyledStepWrapper.defaultProps = defaultThemeProp;
-export const StyledStep = styled.div(({ hasFocus, theme }) => {
-    return css `
-    background: ${theme.base.palette['secondary-background']};
     border: 0.125rem solid transparent;
     border-radius: calc(0.5 * ${theme.base['border-radius']});
 
@@ -59,9 +53,23 @@ export const StyledStep = styled.div(({ hasFocus, theme }) => {
     &:hover {
       cursor: pointer;
     }
+    ${selected &&
+        css `
+      &[aria-current='step'] {
+        border-color: ${theme.base.palette.interactive};
+      }
+    `}
+  `;
+});
+StyledStepWrapper.defaultProps = defaultThemeProp;
+export const StyledStep = styled.div(({ theme }) => {
+    return css `
+    background: ${theme.base.palette['secondary-background']};
+    border: 0.125rem solid transparent;
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
 
-    &[aria-current='step'] {
-      border-color: ${theme.base.palette.interactive};
+    &:hover {
+      cursor: pointer;
     }
   `;
 });
@@ -95,16 +103,11 @@ StyledStepButton.defaultProps = defaultThemeProp;
 export const StyledWarnIcon = styled(Icon)(({ theme }) => {
     return css `
     color: ${theme.base.palette.urgent};
-    margin-inline-end: ${theme.base.spacing};
+    margin-inline: ${theme.base.spacing};
 
     &:hover {
       cursor: pointer;
     }
-
-    &:focus {
-      outline: none;
-      box-shadow: ${theme.base.shadow.focus};
-    }
   `;
 });
 StyledWarnIcon.defaultProps = defaultThemeProp;
@@ -112,8 +115,6 @@ const Step = ({ value, id, visual, actions, badge, error, categoryItem, item, st
     const t = useI18n();
     const { selectedItemId } = useContext(LifeCycleContext);
     const [stepHasFocus, setStepHasFocus] = useState(false);
-    const [iconEl, setIconEl] = useElement();
-    const [errorIcon, setErrorIcon] = useElement();
     /* Need to check the value with statusProps */
     const onActionItemClick = (actionId, e) => {
         e.stopPropagation();
@@ -131,6 +132,7 @@ const Step = ({ value, id, visual, actions, badge, error, categoryItem, item, st
     };
     /* Deep copy of actions is required to provide consistent callback objects on actions */
     const actionsClone = [];
+    const buttonDescriptionId = useUID();
     if (actions) {
         actions.forEach(actionItem => {
             const actionCloneItem = {};
@@ -138,7 +140,10 @@ const Step = ({ value, id, visual, actions, badge, error, categoryItem, item, st
                 actionCloneItem[key] = actionItem[key];
             });
             actionCloneItem.onClick = onActionItemClick;
-            actionsClone.push(actionCloneItem);
+            if (error)
+                actionsClone.push(actionCloneItem);
+            else
+                actionsClone.push({ ...actionCloneItem, 'aria-describedby': buttonDescriptionId });
             return actionItem;
         });
     }
@@ -154,11 +159,11 @@ const Step = ({ value, id, visual, actions, badge, error, categoryItem, item, st
         };
         onClick?.(actionParam, e);
     };
-    return (_jsxs(Flex, { as: StyledStepWrapper, container: { inline: true, alignItems: 'center' }, children: [error && (_jsxs(_Fragment, { children: [_jsx(StyledWarnIcon, { role: 'status', tabIndex: '0', "aria-label": t('item_error', [error]), ref: setErrorIcon, name: 'warn-solid' }), _jsx(Tooltip, { target: errorIcon, "aria-hidden": !!error, hideDelay: 'none', children: error })] })), _jsxs(Flex, { as: StyledStep, container: { inline: true }, "aria-current": selectedItemId === id ? 'step' : undefined, error: error, id: id, item: { grow: 1 }, hasFocus: stepHasFocus && selectedItemId !== id, onClick: onStepClick, children: [_jsxs(StyledStepType, { visual: visual, ref: setIconEl, children: [visual.imgurl.length > 0 && (_jsx(Avatar, { name: visual.title, imageSrc: visual?.imgurl, shape: 'squircle', size: 'm' })), !visual.imgurl && _jsx(Icon, { name: visual.icon })] }), _jsx(Tooltip, { target: iconEl, children: visual.title }), _jsxs(Flex, { as: StyledStepButtonWrapper, item: { grow: 1 }, container: { inline: true, alignItems: 'center', justify: 'between' }, children: [_jsx(StyledStepButton, { ...restProps, onFocus: () => {
+    return (_jsxs(Flex, { as: StyledStepWrapper, id: `${id}-stepWrapper`, container: { inline: true, alignItems: 'center' }, "aria-current": selectedItemId === id ? 'step' : undefined, hasFocus: stepHasFocus && selectedItemId !== id, selected: selectedItemId === id, children: [error && _jsx(StyledWarnIcon, { name: 'warn-solid' }), _jsxs(Flex, { as: StyledStep, container: { inline: true }, id: id, item: { grow: 1 }, onClick: onStepClick, children: [_jsxs(StyledStepType, { visual: visual, children: [visual.imgurl.length > 0 && (_jsx(Avatar, { name: visual.title, imageSrc: visual?.imgurl, shape: 'squircle', size: 'm' })), !visual.imgurl && _jsx(Icon, { name: visual.icon })] }), _jsxs(Flex, { as: StyledStepButtonWrapper, item: { grow: 1 }, container: { inline: true, alignItems: 'center', justify: 'between' }, id: buttonDescriptionId, children: [_jsx(StyledStepButton, { ...restProps, onFocus: () => {
                                     setStepHasFocus(true);
                                 }, onBlur: () => {
                                     setStepHasFocus(false);
-                                }, "aria-label": t('step_name', [value]), children: value }), badge?.type && (_jsx(Flex, { as: StyledStepBadge, container: { inline: true, alignItems: 'center' }, children: _jsx(Status, { variant: badge?.type || 'success', children: badge?.label }) }))] }), actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true })] })] }));
+                                }, "aria-label": t(error ? 'step_name_error' : 'step_name', [value]), children: value }), badge?.type && (_jsx(Flex, { as: StyledStepBadge, container: { inline: true, alignItems: 'center' }, children: _jsx(Status, { variant: badge?.type || 'success', children: badge?.label }) }))] }), actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true })] })] }));
 };
 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":";AAAA,OAAO,EAAE,QAAQ,EAAkD,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,IAAI,EACJ,gBAAgB,EAGhB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,MAAM,EACN,OAAO,EACP,OAAO,EACP,MAAM,EAEP,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAa,MAAM,aAAa,CAAC;AAUlD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AA2BlD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CACtC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IACpB,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,aAAa,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7C,OAAO,MAAM,CAAC,MAAM;QAClB,CAAC,CAAC,GAAG,CAAA;;4CAEiC,KAAK,CAAC,IAAI,CAAC,OAAO;SACrD;QACH,CAAC,CAAC,GAAG,CAAA;wBACa,OAAO;+BACA,KAAK,CAAC,IAAI,CAAC,OAAO;kCACf,KAAK,CAAC,IAAI,CAAC,OAAO;mBACjC,aAAa;;uCAEO,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;SACzD,CAAC;AACR,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;4BACgB,KAAK,CAAC,IAAI,CAAC,OAAO;;;4BAGlB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;GAO3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;;6BAEiB,KAAK,CAAC,IAAI,CAAC,OAAO;GAC5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAwB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAClF,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;;gCAE5B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;MAErD,QAAQ;QACV,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;KACtC;;;;;;;sBAOiB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1E,OAAO,GAAG,CAAA;gCACoB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GACxD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;cAEE,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM;;;;;kBAK1B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;;;;;;;;;GASzD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpE,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;yBACb,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;oBAQvB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,IAAI,GAAyD,CAAC,EAClE,KAAK,EACL,EAAE,EACF,MAAM,EACN,OAAO,EACP,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EACwB,EAAE,EAAE;IACxC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACxD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,EAAE,CAAC;IACzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAE/C,8CAA8C;IAE9C,MAAM,iBAAiB,GAAG,CACxB,QAAgB,EAChB,CAAuE,EACvE,EAAE;QACF,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,KAAK,GAAyB;YAClC,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,YAAY;SACvB,CAAC;QACF,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE;YAC5B,IAAI,UAAU,CAAC,EAAE,KAAK,QAAQ,EAAE;gBAC9B,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;aAC9B;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,wFAAwF;IACxF,MAAM,YAAY,GAAa,EAAE,CAAC;IAElC,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC3B,MAAM,eAAe,GAAG,EAAY,CAAC;YACrC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,GAAW,EAAE,EAAE;gBAC9C,eAAe,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;YACzC,CAAC,CAAC,CAAC;YACH,eAAe,CAAC,OAAO,GAAG,iBAAiB,CAAC;YAC5C,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACnC,OAAO,UAAU,CAAC;QACpB,CAAC,CAAC,CAAC;KACJ;IAED,MAAM,WAAW,GAAG,CAAC,CAAa,EAAE,EAAE;QACpC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,WAAW,GAAyB;YACxC,KAAK;YACL,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,YAAY;YACtB,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,MAAM;SACb,CAAC;QACF,OAAO,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3E,KAAK,IAAI,CACR,8BACE,KAAC,cAAc,IACb,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,gBACA,CAAC,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC,EACpC,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,YAAY,GACjB,EACF,KAAC,OAAO,IAAC,MAAM,EAAE,SAAS,iBAAe,CAAC,CAAC,KAAK,EAAE,SAAS,EAAC,MAAM,YAC/D,KAAK,GACE,IACT,CACJ,EACD,MAAC,IAAI,IACH,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,kBACb,cAAc,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACxD,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,QAAQ,EAAE,YAAY,IAAI,cAAc,KAAK,EAAE,EAC/C,OAAO,EAAE,WAAW,aAEpB,MAAC,cAAc,IAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,aAC3C,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3B,KAAC,MAAM,IAAC,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,GAAG,GAAG,CACnF,EACA,CAAC,MAAM,CAAC,MAAM,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,IAC/B,EAEjB,KAAC,OAAO,IAAC,MAAM,EAAE,MAAM,YAAG,MAAM,CAAC,KAAK,GAAW,EAEjD,MAAC,IAAI,IACH,EAAE,EAAE,uBAAuB,EAC3B,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,aAErE,KAAC,gBAAgB,OACX,SAAS,EACb,OAAO,EAAE,GAAG,EAAE;oCACZ,eAAe,CAAC,IAAI,CAAC,CAAC;gCACxB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oCACX,eAAe,CAAC,KAAK,CAAC,CAAC;gCACzB,CAAC,gBACW,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,YAElC,KAAK,GACW,EAClB,KAAK,EAAE,IAAI,IAAI,CACd,KAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,YAC1E,KAAC,MAAM,IAAC,OAAO,EAAE,KAAK,EAAE,IAAI,IAAI,SAAS,YAAG,KAAK,EAAE,KAAK,GAAU,GAC7D,CACR,IACI,EACN,YAAY,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,SAAG,IAChE,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { useState, FunctionComponent, PropsWithoutRef, MouseEvent, useContext } 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  Actions,\n  useI18n,\n  Avatar,\n  Action\n} from '@pega/cosmos-react-core';\n\nimport { colorMap, ColorName } from '../../utils';\n\nimport {\n  TaskItemProps,\n  StepItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  LifeCycleActionParam,\n  StepProps\n} from './LifeCycle.types';\nimport LifeCycleContext from './LifeCycleContext';\n\ninterface StepComponentProps extends BaseProps, StepProps {\n  /** Pass text for the step. */\n  value: string;\n  /** unique id of step */\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: ColorName;\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<Pick<StepComponentProps, 'visual'>>(\n  ({ visual, theme }) => {\n    const bgColor = colorMap[visual.color];\n    const contrastColor = readableColor(bgColor);\n    return visual.imgurl\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\nStyledStepType.defaultProps = defaultThemeProp;\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\n    > span {\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n  `;\n});\n\nStyledStepBadge.defaultProps = defaultThemeProp;\n\nexport const StyledStepWrapper = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    margin: 0 0 calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledStepWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.div<{ hasFocus: boolean }>(({ hasFocus, theme }) => {\n  return css`\n    background: ${theme.base.palette['secondary-background']};\n    border: 0.125rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n    ${hasFocus &&\n    css`\n      box-shadow: ${theme.base.shadow.focus};\n    `}\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &[aria-current='step'] {\n      border-color: ${theme.base.palette.interactive};\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nconst StyledStepButtonWrapper = styled.div<{ error: string }>(({ theme }) => {\n  return css`\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n  `;\n});\n\nStyledStepButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStepButton = styled.button(({ theme }) => {\n  return css`\n    border: none;\n    height: ${theme.components.button.height};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: start;\n    background: ${theme.base.palette['secondary-background']};\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus {\n      outline: none;\n    }\n  `;\n});\n\nStyledStepButton.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-end: ${theme.base.spacing};\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst Step: FunctionComponent<StepComponentProps & ForwardProps> = ({\n  value,\n  id,\n  visual,\n  actions,\n  badge,\n  error,\n  categoryItem,\n  item,\n  stageItem,\n  taskItem,\n  onClick,\n  ...restProps\n}: PropsWithoutRef<StepComponentProps>) => {\n  const t = useI18n();\n  const { selectedItemId } = useContext(LifeCycleContext);\n  const [stepHasFocus, setStepHasFocus] = useState(false);\n  const [iconEl, setIconEl] = useElement();\n  const [errorIcon, setErrorIcon] = useElement();\n\n  /* Need to check the value with statusProps */\n\n  const onActionItemClick = (\n    actionId: string,\n    e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n  ) => {\n    e.stopPropagation();\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 onStepClick = (e: MouseEvent) => {\n    e.stopPropagation();\n    const actionParam: LifeCycleActionParam = {\n      value,\n      step: item,\n      task: taskItem,\n      category: categoryItem,\n      stage: stageItem,\n      type: 'Step'\n    };\n    onClick?.(actionParam, e);\n  };\n\n  return (\n    <Flex as={StyledStepWrapper} container={{ inline: true, alignItems: 'center' }}>\n      {error && (\n        <>\n          <StyledWarnIcon\n            role='status'\n            tabIndex='0'\n            aria-label={t('item_error', [error])}\n            ref={setErrorIcon}\n            name='warn-solid'\n          />\n          <Tooltip target={errorIcon} aria-hidden={!!error} hideDelay='none'>\n            {error}\n          </Tooltip>\n        </>\n      )}\n      <Flex\n        as={StyledStep}\n        container={{ inline: true }}\n        aria-current={selectedItemId === id ? 'step' : undefined}\n        error={error}\n        id={id}\n        item={{ grow: 1 }}\n        hasFocus={stepHasFocus && selectedItemId !== id}\n        onClick={onStepClick}\n      >\n        <StyledStepType visual={visual} ref={setIconEl}>\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        </StyledStepType>\n\n        <Tooltip target={iconEl}>{visual.title}</Tooltip>\n\n        <Flex\n          as={StyledStepButtonWrapper}\n          item={{ grow: 1 }}\n          container={{ inline: true, alignItems: 'center', justify: 'between' }}\n        >\n          <StyledStepButton\n            {...restProps}\n            onFocus={() => {\n              setStepHasFocus(true);\n            }}\n            onBlur={() => {\n              setStepHasFocus(false);\n            }}\n            aria-label={t('step_name', [value])}\n          >\n            {value}\n          </StyledStepButton>\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        {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n      </Flex>\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 { useState, FunctionComponent, PropsWithoutRef, MouseEvent, useContext } 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  Status,\n  Actions,\n  useI18n,\n  Avatar,\n  Action,\n  useUID\n} from '@pega/cosmos-react-core';\n\nimport { colorMap, ColorName } from '../../utils';\n\nimport {\n  TaskItemProps,\n  StepItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  LifeCycleActionParam,\n  StepProps\n} from './LifeCycle.types';\nimport LifeCycleContext from './LifeCycleContext';\n\ninterface StepComponentProps extends BaseProps, StepProps {\n  /** Pass text for the step. */\n  value: string;\n  /** unique id of step */\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: ColorName;\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<Pick<StepComponentProps, 'visual'>>(\n  ({ visual, theme }) => {\n    const bgColor = colorMap[visual.color];\n    const contrastColor = readableColor(bgColor);\n    return visual.imgurl\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\nStyledStepType.defaultProps = defaultThemeProp;\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\n    > span {\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n  `;\n});\n\nStyledStepBadge.defaultProps = defaultThemeProp;\n\nexport const StyledStepWrapper = styled.div<{\n  hasFocus: boolean;\n  selected: boolean;\n}>(({ hasFocus, theme, selected }) => {\n  return css`\n    width: 100%;\n    margin: 0 0 calc(0.5 * ${theme.base.spacing});\n    border: 0.125rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n    ${hasFocus &&\n    css`\n      box-shadow: ${theme.base.shadow.focus};\n    `}\n\n    &:hover {\n      cursor: pointer;\n    }\n    ${selected &&\n    css`\n      &[aria-current='step'] {\n        border-color: ${theme.base.palette.interactive};\n      }\n    `}\n  `;\n});\n\nStyledStepWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.div(({ theme }) => {\n  return css`\n    background: ${theme.base.palette['secondary-background']};\n    border: 0.125rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nconst StyledStepButtonWrapper = styled.div<{ error: string }>(({ theme }) => {\n  return css`\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n  `;\n});\n\nStyledStepButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStepButton = styled.button(({ theme }) => {\n  return css`\n    border: none;\n    height: ${theme.components.button.height};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: start;\n    background: ${theme.base.palette['secondary-background']};\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus {\n      outline: none;\n    }\n  `;\n});\n\nStyledStepButton.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline: ${theme.base.spacing};\n\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst Step: FunctionComponent<StepComponentProps & ForwardProps> = ({\n  value,\n  id,\n  visual,\n  actions,\n  badge,\n  error,\n  categoryItem,\n  item,\n  stageItem,\n  taskItem,\n  onClick,\n  ...restProps\n}: PropsWithoutRef<StepComponentProps>) => {\n  const t = useI18n();\n  const { selectedItemId } = useContext(LifeCycleContext);\n  const [stepHasFocus, setStepHasFocus] = useState(false);\n\n  /* Need to check the value with statusProps */\n\n  const onActionItemClick = (\n    actionId: string,\n    e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n  ) => {\n    e.stopPropagation();\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  const buttonDescriptionId: string = useUID();\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      if (error) actionsClone.push(actionCloneItem);\n      else actionsClone.push({ ...actionCloneItem, 'aria-describedby': buttonDescriptionId });\n      return actionItem;\n    });\n  }\n\n  const onStepClick = (e: MouseEvent) => {\n    e.stopPropagation();\n    const actionParam: LifeCycleActionParam = {\n      value,\n      step: item,\n      task: taskItem,\n      category: categoryItem,\n      stage: stageItem,\n      type: 'Step'\n    };\n    onClick?.(actionParam, e);\n  };\n\n  return (\n    <Flex\n      as={StyledStepWrapper}\n      id={`${id}-stepWrapper`}\n      container={{ inline: true, alignItems: 'center' }}\n      aria-current={selectedItemId === id ? 'step' : undefined}\n      hasFocus={stepHasFocus && selectedItemId !== id}\n      selected={selectedItemId === id}\n    >\n      {error && <StyledWarnIcon name='warn-solid' />}\n      <Flex\n        as={StyledStep}\n        container={{ inline: true }}\n        id={id}\n        item={{ grow: 1 }}\n        onClick={onStepClick}\n      >\n        <StyledStepType visual={visual}>\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        </StyledStepType>\n\n        <Flex\n          as={StyledStepButtonWrapper}\n          item={{ grow: 1 }}\n          container={{ inline: true, alignItems: 'center', justify: 'between' }}\n          id={buttonDescriptionId}\n        >\n          <StyledStepButton\n            {...restProps}\n            onFocus={() => {\n              setStepHasFocus(true);\n            }}\n            onBlur={() => {\n              setStepHasFocus(false);\n            }}\n            aria-label={t(error ? 'step_name_error' : 'step_name', [value])}\n          >\n            {value}\n          </StyledStepButton>\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        {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Step;\n"]}

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,EAEL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,SAAS,EACT,YAAY,EAEZ,IAAI,EASL,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EACL,aAAa,EACb,cAAc,EAEd,iBAAiB,EAEjB,SAAS,EACT,SAAS,EACV,MAAM,mBAAmB,CAAC;AAG3B,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,+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,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,wGASzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAK3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAI5B,CAAC;AAEH,eAAO,MAAM,gBAAgB,4GAkB3B,CAAC;AAIH,eAAO,MAAM,UAAU;cAA8B,OAAO;SAoB1D,CAAC;AAIH,eAAO,MAAM,cAAc,EAAE,OAAO,IAclC,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAsL9D,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Task.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,SAAS,EACT,YAAY,EAEZ,IAAI,EAQL,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EACL,aAAa,EACb,cAAc,EAEd,iBAAiB,EAEjB,SAAS,EACT,SAAS,EACV,MAAM,mBAAmB,CAAC;AAG3B,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,+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,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,wGASzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAK3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAI5B,CAAC;AAEH,eAAO,MAAM,gBAAgB,4GAkB3B,CAAC;AAIH,eAAO,MAAM,UAAU;cAA8B,OAAO;SAoB1D,CAAC;AAIH,eAAO,MAAM,cAAc,EAAE,OAAO,IASlC,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAwK9D,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/LifeCycle/Task.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useCallback, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, defaultThemeProp, Button, Icon, Tooltip, useElement, Actions, useI18n, Avatar, useOuterEvent, useEscape } from '@pega/cosmos-react-core';
+import { Flex, defaultThemeProp, Button, Icon, useElement, Actions, useI18n, Avatar, useOuterEvent, useEscape } from '@pega/cosmos-react-core';
 import { ItemLibrary } from '../ItemLibrary';
 import Step from './Step';
 import LifeCycleContext from './LifeCycleContext';
@@ -73,16 +73,11 @@ StyledTask.defaultProps = defaultThemeProp;
 export const StyledWarnIcon = styled(Icon)(({ theme }) => {
     return css `
     color: ${theme.base.palette.urgent};
-    margin-inline-end: ${theme.base.spacing};
+    margin-inline: ${theme.base.spacing};
 
     &:hover {
       cursor: pointer;
     }
-
-    &:focus {
-      outline: none;
-      box-shadow: ${theme.base.shadow.focus};
-    }
   `;
 });
 StyledWarnIcon.defaultProps = defaultThemeProp;
@@ -93,7 +88,6 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
     const [showLibrary, setLibrary] = useState(false);
     const [popoverEl, setPopoverEl] = useElement(null);
     const [addEl, setAddEl] = useElement();
-    const [errorIcon, setErrorIcon] = useElement();
     const onActionItemClick = (actionId, e) => {
         const param = {
             task: item,
@@ -142,11 +136,11 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
         setLibrary(false);
     });
     useOuterEvent('mousedown', [addEl, popoverEl], () => setLibrary(false));
-    return (_jsx(StyledTaskList, { ...restProps, id: item.id, children: _jsxs(Flex, { as: StyledTask, "aria-current": selectedItemId === id ? 'true' : undefined, container: { direction: 'column' }, id: `${id}-task`, hasFocus: taskHasFocus && selectedItemId !== id, children: [_jsxs(Flex, { as: StyledCardHeader, container: { inline: true, alignItems: 'center' }, children: [visual?.imgurl.length > 0 && _jsx(Avatar, { name: value, imageSrc: visual?.imgurl }), error && (_jsxs(_Fragment, { children: [_jsx(StyledWarnIcon, { ref: setErrorIcon, role: 'status', tabIndex: '0', "aria-label": t('item_error', [error]), name: 'warn-solid' }), _jsx(Tooltip, { target: errorIcon, "aria-hidden": !!error, hideDelay: 'none', children: error })] })), _jsx(Flex, { item: { grow: 1 }, container: { inline: true, alignItems: 'center' }, onClick: onTaskClick, children: _jsx(StyledTaskButton, { onFocus: () => {
+    return (_jsx(StyledTaskList, { ...restProps, id: item.id, children: _jsxs(Flex, { as: StyledTask, "aria-current": selectedItemId === id ? 'true' : undefined, container: { direction: 'column' }, id: `${id}-task`, hasFocus: taskHasFocus && selectedItemId !== id, children: [_jsxs(Flex, { as: StyledCardHeader, container: { inline: true, alignItems: 'center' }, children: [visual?.imgurl.length > 0 && _jsx(Avatar, { name: value, imageSrc: visual?.imgurl }), error && _jsx(StyledWarnIcon, { name: 'warn-solid' }), _jsx(Flex, { item: { grow: 1 }, container: { inline: true, alignItems: 'center' }, onClick: onTaskClick, children: _jsx(StyledTaskButton, { onFocus: () => {
                                     setTaskHasFocus(true);
                                 }, onBlur: () => {
                                     setTaskHasFocus(false);
-                                }, "aria-label": t('process_name', [value]), children: value }) }), actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true })] }), _jsxs(StyledCardContent, { children: [item?.steps.map((steps) => {
+                                }, "aria-label": t(error ? 'process_name_error' : 'process_name', [value]), children: value }) }), actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true })] }), _jsxs(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":";AAAA,OAAO,EACL,QAAQ,EAIR,WAAW,EACX,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,gBAAgB,EAGhB,MAAM,EACN,IAAI,EAEJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,OAAO,EACP,MAAM,EACN,aAAa,EACb,SAAS,EACV,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,IAAI,MAAM,QAAQ,CAAC;AAU1B,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAuBlD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAKvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;6BAEiB,KAAK,CAAC,IAAI,CAAC,OAAO;GAC5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC/C,OAAO,GAAG,CAAA;;GAET,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;cAE5C,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;;GAazC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAwB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACtF,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;gCAE1B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;oBACvC,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEhC,QAAQ;QACV,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;KACtC;;;;;;;sBAOiB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpE,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;yBACb,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;oBAQvB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,IAAI,GAAyD,CAAC,EAClE,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAS,EACT,OAAO,EACP,YAAY,EACZ,EAAE,EACF,IAAI,EAAE,QAAQ,EACd,WAAW,EACX,GAAG,SAAS,EAC0B,EAAE,EAAE;IAC1C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAClE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,EAAE,CAAC;IACvC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAE/C,MAAM,iBAAiB,GAAG,CACxB,QAAgB,EAChB,CAAuE,EACvE,EAAE;QACF,MAAM,KAAK,GAAyB;YAClC,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,YAAY;SACvB,CAAC;QACF,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE;YAC5B,IAAI,UAAU,CAAC,EAAE,KAAK,QAAQ,EAAE;gBAC9B,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;aAC9B;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,wFAAwF;IACxF,MAAM,YAAY,GAAa,EAAE,CAAC;IAElC,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC3B,MAAM,eAAe,GAAG,EAAY,CAAC;YACrC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,GAAW,EAAE,EAAE;gBAC9C,eAAe,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;YACzC,CAAC,CAAC,CAAC;YACH,eAAe,CAAC,OAAO,GAAG,iBAAiB,CAAC;YAC5C,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACnC,OAAO,UAAU,CAAC;QACpB,CAAC,CAAC,CAAC;KACJ;IAED,MAAM,WAAW,GAAG,CAAC,CAAa,EAAE,EAAE;QACpC,MAAM,WAAW,GAAyB;YACxC,KAAK;YACL,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,YAAY;YACtB,IAAI,EAAE,MAAM;SACb,CAAC;QACF,OAAO,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,OAAoB,EAAE,EAAE;QACvB,MAAM,KAAK,GAAyB;YAClC,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,YAAY;SACvB,CAAC;QACF,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAC5B,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,aAAa,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IAExE,OAAO,CACL,KAAC,cAAc,OAAK,SAAS,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,YACxC,MAAC,IAAI,IACH,EAAE,EAAE,UAAU,kBACA,cAAc,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACxD,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,GAAG,EAAE,OAAO,EAChB,QAAQ,EAAE,YAAY,IAAI,cAAc,KAAK,EAAE,aAE/C,MAAC,IAAI,IAAC,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC1E,MAAM,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,MAAM,IAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,EAC9E,KAAK,IAAI,CACR,8BACE,KAAC,cAAc,IACb,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,gBACA,CAAC,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC,EACpC,IAAI,EAAC,YAAY,GACjB,EACF,KAAC,OAAO,IAAC,MAAM,EAAE,SAAS,iBAAe,CAAC,CAAC,KAAK,EAAE,SAAS,EAAC,MAAM,YAC/D,KAAK,GACE,IACT,CACJ,EACD,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,EACjD,OAAO,EAAE,WAAW,YAEpB,KAAC,gBAAgB,IACf,OAAO,EAAE,GAAG,EAAE;oCACZ,eAAe,CAAC,IAAI,CAAC,CAAC;gCACxB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oCACX,eAAe,CAAC,KAAK,CAAC,CAAC;gCACzB,CAAC,gBACW,CAAC,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,CAAC,YAErC,KAAK,GACW,GACd,EACN,YAAY,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,SAAG,IAChE,EACP,MAAC,iBAAiB,eACf,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,KAAoB,EAAE,EAAE;4BACxC,MAAM,WAAW,GAAG,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;4BACjE,MAAM,UAAU,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;4BAClE,OAAO,CACL,KAAC,IAAI,IAEH,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE;oCACN,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;oCAC3B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;oCACzB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;oCACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;iCAC1B,EACD,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;oCACL,IAAI,EAAE,WAAW;oCACjB,KAAK,EAAE,UAAU;iCAClB,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,YAAY,EAAE,YAAY,KACtB,QAAQ,IAlBP,KAAK,CAAC,EAAE,CAmBb,CACH,CAAC;wBACJ,CAAC,CAAC,EACD,CAAC,QAAQ,IAAI,CACZ,8BACE,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC,YAAY,CAAC,CAAC,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EACxC,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,EACT,KAAC,WAAW,IACV,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,KAAoB,EAC5B,OAAO,EAAE,mBAAmB,EAC5B,GAAG,EAAE,YAAY,EACjB,WAAW,EAAE,CAAC,CAAC,cAAc,CAAC,GAC9B,IACD,CACJ,IACiB,IACf,GACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n  useState,\n  FunctionComponent,\n  PropsWithChildren,\n  MouseEvent,\n  useCallback,\n  useContext\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  useI18n,\n  Avatar,\n  useOuterEvent,\n  useEscape\n} from '@pega/cosmos-react-core';\n\nimport { LibraryItem, ItemLibrary } from '../ItemLibrary';\n\nimport Step from './Step';\nimport {\n  TaskItemProps,\n  StageItemProps,\n  StepItemProps,\n  CategoryItemProps,\n  LifeCycleActionParam,\n  StepProps,\n  TaskProps\n} from './LifeCycle.types';\nimport LifeCycleContext from './LifeCycleContext';\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  /** unique id of task */\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\n    &:last-child > article {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\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});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(() => {\n  return css`\n    padding: 0;\n  `;\n});\n\nexport const StyledTaskButton = styled.button(({ theme }) => {\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    border: none;\n    height: ${theme.components.button.height};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: start;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus {\n      outline: none;\n    }\n  `;\n});\n\nStyledTaskButton.defaultProps = defaultThemeProp;\n\nexport const StyledTask = styled.article<{ hasFocus: boolean }>(({ hasFocus, theme }) => {\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    border: 0.125rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    padding: calc(${theme.base.spacing} - 0.125rem);\n\n    ${hasFocus &&\n    css`\n      box-shadow: ${theme.base.shadow.focus};\n    `}\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &[aria-current='true'] {\n      border-color: ${theme.base.palette.interactive};\n    }\n  `;\n});\n\nStyledTask.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-end: ${theme.base.spacing};\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst Task: FunctionComponent<TaskComponentProps & ForwardProps> = ({\n  value,\n  visual,\n  actions,\n  item,\n  addStepTitle,\n  addTask,\n  stageItem,\n  error,\n  onAddStep,\n  onClick,\n  categoryItem,\n  id,\n  step: stepProp,\n  nodeLibrary,\n  ...restProps\n}: PropsWithChildren<TaskComponentProps>) => {\n  const t = useI18n();\n  const { selectedItemId, readOnly } = useContext(LifeCycleContext);\n  const [taskHasFocus, setTaskHasFocus] = useState(false);\n  const [showLibrary, setLibrary] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const [addEl, setAddEl] = useElement();\n  const [errorIcon, setErrorIcon] = useElement();\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 onTaskClick = (e: MouseEvent) => {\n    const actionParam: LifeCycleActionParam = {\n      value,\n      task: item,\n      stage: stageItem,\n      category: categoryItem,\n      type: 'Task'\n    };\n    onClick?.(actionParam, e);\n  };\n\n  const onLibraryItemSelect = useCallback(\n    (libItem: LibraryItem) => {\n      const param: LifeCycleActionParam = {\n        task: item,\n        stage: stageItem,\n        category: categoryItem\n      };\n      onAddStep?.(param, libItem);\n      setLibrary(false);\n    },\n    [onAddStep]\n  );\n\n  useEscape(() => {\n    setLibrary(false);\n  });\n\n  useOuterEvent('mousedown', [addEl, popoverEl], () => setLibrary(false));\n\n  return (\n    <StyledTaskList {...restProps} id={item.id}>\n      <Flex\n        as={StyledTask}\n        aria-current={selectedItemId === id ? 'true' : undefined}\n        container={{ direction: 'column' }}\n        id={`${id}-task`}\n        hasFocus={taskHasFocus && selectedItemId !== id}\n      >\n        <Flex as={StyledCardHeader} container={{ inline: true, alignItems: 'center' }}>\n          {visual?.imgurl.length > 0 && <Avatar name={value} imageSrc={visual?.imgurl} />}\n          {error && (\n            <>\n              <StyledWarnIcon\n                ref={setErrorIcon}\n                role='status'\n                tabIndex='0'\n                aria-label={t('item_error', [error])}\n                name='warn-solid'\n              />\n              <Tooltip target={errorIcon} aria-hidden={!!error} hideDelay='none'>\n                {error}\n              </Tooltip>\n            </>\n          )}\n          <Flex\n            item={{ grow: 1 }}\n            container={{ inline: true, alignItems: 'center' }}\n            onClick={onTaskClick}\n          >\n            <StyledTaskButton\n              onFocus={() => {\n                setTaskHasFocus(true);\n              }}\n              onBlur={() => {\n                setTaskHasFocus(false);\n              }}\n              aria-label={t('process_name', [value])}\n            >\n              {value}\n            </StyledTaskButton>\n          </Flex>\n          {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n        </Flex>\n        <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          {!readOnly && (\n            <>\n              <Button\n                variant='simple'\n                ref={setAddEl}\n                label={t('add_noun', [addStepTitle])}\n                onClick={() => setLibrary(prev => !prev)}\n                icon\n              >\n                <Icon name='plus' />\n              </Button>\n              <ItemLibrary\n                items={nodeLibrary}\n                show={showLibrary}\n                target={addEl as HTMLElement}\n                onClick={onLibraryItemSelect}\n                ref={setPopoverEl}\n                placeholder={t('search_nodes')}\n              />\n            </>\n          )}\n        </StyledCardContent>\n      </Flex>\n    </StyledTaskList>\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  MouseEvent,\n  useCallback,\n  useContext\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  useElement,\n  Actions,\n  useI18n,\n  Avatar,\n  useOuterEvent,\n  useEscape\n} from '@pega/cosmos-react-core';\n\nimport { LibraryItem, ItemLibrary } from '../ItemLibrary';\n\nimport Step from './Step';\nimport {\n  TaskItemProps,\n  StageItemProps,\n  StepItemProps,\n  CategoryItemProps,\n  LifeCycleActionParam,\n  StepProps,\n  TaskProps\n} from './LifeCycle.types';\nimport LifeCycleContext from './LifeCycleContext';\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  /** unique id of task */\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\n    &:last-child > article {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\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});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(() => {\n  return css`\n    padding: 0;\n  `;\n});\n\nexport const StyledTaskButton = styled.button(({ theme }) => {\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    border: none;\n    height: ${theme.components.button.height};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: start;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus {\n      outline: none;\n    }\n  `;\n});\n\nStyledTaskButton.defaultProps = defaultThemeProp;\n\nexport const StyledTask = styled.article<{ hasFocus: boolean }>(({ hasFocus, theme }) => {\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    border: 0.125rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    padding: calc(${theme.base.spacing} - 0.125rem);\n\n    ${hasFocus &&\n    css`\n      box-shadow: ${theme.base.shadow.focus};\n    `}\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &[aria-current='true'] {\n      border-color: ${theme.base.palette.interactive};\n    }\n  `;\n});\n\nStyledTask.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline: ${theme.base.spacing};\n\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\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  onClick,\n  categoryItem,\n  id,\n  step: stepProp,\n  nodeLibrary,\n  ...restProps\n}: PropsWithChildren<TaskComponentProps>) => {\n  const t = useI18n();\n  const { selectedItemId, readOnly } = useContext(LifeCycleContext);\n  const [taskHasFocus, setTaskHasFocus] = useState(false);\n  const [showLibrary, setLibrary] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const [addEl, setAddEl] = useElement();\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 onTaskClick = (e: MouseEvent) => {\n    const actionParam: LifeCycleActionParam = {\n      value,\n      task: item,\n      stage: stageItem,\n      category: categoryItem,\n      type: 'Task'\n    };\n    onClick?.(actionParam, e);\n  };\n\n  const onLibraryItemSelect = useCallback(\n    (libItem: LibraryItem) => {\n      const param: LifeCycleActionParam = {\n        task: item,\n        stage: stageItem,\n        category: categoryItem\n      };\n      onAddStep?.(param, libItem);\n      setLibrary(false);\n    },\n    [onAddStep]\n  );\n\n  useEscape(() => {\n    setLibrary(false);\n  });\n\n  useOuterEvent('mousedown', [addEl, popoverEl], () => setLibrary(false));\n\n  return (\n    <StyledTaskList {...restProps} id={item.id}>\n      <Flex\n        as={StyledTask}\n        aria-current={selectedItemId === id ? 'true' : undefined}\n        container={{ direction: 'column' }}\n        id={`${id}-task`}\n        hasFocus={taskHasFocus && selectedItemId !== id}\n      >\n        <Flex as={StyledCardHeader} container={{ inline: true, alignItems: 'center' }}>\n          {visual?.imgurl.length > 0 && <Avatar name={value} imageSrc={visual?.imgurl} />}\n          {error && <StyledWarnIcon name='warn-solid' />}\n          <Flex\n            item={{ grow: 1 }}\n            container={{ inline: true, alignItems: 'center' }}\n            onClick={onTaskClick}\n          >\n            <StyledTaskButton\n              onFocus={() => {\n                setTaskHasFocus(true);\n              }}\n              onBlur={() => {\n                setTaskHasFocus(false);\n              }}\n              aria-label={t(error ? 'process_name_error' : 'process_name', [value])}\n            >\n              {value}\n            </StyledTaskButton>\n          </Flex>\n          {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n        </Flex>\n        <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          {!readOnly && (\n            <>\n              <Button\n                variant='simple'\n                ref={setAddEl}\n                label={t('add_noun', [addStepTitle])}\n                onClick={() => setLibrary(prev => !prev)}\n                icon\n              >\n                <Icon name='plus' />\n              </Button>\n              <ItemLibrary\n                items={nodeLibrary}\n                show={showLibrary}\n                target={addEl as HTMLElement}\n                onClick={onLibraryItemSelect}\n                ref={setPopoverEl}\n                placeholder={t('search_nodes')}\n              />\n            </>\n          )}\n        </StyledCardContent>\n      </Flex>\n    </StyledTaskList>\n  );\n};\n\nexport default Task;\n"]}

package/lib/components/ObjectSelect/ObjectSummary.d.ts

@@ -4,7 +4,7 @@ import { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/D
 interface ObjectSummaryValueProps {
     id: MenuItemProps['id'];
     primary: MenuItemProps['primary'];
-    href: string;
+    href?: string;
     meta?: string;
 }
 interface ObjectConfigProps extends Pick<BaseDialogProps, 'heading' | 'placement' | 'children' | 'ref'> {

package/lib/components/ObjectSelect/ObjectSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,GAAG,EAAE,eAAe,EAAE,UAAU,EAAsB,MAAM,OAAO,CAAC;AAG7F,OAAO,EACL,SAAS,EAIT,YAAY,EAGZ,gBAAgB,EAChB,aAAa,EAUb,eAAe,EAGhB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAI7F,UAAU,uBAAuB;IAC/B,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBACR,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,KAAK,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACpF,KAAK,EAAE,uBAAuB,CAAC;IAC/B,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,QAAQ,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/D,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC1B;AAsDD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAgIzE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ObjectSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,GAAG,EAAE,eAAe,EAAE,UAAU,EAAsB,MAAM,OAAO,CAAC;AAG7F,OAAO,EACL,SAAS,EAIT,YAAY,EAGZ,gBAAgB,EAChB,aAAa,EAUb,eAAe,EAGhB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAI7F,UAAU,uBAAuB;IAC/B,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBACR,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,KAAK,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACpF,KAAK,EAAE,uBAAuB,CAAC;IAC/B,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,QAAQ,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/D,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC1B;AAsDD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAkIzE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ObjectSelect/ObjectSummary.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { SummaryItem, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, useDirection, useElement, Link, defaultThemeProp, StyledLink, FormDialog, InfoDialog } from '@pega/cosmos-react-core';
+import { SummaryItem, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, useElement, Link, defaultThemeProp, StyledLink, useUID, FormDialog, InfoDialog } from '@pega/cosmos-react-core';
 import * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';
 registerIcon(times, gear);
@@ -38,7 +38,7 @@ ScrollContainer.defaultProps = defaultThemeProp;
 const ObjectSummary = forwardRef(({ value, configuration, label, disabled, status, readOnly, onDelete, onPreview, onLinkClick, ...restProps }, ref) => {
     const [configTarget, setConfigTarget] = useElement();
     const t = useI18n();
-    const { rtl } = useDirection();
+    const describedById = useUID();
     useEffect(() => {
         if (configTarget)
             configuration?.onOpen?.();
@@ -48,7 +48,7 @@ const ObjectSummary = forwardRef(({ value, configuration, label, disabled, statu
             return null;
         const commonProps = {
             heading: configuration.heading,
-            placement: rtl ? 'bottom-end' : 'bottom-start',
+            placement: 'auto',
             target: configTarget,
             progress: configuration.loading,
             ref: configuration.ref,
@@ -70,10 +70,10 @@ const ObjectSummary = forwardRef(({ value, configuration, label, disabled, statu
                     }
                 });
             } }));
-    }, [configTarget, configuration, disabled, readOnly, rtl]);
-    return (_jsx(FormField, { ...restProps, ref: ref, label: label, status: status, disabled: disabled, children: _jsx(SummaryItem, { as: StyledObjectSummary, status: status, meta: value.meta, readOnly: readOnly, overflowStrategy: 'ellipsis', primary: disabled ? (_jsx(Text, { children: value.primary })) : (_jsx(Link, { href: value.href, "aria-label": `${label} ${value.primary}`, previewable: true, onPreview: onPreview, onClick: onLinkClick ? (e) => onLinkClick(value.id, e) : undefined, children: value.primary })), secondary: value.meta && _jsx(StyledMetaText, { variant: 'secondary', children: value.meta }), actions: _jsxs(_Fragment, { children: [configuration && (_jsx(Button, { disabled: disabled, label: configuration?.label, icon: true, variant: 'simple', onClick: (e) => {
+    }, [configTarget, configuration, disabled, readOnly]);
+    return (_jsx(FormField, { ...restProps, ref: ref, label: label, status: status, disabled: disabled, children: _jsx(SummaryItem, { as: StyledObjectSummary, status: status, meta: value.meta, readOnly: readOnly, overflowStrategy: 'ellipsis', primary: disabled || !value.href ? (_jsx(Text, { id: describedById, children: value.primary })) : (_jsx(Link, { href: value.href, "aria-label": `${label} ${value.primary}`, previewable: true, onPreview: onPreview, onClick: onLinkClick ? (e) => onLinkClick(value.id, e) : undefined, children: value.primary })), secondary: value.meta && _jsx(StyledMetaText, { variant: 'secondary', children: value.meta }), actions: _jsxs(_Fragment, { children: [configuration && (_jsx(Button, { disabled: disabled, label: configuration?.label, icon: true, variant: 'simple', onClick: (e) => {
                             setConfigTarget(e.currentTarget);
-                        }, children: _jsx(Icon, { name: 'gear' }) })), !readOnly && (_jsx(Button, { disabled: disabled, label: t('clear_object_summary', [String(label)]), icon: true, variant: 'simple', onClick: onDelete, children: _jsx(Icon, { name: 'times' }) })), configDialog] }) }) }));
+                        }, "aria-describedby": describedById, children: _jsx(Icon, { name: 'gear' }) })), !readOnly && (_jsx(Button, { disabled: disabled, label: t('clear_object_summary', [String(label)]), icon: true, variant: 'simple', onClick: onDelete, "aria-describedby": describedById, children: _jsx(Icon, { name: 'times' }) })), configDialog] }) }) }));
 });
 export default ObjectSummary;
 //# sourceMappingURL=ObjectSummary.js.map

package/lib/components/ObjectSelect/ObjectSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectSummary.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef, MouseEvent, useEffect, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  SummaryItem,\n  Button,\n  Icon,\n  ForwardProps,\n  StyledFormControl,\n  FormField,\n  FormControlProps,\n  MenuItemProps,\n  useI18n,\n  registerIcon,\n  Text,\n  useDirection,\n  useElement,\n  Link,\n  defaultThemeProp,\n  StyledLink,\n  FormDialog,\n  FormDialogProps,\n  InfoDialog,\n  InfoDialogProps\n} from '@pega/cosmos-react-core';\nimport * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';\nimport { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nregisterIcon(times, gear);\n\ninterface ObjectSummaryValueProps {\n  id: MenuItemProps['id'];\n  primary: MenuItemProps['primary'];\n  href: string;\n  meta?: string;\n}\n\ninterface ObjectConfigProps\n  extends Pick<BaseDialogProps, 'heading' | 'placement' | 'children' | 'ref'> {\n  label: string;\n  onOpen?: () => void;\n  onClose?: () => void;\n  onSubmit: (arg: { close: () => void }) => void;\n  loading?: FormDialogProps['progress'];\n}\n\nexport interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {\n  value: ObjectSummaryValueProps;\n  configuration?: ObjectConfigProps;\n  onDelete: (e: MouseEvent<HTMLButtonElement>) => void;\n  onPreview?: (e: { href: string }) => void;\n  onLinkClick?: (id: MenuItemProps['id'], e: MouseEvent) => void;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectSummary = styled(StyledFormControl)<{ meta: string }>(\n  ({\n    theme: {\n      base: {\n        spacing,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger },\n        shadow: { 'focus-inset': focusInset }\n      }\n    },\n    meta\n  }) => {\n    return css`\n      padding-block: ${meta ? spacing : '0'};\n      padding-inline-start: ${spacing};\n      min-height: ${hitAreaMouse};\n\n      ${StyledLink}:focus {\n        box-shadow: ${focusInset};\n      }\n\n      @media (pointer: coarse) {\n        min-height: ${hitAreaFinger};\n      }\n    `;\n  }\n);\n\nStyledObjectSummary.defaultProps = defaultThemeProp;\n\nconst StyledMetaText = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n`;\n\nconst ScrollContainer = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      max-height: 12rem;\n      overflow: auto;\n      padding: calc(0.25 * ${spacing});\n    `;\n  }\n);\n\nScrollContainer.defaultProps = defaultThemeProp;\n\nconst ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      configuration,\n      label,\n      disabled,\n      status,\n      readOnly,\n      onDelete,\n      onPreview,\n      onLinkClick,\n      ...restProps\n    },\n    ref: ObjectSummaryProps['ref']\n  ) => {\n    const [configTarget, setConfigTarget] = useElement<HTMLButtonElement>();\n    const t = useI18n();\n    const { rtl } = useDirection();\n\n    useEffect(() => {\n      if (configTarget) configuration?.onOpen?.();\n    }, [configTarget]);\n\n    const configDialog = useMemo(() => {\n      if (!configuration || !configTarget || disabled) return null;\n\n      const commonProps: Pick<\n        InfoDialogProps & FormDialogProps,\n        'heading' | 'placement' | 'target' | 'progress' | 'ref' | 'children'\n      > = {\n        heading: configuration.heading,\n        placement: rtl ? 'bottom-end' : 'bottom-start',\n        target: configTarget,\n        progress: configuration.loading,\n        ref: configuration.ref,\n        children: <ScrollContainer>{configuration.children}</ScrollContainer>\n      };\n\n      if (readOnly) {\n        return (\n          <InfoDialog\n            {...commonProps}\n            onDismiss={() => {\n              setConfigTarget(null);\n              configuration.onClose?.();\n            }}\n          />\n        );\n      }\n\n      return (\n        <FormDialog\n          {...commonProps}\n          onCancel={() => {\n            setConfigTarget(null);\n            configuration.onClose?.();\n          }}\n          onSubmit={() => {\n            configuration.onSubmit({\n              close: () => {\n                setConfigTarget(null);\n              }\n            });\n          }}\n        />\n      );\n    }, [configTarget, configuration, disabled, readOnly, rtl]);\n\n    return (\n      <FormField {...restProps} ref={ref} label={label} status={status} disabled={disabled}>\n        <SummaryItem\n          as={StyledObjectSummary}\n          status={status}\n          meta={value.meta}\n          readOnly={readOnly}\n          overflowStrategy='ellipsis'\n          primary={\n            disabled ? (\n              <Text>{value.primary}</Text>\n            ) : (\n              <Link\n                href={value.href}\n                aria-label={`${label} ${value.primary}`}\n                previewable\n                onPreview={onPreview}\n                onClick={onLinkClick ? (e: MouseEvent) => onLinkClick(value.id, e) : undefined}\n              >\n                {value.primary}\n              </Link>\n            )\n          }\n          secondary={\n            value.meta && <StyledMetaText variant='secondary'>{value.meta}</StyledMetaText>\n          }\n          actions={\n            <>\n              {configuration && (\n                <Button\n                  disabled={disabled}\n                  label={configuration?.label}\n                  icon\n                  variant='simple'\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                    setConfigTarget(e.currentTarget);\n                  }}\n                >\n                  <Icon name='gear' />\n                </Button>\n              )}\n              {!readOnly && (\n                <Button\n                  disabled={disabled}\n                  label={t('clear_object_summary', [String(label)])}\n                  icon\n                  variant='simple'\n                  onClick={onDelete}\n                >\n                  <Icon name='times' />\n                </Button>\n              )}\n              {configDialog}\n            </>\n          }\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default ObjectSummary;\n"]}
+{"version":3,"file":"ObjectSummary.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef, MouseEvent, useEffect, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  SummaryItem,\n  Button,\n  Icon,\n  ForwardProps,\n  StyledFormControl,\n  FormField,\n  FormControlProps,\n  MenuItemProps,\n  useI18n,\n  registerIcon,\n  Text,\n  useElement,\n  Link,\n  defaultThemeProp,\n  StyledLink,\n  useUID,\n  FormDialog,\n  FormDialogProps,\n  InfoDialog,\n  InfoDialogProps\n} from '@pega/cosmos-react-core';\nimport * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';\nimport { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nregisterIcon(times, gear);\n\ninterface ObjectSummaryValueProps {\n  id: MenuItemProps['id'];\n  primary: MenuItemProps['primary'];\n  href?: string;\n  meta?: string;\n}\n\ninterface ObjectConfigProps\n  extends Pick<BaseDialogProps, 'heading' | 'placement' | 'children' | 'ref'> {\n  label: string;\n  onOpen?: () => void;\n  onClose?: () => void;\n  onSubmit: (arg: { close: () => void }) => void;\n  loading?: FormDialogProps['progress'];\n}\n\nexport interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {\n  value: ObjectSummaryValueProps;\n  configuration?: ObjectConfigProps;\n  onDelete: (e: MouseEvent<HTMLButtonElement>) => void;\n  onPreview?: (e: { href: string }) => void;\n  onLinkClick?: (id: MenuItemProps['id'], e: MouseEvent) => void;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectSummary = styled(StyledFormControl)<{ meta: string }>(\n  ({\n    theme: {\n      base: {\n        spacing,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger },\n        shadow: { 'focus-inset': focusInset }\n      }\n    },\n    meta\n  }) => {\n    return css`\n      padding-block: ${meta ? spacing : '0'};\n      padding-inline-start: ${spacing};\n      min-height: ${hitAreaMouse};\n\n      ${StyledLink}:focus {\n        box-shadow: ${focusInset};\n      }\n\n      @media (pointer: coarse) {\n        min-height: ${hitAreaFinger};\n      }\n    `;\n  }\n);\n\nStyledObjectSummary.defaultProps = defaultThemeProp;\n\nconst StyledMetaText = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n`;\n\nconst ScrollContainer = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      max-height: 12rem;\n      overflow: auto;\n      padding: calc(0.25 * ${spacing});\n    `;\n  }\n);\n\nScrollContainer.defaultProps = defaultThemeProp;\n\nconst ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      configuration,\n      label,\n      disabled,\n      status,\n      readOnly,\n      onDelete,\n      onPreview,\n      onLinkClick,\n      ...restProps\n    },\n    ref: ObjectSummaryProps['ref']\n  ) => {\n    const [configTarget, setConfigTarget] = useElement<HTMLButtonElement>();\n    const t = useI18n();\n    const describedById = useUID();\n\n    useEffect(() => {\n      if (configTarget) configuration?.onOpen?.();\n    }, [configTarget]);\n\n    const configDialog = useMemo(() => {\n      if (!configuration || !configTarget || disabled) return null;\n\n      const commonProps: Pick<\n        InfoDialogProps & FormDialogProps,\n        'heading' | 'placement' | 'target' | 'progress' | 'ref' | 'children'\n      > = {\n        heading: configuration.heading,\n        placement: 'auto',\n        target: configTarget,\n        progress: configuration.loading,\n        ref: configuration.ref,\n        children: <ScrollContainer>{configuration.children}</ScrollContainer>\n      };\n\n      if (readOnly) {\n        return (\n          <InfoDialog\n            {...commonProps}\n            onDismiss={() => {\n              setConfigTarget(null);\n              configuration.onClose?.();\n            }}\n          />\n        );\n      }\n\n      return (\n        <FormDialog\n          {...commonProps}\n          onCancel={() => {\n            setConfigTarget(null);\n            configuration.onClose?.();\n          }}\n          onSubmit={() => {\n            configuration.onSubmit({\n              close: () => {\n                setConfigTarget(null);\n              }\n            });\n          }}\n        />\n      );\n    }, [configTarget, configuration, disabled, readOnly]);\n\n    return (\n      <FormField {...restProps} ref={ref} label={label} status={status} disabled={disabled}>\n        <SummaryItem\n          as={StyledObjectSummary}\n          status={status}\n          meta={value.meta}\n          readOnly={readOnly}\n          overflowStrategy='ellipsis'\n          primary={\n            disabled || !value.href ? (\n              <Text id={describedById}>{value.primary}</Text>\n            ) : (\n              <Link\n                href={value.href}\n                aria-label={`${label} ${value.primary}`}\n                previewable\n                onPreview={onPreview}\n                onClick={onLinkClick ? (e: MouseEvent) => onLinkClick(value.id, e) : undefined}\n              >\n                {value.primary}\n              </Link>\n            )\n          }\n          secondary={\n            value.meta && <StyledMetaText variant='secondary'>{value.meta}</StyledMetaText>\n          }\n          actions={\n            <>\n              {configuration && (\n                <Button\n                  disabled={disabled}\n                  label={configuration?.label}\n                  icon\n                  variant='simple'\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                    setConfigTarget(e.currentTarget);\n                  }}\n                  aria-describedby={describedById}\n                >\n                  <Icon name='gear' />\n                </Button>\n              )}\n              {!readOnly && (\n                <Button\n                  disabled={disabled}\n                  label={t('clear_object_summary', [String(label)])}\n                  icon\n                  variant='simple'\n                  onClick={onDelete}\n                  aria-describedby={describedById}\n                >\n                  <Icon name='times' />\n                </Button>\n              )}\n              {configDialog}\n            </>\n          }\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default ObjectSummary;\n"]}

package/lib/components/ObjectSelect/useCreateModal.d.ts

@@ -1,6 +1,11 @@
 import { ComponentType } from 'react';
 import { ModalProps } from '@pega/cosmos-react-core';
 export interface UseCreateModalConfig<P extends object = object> {
+    /**
+     * Heading for the Modal.
+     * @default "Create new"
+     */
+    heading?: string;
     renderer: ComponentType<P>;
     /**
      * Called when a user submits a form.

package/lib/components/ObjectSelect/useCreateModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateModal.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/useCreateModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,aAAa,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAIL,UAAU,EAIX,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAI7D,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACrD;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,CAAC,CAAC;CAClB;AAED,QAAA,MAAM,cAAc;;CAgFnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"useCreateModal.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/useCreateModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,aAAa,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAIL,UAAU,EAIX,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC7D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAIjB,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACrD;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,CAAC,CAAC;CAClB;AAED,QAAA,MAAM,cAAc;;CA6FnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ObjectSelect/useCreateModal.js

@@ -7,7 +7,7 @@ const useCreateModal = (config) => {
     const modalMethods = useRef();
     const { create: createModal } = useModalManager();
     if (config) {
-        const { renderer: Renderer, onSubmit, onDismiss, onBeforeOpen, onAfterClose } = config;
+        const { renderer: Renderer, onSubmit, onDismiss, onBeforeOpen, onAfterClose, heading = t('create_new') } = config;
         const renderModal = ({ rendererProps, loading = false }) => {
             let modalContent = null;
             if (!loading) {
@@ -40,12 +40,14 @@ const useCreateModal = (config) => {
             else {
                 modalMethods.current = createModal(Modal, {
                     ...modalProps,
-                    heading: t('create_new'),
+                    heading,
                     onBeforeOpen,
                     onAfterClose: () => {
                         onAfterClose?.();
                         submittingRef.current = false;
                     }
+                }, {
+                    dismissible: false
                 });
             }
         };

package/lib/components/ObjectSelect/useCreateModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateModal.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/useCreateModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, ReactNode, ComponentType } from 'react';\n\nimport {\n  ModalMethods,\n  Button,\n  OmitStrict,\n  ModalProps,\n  Modal,\n  useModalManager,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nexport interface UseCreateModalConfig<P extends object = object> {\n  /*\n   * A component to render the add new form.\n   */\n  renderer: ComponentType<P>;\n  /**\n   * Called when a user submits a form.\n   */\n  onSubmit: ({ close }: { close: () => void }) => void;\n  /**\n   * Called when a user cancels a form.\n   */\n  onDismiss: ({ close }: { close: () => void }) => void;\n  /**\n   * Called before the modal opens.\n   */\n  onBeforeOpen?: ModalProps['onBeforeOpen'];\n  /**\n   * Called after the modal closes.\n   */\n  onAfterClose?: ModalProps['onAfterClose'];\n}\n\nexport interface CreateModalActionProps<P extends object = object> {\n  loading?: boolean;\n  rendererProps: P;\n}\n\nconst useCreateModal = <P extends object = object>(config: UseCreateModalConfig<P> | undefined) => {\n  const t = useI18n();\n\n  const submittingRef = useRef(false);\n  const modalMethods = useRef<ModalMethods>();\n  const { create: createModal } = useModalManager();\n\n  if (config) {\n    const { renderer: Renderer, onSubmit, onDismiss, onBeforeOpen, onAfterClose } = config;\n    const renderModal = ({ rendererProps, loading = false }: CreateModalActionProps<P>) => {\n      let modalContent: ReactNode = null;\n\n      if (!loading) {\n        modalContent = <Renderer {...rendererProps} />;\n      }\n      let formActions: ReactNode = null;\n\n      if (!loading || submittingRef.current) {\n        const close = () => {\n          modalMethods.current?.dismiss();\n          modalMethods.current = undefined;\n        };\n\n        formActions = (\n          <>\n            <Button\n              disabled={loading}\n              onClick={() => {\n                onDismiss({ close });\n              }}\n            >\n              {t('cancel')}\n            </Button>\n            <Button\n              disabled={loading}\n              type='submit'\n              variant='primary'\n              onClick={() => {\n                submittingRef.current = true;\n                onSubmit({ close });\n              }}\n            >\n              {t('submit')}\n            </Button>\n          </>\n        );\n      }\n\n      const modalProps: OmitStrict<ModalProps, 'heading'> = {\n        progress: loading\n          ? { message: submittingRef.current ? t('submitting') : t('loading') }\n          : undefined,\n        children: modalContent,\n        actions: formActions,\n        onRequestDismiss: loading && submittingRef.current ? () => false : undefined\n      };\n\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      } else {\n        modalMethods.current = createModal(Modal, {\n          ...modalProps,\n          heading: t('create_new'),\n          onBeforeOpen,\n          onAfterClose: () => {\n            onAfterClose?.();\n            submittingRef.current = false;\n          }\n        });\n      }\n    };\n\n    return {\n      renderModal\n    };\n  }\n\n  return {\n    renderModal: () => {}\n  };\n};\n\nexport default useCreateModal;\n"]}
+{"version":3,"file":"useCreateModal.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/useCreateModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, ReactNode, ComponentType } from 'react';\n\nimport {\n  ModalMethods,\n  Button,\n  OmitStrict,\n  ModalProps,\n  Modal,\n  useModalManager,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nexport interface UseCreateModalConfig<P extends object = object> {\n  /**\n   * Heading for the Modal.\n   * @default \"Create new\"\n   */\n  heading?: string;\n  /*\n   * A component to render the add new form.\n   */\n  renderer: ComponentType<P>;\n  /**\n   * Called when a user submits a form.\n   */\n  onSubmit: ({ close }: { close: () => void }) => void;\n  /**\n   * Called when a user cancels a form.\n   */\n  onDismiss: ({ close }: { close: () => void }) => void;\n  /**\n   * Called before the modal opens.\n   */\n  onBeforeOpen?: ModalProps['onBeforeOpen'];\n  /**\n   * Called after the modal closes.\n   */\n  onAfterClose?: ModalProps['onAfterClose'];\n}\n\nexport interface CreateModalActionProps<P extends object = object> {\n  loading?: boolean;\n  rendererProps: P;\n}\n\nconst useCreateModal = <P extends object = object>(config: UseCreateModalConfig<P> | undefined) => {\n  const t = useI18n();\n\n  const submittingRef = useRef(false);\n  const modalMethods = useRef<ModalMethods>();\n  const { create: createModal } = useModalManager();\n\n  if (config) {\n    const {\n      renderer: Renderer,\n      onSubmit,\n      onDismiss,\n      onBeforeOpen,\n      onAfterClose,\n      heading = t('create_new')\n    } = config;\n    const renderModal = ({ rendererProps, loading = false }: CreateModalActionProps<P>) => {\n      let modalContent: ReactNode = null;\n\n      if (!loading) {\n        modalContent = <Renderer {...rendererProps} />;\n      }\n      let formActions: ReactNode = null;\n\n      if (!loading || submittingRef.current) {\n        const close = () => {\n          modalMethods.current?.dismiss();\n          modalMethods.current = undefined;\n        };\n\n        formActions = (\n          <>\n            <Button\n              disabled={loading}\n              onClick={() => {\n                onDismiss({ close });\n              }}\n            >\n              {t('cancel')}\n            </Button>\n            <Button\n              disabled={loading}\n              type='submit'\n              variant='primary'\n              onClick={() => {\n                submittingRef.current = true;\n                onSubmit({ close });\n              }}\n            >\n              {t('submit')}\n            </Button>\n          </>\n        );\n      }\n\n      const modalProps: OmitStrict<ModalProps, 'heading'> = {\n        progress: loading\n          ? { message: submittingRef.current ? t('submitting') : t('loading') }\n          : undefined,\n        children: modalContent,\n        actions: formActions,\n        onRequestDismiss: loading && submittingRef.current ? () => false : undefined\n      };\n\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      } else {\n        modalMethods.current = createModal(\n          Modal,\n          {\n            ...modalProps,\n            heading,\n            onBeforeOpen,\n            onAfterClose: () => {\n              onAfterClose?.();\n              submittingRef.current = false;\n            }\n          },\n          {\n            dismissible: false\n          }\n        );\n      }\n    };\n\n    return {\n      renderModal\n    };\n  }\n\n  return {\n    renderModal: () => {}\n  };\n};\n\nexport default useCreateModal;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "4.0.0-dev.6.1",
+  "version": "4.0.0-dev.7.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.6.1",
-    "@pega/cosmos-react-dnd": "4.0.0-dev.6.1",
+    "@pega/cosmos-react-core": "4.0.0-dev.7.0",
+    "@pega/cosmos-react-dnd": "4.0.0-dev.7.0",
     "@types/codemirror": "^5.60.5",
     "@types/dagre": "^0.7.46",
     "@types/react": "^16.14.24 || ^17.0.38",