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

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

@@ -1 +1 @@
-{"version":3,"file":"Article.d.ts","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,EACL,aAAa,EAOb,SAAS,EACT,YAAY,EACZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,0BAA0B;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gEAAgE;IAChE,gBAAgB,CAAC,EAAE;QACjB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KAChC,EAAE,CAAC;IACJ,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa;IACb,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;IAC5C,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,oBAAY,YAAY,GACpB,CAAC,gBAAgB,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAC5C,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AAiDxD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAkE3D,CAAC;AAMF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Article.d.ts","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,EACL,aAAa,EAOb,SAAS,EACT,YAAY,EACZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,0BAA0B;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gEAAgE;IAChE,gBAAgB,CAAC,EAAE;QACjB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KAChC,EAAE,CAAC;IACJ,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa;IACb,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;IAC5C,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,oBAAY,YAAY,GACpB,CAAC,gBAAgB,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAC5C,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AAoDxD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAkE3D,CAAC;AAMF,eAAe,OAAO,CAAC"}

package/lib/components/Article/Article.js

@@ -30,6 +30,9 @@ const StyledArticleContent = styled.div(props => {
     a {
       color: ${theme.components.link.color};
     }
+    * {
+      margin: unset;
+    }
   `;
 });
 StyledArticleContent.defaultProps = defaultThemeProp;

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='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"]}
+{"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      margin: unset;\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/AttachInteractionDialog.d.ts

@@ -24,8 +24,12 @@ export interface AttachInteractionProps {
     }) => void;
     /** Callback invoked when closing the dialog. */
     onClose?: () => void;
+    /** Current selected reason */
+    defaultReason?: MenuOption['id'];
     /** Reason options. The field will be hidden if not passed. */
     reasonOptions: Readonly<MenuOption[]>;
+    /** Current selected interaction */
+    defaultInteraction?: MenuOption['id'];
     /** Interaction options. The fill will be hidden if not passed. */
     interactionOptions?: Readonly<MenuOption[]>;
     /** Region for messages: errors, notifications, etc. */

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

@@ -1 +1 @@
-{"version":3,"file":"AttachInteractionDialog.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/AttachInteractionDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAGjE,OAAO,EAQL,WAAW,EAEX,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC5B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,mBAAmB,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,sBAAsB;IACrC,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,gBAAgB,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACpF,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,aAAa,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;IACtC,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;IAC5C,uDAAuD;IACvD,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC,CAAC;CACnE;AAED,MAAM,WAAW,4BACf,SAAQ,sBAAsB,EAC5B,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IACjC,4HAA4H;IAC5H,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,qBAAqB,oNAUjC,CAAC;AAIF,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,CAiG5E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"AttachInteractionDialog.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/AttachInteractionDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAGjE,OAAO,EAQL,WAAW,EAEX,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC5B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,mBAAmB,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,sBAAsB;IACrC,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,gBAAgB,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACpF,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IACjC,8DAA8D;IAC9D,aAAa,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;IACtC,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IACtC,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;IAC5C,uDAAuD;IACvD,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC,CAAC;CACnE;AAED,MAAM,WAAW,4BACf,SAAQ,sBAAsB,EAC5B,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IACjC,4HAA4H;IAC5H,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,qBAAqB,oNAUjC,CAAC;AAIF,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,CA0G5E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/lib/components/CallControlPanel/AttachInteractionDialog.js

@@ -8,20 +8,22 @@ export const StyledInteractionForm = styled(Form)(({ theme: { base: { 'content-w
     `;
 });
 StyledInteractionForm.defaultProps = defaultThemeProp;
-const AttachInteractionDialog = ({ heading, reasonOptions, interactionOptions, message, onAddInteraction, onClose, target, close }) => {
+const AttachInteractionDialog = ({ heading, defaultReason, reasonOptions, defaultInteraction, interactionOptions, message, onAddInteraction, onClose, target, close }) => {
     const t = useI18n();
-    const [selectedReason, setSelectedReason] = useState();
-    const [selectedInteraction, setSelectedInteraction] = useState();
+    const initialReason = reasonOptions.find(reason => reason.id === defaultReason);
+    const initialInteraction = interactionOptions?.find(interaction => interaction.id === defaultInteraction);
+    const [selectedReason, setSelectedReason] = useState(initialReason);
+    const [selectedInteraction, setSelectedInteraction] = useState(initialInteraction);
     const [comments, setComments] = useState('');
-    const clearForm = () => {
+    const resetForm = () => {
         setComments('');
-        setSelectedInteraction(undefined);
-        setSelectedReason(undefined);
+        setSelectedInteraction(initialInteraction);
+        setSelectedReason(initialReason);
     };
     return (_jsx(FormDialog, { target: target, heading: heading, onCancel: () => {
             close();
             onClose?.();
-            clearForm();
+            resetForm();
         }, onSubmit: () => {
             onAddInteraction({
                 reasonId: selectedReason?.id,

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

@@ -1 +1 @@
-{"version":3,"file":"AttachInteractionDialog.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/AttachInteractionDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState, ChangeEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  useI18n,\n  Form,\n  Banner,\n  ComboBox,\n  TextArea,\n  BannerProps,\n  FormDialog,\n  FormDialogProps\n} from '@pega/cosmos-react-core';\n\nexport interface MenuOption {\n  id: string;\n  label: string;\n}\n\nexport interface AttachInteractionData {\n  /** Selected reason option identifier. */\n  reasonId?: MenuOption['id'];\n  /** Interaction comments. */\n  comments?: string;\n  /** Selected interaction option identifier. */\n  interactionOptionId?: MenuOption['id'];\n}\n\nexport interface AttachInteractionProps {\n  /** The heading of the dialog. */\n  heading: string;\n  /**\n   * Callback invoked when 'Submit' action has been clicked.\n   * Must call given 'close' function on success.\n   */\n  onAddInteraction: (data: AttachInteractionData, arg: { close: () => void }) => void;\n  /** Callback invoked when closing the dialog. */\n  onClose?: () => void;\n  /** Reason options. The field will be hidden if not passed. */\n  reasonOptions: Readonly<MenuOption[]>;\n  /** Interaction options. The fill will be hidden if not passed. */\n  interactionOptions?: Readonly<MenuOption[]>;\n  /** Region for messages: errors, notifications, etc. */\n  message?: Pick<BannerProps, 'variant' | 'messages' | 'onDismiss'>;\n}\n\nexport interface AttachInteractionDialogProps\n  extends AttachInteractionProps,\n    Pick<FormDialogProps, 'target'> {\n  /** When invoked, sets the dialog target to null to close. Maintains interface support where onSubmit receives close arg. */\n  close: () => void;\n}\n\nexport const StyledInteractionForm = styled(Form)(\n  ({\n    theme: {\n      base: { 'content-width': contentWidth }\n    }\n  }) => {\n    return css`\n      min-width: ${contentWidth.sm};\n    `;\n  }\n);\n\nStyledInteractionForm.defaultProps = defaultThemeProp;\n\nconst AttachInteractionDialog: FunctionComponent<AttachInteractionDialogProps> = ({\n  heading,\n  reasonOptions,\n  interactionOptions,\n  message,\n  onAddInteraction,\n  onClose,\n  target,\n  close\n}: AttachInteractionDialogProps) => {\n  const t = useI18n();\n\n  const [selectedReason, setSelectedReason] = useState<MenuOption>();\n  const [selectedInteraction, setSelectedInteraction] = useState<MenuOption>();\n  const [comments, setComments] = useState('');\n\n  const clearForm = () => {\n    setComments('');\n    setSelectedInteraction(undefined);\n    setSelectedReason(undefined);\n  };\n\n  return (\n    <FormDialog\n      target={target}\n      heading={heading}\n      onCancel={() => {\n        close();\n        onClose?.();\n        clearForm();\n      }}\n      onSubmit={() => {\n        onAddInteraction(\n          {\n            reasonId: selectedReason?.id,\n            comments,\n            interactionOptionId: selectedInteraction?.id\n          },\n          { close }\n        );\n      }}\n    >\n      <StyledInteractionForm>\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          {message && <Banner {...message} />}\n\n          {interactionOptions && (\n            <ComboBox\n              label={t('call_panel_handover_interaction_label')}\n              selected={{\n                items: selectedInteraction\n                  ? { id: selectedInteraction.id, text: selectedInteraction.label }\n                  : undefined\n              }}\n              menu={{\n                items: interactionOptions.map(({ id, label }) => ({\n                  id,\n                  primary: label,\n                  selected: id === selectedInteraction?.id\n                })),\n                onItemClick: id =>\n                  setSelectedInteraction(interactionOptions?.find(option => option.id === id))\n              }}\n            />\n          )}\n\n          {reasonOptions && (\n            <ComboBox\n              label={t('call_panel_handover_reason_label')}\n              selected={{\n                items: selectedReason\n                  ? { id: selectedReason.id, text: selectedReason.label }\n                  : undefined\n              }}\n              menu={{\n                items: reasonOptions?.map(({ id, label }) => ({\n                  id,\n                  primary: label,\n                  selected: id === selectedReason?.id\n                })),\n                onItemClick: id =>\n                  setSelectedReason(reasonOptions?.find(option => option.id === id))\n              }}\n            />\n          )}\n\n          <TextArea\n            label={t('call_panel_handover_comments_label')}\n            displayCharCount\n            maxLength={300}\n            value={comments}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n          />\n        </Flex>\n      </StyledInteractionForm>\n    </FormDialog>\n  );\n};\n\nexport default AttachInteractionDialog;\n"]}
+{"version":3,"file":"AttachInteractionDialog.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/AttachInteractionDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState, ChangeEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  useI18n,\n  Form,\n  Banner,\n  ComboBox,\n  TextArea,\n  BannerProps,\n  FormDialog,\n  FormDialogProps\n} from '@pega/cosmos-react-core';\n\nexport interface MenuOption {\n  id: string;\n  label: string;\n}\n\nexport interface AttachInteractionData {\n  /** Selected reason option identifier. */\n  reasonId?: MenuOption['id'];\n  /** Interaction comments. */\n  comments?: string;\n  /** Selected interaction option identifier. */\n  interactionOptionId?: MenuOption['id'];\n}\n\nexport interface AttachInteractionProps {\n  /** The heading of the dialog. */\n  heading: string;\n  /**\n   * Callback invoked when 'Submit' action has been clicked.\n   * Must call given 'close' function on success.\n   */\n  onAddInteraction: (data: AttachInteractionData, arg: { close: () => void }) => void;\n  /** Callback invoked when closing the dialog. */\n  onClose?: () => void;\n  /** Current selected reason */\n  defaultReason?: MenuOption['id'];\n  /** Reason options. The field will be hidden if not passed. */\n  reasonOptions: Readonly<MenuOption[]>;\n  /** Current selected interaction */\n  defaultInteraction?: MenuOption['id'];\n  /** Interaction options. The fill will be hidden if not passed. */\n  interactionOptions?: Readonly<MenuOption[]>;\n  /** Region for messages: errors, notifications, etc. */\n  message?: Pick<BannerProps, 'variant' | 'messages' | 'onDismiss'>;\n}\n\nexport interface AttachInteractionDialogProps\n  extends AttachInteractionProps,\n    Pick<FormDialogProps, 'target'> {\n  /** When invoked, sets the dialog target to null to close. Maintains interface support where onSubmit receives close arg. */\n  close: () => void;\n}\n\nexport const StyledInteractionForm = styled(Form)(\n  ({\n    theme: {\n      base: { 'content-width': contentWidth }\n    }\n  }) => {\n    return css`\n      min-width: ${contentWidth.sm};\n    `;\n  }\n);\n\nStyledInteractionForm.defaultProps = defaultThemeProp;\n\nconst AttachInteractionDialog: FunctionComponent<AttachInteractionDialogProps> = ({\n  heading,\n  defaultReason,\n  reasonOptions,\n  defaultInteraction,\n  interactionOptions,\n  message,\n  onAddInteraction,\n  onClose,\n  target,\n  close\n}: AttachInteractionDialogProps) => {\n  const t = useI18n();\n\n  const initialReason = reasonOptions.find(reason => reason.id === defaultReason);\n  const initialInteraction = interactionOptions?.find(\n    interaction => interaction.id === defaultInteraction\n  );\n\n  const [selectedReason, setSelectedReason] = useState<MenuOption | undefined>(initialReason);\n  const [selectedInteraction, setSelectedInteraction] = useState<MenuOption | undefined>(\n    initialInteraction\n  );\n  const [comments, setComments] = useState('');\n\n  const resetForm = () => {\n    setComments('');\n    setSelectedInteraction(initialInteraction);\n    setSelectedReason(initialReason);\n  };\n\n  return (\n    <FormDialog\n      target={target}\n      heading={heading}\n      onCancel={() => {\n        close();\n        onClose?.();\n        resetForm();\n      }}\n      onSubmit={() => {\n        onAddInteraction(\n          {\n            reasonId: selectedReason?.id,\n            comments,\n            interactionOptionId: selectedInteraction?.id\n          },\n          { close }\n        );\n      }}\n    >\n      <StyledInteractionForm>\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          {message && <Banner {...message} />}\n\n          {interactionOptions && (\n            <ComboBox\n              label={t('call_panel_handover_interaction_label')}\n              selected={{\n                items: selectedInteraction\n                  ? { id: selectedInteraction.id, text: selectedInteraction.label }\n                  : undefined\n              }}\n              menu={{\n                items: interactionOptions.map(({ id, label }) => ({\n                  id,\n                  primary: label,\n                  selected: id === selectedInteraction?.id\n                })),\n                onItemClick: id =>\n                  setSelectedInteraction(interactionOptions?.find(option => option.id === id))\n              }}\n            />\n          )}\n\n          {reasonOptions && (\n            <ComboBox\n              label={t('call_panel_handover_reason_label')}\n              selected={{\n                items: selectedReason\n                  ? { id: selectedReason.id, text: selectedReason.label }\n                  : undefined\n              }}\n              menu={{\n                items: reasonOptions?.map(({ id, label }) => ({\n                  id,\n                  primary: label,\n                  selected: id === selectedReason?.id\n                })),\n                onItemClick: id =>\n                  setSelectedReason(reasonOptions?.find(option => option.id === id))\n              }}\n            />\n          )}\n\n          <TextArea\n            label={t('call_panel_handover_comments_label')}\n            displayCharCount\n            maxLength={300}\n            value={comments}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n          />\n        </Flex>\n      </StyledInteractionForm>\n    </FormDialog>\n  );\n};\n\nexport default AttachInteractionDialog;\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,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEjE,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,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC1C,aAAa,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAC5C,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;KAC9C,CAAC;IACF,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAqED,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CAkEzF,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,EASZ,mBAAmB,EAEnB,cAAc,EAGf,MAAM,yBAAyB,CAAC;AAKjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEjE,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,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC1C,aAAa,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAC5C,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;KAC9C,CAAC;IACF,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAmED,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CAsEzF,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, CardFooter, StyledFieldValueList, StyledButton, useI18n, useDirection, Icon, StyledLabel } 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';
@@ -57,15 +57,13 @@ const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
       }
     }
 
-    ${StyledCardFooter} {
-      ${StyledFieldValueList} {
-        border-top: solid 0.0625rem ${base.colors.gray.medium};
-        padding-top: calc(2 * ${base.spacing});
-        color: ${base.colors.white};
+    ${StyledFieldValueList} {
+      border-top: solid 0.0625rem ${base.colors.gray.medium};
+      padding-top: calc(2 * ${base.spacing});
+      color: ${base.colors.white};
 
-        ${StyledFieldName} {
-          color: ${base.colors.white};
-        }
+      ${StyledLabel} {
+        color: ${base.colors.white};
       }
     }
   `;
@@ -74,7 +72,7 @@ StyledInteractionNotification.defaultProps = defaultThemeProp;
 const InteractionNotification = forwardRef(({ icon, title, primaryText, secondaryText, status, fields, incomingNotificationTimeout, onAccept, onDecline }, ref) => {
     const t = useI18n();
     const acceptButton = incomingNotificationTimeout ? (_jsx(AcceptButton, { startTime: incomingNotificationTimeout.startTime, timeout: incomingNotificationTimeout.answerTimeout, onTimerEnd: incomingNotificationTimeout.onTimerEnd ?? onDecline, onClick: onAccept })) : (_jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') }));
-    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { 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, { justify: 'between', children: _jsx(FieldValueList, { variant: 'inline', fields: fields }) })), onDecline ? (_jsxs(Flex, { as: StyledCardFooter, container: { direction: 'row', justify: 'between' }, children: [_jsx(Button, { onClick: onDecline, children: t('decline') }), acceptButton] })) : (_jsx(Flex, { as: StyledCardFooter, container: { direction: 'row-reverse' }, children: acceptButton }))] }));
+    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { 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: 'h5', as: 'span', children: secondaryText })), _jsx(Status, { variant: status.variant, children: status.text })] }) }), fields && fields.length !== 0 && (_jsx(CardFooter, { justify: 'between', children: _jsx(FieldValueList, { variant: 'inline', fields: fields }) })), onDecline ? (_jsxs(Flex, { as: StyledCardFooter, container: { direction: 'row', justify: 'between' }, children: [_jsx(Button, { onClick: onDecline, children: t('decline') }), acceptButton] })) : (_jsx(Flex, { as: StyledCardFooter, container: { direction: 'row-reverse' }, children: acceptButton }))] }));
 });
 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\nimport AcceptButton, { AcceptButtonProps } from './AcceptButton';\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  /** Timeout definition */\n  incomingNotificationTimeout?: {\n    startTime: AcceptButtonProps['startTime'];\n    answerTimeout: AcceptButtonProps['timeout'];\n    onTimerEnd?: AcceptButtonProps['onTimerEnd'];\n  };\n  /** Callback when accept button is clicked. */\n  onAccept: () => void;\n  /** Callback when decline button is clicked. */\n  onDecline?: () => 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        incomingNotificationTimeout,\n        onAccept,\n        onDecline\n      }: PropsWithoutRef<InteractionNotificationProps>,\n      ref: InteractionNotificationProps['ref']\n    ) => {\n      const t = useI18n();\n\n      const acceptButton = incomingNotificationTimeout ? (\n        <AcceptButton\n          startTime={incomingNotificationTimeout.startTime}\n          timeout={incomingNotificationTimeout.answerTimeout}\n          onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDecline}\n          onClick={onAccept}\n        />\n      ) : (\n        <Button variant='primary' onClick={onAccept}>\n          {t('accept')}\n        </Button>\n      );\n\n      return (\n        <StyledInteractionNotification ref={ref}>\n          <CardHeader>\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 justify='between'>\n              <FieldValueList variant='inline' fields={fields} />\n            </CardFooter>\n          )}\n          {onDecline ? (\n            <Flex as={StyledCardFooter} container={{ direction: 'row', justify: 'between' }}>\n              <Button onClick={onDecline}>{t('decline')}</Button>\n              {acceptButton}\n            </Flex>\n          ) : (\n            <Flex as={StyledCardFooter} container={{ direction: 'row-reverse' }}>\n              {acceptButton}\n            </Flex>\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  CardFooter,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp,\n  Icon,\n  StyledLabel\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\nimport AcceptButton, { AcceptButtonProps } from './AcceptButton';\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  /** Timeout definition */\n  incomingNotificationTimeout?: {\n    startTime: AcceptButtonProps['startTime'];\n    answerTimeout: AcceptButtonProps['timeout'];\n    onTimerEnd?: AcceptButtonProps['onTimerEnd'];\n  };\n  /** Callback when accept button is clicked. */\n  onAccept: () => void;\n  /** Callback when decline button is clicked. */\n  onDecline?: () => 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    ${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      ${StyledLabel} {\n        color: ${base.colors.white};\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        incomingNotificationTimeout,\n        onAccept,\n        onDecline\n      }: PropsWithoutRef<InteractionNotificationProps>,\n      ref: InteractionNotificationProps['ref']\n    ) => {\n      const t = useI18n();\n\n      const acceptButton = incomingNotificationTimeout ? (\n        <AcceptButton\n          startTime={incomingNotificationTimeout.startTime}\n          timeout={incomingNotificationTimeout.answerTimeout}\n          onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDecline}\n          onClick={onAccept}\n        />\n      ) : (\n        <Button variant='primary' onClick={onAccept}>\n          {t('accept')}\n        </Button>\n      );\n\n      return (\n        <StyledInteractionNotification ref={ref}>\n          <CardHeader>\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 && (\n                <Text variant='h5' as='span'>\n                  {secondaryText}\n                </Text>\n              )}\n              <Status variant={status.variant}>{status.text}</Status>\n            </Flex>\n          </CardContent>\n          {fields && fields.length !== 0 && (\n            <CardFooter justify='between'>\n              <FieldValueList variant='inline' fields={fields} />\n            </CardFooter>\n          )}\n          {onDecline ? (\n            <Flex as={StyledCardFooter} container={{ direction: 'row', justify: 'between' }}>\n              <Button onClick={onDecline}>{t('decline')}</Button>\n              {acceptButton}\n            </Flex>\n          ) : (\n            <Flex as={StyledCardFooter} container={{ direction: 'row-reverse' }}>\n              {acceptButton}\n            </Flex>\n          )}\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;AAkEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAmQzD,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,EAmBb,MAAM,yBAAyB,CAAC;AAQjC,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,CAuSzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Count, defaultThemeProp, Flex, Icon, Menu, menuHelpers, EmptyState, SearchInput, SummaryItem, Text, useI18n, Switch, useArrows, useConsolidatedRef, useElement, registerIcon, getFocusables } from '@pega/cosmos-react-core';
+import { Button, Count, defaultThemeProp, Flex, Icon, Menu, menuHelpers, EmptyState, SearchInput, SummaryItem, Text, useI18n, Switch, useArrows, useConsolidatedRef, useElement, registerIcon, getFocusables, FormDialog, CardHeader, useUID, useOuterEvent } from '@pega/cosmos-react-core';
 import { DragDropList, DragDropManager } from '@pega/cosmos-react-dnd';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import * as dragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';
 import * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';
+import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
 registerIcon(timesIcon, dragIcon, trashIcon);
 export const StyledPickerHeader = styled.div(({ theme }) => {
     return css `
@@ -15,8 +16,8 @@ export const StyledPickerHeader = styled.div(({ theme }) => {
 });
 StyledPickerHeader.defaultProps = defaultThemeProp;
 export const StyledAddTasks = styled.div `
-  width: 17.5rem;
   max-height: 24rem;
+  flex-grow: 1;
   header {
     padding-top: 0;
     border-bottom: none;
@@ -84,8 +85,9 @@ const DraggableSelectedList = ({ selectedItems, onChange, itemRenderer }) => {
                 data: item
             })), itemRenderer: itemRenderer, onChange: onChange }) }));
 };
-const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, onCancel, ...restProps }, ref) => {
+const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, onCancel, target, ...restProps }, ref) => {
     const t = useI18n();
+    const headingId = useUID();
     const [initialItems, setItems] = useState(items);
     const [searchInput, setSearchInput] = useState('');
     const [selectMultipleToggle, setSelectMultipleToggle] = useState(false);
@@ -95,12 +97,32 @@ const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, on
     const selectedTasksWrapperRef = useRef(null);
     const [pickerEl, setPickerEl] = useElement();
     const pickerRef = useConsolidatedRef(ref, setPickerEl);
+    const toggle = useRef(null);
+    const initialRender = useRef(true);
+    const initializePicker = () => {
+        setItems(items);
+        setSelections([]);
+        setSelectMultipleToggle(false);
+    };
+    useOuterEvent('mousedown', [target, pickerRef], () => {
+        initializePicker();
+        onCancel?.();
+    });
     useEffect(() => {
         setItems(items);
     }, [items]);
+    useEffect(() => {
+        if (initialRender.current) {
+            initialRender.current = false;
+        }
+        else {
+            toggle.current?.focus();
+        }
+    }, [selectMultipleToggle]);
     const onKeydown = useCallback((e) => {
         const { key } = e;
         if (key === 'Escape') {
+            initializePicker();
             onCancel?.();
         }
         else if (key === 'Tab' && pickerEl) {
@@ -179,7 +201,7 @@ const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, on
         selector: 'button',
         dir: 'up-down'
     }, [selections.length]);
-    return (_jsxs(Flex, { as: StyledPicker, container: { direction: 'column' }, ref: pickerRef, id: id, children: [_jsxs(Flex, { as: StyledPickerHeader, container: { justify: 'between', alignItems: 'center', pad: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('add_tasks') }), _jsx(Button, { variant: 'simple', onClick: onCancel, "aria-label": t('task_picker_close'), icon: true, children: _jsx(Icon, { name: 'times' }) })] }), _jsxs(Flex, { container: true, children: [_jsx(StyledAddTasks, { children: _jsx(Menu, { items: renderItems, onItemClick: (uid) => {
+    const pickerContent = (_jsxs(Flex, { as: StyledPicker, container: { direction: 'column' }, id: id, children: [!selectMultipleToggle && (_jsxs(CardHeader, { forwardedAs: 'div', children: [_jsx(Text, { id: headingId, variant: 'h2', children: t('add_tasks') }), _jsx(Button, { variant: 'simple', onClick: onCancel, "aria-label": t('task_picker_close'), icon: true, children: _jsx(Icon, { name: 'times' }) })] })), _jsxs(Flex, { container: true, children: [_jsx(StyledAddTasks, { children: _jsx(Menu, { items: renderItems, role: 'listbox', onItemClick: (uid) => {
                                 const clickedItem = menuHelpers.getItem(renderItems, uid);
                                 const parentItem = clickedItem?.ancestors
                                     ? clickedItem.ancestors[0]
@@ -214,17 +236,25 @@ const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, on
                                         onAdd([clickedItem]);
                                     }
                                 }
-                            }, focusControlEl: searchEleRef.current || undefined, emptyText: emptyText || t('no_items'), accent: filterRegex, ...restProps, mode: selectMultipleToggle ? 'multi-select' : 'action', header: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(SearchInput, { ref: searchEleRef, value: searchInput, onSearchChange: setSearchInput, placeholder: placeholder || t('search_placeholder_default'), autoFocus: true }), _jsx(Switch, { label: t('select_multiple'), on: selectMultipleToggle, onChange: toggleSelectedRegion })] }), arrowNavigationUnsupported: true }) }), selectMultipleToggle && (_jsxs(Flex, { as: StyledSelectedTasks, container: { direction: 'column' }, ref: selectedTasksWrapperRef, children: [_jsx(Text, { variant: 'h3', children: t('selected_tasks') }), selections.length > 0 ? (_jsx(DraggableSelectedList, { selectedItems: selections, onChange: newItems => {
+                            }, focusControlEl: searchEleRef.current || undefined, emptyText: emptyText || t('no_items'), accent: filterRegex, ...restProps, mode: selectMultipleToggle ? 'multi-select' : 'action', header: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(SearchInput, { ref: searchEleRef, value: searchInput, onSearchChange: setSearchInput, placeholder: placeholder || t('search_placeholder_default'), autoFocus: true }), _jsx(Switch, { label: t('select_multiple'), on: selectMultipleToggle, onChange: toggleSelectedRegion, ref: toggle })] }), arrowNavigationUnsupported: true }) }), selectMultipleToggle && (_jsxs(Flex, { as: StyledSelectedTasks, container: { direction: 'column' }, ref: selectedTasksWrapperRef, children: [_jsx(Text, { variant: 'h3', children: t('selected_tasks') }), selections.length > 0 ? (_jsx(DraggableSelectedList, { selectedItems: selections, onChange: newItems => {
                                     setSelections(newItems.map(({ type, data }) => ({
                                         ...data,
                                         type
                                     })));
-                                }, itemRenderer: SelectedItemRenderer })) : (_jsx(EmptyState, { message: t('no_selected_tasks') }))] }))] }), selectMultipleToggle && (_jsxs(Flex, { as: StyledPickerFooter, container: { justify: 'between' }, children: [_jsx(Button, { onClick: onCancel, "aria-label": t('cancel'), children: "Cancel" }), _jsxs(Button, { variant: 'primary', disabled: !selections.length, onClick: () => {
-                            onAdd?.(selections);
-                            setItems(initialItems);
-                        }, "aria-label": t('task_manager_picker_add_label', [selections?.length], {
-                            count: selections?.length
-                        }), children: [t('add'), !!selections?.length && _jsx(StyledCount, { children: selections.length })] })] }))] }));
+                                }, itemRenderer: SelectedItemRenderer })) : (_jsx(EmptyState, { message: t('no_selected_tasks') }))] }))] })] }));
+    if (selectMultipleToggle) {
+        return (_jsx(FormDialog, { heading: t('add_tasks'), target: target, ref: pickerRef, onCancel: () => {
+                initializePicker();
+                onCancel();
+            }, onSubmit: {
+                text: t('add'),
+                disabled: !selections.length,
+                handler: () => {
+                    onAdd(selections);
+                }
+            }, placement: 'bottom-start', children: pickerContent }));
+    }
+    return (_jsx(Dialog, { target: target, ref: pickerRef, labelledbyId: headingId, children: pickerContent }));
 });
 export default Picker;
 //# sourceMappingURL=Picker.js.map

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":"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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                    searchEleRef.current?.focus();\n\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  FormDialog,\n  CardHeader,\n  useUID,\n  useOuterEvent\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';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\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  max-height: 24rem;\n  flex-grow: 1;\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      target,\n      ...restProps\n    }: PropsWithoutRef<PickerProps>,\n    ref: PickerProps['ref']\n  ) => {\n    const t = useI18n();\n    const headingId = useUID();\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    const toggle = useRef<HTMLInputElement>(null);\n    const initialRender = useRef(true);\n\n    const initializePicker = () => {\n      setItems(items);\n      setSelections([]);\n      setSelectMultipleToggle(false);\n    };\n\n    useOuterEvent('mousedown', [target, pickerRef], () => {\n      initializePicker();\n      onCancel?.();\n    });\n\n    useEffect(() => {\n      setItems(items);\n    }, [items]);\n\n    useEffect(() => {\n      if (initialRender.current) {\n        initialRender.current = false;\n      } else {\n        toggle.current?.focus();\n      }\n    }, [selectMultipleToggle]);\n\n    const onKeydown = useCallback(\n      (e: KeyboardEvent) => {\n        const { key } = e;\n        if (key === 'Escape') {\n          initializePicker();\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    const pickerContent = (\n      <Flex as={StyledPicker} container={{ direction: 'column' }} id={id}>\n        {!selectMultipleToggle && (\n          <CardHeader forwardedAs='div'>\n            <Text id={headingId} variant='h2'>\n              {t('add_tasks')}\n            </Text>\n            <Button variant='simple' onClick={onCancel} aria-label={t('task_picker_close')} icon>\n              <Icon name='times' />\n            </Button>\n          </CardHeader>\n        )}\n        <Flex container>\n          <StyledAddTasks>\n            <Menu\n              items={renderItems}\n              role='listbox'\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                    searchEleRef.current?.focus();\n\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                    ref={toggle}\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      </Flex>\n    );\n\n    if (selectMultipleToggle) {\n      return (\n        <FormDialog\n          heading={t('add_tasks')}\n          target={target}\n          ref={pickerRef}\n          onCancel={() => {\n            initializePicker();\n            onCancel();\n          }}\n          onSubmit={{\n            text: t('add'),\n            disabled: !selections.length,\n            handler: () => {\n              onAdd(selections);\n            }\n          }}\n          placement='bottom-start'\n        >\n          {pickerContent}\n        </FormDialog>\n      );\n    }\n\n    return (\n      <Dialog target={target} ref={pickerRef} labelledbyId={headingId}>\n        {pickerContent}\n      </Dialog>\n    );\n  }\n);\n\nexport default Picker;\n"]}

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

@@ -1,5 +1,5 @@
 import { ComponentType, Ref } from 'react';
-import { BaseProps, MenuProps } from '@pega/cosmos-react-core';
+import { BaseProps, FormDialogProps, MenuProps } from '@pega/cosmos-react-core';
 import { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
 import { DraggableItem, ItemRendererProps } from '@pega/cosmos-react-dnd';
 export interface PickerProps extends BaseProps, MenuProps {
@@ -8,13 +8,14 @@ export interface PickerProps extends BaseProps, MenuProps {
     /** Placeholder text */
     placeholder?: string;
     /** Callback when cancel button is clicked */
-    onCancel?: () => void;
+    onCancel: () => void;
     /** Callback when add button is clicked */
     onAdd: (selections: SelectedItemProps[]) => void;
     /** Picker reference . */
     ref?: Ref<HTMLDivElement>;
     /** Title for the picker */
     title?: string;
+    target: FormDialogProps['target'];
 }
 export interface DraggableSelectedListProps {
     selectedItems: SelectedItemProps[];

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.types.d.ts","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE1E,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,SAAS;IACvD,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0CAA0C;IAC1C,KAAK,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACjD,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,MAAM,WAAW,0BAA0B;IACzC,aAAa,EAAE,iBAAiB,EAAE,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,EAAE,KAAK,IAAI,CAAC;IAC9D,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAC;CACnE;AACD,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACvD"}
+{"version":3,"file":"Picker.types.d.ts","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE1E,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,SAAS;IACvD,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,KAAK,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACjD,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;CACnC;AACD,MAAM,WAAW,0BAA0B;IACzC,aAAa,EAAE,iBAAiB,EAAE,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,EAAE,KAAK,IAAI,CAAC;IAC9D,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAC;CACnE;AACD,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACvD"}

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.types.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, Ref } from 'react';\n\nimport { BaseProps, MenuProps } from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport { DraggableItem, ItemRendererProps } from '@pega/cosmos-react-dnd';\n\nexport interface PickerProps extends BaseProps, MenuProps {\n  /** Unique id for picker */\n  id?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Callback when cancel button is clicked */\n  onCancel?: () => void;\n  /** Callback when add button is clicked */\n  onAdd: (selections: SelectedItemProps[]) => void;\n  /** Picker reference . */\n  ref?: Ref<HTMLDivElement>;\n  /** Title for the picker */\n  title?: string;\n}\nexport interface DraggableSelectedListProps {\n  selectedItems: SelectedItemProps[];\n  onChange: (items: DraggableItem<SelectedItemProps>[]) => void;\n  itemRenderer: ComponentType<ItemRendererProps<SelectedItemProps>>;\n}\nexport interface SelectedItemProps extends MenuItemProps {\n  onRemoveSelection?: (id: MenuItemProps['id']) => void;\n}\n"]}
+{"version":3,"file":"Picker.types.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, Ref } from 'react';\n\nimport { BaseProps, FormDialogProps, MenuProps } from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport { DraggableItem, ItemRendererProps } from '@pega/cosmos-react-dnd';\n\nexport interface PickerProps extends BaseProps, MenuProps {\n  /** Unique id for picker */\n  id?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Callback when cancel button is clicked */\n  onCancel: () => void;\n  /** Callback when add button is clicked */\n  onAdd: (selections: SelectedItemProps[]) => void;\n  /** Picker reference . */\n  ref?: Ref<HTMLDivElement>;\n  /** Title for the picker */\n  title?: string;\n  target: FormDialogProps['target'];\n}\nexport interface DraggableSelectedListProps {\n  selectedItems: SelectedItemProps[];\n  onChange: (items: DraggableItem<SelectedItemProps>[]) => void;\n  itemRenderer: ComponentType<ItemRendererProps<SelectedItemProps>>;\n}\nexport interface SelectedItemProps extends MenuItemProps {\n  onRemoveSelection?: (id: MenuItemProps['id']) => void;\n}\n"]}

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

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

package/lib/components/TaskManager/TaskManager.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, useRef, useEffect, useState } from 'react';\nimport { remToPx, stripUnit } from 'polished';\n\nimport {\n  Flex,\n  Icon,\n  registerIcon,\n  Text,\n  Status,\n  useI18n,\n  useConsolidatedRef,\n  useElement,\n  Button,\n  Grid,\n  SummaryItem,\n  EmptyState,\n  useTheme,\n  tryCatch,\n  ForwardProps\n} from '@pega/cosmos-react-core';\nimport * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport {\n  StyledTaskManager,\n  StyledTaskSummaryItem,\n  StyledPopover,\n  StyledTaskMain\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport TaskManagerTabs from './TaskManagerTabs';\nimport { TaskManagerProps } from './TaskManager.types';\nimport TaskView from './TaskView';\nimport Picker from './Picker/Picker';\nimport { SelectedItemProps } from './Picker/Picker.types';\nimport Dialogue from './Dialogue';\nimport ConversationAI from './ConversationAI';\n\nregisterIcon(plusIcon, flagFinishIcon);\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskManagerProps>, ref: TaskManagerProps['ref']) => {\n    const {\n      tasks = [],\n      emptyText,\n      onTaskLaunch,\n      onTaskDismiss,\n      addTask,\n      wrapUp,\n      main,\n      banner,\n      handle,\n      conversationAI,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const TaskManagerTabsRef = useRef<HTMLDivElement>(null);\n    const consolidatedRef = useConsolidatedRef(ref);\n    const hasActiveTask = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;\n    const [showPicker, setShowPicker] = useState(false);\n    const [addTaskEl, setAddTaskEl] = useElement<HTMLButtonElement>(null);\n    const theme = useTheme();\n\n    useEffect(() => {\n      if (TaskManagerTabsRef.current && consolidatedRef.current) {\n        consolidatedRef.current.style.minHeight = `${TaskManagerTabsRef.current.scrollHeight}px`;\n      } else if (consolidatedRef.current) {\n        consolidatedRef.current.style.minHeight = '0';\n      }\n    }, [tasks, addTask]);\n\n    return (\n      <TaskManagerContext.Provider\n        value={{\n          addTask,\n          wrapUp,\n          tasks,\n          onTaskLaunch\n        }}\n      >\n        <StyledTaskManager {...restProps} ref={consolidatedRef} hasDrawer={hasActiveTask}>\n          {banner && (\n            <Dialogue\n              icon={banner.icon}\n              content={banner.content}\n              verbatimStatus={banner.verbatimStatus}\n              handle={handle}\n            />\n          )}\n          <TaskView\n            header={<Text variant='h2'>{t('task_manager_tasks')}</Text>}\n            actions={\n              <Flex\n                container={{\n                  gap: 2\n                }}\n              >\n                {conversationAI && (\n                  <ConversationAI\n                    content={conversationAI.content}\n                    entityCount={conversationAI.entityCount}\n                  />\n                )}\n                {wrapUp && (\n                  <Button\n                    variant='secondary'\n                    disabled={wrapUp.disable}\n                    onClick={() => wrapUp?.onClick()}\n                  >\n                    <Flex\n                      container={{\n                        itemGap: 1,\n                        alignItems: 'center'\n                      }}\n                    >\n                      <Icon name='flag-finish' />\n                      <span>{t('task_manager_wrap_up')}</span>\n                    </Flex>\n                  </Button>\n                )}\n                {addTask && (\n                  <>\n                    <Button\n                      variant='primary'\n                      onClick={() => setShowPicker(cur => !cur)}\n                      ref={setAddTaskEl}\n                    >\n                      <Flex\n                        container={{\n                          gap: 1,\n                          alignItems: 'center'\n                        }}\n                      >\n                        <Icon name='plus' />\n                        <span>{t('task_manager_add_task')}</span>\n                      </Flex>\n                    </Button>\n                    <StyledPopover\n                      show={showPicker}\n                      target={addTaskEl}\n                      placement='bottom-end'\n                      modifiers={[\n                        {\n                          name: 'offset',\n                          options: {\n                            offset: [\n                              tryCatch(\n                                () => stripUnit(remToPx(theme.base.spacing)),\n                                () => 8\n                              ),\n                              tryCatch(\n                                () => stripUnit(remToPx(theme.base.spacing)),\n                                () => 8\n                              )\n                            ]\n                          }\n                        }\n                      ]}\n                    >\n                      <Picker\n                        scrollAt={10}\n                        emptyText={t('task_manager_search_results_empty_text')}\n                        items={addTask?.items}\n                        onAdd={(selectedItems: SelectedItemProps[]) => {\n                          if (addTask.onAdd) {\n                            addTask?.onAdd(selectedItems);\n                          }\n                          setShowPicker(false);\n                        }}\n                        onCancel={() => {\n                          setShowPicker(false);\n                        }}\n                        ref={addTask.ref}\n                        placeholder={t('search_tasks')}\n                      />\n                    </StyledPopover>\n                  </>\n                )}\n              </Flex>\n            }\n          >\n            {hasActiveTask && <TaskManagerTabs ref={TaskManagerTabsRef} />}\n            {hasActiveTask && <StyledTaskMain>{main}</StyledTaskMain>}\n            {!hasActiveTask && (\n              <Grid as='ul' container>\n                {tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {\n                  return (\n                    <SummaryItem\n                      {...restTaskProps}\n                      key={id}\n                      as={StyledTaskSummaryItem}\n                      primary={<Text variant='h4'>{name}</Text>}\n                      secondary={\n                        <>\n                          {!status && meta && <Text variant='secondary'>{meta}</Text>}\n                          {status && <Status variant={status.variant}>{status.text}</Status>}\n                        </>\n                      }\n                      visual={<Icon name={icon} />}\n                      actions={\n                        <Flex container={{ gap: 1 }}>\n                          {!isResolved && (\n                            <Button\n                              variant='secondary'\n                              aria-label={t('continue_label_a11y', [name])}\n                              onClick={() => {\n                                onTaskLaunch?.(id);\n                              }}\n                            >\n                              {t('continue_label')}\n                            </Button>\n                          )}\n                          {isResolved && (\n                            <Button\n                              variant='secondary'\n                              aria-label={t('review_label_a11y', [name])}\n                              onClick={() => {\n                                onTaskLaunch?.(id);\n                              }}\n                            >\n                              {t('review_label')}\n                            </Button>\n                          )}\n                        </Flex>\n                      }\n                    />\n                  );\n                })}\n                {tasks.length === 0 && <EmptyState message={emptyText} />}\n              </Grid>\n            )}\n          </TaskView>\n        </StyledTaskManager>\n      </TaskManagerContext.Provider>\n    );\n  }\n);\n\nexport default TaskManager;\n"]}
+{"version":3,"file":"TaskManager.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  forwardRef,\n  useRef,\n  useEffect,\n  MouseEvent\n} from 'react';\n\nimport {\n  Flex,\n  Icon,\n  registerIcon,\n  Text,\n  Status,\n  useI18n,\n  useConsolidatedRef,\n  useElement,\n  Button,\n  Grid,\n  SummaryItem,\n  EmptyState,\n  ForwardProps\n} from '@pega/cosmos-react-core';\nimport * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport { StyledTaskManager, StyledTaskSummaryItem, StyledTaskMain } from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport TaskManagerTabs from './TaskManagerTabs';\nimport { TaskManagerProps } from './TaskManager.types';\nimport TaskView from './TaskView';\nimport Picker from './Picker/Picker';\nimport { SelectedItemProps } from './Picker/Picker.types';\nimport Dialogue from './Dialogue';\nimport ConversationAI from './ConversationAI';\n\nregisterIcon(plusIcon, flagFinishIcon);\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskManagerProps>, ref: TaskManagerProps['ref']) => {\n    const {\n      tasks = [],\n      emptyText,\n      onTaskLaunch,\n      onTaskDismiss,\n      addTask,\n      wrapUp,\n      main,\n      banner,\n      handle,\n      conversationAI,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const TaskManagerTabsRef = useRef<HTMLDivElement>(null);\n    const consolidatedRef = useConsolidatedRef(ref);\n    const hasActiveTask = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;\n\n    const [addTaskEl, setAddTaskEl] = useElement<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (TaskManagerTabsRef.current && consolidatedRef.current) {\n        consolidatedRef.current.style.minHeight = `${TaskManagerTabsRef.current.scrollHeight}px`;\n      } else if (consolidatedRef.current) {\n        consolidatedRef.current.style.minHeight = '0';\n      }\n    }, [tasks, addTask]);\n\n    return (\n      <TaskManagerContext.Provider\n        value={{\n          addTask,\n          wrapUp,\n          tasks,\n          onTaskLaunch\n        }}\n      >\n        <StyledTaskManager {...restProps} ref={consolidatedRef} hasDrawer={hasActiveTask}>\n          {banner && (\n            <Dialogue\n              icon={banner.icon}\n              content={banner.content}\n              verbatimStatus={banner.verbatimStatus}\n              handle={handle}\n            />\n          )}\n          <TaskView\n            header={<Text variant='h2'>{t('task_manager_tasks')}</Text>}\n            actions={\n              <Flex\n                container={{\n                  gap: 1\n                }}\n              >\n                {conversationAI && (\n                  <ConversationAI\n                    content={conversationAI.content}\n                    entityCount={conversationAI.entityCount}\n                  />\n                )}\n                <Flex container>\n                  {wrapUp && (\n                    <Button\n                      variant='secondary'\n                      disabled={wrapUp.disable}\n                      onClick={wrapUp?.onClick && (() => wrapUp.onClick())}\n                    >\n                      <Flex\n                        container={{\n                          alignItems: 'center',\n                          gap: 1\n                        }}\n                      >\n                        <Icon name='flag-finish' />\n                        <span>{t('task_manager_wrap_up')}</span>\n                      </Flex>\n                    </Button>\n                  )}\n                  {addTask && (\n                    <>\n                      <Button\n                        variant='primary'\n                        onClick={(e: MouseEvent<HTMLButtonElement>) =>\n                          setAddTaskEl(!addTaskEl ? e.currentTarget : null)\n                        }\n                      >\n                        <Flex\n                          container={{\n                            gap: 1,\n                            alignItems: 'center'\n                          }}\n                        >\n                          <Icon name='plus' />\n                          <span>{t('task_manager_add_task')}</span>\n                        </Flex>\n                      </Button>\n                      {addTaskEl && (\n                        <Picker\n                          target={addTaskEl}\n                          scrollAt={10}\n                          emptyText={t('task_manager_search_results_empty_text')}\n                          items={addTask?.items}\n                          onAdd={(selectedItems: SelectedItemProps[]) => {\n                            if (addTask.onAdd) {\n                              addTask?.onAdd(selectedItems);\n                            }\n                            setAddTaskEl(null);\n                          }}\n                          onCancel={() => {\n                            setAddTaskEl(null);\n                          }}\n                          ref={addTask.ref}\n                          placeholder={t('search_tasks')}\n                        />\n                      )}\n                    </>\n                  )}\n                </Flex>\n              </Flex>\n            }\n          >\n            {hasActiveTask && <TaskManagerTabs ref={TaskManagerTabsRef} />}\n            {hasActiveTask && <StyledTaskMain>{main}</StyledTaskMain>}\n            {!hasActiveTask && (\n              <Grid as='ul' container>\n                {tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {\n                  return (\n                    <SummaryItem\n                      {...restTaskProps}\n                      key={id}\n                      as={StyledTaskSummaryItem}\n                      primary={<Text variant='h4'>{name}</Text>}\n                      secondary={\n                        <>\n                          {!status && meta && <Text variant='secondary'>{meta}</Text>}\n                          {status && <Status variant={status.variant}>{status.text}</Status>}\n                        </>\n                      }\n                      visual={<Icon name={icon} />}\n                      actions={\n                        <Flex container={{ gap: 1 }}>\n                          {!isResolved && (\n                            <Button\n                              variant='secondary'\n                              aria-label={t('continue_label_a11y', [name])}\n                              onClick={() => {\n                                onTaskLaunch?.(id);\n                              }}\n                            >\n                              {t('continue_label')}\n                            </Button>\n                          )}\n                          {isResolved && (\n                            <Button\n                              variant='secondary'\n                              aria-label={t('review_label_a11y', [name])}\n                              onClick={() => {\n                                onTaskLaunch?.(id);\n                              }}\n                            >\n                              {t('review_label')}\n                            </Button>\n                          )}\n                        </Flex>\n                      }\n                    />\n                  );\n                })}\n                {tasks.length === 0 && <EmptyState message={emptyText} />}\n              </Grid>\n            )}\n          </TaskView>\n        </StyledTaskManager>\n      </TaskManagerContext.Provider>\n    );\n  }\n);\n\nexport default TaskManager;\n"]}

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;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"}
+{"version":3,"file":"TaskManager.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":";AAuBA,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,6HAmD7B,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

@@ -5,6 +5,8 @@ import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/Ca
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
 import { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';
 import { StyledVisual } from '@pega/cosmos-react-core/lib/components/SummaryItem/SummaryItem';
+import { StyledDialog } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';
+import { StyledFormDialog } from '@pega/cosmos-react-core/lib/components/Dialog/FormDialog';
 export const StyledTaskMain = styled.div ``;
 export const StyledTaskManagerTabsSummaryItem = styled.div ``;
 export const StyledHeader = styled(CardHeader) ``;
@@ -164,6 +166,10 @@ export const StyledTaskManager = styled.div(({ theme: { base: { shadow, spacing,
         box-shadow: ${shadow.low};
       `}
 
+      ${StyledDialog}${StyledFormDialog} ${StyledCardContent} {
+        padding-inline: 0;
+      }
+
       ${StyledStatus} {
         line-height: calc(${spacing} * 2);
         height: calc(${spacing} * 2);

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  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"]}
+{"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';\nimport { StyledDialog } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';\nimport { StyledFormDialog } from '@pega/cosmos-react-core/lib/components/Dialog/FormDialog';\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      ${StyledDialog}${StyledFormDialog} ${StyledCardContent} {\n        padding-inline: 0;\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/package.json

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