@pega/cosmos-react-cs 4.0.0-dev.9.1 → 4.0.0

package/lib/components/InteractionTimer/InteractionTimer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, Icon, Text, Progress, defaultThemeProp, StyledProgressRing } from '@pega/cosmos-react-core';
+import { Flex, Icon, Text, Progress, defaultThemeProp, StyledProgressRing, useConsolidatedRef } from '@pega/cosmos-react-core';
 export const StyledInteractionTimerIconWrapper = styled.span ``;
 export const StyledInteractionTimerIcon = styled.svg ``;
 export const StyledInteractionTimerMetaText = styled.span ``;
@@ -62,11 +62,29 @@ export const StyledInteractionTimer = styled.div(({ sla, hasNotifications, theme
     `;
 });
 StyledInteractionTimer.defaultProps = defaultThemeProp;
-const InteractionTimer = forwardRef(({ icon, progress = 0, hasNotifications = false, meta, sla, ariaLabel, ...restProps }, ref) => {
-    return (_jsxs(Flex, { ...restProps, ref: ref, container: {
+const InteractionTimer = forwardRef(function InteractionTimer({ icon, progress = 0, hasNotifications = false, meta, sla, ariaLabel, ...restProps }, ref) {
+    const [currentTimeLabel, setCurrentTimeLabel] = useState('');
+    const containerRef = useConsolidatedRef(ref);
+    const labelRef = useRef('');
+    useEffect(() => {
+        if (ariaLabel)
+            labelRef.current = ariaLabel;
+    }, [ariaLabel]);
+    useEffect(() => {
+        const onFocus = () => {
+            if (document.activeElement?.contains(containerRef.current) && labelRef.current) {
+                setCurrentTimeLabel(labelRef.current);
+            }
+        };
+        document.addEventListener('focusin', onFocus);
+        return () => {
+            document.removeEventListener('focusin', onFocus);
+        };
+    }, []);
+    return (_jsxs(Flex, { ...restProps, ref: containerRef, container: {
             direction: 'column',
             alignItems: 'center'
-        }, sla: sla, hasNotifications: hasNotifications, as: StyledInteractionTimer, "aria-label": ariaLabel, "aria-live": 'polite', role: 'timer', children: [_jsxs(StyledInteractionTimerIconWrapper, { children: [_jsx(Icon, { name: icon, as: StyledInteractionTimerIcon }), _jsx(Progress, { variant: 'ring', minValue: 0, maxValue: 100, value: progress, placement: 'inline', "aria-hidden": 'true' })] }), meta && (_jsx(Text, { variant: 'secondary', as: StyledInteractionTimerMetaText, "aria-hidden": 'true', children: meta }))] }));
+        }, sla: sla, hasNotifications: hasNotifications, as: StyledInteractionTimer, "aria-label": currentTimeLabel, role: 'timer', children: [_jsxs(StyledInteractionTimerIconWrapper, { children: [_jsx(Icon, { name: icon, as: StyledInteractionTimerIcon }), _jsx(Progress, { variant: 'ring', minValue: 0, maxValue: 100, value: progress, placement: 'inline', "aria-hidden": 'true' })] }), meta && (_jsx(Text, { variant: 'secondary', as: StyledInteractionTimerMetaText, "aria-hidden": 'true', children: meta }))] }));
 });
 export default InteractionTimer;
 //# sourceMappingURL=InteractionTimer.js.map

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

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

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

@@ -1,2 +1,3 @@
-export { default, InteractionTimerProps } from './InteractionTimer';
+export { default } from './InteractionTimer';
+export type { InteractionTimerProps } from './InteractionTimer';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InteractionTimer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAyB,MAAM,oBAAoB,CAAC","sourcesContent":["export { default, InteractionTimerProps } from './InteractionTimer';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InteractionTimer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { default } from './InteractionTimer';\nexport type { InteractionTimerProps } from './InteractionTimer';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAcL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAqF5F,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAiMxD,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/components/Picker/Picker.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Button, Flex, Icon, Menu, menuHelpers, EmptyState, SearchInput, Text, useI18n, Switch, useArrows, registerIcon, getFocusables, createStringMatcher, Grid } 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 { StyledSelectedItemsWrapper, StyledSummaryItem, StyledDragHandle, StyledPickerContent, StyledSelectedItems } from './Picker.styles';
+registerIcon(timesIcon, dragIcon, trashIcon);
+const SelectedItem = ({ previewRef, dragRef, onRemoveSelection, id, primary, secondary }) => {
+    const t = useI18n();
+    return (_jsx("li", { children: _jsx(StyledSummaryItem, { ...(previewRef && { ref: previewRef }), visual: dragRef ? (_jsx(StyledDragHandle, { ref: dragRef, children: _jsx(Icon, { name: 'drag' }) })) : undefined, primary: primary, secondary: secondary, actions: _jsx(Button, { variant: 'simple', icon: true, "aria-label": t('delete_noun', [primary]), label: t('delete'), onClick: () => onRemoveSelection?.(id), children: _jsx(Icon, { name: 'trash' }) }) }) }));
+};
+const selectedItemRenderer = ({ dragRef, previewRef, data, onRemoveSelection }) => (_jsx(SelectedItem, { dragRef: dragRef, previewRef: previewRef, onRemoveSelection: onRemoveSelection, ...data }));
+const DraggableSelectedList = ({ selectedItems, onChange, itemRenderer }) => {
+    return (_jsx(DragDropManager, { children: _jsx(DragDropList, { as: StyledSelectedItems, accept: 'picker-selection', items: selectedItems.map(item => ({
+                id: item.id,
+                type: 'picker-selection',
+                data: item
+            })), itemRenderer: itemRenderer, onChange: onChange }) }));
+};
+const Picker = forwardRef(function Picker({ items, multiSelect = false, onModeToggle, contextualLabel, reorderSelections = false, selections, onSelectionChange, handle }, ref) {
+    const t = useI18n();
+    const [searchInput, setSearchInput] = useState('');
+    const filterRegex = createStringMatcher(searchInput);
+    const searchEleRef = useRef(null);
+    const selectedItemsWrapperRef = useRef(null);
+    const switchRef = useRef(null);
+    useImperativeHandle(handle, () => ({
+        focusToggleSwitch: () => {
+            switchRef.current?.focus();
+        }
+    }));
+    const renderItems = useMemo(() => {
+        return menuHelpers.mapTree(searchInput
+            ? menuHelpers.flatten(items).filter(({ primary, items: childItems }) => {
+                return filterRegex.test(primary) && !childItems?.length;
+            })
+            : items, item => {
+            let selectable = false;
+            if (!item.items) {
+                selectable = true;
+            }
+            return {
+                ...item,
+                selected: selectable ? !!menuHelpers.getItem(selections, item.id) : undefined
+            };
+        });
+    }, [selections, searchInput, items, filterRegex]);
+    const removeSelectedItem = useCallback((uid) => {
+        const itemToRemove = menuHelpers.getItem(selections, uid);
+        onSelectionChange(selections.filter(item => item.id !== itemToRemove?.id));
+        // 0 second timeout added because DOM needs to be up to date after list is updated before running query
+        // setting the focus to the first element in the list on deletion and if empty then to search input
+        setTimeout(() => {
+            const focusable = getFocusables(selectedItemsWrapperRef);
+            if (focusable.length > 0)
+                focusable[0].focus();
+            else
+                searchEleRef.current?.focus();
+        }, 0);
+    }, [selections]);
+    useArrows(selectedItemsWrapperRef, {
+        selector: 'button',
+        dir: 'up-down'
+    }, [selections.length]);
+    const selectedItems = useMemo(() => {
+        return reorderSelections ? (_jsx(DraggableSelectedList, { selectedItems: selections, onChange: newItems => {
+                onSelectionChange(newItems.map(({ type, data }) => ({
+                    ...data,
+                    type
+                })));
+            }, itemRenderer: props => selectedItemRenderer({ ...props, onRemoveSelection: removeSelectedItem }) })) : (_jsx(StyledSelectedItems, { children: selections.map(({ id, primary, secondary }) => (_jsx(SelectedItem, { id: id, primary: primary, secondary: secondary, onRemoveSelection: removeSelectedItem }, id))) }));
+    }, [selections, reorderSelections, removeSelectedItem]);
+    const searchAndSwitch = (_jsxs(Flex, { container: { direction: 'column', gap: 1, pad: [0.5, 1] }, children: [_jsx(SearchInput, { ref: searchEleRef, value: searchInput, onSearchChange: setSearchInput, placeholder: t('search_picker_items', [contextualLabel]), autoFocus: true }), onModeToggle && (_jsx(Switch, { label: t('select_multiple'), on: multiSelect, onChange: onModeToggle, ref: switchRef }))] }));
+    const availableItems = (_jsx(Menu, { items: renderItems, role: 'listbox', onItemClick: (uid) => {
+            const clickedItem = menuHelpers.getItem(renderItems, uid);
+            const parentItem = clickedItem?.ancestors
+                ? clickedItem.ancestors[0]
+                : menuHelpers.getParentItem(renderItems, uid);
+            if (!clickedItem)
+                return;
+            if (multiSelect) {
+                searchEleRef.current?.focus();
+                if (selections.find(item => item.id === uid)) {
+                    onSelectionChange(selections.filter(item => item.id !== clickedItem?.id));
+                }
+                else {
+                    let secondary;
+                    if (parentItem)
+                        secondary = menuHelpers.isItem(parentItem) ? parentItem.primary : parentItem.label;
+                    onSelectionChange([
+                        ...selections,
+                        {
+                            ...clickedItem,
+                            secondary
+                        }
+                    ]);
+                }
+                setSearchInput('');
+            }
+            else {
+                onSelectionChange([clickedItem]);
+            }
+        }, focusControlEl: searchEleRef.current ?? undefined, emptyText: t('no_picker_items', [contextualLabel]), accent: filterRegex, mode: multiSelect ? 'multi-select' : 'action', arrowNavigationUnsupported: true, scrollAt: Infinity }));
+    return (_jsxs(Grid, { as: StyledPickerContent, ref: ref, container: { autoFlow: 'column', autoCols: 'minmax(0, 1fr)' }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [searchAndSwitch, availableItems] }), multiSelect && (_jsxs(Flex, { as: StyledSelectedItemsWrapper, container: { direction: 'column' }, ref: selectedItemsWrapperRef, children: [_jsx(Text, { variant: 'h3', children: t('selected_picker_items', [contextualLabel]) }), selections.length > 0 ? (selectedItems) : (_jsx(EmptyState, { message: t('no_selected_picker_items', [contextualLabel]) }))] }))] }));
+});
+export default Picker;
+//# sourceMappingURL=Picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  Menu,\n  menuHelpers,\n  EmptyState,\n  SearchInput,\n  Text,\n  useI18n,\n  Switch,\n  useArrows,\n  registerIcon,\n  getFocusables,\n  ForwardProps,\n  createStringMatcher,\n  Grid\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';\nimport {\n  StyledSelectedItemsWrapper,\n  StyledSummaryItem,\n  StyledDragHandle,\n  StyledPickerContent,\n  StyledSelectedItems\n} from './Picker.styles';\n\nregisterIcon(timesIcon, dragIcon, trashIcon);\n\nconst SelectedItem = ({\n  previewRef,\n  dragRef,\n  onRemoveSelection,\n  id,\n  primary,\n  secondary\n}: SelectedItemProps) => {\n  const t = useI18n();\n  return (\n    <li>\n      <StyledSummaryItem\n        {...(previewRef && { ref: previewRef })}\n        visual={\n          dragRef ? (\n            <StyledDragHandle ref={dragRef}>\n              <Icon name='drag' />\n            </StyledDragHandle>\n          ) : undefined\n        }\n        primary={primary}\n        secondary={secondary}\n        actions={\n          <Button\n            variant='simple'\n            icon\n            aria-label={t('delete_noun', [primary])}\n            label={t('delete')}\n            onClick={() => onRemoveSelection?.(id)}\n          >\n            <Icon name='trash' />\n          </Button>\n        }\n      />\n    </li>\n  );\n};\n\nconst selectedItemRenderer = ({\n  dragRef,\n  previewRef,\n  data,\n  onRemoveSelection\n}: ItemRendererProps<MenuItemProps> & Pick<SelectedItemProps, 'onRemoveSelection'>) => (\n  <SelectedItem\n    dragRef={dragRef}\n    previewRef={previewRef}\n    onRemoveSelection={onRemoveSelection}\n    {...data}\n  />\n);\n\nconst DraggableSelectedList = ({\n  selectedItems,\n  onChange,\n  itemRenderer\n}: DraggableSelectedListProps) => {\n  return (\n    <DragDropManager>\n      <DragDropList\n        as={StyledSelectedItems}\n        accept='picker-selection'\n        items={selectedItems.map(item => ({\n          id: item.id,\n          type: 'picker-selection',\n          data: item\n        }))}\n        itemRenderer={itemRenderer}\n        onChange={onChange}\n      />\n    </DragDropManager>\n  );\n};\n\nconst Picker: FunctionComponent<PickerProps & ForwardProps> = forwardRef(function Picker(\n  {\n    items,\n    multiSelect = false,\n    onModeToggle,\n    contextualLabel,\n    reorderSelections = false,\n    selections,\n    onSelectionChange,\n    handle\n  }: PropsWithoutRef<PickerProps>,\n  ref: PickerProps['ref']\n) {\n  const t = useI18n();\n  const [searchInput, setSearchInput] = useState('');\n  const filterRegex = createStringMatcher(searchInput);\n  const searchEleRef = useRef<HTMLInputElement>(null);\n  const selectedItemsWrapperRef = useRef<HTMLDivElement>(null);\n  const switchRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(handle, () => ({\n    focusToggleSwitch: () => {\n      switchRef.current?.focus();\n    }\n  }));\n\n  const renderItems = useMemo(() => {\n    return menuHelpers.mapTree(\n      searchInput\n        ? menuHelpers.flatten(items).filter(({ primary, items: childItems }: MenuItemProps) => {\n            return filterRegex.test(primary) && !childItems?.length;\n          })\n        : items,\n      item => {\n        let selectable = false;\n\n        if (!item.items) {\n          selectable = true;\n        }\n\n        return {\n          ...item,\n          selected: selectable ? !!menuHelpers.getItem(selections, item.id) : undefined\n        };\n      }\n    );\n  }, [selections, searchInput, items, filterRegex]);\n\n  const removeSelectedItem = useCallback(\n    (uid: string) => {\n      const itemToRemove = menuHelpers.getItem(selections, uid);\n      onSelectionChange(selections.filter(item => item.id !== itemToRemove?.id));\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(selectedItemsWrapperRef);\n        if (focusable.length > 0) focusable[0].focus();\n        else searchEleRef.current?.focus();\n      }, 0);\n    },\n    [selections]\n  );\n\n  useArrows(\n    selectedItemsWrapperRef,\n    {\n      selector: 'button',\n      dir: 'up-down'\n    },\n    [selections.length]\n  );\n\n  const selectedItems = useMemo(() => {\n    return reorderSelections ? (\n      <DraggableSelectedList\n        selectedItems={selections}\n        onChange={newItems => {\n          onSelectionChange(\n            newItems.map(({ type, data }) => ({\n              ...data,\n              type\n            })) as MenuItemProps[]\n          );\n        }}\n        itemRenderer={props =>\n          selectedItemRenderer({ ...props, onRemoveSelection: removeSelectedItem })\n        }\n      />\n    ) : (\n      <StyledSelectedItems>\n        {selections.map(({ id, primary, secondary }) => (\n          <SelectedItem\n            key={id}\n            id={id}\n            primary={primary}\n            secondary={secondary}\n            onRemoveSelection={removeSelectedItem}\n          />\n        ))}\n      </StyledSelectedItems>\n    );\n  }, [selections, reorderSelections, removeSelectedItem]);\n\n  const searchAndSwitch = (\n    <Flex container={{ direction: 'column', gap: 1, pad: [0.5, 1] }}>\n      <SearchInput\n        ref={searchEleRef}\n        value={searchInput}\n        onSearchChange={setSearchInput}\n        placeholder={t('search_picker_items', [contextualLabel])}\n        autoFocus\n      />\n      {onModeToggle && (\n        <Switch\n          label={t('select_multiple')}\n          on={multiSelect}\n          onChange={onModeToggle}\n          ref={switchRef}\n        />\n      )}\n    </Flex>\n  );\n\n  const availableItems = (\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) return;\n        if (multiSelect) {\n          searchEleRef.current?.focus();\n\n          if (selections.find(item => item.id === uid)) {\n            onSelectionChange(selections.filter(item => item.id !== clickedItem?.id));\n          } else {\n            let secondary;\n            if (parentItem)\n              secondary = menuHelpers.isItem(parentItem) ? parentItem.primary : parentItem.label;\n\n            onSelectionChange([\n              ...selections,\n              {\n                ...clickedItem,\n                secondary\n              } as MenuItemProps\n            ]);\n          }\n          setSearchInput('');\n        } else {\n          onSelectionChange([clickedItem]);\n        }\n      }}\n      focusControlEl={searchEleRef.current ?? undefined}\n      emptyText={t('no_picker_items', [contextualLabel])}\n      accent={filterRegex}\n      mode={multiSelect ? 'multi-select' : 'action'}\n      arrowNavigationUnsupported\n      scrollAt={Infinity}\n    />\n  );\n\n  return (\n    <Grid\n      as={StyledPickerContent}\n      ref={ref}\n      container={{ autoFlow: 'column', autoCols: 'minmax(0, 1fr)' }}\n    >\n      <Flex container={{ direction: 'column', gap: 1 }}>\n        {searchAndSwitch}\n        {availableItems}\n      </Flex>\n      {multiSelect && (\n        <Flex\n          as={StyledSelectedItemsWrapper}\n          container={{ direction: 'column' }}\n          ref={selectedItemsWrapperRef}\n        >\n          <Text variant='h3'>{t('selected_picker_items', [contextualLabel])}</Text>\n\n          {selections.length > 0 ? (\n            selectedItems\n          ) : (\n            <EmptyState message={t('no_selected_picker_items', [contextualLabel])} />\n          )}\n        </Flex>\n      )}\n    </Grid>\n  );\n});\n\nexport default Picker;\n"]}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const StyledSelectedItemsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDragHandle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSummaryItem: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").SummaryItemProps & import("@pega/cosmos-react-core").ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSelectedItems: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCount: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").ForwardProps & import("@pega/cosmos-react-core").CountProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPickerContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Picker.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Picker/Picker.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,0BAA0B,yGAetC,CAAC;AAIF,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;uDAmB7B,CAAC;AAIF,eAAO,MAAM,mBAAmB,wGAW/B,CAAC;AAIF,eAAO,MAAM,WAAW,qNAUvB,CAAC;AAIF,eAAO,MAAM,mBAAmB,yGAS/B,CAAC"}

package/lib/components/Picker/Picker.styles.js

@@ -0,0 +1,59 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, SummaryItem, Count, StyledFlex } from '@pega/cosmos-react-core';
+import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
+import { StyledModalContent } from '@pega/cosmos-react-core/lib/components/Modal/Modal.styles';
+export const StyledSelectedItemsWrapper = styled.div(({ theme: { base: { spacing, palette } } }) => {
+    return css `
+      width: 17.5rem;
+      padding: ${spacing} 0 0 ${spacing};
+      border-inline-start: 0.0625rem solid ${palette['border-line']};
+      > h3 {
+        padding: 0 0 ${spacing} ${spacing};
+      }
+    `;
+});
+StyledSelectedItemsWrapper.defaultProps = defaultThemeProp;
+export const StyledDragHandle = styled.div `
+  cursor: move;
+  > svg {
+    display: block;
+  }
+`;
+export const StyledSummaryItem = styled(SummaryItem)(({ theme: { base: { spacing, palette } }, visual }) => {
+    return css `
+      padding: ${spacing} 0;
+      ${!visual &&
+        css `
+        padding-inline-start: ${spacing};
+      `}
+
+      &:not(:last-child) {
+        border-bottom: 0.0625rem solid ${palette['border-line']};
+      }
+    `;
+});
+StyledSummaryItem.defaultProps = defaultThemeProp;
+export const StyledSelectedItems = styled.ul(({ theme: { base: { spacing } } }) => {
+    return css `
+      padding-inline-end: calc(0.25 * ${spacing});
+      overflow-y: auto;
+    `;
+});
+StyledSelectedItems.defaultProps = defaultThemeProp;
+export const StyledCount = styled(Count)(({ theme: { base: { spacing } } }) => {
+    return css `
+      margin-inline-start: calc(0.5 * ${spacing});
+    `;
+});
+StyledCount.defaultProps = defaultThemeProp;
+export const StyledPickerContent = styled.div `
+  &,
+  & > ${StyledFlex}, ${StyledMenu} {
+    overflow: auto;
+  }
+
+  ${StyledModalContent} & > ${StyledFlex} {
+    max-height: 50vh;
+  }
+`;
+//# sourceMappingURL=Picker.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.styles.js","sourceRoot":"","sources":["../../../src/components/Picker/Picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAC;AAE/F,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAClD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;iBAEG,OAAO,QAAQ,OAAO;6CACM,OAAO,CAAC,aAAa,CAAC;;uBAE5C,OAAO,IAAI,OAAO;;KAEpC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKzC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAClD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,EACD,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;iBACG,OAAO;QAChB,CAAC,MAAM;QACT,GAAG,CAAA;gCACuB,OAAO;OAChC;;;yCAGkC,OAAO,CAAC,aAAa,CAAC;;KAE1D,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wCAC0B,OAAO;;KAE1C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CACtC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wCAC0B,OAAO;KAC1C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;QAErC,UAAU,KAAK,UAAU;;;;IAI7B,kBAAkB,QAAQ,UAAU;;;CAGvC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, SummaryItem, Count, StyledFlex } from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport { StyledModalContent } from '@pega/cosmos-react-core/lib/components/Modal/Modal.styles';\n\nexport const StyledSelectedItemsWrapper = styled.div(\n  ({\n    theme: {\n      base: { spacing, palette }\n    }\n  }) => {\n    return css`\n      width: 17.5rem;\n      padding: ${spacing} 0 0 ${spacing};\n      border-inline-start: 0.0625rem solid ${palette['border-line']};\n      > h3 {\n        padding: 0 0 ${spacing} ${spacing};\n      }\n    `;\n  }\n);\n\nStyledSelectedItemsWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDragHandle = styled.div`\n  cursor: move;\n  > svg {\n    display: block;\n  }\n`;\n\nexport const StyledSummaryItem = styled(SummaryItem)(\n  ({\n    theme: {\n      base: { spacing, palette }\n    },\n    visual\n  }) => {\n    return css`\n      padding: ${spacing} 0;\n      ${!visual &&\n      css`\n        padding-inline-start: ${spacing};\n      `}\n\n      &:not(:last-child) {\n        border-bottom: 0.0625rem solid ${palette['border-line']};\n      }\n    `;\n  }\n);\n\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledSelectedItems = styled.ul(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      padding-inline-end: calc(0.25 * ${spacing});\n      overflow-y: auto;\n    `;\n  }\n);\n\nStyledSelectedItems.defaultProps = defaultThemeProp;\n\nexport const StyledCount = styled(Count)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      margin-inline-start: calc(0.5 * ${spacing});\n    `;\n  }\n);\n\nStyledCount.defaultProps = defaultThemeProp;\n\nexport const StyledPickerContent = styled.div`\n  &,\n  & > ${StyledFlex}, ${StyledMenu} {\n    overflow: auto;\n  }\n\n  ${StyledModalContent} & > ${StyledFlex} {\n    max-height: 50vh;\n  }\n`;\n"]}

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

@@ -0,0 +1,35 @@
+import { ComponentType, Ref, RefCallback } from 'react';
+import { MenuItemProps, MenuProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
+import { DraggableItem, ItemRendererProps } from '@pega/cosmos-react-dnd';
+export interface SwitchHandleValue {
+    focusToggleSwitch: () => void;
+}
+export interface PickerProps extends Pick<MenuProps, 'items'> {
+    /** contextual label for picker */
+    contextualLabel: string;
+    /** Enables single selection or multi selection view */
+    multiSelect?: boolean;
+    /** Enables drag and drop */
+    reorderSelections?: boolean;
+    /** Handles toggle changes */
+    onModeToggle?: () => void;
+    /** Holds selected items */
+    selections: MenuItemProps[];
+    /** callback for selection change */
+    onSelectionChange: (selections: MenuItemProps[]) => void;
+    /** Ref that can be used to access the imperative handle. */
+    handle?: Ref<SwitchHandleValue>;
+    /** ref for controlling toggle */
+    ref?: Ref<HTMLDivElement>;
+}
+export interface DraggableSelectedListProps {
+    selectedItems: MenuItemProps[];
+    onChange: (items: DraggableItem<MenuItemProps>[]) => void;
+    itemRenderer: ComponentType<ItemRendererProps<MenuItemProps>>;
+}
+export interface SelectedItemProps extends Pick<MenuItemProps, 'id' | 'primary' | 'secondary'> {
+    onRemoveSelection: (id: MenuItemProps['id']) => void;
+    dragRef?: RefCallback<HTMLElement>;
+    previewRef?: RefCallback<HTMLElement>;
+}
+//# sourceMappingURL=Picker.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.types.d.ts","sourceRoot":"","sources":["../../../src/components/Picker/Picker.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAC;AAClG,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE1E,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC3D,kCAAkC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2BAA2B;IAC3B,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,oCAAoC;IACpC,iBAAiB,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACzD,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChC,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,0BAA0B;IACzC,aAAa,EAAE,aAAa,EAAE,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1D,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,CAAC;CAC/D;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;IAC5F,iBAAiB,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CACvC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.types.js","sourceRoot":"","sources":["../../../src/components/Picker/Picker.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, Ref, RefCallback } from 'react';\n\nimport { MenuItemProps, MenuProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport { DraggableItem, ItemRendererProps } from '@pega/cosmos-react-dnd';\n\nexport interface SwitchHandleValue {\n  focusToggleSwitch: () => void;\n}\n\nexport interface PickerProps extends Pick<MenuProps, 'items'> {\n  /** contextual label for picker */\n  contextualLabel: string;\n  /** Enables single selection or multi selection view */\n  multiSelect?: boolean;\n  /** Enables drag and drop */\n  reorderSelections?: boolean;\n  /** Handles toggle changes */\n  onModeToggle?: () => void;\n  /** Holds selected items */\n  selections: MenuItemProps[];\n  /** callback for selection change */\n  onSelectionChange: (selections: MenuItemProps[]) => void;\n  /** Ref that can be used to access the imperative handle. */\n  handle?: Ref<SwitchHandleValue>;\n  /** ref for controlling toggle */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface DraggableSelectedListProps {\n  selectedItems: MenuItemProps[];\n  onChange: (items: DraggableItem<MenuItemProps>[]) => void;\n  itemRenderer: ComponentType<ItemRendererProps<MenuItemProps>>;\n}\n\nexport interface SelectedItemProps extends Pick<MenuItemProps, 'id' | 'primary' | 'secondary'> {\n  onRemoveSelection: (id: MenuItemProps['id']) => void;\n  dragRef?: RefCallback<HTMLElement>;\n  previewRef?: RefCallback<HTMLElement>;\n}\n"]}

package/lib/components/Picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Picker';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/lib/components/Picker/index.js

@@ -0,0 +1,2 @@
+export { default } from './Picker';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default } from './Picker';\n"]}

package/lib/components/TaskManager/ConversationAI.js

@@ -4,7 +4,7 @@ import { Flex, Button, useOuterEvent, useEscape, Icon, Text, EmptyState, useI18n
 import * as aiAssistIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/ai-assist.icon';
 import { StyledCountBadge, StyledEntityPopover, StyledContent, StyledHeader } from './TaskManager.styles';
 registerIcon(aiAssistIcon);
-const ConversationAI = forwardRef(({ content, entityCount }, ref) => {
+const ConversationAI = forwardRef(function ConversationAI({ content, entityCount }, ref) {
     const t = useI18n();
     const [showPopover, setShowPopover] = useState(false);
     const buttonRef = useRef(null);

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

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

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

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

package/lib/components/TaskManager/Dialogue.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, useMemo, useImperativeHandle, useRef } from 'react';
 import { Flex, useTheme, Icon } from '@pega/cosmos-react-core';
 import { StyledTaskManagerBanner, StyledAgentScriptIcon, StyledIconWrap, StyledSymbol } from './TaskManager.styles';
-const Dialogue = forwardRef(({ icon, verbatimStatus, content, handle, ...restProps }, ref) => {
+const Dialogue = forwardRef(function Dialogue({ icon, verbatimStatus, content, handle, ...restProps }, ref) {
     const nudgeSymbolRef = useRef(null);
     const { base: { animation: { timing } } } = useTheme();
     useImperativeHandle(handle, () => ({

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

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

package/lib/components/TaskManager/TaskManager.js

@@ -1,53 +1,62 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect } from 'react';
-import { Flex, Icon, registerIcon, Text, Status, useI18n, useConsolidatedRef, useElement, Button, Grid, SummaryItem } from '@pega/cosmos-react-core';
+import { forwardRef, useRef, useMemo, useState } from 'react';
+import { Flex, Icon, registerIcon, Text, Status, useI18n, Button, Grid, SummaryItem, useUID, useShortcut, registerAction } 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, StyledTaskMain } from './TaskManager.styles';
 import TaskManagerContext from './TaskManager.context';
 import TaskManagerTabs from './TaskManagerTabs';
 import TaskView from './TaskView';
-import Picker from './Picker/Picker';
 import Dialogue from './Dialogue';
 import ConversationAI from './ConversationAI';
+import TaskPicker from './TaskPicker';
 registerIcon(plusIcon, flagFinishIcon);
-const TaskManager = forwardRef((props, ref) => {
+registerAction({
+    id: 'AddTask',
+    defaultKeyBinding: 'Alt+A'
+}, {
+    id: 'WrapUp',
+    defaultKeyBinding: 'Alt+W'
+});
+const TaskManager = forwardRef(function TaskManager(props, ref) {
     const { tasks = [], onTaskLaunch, onTaskDismiss, addTask, wrapUp, main, banner, handle, conversationAI, ...restProps } = props;
     const t = useI18n();
-    const TaskManagerTabsRef = useRef(null);
-    const consolidatedRef = useConsolidatedRef(ref);
+    const taskManagerTabsRef = useRef(null);
     const hasActiveTask = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;
-    const [addTaskEl, setAddTaskEl] = useElement(null);
-    useEffect(() => {
-        if (TaskManagerTabsRef.current && consolidatedRef.current) {
-            consolidatedRef.current.style.minHeight = `${TaskManagerTabsRef.current.scrollHeight}px`;
-        }
-        else if (consolidatedRef.current) {
-            consolidatedRef.current.style.minHeight = '0';
+    const headingId = useUID();
+    const wrapUpTabId = useUID();
+    const wrapUpTabPanelId = useUID();
+    const addTaskButtonRef = useRef(null);
+    const [showPicker, setShowPicker] = useState(false);
+    const ctx = useMemo(() => ({
+        addTask,
+        wrapUp,
+        tasks,
+        onTaskLaunch
+    }), [addTask, wrapUp, tasks, onTaskLaunch]);
+    useShortcut('AddTask', () => {
+        if (addTask) {
+            setShowPicker(true);
         }
-    }, [tasks, addTask]);
-    return (_jsx(TaskManagerContext.Provider, { value: {
-            addTask,
-            wrapUp,
-            tasks,
-            onTaskLaunch
-        }, children: _jsxs(StyledTaskManager, { ...restProps, ref: consolidatedRef, hasDrawer: hasActiveTask, hasTasks: !!tasks.length, 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: {
+    });
+    useShortcut('WrapUp', () => {
+        if (wrapUp && !wrapUp.disable)
+            wrapUp.onClick();
+    });
+    return (_jsx(TaskManagerContext.Provider, { value: ctx, children: _jsxs(StyledTaskManager, { ...restProps, ref: ref, hasDrawer: hasActiveTask, hasTasks: !!tasks.length, children: [banner && (_jsx(Dialogue, { icon: banner.icon, content: banner.content, verbatimStatus: banner.verbatimStatus, handle: handle })), _jsxs(TaskView, { header: _jsx(Text, { variant: 'h2', id: headingId, children: t('task_manager_cases') }), actions: _jsxs(Flex, { container: {
                             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);
+                        }, children: [conversationAI && (_jsx(ConversationAI, { content: conversationAI.content, entityCount: conversationAI.entityCount })), _jsxs(Flex, { container: true, children: [wrapUp && (_jsxs(Button, { variant: 'secondary', disabled: wrapUp.disable, onClick: () => wrapUp.onClick(), children: [_jsx(Icon, { name: 'flag-finish' }), _jsx("span", { children: t('task_manager_wrap_up') })] })), addTask && (_jsxs(_Fragment, { children: [_jsxs(Button, { ref: addTaskButtonRef, variant: 'primary', onClick: () => setShowPicker(prev => !prev), children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: t('task_manager_add_case') })] }), showPicker && addTaskButtonRef.current && (_jsx(TaskPicker, { target: addTaskButtonRef.current, items: addTask.items, onAdd: (selectedItems) => {
+                                                    addTask.onAdd(selectedItems);
+                                                    setShowPicker(false);
                                                 }, onCancel: () => {
-                                                    setAddTaskEl(null);
-                                                }, ref: addTask.ref, placeholder: t('search_tasks') }))] }))] })] }), children: [hasActiveTask && _jsx(TaskManagerTabs, { ref: TaskManagerTabsRef }), hasActiveTask && _jsx(StyledTaskMain, { children: main }), !hasActiveTask && (_jsx(Grid, { as: 'ul', container: true, children: tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {
+                                                    setShowPicker(false);
+                                                    addTaskButtonRef.current?.focus();
+                                                }, ref: addTask.ref }))] }))] })] }), children: [hasActiveTask && (_jsx(TaskManagerTabs, { ref: taskManagerTabsRef, "aria-labelledby": headingId, wrapUpTabId: wrapUpTabId, wrapUpTabPanelId: wrapUpTabPanelId })), hasActiveTask && (_jsxs(_Fragment, { children: [tasks
+                                    .filter(task => !task.hideFromTab)
+                                    .map(({ id, active }) => {
+                                    return (_jsx(StyledTaskMain, { id: `tab-panel-${id}`, role: 'tabpanel', "aria-labelledby": `tab-${id}`, current: !!active, children: active ? main : null }, id));
+                                }), wrapUp?.showTab && (_jsx(StyledTaskMain, { id: wrapUpTabPanelId, role: 'tabpanel', "aria-labelledby": wrapUpTabId, current: !!wrapUp.active, children: wrapUp.active ? main : null }))] })), !hasActiveTask && (_jsx(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: () => {