@pega/cosmos-react-build 5.0.0-dev.2.1 → 5.0.0-dev.4.0

package/lib/components/AppShell/AppShell.styles.d.ts

@@ -7,7 +7,7 @@ export declare const StyledMain: import("styled-components").StyledComponent<"ma
     hideNav: boolean;
 }, never>;
 export declare const StyledNav: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAppShellCaretIcon: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {
+export declare const StyledAppShellCaretIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {
     nestedListCollapsed?: boolean | undefined;
 }, never>;
 export declare const StyledNavListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {

package/lib/components/AppShell/AppShell.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":";AAwBA,eAAO,MAAM,WAAW,yGAStB,CAAC;AAIH,eAAO,MAAM,0BAA0B,qOAiBrC,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;aACP,OAAO;SAoCjB,CAAC;AAIF,eAAO,MAAM,SAAS,yGAkIrB,CAAC;AAIF,eAAO,MAAM,uBAAuB;;SAenC,CAAC;AAIF,eAAO,MAAM,iBAAiB;;SAwE7B,CAAC;AAIF,eAAO,MAAM,aAAa,wGAAc,CAAC"}
+{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":";AAyBA,eAAO,MAAM,WAAW,yGAStB,CAAC;AAIH,eAAO,MAAM,0BAA0B,qOAiBrC,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;aACP,OAAO;SAoCjB,CAAC;AAIF,eAAO,MAAM,SAAS,yGAkIrB,CAAC;AAIF,eAAO,MAAM,uBAAuB;;SAenC,CAAC;AAIF,eAAO,MAAM,iBAAiB;;SAwE7B,CAAC;AAIF,eAAO,MAAM,aAAa,wGAAc,CAAC"}

package/lib/components/AppShell/AppShell.styles.js

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { lighten, rgba } from 'polished';
 import { useContext } from 'react';
-import { tryCatch, defaultThemeProp, Button, StyledIcon, useDirection, calculateFontSize } from '@pega/cosmos-react-core';
+import { tryCatch, defaultThemeProp, Button, StyledIcon, useDirection, calculateFontSize, Icon } from '@pega/cosmos-react-core';
 import { StyledToggleIcon, StyledNodeText, StyledNodeInteraction, StyledStandardTree } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';
 import AppShellContext from './AppShellContext';
 const navWidth = '3rem';
@@ -182,7 +182,7 @@ export const StyledNav = styled.nav(({ theme: { base: { breakpoints, colors, pal
     `;
 });
 StyledNav.defaultProps = defaultThemeProp;
-export const StyledAppShellCaretIcon = styled.svg(({ nestedListCollapsed, theme }) => {
+export const StyledAppShellCaretIcon = styled(Icon)(({ nestedListCollapsed, theme }) => {
     const { rtl } = useDirection();
     return css `
       transition-property: transform;

package/lib/components/AppShell/AppShell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, rgba } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n  tryCatch,\n  defaultThemeProp,\n  Button,\n  StyledIcon,\n  useDirection,\n  calculateFontSize\n} from '@pega/cosmos-react-core';\nimport {\n  StyledToggleIcon,\n  StyledNodeText,\n  StyledNodeInteraction,\n  StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst navWidth = '3rem';\nconst navOpenWidth = '14rem';\n\nexport const StyledUtils = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    padding-block: ${theme.base.spacing};\n    border-block-start: 0.0625rem solid ${borderColor};\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette.dark};\n    color: ${theme.base.palette.light};\n    border: none;\n\n    ${StyledIcon} {\n      width: 1.25rem;\n      height: 1.25rem;\n      font-weight: bold;\n    }\n\n    &:enabled:focus,\n    :not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n  navOpen: boolean;\n  hideNav: boolean;\n}>(\n  ({\n    navOpen,\n    hideNav,\n    theme: {\n      base: { animation, breakpoints, palette }\n    }\n  }) => {\n    return css`\n      position: relative;\n      min-height: calc(100vh - 6rem);\n      background-color: ${palette['app-background']};\n      margin-inline-start: ${navWidth};\n      transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};\n\n      @media (pointer: coarse) {\n        min-height: calc(100vh - 8rem);\n      }\n\n      @media (min-width: ${breakpoints.md}) {\n        min-height: calc(100vh - 3rem);\n      }\n\n      ${navOpen &&\n      css`\n        margin-inline-start: ${navOpenWidth};\n      `}\n\n      ${hideNav &&\n      css`\n        transition-duration: 0s;\n        margin-inline-start: 0;\n      `}\n    `;\n  }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(\n  ({\n    theme: {\n      base: {\n        breakpoints,\n        colors,\n        palette,\n        animation,\n        spacing,\n        shadow,\n        'custom-scrollbar': customScrollbar,\n        'border-radius': borderRadius,\n        'font-size': fontSize,\n        'font-scale': fontScale\n      },\n      components: { 'app-shell': appShell }\n    }\n  }) => {\n    const { navState } = useContext(AppShellContext);\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      position: fixed;\n      z-index: 1;\n      height: calc(100vh - 6rem);\n      background: ${appShell.nav['background-color']};\n      width: ${navState === 'opening' || navState === 'open' ? navOpenWidth : navWidth};\n      transition: width ${animation.speed} ${animation.timing.ease};\n      display: flex;\n\n      ${StyledStandardTree} {\n        background-color: ${palette.dark};\n\n        ${StyledNodeText}, ${StyledToggleIcon} {\n          color: rgba(255, 255, 255, 0.7);\n          font-size: ${fontSizes.s};\n        }\n\n        ${StyledNodeInteraction} {\n          padding-block-start: calc(0.5 * ${spacing});\n          padding-block-end: calc(0.5 * ${spacing});\n\n          &:hover {\n            background: rgba(255, 255, 255, 0.1);\n\n            ${StyledNodeText} {\n              color: ${palette.light};\n            }\n          }\n\n          &:focus {\n            box-shadow: ${shadow['focus-inset']};\n          }\n\n          &[aria-current='page'],\n          &[aria-current='true'] {\n            background: rgba(255, 255, 255, 0.05);\n\n            ${StyledNodeText} {\n              color: ${colors.blue.light};\n            }\n          }\n        }\n\n        &:has(:focus-visible) {\n          box-shadow: inset 0 0 0 0.125rem #71c1ff99;\n        }\n      }\n\n      ${customScrollbar &&\n      css`\n        * {\n          scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n          scrollbar-width: thin;\n        }\n\n        @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n          /* stylelint-disable unit-allowed-list */\n\n          *::-webkit-scrollbar {\n            width: 12px;\n            height: 12px;\n          }\n\n          *::-webkit-scrollbar-track {\n            background-color: rgba(0, 0, 0, 0.2);\n          }\n\n          *::-webkit-scrollbar-corner {\n            background-color: rgba(0, 0, 0, 0.2);\n            border-bottom-right-radius: inherit;\n          }\n\n          *::-webkit-scrollbar-thumb {\n            background-color: transparent;\n            border: 3px solid transparent;\n            border-radius: calc(1.125 * ${borderRadius});\n            box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n          }\n\n          *::-webkit-scrollbar-thumb:hover {\n            box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n          }\n\n          *::-webkit-scrollbar-track:horizontal {\n            border-bottom-left-radius: inherit;\n          }\n\n          *::-webkit-scrollbar-track:vertical {\n            border-top-right-radius: inherit;\n          }\n\n          /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n          *::-webkit-scrollbar-track:not(:corner-present) {\n            border-bottom-right-radius: inherit;\n          }\n\n          /* stylelint-enable unit-allowed-list */\n        }\n      `}\n\n      @media (pointer: coarse) {\n        height: calc(100vh - 8rem);\n      }\n\n      @media (min-width: ${breakpoints.md}) {\n        height: calc(100vh - 3rem);\n      }\n    `;\n  }\n);\n\nStyledNav.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellCaretIcon = styled.svg<{ nestedListCollapsed?: boolean }>(\n  ({ nestedListCollapsed, theme }) => {\n    const { rtl } = useDirection();\n\n    return css`\n      transition-property: transform;\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n\n      ${nestedListCollapsed === false &&\n      css`\n        transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n      `}\n    `;\n  }\n);\n\nStyledAppShellCaretIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li<{ activeTreeRoot?: boolean }>(\n  ({ activeTreeRoot, theme }) => {\n    const { navOpen } = useContext(AppShellContext);\n    const activeBackground = tryCatch(() =>\n      rgba('#000000', theme.base.transparency['transparent-4'])\n    );\n\n    return css`\n      display: block;\n      position: relative;\n      ${StyledIcon} {\n        font-size: 1.25rem;\n      }\n\n      > :first-child {\n        position: relative;\n        display: flex;\n        align-items: center;\n        width: 100%;\n        padding: calc(1.25 * ${theme.base.spacing}) 0;\n        white-space: nowrap;\n        color: rgba(255, 255, 255, 0.7);\n        cursor: pointer;\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n        text-decoration: none;\n\n        span {\n          overflow: hidden;\n          color: inherit;\n        }\n\n        &:hover,\n        &:focus {\n          color: ${theme.base.palette.light};\n          background: rgba(255, 255, 255, 0.05);\n        }\n\n        &:focus {\n          outline: none;\n          box-shadow: ${theme.base.shadow['focus-inset']};\n        }\n\n        ${activeTreeRoot &&\n        css`\n          color: ${theme.base.colors.blue.light};\n          background-color: ${activeBackground};\n        `}\n\n        ${StyledAppShellCaretIcon}:last-child {\n          position: absolute;\n          left: ${navOpen ? 'auto' : '100%'};\n          ${navOpen &&\n          css`\n            inset-inline-end: 1rem;\n          `}\n          margin: 0;\n          opacity: ${navOpen ? '1' : '0'};\n          transition-property: opacity;\n        }\n\n        ${StyledIcon}:first-child {\n          margin: 0 calc((${navWidth} - 1.125rem) / 2);\n        }\n      }\n\n      &[aria-current='page'] > :first-child,\n      &[aria-current='true'] > :first-child {\n        color: ${theme.base.colors.blue.light};\n        background-color: ${activeBackground};\n      }\n    `;\n  }\n);\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\n"]}
+{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, rgba } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n  tryCatch,\n  defaultThemeProp,\n  Button,\n  StyledIcon,\n  useDirection,\n  calculateFontSize,\n  Icon\n} from '@pega/cosmos-react-core';\nimport {\n  StyledToggleIcon,\n  StyledNodeText,\n  StyledNodeInteraction,\n  StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst navWidth = '3rem';\nconst navOpenWidth = '14rem';\n\nexport const StyledUtils = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    padding-block: ${theme.base.spacing};\n    border-block-start: 0.0625rem solid ${borderColor};\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette.dark};\n    color: ${theme.base.palette.light};\n    border: none;\n\n    ${StyledIcon} {\n      width: 1.25rem;\n      height: 1.25rem;\n      font-weight: bold;\n    }\n\n    &:enabled:focus,\n    :not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n  navOpen: boolean;\n  hideNav: boolean;\n}>(\n  ({\n    navOpen,\n    hideNav,\n    theme: {\n      base: { animation, breakpoints, palette }\n    }\n  }) => {\n    return css`\n      position: relative;\n      min-height: calc(100vh - 6rem);\n      background-color: ${palette['app-background']};\n      margin-inline-start: ${navWidth};\n      transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};\n\n      @media (pointer: coarse) {\n        min-height: calc(100vh - 8rem);\n      }\n\n      @media (min-width: ${breakpoints.md}) {\n        min-height: calc(100vh - 3rem);\n      }\n\n      ${navOpen &&\n      css`\n        margin-inline-start: ${navOpenWidth};\n      `}\n\n      ${hideNav &&\n      css`\n        transition-duration: 0s;\n        margin-inline-start: 0;\n      `}\n    `;\n  }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(\n  ({\n    theme: {\n      base: {\n        breakpoints,\n        colors,\n        palette,\n        animation,\n        spacing,\n        shadow,\n        'custom-scrollbar': customScrollbar,\n        'border-radius': borderRadius,\n        'font-size': fontSize,\n        'font-scale': fontScale\n      },\n      components: { 'app-shell': appShell }\n    }\n  }) => {\n    const { navState } = useContext(AppShellContext);\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      position: fixed;\n      z-index: 1;\n      height: calc(100vh - 6rem);\n      background: ${appShell.nav['background-color']};\n      width: ${navState === 'opening' || navState === 'open' ? navOpenWidth : navWidth};\n      transition: width ${animation.speed} ${animation.timing.ease};\n      display: flex;\n\n      ${StyledStandardTree} {\n        background-color: ${palette.dark};\n\n        ${StyledNodeText}, ${StyledToggleIcon} {\n          color: rgba(255, 255, 255, 0.7);\n          font-size: ${fontSizes.s};\n        }\n\n        ${StyledNodeInteraction} {\n          padding-block-start: calc(0.5 * ${spacing});\n          padding-block-end: calc(0.5 * ${spacing});\n\n          &:hover {\n            background: rgba(255, 255, 255, 0.1);\n\n            ${StyledNodeText} {\n              color: ${palette.light};\n            }\n          }\n\n          &:focus {\n            box-shadow: ${shadow['focus-inset']};\n          }\n\n          &[aria-current='page'],\n          &[aria-current='true'] {\n            background: rgba(255, 255, 255, 0.05);\n\n            ${StyledNodeText} {\n              color: ${colors.blue.light};\n            }\n          }\n        }\n\n        &:has(:focus-visible) {\n          box-shadow: inset 0 0 0 0.125rem #71c1ff99;\n        }\n      }\n\n      ${customScrollbar &&\n      css`\n        * {\n          scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n          scrollbar-width: thin;\n        }\n\n        @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n          /* stylelint-disable unit-allowed-list */\n\n          *::-webkit-scrollbar {\n            width: 12px;\n            height: 12px;\n          }\n\n          *::-webkit-scrollbar-track {\n            background-color: rgba(0, 0, 0, 0.2);\n          }\n\n          *::-webkit-scrollbar-corner {\n            background-color: rgba(0, 0, 0, 0.2);\n            border-bottom-right-radius: inherit;\n          }\n\n          *::-webkit-scrollbar-thumb {\n            background-color: transparent;\n            border: 3px solid transparent;\n            border-radius: calc(1.125 * ${borderRadius});\n            box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n          }\n\n          *::-webkit-scrollbar-thumb:hover {\n            box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n          }\n\n          *::-webkit-scrollbar-track:horizontal {\n            border-bottom-left-radius: inherit;\n          }\n\n          *::-webkit-scrollbar-track:vertical {\n            border-top-right-radius: inherit;\n          }\n\n          /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n          *::-webkit-scrollbar-track:not(:corner-present) {\n            border-bottom-right-radius: inherit;\n          }\n\n          /* stylelint-enable unit-allowed-list */\n        }\n      `}\n\n      @media (pointer: coarse) {\n        height: calc(100vh - 8rem);\n      }\n\n      @media (min-width: ${breakpoints.md}) {\n        height: calc(100vh - 3rem);\n      }\n    `;\n  }\n);\n\nStyledNav.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellCaretIcon = styled(Icon)<{ nestedListCollapsed?: boolean }>(\n  ({ nestedListCollapsed, theme }) => {\n    const { rtl } = useDirection();\n\n    return css`\n      transition-property: transform;\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n\n      ${nestedListCollapsed === false &&\n      css`\n        transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n      `}\n    `;\n  }\n);\n\nStyledAppShellCaretIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li<{ activeTreeRoot?: boolean }>(\n  ({ activeTreeRoot, theme }) => {\n    const { navOpen } = useContext(AppShellContext);\n    const activeBackground = tryCatch(() =>\n      rgba('#000000', theme.base.transparency['transparent-4'])\n    );\n\n    return css`\n      display: block;\n      position: relative;\n      ${StyledIcon} {\n        font-size: 1.25rem;\n      }\n\n      > :first-child {\n        position: relative;\n        display: flex;\n        align-items: center;\n        width: 100%;\n        padding: calc(1.25 * ${theme.base.spacing}) 0;\n        white-space: nowrap;\n        color: rgba(255, 255, 255, 0.7);\n        cursor: pointer;\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n        text-decoration: none;\n\n        span {\n          overflow: hidden;\n          color: inherit;\n        }\n\n        &:hover,\n        &:focus {\n          color: ${theme.base.palette.light};\n          background: rgba(255, 255, 255, 0.05);\n        }\n\n        &:focus {\n          outline: none;\n          box-shadow: ${theme.base.shadow['focus-inset']};\n        }\n\n        ${activeTreeRoot &&\n        css`\n          color: ${theme.base.colors.blue.light};\n          background-color: ${activeBackground};\n        `}\n\n        ${StyledAppShellCaretIcon}:last-child {\n          position: absolute;\n          left: ${navOpen ? 'auto' : '100%'};\n          ${navOpen &&\n          css`\n            inset-inline-end: 1rem;\n          `}\n          margin: 0;\n          opacity: ${navOpen ? '1' : '0'};\n          transition-property: opacity;\n        }\n\n        ${StyledIcon}:first-child {\n          margin: 0 calc((${navWidth} - 1.125rem) / 2);\n        }\n      }\n\n      &[aria-current='page'] > :first-child,\n      &[aria-current='true'] > :first-child {\n        color: ${theme.base.colors.blue.light};\n        background-color: ${activeBackground};\n      }\n    `;\n  }\n);\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\n"]}

package/lib/components/AppShell/Header/BranchButton.d.ts

@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'react';
-import { Button, CountProps, Icon, MenuProps, StatusProps } from '@pega/cosmos-react-core';
+import { DefaultTheme } from 'styled-components';
+import { Button, CountProps, MenuProps, StatusProps } from '@pega/cosmos-react-core';
 export interface BranchButtonProps {
     /** The text for the BranchButton also used to set the aria-label. */
     text: string;
@@ -13,7 +14,7 @@ export interface BranchButtonProps {
     items: MenuProps['items'];
 }
 export declare const StyledBranchButton: typeof Button;
-export declare const StyledWarnIcon: typeof Icon;
+export declare const StyledWarnIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, DefaultTheme, {}, never>;
 declare const BranchButton: FunctionComponent<BranchButtonProps>;
 export default BranchButton;
 //# sourceMappingURL=BranchButton.d.ts.map

package/lib/components/AppShell/Header/BranchButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BranchButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/BranchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAInE,OAAO,EACL,MAAM,EACN,UAAU,EAGV,IAAI,EAGJ,SAAS,EAMT,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAiB;IAChC,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC,CAAC;IAChE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC/B,iCAAiC;IACjC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,MAuDvC,CAAC;AAqBF,eAAO,MAAM,cAAc,EAAE,OAAO,IAIlC,CAAC;AAgBH,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoEtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"BranchButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/BranchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AACnE,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EACL,MAAM,EACN,UAAU,EAMV,SAAS,EAMT,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAiB;IAChC,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC,CAAC;IAChE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC/B,iCAAiC;IACjC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,MAuDvC,CAAC;AAqBF,eAAO,MAAM,cAAc,8JAIzB,CAAC;AAgBH,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoEtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/AppShell/Header/BranchButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BranchButton.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/BranchButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FunctionComponent, KeyboardEvent } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Button,\n  CountProps,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  Menu,\n  Count,\n  MenuProps,\n  Popover,\n  useDirection,\n  useElement,\n  registerIcon,\n  useOuterEvent,\n  StatusProps,\n  useI18n,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport * as nodesDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down-solid.icon';\nimport * as warnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/warn-solid.icon';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\n\nregisterIcon(nodesDownSolidIcon, warnSolidIcon, caretDownIcon);\n\nexport interface BranchButtonProps {\n  /** The text for the BranchButton also used to set the aria-label. */\n  text: string;\n  /** Determines the variant for the BranchButton. */\n  variant?: Extract<StatusProps['variant'], 'success' | 'urgent'>;\n  /** Only display the branch and caret icon */\n  compact?: boolean;\n  /** The total count representing the number of unmerged changes. */\n  count?: CountProps['children'];\n  /** An array of MenuItemProps. */\n  items: MenuProps['items'];\n}\n\nexport const StyledBranchButton: typeof Button = styled(Button)(\n  ({\n    theme,\n    branchVariant\n  }: {\n    theme: DefaultTheme;\n    branchVariant: BranchButtonProps['variant'];\n  }) => {\n    const {\n      base: {\n        colors,\n        palette: { 'primary-background': primaryBackground },\n        shadow: { focus },\n        spacing\n      },\n      components: {\n        badges: {\n          status,\n          count: {\n            default: { background, foreground }\n          }\n        }\n      }\n    } = theme;\n\n    const backgroundColor = branchVariant ? status[branchVariant].background : primaryBackground;\n    const borderColor = !branchVariant ? colors.gray.medium : 'transparent';\n    const countBgColor = branchVariant === 'success' ? colors.green.medium : background;\n    const countColor = branchVariant === 'success' ? colors.white : foreground;\n    const buttonColor = tryCatch(() => readableColor(backgroundColor));\n\n    return css`\n      flex-shrink: 0;\n      background-color: ${backgroundColor};\n      border-color: ${borderColor};\n      color: ${buttonColor};\n      padding-inline-start: ${spacing};\n      padding-inline-end: ${spacing};\n\n      &:hover {\n        background-color: ${backgroundColor};\n        box-shadow: ${focus};\n      }\n\n      svg {\n        height: 1rem;\n        width: 1rem;\n      }\n\n      ${StyledCount} {\n        background-color: ${countBgColor};\n        color: ${countColor};\n      }\n    `;\n  }\n);\n\nStyledBranchButton.defaultProps = defaultThemeProp;\n\nconst StyledBranchButtonPopover = styled(Popover)(\n  ({\n    theme: {\n      base: { spacing, 'content-width': contentWidth }\n    }\n  }) => {\n    const minWidth = `calc(${contentWidth.xs} + (2 * ${spacing}))`;\n\n    return css`\n      min-width: ${minWidth};\n      max-width: calc(${minWidth} + 5ch);\n    `;\n  }\n);\n\nStyledBranchButtonPopover.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.red.medium};\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedText = styled.span(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].xs};\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 1.5;\n  `;\n});\n\nStyledEllipsizedText.defaultProps = defaultThemeProp;\n\nconst BranchButton: FunctionComponent<BranchButtonProps> = (props: BranchButtonProps) => {\n  const { text, variant, count, compact = false, items = [] } = props;\n\n  const [open, setOpen] = useState(false);\n\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const { rtl } = useDirection();\n  const t = useI18n();\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    if (open) setOpen(false);\n  });\n\n  let ariaLabel = t('branch_with_no_changes', [text]);\n  if (variant === 'success') {\n    ariaLabel = t('branch_with_no_potential_conflicts', [text, count ?? 0]);\n  } else if (variant === 'urgent') {\n    ariaLabel = t('branch_with_potential_conflicts', [text]);\n  }\n\n  return (\n    <>\n      <StyledBranchButton\n        ref={setButtonEl}\n        aria-expanded={open}\n        aria-haspopup='menu'\n        aria-controls='branch-popover'\n        aria-label={ariaLabel}\n        branchVariant={variant}\n        label={!open && compact ? text : undefined}\n        onClick={() => setOpen(cur => !cur)}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Escape') setOpen(false);\n        }}\n      >\n        <Flex container={{ alignItems: 'center', gap: compact ? 1 : 0.5 }}>\n          <Icon name='nodes-down-solid' />\n          {!compact && (\n            <>\n              <StyledEllipsizedText>{text}</StyledEllipsizedText>\n              {variant === 'urgent' ? (\n                <StyledWarnIcon name='warn-solid' />\n              ) : (\n                count !== undefined && <Count>{count}</Count>\n              )}\n            </>\n          )}\n          <Icon name='caret-down' />\n        </Flex>\n      </StyledBranchButton>\n      <StyledBranchButtonPopover\n        placement={rtl ? 'bottom-end' : 'bottom-start'}\n        id='branch-popover'\n        hideOnTargetHidden\n        show={open}\n        target={buttonEl}\n        ref={setPopoverRef}\n      >\n        <Menu\n          items={items}\n          scrollAt={20}\n          onItemClick={() => setOpen(false)}\n          focusControlEl={buttonEl || undefined}\n        />\n      </StyledBranchButtonPopover>\n    </>\n  );\n};\n\nexport default BranchButton;\n"]}
+{"version":3,"file":"BranchButton.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/BranchButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FunctionComponent, KeyboardEvent } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Button,\n  CountProps,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  Menu,\n  Count,\n  MenuProps,\n  Popover,\n  useDirection,\n  useElement,\n  registerIcon,\n  useOuterEvent,\n  StatusProps,\n  useI18n,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport * as nodesDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down-solid.icon';\nimport * as warnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/warn-solid.icon';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\n\nregisterIcon(nodesDownSolidIcon, warnSolidIcon, caretDownIcon);\n\nexport interface BranchButtonProps {\n  /** The text for the BranchButton also used to set the aria-label. */\n  text: string;\n  /** Determines the variant for the BranchButton. */\n  variant?: Extract<StatusProps['variant'], 'success' | 'urgent'>;\n  /** Only display the branch and caret icon */\n  compact?: boolean;\n  /** The total count representing the number of unmerged changes. */\n  count?: CountProps['children'];\n  /** An array of MenuItemProps. */\n  items: MenuProps['items'];\n}\n\nexport const StyledBranchButton: typeof Button = styled(Button)(\n  ({\n    theme,\n    branchVariant\n  }: {\n    theme: DefaultTheme;\n    branchVariant: BranchButtonProps['variant'];\n  }) => {\n    const {\n      base: {\n        colors,\n        palette: { 'primary-background': primaryBackground },\n        shadow: { focus },\n        spacing\n      },\n      components: {\n        badges: {\n          status,\n          count: {\n            default: { background, foreground }\n          }\n        }\n      }\n    } = theme;\n\n    const backgroundColor = branchVariant ? status[branchVariant].background : primaryBackground;\n    const borderColor = !branchVariant ? colors.gray.medium : 'transparent';\n    const countBgColor = branchVariant === 'success' ? colors.green.medium : background;\n    const countColor = branchVariant === 'success' ? colors.white : foreground;\n    const buttonColor = tryCatch(() => readableColor(backgroundColor));\n\n    return css`\n      flex-shrink: 0;\n      background-color: ${backgroundColor};\n      border-color: ${borderColor};\n      color: ${buttonColor};\n      padding-inline-start: ${spacing};\n      padding-inline-end: ${spacing};\n\n      &:hover {\n        background-color: ${backgroundColor};\n        box-shadow: ${focus};\n      }\n\n      svg {\n        height: 1rem;\n        width: 1rem;\n      }\n\n      ${StyledCount} {\n        background-color: ${countBgColor};\n        color: ${countColor};\n      }\n    `;\n  }\n);\n\nStyledBranchButton.defaultProps = defaultThemeProp;\n\nconst StyledBranchButtonPopover = styled(Popover)(\n  ({\n    theme: {\n      base: { spacing, 'content-width': contentWidth }\n    }\n  }) => {\n    const minWidth = `calc(${contentWidth.xs} + (2 * ${spacing}))`;\n\n    return css`\n      min-width: ${minWidth};\n      max-width: calc(${minWidth} + 5ch);\n    `;\n  }\n);\n\nStyledBranchButtonPopover.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.red.medium};\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedText = styled.span(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].xs};\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 1.5;\n  `;\n});\n\nStyledEllipsizedText.defaultProps = defaultThemeProp;\n\nconst BranchButton: FunctionComponent<BranchButtonProps> = (props: BranchButtonProps) => {\n  const { text, variant, count, compact = false, items = [] } = props;\n\n  const [open, setOpen] = useState(false);\n\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const { rtl } = useDirection();\n  const t = useI18n();\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    if (open) setOpen(false);\n  });\n\n  let ariaLabel = t('branch_with_no_changes', [text]);\n  if (variant === 'success') {\n    ariaLabel = t('branch_with_no_potential_conflicts', [text, count ?? 0]);\n  } else if (variant === 'urgent') {\n    ariaLabel = t('branch_with_potential_conflicts', [text]);\n  }\n\n  return (\n    <>\n      <StyledBranchButton\n        ref={setButtonEl}\n        aria-expanded={open}\n        aria-haspopup='menu'\n        aria-controls='branch-popover'\n        aria-label={ariaLabel}\n        branchVariant={variant}\n        label={!open && compact ? text : undefined}\n        onClick={() => setOpen(cur => !cur)}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Escape') setOpen(false);\n        }}\n      >\n        <Flex container={{ alignItems: 'center', gap: compact ? 1 : 0.5 }}>\n          <Icon name='nodes-down-solid' />\n          {!compact && (\n            <>\n              <StyledEllipsizedText>{text}</StyledEllipsizedText>\n              {variant === 'urgent' ? (\n                <StyledWarnIcon name='warn-solid' />\n              ) : (\n                count !== undefined && <Count>{count}</Count>\n              )}\n            </>\n          )}\n          <Icon name='caret-down' />\n        </Flex>\n      </StyledBranchButton>\n      <StyledBranchButtonPopover\n        placement={rtl ? 'bottom-end' : 'bottom-start'}\n        id='branch-popover'\n        hideOnTargetHidden\n        show={open}\n        target={buttonEl}\n        ref={setPopoverRef}\n      >\n        <Menu\n          items={items}\n          scrollAt={20}\n          onItemClick={() => setOpen(false)}\n          focusControlEl={buttonEl || undefined}\n        />\n      </StyledBranchButtonPopover>\n    </>\n  );\n};\n\nexport default BranchButton;\n"]}

package/lib/components/AppShell/NavigationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAmBf,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA+HhE,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,kBAAkB,CAgC7D,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,QAAQ,CAuC/C,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAmBf,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA2HhE,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,kBAAkB,CAgC7D,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,QAAQ,CAuC/C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/AppShell/NavigationList.js

@@ -57,7 +57,7 @@ const NavParentItem = ({ label, visual, items, currentItemId }) => {
             return transformItems(items, expandedIds);
         });
     }, [items]);
-    return (_jsxs(_Fragment, { children: [_jsxs(BareButton, { ref: setButtonEl, "aria-expanded": !collapsed, "aria-controls": treeId, "aria-label": label, onClick: toggleCollapsed, children: [visual, _jsx("span", { children: label }), navState === 'open' && (_jsx(Icon, { name: `caret-${end}`, as: StyledAppShellCaretIcon, nestedListCollapsed: collapsed }))] }), !navOpen && (_jsx(Tooltip, { target: buttonEl, placement: end, showDelay: 'none', hideDelay: 'none', children: label })), _jsx(ExpandCollapse, { id: treeId, collapsed: collapsed || !navOpen, transitionSpeed: managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed, children: _jsx(StandardTree, { ref: treeRef, nodes: managedItems, currentNodeId: currentItemId, selectableParents: false, onNodeToggle: nodeId => {
+    return (_jsxs(_Fragment, { children: [_jsxs(BareButton, { ref: setButtonEl, "aria-expanded": !collapsed, "aria-controls": treeId, "aria-label": label, onClick: toggleCollapsed, children: [visual, _jsx("span", { children: label }), navState === 'open' && (_jsx(StyledAppShellCaretIcon, { name: `caret-${end}`, nestedListCollapsed: collapsed }))] }), !navOpen && (_jsx(Tooltip, { target: buttonEl, placement: end, showDelay: 'none', hideDelay: 'none', children: label })), _jsx(ExpandCollapse, { id: treeId, collapsed: collapsed || !navOpen, transitionSpeed: managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed, children: _jsx(StandardTree, { ref: treeRef, nodes: managedItems, currentNodeId: currentItemId, selectableParents: false, onNodeToggle: nodeId => {
                         setManagedItems(nodes => treeHelpers.mapNode(nodes, nodeId, node => {
                             return {
                                 ...node,

package/lib/components/AppShell/NavigationList.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ElementType,\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEvent,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  useTheme,\n  useEscape,\n  useDirection,\n  Icon,\n  Tooltip,\n  ExpandCollapse,\n  useElement,\n  StandardTree,\n  StandardTreeNode,\n  StandardTreeProps,\n  treeHelpers,\n  useAfterInitialEffect,\n  useUID\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { NavProps, NavItemRenderProps } from './AppShell.types';\nimport { StyledNavList, StyledAppShellCaretIcon, StyledNavListItem } from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nconst transformItems = (\n  items: NavItemRenderProps['items'],\n  expandedIds: Set<StandardTreeNode['id']>\n): StandardTreeProps['nodes'] => {\n  if (!items) return [];\n\n  return items.map(item => ({\n    id: item.id,\n    label: item.label,\n    onClick: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {\n      e.stopPropagation();\n      item.onClick?.(id, e);\n    },\n    expanded: item.items ? expandedIds.has(item.id) : undefined,\n    href: item.href,\n    nodes: item.items ? transformItems(item.items, expandedIds) : undefined\n  }));\n};\n\nconst NavParentItem: FunctionComponent<NavItemRenderProps> = ({\n  label,\n  visual,\n  items,\n  currentItemId\n}) => {\n  const { navOpen, navState, openNav } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const treeId = useUID();\n  const {\n    base: { animation }\n  } = useTheme();\n  const [collapsed, setCollapsed] = useState(true);\n  const [managedItems, setManagedItems] = useState<StandardTreeProps['nodes']>(() =>\n    transformItems(items, new Set())\n  );\n\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n  const treeRef = useRef<HTMLUListElement>(null);\n\n  const toggleCollapsed = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    if (!navOpen) {\n      setCollapsed(false);\n      openNav();\n    } else setCollapsed(state => !state);\n  };\n\n  useEscape(() => {\n    setCollapsed(true);\n    buttonEl?.focus();\n  }, treeRef);\n\n  useEffect(() => {\n    if (currentItemId && treeHelpers.getNode(managedItems, currentItemId)) {\n      setManagedItems(nodes => treeHelpers.expandTo(nodes, currentItemId));\n      setCollapsed(false);\n    }\n  }, [currentItemId]);\n\n  useAfterInitialEffect(() => {\n    setManagedItems(cur => {\n      const expandedIds = new Set<StandardTreeNode['id']>();\n\n      treeHelpers.forEachNode(cur, node => {\n        if (node.expanded) expandedIds.add(node.id);\n      });\n\n      return transformItems(items, expandedIds);\n    });\n  }, [items]);\n\n  return (\n    <>\n      <BareButton\n        ref={setButtonEl}\n        aria-expanded={!collapsed}\n        aria-controls={treeId}\n        aria-label={label}\n        onClick={toggleCollapsed}\n      >\n        {visual}\n        <span>{label}</span>\n        {navState === 'open' && (\n          <Icon\n            name={`caret-${end}`}\n            as={StyledAppShellCaretIcon}\n            nestedListCollapsed={collapsed}\n          />\n        )}\n      </BareButton>\n      {!navOpen && (\n        <Tooltip target={buttonEl} placement={end} showDelay='none' hideDelay='none'>\n          {label}\n        </Tooltip>\n      )}\n      <ExpandCollapse\n        id={treeId}\n        collapsed={collapsed || !navOpen}\n        transitionSpeed={\n          managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed\n        }\n      >\n        <StandardTree\n          ref={treeRef}\n          nodes={managedItems as StandardTreeNode[]}\n          currentNodeId={currentItemId}\n          selectableParents={false}\n          onNodeToggle={nodeId => {\n            setManagedItems(nodes =>\n              treeHelpers.mapNode(nodes, nodeId, node => {\n                return {\n                  ...node,\n                  expanded: !node.expanded\n                };\n              })\n            );\n          }}\n        />\n      </ExpandCollapse>\n    </>\n  );\n};\n\nexport const NavLinkItem: FunctionComponent<NavItemRenderProps> = ({\n  id,\n  label,\n  visual,\n  href,\n  onClick\n}) => {\n  const { navOpen } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const [listItemEl, setListItemEl] = useElement<HTMLAnchorElement | HTMLButtonElement>();\n\n  return (\n    <>\n      <BareButton\n        ref={setListItemEl}\n        href={href}\n        onClick={(e: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n          e.stopPropagation();\n          onClick?.(id, e);\n        }}\n        aria-label={label}\n      >\n        {visual}\n        <span>{label}</span>\n      </BareButton>\n      {!navOpen && (\n        <Tooltip target={listItemEl} placement={end} showDelay='none' hideDelay='none'>\n          {label}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst NavigationList: FunctionComponent<NavProps> = ({ items, currentItemId }) => {\n  let ItemComponent: ElementType;\n\n  return (\n    <StyledNavList>\n      {items.map(item => {\n        let activeTreeRoot = false;\n\n        if (item.items) {\n          ItemComponent = NavParentItem;\n\n          if (\n            currentItemId &&\n            treeHelpers.getNode(transformItems(item.items, new Set()), currentItemId) !== undefined\n          ) {\n            activeTreeRoot = true;\n          }\n        } else {\n          ItemComponent = NavLinkItem;\n        }\n\n        const ariaCurrent = item.href ? 'page' : 'true';\n        return (\n          <StyledNavListItem\n            aria-current={currentItemId === item.id ? ariaCurrent : undefined}\n            activeTreeRoot={activeTreeRoot}\n            key={item.id}\n            id={item.id}\n          >\n            <ItemComponent\n              {...item}\n              visual={<Icon name={item.icon} />}\n              currentItemId={currentItemId}\n            />\n          </StyledNavListItem>\n        );\n      })}\n    </StyledNavList>\n  );\n};\n\nexport default NavigationList;\n"]}
+{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ElementType,\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEvent,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  useTheme,\n  useEscape,\n  useDirection,\n  Icon,\n  Tooltip,\n  ExpandCollapse,\n  useElement,\n  StandardTree,\n  StandardTreeNode,\n  StandardTreeProps,\n  treeHelpers,\n  useAfterInitialEffect,\n  useUID\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { NavProps, NavItemRenderProps } from './AppShell.types';\nimport { StyledNavList, StyledAppShellCaretIcon, StyledNavListItem } from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nconst transformItems = (\n  items: NavItemRenderProps['items'],\n  expandedIds: Set<StandardTreeNode['id']>\n): StandardTreeProps['nodes'] => {\n  if (!items) return [];\n\n  return items.map(item => ({\n    id: item.id,\n    label: item.label,\n    onClick: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {\n      e.stopPropagation();\n      item.onClick?.(id, e);\n    },\n    expanded: item.items ? expandedIds.has(item.id) : undefined,\n    href: item.href,\n    nodes: item.items ? transformItems(item.items, expandedIds) : undefined\n  }));\n};\n\nconst NavParentItem: FunctionComponent<NavItemRenderProps> = ({\n  label,\n  visual,\n  items,\n  currentItemId\n}) => {\n  const { navOpen, navState, openNav } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const treeId = useUID();\n  const {\n    base: { animation }\n  } = useTheme();\n  const [collapsed, setCollapsed] = useState(true);\n  const [managedItems, setManagedItems] = useState<StandardTreeProps['nodes']>(() =>\n    transformItems(items, new Set())\n  );\n\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n  const treeRef = useRef<HTMLUListElement>(null);\n\n  const toggleCollapsed = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    if (!navOpen) {\n      setCollapsed(false);\n      openNav();\n    } else setCollapsed(state => !state);\n  };\n\n  useEscape(() => {\n    setCollapsed(true);\n    buttonEl?.focus();\n  }, treeRef);\n\n  useEffect(() => {\n    if (currentItemId && treeHelpers.getNode(managedItems, currentItemId)) {\n      setManagedItems(nodes => treeHelpers.expandTo(nodes, currentItemId));\n      setCollapsed(false);\n    }\n  }, [currentItemId]);\n\n  useAfterInitialEffect(() => {\n    setManagedItems(cur => {\n      const expandedIds = new Set<StandardTreeNode['id']>();\n\n      treeHelpers.forEachNode(cur, node => {\n        if (node.expanded) expandedIds.add(node.id);\n      });\n\n      return transformItems(items, expandedIds);\n    });\n  }, [items]);\n\n  return (\n    <>\n      <BareButton\n        ref={setButtonEl}\n        aria-expanded={!collapsed}\n        aria-controls={treeId}\n        aria-label={label}\n        onClick={toggleCollapsed}\n      >\n        {visual}\n        <span>{label}</span>\n        {navState === 'open' && (\n          <StyledAppShellCaretIcon name={`caret-${end}`} nestedListCollapsed={collapsed} />\n        )}\n      </BareButton>\n      {!navOpen && (\n        <Tooltip target={buttonEl} placement={end} showDelay='none' hideDelay='none'>\n          {label}\n        </Tooltip>\n      )}\n      <ExpandCollapse\n        id={treeId}\n        collapsed={collapsed || !navOpen}\n        transitionSpeed={\n          managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed\n        }\n      >\n        <StandardTree\n          ref={treeRef}\n          nodes={managedItems as StandardTreeNode[]}\n          currentNodeId={currentItemId}\n          selectableParents={false}\n          onNodeToggle={nodeId => {\n            setManagedItems(nodes =>\n              treeHelpers.mapNode(nodes, nodeId, node => {\n                return {\n                  ...node,\n                  expanded: !node.expanded\n                };\n              })\n            );\n          }}\n        />\n      </ExpandCollapse>\n    </>\n  );\n};\n\nexport const NavLinkItem: FunctionComponent<NavItemRenderProps> = ({\n  id,\n  label,\n  visual,\n  href,\n  onClick\n}) => {\n  const { navOpen } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const [listItemEl, setListItemEl] = useElement<HTMLAnchorElement | HTMLButtonElement>();\n\n  return (\n    <>\n      <BareButton\n        ref={setListItemEl}\n        href={href}\n        onClick={(e: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n          e.stopPropagation();\n          onClick?.(id, e);\n        }}\n        aria-label={label}\n      >\n        {visual}\n        <span>{label}</span>\n      </BareButton>\n      {!navOpen && (\n        <Tooltip target={listItemEl} placement={end} showDelay='none' hideDelay='none'>\n          {label}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst NavigationList: FunctionComponent<NavProps> = ({ items, currentItemId }) => {\n  let ItemComponent: ElementType;\n\n  return (\n    <StyledNavList>\n      {items.map(item => {\n        let activeTreeRoot = false;\n\n        if (item.items) {\n          ItemComponent = NavParentItem;\n\n          if (\n            currentItemId &&\n            treeHelpers.getNode(transformItems(item.items, new Set()), currentItemId) !== undefined\n          ) {\n            activeTreeRoot = true;\n          }\n        } else {\n          ItemComponent = NavLinkItem;\n        }\n\n        const ariaCurrent = item.href ? 'page' : 'true';\n        return (\n          <StyledNavListItem\n            aria-current={currentItemId === item.id ? ariaCurrent : undefined}\n            activeTreeRoot={activeTreeRoot}\n            key={item.id}\n            id={item.id}\n          >\n            <ItemComponent\n              {...item}\n              visual={<Icon name={item.icon} />}\n              currentItemId={currentItemId}\n            />\n          </StyledNavListItem>\n        );\n      })}\n    </StyledNavList>\n  );\n};\n\nexport default NavigationList;\n"]}

package/lib/components/DynamicContentEditor/PegaCustomElement.d.ts

@@ -17,11 +17,15 @@ export declare const createPegaReferenceElement: (win: typeof globalThis) => {
         readonly offsetTop: number;
         readonly offsetWidth: number;
         outerText: string;
+        popover: string | null;
         spellcheck: boolean;
         title: string;
         translate: boolean;
         attachInternals(): ElementInternals;
         click(): void;
+        hidePopover(): void;
+        showPopover(): void;
+        togglePopover(force?: boolean | undefined): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -55,6 +59,7 @@ export declare const createPegaReferenceElement: (win: typeof globalThis) => {
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
         closest<K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
         closest<E extends Element = Element>(selectors: string): E | null;
+        computedStyleMap(): StylePropertyMapReadOnly;
         getAttribute(qualifiedName: string): string | null;
         getAttributeNS(namespace: string | null, localName: string): string | null;
         getAttributeNames(): string[];
@@ -212,6 +217,7 @@ export declare const createPegaReferenceElement: (win: typeof globalThis) => {
         querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
         replaceChildren(...nodes: (string | Node)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
+        readonly attributeStyleMap: StylePropertyMap;
         readonly style: CSSStyleDeclaration;
         contentEditable: string;
         enterKeyHint: string;
@@ -284,6 +290,7 @@ export declare const createPegaReferenceElement: (win: typeof globalThis) => {
         onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
         onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
         onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;

package/lib/components/DynamicContentEditor/PegaCustomElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PegaCustomElement.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/PegaCustomElement.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,4MAYpC,CAAC;AAEH,eAAO,MAAM,0BAA0B,QAAS,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQhE,CAAC"}
+{"version":3,"file":"PegaCustomElement.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/PegaCustomElement.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,4MAYpC,CAAC;AAEH,eAAO,MAAM,0BAA0B,QAAS,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQhE,CAAC"}

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

@@ -1,9 +1,9 @@
 import { FC, MouseEvent } from 'react';
 import { PlottedGraphNode } from './Renderer/Utils/GraphLayout';
-export declare const StyledDot: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
-    highlight: boolean;
+export declare const StyledDot: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {
+    highlight?: boolean | undefined;
 }, never>;
-export declare const StyledPlus: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPlus: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export interface AddNodeProps extends PlottedGraphNode {

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

@@ -1 +1 @@
-{"version":3,"file":"AddNode.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAmC,MAAM,OAAO,CAAC;AAYxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,eAAO,MAAM,SAAS;eAA6B,OAAO;SAWxD,CAAC;AAIH,eAAO,MAAM,UAAU,mOAEtB,CAAC;AAEF,eAAO,MAAM,aAAa,yGASxB,CAAC;AAIH,eAAO,MAAM,YAAY,qOA0BvB,CAAC;AAIH,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB;eAA6B,OAAO;SAQnE,CAAC;AAIH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,gBAAgB,GAAG,WAAW,CAAC,CAgC5E,CAAC"}
+{"version":3,"file":"AddNode.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAmC,MAAM,OAAO,CAAC;AAYxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,eAAO,MAAM,SAAS;;SAWpB,CAAC;AAIH,eAAO,MAAM,UAAU,0LAEtB,CAAC;AAEF,eAAO,MAAM,aAAa,yGASxB,CAAC;AAIH,eAAO,MAAM,YAAY,qOA0BvB,CAAC;AAIH,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB;eAA6B,OAAO;SAQnE,CAAC;AAIH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,gBAAgB,GAAG,WAAW,CAAC,CAgC5E,CAAC"}

package/lib/components/FlowModeller/AddNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddNode.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { FC, MouseEvent, useContext, useState, useEffect } from 'react';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  useI18n,\n  StyledTooltip,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { PlottedGraphNode } from './Renderer/Utils/GraphLayout';\nimport FlowModellerContext from './FlowModellerContext';\n\nexport const StyledDot = styled(Icon)<{ highlight: boolean }>(({ theme, highlight }) => {\n  return css`\n    position: absolute;\n    color: ${theme.base.colors.slate.dark};\n    ${highlight &&\n    css`\n       {\n        color: ${theme.base.colors.red.dark};\n      }\n    `}\n  `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledPlus = styled(Icon)`\n  opacity: 0;\n`;\n\nexport const StyledWrapper = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: ${theme.base.spacing};\n\n    ${StyledTooltip} {\n      min-width: 12ch;\n      text-align: center;\n    }\n  `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    top: -0.25rem;\n    border: 0;\n    background: transparent;\n    color: ${theme.base.colors.black};\n    &:hover,\n    &:focus {\n      background: ${theme.base.colors.white};\n      ${StyledDot} {\n        opacity: 0;\n      }\n      ${StyledPlus} {\n        opacity: 1;\n      }\n    }\n    &[aria-haspopup='menu'] {\n      background: ${theme.base.colors.white};\n      ${StyledDot} {\n        opacity: 0;\n      }\n      ${StyledPlus} {\n        opacity: 1;\n      }\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport interface AddNodeProps extends PlottedGraphNode {\n  onClick?: (ev: Event) => void;\n  addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;\n  highlight?: boolean;\n}\n\nexport const StyledConnectorLabel = styled(Text)<{ highlight: boolean }>(({ theme }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n    background: ${theme.base.colors.slate.dark};\n    color: ${theme.base.colors.white};\n    text-align: center;\n    padding: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledConnectorLabel.defaultProps = defaultThemeProp;\n\nexport const AddButton: FC<Pick<AddNodeProps, 'addNodeHandler' | 'highlight'>> = ({\n  addNodeHandler,\n  highlight\n}) => {\n  const t = useI18n();\n  const [hasMenuActive, setHasMenuActive] = useState(false);\n  const { showNodeLibrary } = useContext(FlowModellerContext);\n\n  const addNodeClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n    setHasMenuActive(true);\n    addNodeHandler(e);\n  };\n\n  useEffect(() => {\n    if (!showNodeLibrary) {\n      setHasMenuActive(false);\n    }\n  }, [showNodeLibrary]);\n\n  return (\n    <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n      <StyledButton\n        label={t('add_node')}\n        aria-haspopup={hasMenuActive ? 'menu' : false}\n        icon\n        onClick={addNodeClickHandler}\n      >\n        <StyledDot name='circle-solid' highlight={highlight} />\n        <StyledPlus name='plus' />\n      </StyledButton>\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"AddNode.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { FC, MouseEvent, useContext, useState, useEffect } from 'react';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  useI18n,\n  StyledTooltip,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { PlottedGraphNode } from './Renderer/Utils/GraphLayout';\nimport FlowModellerContext from './FlowModellerContext';\n\nexport const StyledDot = styled(Icon)<{ highlight?: boolean }>(({ theme, highlight }) => {\n  return css`\n    position: absolute;\n    color: ${theme.base.colors.slate.dark};\n    ${highlight &&\n    css`\n       {\n        color: ${theme.base.colors.red.dark};\n      }\n    `}\n  `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledPlus = styled(Icon)`\n  opacity: 0;\n`;\n\nexport const StyledWrapper = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: ${theme.base.spacing};\n\n    ${StyledTooltip} {\n      min-width: 12ch;\n      text-align: center;\n    }\n  `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    top: -0.25rem;\n    border: 0;\n    background: transparent;\n    color: ${theme.base.colors.black};\n    &:hover,\n    &:focus {\n      background: ${theme.base.colors.white};\n      ${StyledDot} {\n        opacity: 0;\n      }\n      ${StyledPlus} {\n        opacity: 1;\n      }\n    }\n    &[aria-haspopup='menu'] {\n      background: ${theme.base.colors.white};\n      ${StyledDot} {\n        opacity: 0;\n      }\n      ${StyledPlus} {\n        opacity: 1;\n      }\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport interface AddNodeProps extends PlottedGraphNode {\n  onClick?: (ev: Event) => void;\n  addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;\n  highlight?: boolean;\n}\n\nexport const StyledConnectorLabel = styled(Text)<{ highlight: boolean }>(({ theme }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n    background: ${theme.base.colors.slate.dark};\n    color: ${theme.base.colors.white};\n    text-align: center;\n    padding: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledConnectorLabel.defaultProps = defaultThemeProp;\n\nexport const AddButton: FC<Pick<AddNodeProps, 'addNodeHandler' | 'highlight'>> = ({\n  addNodeHandler,\n  highlight\n}) => {\n  const t = useI18n();\n  const [hasMenuActive, setHasMenuActive] = useState(false);\n  const { showNodeLibrary } = useContext(FlowModellerContext);\n\n  const addNodeClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n    setHasMenuActive(true);\n    addNodeHandler(e);\n  };\n\n  useEffect(() => {\n    if (!showNodeLibrary) {\n      setHasMenuActive(false);\n    }\n  }, [showNodeLibrary]);\n\n  return (\n    <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n      <StyledButton\n        label={t('add_node')}\n        aria-haspopup={hasMenuActive ? 'menu' : false}\n        icon\n        onClick={addNodeClickHandler}\n      >\n        <StyledDot name='circle-solid' highlight={highlight} />\n        <StyledPlus name='plus' />\n      </StyledButton>\n    </Flex>\n  );\n};\n"]}

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

@@ -14,6 +14,6 @@ export interface DeletePopoverProps {
     ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledDeletePopover: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: PopoverProps<Modifiers> & import("@pega/cosmos-react-core").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
-declare const DeletePopover: import("react").ForwardRefExoticComponent<Pick<DeletePopoverProps, "show" | "target" | "onChange" | "onSubmit" | "onCancel" | "flowGraphData" | "rendererGraphData" | "nodeId"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DeletePopover: import("react").ForwardRefExoticComponent<Omit<DeletePopoverProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default DeletePopover;
 //# sourceMappingURL=DeletePopover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DeletePopover.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/DeletePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EAIX,GAAG,EACJ,MAAM,OAAO,CAAC;AAGf,OAAO,EASL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAiB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAwB,EACtB,cAAc,EACd,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC/B,aAAa,EAAE,SAAS,CAAC;IACzB,iBAAiB,EAAE,SAAS,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CACT,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,cAAc,GAAG,SAAS,EACzC,EAAE,CAAC,EAAE,WAAW,KACb,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,2TAE/B,CAAC;AAEF,QAAA,MAAM,aAAa,kOA6NjB,CAAC;AAEH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DeletePopover.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/DeletePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EAIX,GAAG,EACJ,MAAM,OAAO,CAAC;AAGf,OAAO,EASL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAiB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAwB,EACtB,cAAc,EACd,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC/B,aAAa,EAAE,SAAS,CAAC;IACzB,iBAAiB,EAAE,SAAS,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CACT,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,cAAc,GAAG,SAAS,EACzC,EAAE,CAAC,EAAE,WAAW,KACb,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,2TAE/B,CAAC;AAEF,QAAA,MAAM,aAAa,4HA6NjB,CAAC;AAEH,eAAe,aAAa,CAAC"}

package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { Icon } from '@pega/cosmos-react-core';
 import { NodeType } from './Node.types';
 export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
@@ -18,5 +17,5 @@ export declare const StyledNodeTempleteContent: import("styled-components").Styl
 export declare const StyledAdditionalData: import("styled-components").StyledComponent<"dl", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledAdditionalDataItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTextWithEllipsis: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledErrorIcon: typeof Icon;
+export declare const StyledErrorIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=NodeTemplate.styles.d.ts.map

package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAA4C,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEzF,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,eAAO,MAAM,YAAY,yGAYvB,CAAC;AAIH,eAAO,MAAM,WAAW;cAA4B,QAAQ;SAW1D,CAAC;AAIH,eAAO,MAAM,UAAU,yGAWrB,CAAC;AAIH,eAAO,MAAM,wBAAwB,4GAOnC,CAAC;AAIH,eAAO,MAAM,UAAU;YAA0B,MAAM,GAAG,SAAS;SAOjE,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA6B,OAAO;SAoCjE,CAAC;AAIH,eAAO,MAAM,wBAAwB,yOAOnC,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAapC,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAMnC,CAAC;AAIH,eAAO,MAAM,sBAAsB,mOAQjC,CAAC;AAIH,eAAO,MAAM,eAAe,EAAE,OAAO,IAKnC,CAAC"}
+{"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,eAAO,MAAM,YAAY,yGAYvB,CAAC;AAIH,eAAO,MAAM,WAAW;cAA4B,QAAQ;SAW1D,CAAC;AAIH,eAAO,MAAM,UAAU,yGAWrB,CAAC;AAIH,eAAO,MAAM,wBAAwB,4GAOnC,CAAC;AAIH,eAAO,MAAM,UAAU;YAA0B,MAAM,GAAG,SAAS;SAOjE,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA6B,OAAO;SAoCjE,CAAC;AAIH,eAAO,MAAM,wBAAwB,yOAOnC,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAapC,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAMnC,CAAC;AAIH,eAAO,MAAM,sBAAsB,mOAQjC,CAAC;AAIH,eAAO,MAAM,eAAe,0LAK1B,CAAC"}

package/lib/components/FlowModeller/Node/NodeTemplate.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplate.styles.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Card, Text, CardFooter, Icon } from '@pega/cosmos-react-core';\n\nimport { NodeType } from './Node.types';\n\nexport const StyledCircle = styled.div(({ theme }) => {\n  return css`\n    height: 2rem;\n    width: 2rem;\n    background: var(--bg-color);\n    border-radius: 50%;\n    align-self: center;\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledCircle.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Text)<{ nodeType: NodeType }>(({ nodeType, theme }) => {\n  return css`\n    align-self: center;\n    ${nodeType.name === 'start'\n      ? css`\n          padding-block-end: ${theme.base.spacing};\n        `\n      : css`\n          padding-block-start: ${theme.base.spacing};\n        `}\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nexport const StyledIcon = styled.div(({ theme }) => {\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplateHeader = styled.header(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    button {\n      border-radius: ${theme.base['border-radius']};\n    }\n  `;\n});\n\nStyledNodeTemplateHeader.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)<{ error?: string | undefined }>(({ error, theme }) => {\n  return css`\n    padding-inline-end: ${theme.base.spacing};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: ${error ? '20ch' : '23ch'};\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplate = styled(Card)<{ highlight: boolean }>(({ highlight, theme }) => {\n  return css`\n    width: 17.5rem;\n    height: 7.5rem;\n    align-self: center;\n    overflow: hidden;\n    border: 0.125rem solid transparent;\n\n    ${highlight &&\n    css`\n      &&& {\n        color: ${theme.base.colors.black};\n        background-color: ${theme.base.colors.red['extra-light']};\n        border-radius: 0.25rem;\n        box-shadow: 0 0 0 0.125rem ${theme.base.colors.red.medium};\n      }\n    `}\n\n    &&& {\n      border-radius: ${theme.base['border-radius']};\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    :focus-visible {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    &[aria-current='location'] {\n      box-shadow: none;\n      border: 0.125rem solid ${theme.base.palette.interactive};\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledNodeTemplate.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplateFooter = styled(CardFooter)(({ theme }) => {\n  return css`\n    margin-top: auto;\n    &:not(${StyledNodeTemplate} ${StyledNodeTemplate} > &) {\n      padding: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledNodeTemplateFooter.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTempleteContent = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n    padding-block-start: 0;\n    max-height: 2.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  `;\n});\n\nStyledNodeTempleteContent.defaultProps = defaultThemeProp;\n\nexport const StyledAdditionalData = styled.dl`\n  overflow: hidden;\n`;\n\nexport const StyledAdditionalDataItem = styled.div(({ theme }) => {\n  return css`\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['secondary-background']};\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledAdditionalDataItem.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)(() => {\n  return css`\n    overflow: hidden;\n    width: auto;\n    display: inline-block;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  `;\n});\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-end: ${theme.base.spacing};\n  `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"NodeTemplate.styles.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Card, Text, CardFooter, Icon } from '@pega/cosmos-react-core';\n\nimport { NodeType } from './Node.types';\n\nexport const StyledCircle = styled.div(({ theme }) => {\n  return css`\n    height: 2rem;\n    width: 2rem;\n    background: var(--bg-color);\n    border-radius: 50%;\n    align-self: center;\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledCircle.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Text)<{ nodeType: NodeType }>(({ nodeType, theme }) => {\n  return css`\n    align-self: center;\n    ${nodeType.name === 'start'\n      ? css`\n          padding-block-end: ${theme.base.spacing};\n        `\n      : css`\n          padding-block-start: ${theme.base.spacing};\n        `}\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nexport const StyledIcon = styled.div(({ theme }) => {\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplateHeader = styled.header(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    button {\n      border-radius: ${theme.base['border-radius']};\n    }\n  `;\n});\n\nStyledNodeTemplateHeader.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)<{ error?: string | undefined }>(({ error, theme }) => {\n  return css`\n    padding-inline-end: ${theme.base.spacing};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: ${error ? '20ch' : '23ch'};\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplate = styled(Card)<{ highlight: boolean }>(({ highlight, theme }) => {\n  return css`\n    width: 17.5rem;\n    height: 7.5rem;\n    align-self: center;\n    overflow: hidden;\n    border: 0.125rem solid transparent;\n\n    ${highlight &&\n    css`\n      &&& {\n        color: ${theme.base.colors.black};\n        background-color: ${theme.base.colors.red['extra-light']};\n        border-radius: 0.25rem;\n        box-shadow: 0 0 0 0.125rem ${theme.base.colors.red.medium};\n      }\n    `}\n\n    &&& {\n      border-radius: ${theme.base['border-radius']};\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    :focus-visible {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    &[aria-current='location'] {\n      box-shadow: none;\n      border: 0.125rem solid ${theme.base.palette.interactive};\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledNodeTemplate.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplateFooter = styled(CardFooter)(({ theme }) => {\n  return css`\n    margin-top: auto;\n    &:not(${StyledNodeTemplate} ${StyledNodeTemplate} > &) {\n      padding: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledNodeTemplateFooter.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTempleteContent = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n    padding-block-start: 0;\n    max-height: 2.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  `;\n});\n\nStyledNodeTempleteContent.defaultProps = defaultThemeProp;\n\nexport const StyledAdditionalData = styled.dl`\n  overflow: hidden;\n`;\n\nexport const StyledAdditionalDataItem = styled.div(({ theme }) => {\n  return css`\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['secondary-background']};\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledAdditionalDataItem.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)(() => {\n  return css`\n    overflow: hidden;\n    width: auto;\n    display: inline-block;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  `;\n});\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-end: ${theme.base.spacing};\n  `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n"]}

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

@@ -19,7 +19,7 @@ export declare const StyledStageButton: import("styled-components").StyledCompon
     error: string | undefined;
 }, never>;
 export declare const StyledStageActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledWarnIcon: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").IconProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledWarnIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<StageComponentProps, "stageInfo"> & {
     status: boolean;
     error: string;

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,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;IACd,iCAAiC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,SAAS,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,IAAI,EAAE,cAAc,CAAC;IACrB,iGAAiG;IACjG,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,CAkG/D,CAAC;AAEH,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;IACd,iCAAiC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,SAAS,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,IAAI,EAAE,cAAc,CAAC;IACrB,iGAAiG;IACjG,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,0LAQzB,CAAC;AAIH,eAAO,MAAM,WAAW;YAEZ,OAAO;WACR,MAAM;SAsIf,CAAC;AAIH,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAkG/D,CAAC;AAEH,eAAe,KAAK,CAAC"}

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

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps, Icon } from '@pega/cosmos-react-core';
+import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
 import { ColorName } from '../../utils';
 import { TaskItemProps, StepItemProps, StageItemProps, CategoryItemProps, StepProps } from './LifeCycle.types';
 interface StepComponentProps extends BaseProps, StepProps {
@@ -34,7 +34,7 @@ export declare const StyledStepWrapper: import("styled-components").StyledCompon
 }, 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;
+export declare const StyledWarnIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
 declare const Step: FunctionComponent<StepComponentProps & ForwardProps>;
 export default Step;
 //# sourceMappingURL=Step.d.ts.map

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,EASL,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;IACF,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChC,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,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,CA6H9D,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,EAUb,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;IACF,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChC,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,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,0LASzB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA6H9D,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FunctionComponent, PropsWithoutRef, 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  Tooltip,\n  useElement\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  const [stepLabelEl, setStepLabelEl] = useElement<HTMLSpanElement>(null);\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            ref={setStepLabelEl}\n          >\n            {value}\n            <Tooltip smart target={stepLabelEl} showDelay='none' hideDelay='none'>\n              {value}\n            </Tooltip>\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  Tooltip,\n  useElement\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 = 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  const [stepLabelEl, setStepLabelEl] = useElement<HTMLSpanElement>(null);\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            ref={setStepLabelEl}\n          >\n            {value}\n            <Tooltip smart target={stepLabelEl} showDelay='none' hideDelay='none'>\n              {value}\n            </Tooltip>\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

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps, Icon } from '@pega/cosmos-react-core';
+import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
 import { TaskItemProps, StageItemProps, CategoryItemProps, StepProps, TaskProps } from './LifeCycle.types';
 interface TaskComponentProps extends BaseProps, TaskProps {
     /** Pass text for the task. */
@@ -28,7 +28,7 @@ export declare const StyledTaskButton: import("styled-components").StyledCompone
 export declare const StyledTask: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, {
     hasFocus: boolean;
 }, never>;
-export declare const StyledWarnIcon: typeof Icon;
+export declare const StyledWarnIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
 declare const Task: FunctionComponent<TaskComponentProps & ForwardProps>;
 export default Task;
 //# sourceMappingURL=Task.d.ts.map

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,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;IACpB,iGAAiG;IACjG,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"}
+{"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,EAUb,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;IACpB,iGAAiG;IACjG,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,0LASzB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAwK9D,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Task.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\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"]}
+{"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 = 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/ObjectPreview/ObjectPreview.d.ts

@@ -1,6 +1,6 @@
 import { FC, PropsWithoutRef, ReactNode, Ref } from 'react';
 import { Action, ActionsProps, ForwardProps, OmitStrict, DrawerProps } from '@pega/cosmos-react-core';
-import { PageHeaderProps } from '@pega/cosmos-react-build/lib/components/PageTemplates/PageTemplates';
+import { PageHeaderProps } from '../PageTemplates/PageTemplates';
 export interface ObjectPreviewProps extends Pick<DrawerProps, 'onAfterOpen' | 'onAfterClose' | 'onBeforeOpen' | 'onBeforeClose'> {
     open?: boolean;
     header: OmitStrict<PageHeaderProps, 'status'>;

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

@@ -1 +1 @@
-{"version":3,"file":"ObjectPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectPreview/ObjectPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,eAAe,EACf,SAAS,EACT,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,MAAM,EAEN,YAAY,EAGZ,YAAY,EAGZ,UAAU,EAIV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,eAAe,EAGhB,MAAM,qEAAqE,CAAC;AAE7E,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,aAAa,GAAG,cAAc,GAAG,cAAc,GAAG,eAAe,CAAC;IAC5F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,UAAU,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC9C,aAAa,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;IAC9D,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAuDD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAyCzE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ObjectPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectPreview/ObjectPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,eAAe,EACf,SAAS,EACT,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,MAAM,EAEN,YAAY,EAGZ,YAAY,EAGZ,UAAU,EAIV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAA0B,MAAM,gCAAgC,CAAC;AAEzF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,aAAa,GAAG,cAAc,GAAG,cAAc,GAAG,eAAe,CAAC;IAC5F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,UAAU,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC9C,aAAa,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;IAC9D,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAuDD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAyCzE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ObjectPreview/ObjectPreview.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { Actions, Button, Flex, Icon, OneColumnPage, Drawer, useI18n, useConsolidatedRef } from '@pega/cosmos-react-core';
-import { PageHeader, StyledPage } from '@pega/cosmos-react-build/lib/components/PageTemplates/PageTemplates';
+import { PageHeader, StyledPage } from '../PageTemplates/PageTemplates';
 const StyledObjectPreview = styled(Drawer) `
   height: calc(100vh - 3rem);
   top: 3rem;

package/lib/components/ObjectPreview/ObjectPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectPreview.js","sourceRoot":"","sources":["../../../src/components/ObjectPreview/ObjectPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  useRef,\n  useEffect,\n  RefObject\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Action,\n  Actions,\n  ActionsProps,\n  Button,\n  Flex,\n  ForwardProps,\n  Icon,\n  OneColumnPage,\n  OmitStrict,\n  Drawer,\n  useI18n,\n  useConsolidatedRef,\n  DrawerProps\n} from '@pega/cosmos-react-core';\nimport {\n  PageHeaderProps,\n  PageHeader,\n  StyledPage\n} from '@pega/cosmos-react-build/lib/components/PageTemplates/PageTemplates';\n\nexport interface ObjectPreviewProps\n  extends Pick<DrawerProps, 'onAfterOpen' | 'onAfterClose' | 'onBeforeOpen' | 'onBeforeClose'> {\n  open?: boolean;\n  header: OmitStrict<PageHeaderProps, 'status'>;\n  primaryAction?: Pick<Action, 'text' | 'onClick' | 'disabled'>;\n  secondaryAction?: Pick<Action, 'text' | 'onClick' | 'disabled'>;\n  additionalActions?: ActionsProps;\n  content: ReactNode;\n  onDismiss: () => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectPreview = styled(Drawer)`\n  height: calc(100vh - 3rem);\n  top: 3rem;\n`;\n\nconst PreviewHeader: FC<\n  OmitStrict<ObjectPreviewProps, 'ref' | 'content' | 'open'> & {\n    dismissButtonRef: RefObject<HTMLButtonElement>;\n  }\n> = ({\n  header,\n  primaryAction,\n  secondaryAction,\n  additionalActions,\n  onDismiss,\n  dismissButtonRef\n}) => {\n  const t = useI18n();\n  return (\n    <Flex container={{ direction: 'column', rowGap: 1 }}>\n      <Flex container={{ justify: 'between' }}>\n        <Button\n          icon\n          variant='simple'\n          ref={dismissButtonRef}\n          label={t('dismiss_label_a11y')}\n          onClick={onDismiss}\n        >\n          <Icon name='times' />\n        </Button>\n        <Flex container>\n          {secondaryAction && (\n            <Button onClick={secondaryAction.onClick} disabled={secondaryAction.disabled}>\n              {secondaryAction.text}\n            </Button>\n          )}\n          {primaryAction && (\n            <Button\n              variant='primary'\n              onClick={primaryAction.onClick}\n              disabled={primaryAction.disabled}\n            >\n              {primaryAction.text}\n            </Button>\n          )}\n          {additionalActions && <Actions {...additionalActions} />}\n        </Flex>\n      </Flex>\n      <PageHeader {...header} titleTag='h2' />\n    </Flex>\n  );\n};\n\nconst ObjectPreview: FC<PropsWithoutRef<ObjectPreviewProps> & ForwardProps> = forwardRef(\n  function ObjectPreview(\n    { content, header, open, onAfterOpen, onAfterClose, onBeforeOpen, onBeforeClose, ...restprops },\n    ref: ObjectPreviewProps['ref']\n  ) {\n    const contentRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const dismissButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (open && contentRef.current) {\n        contentRef.current?.querySelector('button')?.focus();\n      }\n    }, [open]);\n\n    return (\n      <StyledObjectPreview\n        ref={contentRef}\n        open={!!open}\n        nullWhenClosed\n        position='fixed'\n        size='30%'\n        shadow\n        placement='right'\n        onAfterOpen={onAfterOpen}\n        onAfterClose={onAfterClose}\n        onBeforeOpen={onBeforeOpen}\n        onBeforeClose={onBeforeClose}\n      >\n        <OneColumnPage\n          ref={contentRef}\n          title={header.title}\n          as={StyledPage}\n          header={\n            <PreviewHeader dismissButtonRef={dismissButtonRef} header={header} {...restprops} />\n          }\n          scrollContent\n          a={content}\n        />\n      </StyledObjectPreview>\n    );\n  }\n);\n\nexport default ObjectPreview;\n"]}
+{"version":3,"file":"ObjectPreview.js","sourceRoot":"","sources":["../../../src/components/ObjectPreview/ObjectPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  useRef,\n  useEffect,\n  RefObject\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Action,\n  Actions,\n  ActionsProps,\n  Button,\n  Flex,\n  ForwardProps,\n  Icon,\n  OneColumnPage,\n  OmitStrict,\n  Drawer,\n  useI18n,\n  useConsolidatedRef,\n  DrawerProps\n} from '@pega/cosmos-react-core';\n\nimport { PageHeaderProps, PageHeader, StyledPage } from '../PageTemplates/PageTemplates';\n\nexport interface ObjectPreviewProps\n  extends Pick<DrawerProps, 'onAfterOpen' | 'onAfterClose' | 'onBeforeOpen' | 'onBeforeClose'> {\n  open?: boolean;\n  header: OmitStrict<PageHeaderProps, 'status'>;\n  primaryAction?: Pick<Action, 'text' | 'onClick' | 'disabled'>;\n  secondaryAction?: Pick<Action, 'text' | 'onClick' | 'disabled'>;\n  additionalActions?: ActionsProps;\n  content: ReactNode;\n  onDismiss: () => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectPreview = styled(Drawer)`\n  height: calc(100vh - 3rem);\n  top: 3rem;\n`;\n\nconst PreviewHeader: FC<\n  OmitStrict<ObjectPreviewProps, 'ref' | 'content' | 'open'> & {\n    dismissButtonRef: RefObject<HTMLButtonElement>;\n  }\n> = ({\n  header,\n  primaryAction,\n  secondaryAction,\n  additionalActions,\n  onDismiss,\n  dismissButtonRef\n}) => {\n  const t = useI18n();\n  return (\n    <Flex container={{ direction: 'column', rowGap: 1 }}>\n      <Flex container={{ justify: 'between' }}>\n        <Button\n          icon\n          variant='simple'\n          ref={dismissButtonRef}\n          label={t('dismiss_label_a11y')}\n          onClick={onDismiss}\n        >\n          <Icon name='times' />\n        </Button>\n        <Flex container>\n          {secondaryAction && (\n            <Button onClick={secondaryAction.onClick} disabled={secondaryAction.disabled}>\n              {secondaryAction.text}\n            </Button>\n          )}\n          {primaryAction && (\n            <Button\n              variant='primary'\n              onClick={primaryAction.onClick}\n              disabled={primaryAction.disabled}\n            >\n              {primaryAction.text}\n            </Button>\n          )}\n          {additionalActions && <Actions {...additionalActions} />}\n        </Flex>\n      </Flex>\n      <PageHeader {...header} titleTag='h2' />\n    </Flex>\n  );\n};\n\nconst ObjectPreview: FC<PropsWithoutRef<ObjectPreviewProps> & ForwardProps> = forwardRef(\n  function ObjectPreview(\n    { content, header, open, onAfterOpen, onAfterClose, onBeforeOpen, onBeforeClose, ...restprops },\n    ref: ObjectPreviewProps['ref']\n  ) {\n    const contentRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const dismissButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (open && contentRef.current) {\n        contentRef.current?.querySelector('button')?.focus();\n      }\n    }, [open]);\n\n    return (\n      <StyledObjectPreview\n        ref={contentRef}\n        open={!!open}\n        nullWhenClosed\n        position='fixed'\n        size='30%'\n        shadow\n        placement='right'\n        onAfterOpen={onAfterOpen}\n        onAfterClose={onAfterClose}\n        onBeforeOpen={onBeforeOpen}\n        onBeforeClose={onBeforeClose}\n      >\n        <OneColumnPage\n          ref={contentRef}\n          title={header.title}\n          as={StyledPage}\n          header={\n            <PreviewHeader dismissButtonRef={dismissButtonRef} header={header} {...restprops} />\n          }\n          scrollContent\n          a={content}\n        />\n      </StyledObjectPreview>\n    );\n  }\n);\n\nexport default ObjectPreview;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "5.0.0-dev.2.1",
+  "version": "5.0.0-dev.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
@@ -20,20 +20,20 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "5.0.0-dev.2.1",
-    "@pega/cosmos-react-dnd": "5.0.0-dev.2.1",
-    "@pega/cosmos-react-rte": "5.0.0-dev.2.1",
+    "@pega/cosmos-react-core": "5.0.0-dev.4.0",
+    "@pega/cosmos-react-dnd": "5.0.0-dev.4.0",
+    "@pega/cosmos-react-rte": "5.0.0-dev.4.0",
     "@types/codemirror": "^5.60.7",
     "@types/dagre": "^0.7.46",
-    "@types/react": "^16.14.24 || ^17.0.38",
-    "@types/react-dom": "^16.9.14 || ^17.0.11",
+    "@types/react": "^16.14.43 || ^17.0.62",
+    "@types/react-dom": "^16.9.19 || ^17.0.20",
     "@types/styled-components": "^5.1.26",
     "codemirror": "^5.65.9",
     "dagre": "^0.8.5",
     "polished": "^4.1.0",
-    "react": "^16.14.0 || ^17.0.0",
+    "react": "^17.0.0",
     "react-codemirror2": "^7.2.1",
-    "react-dom": "^16.14.0 || ^17.0.0",
+    "react-dom": "^17.0.0",
     "styled-components": "^5.2.0",
     "tinymce": "^6.3.1"
   },
@@ -47,11 +47,11 @@
     "@storybook/theming": "~7.0.24",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "typescript": "~5.0.2"
+    "typescript": "~5.2.2"
   },
   "overrides": {
     "react-codemirror2": {
-      "react": "^16.14.0 || ^17.0.0"
+      "react": "^17.0.0"
     }
   }
 }