@pega/cosmos-react-cs 4.0.0-dev.2.0 → 4.0.0-dev.3.1

package/lib/components/Article/Article.js

@@ -42,7 +42,7 @@ const Article = (props) => {
     const { meta, title, navigation, content, primaryActions, secondaryActions, footer, skeletonize, ...restProps } = props;
     return (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, as: StyledArticleWrapper, ...restProps, children: [(navigation || primaryActions || secondaryActions) && (_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Flex, { container: true, item: { grow: 1 }, children: navigation }), _jsxs(Flex, { container: { alignItems: 'center' }, children: [primaryActions, secondaryActions && (_jsx(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
                                     items: secondaryActions.map(({ text, ...rest }) => ({ ...rest, primary: text }))
-                                } }))] })] })), title ? (_jsx(Flex, { container: true, as: StyledArticleHeader, children: _jsx(Text, { variant: 'h3', children: title }) })) : (skeletonize && _jsx(LineSkeleton, { width: 'l' })), meta && meta.length > 0 ? (_jsx(Flex, { container: true, item: { shrink: 0 }, children: _jsx(MetaList, { items: meta }) })) : (skeletonize && (_jsxs(Flex, { container: true, children: [_jsx(LineSkeleton, { width: 's' }), _jsx(LineSkeleton, { width: 's' }), _jsx(LineSkeleton, { width: 's' })] }))), skeletonize ? (_jsx(StyledArticleContent, { children: _jsx(ArticleSkeleton, {}) })) : (_jsx(StyledArticleContent, { children: content })), footer] }));
+                                } }))] })] })), title ? (_jsx(Flex, { container: true, as: StyledArticleHeader, children: _jsx(Text, { variant: 'h2', children: title }) })) : (skeletonize && _jsx(LineSkeleton, { width: 'l' })), meta && meta.length > 0 ? (_jsx(Flex, { container: true, item: { shrink: 0 }, children: _jsx(MetaList, { items: meta }) })) : (skeletonize && (_jsxs(Flex, { container: true, children: [_jsx(LineSkeleton, { width: 's' }), _jsx(LineSkeleton, { width: 's' }), _jsx(LineSkeleton, { width: 's' })] }))), skeletonize ? (_jsx(StyledArticleContent, { children: _jsx(ArticleSkeleton, {}) })) : (_jsx(StyledArticleContent, { children: content })), footer] }));
 };
 Article.defaultProps = {
     skeletonize: false

package/lib/components/Article/Article.js.map

@@ -1 +1 @@
-{"version":3,"file":"Article.js","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactElement, ReactNode, FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  MenuItemProps,\n  Flex,\n  LineSkeleton,\n  MenuButton,\n  MetaList,\n  Text,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport ArticleFooter from './ArticleFooter';\nimport ArticleSkeleton from './ArticleSkeleton';\n\nexport interface BaseArticleProps extends BaseProps, NoChildrenProp {\n  /** Navigation elements */\n  navigation?: ReactNode;\n  /** Primary actions which needs to be displayed with an icon */\n  primaryActions?: ReactNode;\n  /** Secondary actions that needs to be pushed under more icon */\n  secondaryActions?: {\n    id: MenuItemProps['id'];\n    text: MenuItemProps['primary'];\n  }[];\n  /** Article title */\n  title: string;\n  /** Array of meta data rendered through MetaList component */\n  meta?: (ReactElement | string)[];\n  /** Article content */\n  content: ReactNode;\n  /** Footer */\n  footer?: ReactElement<typeof ArticleFooter>;\n  /** Prop to check visibility of skeleton */\n  skeletonize: boolean;\n}\n\nexport type ArticleProps =\n  | (BaseArticleProps & { skeletonize?: false })\n  | (Partial<BaseArticleProps> & { skeletonize: true });\n\nconst StyledArticleWrapper = styled.div(props => {\n  const { theme } = props;\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    padding: calc(1.5 * ${theme.base.spacing});\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    max-height: inherit;\n  `;\n});\n\nconst StyledArticleHeader = styled.header`\n  flex-shrink: 0;\n`;\n\nconst StyledArticleContent = styled.div(props => {\n  const {\n    theme,\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n\n  return css`\n    flex-grow: 1;\n    overflow-y: auto;\n    padding: 0 calc(1.5 * ${spacing});\n    margin: 0 calc(-1.5 * ${spacing});\n\n    /* TODO -  We need to think of handling this such way RTE content is not impacted with the styles inside styles/GlobalStyle.tsx */\n    ul,\n    ol {\n      padding-left: calc(3 * ${spacing});\n    }\n    a {\n      color: ${theme.components.link.color};\n    }\n  `;\n});\n\nStyledArticleContent.defaultProps = defaultThemeProp;\nStyledArticleWrapper.defaultProps = defaultThemeProp;\n\nconst Locale = {\n  // FIXME: TR\n  moreActions: 'More actions'\n};\n\nconst Article: FunctionComponent<ArticleProps & ForwardProps> = (props: ArticleProps) => {\n  const {\n    meta,\n    title,\n    navigation,\n    content,\n    primaryActions,\n    secondaryActions,\n    footer,\n    skeletonize,\n    ...restProps\n  } = props;\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }} as={StyledArticleWrapper} {...restProps}>\n      {(navigation || primaryActions || secondaryActions) && (\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Flex container item={{ grow: 1 }}>\n            {navigation}\n          </Flex>\n          <Flex container={{ alignItems: 'center' }}>\n            {primaryActions}\n            {secondaryActions && (\n              <MenuButton\n                variant='simple'\n                text={Locale.moreActions}\n                icon='more'\n                iconOnly\n                menu={{\n                  items: secondaryActions.map(({ text, ...rest }) => ({ ...rest, primary: text }))\n                }}\n              />\n            )}\n          </Flex>\n        </Flex>\n      )}\n      {title ? (\n        <Flex container as={StyledArticleHeader}>\n          <Text variant='h3'>{title}</Text>\n        </Flex>\n      ) : (\n        skeletonize && <LineSkeleton width='l' />\n      )}\n      {meta && meta.length > 0 ? (\n        <Flex container item={{ shrink: 0 }}>\n          <MetaList items={meta} />\n        </Flex>\n      ) : (\n        skeletonize && (\n          <Flex container>\n            <LineSkeleton width='s' />\n            <LineSkeleton width='s' />\n            <LineSkeleton width='s' />\n          </Flex>\n        )\n      )}\n      {skeletonize ? (\n        <StyledArticleContent>\n          <ArticleSkeleton />\n        </StyledArticleContent>\n      ) : (\n        <StyledArticleContent>{content}</StyledArticleContent>\n      )}\n      {footer}\n    </Flex>\n  );\n};\n\nArticle.defaultProps = {\n  skeletonize: false\n};\n\nexport default Article;\n"]}
+{"version":3,"file":"Article.js","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactElement, ReactNode, FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  MenuItemProps,\n  Flex,\n  LineSkeleton,\n  MenuButton,\n  MetaList,\n  Text,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport ArticleFooter from './ArticleFooter';\nimport ArticleSkeleton from './ArticleSkeleton';\n\nexport interface BaseArticleProps extends BaseProps, NoChildrenProp {\n  /** Navigation elements */\n  navigation?: ReactNode;\n  /** Primary actions which needs to be displayed with an icon */\n  primaryActions?: ReactNode;\n  /** Secondary actions that needs to be pushed under more icon */\n  secondaryActions?: {\n    id: MenuItemProps['id'];\n    text: MenuItemProps['primary'];\n  }[];\n  /** Article title */\n  title: string;\n  /** Array of meta data rendered through MetaList component */\n  meta?: (ReactElement | string)[];\n  /** Article content */\n  content: ReactNode;\n  /** Footer */\n  footer?: ReactElement<typeof ArticleFooter>;\n  /** Prop to check visibility of skeleton */\n  skeletonize: boolean;\n}\n\nexport type ArticleProps =\n  | (BaseArticleProps & { skeletonize?: false })\n  | (Partial<BaseArticleProps> & { skeletonize: true });\n\nconst StyledArticleWrapper = styled.div(props => {\n  const { theme } = props;\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    padding: calc(1.5 * ${theme.base.spacing});\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    max-height: inherit;\n  `;\n});\n\nconst StyledArticleHeader = styled.header`\n  flex-shrink: 0;\n`;\n\nconst StyledArticleContent = styled.div(props => {\n  const {\n    theme,\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n\n  return css`\n    flex-grow: 1;\n    overflow-y: auto;\n    padding: 0 calc(1.5 * ${spacing});\n    margin: 0 calc(-1.5 * ${spacing});\n\n    /* TODO -  We need to think of handling this such way RTE content is not impacted with the styles inside styles/GlobalStyle.tsx */\n    ul,\n    ol {\n      padding-left: calc(3 * ${spacing});\n    }\n    a {\n      color: ${theme.components.link.color};\n    }\n  `;\n});\n\nStyledArticleContent.defaultProps = defaultThemeProp;\nStyledArticleWrapper.defaultProps = defaultThemeProp;\n\nconst Locale = {\n  // FIXME: TR\n  moreActions: 'More actions'\n};\n\nconst Article: FunctionComponent<ArticleProps & ForwardProps> = (props: ArticleProps) => {\n  const {\n    meta,\n    title,\n    navigation,\n    content,\n    primaryActions,\n    secondaryActions,\n    footer,\n    skeletonize,\n    ...restProps\n  } = props;\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }} as={StyledArticleWrapper} {...restProps}>\n      {(navigation || primaryActions || secondaryActions) && (\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Flex container item={{ grow: 1 }}>\n            {navigation}\n          </Flex>\n          <Flex container={{ alignItems: 'center' }}>\n            {primaryActions}\n            {secondaryActions && (\n              <MenuButton\n                variant='simple'\n                text={Locale.moreActions}\n                icon='more'\n                iconOnly\n                menu={{\n                  items: secondaryActions.map(({ text, ...rest }) => ({ ...rest, primary: text }))\n                }}\n              />\n            )}\n          </Flex>\n        </Flex>\n      )}\n      {title ? (\n        <Flex container as={StyledArticleHeader}>\n          <Text variant='h2'>{title}</Text>\n        </Flex>\n      ) : (\n        skeletonize && <LineSkeleton width='l' />\n      )}\n      {meta && meta.length > 0 ? (\n        <Flex container item={{ shrink: 0 }}>\n          <MetaList items={meta} />\n        </Flex>\n      ) : (\n        skeletonize && (\n          <Flex container>\n            <LineSkeleton width='s' />\n            <LineSkeleton width='s' />\n            <LineSkeleton width='s' />\n          </Flex>\n        )\n      )}\n      {skeletonize ? (\n        <StyledArticleContent>\n          <ArticleSkeleton />\n        </StyledArticleContent>\n      ) : (\n        <StyledArticleContent>{content}</StyledArticleContent>\n      )}\n      {footer}\n    </Flex>\n  );\n};\n\nArticle.defaultProps = {\n  skeletonize: false\n};\n\nexport default Article;\n"]}

package/lib/components/CallControlPanel/Call.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Call.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAE7E,OAAO,EAGL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAajC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAgB1D,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAwRrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Call.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAE7E,OAAO,EAGL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAajC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAgB1D,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAiSrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/CallControlPanel/Call.js

@@ -53,7 +53,18 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
                                             id: 'conference',
                                             primary: t('call_panel_conference_call_menu_item'),
                                             disabled: !onConferenceAction,
-                                            onClick: () => setDialogType('conference')
+                                            items: [
+                                                {
+                                                    id: 'conferenceCallWithInteraction',
+                                                    primary: t('call_panel_menu_item_call_with_interaction'),
+                                                    onClick: () => setDialogType('conferenceWithInteractions')
+                                                },
+                                                {
+                                                    id: 'conferenceCallOnly',
+                                                    primary: t('call_panel_menu_item_call_only'),
+                                                    onClick: () => setDialogType('conferenceCallOnly')
+                                                }
+                                            ]
                                         },
                                         {
                                             id: 'consult',
@@ -63,13 +74,11 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
                                                 {
                                                     id: 'consultCallWithInteraction',
                                                     primary: t('call_panel_menu_item_call_with_interaction'),
-                                                    disabled: !onTransferAction,
                                                     onClick: () => setDialogType('consultWithInteractions')
                                                 },
                                                 {
                                                     id: 'consultCallOnly',
                                                     primary: t('call_panel_menu_item_call_only'),
-                                                    disabled: !onTransferAction,
                                                     onClick: () => setDialogType('consultCallOnly')
                                                 }
                                             ]
@@ -82,13 +91,11 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
                                                 {
                                                     id: 'transferCallWithInteraction',
                                                     primary: t('call_panel_menu_item_call_with_interaction'),
-                                                    disabled: !onTransferAction,
                                                     onClick: () => setDialogType('transferWithInteractions')
                                                 },
                                                 {
                                                     id: 'transferCallOnly',
                                                     primary: t('call_panel_menu_item_call_only'),
-                                                    disabled: !onTransferAction,
                                                     onClick: () => setDialogType('transferCallOnly')
                                                 }
                                             ]
@@ -114,7 +121,8 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
                     moreActionsButtonRef.current?.focus();
                 }, onSubmit: transferData => {
                     switch (dialogType) {
-                        case 'conference':
+                        case 'conferenceCallOnly':
+                        case 'conferenceWithInteractions':
                             onConferenceAction?.(callId, transferData);
                             break;
                         case 'consultCallOnly':

package/lib/components/CallControlPanel/Call.js.map

@@ -1 +1 @@
-{"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EACL,MAAM,EACN,IAAI,EAEJ,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,WAAW,EACX,IAAI,EACJ,OAAO,EACP,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,WAAW,MAAM,iEAAiE,CAAC;AAC/F,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AACjG,OAAO,KAAK,eAAe,MAAM,sEAAsE,CAAC;AACxG,OAAO,KAAK,YAAY,MAAM,mEAAmE,CAAC;AAClG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,KAAK,mBAAmB,MAAM,0EAA0E,CAAC;AAChH,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAC5G,OAAO,KAAK,oBAAoB,MAAM,2EAA2E,CAAC;AAElH,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnG,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,kBAAkB,MAAM,gBAAgB,CAAC;AAEhD,YAAY,CACV,WAAW,EACX,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,CACrB,CAAC;AAEF,MAAM,IAAI,GAAgD,CAAC,EACzD,EAAE,EAAE,MAAM,EACV,SAAS,EACT,WAAW,EACX,SAAS,EACT,YAAY,EACZ,aAAa,EACb,KAAK,EACL,YAAY,EACZ,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,SAAS,EACT,eAAe,EACf,kBAAkB,EACO,EAAE,EAAE;IAC7B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,oBAAoB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,SAAS,YAAY,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3F,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IACxE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,EAOzC,CAAC;IACJ,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,CAAC,CAAC;IAEtF,MAAM,wBAAwB,GAAG,GAAS,EAAE;QAC1C,MAAM,EAAE,eAAe,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,CAAC,CAAC;QAC9E,WAAW,CAAC,eAAe,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,wBAAwB,EAAE,CAAC;QAC3B,MAAM,mBAAmB,GAAG,WAAW,IAAI,WAAW,GAAG,IAAI,CAAC;QAE9D,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,wBAAwB,EAAE,CAAC;QAC7B,CAAC,EAAE,mBAAmB,CAAC,CAAC;QAExB,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,MAAC,mBAAmB,eAClB,KAAC,iBAAiB,IAChB,WAAW,QACX,SAAS,EAAC,OAAO,EACjB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,GAClB,EACD,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAChC,OAAO,CACL,KAAC,WAAW,IACV,SAAS,EACP,KAAK,KAAK,CAAC;wBACT,CAAC,CAAC;4BACE,KAAK,EAAE,6BAA6B;4BACpC,IAAI,EAAE,0BAA0B;yBACjC;wBACH,CAAC,CAAC;4BACE,KAAK,EAAE,oCAAoC;4BAC3C,IAAI,EAAE,+BAA+B;yBACtC,EAEP,gBAAgB,EAAC,UAAU,EAC3B,MAAM,EAAE,KAAK,KAAK,CAAC,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,GAAG,EAC/C,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,SAAS,EAAE,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,IAAI,CAAC,IAAI,GAAQ,EAEpE,OAAO,EACL,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,aAChC,SAAS,IAAI,CACZ,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACvC,KAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,GAAI,GACnD,CACR,EAED,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,WAAW,KAAK,SAAS,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EACnC,KAAK,EAAE,CAAC,CACN,KAAK,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,+BAA+B,CAC5E,YAED,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,GAAI,GAC9C,EAET,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,EACtC,KAAK,EAAE,CAAC,CACN,WAAW,KAAK,SAAS;oCACvB,CAAC,CAAC,kCAAkC;oCACpC,CAAC,CAAC,iCAAiC,CACtC,YAED,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,GAAI,GACjE,EACR,WAAW,CAAC,CAAC,CAAC,CACb,8BACG,WAAW,IAAI,CACd,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,EAClC,KAAK,EAAE,CAAC,CAAC,iCAAiC,CAAC,YAE3C,KAAC,IAAI,IAAC,IAAI,EAAC,mBAAmB,GAAG,GAC1B,CACV,EACA,aAAa,IAAI,CAChB,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,EACpC,KAAK,EAAE,CAAC,CAAC,mCAAmC,CAAC,YAE7C,KAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,GAAG,GACxB,CACV,EACD,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAEhB,QAAQ,EAAE,CAAC,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,MAAM,CAAC,EAClC,KAAK,EAAE,CAAC,CAAC,kCAAkC,CAAC,YAE5C,KAAC,IAAI,IAAC,IAAI,EAAC,oBAAoB,GAAG,IAL9B,SAAS,CAMN,IACR,CACJ,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IACT,GAAG,EAAE,oBAAoB,EACzB,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE;oCACJ,OAAO,EAAE,QAAQ;oCACjB,KAAK,EAAE;wCACL;4CACE,EAAE,EAAE,YAAY;4CAChB,OAAO,EAAE,CAAC,CAAC,sCAAsC,CAAC;4CAClD,QAAQ,EAAE,CAAC,kBAAkB;4CAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC;yCAC3C;wCACD;4CACE,EAAE,EAAE,SAAS;4CACb,OAAO,EAAE,CAAC,CAAC,mCAAmC,CAAC;4CAC/C,QAAQ,EAAE,CAAC,eAAe;4CAC1B,KAAK,EAAE;gDACL;oDACE,EAAE,EAAE,4BAA4B;oDAChC,OAAO,EAAE,CAAC,CAAC,4CAA4C,CAAC;oDACxD,QAAQ,EAAE,CAAC,gBAAgB;oDAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,yBAAyB,CAAC;iDACxD;gDACD;oDACE,EAAE,EAAE,iBAAiB;oDACrB,OAAO,EAAE,CAAC,CAAC,gCAAgC,CAAC;oDAC5C,QAAQ,EAAE,CAAC,gBAAgB;oDAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC;iDAChD;6CACF;yCACF;wCACD;4CACE,EAAE,EAAE,UAAU;4CACd,OAAO,EAAE,CAAC,CAAC,oCAAoC,CAAC;4CAChD,QAAQ,EAAE,CAAC,gBAAgB;4CAC3B,KAAK,EAAE;gDACL;oDACE,EAAE,EAAE,6BAA6B;oDACjC,OAAO,EAAE,CAAC,CAAC,4CAA4C,CAAC;oDACxD,QAAQ,EAAE,CAAC,gBAAgB;oDAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC;iDACzD;gDACD;oDACE,EAAE,EAAE,kBAAkB;oDACtB,OAAO,EAAE,CAAC,CAAC,gCAAgC,CAAC;oDAC5C,QAAQ,EAAE,CAAC,gBAAgB;oDAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC;iDACjD;6CACF;yCACF;wCACD;4CACE,EAAE,EAAE,MAAM;4CACV,OAAO,EAAE,CAAC,CAAC,gCAAgC,CAAC;4CAC5C,QAAQ,EAAE,CAAC,WAAW;4CACtB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC;yCACjC;wCACD;4CACE,EAAE,EAAE,SAAS;4CACb,OAAO,EAAE,CAAC,CAAC,kCAAkC,CAAC;4CAC9C,QAAQ,EAAE,CAAC,SAAS;4CACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,MAAM,CAAC;yCACnC;qCACF;iCACF,GACD,CACH,IACI,CACR,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAEhB,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,EAC/C,KAAK,EAAE,CAAC,CAAC,kCAAkC,CAAC,YAE5C,KAAC,IAAI,IAAC,IAAI,EAAC,oBAAoB,GAAG,IAL9B,SAAS,CAMN,CACV,IAtJE,IAAI,CAAC,EAAE,CAwJZ,CACH,CAAC;YACJ,CAAC,CAAC,EACD,WAAW,KAAK,SAAS,IAAI,CAC5B,KAAC,MAAM,IAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,SAAS,YAEzC,CAAC,CAAC,yBAAyB,EAAE;oBAC3B,KAAC,SAAS,IAAC,SAAS,EAAE,WAAW,GAAI;iBACtC,CAAsB,GAElB,CACV,EACA,UAAU,IAAI,CACb,KAAC,kBAAkB,IACjB,MAAM,EAAE,oBAAoB,CAAC,OAAO,EACpC,IAAI,EAAE,UAAU,EAChB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,GAAG,EAAE;oBACb,aAAa,CAAC,SAAS,CAAC,CAAC;oBACzB,oBAAoB,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBACxC,CAAC,EACD,QAAQ,EAAE,YAAY,CAAC,EAAE;oBACvB,QAAQ,UAAU,EAAE;wBAClB,KAAK,YAAY;4BACf,kBAAkB,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;4BAC3C,MAAM;wBACR,KAAK,iBAAiB,CAAC;wBACvB,KAAK,yBAAyB;4BAC5B,eAAe,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;4BACxC,MAAM;wBACR,KAAK,kBAAkB,CAAC;wBACxB,KAAK,0BAA0B;4BAC7B,gBAAgB,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;4BACzC,MAAM;wBACR,QAAQ;qBACT;oBACD,aAAa,CAAC,SAAS,CAAC,CAAC;oBACzB,oBAAoB,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBACxC,CAAC,GACD,CACH,EACA,QAAQ,IAAI,CACX,KAAC,aAAa,IACZ,MAAM,EAAE,oBAAoB,CAAC,OAAO,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EACjC,iBAAiB,EAAE,CAAC,GAAW,EAAE,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GACnF,CACH,IACmB,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FunctionComponent, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n  Button,\n  Flex,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  Status,\n  SummaryItem,\n  Text,\n  useI18n,\n  MenuButton\n} from '@pega/cosmos-react-core';\nimport * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';\nimport * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';\nimport * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';\nimport * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';\nimport * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';\nimport * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';\nimport * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';\nimport * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';\n\nimport { DialPadDialog } from '../DialPad';\n\nimport { StyledHoldInfo, StyledCallContainer, StyledSLAProgress } from './CallControlPanel.styles';\nimport type { CallProps } from './CallControlPanel.types';\nimport StopWatch from './StopWatch';\nimport { calculateSla } from './utils';\nimport CallHandoverDialog from './CallHandover';\n\nregisterIcon(\n  arrowUpIcon,\n  micSolidIcon,\n  micOffSolidIcon,\n  playSoldIcon,\n  pauseSolidIcon,\n  phoneSplitSolidIcon,\n  phoneOutSolidIcon,\n  phoneHangupSolidIcon\n);\n\nconst Call: FunctionComponent<CallProps & ForwardProps> = ({\n  id: callId,\n  startedAt,\n  onHoldSince,\n  slaConfig,\n  participants,\n  onPauseToggle,\n  muted,\n  onMuteToggle,\n  onDTMFPress,\n  onConsultAction,\n  onConferenceAction,\n  onTransferAction,\n  onMergeCall,\n  onHandOffCall,\n  onEndCall,\n  transferOptions,\n  interactionOptions\n}: CallProps & ForwardProps) => {\n  const t = useI18n();\n  const moreActionsButtonRef = useRef<HTMLButtonElement>(null);\n  const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;\n  const [slaLevel, setSlaLevel] = useState<number | undefined>(undefined);\n  const [dialogType, setDialogType] = useState<\n    | 'conference'\n    | 'transferWithInteractions'\n    | 'transferCallOnly'\n    | 'consultWithInteractions'\n    | 'consultCallOnly'\n    | undefined\n  >();\n  const [showDTMF, setShowDTMF] = useState(false);\n\n  const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);\n\n  const calculateCurrentSlaLevel = (): void => {\n    const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);\n    setSlaLevel(currentSlaLevel);\n  };\n\n  useLayoutEffect(() => {\n    calculateCurrentSlaLevel();\n    const slaDurationInMillis = slaDuration && slaDuration * 1000;\n\n    const timer = setTimeout(() => {\n      calculateCurrentSlaLevel();\n    }, slaDurationInMillis);\n\n    return () => clearTimeout(timer);\n  }, [inCallSince, slaLevel]);\n\n  return (\n    <StyledCallContainer>\n      <StyledSLAProgress\n        determinate\n        placement='local'\n        slaDuration={slaDuration}\n        slaLevel={slaLevel}\n      />\n      {participants.map((item, index) => {\n        return (\n          <SummaryItem\n            container={\n              index === 0\n                ? {\n                    areas: '\"primary secondary actions\"',\n                    cols: 'auto minmax(0, 2fr) auto'\n                  }\n                : {\n                    areas: '\"visual primary secondary actions\"',\n                    cols: 'auto auto minmax(0, 2fr) auto'\n                  }\n            }\n            overflowStrategy='ellipsis'\n            visual={index !== 0 && <Icon name='arrow-up' />}\n            primary={item.name}\n            secondary={item.info && <Text variant='secondary'>{item.info}</Text>}\n            key={item.id}\n            actions={\n              index === 0 ? (\n                <Flex container={{ wrap: 'nowrap' }}>\n                  {slaConfig && (\n                    <Flex container={{ alignItems: 'center' }}>\n                      <StopWatch startTime={startedAt} timeout={slaTimeout} />\n                    </Flex>\n                  )}\n\n                  <Button\n                    icon\n                    variant='simple'\n                    disabled={onHoldSince !== undefined}\n                    onClick={() => onMuteToggle(callId)}\n                    label={t(\n                      muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'\n                    )}\n                  >\n                    <Icon name={muted ? 'mic-solid' : 'mic-off-solid'} />\n                  </Button>\n\n                  <Button\n                    icon\n                    variant='simple'\n                    disabled={!onPauseToggle}\n                    onClick={() => onPauseToggle?.(callId)}\n                    label={t(\n                      onHoldSince !== undefined\n                        ? 'call_panel_resume_call_menu_item'\n                        : 'call_panel_pause_call_menu_item'\n                    )}\n                  >\n                    <Icon name={onHoldSince !== undefined ? 'play-solid' : 'pause-solid'} />\n                  </Button>\n                  {onHoldSince ? (\n                    <>\n                      {onMergeCall && (\n                        <Button\n                          icon\n                          variant='simple'\n                          onClick={() => onMergeCall(callId)}\n                          label={t('call_panel_merge_call_menu_item')}\n                        >\n                          <Icon name='phone-split-solid' />\n                        </Button>\n                      )}\n                      {onHandOffCall && (\n                        <Button\n                          icon\n                          variant='simple'\n                          onClick={() => onHandOffCall(callId)}\n                          label={t('call_panel_handoff_call_menu_item')}\n                        >\n                          <Icon name='phone-out-solid' />\n                        </Button>\n                      )}\n                      <Button\n                        icon\n                        variant='simple'\n                        key='hang_up'\n                        disabled={!onEndCall}\n                        onClick={() => onEndCall?.(callId)}\n                        label={t('call_panel_hangup_call_menu_item')}\n                      >\n                        <Icon name='phone-hangup-solid' />\n                      </Button>\n                    </>\n                  ) : (\n                    <MenuButton\n                      ref={moreActionsButtonRef}\n                      text={t('actions')}\n                      iconOnly\n                      icon='more'\n                      variant='simple'\n                      menu={{\n                        variant: 'flyout',\n                        items: [\n                          {\n                            id: 'conference',\n                            primary: t('call_panel_conference_call_menu_item'),\n                            disabled: !onConferenceAction,\n                            onClick: () => setDialogType('conference')\n                          },\n                          {\n                            id: 'consult',\n                            primary: t('call_panel_consult_call_menu_item'),\n                            disabled: !onConsultAction,\n                            items: [\n                              {\n                                id: 'consultCallWithInteraction',\n                                primary: t('call_panel_menu_item_call_with_interaction'),\n                                disabled: !onTransferAction,\n                                onClick: () => setDialogType('consultWithInteractions')\n                              },\n                              {\n                                id: 'consultCallOnly',\n                                primary: t('call_panel_menu_item_call_only'),\n                                disabled: !onTransferAction,\n                                onClick: () => setDialogType('consultCallOnly')\n                              }\n                            ]\n                          },\n                          {\n                            id: 'transfer',\n                            primary: t('call_panel_transfer_call_menu_item'),\n                            disabled: !onTransferAction,\n                            items: [\n                              {\n                                id: 'transferCallWithInteraction',\n                                primary: t('call_panel_menu_item_call_with_interaction'),\n                                disabled: !onTransferAction,\n                                onClick: () => setDialogType('transferWithInteractions')\n                              },\n                              {\n                                id: 'transferCallOnly',\n                                primary: t('call_panel_menu_item_call_only'),\n                                disabled: !onTransferAction,\n                                onClick: () => setDialogType('transferCallOnly')\n                              }\n                            ]\n                          },\n                          {\n                            id: 'dtmf',\n                            primary: t('call_panel_send_dtmf_menu_item'),\n                            disabled: !onDTMFPress,\n                            onClick: () => setShowDTMF(true)\n                          },\n                          {\n                            id: 'hang_up',\n                            primary: t('call_panel_hangup_call_menu_item'),\n                            disabled: !onEndCall,\n                            onClick: () => onEndCall?.(callId)\n                          }\n                        ]\n                      }}\n                    />\n                  )}\n                </Flex>\n              ) : (\n                <Button\n                  icon\n                  variant='simple'\n                  key='hang_up'\n                  disabled={!item.onHangUp}\n                  onClick={() => item.onHangUp?.(callId, item.id)}\n                  label={t('call_panel_hangup_call_menu_item')}\n                >\n                  <Icon name='phone-hangup-solid' />\n                </Button>\n              )\n            }\n          />\n        );\n      })}\n      {onHoldSince !== undefined && (\n        <Status as={StyledHoldInfo} variant='pending'>\n          {\n            t('call_panel_call_on_hold', [\n              <StopWatch startTime={onHoldSince} />\n            ]) as unknown as string\n          }\n        </Status>\n      )}\n      {dialogType && (\n        <CallHandoverDialog\n          target={moreActionsButtonRef.current}\n          type={dialogType}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n          onCancel={() => {\n            setDialogType(undefined);\n            moreActionsButtonRef.current?.focus();\n          }}\n          onSubmit={transferData => {\n            switch (dialogType) {\n              case 'conference':\n                onConferenceAction?.(callId, transferData);\n                break;\n              case 'consultCallOnly':\n              case 'consultWithInteractions':\n                onConsultAction?.(callId, transferData);\n                break;\n              case 'transferCallOnly':\n              case 'transferWithInteractions':\n                onTransferAction?.(callId, transferData);\n                break;\n              default:\n            }\n            setDialogType(undefined);\n            moreActionsButtonRef.current?.focus();\n          }}\n        />\n      )}\n      {showDTMF && (\n        <DialPadDialog\n          target={moreActionsButtonRef.current}\n          onClose={() => setShowDTMF(false)}\n          onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n        />\n      )}\n    </StyledCallContainer>\n  );\n};\n\nexport default Call;\n"]}
+{"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n  Button,\n  Flex,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  Status,\n  SummaryItem,\n  Text,\n  useI18n,\n  MenuButton\n} from '@pega/cosmos-react-core';\nimport * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';\nimport * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';\nimport * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';\nimport * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';\nimport * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';\nimport * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';\nimport * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';\nimport * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';\n\nimport { DialPadDialog } from '../DialPad';\n\nimport { StyledHoldInfo, StyledCallContainer, StyledSLAProgress } from './CallControlPanel.styles';\nimport type { CallProps } from './CallControlPanel.types';\nimport StopWatch from './StopWatch';\nimport { calculateSla } from './utils';\nimport CallHandoverDialog from './CallHandover';\n\nregisterIcon(\n  arrowUpIcon,\n  micSolidIcon,\n  micOffSolidIcon,\n  playSoldIcon,\n  pauseSolidIcon,\n  phoneSplitSolidIcon,\n  phoneOutSolidIcon,\n  phoneHangupSolidIcon\n);\n\nconst Call: FunctionComponent<CallProps & ForwardProps> = ({\n  id: callId,\n  startedAt,\n  onHoldSince,\n  slaConfig,\n  participants,\n  onPauseToggle,\n  muted,\n  onMuteToggle,\n  onDTMFPress,\n  onConsultAction,\n  onConferenceAction,\n  onTransferAction,\n  onMergeCall,\n  onHandOffCall,\n  onEndCall,\n  transferOptions,\n  interactionOptions\n}: CallProps & ForwardProps) => {\n  const t = useI18n();\n  const moreActionsButtonRef = useRef<HTMLButtonElement>(null);\n  const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;\n  const [slaLevel, setSlaLevel] = useState<number | undefined>(undefined);\n  const [dialogType, setDialogType] = useState<\n    | 'conferenceWithInteractions'\n    | 'conferenceCallOnly'\n    | 'transferWithInteractions'\n    | 'transferCallOnly'\n    | 'consultWithInteractions'\n    | 'consultCallOnly'\n    | undefined\n  >();\n  const [showDTMF, setShowDTMF] = useState(false);\n\n  const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);\n\n  const calculateCurrentSlaLevel = (): void => {\n    const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);\n    setSlaLevel(currentSlaLevel);\n  };\n\n  useLayoutEffect(() => {\n    calculateCurrentSlaLevel();\n    const slaDurationInMillis = slaDuration && slaDuration * 1000;\n\n    const timer = setTimeout(() => {\n      calculateCurrentSlaLevel();\n    }, slaDurationInMillis);\n\n    return () => clearTimeout(timer);\n  }, [inCallSince, slaLevel]);\n\n  return (\n    <StyledCallContainer>\n      <StyledSLAProgress\n        determinate\n        placement='local'\n        slaDuration={slaDuration}\n        slaLevel={slaLevel}\n      />\n      {participants.map((item, index) => {\n        return (\n          <SummaryItem\n            container={\n              index === 0\n                ? {\n                    areas: '\"primary secondary actions\"',\n                    cols: 'auto minmax(0, 2fr) auto'\n                  }\n                : {\n                    areas: '\"visual primary secondary actions\"',\n                    cols: 'auto auto minmax(0, 2fr) auto'\n                  }\n            }\n            overflowStrategy='ellipsis'\n            visual={index !== 0 && <Icon name='arrow-up' />}\n            primary={item.name}\n            secondary={item.info && <Text variant='secondary'>{item.info}</Text>}\n            key={item.id}\n            actions={\n              index === 0 ? (\n                <Flex container={{ wrap: 'nowrap' }}>\n                  {slaConfig && (\n                    <Flex container={{ alignItems: 'center' }}>\n                      <StopWatch startTime={startedAt} timeout={slaTimeout} />\n                    </Flex>\n                  )}\n\n                  <Button\n                    icon\n                    variant='simple'\n                    disabled={onHoldSince !== undefined}\n                    onClick={() => onMuteToggle(callId)}\n                    label={t(\n                      muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'\n                    )}\n                  >\n                    <Icon name={muted ? 'mic-solid' : 'mic-off-solid'} />\n                  </Button>\n\n                  <Button\n                    icon\n                    variant='simple'\n                    disabled={!onPauseToggle}\n                    onClick={() => onPauseToggle?.(callId)}\n                    label={t(\n                      onHoldSince !== undefined\n                        ? 'call_panel_resume_call_menu_item'\n                        : 'call_panel_pause_call_menu_item'\n                    )}\n                  >\n                    <Icon name={onHoldSince !== undefined ? 'play-solid' : 'pause-solid'} />\n                  </Button>\n                  {onHoldSince ? (\n                    <>\n                      {onMergeCall && (\n                        <Button\n                          icon\n                          variant='simple'\n                          onClick={() => onMergeCall(callId)}\n                          label={t('call_panel_merge_call_menu_item')}\n                        >\n                          <Icon name='phone-split-solid' />\n                        </Button>\n                      )}\n                      {onHandOffCall && (\n                        <Button\n                          icon\n                          variant='simple'\n                          onClick={() => onHandOffCall(callId)}\n                          label={t('call_panel_handoff_call_menu_item')}\n                        >\n                          <Icon name='phone-out-solid' />\n                        </Button>\n                      )}\n                      <Button\n                        icon\n                        variant='simple'\n                        key='hang_up'\n                        disabled={!onEndCall}\n                        onClick={() => onEndCall?.(callId)}\n                        label={t('call_panel_hangup_call_menu_item')}\n                      >\n                        <Icon name='phone-hangup-solid' />\n                      </Button>\n                    </>\n                  ) : (\n                    <MenuButton\n                      ref={moreActionsButtonRef}\n                      text={t('actions')}\n                      iconOnly\n                      icon='more'\n                      variant='simple'\n                      menu={{\n                        variant: 'flyout',\n                        items: [\n                          {\n                            id: 'conference',\n                            primary: t('call_panel_conference_call_menu_item'),\n                            disabled: !onConferenceAction,\n                            items: [\n                              {\n                                id: 'conferenceCallWithInteraction',\n                                primary: t('call_panel_menu_item_call_with_interaction'),\n                                onClick: () => setDialogType('conferenceWithInteractions')\n                              },\n                              {\n                                id: 'conferenceCallOnly',\n                                primary: t('call_panel_menu_item_call_only'),\n                                onClick: () => setDialogType('conferenceCallOnly')\n                              }\n                            ]\n                          },\n                          {\n                            id: 'consult',\n                            primary: t('call_panel_consult_call_menu_item'),\n                            disabled: !onConsultAction,\n                            items: [\n                              {\n                                id: 'consultCallWithInteraction',\n                                primary: t('call_panel_menu_item_call_with_interaction'),\n                                onClick: () => setDialogType('consultWithInteractions')\n                              },\n                              {\n                                id: 'consultCallOnly',\n                                primary: t('call_panel_menu_item_call_only'),\n                                onClick: () => setDialogType('consultCallOnly')\n                              }\n                            ]\n                          },\n                          {\n                            id: 'transfer',\n                            primary: t('call_panel_transfer_call_menu_item'),\n                            disabled: !onTransferAction,\n                            items: [\n                              {\n                                id: 'transferCallWithInteraction',\n                                primary: t('call_panel_menu_item_call_with_interaction'),\n                                onClick: () => setDialogType('transferWithInteractions')\n                              },\n                              {\n                                id: 'transferCallOnly',\n                                primary: t('call_panel_menu_item_call_only'),\n                                onClick: () => setDialogType('transferCallOnly')\n                              }\n                            ]\n                          },\n                          {\n                            id: 'dtmf',\n                            primary: t('call_panel_send_dtmf_menu_item'),\n                            disabled: !onDTMFPress,\n                            onClick: () => setShowDTMF(true)\n                          },\n                          {\n                            id: 'hang_up',\n                            primary: t('call_panel_hangup_call_menu_item'),\n                            disabled: !onEndCall,\n                            onClick: () => onEndCall?.(callId)\n                          }\n                        ]\n                      }}\n                    />\n                  )}\n                </Flex>\n              ) : (\n                <Button\n                  icon\n                  variant='simple'\n                  key='hang_up'\n                  disabled={!item.onHangUp}\n                  onClick={() => item.onHangUp?.(callId, item.id)}\n                  label={t('call_panel_hangup_call_menu_item')}\n                >\n                  <Icon name='phone-hangup-solid' />\n                </Button>\n              )\n            }\n          />\n        );\n      })}\n      {onHoldSince !== undefined && (\n        <Status as={StyledHoldInfo} variant='pending'>\n          {\n            t('call_panel_call_on_hold', [\n              <StopWatch startTime={onHoldSince} />\n            ]) as unknown as string\n          }\n        </Status>\n      )}\n      {dialogType && (\n        <CallHandoverDialog\n          target={moreActionsButtonRef.current}\n          type={dialogType}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n          onCancel={() => {\n            setDialogType(undefined);\n            moreActionsButtonRef.current?.focus();\n          }}\n          onSubmit={transferData => {\n            switch (dialogType) {\n              case 'conferenceCallOnly':\n              case 'conferenceWithInteractions':\n                onConferenceAction?.(callId, transferData);\n                break;\n              case 'consultCallOnly':\n              case 'consultWithInteractions':\n                onConsultAction?.(callId, transferData);\n                break;\n              case 'transferCallOnly':\n              case 'transferWithInteractions':\n                onTransferAction?.(callId, transferData);\n                break;\n              default:\n            }\n            setDialogType(undefined);\n            moreActionsButtonRef.current?.focus();\n          }}\n        />\n      )}\n      {showDTMF && (\n        <DialPadDialog\n          target={moreActionsButtonRef.current}\n          onClose={() => setShowDTMF(false)}\n          onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n        />\n      )}\n    </StyledCallContainer>\n  );\n};\n\nexport default Call;\n"]}

package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
 import type { TransferData, TransferReasonOption } from './CallHandover.types';
-export declare type HandoverType = 'conference' | 'transferWithInteractions' | 'transferCallOnly' | 'consultWithInteractions' | 'consultCallOnly';
+export declare type HandoverType = 'conferenceWithInteractions' | 'conferenceCallOnly' | 'transferWithInteractions' | 'transferCallOnly' | 'consultWithInteractions' | 'consultCallOnly';
 export interface CallHandoverDialogProps {
     target: HTMLElement | null;
     type: HandoverType;

package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallHandoverDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAkBxE,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE/E,oBAAY,YAAY,GACpB,YAAY,GACZ,0BAA0B,GAC1B,kBAAkB,GAClB,yBAAyB,GACzB,iBAAiB,CAAC;AAEtB,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;CACvD;AAED,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,CAwHlE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"CallHandoverDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAkBxE,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE/E,oBAAY,YAAY,GACpB,4BAA4B,GAC5B,oBAAoB,GACpB,0BAA0B,GAC1B,kBAAkB,GAClB,yBAAyB,GACzB,iBAAiB,CAAC;AAEtB,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;CACvD;AAED,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,CAqIlE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.js

@@ -14,25 +14,29 @@ const CallHandoverDialog = ({ target, type, onSubmit, onCancel, transferOptions,
     let dialogContent;
     let dialogHeading;
     switch (type) {
-        case 'conference':
+        case 'conferenceCallOnly':
             dialogHeading = t('call_panel_conference_heading');
             dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_conference_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
             break;
+        case 'conferenceWithInteractions':
+            dialogHeading = t('call_panel_conference_call_and_interactions_heading');
+            dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call+interaction', submitButtonText: t('call_panel_conference_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
+            break;
         case 'consultCallOnly':
-            dialogHeading = t('call_panel_consult_with_call_heading');
-            dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_consult_call_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
+            dialogHeading = t('call_panel_consult_heading');
+            dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_consult_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
             break;
         case 'consultWithInteractions':
-            dialogHeading = t('call_panel_consult_with_call_and_interactions_heading');
-            dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call+interaction', submitButtonText: t('call_panel_consult_call_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
+            dialogHeading = t('call_panel_consult_call_and_interactions_heading');
+            dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call+interaction', submitButtonText: t('call_panel_consult_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
             break;
         case 'transferCallOnly':
-            dialogHeading = t('call_panel_transfer_with_call_heading');
-            dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_call_submit'), onCancel: onCancel, variant: 'call', onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
+            dialogHeading = t('call_panel_transfer_heading');
+            dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_submit'), onCancel: onCancel, variant: 'call', onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
             break;
         case 'transferWithInteractions':
-            dialogHeading = t('call_panel_transfer_with_call_and_interactions_heading');
-            dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_call_submit'), onCancel: onCancel, variant: 'call+interaction', onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
+            dialogHeading = t('call_panel_transfer_call_and_interactions_heading');
+            dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_submit'), onCancel: onCancel, variant: 'call+interaction', onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
             break;
         default:
             dialogHeading = '';

package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallHandoverDialog.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, useEffect, useRef } from 'react';\n\nimport {\n  Text,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Icon,\n  Popover,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  getFocusables\n} from '@pega/cosmos-react-core';\n\nimport CallHandoverForm from './CallHandoverForm';\nimport type { TransferData, TransferReasonOption } from './CallHandover.types';\n\nexport type HandoverType =\n  | 'conference'\n  | 'transferWithInteractions'\n  | 'transferCallOnly'\n  | 'consultWithInteractions'\n  | 'consultCallOnly';\n\nexport interface CallHandoverDialogProps {\n  target: HTMLElement | null;\n  type: HandoverType;\n  onCancel: () => void;\n  onSubmit: (data: TransferData) => void;\n  transferOptions: Readonly<TransferReasonOption[]>;\n  interactionOptions?: Readonly<TransferReasonOption[]>;\n}\n\nconst CallHandoverDialog: FunctionComponent<CallHandoverDialogProps> = ({\n  target,\n  type,\n  onSubmit,\n  onCancel,\n  transferOptions,\n  interactionOptions\n}: CallHandoverDialogProps) => {\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const t = useI18n();\n\n  useOuterEvent('mousedown', [popoverRef], onCancel);\n  useEscape(onCancel, popoverRef);\n  useFocusTrap(popoverRef);\n\n  useEffect(() => {\n    getFocusables(popoverRef)[0]?.focus();\n  }, []);\n\n  let dialogContent: ReactNode;\n  let dialogHeading: string;\n  switch (type) {\n    case 'conference':\n      dialogHeading = t('call_panel_conference_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call'\n          submitButtonText={t('call_panel_conference_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n        />\n      );\n      break;\n    case 'consultCallOnly':\n      dialogHeading = t('call_panel_consult_with_call_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call'\n          submitButtonText={t('call_panel_consult_call_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n        />\n      );\n      break;\n    case 'consultWithInteractions':\n      dialogHeading = t('call_panel_consult_with_call_and_interactions_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call+interaction'\n          submitButtonText={t('call_panel_consult_call_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n        />\n      );\n      break;\n    case 'transferCallOnly':\n      dialogHeading = t('call_panel_transfer_with_call_heading');\n      dialogContent = (\n        <CallHandoverForm\n          submitButtonText={t('call_panel_transfer_call_submit')}\n          onCancel={onCancel}\n          variant='call'\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n        />\n      );\n      break;\n    case 'transferWithInteractions':\n      dialogHeading = t('call_panel_transfer_with_call_and_interactions_heading');\n      dialogContent = (\n        <CallHandoverForm\n          submitButtonText={t('call_panel_transfer_call_submit')}\n          onCancel={onCancel}\n          variant='call+interaction'\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n        />\n      );\n      break;\n    default:\n      dialogHeading = '';\n      dialogContent = null;\n  }\n\n  return (\n    <Popover\n      target={target}\n      ref={popoverRef}\n      placement='top-end'\n      modifiers={[\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['bottom-end', 'left', 'right']\n          }\n        }\n      ]}\n    >\n      <Card>\n        <CardHeader\n          actions={\n            <Button icon variant='simple' aria-label={t('close')} onClick={onCancel}>\n              <Icon name='times' />\n            </Button>\n          }\n        >\n          <Text variant='h3'>{dialogHeading}</Text>\n        </CardHeader>\n        <CardContent>{dialogContent}</CardContent>\n      </Card>\n    </Popover>\n  );\n};\n\nexport default CallHandoverDialog;\n"]}
+{"version":3,"file":"CallHandoverDialog.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, useEffect, useRef } from 'react';\n\nimport {\n  Text,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Icon,\n  Popover,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  getFocusables\n} from '@pega/cosmos-react-core';\n\nimport CallHandoverForm from './CallHandoverForm';\nimport type { TransferData, TransferReasonOption } from './CallHandover.types';\n\nexport type HandoverType =\n  | 'conferenceWithInteractions'\n  | 'conferenceCallOnly'\n  | 'transferWithInteractions'\n  | 'transferCallOnly'\n  | 'consultWithInteractions'\n  | 'consultCallOnly';\n\nexport interface CallHandoverDialogProps {\n  target: HTMLElement | null;\n  type: HandoverType;\n  onCancel: () => void;\n  onSubmit: (data: TransferData) => void;\n  transferOptions: Readonly<TransferReasonOption[]>;\n  interactionOptions?: Readonly<TransferReasonOption[]>;\n}\n\nconst CallHandoverDialog: FunctionComponent<CallHandoverDialogProps> = ({\n  target,\n  type,\n  onSubmit,\n  onCancel,\n  transferOptions,\n  interactionOptions\n}: CallHandoverDialogProps) => {\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const t = useI18n();\n\n  useOuterEvent('mousedown', [popoverRef], onCancel);\n  useEscape(onCancel, popoverRef);\n  useFocusTrap(popoverRef);\n\n  useEffect(() => {\n    getFocusables(popoverRef)[0]?.focus();\n  }, []);\n\n  let dialogContent: ReactNode;\n  let dialogHeading: string;\n  switch (type) {\n    case 'conferenceCallOnly':\n      dialogHeading = t('call_panel_conference_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call'\n          submitButtonText={t('call_panel_conference_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n        />\n      );\n      break;\n    case 'conferenceWithInteractions':\n      dialogHeading = t('call_panel_conference_call_and_interactions_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call+interaction'\n          submitButtonText={t('call_panel_conference_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n        />\n      );\n      break;\n    case 'consultCallOnly':\n      dialogHeading = t('call_panel_consult_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call'\n          submitButtonText={t('call_panel_consult_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n        />\n      );\n      break;\n    case 'consultWithInteractions':\n      dialogHeading = t('call_panel_consult_call_and_interactions_heading');\n      dialogContent = (\n        <CallHandoverForm\n          onCancel={onCancel}\n          variant='call+interaction'\n          submitButtonText={t('call_panel_consult_submit')}\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n        />\n      );\n      break;\n    case 'transferCallOnly':\n      dialogHeading = t('call_panel_transfer_heading');\n      dialogContent = (\n        <CallHandoverForm\n          submitButtonText={t('call_panel_transfer_submit')}\n          onCancel={onCancel}\n          variant='call'\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n        />\n      );\n      break;\n    case 'transferWithInteractions':\n      dialogHeading = t('call_panel_transfer_call_and_interactions_heading');\n      dialogContent = (\n        <CallHandoverForm\n          submitButtonText={t('call_panel_transfer_submit')}\n          onCancel={onCancel}\n          variant='call+interaction'\n          onSubmit={onSubmit}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n        />\n      );\n      break;\n    default:\n      dialogHeading = '';\n      dialogContent = null;\n  }\n\n  return (\n    <Popover\n      target={target}\n      ref={popoverRef}\n      placement='top-end'\n      modifiers={[\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['bottom-end', 'left', 'right']\n          }\n        }\n      ]}\n    >\n      <Card>\n        <CardHeader\n          actions={\n            <Button icon variant='simple' aria-label={t('close')} onClick={onCancel}>\n              <Icon name='times' />\n            </Button>\n          }\n        >\n          <Text variant='h3'>{dialogHeading}</Text>\n        </CardHeader>\n        <CardContent>{dialogContent}</CardContent>\n      </Card>\n    </Popover>\n  );\n};\n\nexport default CallHandoverDialog;\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,EAOL,WAAW,EACX,YAAY,EAUZ,mBAAmB,EAEnB,cAAc,EAEf,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,CAiDzF,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,EAOL,WAAW,EACX,YAAY,EAUZ,mBAAmB,EAEnB,cAAc,EAIf,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,CAuDzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}

package/lib/components/InteractionNotification/InteractionNotification.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldName, CardFooter, StyledFieldValueList, StyledButton, useI18n, useDirection, Icon } from '@pega/cosmos-react-core';
+import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldName, CardFooter, StyledFieldValueList, StyledButton, useI18n, useDirection, Icon, VisuallyHiddenText, useUID } from '@pega/cosmos-react-core';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
@@ -72,7 +72,8 @@ 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: onAccept ? (_jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') })) : undefined, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', children: title })] }) }), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', as: 'span', 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 }) }))] }));
+    const titleId = useUID();
+    return (_jsxs(StyledInteractionNotification, { ref: ref, "aria-labelledby": titleId, children: [_jsx(CardHeader, { actions: onAccept ? (_jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') })) : undefined, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', id: titleId, children: title })] }) }), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', as: 'span', 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 }) })), _jsx(VisuallyHiddenText, { role: 'alert', "aria-live": 'assertive', children: `${title} ${primaryText} ${t('status')} ${status.text}` })] }));
 });
 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  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  FieldValueList,\n  StyledFieldName,\n  CardFooter,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp,\n  Icon\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            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              <Icon name={icon} />\n              <Text variant='h2'>{title}</Text>\n            </Flex>\n          </CardHeader>\n          <CardContent>\n            <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n              <Text variant='h1' as='span'>\n                {primaryText}\n              </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  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  FieldValueList,\n  StyledFieldName,\n  CardFooter,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp,\n  Icon,\n  VisuallyHiddenText,\n  useUID\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      const titleId = useUID();\n\n      return (\n        <StyledInteractionNotification ref={ref} aria-labelledby={titleId}>\n          <CardHeader\n            actions={\n              onAccept ? (\n                <Button variant='primary' onClick={onAccept}>\n                  {t('accept')}\n                </Button>\n              ) : undefined\n            }\n          >\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              <Icon name={icon} />\n              <Text variant='h2' id={titleId}>\n                {title}\n              </Text>\n            </Flex>\n          </CardHeader>\n          <CardContent>\n            <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n              <Text variant='h1' as='span'>\n                {primaryText}\n              </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          <VisuallyHiddenText role='alert' aria-live='assertive'>\n            {`${title} ${primaryText} ${t('status')} ${status.text}`}\n          </VisuallyHiddenText>\n        </StyledInteractionNotification>\n      );\n    }\n  );\n\nexport default InteractionNotification;\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,EAeb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAG5F,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAGH,eAAO,MAAM,cAAc,yGAO1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAU9B,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,EAeb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAG5F,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAGH,eAAO,MAAM,cAAc,yGAO1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAU9B,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;AAkEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAiQzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -75,7 +75,7 @@ const StyledCount = styled(Count)(({ theme }) => {
 StyledCount.defaultProps = defaultThemeProp;
 const SelectedItemRenderer = ({ dragRef, previewRef, data }) => {
     const t = useI18n();
-    return (_jsx("li", { children: _jsx(StyledSummaryItem, { ref: previewRef, visual: _jsx(StyledDragHandle, { ref: dragRef, children: _jsx(Icon, { name: 'drag' }) }), primary: data?.primary, secondary: data?.secondary, actions: _jsx(Button, { variant: 'simple', icon: true, label: t('task_manager_delete_task'), onClick: () => data?.onRemoveSelection?.(data.id), children: _jsx(Icon, { name: 'trash' }) }) }) }));
+    return (_jsx("li", { children: _jsx(StyledSummaryItem, { ref: previewRef, visual: _jsx(StyledDragHandle, { ref: dragRef, children: _jsx(Icon, { name: 'drag' }) }), primary: data.primary, secondary: data.secondary, actions: _jsx(Button, { variant: 'simple', icon: true, "aria-label": t('task_manager_delete_task', [data.primary]), label: t('task_manager_delete_task'), onClick: () => data.onRemoveSelection?.(data.id), children: _jsx(Icon, { name: 'trash' }) }) }) }));
 };
 const DraggableSelectedList = ({ selectedItems, onChange, itemRenderer }) => {
     return (_jsx(DragDropManager, { children: _jsx(DragDropList, { as: StyledDDList, accept: 'string', items: selectedItems.map(item => ({

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,EACd,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,CAAA;;;;;;;CAOvC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;;eAGG,KAAK,CAAC,IAAI,CAAC,OAAO,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO;2CAChB,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,cAAc,cACb,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,GACa,EAChB,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} 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`\n  width: 17.5rem;\n  max-height: 24rem;\n  header {\n    padding-top: 0;\n    border-bottom: none;\n  }\n`;\n\nexport const StyledSelectedTasks = styled.div(({ theme }) => {\n  return css`\n    width: 17.5rem;\n    max-height: 24rem;\n    padding: ${theme.base.spacing} 0 0 ${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"]}
+{"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} 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`\n  width: 17.5rem;\n  max-height: 24rem;\n  header {\n    padding-top: 0;\n    border-bottom: none;\n  }\n`;\n\nexport const StyledSelectedTasks = styled.div(({ theme }) => {\n  return css`\n    width: 17.5rem;\n    max-height: 24rem;\n    padding: ${theme.base.spacing} 0 0 ${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            aria-label={t('task_manager_delete_task', [data.primary])}\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.styles.d.ts

@@ -6,7 +6,6 @@ export declare const StyledHeader: import("styled-components").StyledComponent<i
 export declare const StyledTaskManagerTabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTaskSummaryItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyleTaskName: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTaskStatus: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").StatusProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTaskManagerTab: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, TaskManagerTabProps, never>;
 export declare const StyledTasksTabList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStickyCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").CardHeaderProps, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":";AAqBA,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzE,eAAO,MAAM,cAAc,yGAAe,CAAC;AAC3C,eAAO,MAAM,gCAAgC,yGAAe,CAAC;AAC7D,eAAO,MAAM,YAAY,yOAAuB,CAAC;AAEjD,eAAO,MAAM,qBAAqB,yGAchC,CAAC;AAIH,eAAO,MAAM,qBAAqB,wGAWhC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAMxB,CAAC;AAEH,eAAO,MAAM,gBAAgB,sNAI3B,CAAC;AAKH,eAAO,MAAM,oBAAoB,yHAmE/B,CAAC;AAIH,eAAO,MAAM,kBAAkB,wGAwB7B,CAAC;AAIH,eAAO,MAAM,sBAAsB,2JASjC,CAAC;AACH,eAAO,MAAM,qBAAqB,yOAIhC,CAAC;AAKH,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,6HA+C7B,CAAC;AAIF,eAAO,MAAM,uBAAuB,yGAalC,CAAC;AAIH,eAAO,MAAM,aAAa,6VAIxB,CAAC;AAIH,eAAO,MAAM,qBAAqB,mOAAiB,CAAC;AAEpD,eAAO,MAAM,YAAY;qBACN,aAAa,CAAC,gBAAgB,CAAC;SA4BjD,CAAC;AAIF,eAAO,MAAM,cAAc;qBACR,aAAa,CAAC,gBAAgB,CAAC;SAkCjD,CAAC;AAIF,eAAO,MAAM,gBAAgB;WACpB,MAAM;SAmBd,CAAC;AAIF,eAAO,MAAM,mBAAmB,6VAU/B,CAAC;AAIF,eAAO,MAAM,aAAa,yGAUxB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"TaskManager.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":";AAqBA,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzE,eAAO,MAAM,cAAc,yGAAe,CAAC;AAC3C,eAAO,MAAM,gCAAgC,yGAAe,CAAC;AAC7D,eAAO,MAAM,YAAY,yOAAuB,CAAC;AAEjD,eAAO,MAAM,qBAAqB,yGAchC,CAAC;AAIH,eAAO,MAAM,qBAAqB,wGAWhC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAMxB,CAAC;AAIH,eAAO,MAAM,oBAAoB,yHAmE/B,CAAC;AAIH,eAAO,MAAM,kBAAkB,wGAwB7B,CAAC;AAIH,eAAO,MAAM,sBAAsB,2JASjC,CAAC;AACH,eAAO,MAAM,qBAAqB,yOAIhC,CAAC;AAKH,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,6HA+C7B,CAAC;AAIF,eAAO,MAAM,uBAAuB,yGAkBlC,CAAC;AAIH,eAAO,MAAM,aAAa,6VAIxB,CAAC;AAIH,eAAO,MAAM,qBAAqB,mOAAiB,CAAC;AAEpD,eAAO,MAAM,YAAY;qBACN,aAAa,CAAC,gBAAgB,CAAC;SA4BjD,CAAC;AAIF,eAAO,MAAM,cAAc;qBACR,aAAa,CAAC,gBAAgB,CAAC;SAkCjD,CAAC;AAIF,eAAO,MAAM,gBAAgB;WACpB,MAAM;SAmBd,CAAC;AAIF,eAAO,MAAM,mBAAmB,6VAU/B,CAAC;AAIF,eAAO,MAAM,aAAa,yGAUxB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}

package/lib/components/TaskManager/TaskManager.styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import { mix, readableColor, transparentize } from 'polished';
-import { defaultThemeProp, MenuButton, Popover, tryCatch, Status, StyledCard, StyledEmptyState, StyledFlex, Icon, Count, CardHeader } from '@pega/cosmos-react-core';
+import { defaultThemeProp, MenuButton, Popover, tryCatch, StyledCard, StyledEmptyState, StyledFlex, Icon, Count, CardHeader, readableHue } from '@pega/cosmos-react-core';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
 import { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';
@@ -42,13 +42,7 @@ export const StyleTaskName = styled.span(() => {
     white-space: nowrap;
   `;
 });
-export const StyledTaskStatus = styled(Status)(({ theme }) => {
-    return css `
-    margin-block-start: calc(0.25 * ${theme.base.spacing});
-  `;
-});
 StyleTaskName.defaultProps = defaultThemeProp;
-StyledTaskStatus.defaultProps = defaultThemeProp;
 export const StyledTaskManagerTab = styled.li(({ active = false, theme }) => {
     const hoverColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
     return css `
@@ -202,13 +196,14 @@ export const StyledTaskManager = styled.div(({ theme: { base: { shadow, spacing,
 });
 StyledTaskManager.defaultProps = defaultThemeProp;
 export const StyledTaskManagerBanner = styled.div(({ theme }) => {
+    const color = readableHue(theme.base.colors.orange.dark, theme.base.palette['secondary-background']);
     return css `
     padding: calc(1.5 * ${theme.base.spacing});
     border-radius: ${theme.base['border-radius']} ${theme.base['border-radius']} 0 0;
     background-color: ${theme.base.palette['secondary-background']};
     gap: ${theme.base.spacing};
     min-height: calc(7 * ${theme.base.spacing});
-    color: ${theme.base.palette.warn};
+    color: ${color};
     font-weight: ${theme.base['font-weight'].bold};
     & + ${StyledTaskManager} {
       margin-block-start: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.styles.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix, readableColor, transparentize } from 'polished';\n\nimport {\n  defaultThemeProp,\n  MenuButton,\n  Popover,\n  tryCatch,\n  Status,\n  StyledCard,\n  StyledEmptyState,\n  StyledFlex,\n  Icon,\n  Count,\n  CardHeader\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledVisual } from '@pega/cosmos-react-core/lib/components/SummaryItem/SummaryItem';\n\nimport { TaskManagerTabProps, DialogueProps } from './TaskManager.types';\n\nexport const StyledTaskMain = styled.div``;\nexport const StyledTaskManagerTabsSummaryItem = styled.div``;\nexport const StyledHeader = styled(CardHeader)``;\n\nexport const StyledTaskManagerTabs = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['secondary-background']};\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n\n    ::before {\n      content: '';\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n      height: 0.0625rem;\n      width: 100%;\n      position: absolute;\n      inset-block-end: 0;\n    }\n  `;\n});\n\nStyledTaskManagerTabs.defaultProps = defaultThemeProp;\n\nexport const StyledTaskSummaryItem = styled.li(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n  return css`\n    min-height: 2.5rem;\n    padding: ${spacing};\n    &:not(:last-child) {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `;\n});\n\nStyledTaskSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyleTaskName = styled.span(() => {\n  return css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `;\n});\n\nexport const StyledTaskStatus = styled(Status)(({ theme }) => {\n  return css`\n    margin-block-start: calc(0.25 * ${theme.base.spacing});\n  `;\n});\n\nStyleTaskName.defaultProps = defaultThemeProp;\nStyledTaskStatus.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerTab = styled.li<TaskManagerTabProps>(({ active = false, theme }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  return css`\n    min-width: max-content;\n    white-space: nowrap;\n    border-inline-end: 0.065rem solid ${theme.base.palette['border-line']};\n    text-align: start;\n    outline: none;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    position: relative;\n    min-height: 2.5rem;\n    cursor: pointer;\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline: calc(2 * ${theme.base.spacing});\n    background-color: ${active &&\n    css`\n      ${theme.base.palette['primary-background']};\n    `};\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    > ${StyledTaskManagerTabsSummaryItem} {\n      overflow-x: hidden;\n    }\n\n    > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n      ${active &&\n      css`\n        background: ${theme.base.palette.interactive};\n        color: ${theme.base.colors.white};\n      `}\n    }\n    ${active &&\n    css`\n      ::after {\n        position: absolute;\n        content: '';\n        height: 0.0625rem;\n        width: 100%;\n        background-color: ${theme.base.palette['primary-background']};\n        inset-inline-start: 0;\n        inset-block-end: 0;\n      }\n    `}\n\n    &:hover,\n    &:focus {\n      background-color: ${hoverColor};\n      ::after {\n        background-color: ${hoverColor};\n      }\n      box-shadow: none;\n    }\n    &:focus {\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    > ${StyledFlex} {\n      max-width: 100%;\n    }\n  `;\n});\n\nStyledTaskManagerTab.defaultProps = defaultThemeProp;\n\nexport const StyledTasksTabList = styled.ul(({ theme }) => {\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  return css`\n    position: relative;\n    display: flex;\n    flex-grow: 1;\n    overflow: scroll;\n    -ms-overflow-style: none;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n    scrollbar-width: none;\n    ${StyledTaskManagerTab} {\n      margin-inline-start: 0;\n      &:hover,\n      &:focus {\n        ::before {\n          display: block;\n          background-color: ${lightenedColor};\n        }\n      }\n    }\n  `;\n});\n\nStyledTasksTabList.defaultProps = defaultThemeProp;\n\nexport const StyledStickyCardHeader = styled(StyledCardHeader)(({ theme }) => {\n  const primaryBackgroundColor = theme.base.palette['primary-background'];\n  return css`\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    background: ${primaryBackgroundColor};\n    height: calc(3.5rem - 0.0625rem);\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n  `;\n});\nexport const StyledOverflowTabMenu = styled(MenuButton)(() => {\n  return css`\n    align-self: center;\n  `;\n});\n\nStyledStickyCardHeader.defaultProps = defaultThemeProp;\nStyledOverflowTabMenu.defaultProps = defaultThemeProp;\n\ninterface StyledTaskManagerProps {\n  hasDrawer?: boolean;\n}\n\nexport const StyledTaskManager = styled.div<StyledTaskManagerProps>(\n  ({\n    theme: {\n      base: { shadow, spacing, palette, 'border-radius': borderRadius }\n    },\n    hasDrawer\n  }) => {\n    const primaryBackgroundColor = palette['primary-background'];\n    return css`\n      background: ${primaryBackgroundColor};\n      position: relative;\n      border-radius: ${borderRadius};\n      ${hasDrawer &&\n      css`\n        box-shadow: ${shadow.low};\n      `}\n\n      ${StyledStatus} {\n        line-height: calc(${spacing} * 2);\n        height: calc(${spacing} * 2);\n        font-size: 0.7rem;\n      }\n\n      && > ${StyledCard} > ${StyledCardContent} {\n        padding: 0;\n      }\n      ${StyledTaskMain} {\n        padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n        ${StyledCardHeader} {\n          padding: calc(2 * ${spacing}) 0 ${spacing};\n          margin-block-end: ${spacing};\n          border-block-end: none;\n        }\n      }\n      ${StyledEmptyState} {\n        padding: calc(2 * ${spacing});\n      }\n      ${StyledTaskManagerTabs} {\n        position: relative;\n      }\n      ${StyledTaskManagerTab} {\n        > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n          margin: 0 calc(2 * ${spacing});\n        }\n      }\n    `;\n  }\n);\n\nStyledTaskManager.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerBanner = styled.div(({ theme }) => {\n  return css`\n    padding: calc(1.5 * ${theme.base.spacing});\n    border-radius: ${theme.base['border-radius']} ${theme.base['border-radius']} 0 0;\n    background-color: ${theme.base.palette['secondary-background']};\n    gap: ${theme.base.spacing};\n    min-height: calc(7 * ${theme.base.spacing});\n    color: ${theme.base.palette.warn};\n    font-weight: ${theme.base['font-weight'].bold};\n    & + ${StyledTaskManager} {\n      margin-block-start: 0;\n    }\n  `;\n});\n\nStyledTaskManagerBanner.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled(Popover)(({ theme }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledPopover.defaultProps = defaultThemeProp;\n\nexport const StyledAgentScriptIcon = styled(Icon)``;\n\nexport const StyledSymbol = styled.div<{\n  verbatimStatus?: DialogueProps['verbatimStatus'];\n}>(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette,\n        animation: { speed, timing }\n      }\n    },\n    verbatimStatus\n  }) => {\n    const backgroundColor = verbatimStatus === 'pending' ? palette.urgent : palette.success;\n    return css`\n      color: ${palette['primary-background']};\n      border-radius: 50%;\n      border: 0.0625rem solid ${palette['primary-background']};\n      inset-block-start: calc(-1 * ${spacing});\n      inset-inline-end: calc(-1 * ${spacing});\n      position: absolute;\n      height: 1.25rem;\n      width: 1.25rem;\n      background-color: ${backgroundColor};\n      transition: background-color ${speed} ${timing.ease};\n      user-select: none;\n      -webkit-user-select: none;\n    `;\n  }\n);\n\nStyledSymbol.defaultProps = defaultThemeProp;\n\nexport const StyledIconWrap = styled.div<{\n  verbatimStatus?: DialogueProps['verbatimStatus'];\n}>(\n  ({\n    theme: {\n      base: {\n        colors,\n        animation: { speed, timing }\n      }\n    },\n    verbatimStatus\n  }) => {\n    const backgroundColor =\n      verbatimStatus === 'pending' ? colors.red['extra-light'] : colors.slate.medium;\n    const scriptIconColor = tryCatch(() => readableColor(backgroundColor));\n    return css`\n      height: 2rem;\n      width: 2rem;\n      border-radius: 50%;\n      background-color: ${backgroundColor};\n      transition: background-color ${speed} ${timing.ease};\n\n      ${StyledAgentScriptIcon} {\n        width: 1.5rem;\n        height: 1.5rem;\n        color: ${scriptIconColor};\n        transition: color ${speed} ${timing.ease};\n      }\n\n      ${verbatimStatus &&\n      css`\n        position: relative;\n      `}\n    `;\n  }\n);\n\nStyledIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledCountBadge = styled(Count)<{\n  count: number;\n}>(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      position: absolute;\n      inset-inline-start: calc(2 * ${spacing});\n      inset-block-start: calc(-1 * ${spacing});\n      padding: 0 calc(0.5 * ${spacing});\n\n      @media (pointer: coarse) {\n        inset-inline-start: calc(2.5 * ${spacing});\n        inset-block-start: calc(1 * ${spacing});\n      }\n    `;\n  }\n);\n\nStyledCountBadge.defaultProps = defaultThemeProp;\n\nexport const StyledEntityPopover = styled(Popover)(\n  ({\n    theme: {\n      base: { 'content-width': contentWidth }\n    }\n  }) => {\n    return css`\n      width: ${contentWidth.sm};\n    `;\n  }\n);\n\nStyledEntityPopover.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n  return css`\n    max-height: 18rem;\n    overflow: auto;\n    ${StyledCard} {\n      ${StyledCardContent} {\n        padding: 0 calc(${theme.components.card.padding} * 2) calc(1.5 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n\nexport default StyledTaskManager;\n"]}
+{"version":3,"file":"TaskManager.styles.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix, readableColor, transparentize } from 'polished';\n\nimport {\n  defaultThemeProp,\n  MenuButton,\n  Popover,\n  tryCatch,\n  StyledCard,\n  StyledEmptyState,\n  StyledFlex,\n  Icon,\n  Count,\n  CardHeader,\n  readableHue\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledVisual } from '@pega/cosmos-react-core/lib/components/SummaryItem/SummaryItem';\n\nimport { TaskManagerTabProps, DialogueProps } from './TaskManager.types';\n\nexport const StyledTaskMain = styled.div``;\nexport const StyledTaskManagerTabsSummaryItem = styled.div``;\nexport const StyledHeader = styled(CardHeader)``;\n\nexport const StyledTaskManagerTabs = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['secondary-background']};\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n\n    ::before {\n      content: '';\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n      height: 0.0625rem;\n      width: 100%;\n      position: absolute;\n      inset-block-end: 0;\n    }\n  `;\n});\n\nStyledTaskManagerTabs.defaultProps = defaultThemeProp;\n\nexport const StyledTaskSummaryItem = styled.li(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n  return css`\n    min-height: 2.5rem;\n    padding: ${spacing};\n    &:not(:last-child) {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `;\n});\n\nStyledTaskSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyleTaskName = styled.span(() => {\n  return css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `;\n});\n\nStyleTaskName.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerTab = styled.li<TaskManagerTabProps>(({ active = false, theme }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  return css`\n    min-width: max-content;\n    white-space: nowrap;\n    border-inline-end: 0.065rem solid ${theme.base.palette['border-line']};\n    text-align: start;\n    outline: none;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    position: relative;\n    min-height: 2.5rem;\n    cursor: pointer;\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline: calc(2 * ${theme.base.spacing});\n    background-color: ${active &&\n    css`\n      ${theme.base.palette['primary-background']};\n    `};\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    > ${StyledTaskManagerTabsSummaryItem} {\n      overflow-x: hidden;\n    }\n\n    > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n      ${active &&\n      css`\n        background: ${theme.base.palette.interactive};\n        color: ${theme.base.colors.white};\n      `}\n    }\n    ${active &&\n    css`\n      ::after {\n        position: absolute;\n        content: '';\n        height: 0.0625rem;\n        width: 100%;\n        background-color: ${theme.base.palette['primary-background']};\n        inset-inline-start: 0;\n        inset-block-end: 0;\n      }\n    `}\n\n    &:hover,\n    &:focus {\n      background-color: ${hoverColor};\n      ::after {\n        background-color: ${hoverColor};\n      }\n      box-shadow: none;\n    }\n    &:focus {\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    > ${StyledFlex} {\n      max-width: 100%;\n    }\n  `;\n});\n\nStyledTaskManagerTab.defaultProps = defaultThemeProp;\n\nexport const StyledTasksTabList = styled.ul(({ theme }) => {\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  return css`\n    position: relative;\n    display: flex;\n    flex-grow: 1;\n    overflow: scroll;\n    -ms-overflow-style: none;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n    scrollbar-width: none;\n    ${StyledTaskManagerTab} {\n      margin-inline-start: 0;\n      &:hover,\n      &:focus {\n        ::before {\n          display: block;\n          background-color: ${lightenedColor};\n        }\n      }\n    }\n  `;\n});\n\nStyledTasksTabList.defaultProps = defaultThemeProp;\n\nexport const StyledStickyCardHeader = styled(StyledCardHeader)(({ theme }) => {\n  const primaryBackgroundColor = theme.base.palette['primary-background'];\n  return css`\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    background: ${primaryBackgroundColor};\n    height: calc(3.5rem - 0.0625rem);\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n  `;\n});\nexport const StyledOverflowTabMenu = styled(MenuButton)(() => {\n  return css`\n    align-self: center;\n  `;\n});\n\nStyledStickyCardHeader.defaultProps = defaultThemeProp;\nStyledOverflowTabMenu.defaultProps = defaultThemeProp;\n\ninterface StyledTaskManagerProps {\n  hasDrawer?: boolean;\n}\n\nexport const StyledTaskManager = styled.div<StyledTaskManagerProps>(\n  ({\n    theme: {\n      base: { shadow, spacing, palette, 'border-radius': borderRadius }\n    },\n    hasDrawer\n  }) => {\n    const primaryBackgroundColor = palette['primary-background'];\n    return css`\n      background: ${primaryBackgroundColor};\n      position: relative;\n      border-radius: ${borderRadius};\n      ${hasDrawer &&\n      css`\n        box-shadow: ${shadow.low};\n      `}\n\n      ${StyledStatus} {\n        line-height: calc(${spacing} * 2);\n        height: calc(${spacing} * 2);\n        font-size: 0.7rem;\n      }\n\n      && > ${StyledCard} > ${StyledCardContent} {\n        padding: 0;\n      }\n      ${StyledTaskMain} {\n        padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n        ${StyledCardHeader} {\n          padding: calc(2 * ${spacing}) 0 ${spacing};\n          margin-block-end: ${spacing};\n          border-block-end: none;\n        }\n      }\n      ${StyledEmptyState} {\n        padding: calc(2 * ${spacing});\n      }\n      ${StyledTaskManagerTabs} {\n        position: relative;\n      }\n      ${StyledTaskManagerTab} {\n        > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n          margin: 0 calc(2 * ${spacing});\n        }\n      }\n    `;\n  }\n);\n\nStyledTaskManager.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerBanner = styled.div(({ theme }) => {\n  const color = readableHue(\n    theme.base.colors.orange.dark,\n    theme.base.palette['secondary-background']\n  );\n\n  return css`\n    padding: calc(1.5 * ${theme.base.spacing});\n    border-radius: ${theme.base['border-radius']} ${theme.base['border-radius']} 0 0;\n    background-color: ${theme.base.palette['secondary-background']};\n    gap: ${theme.base.spacing};\n    min-height: calc(7 * ${theme.base.spacing});\n    color: ${color};\n    font-weight: ${theme.base['font-weight'].bold};\n    & + ${StyledTaskManager} {\n      margin-block-start: 0;\n    }\n  `;\n});\n\nStyledTaskManagerBanner.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled(Popover)(({ theme }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledPopover.defaultProps = defaultThemeProp;\n\nexport const StyledAgentScriptIcon = styled(Icon)``;\n\nexport const StyledSymbol = styled.div<{\n  verbatimStatus?: DialogueProps['verbatimStatus'];\n}>(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette,\n        animation: { speed, timing }\n      }\n    },\n    verbatimStatus\n  }) => {\n    const backgroundColor = verbatimStatus === 'pending' ? palette.urgent : palette.success;\n    return css`\n      color: ${palette['primary-background']};\n      border-radius: 50%;\n      border: 0.0625rem solid ${palette['primary-background']};\n      inset-block-start: calc(-1 * ${spacing});\n      inset-inline-end: calc(-1 * ${spacing});\n      position: absolute;\n      height: 1.25rem;\n      width: 1.25rem;\n      background-color: ${backgroundColor};\n      transition: background-color ${speed} ${timing.ease};\n      user-select: none;\n      -webkit-user-select: none;\n    `;\n  }\n);\n\nStyledSymbol.defaultProps = defaultThemeProp;\n\nexport const StyledIconWrap = styled.div<{\n  verbatimStatus?: DialogueProps['verbatimStatus'];\n}>(\n  ({\n    theme: {\n      base: {\n        colors,\n        animation: { speed, timing }\n      }\n    },\n    verbatimStatus\n  }) => {\n    const backgroundColor =\n      verbatimStatus === 'pending' ? colors.red['extra-light'] : colors.slate.medium;\n    const scriptIconColor = tryCatch(() => readableColor(backgroundColor));\n    return css`\n      height: 2rem;\n      width: 2rem;\n      border-radius: 50%;\n      background-color: ${backgroundColor};\n      transition: background-color ${speed} ${timing.ease};\n\n      ${StyledAgentScriptIcon} {\n        width: 1.5rem;\n        height: 1.5rem;\n        color: ${scriptIconColor};\n        transition: color ${speed} ${timing.ease};\n      }\n\n      ${verbatimStatus &&\n      css`\n        position: relative;\n      `}\n    `;\n  }\n);\n\nStyledIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledCountBadge = styled(Count)<{\n  count: number;\n}>(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      position: absolute;\n      inset-inline-start: calc(2 * ${spacing});\n      inset-block-start: calc(-1 * ${spacing});\n      padding: 0 calc(0.5 * ${spacing});\n\n      @media (pointer: coarse) {\n        inset-inline-start: calc(2.5 * ${spacing});\n        inset-block-start: calc(1 * ${spacing});\n      }\n    `;\n  }\n);\n\nStyledCountBadge.defaultProps = defaultThemeProp;\n\nexport const StyledEntityPopover = styled(Popover)(\n  ({\n    theme: {\n      base: { 'content-width': contentWidth }\n    }\n  }) => {\n    return css`\n      width: ${contentWidth.sm};\n    `;\n  }\n);\n\nStyledEntityPopover.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n  return css`\n    max-height: 18rem;\n    overflow: auto;\n    ${StyledCard} {\n      ${StyledCardContent} {\n        padding: 0 calc(${theme.components.card.padding} * 2) calc(1.5 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n\nexport default StyledTaskManager;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManagerTabs.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAYlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAQ,YAAY,EAA4B,MAAM,yBAAyB,CAAC;AAWvF,OAAO,EAAE,oBAAoB,EAAa,MAAM,qBAAqB,CAAC;AAEtE,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAoP3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TaskManagerTabs.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAYlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,YAAY,EAA4B,MAAM,yBAAyB,CAAC;AAW5F,OAAO,EAAE,oBAAoB,EAAa,MAAM,qBAAqB,CAAC;AAEtE,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqP3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/TaskManager/TaskManagerTabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { forwardRef, useContext, createRef, useMemo, useRef, useEffect, useState, useLayoutEffect } from 'react';
-import { Flex } from '@pega/cosmos-react-core';
+import { cap, Flex } from '@pega/cosmos-react-core';
 import { useDirection, useI18n } from '@pega/cosmos-react-core/lib/hooks';
 import { StyledTaskManagerTabs, StyleTaskName, StyledTasksTabList, StyledTaskManagerTab, StyledOverflowTabMenu } from './TaskManager.styles';
 import TaskManagerContext from './TaskManager.context';
@@ -13,7 +13,7 @@ const TaskManagerTabs = forwardRef((props, ref) => {
     const tabRefs = tasks.map(() => createRef());
     const wrapUpRef = useRef(null);
     const tabListRef = useRef(null);
-    const { rtl } = useDirection();
+    const { rtl, end: endDirection, start: startDirection } = useDirection();
     const t = useI18n();
     const tasksMenu = useMemo(() => {
         const openTasks = tasks.filter(task => !task.isResolved);
@@ -106,37 +106,37 @@ const TaskManagerTabs = forwardRef((props, ref) => {
     }, [tasks, wrapUp]);
     const changeTabFocus = (event, index) => {
         let activeIndex = index;
-        if (tasks.length) {
+        if (tabs.length) {
             const { key } = event;
-            if (key === 'ArrowRight' || key === 'ArrowDown') {
+            if (key === `Arrow${cap(endDirection)}`) {
                 event.preventDefault();
                 let nextIndex;
                 if (wrapUpRef?.current === event.currentTarget) {
                     nextIndex = 0;
                 }
                 else {
-                    if (index === tasks.length - 1 && wrapUp?.showTab) {
+                    if (index === tabs.length - 1 && wrapUp?.showTab) {
                         wrapUpRef?.current?.focus();
                         return;
                     }
-                    nextIndex = index + 1 < tasks.length ? index + 1 : 0;
+                    nextIndex = index + 1 < tabs.length ? index + 1 : 0;
                 }
                 activeIndex = nextIndex;
                 const nextTab = tabRefs[nextIndex]?.current;
                 nextTab?.focus();
             }
-            else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+            else if (key === `Arrow${cap(startDirection)}`) {
                 event.preventDefault();
                 let prevIndex;
                 if (wrapUpRef?.current === event.currentTarget) {
-                    prevIndex = tasks.length - 1;
+                    prevIndex = tabs.length - 1;
                 }
                 else {
                     if (index === 0 && wrapUp?.showTab) {
                         wrapUpRef?.current?.focus();
                         return;
                     }
-                    prevIndex = index === 0 ? tasks.length - 1 : index - 1;
+                    prevIndex = index === 0 ? tabs.length - 1 : index - 1;
                 }
                 const prevTab = tabRefs[prevIndex]?.current;
                 activeIndex = prevIndex;
@@ -148,7 +148,7 @@ const TaskManagerTabs = forwardRef((props, ref) => {
                     wrapUp?.onClick();
                     return;
                 }
-                onTaskLaunch?.(tasks[activeIndex].id);
+                onTaskLaunch?.(tabs[activeIndex].id);
             }
         }
     };

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManagerTabs.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  useContext,\n  createRef,\n  RefObject,\n  KeyboardEvent,\n  useMemo,\n  PropsWithoutRef,\n  useRef,\n  useEffect,\n  useState,\n  useLayoutEffect\n} from 'react';\n\nimport { Flex, ForwardProps, MenuItemProps, MenuProps } from '@pega/cosmos-react-core';\nimport { useDirection, useI18n } from '@pega/cosmos-react-core/lib/hooks';\n\nimport {\n  StyledTaskManagerTabs,\n  StyleTaskName,\n  StyledTasksTabList,\n  StyledTaskManagerTab,\n  StyledOverflowTabMenu\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport { TaskManagerTabsProps, TaskProps } from './TaskManager.types';\n\nconst TaskManagerTabs: FunctionComponent<TaskManagerTabsProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskManagerTabsProps>, ref: TaskManagerTabsProps['ref']) => {\n    const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);\n\n    const [tabs, setTabs] = useState<TaskProps[]>(tasks);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    // Used to keep a reference for every tab in order to focus them with key presses\n    const tabRefs: RefObject<HTMLLIElement>[] = tasks.map(() => createRef<HTMLLIElement>());\n    const wrapUpRef = useRef<HTMLLIElement>(null);\n    const tabListRef = useRef<HTMLUListElement>(null);\n\n    const { rtl } = useDirection();\n    const t = useI18n();\n\n    const tasksMenu = useMemo(() => {\n      const openTasks = tasks.filter(task => !task.isResolved);\n      const openTasksMenuItems: MenuItemProps[] = openTasks.map(\n        ({ name, secondary, id, active }) => {\n          return {\n            primary: name,\n            secondary,\n            id,\n            selected: !!active,\n            onClick: idx => {\n              onTaskLaunch?.(idx);\n            }\n          };\n        }\n      );\n      if (wrapUp?.showTab) {\n        openTasksMenuItems.push({\n          primary: t('task_manager_wrap_up'),\n          secondary: [],\n          id: '',\n          selected: !!wrapUp.active,\n          onClick: () => {\n            wrapUp?.onClick();\n          }\n        });\n      }\n\n      const resolvedTasks = tasks.filter(task => task.isResolved);\n      const resolvedTasksMenuItems: MenuItemProps[] = resolvedTasks.map(\n        ({ id, name, secondary, active }) => {\n          return {\n            primary: name,\n            secondary,\n            id,\n            selected: !!active,\n            onClick: () => {\n              onTaskLaunch?.(id);\n            }\n          };\n        }\n      );\n      const taskCategories: MenuProps['items'] = [];\n      if (openTasksMenuItems.length > 0) {\n        taskCategories.push({ id: 'open_tasks', label: t('open_tasks'), items: [] });\n        taskCategories\n          .find(category => category.id === 'open_tasks')\n          ?.items?.push(...openTasksMenuItems);\n      }\n      if (resolvedTasksMenuItems.length > 0) {\n        taskCategories.push({ id: 'resolved_tasks', label: t('resolved_tasks'), items: [] });\n        taskCategories\n          .find(category => category.id === 'resolved_tasks')\n          ?.items?.push(...resolvedTasksMenuItems);\n      }\n      return taskCategories;\n    }, [tasks]);\n\n    const checkAndUpdateIsOverflowing = () => {\n      if (tabListRef.current) {\n        const value = tabListRef.current.scrollWidth > tabListRef.current.clientWidth;\n        if (value !== isOverflowing) {\n          setIsOverflowing(value);\n          return value;\n        }\n      }\n      return isOverflowing;\n    };\n\n    useEffect(() => {\n      setTabs(tasks.filter(task => !task.hideFromTab));\n    }, [tasks]);\n\n    useEffect(() => {\n      const resizeObserver = new ResizeObserver(() => {\n        checkAndUpdateIsOverflowing();\n      });\n      if (tabListRef?.current) resizeObserver.observe(tabListRef?.current as Element);\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [checkAndUpdateIsOverflowing]);\n\n    useLayoutEffect(() => {\n      if (!checkAndUpdateIsOverflowing()) return;\n      const activeTabRef = [...tabRefs, wrapUpRef].find(\n        tab => tab?.current?.getAttribute('aria-selected') === 'true'\n      );\n\n      if (activeTabRef && activeTabRef.current && tabListRef.current) {\n        const activeTabRect = activeTabRef.current.getBoundingClientRect();\n        const tabListWidth = tabListRef.current.clientWidth;\n\n        // Check if it is not in view\n        if (activeTabRect.left <= 0 || activeTabRect.right >= tabListWidth) {\n          tabListRef.current.scrollLeft = rtl\n            ? -(tabListWidth - (activeTabRef.current.offsetLeft + activeTabRect.width))\n            : activeTabRef.current.offsetLeft;\n        }\n      }\n    }, [tasks, wrapUp]);\n\n    const changeTabFocus = (event: KeyboardEvent, index?: number): void => {\n      let activeIndex = index;\n      if (tasks.length) {\n        const { key } = event;\n        if (key === 'ArrowRight' || key === 'ArrowDown') {\n          event.preventDefault();\n          let nextIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            nextIndex = 0;\n          } else {\n            if (index === tasks.length - 1 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            nextIndex = index! + 1 < tasks.length ? index! + 1 : 0;\n          }\n          activeIndex = nextIndex;\n          const nextTab = tabRefs[nextIndex]?.current;\n          nextTab?.focus();\n        } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n          event.preventDefault();\n          let prevIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            prevIndex = tasks.length - 1;\n          } else {\n            if (index === 0 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            prevIndex = index === 0 ? tasks.length - 1 : index! - 1;\n          }\n          const prevTab = tabRefs[prevIndex]?.current;\n          activeIndex = prevIndex;\n          prevTab?.focus();\n        } else if (key === 'Enter' || key === ' ') {\n          event.preventDefault();\n          if (wrapUpRef?.current === event.currentTarget) {\n            wrapUp?.onClick();\n            return;\n          }\n          onTaskLaunch?.(tasks[activeIndex!].id);\n        }\n      }\n    };\n\n    return (\n      <Flex container as={StyledTaskManagerTabs} ref={ref}>\n        {(tasks.length > 0 || wrapUp?.showTab) && (\n          <>\n            <StyledTasksTabList role='tablist' ref={tabListRef}>\n              {tabs.map((task: TaskProps, i) => {\n                const { id, active = false, icon, meta, ...restProps } = task;\n                return (\n                  <StyledTaskManagerTab\n                    {...restProps}\n                    ref={tabRefs[i]}\n                    key={id}\n                    onClick={() => onTaskLaunch?.(id)}\n                    aria-selected={active}\n                    role='tab'\n                    tabIndex={active ? 0 : -1}\n                    onKeyUp={(e: KeyboardEvent) => {\n                      changeTabFocus(e, i);\n                    }}\n                    onKeyDown={(e: KeyboardEvent) => {\n                      const { key } = e;\n                      if (\n                        key === 'ArrowRight' ||\n                        key === 'ArrowDown' ||\n                        key === 'ArrowLeft' ||\n                        key === 'ArrowUp' ||\n                        key === 'Enter' ||\n                        key === ' '\n                      ) {\n                        e.preventDefault();\n                      }\n                    }}\n                    active={active}\n                  >\n                    <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n                      <StyleTaskName>{task.name}</StyleTaskName>\n                    </Flex>\n                  </StyledTaskManagerTab>\n                );\n              })}\n              {wrapUp?.showTab && (\n                <StyledTaskManagerTab\n                  onClick={wrapUp.onClick}\n                  variant='wrap-up'\n                  aria-selected={wrapUp.active}\n                  role='tab'\n                  active={wrapUp.active}\n                  tabIndex={wrapUp.active ? 0 : -1}\n                  onKeyUp={(e: KeyboardEvent) => {\n                    changeTabFocus(e);\n                  }}\n                  onKeyDown={(e: KeyboardEvent) => {\n                    const { key } = e;\n                    if (\n                      key === 'ArrowRight' ||\n                      key === 'ArrowDown' ||\n                      key === 'ArrowLeft' ||\n                      key === 'ArrowUp'\n                    ) {\n                      e.preventDefault();\n                    }\n                  }}\n                  ref={wrapUpRef}\n                >\n                  <span>{t('task_manager_wrap_up')}</span>\n                </StyledTaskManagerTab>\n              )}\n            </StyledTasksTabList>\n            <StyledOverflowTabMenu\n              menu={{\n                items: tasksMenu,\n                mode: 'single-select'\n              }}\n              icon='caret-down'\n              iconOnly\n              variant='simple'\n              text={t('task_manager_overflow_menu')}\n            />\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default TaskManagerTabs;\n"]}
+{"version":3,"file":"TaskManagerTabs.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  useContext,\n  createRef,\n  RefObject,\n  KeyboardEvent,\n  useMemo,\n  PropsWithoutRef,\n  useRef,\n  useEffect,\n  useState,\n  useLayoutEffect\n} from 'react';\n\nimport { cap, Flex, ForwardProps, MenuItemProps, MenuProps } from '@pega/cosmos-react-core';\nimport { useDirection, useI18n } from '@pega/cosmos-react-core/lib/hooks';\n\nimport {\n  StyledTaskManagerTabs,\n  StyleTaskName,\n  StyledTasksTabList,\n  StyledTaskManagerTab,\n  StyledOverflowTabMenu\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport { TaskManagerTabsProps, TaskProps } from './TaskManager.types';\n\nconst TaskManagerTabs: FunctionComponent<TaskManagerTabsProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskManagerTabsProps>, ref: TaskManagerTabsProps['ref']) => {\n    const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);\n\n    const [tabs, setTabs] = useState<TaskProps[]>(tasks);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    // Used to keep a reference for every tab in order to focus them with key presses\n    const tabRefs: RefObject<HTMLLIElement>[] = tasks.map(() => createRef<HTMLLIElement>());\n    const wrapUpRef = useRef<HTMLLIElement>(null);\n    const tabListRef = useRef<HTMLUListElement>(null);\n\n    const { rtl, end: endDirection, start: startDirection } = useDirection();\n    const t = useI18n();\n\n    const tasksMenu = useMemo(() => {\n      const openTasks = tasks.filter(task => !task.isResolved);\n      const openTasksMenuItems: MenuItemProps[] = openTasks.map(\n        ({ name, secondary, id, active }) => {\n          return {\n            primary: name,\n            secondary,\n            id,\n            selected: !!active,\n            onClick: idx => {\n              onTaskLaunch?.(idx);\n            }\n          };\n        }\n      );\n      if (wrapUp?.showTab) {\n        openTasksMenuItems.push({\n          primary: t('task_manager_wrap_up'),\n          secondary: [],\n          id: '',\n          selected: !!wrapUp.active,\n          onClick: () => {\n            wrapUp?.onClick();\n          }\n        });\n      }\n\n      const resolvedTasks = tasks.filter(task => task.isResolved);\n      const resolvedTasksMenuItems: MenuItemProps[] = resolvedTasks.map(\n        ({ id, name, secondary, active }) => {\n          return {\n            primary: name,\n            secondary,\n            id,\n            selected: !!active,\n            onClick: () => {\n              onTaskLaunch?.(id);\n            }\n          };\n        }\n      );\n      const taskCategories: MenuProps['items'] = [];\n      if (openTasksMenuItems.length > 0) {\n        taskCategories.push({ id: 'open_tasks', label: t('open_tasks'), items: [] });\n        taskCategories\n          .find(category => category.id === 'open_tasks')\n          ?.items?.push(...openTasksMenuItems);\n      }\n      if (resolvedTasksMenuItems.length > 0) {\n        taskCategories.push({ id: 'resolved_tasks', label: t('resolved_tasks'), items: [] });\n        taskCategories\n          .find(category => category.id === 'resolved_tasks')\n          ?.items?.push(...resolvedTasksMenuItems);\n      }\n      return taskCategories;\n    }, [tasks]);\n\n    const checkAndUpdateIsOverflowing = () => {\n      if (tabListRef.current) {\n        const value = tabListRef.current.scrollWidth > tabListRef.current.clientWidth;\n        if (value !== isOverflowing) {\n          setIsOverflowing(value);\n          return value;\n        }\n      }\n      return isOverflowing;\n    };\n\n    useEffect(() => {\n      setTabs(tasks.filter(task => !task.hideFromTab));\n    }, [tasks]);\n\n    useEffect(() => {\n      const resizeObserver = new ResizeObserver(() => {\n        checkAndUpdateIsOverflowing();\n      });\n      if (tabListRef?.current) resizeObserver.observe(tabListRef?.current as Element);\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [checkAndUpdateIsOverflowing]);\n\n    useLayoutEffect(() => {\n      if (!checkAndUpdateIsOverflowing()) return;\n      const activeTabRef = [...tabRefs, wrapUpRef].find(\n        tab => tab?.current?.getAttribute('aria-selected') === 'true'\n      );\n\n      if (activeTabRef && activeTabRef.current && tabListRef.current) {\n        const activeTabRect = activeTabRef.current.getBoundingClientRect();\n        const tabListWidth = tabListRef.current.clientWidth;\n\n        // Check if it is not in view\n        if (activeTabRect.left <= 0 || activeTabRect.right >= tabListWidth) {\n          tabListRef.current.scrollLeft = rtl\n            ? -(tabListWidth - (activeTabRef.current.offsetLeft + activeTabRect.width))\n            : activeTabRef.current.offsetLeft;\n        }\n      }\n    }, [tasks, wrapUp]);\n\n    const changeTabFocus = (event: KeyboardEvent, index?: number): void => {\n      let activeIndex = index;\n      if (tabs.length) {\n        const { key } = event;\n\n        if (key === `Arrow${cap(endDirection)}`) {\n          event.preventDefault();\n          let nextIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            nextIndex = 0;\n          } else {\n            if (index === tabs.length - 1 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            nextIndex = index! + 1 < tabs.length ? index! + 1 : 0;\n          }\n          activeIndex = nextIndex;\n          const nextTab = tabRefs[nextIndex]?.current;\n          nextTab?.focus();\n        } else if (key === `Arrow${cap(startDirection)}`) {\n          event.preventDefault();\n          let prevIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            prevIndex = tabs.length - 1;\n          } else {\n            if (index === 0 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            prevIndex = index === 0 ? tabs.length - 1 : index! - 1;\n          }\n          const prevTab = tabRefs[prevIndex]?.current;\n          activeIndex = prevIndex;\n          prevTab?.focus();\n        } else if (key === 'Enter' || key === ' ') {\n          event.preventDefault();\n          if (wrapUpRef?.current === event.currentTarget) {\n            wrapUp?.onClick();\n            return;\n          }\n          onTaskLaunch?.(tabs[activeIndex!].id);\n        }\n      }\n    };\n\n    return (\n      <Flex container as={StyledTaskManagerTabs} ref={ref}>\n        {(tasks.length > 0 || wrapUp?.showTab) && (\n          <>\n            <StyledTasksTabList role='tablist' ref={tabListRef}>\n              {tabs.map((task: TaskProps, i) => {\n                const { id, active = false, icon, meta, ...restProps } = task;\n                return (\n                  <StyledTaskManagerTab\n                    {...restProps}\n                    ref={tabRefs[i]}\n                    key={id}\n                    onClick={() => onTaskLaunch?.(id)}\n                    aria-selected={active}\n                    role='tab'\n                    tabIndex={active ? 0 : -1}\n                    onKeyUp={(e: KeyboardEvent) => {\n                      changeTabFocus(e, i);\n                    }}\n                    onKeyDown={(e: KeyboardEvent) => {\n                      const { key } = e;\n                      if (\n                        key === 'ArrowRight' ||\n                        key === 'ArrowDown' ||\n                        key === 'ArrowLeft' ||\n                        key === 'ArrowUp' ||\n                        key === 'Enter' ||\n                        key === ' '\n                      ) {\n                        e.preventDefault();\n                      }\n                    }}\n                    active={active}\n                  >\n                    <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n                      <StyleTaskName>{task.name}</StyleTaskName>\n                    </Flex>\n                  </StyledTaskManagerTab>\n                );\n              })}\n              {wrapUp?.showTab && (\n                <StyledTaskManagerTab\n                  onClick={wrapUp.onClick}\n                  variant='wrap-up'\n                  aria-selected={wrapUp.active}\n                  role='tab'\n                  active={wrapUp.active}\n                  tabIndex={wrapUp.active ? 0 : -1}\n                  onKeyUp={(e: KeyboardEvent) => {\n                    changeTabFocus(e);\n                  }}\n                  onKeyDown={(e: KeyboardEvent) => {\n                    const { key } = e;\n                    if (\n                      key === 'ArrowRight' ||\n                      key === 'ArrowDown' ||\n                      key === 'ArrowLeft' ||\n                      key === 'ArrowUp'\n                    ) {\n                      e.preventDefault();\n                    }\n                  }}\n                  ref={wrapUpRef}\n                >\n                  <span>{t('task_manager_wrap_up')}</span>\n                </StyledTaskManagerTab>\n              )}\n            </StyledTasksTabList>\n            <StyledOverflowTabMenu\n              menu={{\n                items: tasksMenu,\n                mode: 'single-select'\n              }}\n              icon='caret-down'\n              iconOnly\n              variant='simple'\n              text={t('task_manager_overflow_menu')}\n            />\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default TaskManagerTabs;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "4.0.0-dev.2.0",
+  "version": "4.0.0-dev.3.1",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.2.0",
-    "@pega/cosmos-react-dnd": "4.0.0-dev.2.0",
+    "@pega/cosmos-react-core": "4.0.0-dev.3.1",
+    "@pega/cosmos-react-dnd": "4.0.0-dev.3.1",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.26",