@pega/cosmos-react-cs 3.0.0-dev.9.0 → 3.0.0-rc.2

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.styles.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { lighten } from 'polished';\n\nimport {\n  Button,\n  defaultThemeProp,\n  StyledButton,\n  StyledCard,\n  StyledFlex,\n  StyledIcon,\n  StyledEmptyState,\n  SummaryList,\n  StyledText,\n  tryCatch,\n  StyledSummaryItem,\n  StyledVisual\n} from '@pega/cosmos-react-core';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledSummaryListContent } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';\n\nconst navWidth = '4rem';\nconst itemIconSize = '2rem';\n\nexport const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  const hoverColor = tryCatch(() =>\n    lighten(0.05, theme.components['app-shell'].nav['background-color'])\n  );\n  return css`\n    min-width: 20rem;\n    max-width: 20rem;\n    color: ${theme.base.palette.light};\n    overflow: hidden;\n    box-shadow: ${theme.base.shadow.low};\n    @media (min-width: ${theme.base.breakpoints.lg}) {\n      min-width: 23rem;\n      max-width: 23rem;\n    }\n    &:not(& &) {\n      background-color: ${theme.components['app-shell'].nav['background-color']};\n    }\n    ${StyledCardHeader} {\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding: ${theme.base.spacing};\n      }\n      ${StyledFlex} > ${StyledIcon} {\n        width: ${itemIconSize};\n        height: ${itemIconSize};\n        padding: calc(0.75 * ${theme.base.spacing});\n        border-radius: calc(3 * ${theme.base['border-radius']});\n        background-color: ${theme.base.palette.success};\n      }\n    }\n    ${StyledSummaryListContent} {\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding: 0;\n      }\n    }\n    ${StyledButton}:enabled:focus {\n      box-shadow: ${theme.base.shadow['focus-inverted']};\n    }\n    ${StyledSummaryItem} {\n      padding: ${theme.base.spacing};\n      border-top: ${theme.components.button['border-width']} solid ${borderColor};\n      outline: none;\n      ${StyledVisual} ${StyledIcon} {\n        width: ${itemIconSize};\n        height: ${itemIconSize};\n        padding: calc(0.75 * ${theme.base.spacing});\n      }\n      ${StyledButton} {\n        visibility: hidden;\n      }\n      &:not(:last-child) {\n        border-bottom: none;\n      }\n      &:hover {\n        background-color: ${hoverColor};\n        cursor: pointer;\n      }\n      &:hover,\n      &:focus,\n      &:focus-within {\n        ${StyledButton} {\n          visibility: visible;\n        }\n      }\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: inset ${theme.base.shadow['focus-inverted']};\n      }\n    }\n    ${StyledEmptyState} {\n      padding-bottom: ${theme.base.spacing};\n      ${StyledIcon}, ${StyledText} {\n        color: ${theme.base.palette.light};\n      }\n    }\n  `;\n});\n\nStyledIntelligentGuidanceList.defaultProps = defaultThemeProp;\n\nexport const StyledIntelligentGuidanceButton = styled(Button)(({ theme }) => {\n  return css`\n    box-shadow: ${theme.base.shadow.low};\n    color: ${theme.base.palette.light};\n    background-color: ${theme.base.palette.success};\n    width: 4rem;\n    height: 4rem;\n    svg {\n      width: 2.25rem;\n      height: 2.25rem;\n    }\n    ${StyledCount} {\n      position: absolute;\n      right: 0;\n      top: 0;\n    }\n  `;\n});\n\nStyledIntelligentGuidanceButton.defaultProps = defaultThemeProp;\n\nconst slideIn = keyframes`\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n`;\n\nexport interface StyledIntelligentGuidanceProps {\n  isCollapsed: boolean;\n  hasItems: boolean;\n}\n\nexport const StyledIntelligentGuidance = styled.div<StyledIntelligentGuidanceProps>(\n  ({ theme, isCollapsed }) => {\n    return css`\n      position: fixed;\n      inset-inline-start: calc(2 * ${theme.base.spacing} + ${navWidth});\n      bottom: ${isCollapsed ? `calc(2 * ${theme.base.spacing}) ` : 0};\n      @media (min-width: ${theme.base.breakpoints.md}) {\n        bottom: 0;\n      }\n      z-index: ${theme.base['z-index'].popover};\n      ${StyledIntelligentGuidanceList}:not(${StyledIntelligentGuidanceList} ${StyledIntelligentGuidanceList}) {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        transition: transform calc(4 * ${theme.base.animation.speed})\n          ${theme.base.animation.timing.ease};\n        ${isCollapsed &&\n        css`\n          transform: translateY(calc(100% - var(--headerHeight)));\n        `}\n        ${StyledCardHeader} ${StyledButton} {\n          transition: transform calc(2 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n          transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n        }\n      }\n      ${StyledIntelligentGuidanceButton} {\n        animation: ${slideIn} calc(4 * ${theme.base.animation.speed});\n      }\n    `;\n  }\n);\n\nStyledIntelligentGuidance.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"IntelligentGuidance.styles.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,gEAAgE,CAAC;AAE1G,MAAM,YAAY,GAAG,MAAM,CAAC;AAE5B,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IACF,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC/B,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACrE,CAAC;IACF,OAAO,GAAG,CAAA;;;aAGC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;;kBAEnB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;yBACd,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;;;0BAKxB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;;MAEzE,gBAAgB;cACR,UAAU,IAAI,UAAU;mBACnB,KAAK,CAAC,IAAI,CAAC,OAAO;;QAE7B,UAAU,MAAM,UAAU;iBACjB,YAAY;kBACX,YAAY;+BACC,KAAK,CAAC,IAAI,CAAC,OAAO;kCACf,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;4BACjC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO;;;MAGhD,wBAAwB;cAChB,UAAU,IAAI,UAAU;;;;MAIhC,YAAY;oBACE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;MAEjD,iBAAiB;iBACN,KAAK,CAAC,IAAI,CAAC,OAAO;oBACf,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC,UAAU,WAAW;;QAExE,YAAY,IAAI,UAAU;iBACjB,YAAY;kBACX,YAAY;+BACC,KAAK,CAAC,IAAI,CAAC,OAAO;;QAEzC,YAAY;;;;;;;4BAOQ,UAAU;;;;;;UAM5B,YAAY;;;;;;4BAMM,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;;MAGzD,gBAAgB;wBACE,KAAK,CAAC,IAAI,CAAC,OAAO;QAClC,UAAU,KAAK,UAAU;iBAChB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;;;GAGtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,CAAC,MAAM,+BAA+B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1E,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;aAC1B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;wBACb,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO;;;;;;;MAO5C,WAAW;;;;;GAKd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,+BAA+B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhE,MAAM,OAAO,GAAG,SAAS,CAAA;;;;;;;CAOxB,CAAC;AAOF,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CACjD,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;IACzB,OAAO,GAAG,CAAA;;qCAEuB,KAAK,CAAC,IAAI,CAAC,OAAO;uCAChB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;UACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;gBAC1B,WAAW,CAAC,CAAC,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;2BACzC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;iBAGnC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO;QACtC,6BAA6B,QAAQ,6BAA6B,IAAI,6BAA6B;;;yCAGlE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;YACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;UAClC,WAAW;QACb,GAAG,CAAA;;SAEF;UACC,gBAAgB,IAAI,YAAY;2CACC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;cACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;uBACvB,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;;;QAG5D,+BAA+B;qBAClB,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;KAE9D,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { lighten } from 'polished';\n\nimport {\n  Button,\n  defaultThemeProp,\n  StyledButton,\n  StyledCard,\n  StyledFlex,\n  StyledIcon,\n  StyledEmptyState,\n  SummaryList,\n  StyledText,\n  tryCatch,\n  StyledSummaryItem,\n  StyledVisual\n} from '@pega/cosmos-react-core';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledSummaryListContent } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';\n\nconst itemIconSize = '2rem';\n\nexport const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  const hoverColor = tryCatch(() =>\n    lighten(0.05, theme.components['app-shell'].nav['background-color'])\n  );\n  return css`\n    min-width: 20rem;\n    max-width: 20rem;\n    color: ${theme.base.palette.light};\n    overflow: hidden;\n    box-shadow: ${theme.base.shadow.low};\n    @media (min-width: ${theme.base.breakpoints.lg}) {\n      min-width: 23rem;\n      max-width: 23rem;\n    }\n    &:not(& &) {\n      background-color: ${theme.components['app-shell'].nav['background-color']};\n    }\n    ${StyledCardHeader} {\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding: ${theme.base.spacing};\n      }\n      ${StyledFlex} > ${StyledIcon} {\n        width: ${itemIconSize};\n        height: ${itemIconSize};\n        padding: calc(0.75 * ${theme.base.spacing});\n        border-radius: calc(3 * ${theme.base['border-radius']});\n        background-color: ${theme.base.palette.success};\n      }\n    }\n    ${StyledSummaryListContent} {\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding: 0;\n      }\n    }\n    ${StyledButton}:enabled:focus {\n      box-shadow: ${theme.base.shadow['focus-inverted']};\n    }\n    ${StyledSummaryItem} {\n      padding: ${theme.base.spacing};\n      border-top: ${theme.components.button['border-width']} solid ${borderColor};\n      outline: none;\n      ${StyledVisual} ${StyledIcon} {\n        width: ${itemIconSize};\n        height: ${itemIconSize};\n        padding: calc(0.75 * ${theme.base.spacing});\n      }\n      ${StyledButton} {\n        visibility: hidden;\n      }\n      &:not(:last-child) {\n        border-bottom: none;\n      }\n      &:hover {\n        background-color: ${hoverColor};\n        cursor: pointer;\n      }\n      &:hover,\n      &:focus,\n      &:focus-within {\n        ${StyledButton} {\n          visibility: visible;\n        }\n      }\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: inset ${theme.base.shadow['focus-inverted']};\n      }\n    }\n    ${StyledEmptyState} {\n      padding-bottom: ${theme.base.spacing};\n      ${StyledIcon}, ${StyledText} {\n        color: ${theme.base.palette.light};\n      }\n    }\n  `;\n});\n\nStyledIntelligentGuidanceList.defaultProps = defaultThemeProp;\n\nexport const StyledIntelligentGuidanceButton = styled(Button)(({ theme }) => {\n  return css`\n    box-shadow: ${theme.base.shadow.low};\n    color: ${theme.base.palette.light};\n    background-color: ${theme.base.palette.success};\n    width: 4rem;\n    height: 4rem;\n    svg {\n      width: 2.25rem;\n      height: 2.25rem;\n    }\n    ${StyledCount} {\n      position: absolute;\n      right: 0;\n      top: 0;\n    }\n  `;\n});\n\nStyledIntelligentGuidanceButton.defaultProps = defaultThemeProp;\n\nconst slideIn = keyframes`\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n`;\n\nexport interface StyledIntelligentGuidanceProps {\n  isCollapsed: boolean;\n  hasItems: boolean;\n}\n\nexport const StyledIntelligentGuidance = styled.div<StyledIntelligentGuidanceProps>(\n  ({ theme, isCollapsed }) => {\n    return css`\n      position: fixed;\n      inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));\n      transition: inset-inline-start ${theme.base.animation.speed}\n        ${theme.base.animation.timing.ease};\n      bottom: ${isCollapsed ? `calc(2 * ${theme.base.spacing}) ` : 0};\n      @media (min-width: ${theme.base.breakpoints.md}) {\n        bottom: 0;\n      }\n      z-index: ${theme.base['z-index'].popover};\n      ${StyledIntelligentGuidanceList}:not(${StyledIntelligentGuidanceList} ${StyledIntelligentGuidanceList}) {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        transition: transform calc(4 * ${theme.base.animation.speed})\n          ${theme.base.animation.timing.ease};\n        ${isCollapsed &&\n        css`\n          transform: translateY(calc(100% - var(--headerHeight)));\n        `}\n        ${StyledCardHeader} ${StyledButton} {\n          transition: transform calc(2 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n          transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n        }\n      }\n      ${StyledIntelligentGuidanceButton} {\n        animation: ${slideIn} calc(4 * ${theme.base.animation.speed});\n      }\n    `;\n  }\n);\n\nStyledIntelligentGuidance.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAQL,WAAW,EACX,YAAY,EAWZ,mBAAmB,EAEnB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAqED,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CA6CzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAQL,WAAW,EACX,YAAY,EAWZ,mBAAmB,EAEnB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAqED,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CA+CzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}

package/lib/components/InteractionNotification/InteractionNotification.js

@@ -72,7 +72,7 @@ const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
 StyledInteractionNotification.defaultProps = defaultThemeProp;
 const InteractionNotification = forwardRef(({ icon, title, primaryText, secondaryText, status, fields, onAccept }, ref) => {
     const t = useI18n();
-    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') }), children: _jsx(SummaryItem, { visual: _jsx(Avatar, { shape: 'circle', size: 'm', name: title, icon: icon }), primary: title }) }), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: primaryText }), secondaryText && _jsx(Text, { variant: 'secondary', children: secondaryText }), _jsx(Status, { variant: status.variant, children: status.text })] }) }), fields && fields.length !== 0 && (_jsx(CardFooter, { children: _jsx(FieldValueList, { variant: 'inline', fields: fields }) }))] }));
+    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { actions: onAccept ? (_jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') })) : undefined, children: _jsx(SummaryItem, { visual: _jsx(Avatar, { shape: 'circle', size: 'm', name: title, icon: icon }), primary: title }) }), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: primaryText }), secondaryText && _jsx(Text, { variant: 'secondary', children: secondaryText }), _jsx(Status, { variant: status.variant, children: status.text })] }) }), fields && fields.length !== 0 && (_jsx(CardFooter, { children: _jsx(FieldValueList, { variant: 'inline', fields: fields }) }))] }));
 });
 export default InteractionNotification;
 //# sourceMappingURL=InteractionNotification.js.map

package/lib/components/InteractionNotification/InteractionNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  SummaryItem,\n  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  Avatar,\n  FieldValueList,\n  StyledFieldName,\n  CardFooter,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface InteractionNotificationProps extends NoChildrenProp {\n  /** Ref to Component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Name of the icon used in header. */\n  icon: string;\n  /** Interaction title. */\n  title: string;\n  /** Primary information of the notification. For example caller name . */\n  primaryText: string;\n  /** Secondary information of the notification. For example phone number of the caller */\n  secondaryText?: string;\n  /** Represents the current status of interaction. */\n  status: { variant: StatusProps['variant']; text: string };\n  /** Information structured as field values to be displayed below main section. */\n  fields?: FieldValueListProps['fields'];\n  /** Callback when accept button is clicked. */\n  onAccept?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-inline-end: 1rem;\n    inset-block-start: 4rem;\n    width: clamp(21.5rem, calc(100% - 2rem), 25rem);\n    z-index: ${base['z-index'].modal};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n\n    &:not(& &) {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardHeader} {\n      ${StyledButton} {\n        margin-inline-start: calc(2 * ${base.spacing});\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n\n      ${StyledText} {\n        color: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledCardFooter} {\n      ${StyledFieldValueList} {\n        border-top: solid 0.0625rem ${base.colors.gray.medium};\n        padding-top: calc(2 * ${base.spacing});\n        color: ${base.colors.white};\n\n        ${StyledFieldName} {\n          color: ${base.colors.white};\n        }\n      }\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        icon,\n        title,\n        primaryText,\n        secondaryText,\n        status,\n        fields,\n        onAccept\n      }: PropsWithoutRef<InteractionNotificationProps>,\n      ref: InteractionNotificationProps['ref']\n    ) => {\n      const t = useI18n();\n\n      return (\n        <StyledInteractionNotification ref={ref}>\n          <CardHeader\n            actions={\n              <Button variant='primary' onClick={onAccept}>\n                {t('accept')}\n              </Button>\n            }\n          >\n            <SummaryItem\n              visual={<Avatar shape='circle' size='m' name={title} icon={icon} />}\n              primary={title}\n            />\n          </CardHeader>\n          <CardContent>\n            <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n              <Text variant='h1'>{primaryText}</Text>\n              {secondaryText && <Text variant='secondary'>{secondaryText}</Text>}\n              <Status variant={status.variant}>{status.text}</Status>\n            </Flex>\n          </CardContent>\n          {fields && fields.length !== 0 && (\n            <CardFooter>\n              <FieldValueList variant='inline' fields={fields} />\n            </CardFooter>\n          )}\n        </StyledInteractionNotification>\n      );\n    }\n  );\n\nexport default InteractionNotification;\n"]}
+{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  SummaryItem,\n  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  Avatar,\n  FieldValueList,\n  StyledFieldName,\n  CardFooter,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface InteractionNotificationProps extends NoChildrenProp {\n  /** Ref to Component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Name of the icon used in header. */\n  icon: string;\n  /** Interaction title. */\n  title: string;\n  /** Primary information of the notification. For example caller name . */\n  primaryText: string;\n  /** Secondary information of the notification. For example phone number of the caller */\n  secondaryText?: string;\n  /** Represents the current status of interaction. */\n  status: { variant: StatusProps['variant']; text: string };\n  /** Information structured as field values to be displayed below main section. */\n  fields?: FieldValueListProps['fields'];\n  /** Callback when accept button is clicked. */\n  onAccept?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-inline-end: 1rem;\n    inset-block-start: 4rem;\n    width: clamp(21.5rem, calc(100% - 2rem), 25rem);\n    z-index: ${base['z-index'].modal};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n\n    &:not(& &) {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardHeader} {\n      ${StyledButton} {\n        margin-inline-start: calc(2 * ${base.spacing});\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n\n      ${StyledText} {\n        color: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledCardFooter} {\n      ${StyledFieldValueList} {\n        border-top: solid 0.0625rem ${base.colors.gray.medium};\n        padding-top: calc(2 * ${base.spacing});\n        color: ${base.colors.white};\n\n        ${StyledFieldName} {\n          color: ${base.colors.white};\n        }\n      }\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        icon,\n        title,\n        primaryText,\n        secondaryText,\n        status,\n        fields,\n        onAccept\n      }: PropsWithoutRef<InteractionNotificationProps>,\n      ref: InteractionNotificationProps['ref']\n    ) => {\n      const t = useI18n();\n\n      return (\n        <StyledInteractionNotification ref={ref}>\n          <CardHeader\n            actions={\n              onAccept ? (\n                <Button variant='primary' onClick={onAccept}>\n                  {t('accept')}\n                </Button>\n              ) : undefined\n            }\n          >\n            <SummaryItem\n              visual={<Avatar shape='circle' size='m' name={title} icon={icon} />}\n              primary={title}\n            />\n          </CardHeader>\n          <CardContent>\n            <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n              <Text variant='h1'>{primaryText}</Text>\n              {secondaryText && <Text variant='secondary'>{secondaryText}</Text>}\n              <Status variant={status.variant}>{status.text}</Status>\n            </Flex>\n          </CardContent>\n          {fields && fields.length !== 0 && (\n            <CardFooter>\n              <FieldValueList variant='inline' fields={fields} />\n            </CardFooter>\n          )}\n        </StyledInteractionNotification>\n      );\n    }\n  );\n\nexport default InteractionNotification;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EACL,SAAS,EACT,MAAM,EAKN,YAAY,EAIZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,EAAE,MAAM,EAAE,cAAc;IAC9E,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gEAAgE;IAChE,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,eAAe,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,0GAAgB,CAAC;AAC/D,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,8BAA8B,0GAAgB,CAAC;AAI5D,eAAO,MAAM,sBAAsB,gOAgElC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA4C7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EACL,SAAS,EACT,MAAM,EAKN,YAAY,EAIZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,EAAE,MAAM,EAAE,cAAc;IAC9E,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gEAAgE;IAChE,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,eAAe,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,0GAAgB,CAAC;AAC/D,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,8BAA8B,0GAAgB,CAAC;AAI5D,eAAO,MAAM,sBAAsB,gOAgElC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA+C7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/InteractionTimer/InteractionTimer.js

@@ -66,7 +66,7 @@ const InteractionTimer = forwardRef(({ icon, progress = 0, hasNotifications = fa
     return (_jsxs(Flex, { ...restProps, ref: ref, container: {
             direction: 'column',
             alignItems: 'center'
-        }, sla: sla, hasNotifications: hasNotifications, as: StyledInteractionTimer, "aria-label": ariaLabel, children: [_jsxs(StyledInteractionTimerIconWrapper, { children: [_jsx(Icon, { name: icon, as: StyledInteractionTimerIcon }), _jsx(Progress, { variant: 'ring', minValue: 0, maxValue: 100, value: progress, placement: 'inline' })] }), meta && (_jsx(Text, { variant: 'secondary', as: StyledInteractionTimerMetaText, children: meta }))] }));
+        }, sla: sla, hasNotifications: hasNotifications, as: StyledInteractionTimer, "aria-label": ariaLabel, "aria-live": 'polite', role: 'timer', children: [_jsxs(StyledInteractionTimerIconWrapper, { children: [_jsx(Icon, { name: icon, as: StyledInteractionTimerIcon }), _jsx(Progress, { variant: 'ring', minValue: 0, maxValue: 100, value: progress, placement: 'inline', "aria-hidden": 'true' })] }), meta && (_jsx(Text, { variant: 'secondary', as: StyledInteractionTimerMetaText, "aria-hidden": 'true', children: meta }))] }));
 });
 export default InteractionTimer;
 //# sourceMappingURL=InteractionTimer.js.map

package/lib/components/InteractionTimer/InteractionTimer.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionTimer.js","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAGL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EAER,gBAAgB,EAChB,kBAAkB,EAGnB,MAAM,yBAAyB,CAAC;AAuBjC,MAAM,CAAC,MAAM,iCAAiC,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAC/D,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAI5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,GAAG,EACH,gBAAgB,EAChB,KAAK,EAAE,EACL,UAAU,EAAE,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,EAC3D,EACD,KAAK,EACN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wBACU,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAGlC,iCAAiC;;;;8BAIX,KAAK,CAAC,IAAI,CAAC,OAAO;UACtC,gBAAgB;QAClB,GAAG,CAAA;;;gCAGqB,qBAAqB,CAAC,wBAAwB,CAAC;;;;;;;;SAQtE;;;QAGD,kBAAkB;;;oBAGN,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAAC;QAC5D,CAAC,CAAC,cAAc;;;oBAGR,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC;QAC1D,CAAC,CAAC,cAAc;;;QAGpB,0BAA0B;;;;;;;;;;;;;QAa1B,8BAA8B;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,IAAI,EACJ,QAAQ,GAAG,CAAC,EACZ,gBAAgB,GAAG,KAAK,EACxB,IAAI,EACJ,GAAG,EACH,SAAS,EACT,GAAG,SAAS,EAC2B,EACzC,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,QAAQ;SACrB,EACD,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,gBAAgB,EAClC,EAAE,EAAE,sBAAsB,gBACd,SAAS,aAErB,MAAC,iCAAiC,eAChC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,0BAA0B,GAAI,EACpD,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,QAAQ,EACf,SAAS,EAAC,QAAQ,GAClB,IACgC,EACnC,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,8BAA8B,YACzD,IAAI,GACA,CACR,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  AsProp,\n  Flex,\n  Icon,\n  Text,\n  Progress,\n  ForwardProps,\n  defaultThemeProp,\n  StyledProgressRing,\n  PropsWithDefaults,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nexport interface InteractionTimerProps extends BaseProps, AsProp, NoChildrenProp {\n  /** Name of the icon */\n  icon: string;\n  /** Ref to Component */\n  ref?: Ref<HTMLDivElement>;\n  /** Current Sla. This is used to display progress ring color. */\n  sla?: 'goal' | 'deadline' | 'past-deadline';\n  /** Progress % of the current stage\n   * @default 0\n   */\n  progress?: number;\n  /** Indicates if there are any unread notifications\n   * @default false\n   */\n  hasNotifications?: boolean;\n  /** Meta info */\n  meta?: string;\n  /** Aria label for screen readers. */\n  ariaLabel?: string;\n}\n\nexport const StyledInteractionTimerIconWrapper = styled.span``;\nexport const StyledInteractionTimerIcon = styled.svg``;\nexport const StyledInteractionTimerMetaText = styled.span``;\n\ntype InteractionTimerPropsWithDefaults = PropsWithDefaults<InteractionTimerProps, 'sla'>;\n\nexport const StyledInteractionTimer = styled.div<InteractionTimerPropsWithDefaults>(\n  ({\n    sla,\n    hasNotifications,\n    theme: {\n      components: { 'interaction-timer': InteractionTimerTheme }\n    },\n    theme\n  }) => {\n    return css`\n      width: calc(8 * ${theme.base.spacing});\n      flex-shrink: 0;\n\n      ${StyledInteractionTimerIconWrapper} {\n        font-size: 2.2rem;\n        position: relative;\n        display: inline-flex;\n        padding: calc(0.3 * ${theme.base.spacing});\n        ${hasNotifications &&\n        css`\n          &::after {\n            position: absolute;\n            background-color: ${InteractionTimerTheme['notification-indicator']};\n            border-radius: 50%;\n            content: '';\n            top: 0;\n            right: 0;\n            width: 0.3rem;\n            height: 0.3rem;\n          }\n        `}\n      }\n\n      ${StyledProgressRing} {\n        circle {\n          stroke-width: 1;\n          stroke: ${sla\n            ? InteractionTimerTheme.sla[sla].progress['secondary-color']\n            : 'currentcolor'};\n        }\n        circle + circle {\n          stroke: ${sla\n            ? InteractionTimerTheme.sla[sla].progress['primary-color']\n            : 'currentcolor'};\n        }\n      }\n      ${StyledInteractionTimerIcon} {\n        font-size: 1.5rem;\n        margin: auto;\n        position: absolute;\n        display: inline-flex;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        width: 100%;\n        align-items: center;\n        justify-content: center;\n      }\n      ${StyledInteractionTimerMetaText} {\n        color: inherit;\n      }\n    `;\n  }\n);\n\nStyledInteractionTimer.defaultProps = defaultThemeProp;\n\nconst InteractionTimer: FunctionComponent<InteractionTimerProps & ForwardProps> = forwardRef(\n  (\n    {\n      icon,\n      progress = 0,\n      hasNotifications = false,\n      meta,\n      sla,\n      ariaLabel,\n      ...restProps\n    }: PropsWithoutRef<InteractionTimerProps>,\n    ref: InteractionTimerProps['ref']\n  ) => {\n    return (\n      <Flex\n        {...restProps}\n        ref={ref}\n        container={{\n          direction: 'column',\n          alignItems: 'center'\n        }}\n        sla={sla}\n        hasNotifications={hasNotifications}\n        as={StyledInteractionTimer}\n        aria-label={ariaLabel}\n      >\n        <StyledInteractionTimerIconWrapper>\n          <Icon name={icon} as={StyledInteractionTimerIcon} />\n          <Progress\n            variant='ring'\n            minValue={0}\n            maxValue={100}\n            value={progress}\n            placement='inline'\n          />\n        </StyledInteractionTimerIconWrapper>\n        {meta && (\n          <Text variant='secondary' as={StyledInteractionTimerMetaText}>\n            {meta}\n          </Text>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default InteractionTimer;\n"]}
+{"version":3,"file":"InteractionTimer.js","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAGL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EAER,gBAAgB,EAChB,kBAAkB,EAGnB,MAAM,yBAAyB,CAAC;AAuBjC,MAAM,CAAC,MAAM,iCAAiC,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAC/D,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAI5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,GAAG,EACH,gBAAgB,EAChB,KAAK,EAAE,EACL,UAAU,EAAE,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,EAC3D,EACD,KAAK,EACN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wBACU,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAGlC,iCAAiC;;;;8BAIX,KAAK,CAAC,IAAI,CAAC,OAAO;UACtC,gBAAgB;QAClB,GAAG,CAAA;;;gCAGqB,qBAAqB,CAAC,wBAAwB,CAAC;;;;;;;;SAQtE;;;QAGD,kBAAkB;;;oBAGN,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAAC;QAC5D,CAAC,CAAC,cAAc;;;oBAGR,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC;QAC1D,CAAC,CAAC,cAAc;;;QAGpB,0BAA0B;;;;;;;;;;;;;QAa1B,8BAA8B;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,IAAI,EACJ,QAAQ,GAAG,CAAC,EACZ,gBAAgB,GAAG,KAAK,EACxB,IAAI,EACJ,GAAG,EACH,SAAS,EACT,GAAG,SAAS,EAC2B,EACzC,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,QAAQ;SACrB,EACD,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,gBAAgB,EAClC,EAAE,EAAE,sBAAsB,gBACd,SAAS,eACX,QAAQ,EAClB,IAAI,EAAC,OAAO,aAEZ,MAAC,iCAAiC,eAChC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,0BAA0B,GAAI,EACpD,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,QAAQ,EACf,SAAS,EAAC,QAAQ,iBACN,MAAM,GAClB,IACgC,EACnC,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,8BAA8B,iBAAc,MAAM,YAC7E,IAAI,GACA,CACR,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  AsProp,\n  Flex,\n  Icon,\n  Text,\n  Progress,\n  ForwardProps,\n  defaultThemeProp,\n  StyledProgressRing,\n  PropsWithDefaults,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nexport interface InteractionTimerProps extends BaseProps, AsProp, NoChildrenProp {\n  /** Name of the icon */\n  icon: string;\n  /** Ref to Component */\n  ref?: Ref<HTMLDivElement>;\n  /** Current Sla. This is used to display progress ring color. */\n  sla?: 'goal' | 'deadline' | 'past-deadline';\n  /** Progress % of the current stage\n   * @default 0\n   */\n  progress?: number;\n  /** Indicates if there are any unread notifications\n   * @default false\n   */\n  hasNotifications?: boolean;\n  /** Meta info */\n  meta?: string;\n  /** Aria label for screen readers. */\n  ariaLabel?: string;\n}\n\nexport const StyledInteractionTimerIconWrapper = styled.span``;\nexport const StyledInteractionTimerIcon = styled.svg``;\nexport const StyledInteractionTimerMetaText = styled.span``;\n\ntype InteractionTimerPropsWithDefaults = PropsWithDefaults<InteractionTimerProps, 'sla'>;\n\nexport const StyledInteractionTimer = styled.div<InteractionTimerPropsWithDefaults>(\n  ({\n    sla,\n    hasNotifications,\n    theme: {\n      components: { 'interaction-timer': InteractionTimerTheme }\n    },\n    theme\n  }) => {\n    return css`\n      width: calc(8 * ${theme.base.spacing});\n      flex-shrink: 0;\n\n      ${StyledInteractionTimerIconWrapper} {\n        font-size: 2.2rem;\n        position: relative;\n        display: inline-flex;\n        padding: calc(0.3 * ${theme.base.spacing});\n        ${hasNotifications &&\n        css`\n          &::after {\n            position: absolute;\n            background-color: ${InteractionTimerTheme['notification-indicator']};\n            border-radius: 50%;\n            content: '';\n            top: 0;\n            right: 0;\n            width: 0.3rem;\n            height: 0.3rem;\n          }\n        `}\n      }\n\n      ${StyledProgressRing} {\n        circle {\n          stroke-width: 1;\n          stroke: ${sla\n            ? InteractionTimerTheme.sla[sla].progress['secondary-color']\n            : 'currentcolor'};\n        }\n        circle + circle {\n          stroke: ${sla\n            ? InteractionTimerTheme.sla[sla].progress['primary-color']\n            : 'currentcolor'};\n        }\n      }\n      ${StyledInteractionTimerIcon} {\n        font-size: 1.5rem;\n        margin: auto;\n        position: absolute;\n        display: inline-flex;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        width: 100%;\n        align-items: center;\n        justify-content: center;\n      }\n      ${StyledInteractionTimerMetaText} {\n        color: inherit;\n      }\n    `;\n  }\n);\n\nStyledInteractionTimer.defaultProps = defaultThemeProp;\n\nconst InteractionTimer: FunctionComponent<InteractionTimerProps & ForwardProps> = forwardRef(\n  (\n    {\n      icon,\n      progress = 0,\n      hasNotifications = false,\n      meta,\n      sla,\n      ariaLabel,\n      ...restProps\n    }: PropsWithoutRef<InteractionTimerProps>,\n    ref: InteractionTimerProps['ref']\n  ) => {\n    return (\n      <Flex\n        {...restProps}\n        ref={ref}\n        container={{\n          direction: 'column',\n          alignItems: 'center'\n        }}\n        sla={sla}\n        hasNotifications={hasNotifications}\n        as={StyledInteractionTimer}\n        aria-label={ariaLabel}\n        aria-live='polite'\n        role='timer'\n      >\n        <StyledInteractionTimerIconWrapper>\n          <Icon name={icon} as={StyledInteractionTimerIcon} />\n          <Progress\n            variant='ring'\n            minValue={0}\n            maxValue={100}\n            value={progress}\n            placement='inline'\n            aria-hidden='true'\n          />\n        </StyledInteractionTimerIconWrapper>\n        {meta && (\n          <Text variant='secondary' as={StyledInteractionTimerMetaText} aria-hidden='true'>\n            {meta}\n          </Text>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default InteractionTimer;\n"]}

package/lib/components/TaskManager/ConversationAI.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { ConversationAIProps } from './TaskManager.types';
+declare const ConversationAI: FunctionComponent<ConversationAIProps & ForwardProps>;
+export default ConversationAI;
+//# sourceMappingURL=ConversationAI.d.ts.map

package/lib/components/TaskManager/ConversationAI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationAI.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/ConversationAI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiD,MAAM,OAAO,CAAC;AAEzF,OAAO,EAEL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAU1D,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAqEzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/TaskManager/ConversationAI.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef } from 'react';
+import { Flex, Button, useOuterEvent, useEscape, Icon, Text, EmptyState, useI18n, registerIcon } from '@pega/cosmos-react-core';
+import * as aiAssistIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/ai-assist.icon';
+import { StyledCountBadge, StyledEntityPopover, StyledContent, StyledHeader } from './TaskManager.styles';
+registerIcon(aiAssistIcon);
+const ConversationAI = forwardRef(({ content, entityCount }, ref) => {
+    const t = useI18n();
+    const [showPopover, setShowPopover] = useState(false);
+    const buttonRef = useRef(null);
+    const popoverRef = useRef(null);
+    useOuterEvent('mousedown', [popoverRef, buttonRef], () => {
+        if (showPopover)
+            setShowPopover(false);
+    });
+    useEscape(() => {
+        setShowPopover(false);
+    });
+    return (_jsxs("div", { ref: ref, children: [_jsxs(Button, { variant: 'simple', icon: true, onClick: () => {
+                    setShowPopover(cur => !cur);
+                }, ref: buttonRef, "aria-label": t('show_detected_entities'), children: [_jsx(Icon, { name: 'ai-assist' }), _jsx(StyledCountBadge, { variant: 'default', children: entityCount })] }), _jsxs(StyledEntityPopover, { show: showPopover, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, arrow: true, children: [_jsxs(Flex, { container: {
+                            justify: 'between',
+                            alignItems: 'center'
+                        }, as: StyledHeader, children: [_jsx(Text, { variant: 'h3', children: t('ai_detected_entities') }), _jsx(Button, { variant: 'simple', onClick: () => {
+                                    setShowPopover(false);
+                                }, icon: true, "aria-label": t('close_conversation'), children: _jsx(Icon, { name: 'times' }) })] }), _jsx(StyledContent, { children: entityCount === 0 || content === null ? (_jsx(EmptyState, { message: t('nothing_detected_yet'), item: { grow: 1 } })) : (content) })] })] }));
+});
+export default ConversationAI;
+//# sourceMappingURL=ConversationAI.js.map

package/lib/components/TaskManager/ConversationAI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationAI.js","sourceRoot":"","sources":["../../../src/components/TaskManager/ConversationAI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEzF,OAAO,EACL,IAAI,EAEJ,MAAM,EACN,aAAa,EACb,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AAGjG,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,YAAY,EACb,MAAM,sBAAsB,CAAC;AAE9B,YAAY,CAAC,YAAY,CAAC,CAAC;AAE3B,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,OAAO,EAAE,WAAW,EAAwC,EAC9D,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;QACvD,IAAI,WAAW;YAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,aACX,MAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE;oBACZ,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC9B,CAAC,EACD,GAAG,EAAE,SAAS,gBACF,CAAC,CAAC,wBAAwB,CAAC,aAEvC,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,GAAG,EACzB,KAAC,gBAAgB,IAAC,OAAO,EAAC,SAAS,YAAE,WAAW,GAAoB,IAC7D,EAET,MAAC,mBAAmB,IAClB,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,UAAU,EACf,KAAK,mBAEL,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,OAAO,EAAE,SAAS;4BAClB,UAAU,EAAE,QAAQ;yBACrB,EACD,EAAE,EAAE,YAAY,aAEhB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,GAAQ,EACrD,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;oCACZ,cAAc,CAAC,KAAK,CAAC,CAAC;gCACxB,CAAC,EACD,IAAI,sBACQ,CAAC,CAAC,oBAAoB,CAAC,YAEnC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACP,KAAC,aAAa,cACX,WAAW,KAAK,CAAC,IAAI,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,CACvC,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAI,CACtE,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACa,IACI,IAClB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, useState, useRef } from 'react';\n\nimport {\n  Flex,\n  ForwardProps,\n  Button,\n  useOuterEvent,\n  useEscape,\n  Icon,\n  Text,\n  EmptyState,\n  useI18n,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as aiAssistIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/ai-assist.icon';\n\nimport { ConversationAIProps } from './TaskManager.types';\nimport {\n  StyledCountBadge,\n  StyledEntityPopover,\n  StyledContent,\n  StyledHeader\n} from './TaskManager.styles';\n\nregisterIcon(aiAssistIcon);\n\nconst ConversationAI: FunctionComponent<ConversationAIProps & ForwardProps> = forwardRef(\n  (\n    { content, entityCount }: PropsWithoutRef<ConversationAIProps>,\n    ref: ConversationAIProps['ref']\n  ) => {\n    const t = useI18n();\n    const [showPopover, setShowPopover] = useState(false);\n    const buttonRef = useRef(null);\n    const popoverRef = useRef(null);\n    useOuterEvent('mousedown', [popoverRef, buttonRef], () => {\n      if (showPopover) setShowPopover(false);\n    });\n\n    useEscape(() => {\n      setShowPopover(false);\n    });\n\n    return (\n      <div ref={ref}>\n        <Button\n          variant='simple'\n          icon\n          onClick={() => {\n            setShowPopover(cur => !cur);\n          }}\n          ref={buttonRef}\n          aria-label={t('show_detected_entities')}\n        >\n          <Icon name='ai-assist' />\n          <StyledCountBadge variant='default'>{entityCount}</StyledCountBadge>\n        </Button>\n\n        <StyledEntityPopover\n          show={showPopover}\n          target={buttonRef.current}\n          placement='bottom-start'\n          ref={popoverRef}\n          arrow\n        >\n          <Flex\n            container={{\n              justify: 'between',\n              alignItems: 'center'\n            }}\n            as={StyledHeader}\n          >\n            <Text variant='h3'>{t('ai_detected_entities')}</Text>\n            <Button\n              variant='simple'\n              onClick={() => {\n                setShowPopover(false);\n              }}\n              icon\n              aria-label={t('close_conversation')}\n            >\n              <Icon name='times' />\n            </Button>\n          </Flex>\n          <StyledContent>\n            {entityCount === 0 || content === null ? (\n              <EmptyState message={t('nothing_detected_yet')} item={{ grow: 1 }} />\n            ) : (\n              content\n            )}\n          </StyledContent>\n        </StyledEntityPopover>\n      </div>\n    );\n  }\n);\n\nexport default ConversationAI;\n"]}

package/lib/components/TaskManager/Dialogue.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { DialogueProps } from './TaskManager.types';
+declare const Dialogue: FunctionComponent<DialogueProps & ForwardProps>;
+export default Dialogue;
+//# sourceMappingURL=Dialogue.d.ts.map

package/lib/components/TaskManager/Dialogue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialogue.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/Dialogue.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAQ,YAAY,EAAkB,MAAM,yBAAyB,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAQpD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAqE7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/TaskManager/Dialogue.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useImperativeHandle, useRef } from 'react';
+import { Flex, useTheme, Icon } from '@pega/cosmos-react-core';
+import { StyledTaskManagerBanner, StyledAgentScriptIcon, StyledIconWrap, StyledSymbol } from './TaskManager.styles';
+const Dialogue = forwardRef(({ icon, verbatimStatus, content, handle, ...restProps }, ref) => {
+    const nudgeSymbolRef = useRef(null);
+    const { base: { animation: { timing } } } = useTheme();
+    useImperativeHandle(handle, () => ({
+        nudge: () => {
+            if (!nudgeSymbolRef || !nudgeSymbolRef.current || verbatimStatus !== 'pending') {
+                return;
+            }
+            return nudgeSymbolRef.current.animate?.([{ transform: 'translateX(-0.3rem)' }, { transform: 'translateX(0.3rem)' }], {
+                duration: 50,
+                iterations: 10,
+                playbackRate: 1,
+                direction: 'alternate',
+                easing: timing.ease
+            });
+        }
+    }));
+    const iconWithStatus = useMemo(() => {
+        return (_jsxs(Flex, { as: StyledIconWrap, container: { alignItems: 'center', justify: 'center' }, verbatimStatus: verbatimStatus, children: [_jsx(StyledAgentScriptIcon, { name: icon }), verbatimStatus && (_jsx(Flex, { as: StyledSymbol, container: { alignItems: 'center', justify: 'center', pad: 0.25 }, ref: nudgeSymbolRef, verbatimStatus: verbatimStatus, children: verbatimStatus === 'pending' ? _jsx(_Fragment, { children: "!" }) : _jsx(Icon, { name: 'check' }) }))] }));
+    }, [icon, content, verbatimStatus]);
+    return (_jsxs(Flex, { ...restProps, as: StyledTaskManagerBanner, container: {
+            alignItems: 'center'
+        }, "aria-live": 'assertive', ref: ref, children: [_jsx("div", { children: iconWithStatus }), _jsx("div", { children: content })] }));
+});
+export default Dialogue;
+//# sourceMappingURL=Dialogue.js.map

package/lib/components/TaskManager/Dialogue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialogue.js","sourceRoot":"","sources":["../../../src/components/TaskManager/Dialogue.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAEV,OAAO,EACP,mBAAmB,EACnB,MAAM,EACP,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAgB,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG7E,OAAO,EACL,uBAAuB,EACvB,qBAAqB,EACrB,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAC;AAE9B,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,EAAkC,EACvF,GAAyB,EACzB,EAAE;IACF,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEpD,MAAM,EACJ,IAAI,EAAE,EACJ,SAAS,EAAE,EAAE,MAAM,EAAE,EACtB,EACF,GAAG,QAAQ,EAAE,CAAC;IAEf,mBAAmB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QACjC,KAAK,EAAE,GAAG,EAAE;YACV,IAAI,CAAC,cAAc,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,cAAc,KAAK,SAAS,EAAE;gBAC9E,OAAO;aACR;YAED,OAAO,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,CACrC,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,EAAE,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC,EAC3E;gBACE,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,EAAE;gBACd,YAAY,EAAE,CAAC;gBACf,SAAS,EAAE,WAAW;gBACtB,MAAM,EAAE,MAAM,CAAC,IAAI;aACpB,CACF,CAAC;QACJ,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EACtD,cAAc,EAAE,cAAc,aAE9B,KAAC,qBAAqB,IAAC,IAAI,EAAE,IAAI,GAAI,EACpC,cAAc,IAAI,CACjB,KAAC,IAAI,IACH,EAAE,EAAE,YAAY,EAChB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,EACjE,GAAG,EAAE,cAAc,EACnB,cAAc,EAAE,cAAc,YAE7B,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,kCAAM,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACzD,CACR,IACI,CACR,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,uBAAuB,EAC3B,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;SACrB,eACS,WAAW,EACrB,GAAG,EAAE,GAAG,aAER,wBAAM,cAAc,GAAO,EAC3B,wBAAM,OAAO,GAAO,IACf,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  useMemo,\n  useImperativeHandle,\n  useRef\n} from 'react';\n\nimport { Flex, ForwardProps, useTheme, Icon } from '@pega/cosmos-react-core';\n\nimport { DialogueProps } from './TaskManager.types';\nimport {\n  StyledTaskManagerBanner,\n  StyledAgentScriptIcon,\n  StyledIconWrap,\n  StyledSymbol\n} from './TaskManager.styles';\n\nconst Dialogue: FunctionComponent<DialogueProps & ForwardProps> = forwardRef(\n  (\n    { icon, verbatimStatus, content, handle, ...restProps }: PropsWithoutRef<DialogueProps>,\n    ref: DialogueProps['ref']\n  ) => {\n    const nudgeSymbolRef = useRef<HTMLDivElement>(null);\n\n    const {\n      base: {\n        animation: { timing }\n      }\n    } = useTheme();\n\n    useImperativeHandle(handle, () => ({\n      nudge: () => {\n        if (!nudgeSymbolRef || !nudgeSymbolRef.current || verbatimStatus !== 'pending') {\n          return;\n        }\n\n        return nudgeSymbolRef.current.animate?.(\n          [{ transform: 'translateX(-0.3rem)' }, { transform: 'translateX(0.3rem)' }],\n          {\n            duration: 50,\n            iterations: 10,\n            playbackRate: 1,\n            direction: 'alternate',\n            easing: timing.ease\n          }\n        );\n      }\n    }));\n\n    const iconWithStatus = useMemo(() => {\n      return (\n        <Flex\n          as={StyledIconWrap}\n          container={{ alignItems: 'center', justify: 'center' }}\n          verbatimStatus={verbatimStatus}\n        >\n          <StyledAgentScriptIcon name={icon} />\n          {verbatimStatus && (\n            <Flex\n              as={StyledSymbol}\n              container={{ alignItems: 'center', justify: 'center', pad: 0.25 }}\n              ref={nudgeSymbolRef}\n              verbatimStatus={verbatimStatus}\n            >\n              {verbatimStatus === 'pending' ? <>!</> : <Icon name='check' />}\n            </Flex>\n          )}\n        </Flex>\n      );\n    }, [icon, content, verbatimStatus]);\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledTaskManagerBanner}\n        container={{\n          alignItems: 'center'\n        }}\n        aria-live='assertive'\n        ref={ref}\n      >\n        <div>{iconWithStatus}</div>\n        <div>{content}</div>\n      </Flex>\n    );\n  }\n);\n\nexport default Dialogue;\n"]}

package/lib/components/TaskManager/Picker/Picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAgBb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAG5F,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAGH,eAAO,MAAM,cAAc,yGAYzB,CAAC;AAGH,eAAO,MAAM,mBAAmB,yGAS9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,wLAO5B,CAAC;AAGH,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAGH,eAAO,MAAM,YAAY,wGAMvB,CAAC;AAIH,eAAO,MAAM,YAAY,yGAExB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAiEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAiQzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAiBb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAG5F,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAGH,eAAO,MAAM,cAAc,yGAazB,CAAC;AAGH,eAAO,MAAM,mBAAmB,yGAS9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,wLAO5B,CAAC;AAGH,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAGH,eAAO,MAAM,YAAY,wGAMvB,CAAC;AAIH,eAAO,MAAM,YAAY,yGAExB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAiEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAiQzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/TaskManager/Picker/Picker.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Count, defaultThemeProp, Flex, Icon, Menu, menuHelpers, EmptyState, SearchInput, SummaryItem, Text, useI18n, Switch, useArrows, useConsolidatedRef, useElement, registerIcon, getFocusables, StyledMenuListWrapper } from '@pega/cosmos-react-core';
+import { Button, Count, defaultThemeProp, Flex, Icon, Menu, menuHelpers, EmptyState, SearchInput, SummaryItem, Text, useI18n, Switch, useArrows, useConsolidatedRef, useElement, registerIcon, getFocusables, StyledMenuListWrapper, StyledMenuListContainer } from '@pega/cosmos-react-core';
 import { DragDropList, DragDropManager } from '@pega/cosmos-react-dnd';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import * as dragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';
@@ -22,7 +22,8 @@ export const StyledAddTasks = styled.div(({ theme }) => {
       padding-top: 0;
       border-bottom: none;
     }
-    ${StyledMenuListWrapper} {
+    ${StyledMenuListWrapper},
+    ${StyledMenuListContainer} {
       max-height: 23rem;
     }
   `;
@@ -184,7 +185,7 @@ const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, on
         selector: 'button',
         dir: 'up-down'
     }, [selections.length]);
-    return (_jsxs(Flex, { as: StyledPicker, container: { direction: 'column' }, ref: pickerRef, id: id, children: [_jsxs(Flex, { as: StyledPickerHeader, container: { justify: 'between', alignItems: 'center', pad: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('add_tasks') }), _jsx(Button, { variant: 'simple', onClick: onCancel, "aria-label": t('task_picker_close'), icon: true, children: _jsx(Icon, { name: 'times' }) })] }), _jsxs(Flex, { container: true, children: [_jsx(Flex, { as: StyledAddTasks, children: _jsx(Menu, { items: renderItems, onItemClick: (uid) => {
+    return (_jsxs(Flex, { as: StyledPicker, container: { direction: 'column' }, ref: pickerRef, id: id, children: [_jsxs(Flex, { as: StyledPickerHeader, container: { justify: 'between', alignItems: 'center', pad: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('add_tasks') }), _jsx(Button, { variant: 'simple', onClick: onCancel, "aria-label": t('task_picker_close'), icon: true, children: _jsx(Icon, { name: 'times' }) })] }), _jsxs(Flex, { container: true, children: [_jsx(StyledAddTasks, { children: _jsx(Menu, { items: renderItems, onItemClick: (uid) => {
                                 const clickedItem = menuHelpers.getItem(renderItems, uid);
                                 const parentItem = clickedItem?.ancestors
                                     ? clickedItem.ancestors[0]

package/lib/components/TaskManager/Picker/Picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,KAAK,EACL,gBAAgB,EAChB,IAAI,EAEJ,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,IAAI,EACJ,OAAO,EACP,MAAM,EACN,SAAS,EACT,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,aAAa,EACb,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAqB,MAAM,wBAAwB,CAAC;AAC1F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAI1F,YAAY,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAC7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;qCACyB,KAAK,CAAC,IAAI,CAAC,OAAO;sCACjB,KAAK,CAAC,IAAI,CAAC,OAAO;GACrD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;;iBAEK,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;MAKnD,qBAAqB;;;GAGxB,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;iBAEK,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO;2CACd,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;qBAEvD,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE1D,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO;;uCAEM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;GAErE,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;kCACsB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;eACpD,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;sCAC0B,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGrD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;CAErC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKzC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9C,OAAO,GAAG,CAAA;sCAC0B,KAAK,CAAC,IAAI,CAAC,OAAO;GACrD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,oBAAoB,GAAG,CAAC,EAC5B,OAAO,EACP,UAAU,EACV,IAAI,EACiC,EAAE,EAAE;IACzC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,uBACE,KAAC,iBAAiB,IAChB,GAAG,EAAE,UAAU,EACf,MAAM,EACJ,KAAC,gBAAgB,IAAC,GAAG,EAAE,OAAO,YAC5B,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACH,EAErB,OAAO,EAAE,IAAI,EAAE,OAAO,EACtB,SAAS,EAAE,IAAI,EAAE,SAAS,EAC1B,OAAO,EACL,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,KAAK,EAAE,CAAC,CAAC,0BAA0B,CAAC,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,YAEjD,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,GAEX,GACC,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,EAC7B,aAAa,EACb,QAAQ,EACR,YAAY,EACe,EAAE,EAAE;IAC/B,OAAO,CACL,KAAC,eAAe,cACd,KAAC,YAAY,IACX,EAAE,EAAE,YAAY,EAChB,MAAM,EAAC,QAAQ,EACf,KAAK,EAAE,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBAChC,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,IAAI;aACX,CAAC,CAAC,EACH,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,GAClB,GACc,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAkD,UAAU,CACtE,CACE,EACE,EAAE,EACF,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACiB,EAC/B,GAAuB,EACvB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAuB,KAAK,CAAC,CAAC;IAEvE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,MAAM,WAAW,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,uBAAuB,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1F,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAC;IACtE,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,MAAM,uBAAuB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC7D,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAClB,IAAI,GAAG,KAAK,QAAQ,EAAE;YACpB,QAAQ,EAAE,EAAE,CAAC;SACd;aAAM,IAAI,GAAG,KAAK,KAAK,IAAI,QAAQ,EAAE;YACpC,MAAM,gBAAgB,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;YAElD,IAAI,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO;YAE7D,MAAM,qBAAqB,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;YAClD,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAE3E,IAAI,CAAC,CAAC,QAAQ,EAAE;gBACd,IAAI,QAAQ,CAAC,aAAa,KAAK,qBAAqB,EAAE;oBACpD,oBAAoB,CAAC,KAAK,EAAE,CAAC;oBAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;iBACpB;aACF;iBAAM,IAAI,QAAQ,CAAC,aAAa,KAAK,oBAAoB,EAAE;gBAC1D,qBAAqB,CAAC,KAAK,EAAE,CAAC;gBAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;SACF;QAED,iHAAiH;QACjH,MAAM,OAAO,GAAG,uBAAuB,CAAC,OAAO,CAAC;QAChD,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;QACjE,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAEnC,IAAI,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;YAAE,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;aACpE,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC;YAAE,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;IACnE,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,oBAAoB,CAAC,CAC3C,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAErC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,WAAW,CAAC,OAAO,CACxB,WAAW;YACT,CAAC,CAAC,WAAW;iBACR,OAAO,CAAC,YAAY,CAAC;iBACrB,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAiB,EAAE,EAAE;gBACxD,OAAO,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;YAC1D,CAAC,CAAC;YACN,CAAC,CAAC,YAAY,EAChB,IAAI,CAAC,EAAE;YACL,IAAI,UAAU,GAAG,KAAK,CAAC;YAEvB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;gBACf,UAAU,GAAG,IAAI,CAAC;aACnB;YAED,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;aACnD,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAEtC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,GAAW,EAAE,EAAE;QAC9C,QAAQ,CAAC,CAAC,GAAyB,EAAE,EAAE,CAAC,WAAW,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;QAC9F,aAAa,CAAC,GAAG,CAAC,EAAE;YAClB,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;YACnD,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,YAAY,EAAE,EAAE,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEH,uGAAuG;QACvG,mGAAmG;QACnG,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,SAAS,GAAG,aAAa,CAAC,uBAAuB,CAAC,CAAC;YACzD,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC;gBAAE,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;;gBAC1C,YAAY,CAAC,OAAQ,CAAC,KAAK,EAAE,CAAC;QACrC,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,SAAS,CACP,uBAAuB,EACvB;QACE,QAAQ,EAAE,QAAQ;QAClB,GAAG,EAAE,SAAS;KACf,EACD,CAAC,UAAU,CAAC,MAAM,CAAC,CACpB,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,aAChF,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAE/D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,WAAW,CAAC,GAAQ,EAC1C,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,QAAQ,gBAAc,CAAC,CAAC,mBAAmB,CAAC,EAAE,IAAI,kBAClF,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACP,MAAC,IAAI,IAAC,SAAS,mBACb,KAAC,IAAI,IAAC,EAAE,EAAE,cAAc,YACtB,KAAC,IAAI,IACH,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE,CAAC,GAAW,EAAE,EAAE;gCAC3B,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;gCAC1D,MAAM,UAAU,GAAG,WAAW,EAAE,SAAS;oCACvC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;oCAC1B,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;gCAEhD,IAAI,WAAW,EAAE;oCACf,IAAI,oBAAoB,EAAE;wCACxB,QAAQ,CAAC,CAAC,GAAyB,EAAE,EAAE,CACrC,WAAW,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,CACrD,CAAC;wCAEF,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE;4CAC5C,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC;yCACvE;6CAAM;4CACL,aAAa,CAAC,GAAG,CAAC,EAAE;gDAClB,IAAI,SAAS,CAAC;gDACd,IAAI,UAAU;oDACZ,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC;wDACxC,CAAC,CAAC,UAAU,CAAC,OAAO;wDACpB,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC;gDACvB,OAAO;oDACL,GAAG,GAAG;oDACN;wDACE,GAAG,WAAW;wDACd,SAAS;wDACT,iBAAiB,EAAE,WAAW;qDACV;iDACvB,CAAC;4CACJ,CAAC,CAAC,CAAC;yCACJ;wCACD,cAAc,CAAC,EAAE,CAAC,CAAC;qCACpB;yCAAM;wCACL,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;qCACtB;iCACF;4BACH,CAAC,EACD,cAAc,EAAE,YAAY,CAAC,OAAO,IAAI,SAAS,EACjD,SAAS,EAAE,SAAS,IAAI,CAAC,CAAC,UAAU,CAAC,EACrC,MAAM,EAAE,WAAW,KACf,SAAS,EACb,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,EACtD,MAAM,EACJ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,WAAW,IACV,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,WAAW,EAClB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,IAAI,CAAC,CAAC,4BAA4B,CAAC,EAC3D,SAAS,SACT,EACF,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,EAAE,EAAE,oBAAoB,EACxB,QAAQ,EAAE,oBAAoB,GAC9B,IACG,EAET,0BAA0B,SAC1B,GACG,EACN,oBAAoB,IAAI,CACvB,MAAC,IAAI,IACH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,GAAG,EAAE,uBAAuB,aAE5B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,gBAAgB,CAAC,GAAQ,EAE9C,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACvB,KAAC,qBAAqB,IACpB,aAAa,EAAE,UAAU,EACzB,QAAQ,EAAE,QAAQ,CAAC,EAAE;oCACnB,aAAa,CACX,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;wCAChC,GAAG,IAAI;wCACP,IAAI;qCACL,CAAC,CAAwB,CAC3B,CAAC;gCACJ,CAAC,EACD,YAAY,EAAE,oBAAoB,GAClC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,mBAAmB,CAAC,GAAI,CAChD,IACI,CACR,IACI,EACN,oBAAoB,IAAI,CACvB,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aAC7D,KAAC,MAAM,IAAC,OAAO,EAAE,QAAQ,gBAAc,CAAC,CAAC,QAAQ,CAAC,uBAEzC,EACT,MAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,CAAC,UAAU,CAAC,MAAM,EAC5B,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,EAAE,CAAC,UAAU,CAAC,CAAC;4BACpB,QAAQ,CAAC,YAAY,CAAC,CAAC;wBACzB,CAAC,gBACW,CAAC,CAAC,+BAA+B,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE;4BACnE,KAAK,EAAE,UAAU,EAAE,MAAM;yBAC1B,CAAC,aAED,CAAC,CAAC,KAAK,CAAC,EACR,CAAC,CAAC,UAAU,EAAE,MAAM,IAAI,KAAC,WAAW,cAAE,UAAU,CAAC,MAAM,GAAe,IAChE,IACJ,CACR,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Count,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  Menu,\n  menuHelpers,\n  EmptyState,\n  SearchInput,\n  SummaryItem,\n  Text,\n  useI18n,\n  Switch,\n  useArrows,\n  useConsolidatedRef,\n  useElement,\n  registerIcon,\n  getFocusables,\n  StyledMenuListWrapper\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport { DragDropList, DragDropManager, ItemRendererProps } from '@pega/cosmos-react-dnd';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as dragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';\nimport * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';\n\nimport { DraggableSelectedListProps, PickerProps, SelectedItemProps } from './Picker.types';\n\nregisterIcon(timesIcon, dragIcon, trashIcon);\nexport const StyledPickerHeader = styled.div(({ theme }) => {\n  return css`\n    padding-inline-start: calc(2 * ${theme.base.spacing});\n    padding-inline-end: calc(1.25 * ${theme.base.spacing});\n  `;\n});\nStyledPickerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledAddTasks = styled.div(({ theme }) => {\n  return css`\n    width: 17.5rem;\n    padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n    header {\n      padding-top: 0;\n      border-bottom: none;\n    }\n    ${StyledMenuListWrapper} {\n      max-height: 23rem;\n    }\n  `;\n});\nStyledAddTasks.defaultProps = defaultThemeProp;\n\nexport const StyledSelectedTasks = styled.div(({ theme }) => {\n  return css`\n    width: 17.5rem;\n    padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n    border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};\n    > h3 {\n      padding: 0 0 ${theme.base.spacing} ${theme.base.spacing};\n    }\n  `;\n});\nStyledSelectedTasks.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryItem = styled(SummaryItem)(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing} 0;\n    &:not(:last-child) {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `;\n});\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledPickerFooter = styled.div(({ theme }) => {\n  return css`\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: ${theme.base.spacing};\n  `;\n});\nStyledPickerFooter.defaultProps = defaultThemeProp;\n\nexport const StyledDDList = styled.ul(({ theme }) => {\n  return css`\n    padding-inline-end: calc(0.25 * ${theme.base.spacing});\n    height: 26rem;\n    overflow-y: auto;\n  `;\n});\n\nStyledDDList.defaultProps = defaultThemeProp;\n\nexport const StyledPicker = styled.div`\n  height: 100%;\n`;\n\nexport const StyledDragHandle = styled.div`\n  cursor: move;\n  > svg {\n    display: block;\n  }\n`;\n\nconst StyledCount = styled(Count)(({ theme }) => {\n  return css`\n    margin-inline-start: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst SelectedItemRenderer = ({\n  dragRef,\n  previewRef,\n  data\n}: ItemRendererProps<SelectedItemProps>) => {\n  const t = useI18n();\n\n  return (\n    <li>\n      <StyledSummaryItem\n        ref={previewRef}\n        visual={\n          <StyledDragHandle ref={dragRef}>\n            <Icon name='drag' />\n          </StyledDragHandle>\n        }\n        primary={data?.primary}\n        secondary={data?.secondary}\n        actions={\n          <Button\n            variant='simple'\n            icon\n            label={t('task_manager_delete_task')}\n            onClick={() => data?.onRemoveSelection?.(data.id)}\n          >\n            <Icon name='trash' />\n          </Button>\n        }\n      />\n    </li>\n  );\n};\n\nconst DraggableSelectedList = ({\n  selectedItems,\n  onChange,\n  itemRenderer\n}: DraggableSelectedListProps) => {\n  return (\n    <DragDropManager>\n      <DragDropList\n        as={StyledDDList}\n        accept='string'\n        items={selectedItems.map(item => ({\n          id: item.id,\n          type: 'string',\n          data: item\n        }))}\n        itemRenderer={itemRenderer}\n        onChange={onChange}\n      />\n    </DragDropManager>\n  );\n};\n\nconst Picker: FunctionComponent<PickerProps & ForwardProps> = forwardRef(\n  (\n    {\n      id,\n      items,\n      emptyText,\n      title,\n      placeholder,\n      onAdd,\n      onCancel,\n      ...restProps\n    }: PropsWithoutRef<PickerProps>,\n    ref: PickerProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const [initialItems, setItems] = useState<PickerProps['items']>(items);\n\n    const [searchInput, setSearchInput] = useState('');\n    const [selectMultipleToggle, setSelectMultipleToggle] = useState(false);\n\n    const filterRegex = new RegExp(searchInput.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&'), 'i');\n    const [selections, setSelections] = useState<SelectedItemProps[]>([]);\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    const selectedTasksWrapperRef = useRef<HTMLDivElement>(null);\n    const [pickerEl, setPickerEl] = useElement<HTMLDivElement>();\n    const pickerRef = useConsolidatedRef(ref, setPickerEl);\n\n    useEffect(() => {\n      setItems(items);\n    }, [items]);\n\n    const onKeydown = useCallback(\n      (e: KeyboardEvent) => {\n        const { key } = e;\n        if (key === 'Escape') {\n          onCancel?.();\n        } else if (key === 'Tab' && pickerEl) {\n          const focusableContent = getFocusables(pickerRef);\n\n          if (!focusableContent || focusableContent.length < 2) return;\n\n          const firstFocusableElement = focusableContent[0];\n          const lastFocusableElement = focusableContent[focusableContent.length - 1];\n\n          if (e.shiftKey) {\n            if (document.activeElement === firstFocusableElement) {\n              lastFocusableElement.focus();\n              e.preventDefault();\n            }\n          } else if (document.activeElement === lastFocusableElement) {\n            firstFocusableElement.focus();\n            e.preventDefault();\n          }\n        }\n\n        // when focus is in the list setting the tabindex of first element as -1 and on focusing out the tabindex to be 0\n        const focusEl = selectedTasksWrapperRef.current;\n        if (!focusEl) return;\n\n        const focusable = Array.from(focusEl.querySelectorAll('button'));\n        if (focusable.length === 0) return;\n\n        if (focusEl.contains(document.activeElement)) focusable[0].tabIndex = -1;\n        else if (focusable[0].tabIndex === -1) focusable[0].tabIndex = 0;\n      },\n      [onCancel, pickerEl, selectMultipleToggle]\n    );\n\n    useEffect(() => {\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, [pickerEl, selectMultipleToggle]);\n\n    const renderItems = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchInput\n          ? menuHelpers\n              .flatten(initialItems)\n              .filter(({ primary, items: childItems }: MenuItemProps) => {\n                return filterRegex.test(primary) && !childItems?.length;\n              })\n          : initialItems,\n        item => {\n          let selectable = false;\n\n          if (!item.items) {\n            selectable = true;\n          }\n\n          return {\n            ...item,\n            selected: selectable ? !!item.selected : undefined\n          };\n        }\n      );\n    }, [searchInput, items, filterRegex]);\n\n    const removeTasks = useCallback((uid: string) => {\n      setItems((cur: PickerProps['items']) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));\n      setSelections(cur => {\n        const itemToRemove = menuHelpers.getItem(cur, uid);\n        return cur.filter(item => item.id !== itemToRemove?.id);\n      });\n\n      // 0 second timeout added because DOM needs to be up to date after list is updated before running query\n      // setting the focus to the first element in the list on deletion and if empty then to search input\n      setTimeout(() => {\n        const focusable = getFocusables(selectedTasksWrapperRef);\n        if (focusable.length > 0) focusable[0].focus();\n        else searchEleRef.current!.focus();\n      }, 0);\n    }, []);\n\n    const toggleSelectedRegion = () => {\n      setSelectMultipleToggle(curr => !curr);\n    };\n\n    useArrows(\n      selectedTasksWrapperRef,\n      {\n        selector: 'button',\n        dir: 'up-down'\n      },\n      [selections.length]\n    );\n\n    return (\n      <Flex as={StyledPicker} container={{ direction: 'column' }} ref={pickerRef} id={id}>\n        <Flex\n          as={StyledPickerHeader}\n          container={{ justify: 'between', alignItems: 'center', pad: 1 }}\n        >\n          <Text variant='h3'>{t('add_tasks')}</Text>\n          <Button variant='simple' onClick={onCancel} aria-label={t('task_picker_close')} icon>\n            <Icon name='times' />\n          </Button>\n        </Flex>\n        <Flex container>\n          <Flex as={StyledAddTasks}>\n            <Menu\n              items={renderItems}\n              onItemClick={(uid: string) => {\n                const clickedItem = menuHelpers.getItem(renderItems, uid);\n                const parentItem = clickedItem?.ancestors\n                  ? clickedItem.ancestors[0]\n                  : menuHelpers.getParentItem(renderItems, uid);\n\n                if (clickedItem) {\n                  if (selectMultipleToggle) {\n                    setItems((cur: PickerProps['items']) =>\n                      menuHelpers.toggleSelected(cur, uid, 'multi-select')\n                    );\n\n                    if (selections.find(item => item.id === uid)) {\n                      setSelections(cur => cur.filter(item => item.id !== clickedItem?.id));\n                    } else {\n                      setSelections(cur => {\n                        let secondary;\n                        if (parentItem)\n                          secondary = menuHelpers.isItem(parentItem)\n                            ? parentItem.primary\n                            : parentItem.label;\n                        return [\n                          ...cur,\n                          {\n                            ...clickedItem,\n                            secondary,\n                            onRemoveSelection: removeTasks\n                          } as SelectedItemProps\n                        ];\n                      });\n                    }\n                    setSearchInput('');\n                  } else {\n                    onAdd([clickedItem]);\n                  }\n                }\n              }}\n              focusControlEl={searchEleRef.current || undefined}\n              emptyText={emptyText || t('no_items')}\n              accent={filterRegex}\n              {...restProps}\n              mode={selectMultipleToggle ? 'multi-select' : 'action'}\n              header={\n                <Flex container={{ direction: 'column', gap: 1 }}>\n                  <SearchInput\n                    ref={searchEleRef}\n                    value={searchInput}\n                    onSearchChange={setSearchInput}\n                    placeholder={placeholder || t('search_placeholder_default')}\n                    autoFocus\n                  />\n                  <Switch\n                    label={t('select_multiple')}\n                    on={selectMultipleToggle}\n                    onChange={toggleSelectedRegion}\n                  />\n                </Flex>\n              }\n              arrowNavigationUnsupported\n            />\n          </Flex>\n          {selectMultipleToggle && (\n            <Flex\n              as={StyledSelectedTasks}\n              container={{ direction: 'column' }}\n              ref={selectedTasksWrapperRef}\n            >\n              <Text variant='h3'>{t('selected_tasks')}</Text>\n\n              {selections.length > 0 ? (\n                <DraggableSelectedList\n                  selectedItems={selections}\n                  onChange={newItems => {\n                    setSelections(\n                      newItems.map(({ type, data }) => ({\n                        ...data,\n                        type\n                      })) as SelectedItemProps[]\n                    );\n                  }}\n                  itemRenderer={SelectedItemRenderer}\n                />\n              ) : (\n                <EmptyState message={t('no_selected_tasks')} />\n              )}\n            </Flex>\n          )}\n        </Flex>\n        {selectMultipleToggle && (\n          <Flex as={StyledPickerFooter} container={{ justify: 'between' }}>\n            <Button onClick={onCancel} aria-label={t('cancel')}>\n              Cancel\n            </Button>\n            <Button\n              variant='primary'\n              disabled={!selections.length}\n              onClick={() => {\n                onAdd?.(selections);\n                setItems(initialItems);\n              }}\n              aria-label={t('task_manager_picker_add_label', [selections?.length], {\n                count: selections?.length\n              })}\n            >\n              {t('add')}\n              {!!selections?.length && <StyledCount>{selections.length}</StyledCount>}\n            </Button>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default Picker;\n"]}
+{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Count,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  Menu,\n  menuHelpers,\n  EmptyState,\n  SearchInput,\n  SummaryItem,\n  Text,\n  useI18n,\n  Switch,\n  useArrows,\n  useConsolidatedRef,\n  useElement,\n  registerIcon,\n  getFocusables,\n  StyledMenuListWrapper,\n  StyledMenuListContainer\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport { DragDropList, DragDropManager, ItemRendererProps } from '@pega/cosmos-react-dnd';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as dragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';\nimport * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';\n\nimport { DraggableSelectedListProps, PickerProps, SelectedItemProps } from './Picker.types';\n\nregisterIcon(timesIcon, dragIcon, trashIcon);\nexport const StyledPickerHeader = styled.div(({ theme }) => {\n  return css`\n    padding-inline-start: calc(2 * ${theme.base.spacing});\n    padding-inline-end: calc(1.25 * ${theme.base.spacing});\n  `;\n});\nStyledPickerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledAddTasks = styled.div(({ theme }) => {\n  return css`\n    width: 17.5rem;\n    padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n    header {\n      padding-top: 0;\n      border-bottom: none;\n    }\n    ${StyledMenuListWrapper},\n    ${StyledMenuListContainer} {\n      max-height: 23rem;\n    }\n  `;\n});\nStyledAddTasks.defaultProps = defaultThemeProp;\n\nexport const StyledSelectedTasks = styled.div(({ theme }) => {\n  return css`\n    width: 17.5rem;\n    padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n    border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};\n    > h3 {\n      padding: 0 0 ${theme.base.spacing} ${theme.base.spacing};\n    }\n  `;\n});\nStyledSelectedTasks.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryItem = styled(SummaryItem)(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing} 0;\n    &:not(:last-child) {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `;\n});\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledPickerFooter = styled.div(({ theme }) => {\n  return css`\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: ${theme.base.spacing};\n  `;\n});\nStyledPickerFooter.defaultProps = defaultThemeProp;\n\nexport const StyledDDList = styled.ul(({ theme }) => {\n  return css`\n    padding-inline-end: calc(0.25 * ${theme.base.spacing});\n    height: 26rem;\n    overflow-y: auto;\n  `;\n});\n\nStyledDDList.defaultProps = defaultThemeProp;\n\nexport const StyledPicker = styled.div`\n  height: 100%;\n`;\n\nexport const StyledDragHandle = styled.div`\n  cursor: move;\n  > svg {\n    display: block;\n  }\n`;\n\nconst StyledCount = styled(Count)(({ theme }) => {\n  return css`\n    margin-inline-start: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst SelectedItemRenderer = ({\n  dragRef,\n  previewRef,\n  data\n}: ItemRendererProps<SelectedItemProps>) => {\n  const t = useI18n();\n\n  return (\n    <li>\n      <StyledSummaryItem\n        ref={previewRef}\n        visual={\n          <StyledDragHandle ref={dragRef}>\n            <Icon name='drag' />\n          </StyledDragHandle>\n        }\n        primary={data?.primary}\n        secondary={data?.secondary}\n        actions={\n          <Button\n            variant='simple'\n            icon\n            label={t('task_manager_delete_task')}\n            onClick={() => data?.onRemoveSelection?.(data.id)}\n          >\n            <Icon name='trash' />\n          </Button>\n        }\n      />\n    </li>\n  );\n};\n\nconst DraggableSelectedList = ({\n  selectedItems,\n  onChange,\n  itemRenderer\n}: DraggableSelectedListProps) => {\n  return (\n    <DragDropManager>\n      <DragDropList\n        as={StyledDDList}\n        accept='string'\n        items={selectedItems.map(item => ({\n          id: item.id,\n          type: 'string',\n          data: item\n        }))}\n        itemRenderer={itemRenderer}\n        onChange={onChange}\n      />\n    </DragDropManager>\n  );\n};\n\nconst Picker: FunctionComponent<PickerProps & ForwardProps> = forwardRef(\n  (\n    {\n      id,\n      items,\n      emptyText,\n      title,\n      placeholder,\n      onAdd,\n      onCancel,\n      ...restProps\n    }: PropsWithoutRef<PickerProps>,\n    ref: PickerProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const [initialItems, setItems] = useState<PickerProps['items']>(items);\n\n    const [searchInput, setSearchInput] = useState('');\n    const [selectMultipleToggle, setSelectMultipleToggle] = useState(false);\n\n    const filterRegex = new RegExp(searchInput.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&'), 'i');\n    const [selections, setSelections] = useState<SelectedItemProps[]>([]);\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    const selectedTasksWrapperRef = useRef<HTMLDivElement>(null);\n    const [pickerEl, setPickerEl] = useElement<HTMLDivElement>();\n    const pickerRef = useConsolidatedRef(ref, setPickerEl);\n\n    useEffect(() => {\n      setItems(items);\n    }, [items]);\n\n    const onKeydown = useCallback(\n      (e: KeyboardEvent) => {\n        const { key } = e;\n        if (key === 'Escape') {\n          onCancel?.();\n        } else if (key === 'Tab' && pickerEl) {\n          const focusableContent = getFocusables(pickerRef);\n\n          if (!focusableContent || focusableContent.length < 2) return;\n\n          const firstFocusableElement = focusableContent[0];\n          const lastFocusableElement = focusableContent[focusableContent.length - 1];\n\n          if (e.shiftKey) {\n            if (document.activeElement === firstFocusableElement) {\n              lastFocusableElement.focus();\n              e.preventDefault();\n            }\n          } else if (document.activeElement === lastFocusableElement) {\n            firstFocusableElement.focus();\n            e.preventDefault();\n          }\n        }\n\n        // when focus is in the list setting the tabindex of first element as -1 and on focusing out the tabindex to be 0\n        const focusEl = selectedTasksWrapperRef.current;\n        if (!focusEl) return;\n\n        const focusable = Array.from(focusEl.querySelectorAll('button'));\n        if (focusable.length === 0) return;\n\n        if (focusEl.contains(document.activeElement)) focusable[0].tabIndex = -1;\n        else if (focusable[0].tabIndex === -1) focusable[0].tabIndex = 0;\n      },\n      [onCancel, pickerEl, selectMultipleToggle]\n    );\n\n    useEffect(() => {\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, [pickerEl, selectMultipleToggle]);\n\n    const renderItems = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchInput\n          ? menuHelpers\n              .flatten(initialItems)\n              .filter(({ primary, items: childItems }: MenuItemProps) => {\n                return filterRegex.test(primary) && !childItems?.length;\n              })\n          : initialItems,\n        item => {\n          let selectable = false;\n\n          if (!item.items) {\n            selectable = true;\n          }\n\n          return {\n            ...item,\n            selected: selectable ? !!item.selected : undefined\n          };\n        }\n      );\n    }, [searchInput, items, filterRegex]);\n\n    const removeTasks = useCallback((uid: string) => {\n      setItems((cur: PickerProps['items']) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));\n      setSelections(cur => {\n        const itemToRemove = menuHelpers.getItem(cur, uid);\n        return cur.filter(item => item.id !== itemToRemove?.id);\n      });\n\n      // 0 second timeout added because DOM needs to be up to date after list is updated before running query\n      // setting the focus to the first element in the list on deletion and if empty then to search input\n      setTimeout(() => {\n        const focusable = getFocusables(selectedTasksWrapperRef);\n        if (focusable.length > 0) focusable[0].focus();\n        else searchEleRef.current!.focus();\n      }, 0);\n    }, []);\n\n    const toggleSelectedRegion = () => {\n      setSelectMultipleToggle(curr => !curr);\n    };\n\n    useArrows(\n      selectedTasksWrapperRef,\n      {\n        selector: 'button',\n        dir: 'up-down'\n      },\n      [selections.length]\n    );\n\n    return (\n      <Flex as={StyledPicker} container={{ direction: 'column' }} ref={pickerRef} id={id}>\n        <Flex\n          as={StyledPickerHeader}\n          container={{ justify: 'between', alignItems: 'center', pad: 1 }}\n        >\n          <Text variant='h3'>{t('add_tasks')}</Text>\n          <Button variant='simple' onClick={onCancel} aria-label={t('task_picker_close')} icon>\n            <Icon name='times' />\n          </Button>\n        </Flex>\n        <Flex container>\n          <StyledAddTasks>\n            <Menu\n              items={renderItems}\n              onItemClick={(uid: string) => {\n                const clickedItem = menuHelpers.getItem(renderItems, uid);\n                const parentItem = clickedItem?.ancestors\n                  ? clickedItem.ancestors[0]\n                  : menuHelpers.getParentItem(renderItems, uid);\n\n                if (clickedItem) {\n                  if (selectMultipleToggle) {\n                    setItems((cur: PickerProps['items']) =>\n                      menuHelpers.toggleSelected(cur, uid, 'multi-select')\n                    );\n\n                    if (selections.find(item => item.id === uid)) {\n                      setSelections(cur => cur.filter(item => item.id !== clickedItem?.id));\n                    } else {\n                      setSelections(cur => {\n                        let secondary;\n                        if (parentItem)\n                          secondary = menuHelpers.isItem(parentItem)\n                            ? parentItem.primary\n                            : parentItem.label;\n                        return [\n                          ...cur,\n                          {\n                            ...clickedItem,\n                            secondary,\n                            onRemoveSelection: removeTasks\n                          } as SelectedItemProps\n                        ];\n                      });\n                    }\n                    setSearchInput('');\n                  } else {\n                    onAdd([clickedItem]);\n                  }\n                }\n              }}\n              focusControlEl={searchEleRef.current || undefined}\n              emptyText={emptyText || t('no_items')}\n              accent={filterRegex}\n              {...restProps}\n              mode={selectMultipleToggle ? 'multi-select' : 'action'}\n              header={\n                <Flex container={{ direction: 'column', gap: 1 }}>\n                  <SearchInput\n                    ref={searchEleRef}\n                    value={searchInput}\n                    onSearchChange={setSearchInput}\n                    placeholder={placeholder || t('search_placeholder_default')}\n                    autoFocus\n                  />\n                  <Switch\n                    label={t('select_multiple')}\n                    on={selectMultipleToggle}\n                    onChange={toggleSelectedRegion}\n                  />\n                </Flex>\n              }\n              arrowNavigationUnsupported\n            />\n          </StyledAddTasks>\n          {selectMultipleToggle && (\n            <Flex\n              as={StyledSelectedTasks}\n              container={{ direction: 'column' }}\n              ref={selectedTasksWrapperRef}\n            >\n              <Text variant='h3'>{t('selected_tasks')}</Text>\n\n              {selections.length > 0 ? (\n                <DraggableSelectedList\n                  selectedItems={selections}\n                  onChange={newItems => {\n                    setSelections(\n                      newItems.map(({ type, data }) => ({\n                        ...data,\n                        type\n                      })) as SelectedItemProps[]\n                    );\n                  }}\n                  itemRenderer={SelectedItemRenderer}\n                />\n              ) : (\n                <EmptyState message={t('no_selected_tasks')} />\n              )}\n            </Flex>\n          )}\n        </Flex>\n        {selectMultipleToggle && (\n          <Flex as={StyledPickerFooter} container={{ justify: 'between' }}>\n            <Button onClick={onCancel} aria-label={t('cancel')}>\n              Cancel\n            </Button>\n            <Button\n              variant='primary'\n              disabled={!selections.length}\n              onClick={() => {\n                onAdd?.(selections);\n                setItems(initialItems);\n              }}\n              aria-label={t('task_manager_picker_add_label', [selections?.length], {\n                count: selections?.length\n              })}\n            >\n              {t('add')}\n              {!!selections?.length && <StyledCount>{selections.length}</StyledCount>}\n            </Button>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default Picker;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4D,MAAM,OAAO,CAAC;AAGpG,OAAO,EAeL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAajC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAOvD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAkMnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TaskManager.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4D,MAAM,OAAO,CAAC;AAGpG,OAAO,EAeL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAYjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AASvD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoMnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/TaskManager/TaskManager.js

@@ -1,18 +1,20 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useEffect, useState } from 'react';
 import { remToPx, stripUnit } from 'polished';
 import { Flex, Icon, registerIcon, Text, Status, useI18n, useConsolidatedRef, useElement, Button, Grid, SummaryItem, EmptyState, useTheme, tryCatch } from '@pega/cosmos-react-core';
 import * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
-import { StyledTaskManager, StyledTaskManagerBanner, StyledTaskSummaryItem, StyledPopover, StyledTaskMain } from './TaskManager.styles';
+import { StyledTaskManager, StyledTaskSummaryItem, StyledPopover, StyledTaskMain } from './TaskManager.styles';
 import TaskManagerContext from './TaskManager.context';
 import TaskManagerTabs from './TaskManagerTabs';
 import TaskView from './TaskView';
 import Picker from './Picker/Picker';
+import Dialogue from './Dialogue';
+import ConversationAI from './ConversationAI';
 registerIcon(plusIcon, flagFinishIcon);
 const TaskManager = forwardRef((props, ref) => {
-    const { tasks = [], emptyText, onTaskLaunch, onTaskDismiss, addTask, wrapUp, main, banner, ...restProps } = props;
+    const { tasks = [], emptyText, onTaskLaunch, onTaskDismiss, addTask, wrapUp, main, banner, handle, conversationAI, ...restProps } = props;
     const t = useI18n();
     const TaskManagerTabsRef = useRef(null);
     const consolidatedRef = useConsolidatedRef(ref);
@@ -33,40 +35,38 @@ const TaskManager = forwardRef((props, ref) => {
             wrapUp,
             tasks,
             onTaskLaunch
-        }, children: _jsxs("div", { children: [banner && (_jsxs(Flex, { as: StyledTaskManagerBanner, container: {
-                        alignItems: 'center'
-                    }, "aria-live": 'polite', children: [_jsx(Icon, { name: banner.icon }), _jsx(Text, { variant: 'h4', children: banner.content })] })), _jsx(StyledTaskManager, { ...restProps, ref: consolidatedRef, hasDrawer: hasActiveTask, children: _jsxs(TaskView, { header: _jsx(Text, { variant: 'h2', children: t('task_manager_tasks') }), actions: _jsxs(Flex, { container: {
-                                itemGap: 1
-                            }, children: [wrapUp && (_jsx(Button, { variant: 'secondary', disabled: wrapUp.disable, onClick: () => wrapUp?.onClick(), children: _jsxs(Flex, { container: {
-                                            itemGap: 1,
-                                            alignItems: 'center'
-                                        }, children: [_jsx(Icon, { name: 'flag-finish' }), _jsx("span", { children: t('task_manager_wrap_up') })] }) })), addTask && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'primary', onClick: () => setShowPicker(cur => !cur), ref: setAddTaskEl, children: _jsxs(Flex, { container: {
-                                                    gap: 1,
-                                                    alignItems: 'center'
-                                                }, children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: t('task_manager_add_task') })] }) }), _jsx(StyledPopover, { show: showPicker, target: addTaskEl, placement: 'bottom-end', modifiers: [
-                                                {
-                                                    name: 'offset',
-                                                    options: {
-                                                        offset: [
-                                                            tryCatch(() => stripUnit(remToPx(theme.base.spacing)), () => 8),
-                                                            tryCatch(() => stripUnit(remToPx(theme.base.spacing)), () => 8)
-                                                        ]
-                                                    }
+        }, children: _jsxs(StyledTaskManager, { ...restProps, ref: consolidatedRef, hasDrawer: hasActiveTask, children: [banner && (_jsx(Dialogue, { icon: banner.icon, content: banner.content, verbatimStatus: banner.verbatimStatus, handle: handle })), _jsxs(TaskView, { header: _jsx(Text, { variant: 'h2', children: t('task_manager_tasks') }), actions: _jsxs(Flex, { container: {
+                            gap: 2
+                        }, children: [conversationAI && (_jsx(ConversationAI, { content: conversationAI.content, entityCount: conversationAI.entityCount })), wrapUp && (_jsx(Button, { variant: 'secondary', disabled: wrapUp.disable, onClick: () => wrapUp?.onClick(), children: _jsxs(Flex, { container: {
+                                        itemGap: 1,
+                                        alignItems: 'center'
+                                    }, children: [_jsx(Icon, { name: 'flag-finish' }), _jsx("span", { children: t('task_manager_wrap_up') })] }) })), addTask && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'primary', onClick: () => setShowPicker(cur => !cur), ref: setAddTaskEl, children: _jsxs(Flex, { container: {
+                                                gap: 1,
+                                                alignItems: 'center'
+                                            }, children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: t('task_manager_add_task') })] }) }), _jsx(StyledPopover, { show: showPicker, target: addTaskEl, placement: 'bottom-end', modifiers: [
+                                            {
+                                                name: 'offset',
+                                                options: {
+                                                    offset: [
+                                                        tryCatch(() => stripUnit(remToPx(theme.base.spacing)), () => 8),
+                                                        tryCatch(() => stripUnit(remToPx(theme.base.spacing)), () => 8)
+                                                    ]
                                                 }
-                                            ], children: _jsx(Picker, { scrollAt: 10, emptyText: t('task_manager_search_results_empty_text'), items: addTask?.items, onAdd: (selectedItems) => {
-                                                    if (addTask.onAdd) {
-                                                        addTask?.onAdd(selectedItems);
-                                                    }
-                                                    setShowPicker(false);
-                                                }, onCancel: () => {
-                                                    setShowPicker(false);
-                                                }, ref: addTask.ref, placeholder: t('search_tasks') }) })] }))] }), children: [hasActiveTask && _jsx(TaskManagerTabs, { ref: TaskManagerTabsRef }), hasActiveTask && _jsx(StyledTaskMain, { children: main }), !hasActiveTask && (_jsxs(Grid, { as: 'ul', container: true, children: [tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {
-                                        return (_createElement(SummaryItem, { ...restTaskProps, key: id, as: StyledTaskSummaryItem, primary: _jsx(Text, { variant: 'h4', children: name }), secondary: _jsxs(_Fragment, { children: [!status && meta && _jsx(Text, { variant: 'secondary', children: meta }), status && _jsx(Status, { variant: status.variant, children: status.text })] }), visual: _jsx(Icon, { name: icon }), actions: _jsxs(Flex, { container: { gap: 1 }, children: [!isResolved && (_jsx(Button, { variant: 'secondary', "aria-label": t('continue_label_a11y', [name]), onClick: () => {
-                                                            onTaskLaunch?.(id);
-                                                        }, children: t('continue_label') })), isResolved && (_jsx(Button, { variant: 'secondary', "aria-label": t('review_label_a11y', [name]), onClick: () => {
-                                                            onTaskLaunch?.(id);
-                                                        }, children: t('review_label') }))] }) }));
-                                    }), tasks.length === 0 && _jsx(EmptyState, { message: emptyText })] }))] }) })] }) }));
+                                            }
+                                        ], children: _jsx(Picker, { scrollAt: 10, emptyText: t('task_manager_search_results_empty_text'), items: addTask?.items, onAdd: (selectedItems) => {
+                                                if (addTask.onAdd) {
+                                                    addTask?.onAdd(selectedItems);
+                                                }
+                                                setShowPicker(false);
+                                            }, onCancel: () => {
+                                                setShowPicker(false);
+                                            }, ref: addTask.ref, placeholder: t('search_tasks') }) })] }))] }), children: [hasActiveTask && _jsx(TaskManagerTabs, { ref: TaskManagerTabsRef }), hasActiveTask && _jsx(StyledTaskMain, { children: main }), !hasActiveTask && (_jsxs(Grid, { as: 'ul', container: true, children: [tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {
+                                    return (_createElement(SummaryItem, { ...restTaskProps, key: id, as: StyledTaskSummaryItem, primary: _jsx(Text, { variant: 'h4', children: name }), secondary: _jsxs(_Fragment, { children: [!status && meta && _jsx(Text, { variant: 'secondary', children: meta }), status && _jsx(Status, { variant: status.variant, children: status.text })] }), visual: _jsx(Icon, { name: icon }), actions: _jsxs(Flex, { container: { gap: 1 }, children: [!isResolved && (_jsx(Button, { variant: 'secondary', "aria-label": t('continue_label_a11y', [name]), onClick: () => {
+                                                        onTaskLaunch?.(id);
+                                                    }, children: t('continue_label') })), isResolved && (_jsx(Button, { variant: 'secondary', "aria-label": t('review_label_a11y', [name]), onClick: () => {
+                                                        onTaskLaunch?.(id);
+                                                    }, children: t('review_label') }))] }) }));
+                                }), tasks.length === 0 && _jsx(EmptyState, { message: emptyText })] }))] })] }) }));
 });
 export default TaskManager;
 //# sourceMappingURL=TaskManager.js.map