@pega/cosmos-react-cs 4.0.0-dev.15.2 → 4.0.0-dev.15.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/InteractionNotification/CountdownButton.d.ts.map +1 -1
- package/lib/components/InteractionNotification/CountdownButton.js +3 -3
- package/lib/components/InteractionNotification/CountdownButton.js.map +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.d.ts.map +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.js +4 -3
- package/lib/components/InteractionNotification/InteractionNotification.js.map +1 -1
- package/lib/components/TaskManager/TaskManager.js +1 -1
- package/lib/components/TaskManager/TaskManager.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"CountdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AAG3F,OAAO,EAOL,WAAW,EACX,YAAY,EACb,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAUD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqD3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { forwardRef, useEffect, useState } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { useI18n, Text, VisuallyHiddenText, useUID, Button, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
5
5
|
import { formatDuration } from '../CallControlPanel/utils';
|
|
@@ -7,7 +7,7 @@ const StyledAcceptButton = styled(Button)(({ theme }) => css `
|
|
|
7
7
|
gap: ${theme.base.spacing};
|
|
8
8
|
`);
|
|
9
9
|
StyledAcceptButton.defaultProps = defaultThemeProp;
|
|
10
|
-
const CountdownButton =
|
|
10
|
+
const CountdownButton = forwardRef(({ startTime, timeout, onTimerEnd, children, ...restProps }, ref) => {
|
|
11
11
|
const timeoutMs = timeout * 1000;
|
|
12
12
|
const start = Number(startTime);
|
|
13
13
|
const endTime = start + timeoutMs;
|
|
@@ -32,7 +32,7 @@ const CountdownButton = memo(({ startTime, timeout, onTimerEnd, children, ...res
|
|
|
32
32
|
// The proper definition will be captured and used with any changes to msRemaining.
|
|
33
33
|
[msRemaining]);
|
|
34
34
|
const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';
|
|
35
|
-
return (_jsxs(_Fragment, { children: [_jsxs(StyledAcceptButton, { ...restProps, "aria-describedby": descriptionId, children: [children, _jsx(Text, { "aria-hidden": 'true', children: timer })] }), _jsx(VisuallyHiddenText, { "aria-hidden": 'true', id: descriptionId, children: msRemaining > 0
|
|
35
|
+
return (_jsxs(_Fragment, { children: [_jsxs(StyledAcceptButton, { ...restProps, "aria-describedby": descriptionId, ref: ref, children: [children, _jsx(Text, { "aria-hidden": 'true', children: timer })] }), _jsx(VisuallyHiddenText, { "aria-hidden": 'true', id: descriptionId, children: msRemaining > 0
|
|
36
36
|
? t('interaction_time_remaining', [secondsRemaining], {
|
|
37
37
|
count: secondsRemaining
|
|
38
38
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountdownButton.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"CountdownButton.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAqC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,OAAO,EACP,IAAI,EACJ,kBAAkB,EAClB,MAAM,EACN,MAAM,EACN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAa3D,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;WACT,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1B,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,eAAe,GAA2D,UAAU,CACxF,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAuC,EAC/F,GAA2B,EAC3B,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;IACjC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAE3E,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAExD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,SAAS,CACP,GAAG,EAAE;QACH,IAAI,SAAiB,CAAC;QAEtB,IAAI,WAAW,GAAG,CAAC,EAAE;YACnB,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACjC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YACvC,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;aAAM;YACL,UAAU,EAAE,EAAE,CAAC;SAChB;QAED,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC;IACD,uDAAuD;IACvD,4FAA4F;IAC5F,mFAAmF;IACnF,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAErE,OAAO,CACL,8BACE,MAAC,kBAAkB,OAAK,SAAS,sBAAoB,aAAa,EAAE,GAAG,EAAE,GAAG,aACzE,QAAQ,EACT,KAAC,IAAI,mBAAa,MAAM,YAAE,KAAK,GAAQ,IACpB,EACrB,KAAC,kBAAkB,mBAAa,MAAM,EAAC,EAAE,EAAE,aAAa,YACrD,WAAW,GAAG,CAAC;oBACd,CAAC,CAAC,CAAC,CAAC,4BAA4B,EAAE,CAAC,gBAAgB,CAAC,EAAE;wBAClD,KAAK,EAAE,gBAAgB;qBACxB,CAAC;oBACJ,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,GACd,IACpB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useI18n,\n Text,\n VisuallyHiddenText,\n useUID,\n Button,\n defaultThemeProp,\n ButtonProps,\n ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport { formatDuration } from '../CallControlPanel/utils';\n\nexport interface CountdownButtonProps extends ButtonProps {\n /** Text or content for the Button. */\n children: ReactNode;\n /** Start time of incoming Interaction. */\n startTime: Date | number;\n /** The time the user has to accept the call in seconds. */\n timeout: number;\n /** Callback invoked when timeout ends. */\n onTimerEnd?: () => void;\n}\n\nconst StyledAcceptButton = styled(Button)(\n ({ theme }) => css`\n gap: ${theme.base.spacing};\n `\n);\n\nStyledAcceptButton.defaultProps = defaultThemeProp;\n\nconst CountdownButton: FunctionComponent<CountdownButtonProps & ForwardProps> = forwardRef(\n (\n { startTime, timeout, onTimerEnd, children, ...restProps }: CountdownButtonProps & ForwardProps,\n ref: Ref<HTMLButtonElement>\n ) => {\n const timeoutMs = timeout * 1000;\n const start = Number(startTime);\n const endTime = start + timeoutMs;\n const [msRemaining, setMsRemaining] = useState(() => endTime - Date.now());\n\n const secondsRemaining = Math.round(msRemaining / 1000);\n\n const t = useI18n();\n const descriptionId = useUID();\n\n useEffect(\n () => {\n let timeoutId: number;\n\n if (msRemaining > 0) {\n timeoutId = window.setTimeout(() => {\n setMsRemaining(endTime - Date.now());\n }, 1000);\n } else {\n onTimerEnd?.();\n }\n\n return () => clearTimeout(timeoutId);\n },\n // Omitting onTimerEnd as an effect trigger on purpose.\n // An unstable function definition in the prop causes the effect to run more than necessary.\n // The proper definition will be captured and used with any changes to msRemaining.\n [msRemaining]\n );\n\n const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';\n\n return (\n <>\n <StyledAcceptButton {...restProps} aria-describedby={descriptionId} ref={ref}>\n {children}\n <Text aria-hidden='true'>{timer}</Text>\n </StyledAcceptButton>\n <VisuallyHiddenText aria-hidden='true' id={descriptionId}>\n {msRemaining > 0\n ? t('interaction_time_remaining', [secondsRemaining], {\n count: secondsRemaining\n })\n : t('interaction_time_expired')}\n </VisuallyHiddenText>\n </>\n );\n }\n);\n\nexport default CountdownButton;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAqB,MAAM,OAAO,CAAC;AAG/F,OAAO,EAOL,WAAW,EACX,YAAY,EAQZ,mBAAmB,EAEnB,cAAc,
|
|
1
|
+
{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAqB,MAAM,OAAO,CAAC;AAG/F,OAAO,EAOL,WAAW,EACX,YAAY,EAQZ,mBAAmB,EAEnB,cAAc,EAQf,MAAM,yBAAyB,CAAC;AAMjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,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,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAC7C,aAAa,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;KACjD,CAAC;IACF,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAgGD,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CA2GzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useEffect, useRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldValueList, StyledButton, useI18n, useDirection, Icon, StyledLabel, useLiveLog, registerAction, useShortcut,
|
|
4
|
+
import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldValueList, StyledButton, useI18n, useDirection, Icon, StyledLabel, useLiveLog, registerAction, useShortcut, useConsolidatedRef, useEscape } from '@pega/cosmos-react-core';
|
|
5
5
|
import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
|
|
6
6
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
7
7
|
import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
|
|
@@ -100,10 +100,11 @@ const InteractionNotification = forwardRef(({ icon, title, primaryText, secondar
|
|
|
100
100
|
const { announceAssertive } = useLiveLog();
|
|
101
101
|
const containerRef = useConsolidatedRef(ref);
|
|
102
102
|
const returnRef = useRef();
|
|
103
|
+
const acceptButtonRef = useRef(null);
|
|
103
104
|
const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {
|
|
104
105
|
if (containerRef.current) {
|
|
105
106
|
returnRef.current = document.activeElement ?? undefined;
|
|
106
|
-
|
|
107
|
+
acceptButtonRef.current?.focus();
|
|
107
108
|
}
|
|
108
109
|
});
|
|
109
110
|
const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {
|
|
@@ -121,7 +122,7 @@ const InteractionNotification = forwardRef(({ icon, title, primaryText, secondar
|
|
|
121
122
|
type: 'alert'
|
|
122
123
|
});
|
|
123
124
|
}, []);
|
|
124
|
-
const acceptButton = incomingNotificationTimeout ? (_jsx(CountdownButton, { variant: 'primary', onClick: onAccept, startTime: incomingNotificationTimeout.startTime, timeout: incomingNotificationTimeout.answerTimeout, onTimerEnd: incomingNotificationTimeout.onTimerEnd ?? onDecline, children: t('accept') })) : (_jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') }));
|
|
125
|
+
const acceptButton = incomingNotificationTimeout ? (_jsx(CountdownButton, { variant: 'primary', onClick: onAccept, startTime: incomingNotificationTimeout.startTime, timeout: incomingNotificationTimeout.answerTimeout, onTimerEnd: incomingNotificationTimeout.onTimerEnd ?? onDecline, ref: acceptButtonRef, children: t('accept') })) : (_jsx(Button, { variant: 'primary', onClick: onAccept, ref: acceptButtonRef, children: t('accept') }));
|
|
125
126
|
return (_jsxs(StyledInteractionNotification, { ref: containerRef, "data-app-region": true, children: [_jsx(CardHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', children: title })] }) }), _jsxs(CardContent, { container: { gap: 2 }, 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(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 }))] }));
|
|
126
127
|
});
|
|
127
128
|
export default InteractionNotification;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,MAAM,EACN,IAAI,EAGJ,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,oBAAoB,EACpB,YAAY,EACZ,OAAO,EAEP,YAAY,EAEZ,IAAI,EACJ,WAAW,EACX,UAAU,EACV,cAAc,EACd,WAAW,EACX,uBAAuB,EACvB,kBAAkB,EAClB,SAAS,EACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AAExF,OAAO,eAAyC,MAAM,mBAAmB,CAAC;AA6B1E,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACzE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;kCAEsB,IAAI,CAAC,OAAO;iCACb,IAAI,CAAC,OAAO;oCACT,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;eAE7C,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;aACvB,IAAI,CAAC,MAAM,CAAC,KAAK;kCACI,IAAI,CAAC,SAAS,CAAC,KAAK;2BAC3B,IAAI,CAAC,OAAO;;;0BAGb,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC;;;;;UAK/C,GAAG;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;;;;;;;;MAQP,gBAAgB;QACd,YAAY;wCACoB,IAAI,CAAC,OAAO;;;;MAI9C,iBAAiB;yBACE,IAAI,CAAC,OAAO;;;QAG7B,UAAU;iBACD,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;;;;MAS5B,oBAAoB;oCACU,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;8BAC7B,IAAI,CAAC,OAAO;eAC3B,IAAI,CAAC,MAAM,CAAC,KAAK;;QAExB,WAAW;iBACF,IAAI,CAAC,MAAM,CAAC,KAAK;;;;8BAIJ,IAAI,CAAC,WAAW,CAAC,EAAE;oCACb,IAAI,CAAC,OAAO;;;;MAI1C,gBAAgB;QACd,cAAc;wBACE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;;;;2BAIpB,IAAI,CAAC,OAAO;;;;GAIpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,cAAc,CACZ;IACE,EAAE,EAAE,yBAAyB;IAC7B,iBAAiB,EAAE,WAAW;CAC/B,EACD;IACE,EAAE,EAAE,4BAA4B;IAChC,iBAAiB,EAAE,OAAO;CAC3B,CACF,CAAC;AAEF,MAAM,uBAAuB,GAC3B,UAAU,CACR,CACE,EACE,IAAI,EACJ,KAAK,EACL,WAAW,EACX,aAAa,EACb,MAAM,EACN,MAAM,EACN,2BAA2B,EAC3B,QAAQ,EACR,SAAS,EACqC,EAChD,GAAwC,EACxC,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC3C,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,EAAe,CAAC;IAExC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC,yBAAyB,EAAE,GAAG,EAAE;QAC3E,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,SAAS,CAAC,OAAO,GAAI,QAAQ,CAAC,aAA6B,IAAI,SAAS,CAAC;YACzE,uBAAuB,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;SACtD;IACH,CAAC,CAAC,CAAC;IACH,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,WAAW,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACjF,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,SAAS,CACP,GAAG,EAAE;QACH,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC3B,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,EACD,YAAY,CAAC,OAAO,EACpB,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC;YAChB,OAAO,EAAE,GAAG,KAAK,IAAI,WAAW,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,IAAI,KAC5D,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,gCAAgC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EACrE,GACE,cAAc,IAAI,SAAS;gBACzB,CAAC,CAAC,CAAC,CAAC,mCAAmC,EAAE,CAAC,cAAc,CAAC,CAAC;gBAC1D,CAAC,CAAC,EACN,EAAE;YACF,IAAI,EAAE,OAAO;SACd,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,2BAA2B,CAAC,CAAC,CAAC,CACjD,KAAC,eAAe,IACd,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,2BAA2B,CAAC,SAAS,EAChD,OAAO,EAAE,2BAA2B,CAAC,aAAa,EAClD,UAAU,EAAE,2BAA2B,CAAC,UAAU,IAAI,SAAS,YAE9D,CAAC,CAAC,QAAQ,CAAC,GACI,CACnB,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,YACxC,CAAC,CAAC,QAAQ,CAAC,GACL,CACV,CAAC;IAEF,OAAO,CACL,MAAC,6BAA6B,IAAC,GAAG,EAAE,YAAY,sCAC9C,KAAC,UAAU,cACT,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EACpB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,IAC5B,GACI,EACb,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aAChC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACpE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,WAAW,GACP,EACN,aAAa,IAAI,CAChB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,aAAa,GACT,CACR,EACD,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,IAAI,GAAU,IAClD,EACN,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,KAAC,cAAc,IAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,MAAM,GAAI,IACzE,EAEb,SAAS,CAAC,CAAC,CAAC,CACX,MAAC,IAAI,IAAC,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,aAC7E,KAAC,MAAM,IAAC,OAAO,EAAE,SAAS,YAAG,CAAC,CAAC,SAAS,CAAC,GAAU,EAClD,YAAY,IACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAChE,YAAY,GACR,CACR,IAC6B,CACjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,uBAAuB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useEffect, useRef } 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 StyledFieldValueList,\n StyledButton,\n useI18n,\n FieldValueListProps,\n useDirection,\n NoChildrenProp,\n Icon,\n StyledLabel,\n useLiveLog,\n registerAction,\n useShortcut,\n focusHeadingOrContainer,\n useConsolidatedRef,\n useEscape\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';\nimport { StyledKeyboard } from '@pega/cosmos-react-core/lib/components/Badges/Keyboard';\n\nimport CountdownButton, { CountdownButtonProps } from './CountdownButton';\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: CountdownButtonProps['startTime'];\n answerTimeout: CountdownButtonProps['timeout'];\n onTimerEnd?: CountdownButtonProps['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-block-start: calc(2 * ${base.spacing});\n inset-inline-end: calc(2 * ${base.spacing});\n width: min(calc(100% - 2rem), ${base['content-width'].md});\n max-height: calc(100vh - 2rem);\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 overflow: auto;\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 @media (min-width: calc(${base.breakpoints.md})) {\n inset-block-start: calc(8 * ${base.spacing});\n max-height: initial;\n }\n\n ${StyledCardFooter} {\n ${StyledKeyboard} {\n border-color: ${base.colors.gray.medium};\n inset-block-start: unset;\n\n &:first-of-type {\n margin-inline: ${base.spacing};\n }\n }\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n {\n id: 'GoToIncomingInteraction',\n defaultKeyBinding: 'Alt+Enter'\n },\n {\n id: 'DismissIncomingInteraction',\n defaultKeyBinding: 'Alt+Q'\n }\n);\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 const { announceAssertive } = useLiveLog();\n const containerRef = useConsolidatedRef(ref);\n const returnRef = useRef<HTMLElement>();\n\n const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n if (containerRef.current) {\n returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n focusHeadingOrContainer(containerRef.current, title);\n }\n });\n const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n onDecline?.();\n });\n\n useEscape(\n () => {\n returnRef.current?.focus();\n onDecline?.();\n },\n containerRef.current,\n [onDecline]\n );\n\n useEffect(() => {\n announceAssertive({\n message: `${title} ${primaryText} ${t('status')} ${status.text}. ${\n goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n }${\n dismissBinding && onDecline\n ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n : ''\n }`,\n type: 'alert'\n });\n }, []);\n\n const acceptButton = incomingNotificationTimeout ? (\n <CountdownButton\n variant='primary'\n onClick={onAccept}\n startTime={incomingNotificationTimeout.startTime}\n timeout={incomingNotificationTimeout.answerTimeout}\n onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDecline}\n >\n {t('accept')}\n </CountdownButton>\n ) : (\n <Button variant='primary' onClick={onAccept}>\n {t('accept')}\n </Button>\n );\n\n return (\n <StyledInteractionNotification ref={containerRef} data-app-region>\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 container={{ gap: 2 }}>\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 {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n </CardContent>\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"]}
|
|
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, useEffect, useRef } 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 StyledFieldValueList,\n StyledButton,\n useI18n,\n FieldValueListProps,\n useDirection,\n NoChildrenProp,\n Icon,\n StyledLabel,\n useLiveLog,\n registerAction,\n useShortcut,\n useConsolidatedRef,\n useEscape\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';\nimport { StyledKeyboard } from '@pega/cosmos-react-core/lib/components/Badges/Keyboard';\n\nimport CountdownButton, { CountdownButtonProps } from './CountdownButton';\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: CountdownButtonProps['startTime'];\n answerTimeout: CountdownButtonProps['timeout'];\n onTimerEnd?: CountdownButtonProps['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-block-start: calc(2 * ${base.spacing});\n inset-inline-end: calc(2 * ${base.spacing});\n width: min(calc(100% - 2rem), ${base['content-width'].md});\n max-height: calc(100vh - 2rem);\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 overflow: auto;\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 @media (min-width: calc(${base.breakpoints.md})) {\n inset-block-start: calc(8 * ${base.spacing});\n max-height: initial;\n }\n\n ${StyledCardFooter} {\n ${StyledKeyboard} {\n border-color: ${base.colors.gray.medium};\n inset-block-start: unset;\n\n &:first-of-type {\n margin-inline: ${base.spacing};\n }\n }\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n {\n id: 'GoToIncomingInteraction',\n defaultKeyBinding: 'Alt+Enter'\n },\n {\n id: 'DismissIncomingInteraction',\n defaultKeyBinding: 'Alt+Q'\n }\n);\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 const { announceAssertive } = useLiveLog();\n const containerRef = useConsolidatedRef(ref);\n const returnRef = useRef<HTMLElement>();\n const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n if (containerRef.current) {\n returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n acceptButtonRef.current?.focus();\n }\n });\n const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n onDecline?.();\n });\n\n useEscape(\n () => {\n returnRef.current?.focus();\n onDecline?.();\n },\n containerRef.current,\n [onDecline]\n );\n\n useEffect(() => {\n announceAssertive({\n message: `${title} ${primaryText} ${t('status')} ${status.text}. ${\n goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n }${\n dismissBinding && onDecline\n ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n : ''\n }`,\n type: 'alert'\n });\n }, []);\n\n const acceptButton = incomingNotificationTimeout ? (\n <CountdownButton\n variant='primary'\n onClick={onAccept}\n startTime={incomingNotificationTimeout.startTime}\n timeout={incomingNotificationTimeout.answerTimeout}\n onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDecline}\n ref={acceptButtonRef}\n >\n {t('accept')}\n </CountdownButton>\n ) : (\n <Button variant='primary' onClick={onAccept} ref={acceptButtonRef}>\n {t('accept')}\n </Button>\n );\n\n return (\n <StyledInteractionNotification ref={containerRef} data-app-region>\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 container={{ gap: 2 }}>\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 {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n </CardContent>\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"]}
|
|
@@ -1 +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, useMemo, useState } from 'react';\n\nimport {\n Flex,\n Icon,\n registerIcon,\n Text,\n Status,\n useI18n,\n Button,\n Grid,\n SummaryItem,\n ForwardProps,\n useUID,\n MenuItemProps,\n useShortcut,\n registerAction\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 Dialogue from './Dialogue';\nimport ConversationAI from './ConversationAI';\nimport TaskPicker from './TaskPicker';\n\nregisterIcon(plusIcon, flagFinishIcon);\n\nregisterAction(\n {\n id: 'AddTask',\n defaultKeyBinding: 'Alt+T'\n },\n {\n id: 'WrapUp',\n defaultKeyBinding: 'Alt+W'\n }\n);\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TaskManagerProps>, ref: TaskManagerProps['ref']) => {\n const {\n tasks = [],\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 hasActiveTask = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;\n const headingId = useUID();\n const wrapUpTabId = useUID();\n const wrapUpTabPanelId = useUID();\n const addTaskButtonRef = useRef<HTMLButtonElement>(null);\n\n const [showPicker, setShowPicker] = useState(false);\n\n const ctx = useMemo(\n () => ({\n addTask,\n wrapUp,\n tasks,\n onTaskLaunch\n }),\n [addTask, wrapUp, tasks, onTaskLaunch]\n );\n\n useShortcut('AddTask', () => {\n if (addTask) {\n setShowPicker(true);\n }\n });\n\n useShortcut('WrapUp', () => {\n if (wrapUp && !wrapUp.disable) wrapUp.onClick();\n });\n\n return (\n <TaskManagerContext.Provider value={ctx}>\n <StyledTaskManager\n {...restProps}\n ref={ref}\n hasDrawer={hasActiveTask}\n hasTasks={!!tasks.length}\n >\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={\n <Text variant='h2' id={headingId}>\n {t('task_manager_tasks')}\n </Text>\n }\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()}\n >\n <Icon name='flag-finish' />\n <span>{t('task_manager_wrap_up')}</span>\n </Button>\n )}\n {addTask && (\n <>\n <Button\n ref={addTaskButtonRef}\n variant='primary'\n onClick={() => setShowPicker(prev => !prev)}\n >\n <Icon name='plus' />\n <span>{t('task_manager_add_task')}</span>\n </Button>\n {showPicker && addTaskButtonRef.current && (\n <TaskPicker\n target={addTaskButtonRef.current}\n items={addTask.items}\n onAdd={(selectedItems: MenuItemProps[]) => {\n addTask.onAdd(selectedItems);\n setShowPicker(false);\n }}\n onCancel={() => {\n setShowPicker(false);\n addTaskButtonRef.current?.focus();\n }}\n ref={addTask.ref}\n />\n )}\n </>\n )}\n </Flex>\n </Flex>\n }\n >\n {hasActiveTask && (\n <TaskManagerTabs\n ref={taskManagerTabsRef}\n aria-labelledby={headingId}\n wrapUpTabId={wrapUpTabId}\n wrapUpTabPanelId={wrapUpTabPanelId}\n />\n )}\n {hasActiveTask && (\n <>\n {tasks.map(({ id, active }) => {\n return (\n <StyledTaskMain\n id={`tab-panel-${id}`}\n key={id}\n role='tabpanel'\n aria-labelledby={`tab-${id}`}\n current={!!active}\n >\n {active ? main : null}\n </StyledTaskMain>\n );\n })}\n {wrapUp?.showTab && (\n <StyledTaskMain\n id={wrapUpTabPanelId}\n role='tabpanel'\n aria-labelledby={wrapUpTabId}\n current={!!wrapUp.active}\n >\n {wrapUp.active ? main : null}\n </StyledTaskMain>\n )}\n </>\n )}\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 </Grid>\n )}\n </TaskView>\n </StyledTaskManager>\n </TaskManagerContext.Provider>\n );\n }\n);\n\nexport default TaskManager;\n"]}
|
|
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, useMemo, useState } from 'react';\n\nimport {\n Flex,\n Icon,\n registerIcon,\n Text,\n Status,\n useI18n,\n Button,\n Grid,\n SummaryItem,\n ForwardProps,\n useUID,\n MenuItemProps,\n useShortcut,\n registerAction\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 Dialogue from './Dialogue';\nimport ConversationAI from './ConversationAI';\nimport TaskPicker from './TaskPicker';\n\nregisterIcon(plusIcon, flagFinishIcon);\n\nregisterAction(\n {\n id: 'AddTask',\n defaultKeyBinding: 'Alt+A'\n },\n {\n id: 'WrapUp',\n defaultKeyBinding: 'Alt+W'\n }\n);\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TaskManagerProps>, ref: TaskManagerProps['ref']) => {\n const {\n tasks = [],\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 hasActiveTask = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;\n const headingId = useUID();\n const wrapUpTabId = useUID();\n const wrapUpTabPanelId = useUID();\n const addTaskButtonRef = useRef<HTMLButtonElement>(null);\n\n const [showPicker, setShowPicker] = useState(false);\n\n const ctx = useMemo(\n () => ({\n addTask,\n wrapUp,\n tasks,\n onTaskLaunch\n }),\n [addTask, wrapUp, tasks, onTaskLaunch]\n );\n\n useShortcut('AddTask', () => {\n if (addTask) {\n setShowPicker(true);\n }\n });\n\n useShortcut('WrapUp', () => {\n if (wrapUp && !wrapUp.disable) wrapUp.onClick();\n });\n\n return (\n <TaskManagerContext.Provider value={ctx}>\n <StyledTaskManager\n {...restProps}\n ref={ref}\n hasDrawer={hasActiveTask}\n hasTasks={!!tasks.length}\n >\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={\n <Text variant='h2' id={headingId}>\n {t('task_manager_tasks')}\n </Text>\n }\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()}\n >\n <Icon name='flag-finish' />\n <span>{t('task_manager_wrap_up')}</span>\n </Button>\n )}\n {addTask && (\n <>\n <Button\n ref={addTaskButtonRef}\n variant='primary'\n onClick={() => setShowPicker(prev => !prev)}\n >\n <Icon name='plus' />\n <span>{t('task_manager_add_task')}</span>\n </Button>\n {showPicker && addTaskButtonRef.current && (\n <TaskPicker\n target={addTaskButtonRef.current}\n items={addTask.items}\n onAdd={(selectedItems: MenuItemProps[]) => {\n addTask.onAdd(selectedItems);\n setShowPicker(false);\n }}\n onCancel={() => {\n setShowPicker(false);\n addTaskButtonRef.current?.focus();\n }}\n ref={addTask.ref}\n />\n )}\n </>\n )}\n </Flex>\n </Flex>\n }\n >\n {hasActiveTask && (\n <TaskManagerTabs\n ref={taskManagerTabsRef}\n aria-labelledby={headingId}\n wrapUpTabId={wrapUpTabId}\n wrapUpTabPanelId={wrapUpTabPanelId}\n />\n )}\n {hasActiveTask && (\n <>\n {tasks.map(({ id, active }) => {\n return (\n <StyledTaskMain\n id={`tab-panel-${id}`}\n key={id}\n role='tabpanel'\n aria-labelledby={`tab-${id}`}\n current={!!active}\n >\n {active ? main : null}\n </StyledTaskMain>\n );\n })}\n {wrapUp?.showTab && (\n <StyledTaskMain\n id={wrapUpTabPanelId}\n role='tabpanel'\n aria-labelledby={wrapUpTabId}\n current={!!wrapUp.active}\n >\n {wrapUp.active ? main : null}\n </StyledTaskMain>\n )}\n </>\n )}\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 </Grid>\n )}\n </TaskView>\n </StyledTaskManager>\n </TaskManagerContext.Provider>\n );\n }\n);\n\nexport default TaskManager;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-cs",
|
|
3
|
-
"version": "4.0.0-dev.15.
|
|
3
|
+
"version": "4.0.0-dev.15.4",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "4.0.0-dev.15.
|
|
24
|
-
"@pega/cosmos-react-dnd": "4.0.0-dev.15.
|
|
23
|
+
"@pega/cosmos-react-core": "4.0.0-dev.15.4",
|
|
24
|
+
"@pega/cosmos-react-dnd": "4.0.0-dev.15.4",
|
|
25
25
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
26
26
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
27
27
|
"@types/styled-components": "^5.1.26",
|