@pega/cosmos-react-cs 4.0.0-dev.2.0 → 4.0.0-dev.3.0
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/CallControlPanel/Call.d.ts.map +1 -1
- package/lib/components/CallControlPanel/Call.js +14 -6
- package/lib/components/CallControlPanel/Call.js.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.d.ts +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.js +13 -9
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.js.map +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.d.ts.map +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.js +3 -2
- package/lib/components/InteractionNotification/InteractionNotification.js.map +1 -1
- package/lib/components/TaskManager/TaskManager.styles.d.ts +0 -1
- package/lib/components/TaskManager/TaskManager.styles.d.ts.map +1 -1
- package/lib/components/TaskManager/TaskManager.styles.js +1 -7
- package/lib/components/TaskManager/TaskManager.styles.js.map +1 -1
- package/lib/components/TaskManager/TaskManagerTabs.d.ts.map +1 -1
- package/lib/components/TaskManager/TaskManagerTabs.js +10 -10
- package/lib/components/TaskManager/TaskManagerTabs.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Call.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAE7E,OAAO,EAGL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAajC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAgB1D,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"Call.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAE7E,OAAO,EAGL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAajC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAgB1D,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAiSrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -53,7 +53,18 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
|
|
|
53
53
|
id: 'conference',
|
|
54
54
|
primary: t('call_panel_conference_call_menu_item'),
|
|
55
55
|
disabled: !onConferenceAction,
|
|
56
|
-
|
|
56
|
+
items: [
|
|
57
|
+
{
|
|
58
|
+
id: 'conferenceCallWithInteraction',
|
|
59
|
+
primary: t('call_panel_menu_item_call_with_interaction'),
|
|
60
|
+
onClick: () => setDialogType('conferenceWithInteractions')
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
id: 'conferenceCallOnly',
|
|
64
|
+
primary: t('call_panel_menu_item_call_only'),
|
|
65
|
+
onClick: () => setDialogType('conferenceCallOnly')
|
|
66
|
+
}
|
|
67
|
+
]
|
|
57
68
|
},
|
|
58
69
|
{
|
|
59
70
|
id: 'consult',
|
|
@@ -63,13 +74,11 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
|
|
|
63
74
|
{
|
|
64
75
|
id: 'consultCallWithInteraction',
|
|
65
76
|
primary: t('call_panel_menu_item_call_with_interaction'),
|
|
66
|
-
disabled: !onTransferAction,
|
|
67
77
|
onClick: () => setDialogType('consultWithInteractions')
|
|
68
78
|
},
|
|
69
79
|
{
|
|
70
80
|
id: 'consultCallOnly',
|
|
71
81
|
primary: t('call_panel_menu_item_call_only'),
|
|
72
|
-
disabled: !onTransferAction,
|
|
73
82
|
onClick: () => setDialogType('consultCallOnly')
|
|
74
83
|
}
|
|
75
84
|
]
|
|
@@ -82,13 +91,11 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
|
|
|
82
91
|
{
|
|
83
92
|
id: 'transferCallWithInteraction',
|
|
84
93
|
primary: t('call_panel_menu_item_call_with_interaction'),
|
|
85
|
-
disabled: !onTransferAction,
|
|
86
94
|
onClick: () => setDialogType('transferWithInteractions')
|
|
87
95
|
},
|
|
88
96
|
{
|
|
89
97
|
id: 'transferCallOnly',
|
|
90
98
|
primary: t('call_panel_menu_item_call_only'),
|
|
91
|
-
disabled: !onTransferAction,
|
|
92
99
|
onClick: () => setDialogType('transferCallOnly')
|
|
93
100
|
}
|
|
94
101
|
]
|
|
@@ -114,7 +121,8 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
|
|
|
114
121
|
moreActionsButtonRef.current?.focus();
|
|
115
122
|
}, onSubmit: transferData => {
|
|
116
123
|
switch (dialogType) {
|
|
117
|
-
case '
|
|
124
|
+
case 'conferenceCallOnly':
|
|
125
|
+
case 'conferenceWithInteractions':
|
|
118
126
|
onConferenceAction?.(callId, transferData);
|
|
119
127
|
break;
|
|
120
128
|
case 'consultCallOnly':
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n Button,\n Flex,\n ForwardProps,\n Icon,\n registerIcon,\n Status,\n SummaryItem,\n Text,\n useI18n,\n MenuButton\n} from '@pega/cosmos-react-core';\nimport * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';\nimport * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';\nimport * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';\nimport * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';\nimport * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';\nimport * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';\nimport * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';\nimport * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';\n\nimport { DialPadDialog } from '../DialPad';\n\nimport { StyledHoldInfo, StyledCallContainer, StyledSLAProgress } from './CallControlPanel.styles';\nimport type { CallProps } from './CallControlPanel.types';\nimport StopWatch from './StopWatch';\nimport { calculateSla } from './utils';\nimport CallHandoverDialog from './CallHandover';\n\nregisterIcon(\n arrowUpIcon,\n micSolidIcon,\n micOffSolidIcon,\n playSoldIcon,\n pauseSolidIcon,\n phoneSplitSolidIcon,\n phoneOutSolidIcon,\n phoneHangupSolidIcon\n);\n\nconst Call: FunctionComponent<CallProps & ForwardProps> = ({\n id: callId,\n startedAt,\n onHoldSince,\n slaConfig,\n participants,\n onPauseToggle,\n muted,\n onMuteToggle,\n onDTMFPress,\n onConsultAction,\n onConferenceAction,\n onTransferAction,\n onMergeCall,\n onHandOffCall,\n onEndCall,\n transferOptions,\n interactionOptions\n}: CallProps & ForwardProps) => {\n const t = useI18n();\n const moreActionsButtonRef = useRef<HTMLButtonElement>(null);\n const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;\n const [slaLevel, setSlaLevel] = useState<number | undefined>(undefined);\n const [dialogType, setDialogType] = useState<\n | 'conference'\n | 'transferWithInteractions'\n | 'transferCallOnly'\n | 'consultWithInteractions'\n | 'consultCallOnly'\n | undefined\n >();\n const [showDTMF, setShowDTMF] = useState(false);\n\n const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);\n\n const calculateCurrentSlaLevel = (): void => {\n const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);\n setSlaLevel(currentSlaLevel);\n };\n\n useLayoutEffect(() => {\n calculateCurrentSlaLevel();\n const slaDurationInMillis = slaDuration && slaDuration * 1000;\n\n const timer = setTimeout(() => {\n calculateCurrentSlaLevel();\n }, slaDurationInMillis);\n\n return () => clearTimeout(timer);\n }, [inCallSince, slaLevel]);\n\n return (\n <StyledCallContainer>\n <StyledSLAProgress\n determinate\n placement='local'\n slaDuration={slaDuration}\n slaLevel={slaLevel}\n />\n {participants.map((item, index) => {\n return (\n <SummaryItem\n container={\n index === 0\n ? {\n areas: '\"primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) auto'\n }\n : {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto auto minmax(0, 2fr) auto'\n }\n }\n overflowStrategy='ellipsis'\n visual={index !== 0 && <Icon name='arrow-up' />}\n primary={item.name}\n secondary={item.info && <Text variant='secondary'>{item.info}</Text>}\n key={item.id}\n actions={\n index === 0 ? (\n <Flex container={{ wrap: 'nowrap' }}>\n {slaConfig && (\n <Flex container={{ alignItems: 'center' }}>\n <StopWatch startTime={startedAt} timeout={slaTimeout} />\n </Flex>\n )}\n\n <Button\n icon\n variant='simple'\n disabled={onHoldSince !== undefined}\n onClick={() => onMuteToggle(callId)}\n label={t(\n muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'\n )}\n >\n <Icon name={muted ? 'mic-solid' : 'mic-off-solid'} />\n </Button>\n\n <Button\n icon\n variant='simple'\n disabled={!onPauseToggle}\n onClick={() => onPauseToggle?.(callId)}\n label={t(\n onHoldSince !== undefined\n ? 'call_panel_resume_call_menu_item'\n : 'call_panel_pause_call_menu_item'\n )}\n >\n <Icon name={onHoldSince !== undefined ? 'play-solid' : 'pause-solid'} />\n </Button>\n {onHoldSince ? (\n <>\n {onMergeCall && (\n <Button\n icon\n variant='simple'\n onClick={() => onMergeCall(callId)}\n label={t('call_panel_merge_call_menu_item')}\n >\n <Icon name='phone-split-solid' />\n </Button>\n )}\n {onHandOffCall && (\n <Button\n icon\n variant='simple'\n onClick={() => onHandOffCall(callId)}\n label={t('call_panel_handoff_call_menu_item')}\n >\n <Icon name='phone-out-solid' />\n </Button>\n )}\n <Button\n icon\n variant='simple'\n key='hang_up'\n disabled={!onEndCall}\n onClick={() => onEndCall?.(callId)}\n label={t('call_panel_hangup_call_menu_item')}\n >\n <Icon name='phone-hangup-solid' />\n </Button>\n </>\n ) : (\n <MenuButton\n ref={moreActionsButtonRef}\n text={t('actions')}\n iconOnly\n icon='more'\n variant='simple'\n menu={{\n variant: 'flyout',\n items: [\n {\n id: 'conference',\n primary: t('call_panel_conference_call_menu_item'),\n disabled: !onConferenceAction,\n onClick: () => setDialogType('conference')\n },\n {\n id: 'consult',\n primary: t('call_panel_consult_call_menu_item'),\n disabled: !onConsultAction,\n items: [\n {\n id: 'consultCallWithInteraction',\n primary: t('call_panel_menu_item_call_with_interaction'),\n disabled: !onTransferAction,\n onClick: () => setDialogType('consultWithInteractions')\n },\n {\n id: 'consultCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n disabled: !onTransferAction,\n onClick: () => setDialogType('consultCallOnly')\n }\n ]\n },\n {\n id: 'transfer',\n primary: t('call_panel_transfer_call_menu_item'),\n disabled: !onTransferAction,\n items: [\n {\n id: 'transferCallWithInteraction',\n primary: t('call_panel_menu_item_call_with_interaction'),\n disabled: !onTransferAction,\n onClick: () => setDialogType('transferWithInteractions')\n },\n {\n id: 'transferCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n disabled: !onTransferAction,\n onClick: () => setDialogType('transferCallOnly')\n }\n ]\n },\n {\n id: 'dtmf',\n primary: t('call_panel_send_dtmf_menu_item'),\n disabled: !onDTMFPress,\n onClick: () => setShowDTMF(true)\n },\n {\n id: 'hang_up',\n primary: t('call_panel_hangup_call_menu_item'),\n disabled: !onEndCall,\n onClick: () => onEndCall?.(callId)\n }\n ]\n }}\n />\n )}\n </Flex>\n ) : (\n <Button\n icon\n variant='simple'\n key='hang_up'\n disabled={!item.onHangUp}\n onClick={() => item.onHangUp?.(callId, item.id)}\n label={t('call_panel_hangup_call_menu_item')}\n >\n <Icon name='phone-hangup-solid' />\n </Button>\n )\n }\n />\n );\n })}\n {onHoldSince !== undefined && (\n <Status as={StyledHoldInfo} variant='pending'>\n {\n t('call_panel_call_on_hold', [\n <StopWatch startTime={onHoldSince} />\n ]) as unknown as string\n }\n </Status>\n )}\n {dialogType && (\n <CallHandoverDialog\n target={moreActionsButtonRef.current}\n type={dialogType}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n onCancel={() => {\n setDialogType(undefined);\n moreActionsButtonRef.current?.focus();\n }}\n onSubmit={transferData => {\n switch (dialogType) {\n case 'conference':\n onConferenceAction?.(callId, transferData);\n break;\n case 'consultCallOnly':\n case 'consultWithInteractions':\n onConsultAction?.(callId, transferData);\n break;\n case 'transferCallOnly':\n case 'transferWithInteractions':\n onTransferAction?.(callId, transferData);\n break;\n default:\n }\n setDialogType(undefined);\n moreActionsButtonRef.current?.focus();\n }}\n />\n )}\n {showDTMF && (\n <DialPadDialog\n target={moreActionsButtonRef.current}\n onClose={() => setShowDTMF(false)}\n onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n />\n )}\n </StyledCallContainer>\n );\n};\n\nexport default Call;\n"]}
|
|
1
|
+
{"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n Button,\n Flex,\n ForwardProps,\n Icon,\n registerIcon,\n Status,\n SummaryItem,\n Text,\n useI18n,\n MenuButton\n} from '@pega/cosmos-react-core';\nimport * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';\nimport * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';\nimport * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';\nimport * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';\nimport * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';\nimport * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';\nimport * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';\nimport * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';\n\nimport { DialPadDialog } from '../DialPad';\n\nimport { StyledHoldInfo, StyledCallContainer, StyledSLAProgress } from './CallControlPanel.styles';\nimport type { CallProps } from './CallControlPanel.types';\nimport StopWatch from './StopWatch';\nimport { calculateSla } from './utils';\nimport CallHandoverDialog from './CallHandover';\n\nregisterIcon(\n arrowUpIcon,\n micSolidIcon,\n micOffSolidIcon,\n playSoldIcon,\n pauseSolidIcon,\n phoneSplitSolidIcon,\n phoneOutSolidIcon,\n phoneHangupSolidIcon\n);\n\nconst Call: FunctionComponent<CallProps & ForwardProps> = ({\n id: callId,\n startedAt,\n onHoldSince,\n slaConfig,\n participants,\n onPauseToggle,\n muted,\n onMuteToggle,\n onDTMFPress,\n onConsultAction,\n onConferenceAction,\n onTransferAction,\n onMergeCall,\n onHandOffCall,\n onEndCall,\n transferOptions,\n interactionOptions\n}: CallProps & ForwardProps) => {\n const t = useI18n();\n const moreActionsButtonRef = useRef<HTMLButtonElement>(null);\n const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;\n const [slaLevel, setSlaLevel] = useState<number | undefined>(undefined);\n const [dialogType, setDialogType] = useState<\n | 'conferenceWithInteractions'\n | 'conferenceCallOnly'\n | 'transferWithInteractions'\n | 'transferCallOnly'\n | 'consultWithInteractions'\n | 'consultCallOnly'\n | undefined\n >();\n const [showDTMF, setShowDTMF] = useState(false);\n\n const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);\n\n const calculateCurrentSlaLevel = (): void => {\n const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);\n setSlaLevel(currentSlaLevel);\n };\n\n useLayoutEffect(() => {\n calculateCurrentSlaLevel();\n const slaDurationInMillis = slaDuration && slaDuration * 1000;\n\n const timer = setTimeout(() => {\n calculateCurrentSlaLevel();\n }, slaDurationInMillis);\n\n return () => clearTimeout(timer);\n }, [inCallSince, slaLevel]);\n\n return (\n <StyledCallContainer>\n <StyledSLAProgress\n determinate\n placement='local'\n slaDuration={slaDuration}\n slaLevel={slaLevel}\n />\n {participants.map((item, index) => {\n return (\n <SummaryItem\n container={\n index === 0\n ? {\n areas: '\"primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) auto'\n }\n : {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto auto minmax(0, 2fr) auto'\n }\n }\n overflowStrategy='ellipsis'\n visual={index !== 0 && <Icon name='arrow-up' />}\n primary={item.name}\n secondary={item.info && <Text variant='secondary'>{item.info}</Text>}\n key={item.id}\n actions={\n index === 0 ? (\n <Flex container={{ wrap: 'nowrap' }}>\n {slaConfig && (\n <Flex container={{ alignItems: 'center' }}>\n <StopWatch startTime={startedAt} timeout={slaTimeout} />\n </Flex>\n )}\n\n <Button\n icon\n variant='simple'\n disabled={onHoldSince !== undefined}\n onClick={() => onMuteToggle(callId)}\n label={t(\n muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'\n )}\n >\n <Icon name={muted ? 'mic-solid' : 'mic-off-solid'} />\n </Button>\n\n <Button\n icon\n variant='simple'\n disabled={!onPauseToggle}\n onClick={() => onPauseToggle?.(callId)}\n label={t(\n onHoldSince !== undefined\n ? 'call_panel_resume_call_menu_item'\n : 'call_panel_pause_call_menu_item'\n )}\n >\n <Icon name={onHoldSince !== undefined ? 'play-solid' : 'pause-solid'} />\n </Button>\n {onHoldSince ? (\n <>\n {onMergeCall && (\n <Button\n icon\n variant='simple'\n onClick={() => onMergeCall(callId)}\n label={t('call_panel_merge_call_menu_item')}\n >\n <Icon name='phone-split-solid' />\n </Button>\n )}\n {onHandOffCall && (\n <Button\n icon\n variant='simple'\n onClick={() => onHandOffCall(callId)}\n label={t('call_panel_handoff_call_menu_item')}\n >\n <Icon name='phone-out-solid' />\n </Button>\n )}\n <Button\n icon\n variant='simple'\n key='hang_up'\n disabled={!onEndCall}\n onClick={() => onEndCall?.(callId)}\n label={t('call_panel_hangup_call_menu_item')}\n >\n <Icon name='phone-hangup-solid' />\n </Button>\n </>\n ) : (\n <MenuButton\n ref={moreActionsButtonRef}\n text={t('actions')}\n iconOnly\n icon='more'\n variant='simple'\n menu={{\n variant: 'flyout',\n items: [\n {\n id: 'conference',\n primary: t('call_panel_conference_call_menu_item'),\n disabled: !onConferenceAction,\n items: [\n {\n id: 'conferenceCallWithInteraction',\n primary: t('call_panel_menu_item_call_with_interaction'),\n onClick: () => setDialogType('conferenceWithInteractions')\n },\n {\n id: 'conferenceCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n onClick: () => setDialogType('conferenceCallOnly')\n }\n ]\n },\n {\n id: 'consult',\n primary: t('call_panel_consult_call_menu_item'),\n disabled: !onConsultAction,\n items: [\n {\n id: 'consultCallWithInteraction',\n primary: t('call_panel_menu_item_call_with_interaction'),\n onClick: () => setDialogType('consultWithInteractions')\n },\n {\n id: 'consultCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n onClick: () => setDialogType('consultCallOnly')\n }\n ]\n },\n {\n id: 'transfer',\n primary: t('call_panel_transfer_call_menu_item'),\n disabled: !onTransferAction,\n items: [\n {\n id: 'transferCallWithInteraction',\n primary: t('call_panel_menu_item_call_with_interaction'),\n onClick: () => setDialogType('transferWithInteractions')\n },\n {\n id: 'transferCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n onClick: () => setDialogType('transferCallOnly')\n }\n ]\n },\n {\n id: 'dtmf',\n primary: t('call_panel_send_dtmf_menu_item'),\n disabled: !onDTMFPress,\n onClick: () => setShowDTMF(true)\n },\n {\n id: 'hang_up',\n primary: t('call_panel_hangup_call_menu_item'),\n disabled: !onEndCall,\n onClick: () => onEndCall?.(callId)\n }\n ]\n }}\n />\n )}\n </Flex>\n ) : (\n <Button\n icon\n variant='simple'\n key='hang_up'\n disabled={!item.onHangUp}\n onClick={() => item.onHangUp?.(callId, item.id)}\n label={t('call_panel_hangup_call_menu_item')}\n >\n <Icon name='phone-hangup-solid' />\n </Button>\n )\n }\n />\n );\n })}\n {onHoldSince !== undefined && (\n <Status as={StyledHoldInfo} variant='pending'>\n {\n t('call_panel_call_on_hold', [\n <StopWatch startTime={onHoldSince} />\n ]) as unknown as string\n }\n </Status>\n )}\n {dialogType && (\n <CallHandoverDialog\n target={moreActionsButtonRef.current}\n type={dialogType}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n onCancel={() => {\n setDialogType(undefined);\n moreActionsButtonRef.current?.focus();\n }}\n onSubmit={transferData => {\n switch (dialogType) {\n case 'conferenceCallOnly':\n case 'conferenceWithInteractions':\n onConferenceAction?.(callId, transferData);\n break;\n case 'consultCallOnly':\n case 'consultWithInteractions':\n onConsultAction?.(callId, transferData);\n break;\n case 'transferCallOnly':\n case 'transferWithInteractions':\n onTransferAction?.(callId, transferData);\n break;\n default:\n }\n setDialogType(undefined);\n moreActionsButtonRef.current?.focus();\n }}\n />\n )}\n {showDTMF && (\n <DialPadDialog\n target={moreActionsButtonRef.current}\n onClose={() => setShowDTMF(false)}\n onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n />\n )}\n </StyledCallContainer>\n );\n};\n\nexport default Call;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FunctionComponent } from 'react';
|
|
2
2
|
import type { TransferData, TransferReasonOption } from './CallHandover.types';
|
|
3
|
-
export declare type HandoverType = '
|
|
3
|
+
export declare type HandoverType = 'conferenceWithInteractions' | 'conferenceCallOnly' | 'transferWithInteractions' | 'transferCallOnly' | 'consultWithInteractions' | 'consultCallOnly';
|
|
4
4
|
export interface CallHandoverDialogProps {
|
|
5
5
|
target: HTMLElement | null;
|
|
6
6
|
type: HandoverType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallHandoverDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAkBxE,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE/E,oBAAY,YAAY,GACpB,
|
|
1
|
+
{"version":3,"file":"CallHandoverDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAkBxE,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE/E,oBAAY,YAAY,GACpB,4BAA4B,GAC5B,oBAAoB,GACpB,0BAA0B,GAC1B,kBAAkB,GAClB,yBAAyB,GACzB,iBAAiB,CAAC;AAEtB,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;CACvD;AAED,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,CAqIlE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -14,25 +14,29 @@ const CallHandoverDialog = ({ target, type, onSubmit, onCancel, transferOptions,
|
|
|
14
14
|
let dialogContent;
|
|
15
15
|
let dialogHeading;
|
|
16
16
|
switch (type) {
|
|
17
|
-
case '
|
|
17
|
+
case 'conferenceCallOnly':
|
|
18
18
|
dialogHeading = t('call_panel_conference_heading');
|
|
19
19
|
dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_conference_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
|
|
20
20
|
break;
|
|
21
|
+
case 'conferenceWithInteractions':
|
|
22
|
+
dialogHeading = t('call_panel_conference_call_and_interactions_heading');
|
|
23
|
+
dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call+interaction', submitButtonText: t('call_panel_conference_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
|
|
24
|
+
break;
|
|
21
25
|
case 'consultCallOnly':
|
|
22
|
-
dialogHeading = t('
|
|
23
|
-
dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('
|
|
26
|
+
dialogHeading = t('call_panel_consult_heading');
|
|
27
|
+
dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_consult_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
|
|
24
28
|
break;
|
|
25
29
|
case 'consultWithInteractions':
|
|
26
|
-
dialogHeading = t('
|
|
27
|
-
dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call+interaction', submitButtonText: t('
|
|
30
|
+
dialogHeading = t('call_panel_consult_call_and_interactions_heading');
|
|
31
|
+
dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call+interaction', submitButtonText: t('call_panel_consult_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
|
|
28
32
|
break;
|
|
29
33
|
case 'transferCallOnly':
|
|
30
|
-
dialogHeading = t('
|
|
31
|
-
dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('
|
|
34
|
+
dialogHeading = t('call_panel_transfer_heading');
|
|
35
|
+
dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_submit'), onCancel: onCancel, variant: 'call', onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
|
|
32
36
|
break;
|
|
33
37
|
case 'transferWithInteractions':
|
|
34
|
-
dialogHeading = t('
|
|
35
|
-
dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('
|
|
38
|
+
dialogHeading = t('call_panel_transfer_call_and_interactions_heading');
|
|
39
|
+
dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_submit'), onCancel: onCancel, variant: 'call+interaction', onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
|
|
36
40
|
break;
|
|
37
41
|
default:
|
|
38
42
|
dialogHeading = '';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallHandoverDialog.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,IAAI,EACJ,OAAO,EACP,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACb,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"CallHandoverDialog.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, useEffect, useRef } from 'react';\n\nimport {\n Text,\n Button,\n Card,\n CardContent,\n CardHeader,\n Icon,\n Popover,\n useEscape,\n useFocusTrap,\n useI18n,\n useOuterEvent,\n getFocusables\n} from '@pega/cosmos-react-core';\n\nimport CallHandoverForm from './CallHandoverForm';\nimport type { TransferData, TransferReasonOption } from './CallHandover.types';\n\nexport type HandoverType =\n | 'conferenceWithInteractions'\n | 'conferenceCallOnly'\n | 'transferWithInteractions'\n | 'transferCallOnly'\n | 'consultWithInteractions'\n | 'consultCallOnly';\n\nexport interface CallHandoverDialogProps {\n target: HTMLElement | null;\n type: HandoverType;\n onCancel: () => void;\n onSubmit: (data: TransferData) => void;\n transferOptions: Readonly<TransferReasonOption[]>;\n interactionOptions?: Readonly<TransferReasonOption[]>;\n}\n\nconst CallHandoverDialog: FunctionComponent<CallHandoverDialogProps> = ({\n target,\n type,\n onSubmit,\n onCancel,\n transferOptions,\n interactionOptions\n}: CallHandoverDialogProps) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const t = useI18n();\n\n useOuterEvent('mousedown', [popoverRef], onCancel);\n useEscape(onCancel, popoverRef);\n useFocusTrap(popoverRef);\n\n useEffect(() => {\n getFocusables(popoverRef)[0]?.focus();\n }, []);\n\n let dialogContent: ReactNode;\n let dialogHeading: string;\n switch (type) {\n case 'conferenceCallOnly':\n dialogHeading = t('call_panel_conference_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call'\n submitButtonText={t('call_panel_conference_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n />\n );\n break;\n case 'conferenceWithInteractions':\n dialogHeading = t('call_panel_conference_call_and_interactions_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call+interaction'\n submitButtonText={t('call_panel_conference_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n />\n );\n break;\n case 'consultCallOnly':\n dialogHeading = t('call_panel_consult_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call'\n submitButtonText={t('call_panel_consult_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n />\n );\n break;\n case 'consultWithInteractions':\n dialogHeading = t('call_panel_consult_call_and_interactions_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call+interaction'\n submitButtonText={t('call_panel_consult_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n />\n );\n break;\n case 'transferCallOnly':\n dialogHeading = t('call_panel_transfer_heading');\n dialogContent = (\n <CallHandoverForm\n submitButtonText={t('call_panel_transfer_submit')}\n onCancel={onCancel}\n variant='call'\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n />\n );\n break;\n case 'transferWithInteractions':\n dialogHeading = t('call_panel_transfer_call_and_interactions_heading');\n dialogContent = (\n <CallHandoverForm\n submitButtonText={t('call_panel_transfer_submit')}\n onCancel={onCancel}\n variant='call+interaction'\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n />\n );\n break;\n default:\n dialogHeading = '';\n dialogContent = null;\n }\n\n return (\n <Popover\n target={target}\n ref={popoverRef}\n placement='top-end'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['bottom-end', 'left', 'right']\n }\n }\n ]}\n >\n <Card>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onCancel}>\n <Icon name='times' />\n </Button>\n }\n >\n <Text variant='h3'>{dialogHeading}</Text>\n </CardHeader>\n <CardContent>{dialogContent}</CardContent>\n </Card>\n </Popover>\n );\n};\n\nexport default CallHandoverDialog;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAOL,WAAW,EACX,YAAY,EAUZ,mBAAmB,EAEnB,cAAc,
|
|
1
|
+
{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAOL,WAAW,EACX,YAAY,EAUZ,mBAAmB,EAEnB,cAAc,EAIf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAqED,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CAuDzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldName, CardFooter, StyledFieldValueList, StyledButton, useI18n, useDirection, Icon } from '@pega/cosmos-react-core';
|
|
4
|
+
import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldName, CardFooter, StyledFieldValueList, StyledButton, useI18n, useDirection, Icon, VisuallyHiddenText, useUID } from '@pega/cosmos-react-core';
|
|
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';
|
|
@@ -72,7 +72,8 @@ const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
|
|
|
72
72
|
StyledInteractionNotification.defaultProps = defaultThemeProp;
|
|
73
73
|
const InteractionNotification = forwardRef(({ icon, title, primaryText, secondaryText, status, fields, onAccept }, ref) => {
|
|
74
74
|
const t = useI18n();
|
|
75
|
-
|
|
75
|
+
const titleId = useUID();
|
|
76
|
+
return (_jsxs(StyledInteractionNotification, { ref: ref, "aria-labelledby": titleId, children: [_jsx(CardHeader, { actions: onAccept ? (_jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') })) : undefined, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', id: titleId, children: title })] }) }), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', as: 'span', children: primaryText }), secondaryText && _jsx(Text, { variant: 'secondary', children: secondaryText }), _jsx(Status, { variant: status.variant, children: status.text })] }) }), fields && fields.length !== 0 && (_jsx(CardFooter, { children: _jsx(FieldValueList, { variant: 'inline', fields: fields }) })), _jsx(VisuallyHiddenText, { role: 'alert', "aria-live": 'assertive', children: `${title} ${primaryText} ${t('status')} ${status.text}` })] }));
|
|
76
77
|
});
|
|
77
78
|
export default InteractionNotification;
|
|
78
79
|
//# sourceMappingURL=InteractionNotification.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,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,eAAe,EACf,UAAU,EACV,oBAAoB,EACpB,YAAY,EACZ,OAAO,EAEP,YAAY,EAEZ,IAAI,
|
|
1
|
+
{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n Status,\n Text,\n StatusProps,\n ForwardProps,\n defaultThemeProp,\n Flex,\n StyledText,\n FieldValueList,\n StyledFieldName,\n CardFooter,\n StyledFieldValueList,\n StyledButton,\n useI18n,\n FieldValueListProps,\n useDirection,\n NoChildrenProp,\n Icon,\n VisuallyHiddenText,\n useUID\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface InteractionNotificationProps extends NoChildrenProp {\n /** Ref to Component. */\n ref?: Ref<HTMLDivElement>;\n /** Name of the icon used in header. */\n icon: string;\n /** Interaction title. */\n title: string;\n /** Primary information of the notification. For example caller name . */\n primaryText: string;\n /** Secondary information of the notification. For example phone number of the caller */\n secondaryText?: string;\n /** Represents the current status of interaction. */\n status: { variant: StatusProps['variant']; text: string };\n /** Information structured as field values to be displayed below main section. */\n fields?: FieldValueListProps['fields'];\n /** Callback when accept button is clicked. */\n onAccept?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n const { rtl } = useDirection();\n return css`\n position: fixed;\n inset-inline-end: 1rem;\n inset-block-start: 4rem;\n width: clamp(21.5rem, calc(100% - 2rem), 25rem);\n z-index: ${base['z-index'].modal};\n color: ${base.colors.white};\n animation: SlideIn calc(4 * ${base.animation.speed});\n padding: calc(0.75 * ${base.spacing}) 0;\n\n &:not(& &) {\n background-color: ${base.colors.slate['extra-dark']};\n }\n\n @keyframes SlideIn {\n 0% {\n ${rtl\n ? css`\n transform: translateX(calc(-100% - 1rem));\n `\n : css`\n transform: translateX(calc(100% + 1rem));\n `}\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n ${StyledCardHeader} {\n ${StyledButton} {\n margin-inline-start: calc(2 * ${base.spacing});\n }\n }\n\n ${StyledCardContent} {\n margin: calc(2 * ${base.spacing}) 0;\n\n ${StyledText} {\n color: ${base.colors.white};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n }\n }\n\n ${StyledCardFooter} {\n ${StyledFieldValueList} {\n border-top: solid 0.0625rem ${base.colors.gray.medium};\n padding-top: calc(2 * ${base.spacing});\n color: ${base.colors.white};\n\n ${StyledFieldName} {\n color: ${base.colors.white};\n }\n }\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n forwardRef(\n (\n {\n icon,\n title,\n primaryText,\n secondaryText,\n status,\n fields,\n onAccept\n }: PropsWithoutRef<InteractionNotificationProps>,\n ref: InteractionNotificationProps['ref']\n ) => {\n const t = useI18n();\n const titleId = useUID();\n\n return (\n <StyledInteractionNotification ref={ref} aria-labelledby={titleId}>\n <CardHeader\n actions={\n onAccept ? (\n <Button variant='primary' onClick={onAccept}>\n {t('accept')}\n </Button>\n ) : undefined\n }\n >\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name={icon} />\n <Text variant='h2' id={titleId}>\n {title}\n </Text>\n </Flex>\n </CardHeader>\n <CardContent>\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n <Text variant='h1' as='span'>\n {primaryText}\n </Text>\n {secondaryText && <Text variant='secondary'>{secondaryText}</Text>}\n <Status variant={status.variant}>{status.text}</Status>\n </Flex>\n </CardContent>\n {fields && fields.length !== 0 && (\n <CardFooter>\n <FieldValueList variant='inline' fields={fields} />\n </CardFooter>\n )}\n <VisuallyHiddenText role='alert' aria-live='assertive'>\n {`${title} ${primaryText} ${t('status')} ${status.text}`}\n </VisuallyHiddenText>\n </StyledInteractionNotification>\n );\n }\n );\n\nexport default InteractionNotification;\n"]}
|
|
@@ -6,7 +6,6 @@ export declare const StyledHeader: import("styled-components").StyledComponent<i
|
|
|
6
6
|
export declare const StyledTaskManagerTabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
7
|
export declare const StyledTaskSummaryItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
|
|
8
8
|
export declare const StyleTaskName: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
9
|
-
export declare const StyledTaskStatus: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").StatusProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
10
9
|
export declare const StyledTaskManagerTab: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, TaskManagerTabProps, never>;
|
|
11
10
|
export declare const StyledTasksTabList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
|
|
12
11
|
export declare const StyledStickyCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").CardHeaderProps, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskManager.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"TaskManager.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":";AAoBA,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzE,eAAO,MAAM,cAAc,yGAAe,CAAC;AAC3C,eAAO,MAAM,gCAAgC,yGAAe,CAAC;AAC7D,eAAO,MAAM,YAAY,yOAAuB,CAAC;AAEjD,eAAO,MAAM,qBAAqB,yGAchC,CAAC;AAIH,eAAO,MAAM,qBAAqB,wGAWhC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAMxB,CAAC;AAIH,eAAO,MAAM,oBAAoB,yHAmE/B,CAAC;AAIH,eAAO,MAAM,kBAAkB,wGAwB7B,CAAC;AAIH,eAAO,MAAM,sBAAsB,2JASjC,CAAC;AACH,eAAO,MAAM,qBAAqB,yOAIhC,CAAC;AAKH,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,6HA+C7B,CAAC;AAIF,eAAO,MAAM,uBAAuB,yGAalC,CAAC;AAIH,eAAO,MAAM,aAAa,6VAIxB,CAAC;AAIH,eAAO,MAAM,qBAAqB,mOAAiB,CAAC;AAEpD,eAAO,MAAM,YAAY;qBACN,aAAa,CAAC,gBAAgB,CAAC;SA4BjD,CAAC;AAIF,eAAO,MAAM,cAAc;qBACR,aAAa,CAAC,gBAAgB,CAAC;SAkCjD,CAAC;AAIF,eAAO,MAAM,gBAAgB;WACpB,MAAM;SAmBd,CAAC;AAIF,eAAO,MAAM,mBAAmB,6VAU/B,CAAC;AAIF,eAAO,MAAM,aAAa,yGAUxB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
2
|
import { mix, readableColor, transparentize } from 'polished';
|
|
3
|
-
import { defaultThemeProp, MenuButton, Popover, tryCatch,
|
|
3
|
+
import { defaultThemeProp, MenuButton, Popover, tryCatch, StyledCard, StyledEmptyState, StyledFlex, Icon, Count, CardHeader } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
5
5
|
import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
|
|
6
6
|
import { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';
|
|
@@ -42,13 +42,7 @@ export const StyleTaskName = styled.span(() => {
|
|
|
42
42
|
white-space: nowrap;
|
|
43
43
|
`;
|
|
44
44
|
});
|
|
45
|
-
export const StyledTaskStatus = styled(Status)(({ theme }) => {
|
|
46
|
-
return css `
|
|
47
|
-
margin-block-start: calc(0.25 * ${theme.base.spacing});
|
|
48
|
-
`;
|
|
49
|
-
});
|
|
50
45
|
StyleTaskName.defaultProps = defaultThemeProp;
|
|
51
|
-
StyledTaskStatus.defaultProps = defaultThemeProp;
|
|
52
46
|
export const StyledTaskManagerTab = styled.li(({ active = false, theme }) => {
|
|
53
47
|
const hoverColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
|
|
54
48
|
return css `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskManager.styles.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE9D,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,OAAO,EACP,QAAQ,EACR,MAAM,EACN,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,IAAI,EACJ,KAAK,EACL,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAI9F,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAC3C,MAAM,CAAC,MAAM,gCAAgC,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAC7D,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,EAAE,CAAC;AAEjD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;mCAC/B,KAAK,CAAC,IAAI,CAAC,OAAO;;;;0CAIX,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;GAMxE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;eAEG,OAAO;;0CAEoB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;GAExE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE;IAC5C,OAAO,GAAG,CAAA;;;;GAIT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,OAAO,GAAG,CAAA;sCAC0B,KAAK,CAAC,IAAI,CAAC,OAAO;GACrD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAC9C,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAsB,CAAC,EAAE,MAAM,GAAG,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/F,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC/B,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CACpF,CAAC;IACF,OAAO,GAAG,CAAA;;;wCAG4B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;;;gCASzC,KAAK,CAAC,IAAI,CAAC,OAAO;+BACnB,KAAK,CAAC,IAAI,CAAC,OAAO;wBACzB,MAAM;QAC1B,GAAG,CAAA;QACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;KAC3C;;;;;;QAMG,gCAAgC;;;;QAIhC,gCAAgC,MAAM,YAAY;QAClD,MAAM;QACR,GAAG,CAAA;sBACa,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;iBACnC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;OACjC;;MAED,MAAM;QACR,GAAG,CAAA;;;;;;4BAMqB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;;KAI/D;;;;0BAIqB,UAAU;;4BAER,UAAU;;;;;oBAKlB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;;QAG5C,UAAU;;;GAGf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IACpD,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;IAC/E,OAAO,GAAG,CAAA;;;;;;;;;;MAUN,oBAAoB;;;;;;8BAMI,cAAc;;;;GAIzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACxE,OAAO,GAAG,CAAA;;;kBAGM,sBAAsB;;wCAEA,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;GACtE,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;GAET,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACvD,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAMtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CACzC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,EAClE,EACD,SAAS,EACV,EAAE,EAAE;IACH,MAAM,sBAAsB,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC7D,OAAO,GAAG,CAAA;oBACM,sBAAsB;;uBAEnB,YAAY;QAC3B,SAAS;QACX,GAAG,CAAA;sBACa,MAAM,CAAC,GAAG;OACzB;;QAEC,YAAY;4BACQ,OAAO;uBACZ,OAAO;;;;aAIjB,UAAU,MAAM,iBAAiB;;;QAGtC,cAAc;8BACQ,OAAO,cAAc,OAAO;UAChD,gBAAgB;8BACI,OAAO,OAAO,OAAO;8BACrB,OAAO;;;;QAI7B,gBAAgB;4BACI,OAAO;;QAE3B,qBAAqB;;;QAGrB,oBAAoB;YAChB,gCAAgC,MAAM,YAAY;+BAC/B,OAAO;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;0BACc,KAAK,CAAC,IAAI,CAAC,OAAO;qBACvB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;wBACvD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;WACvD,KAAK,CAAC,IAAI,CAAC,OAAO;2BACF,KAAK,CAAC,IAAI,CAAC,OAAO;aAChC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI;mBACjB,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;UACvC,iBAAiB;;;GAGxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GAC7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAGpC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC7B,EACF,EACD,cAAc,EACf,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC;IACxF,OAAO,GAAG,CAAA;eACC,OAAO,CAAC,oBAAoB,CAAC;;gCAEZ,OAAO,CAAC,oBAAoB,CAAC;qCACxB,OAAO;oCACR,OAAO;;;;0BAIjB,eAAe;qCACJ,KAAK,IAAI,MAAM,CAAC,IAAI;;;KAGpD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAGtC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EACN,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC7B,EACF,EACD,cAAc,EACf,EAAE,EAAE;IACH,MAAM,eAAe,GACnB,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;IACjF,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC;IACvE,OAAO,GAAG,CAAA;;;;0BAIY,eAAe;qCACJ,KAAK,IAAI,MAAM,CAAC,IAAI;;QAEjD,qBAAqB;;;iBAGZ,eAAe;4BACJ,KAAK,IAAI,MAAM,CAAC,IAAI;;;QAGxC,cAAc;QAChB,GAAG,CAAA;;OAEF;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,CAG3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;qCAEuB,OAAO;qCACP,OAAO;8BACd,OAAO;;;yCAGI,OAAO;sCACV,OAAO;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,CAChD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;eACC,YAAY,CAAC,EAAE;KACzB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;;MAGN,UAAU;QACR,iBAAiB;0BACC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,oBAAoB,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAG1F,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix, readableColor, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n MenuButton,\n Popover,\n tryCatch,\n Status,\n StyledCard,\n StyledEmptyState,\n StyledFlex,\n Icon,\n Count,\n CardHeader\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledVisual } from '@pega/cosmos-react-core/lib/components/SummaryItem/SummaryItem';\n\nimport { TaskManagerTabProps, DialogueProps } from './TaskManager.types';\n\nexport const StyledTaskMain = styled.div``;\nexport const StyledTaskManagerTabsSummaryItem = styled.div``;\nexport const StyledHeader = styled(CardHeader)``;\n\nexport const StyledTaskManagerTabs = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['secondary-background']};\n padding-inline-end: calc(2 * ${theme.base.spacing});\n\n ::before {\n content: '';\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n height: 0.0625rem;\n width: 100%;\n position: absolute;\n inset-block-end: 0;\n }\n `;\n});\n\nStyledTaskManagerTabs.defaultProps = defaultThemeProp;\n\nexport const StyledTaskSummaryItem = styled.li(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n return css`\n min-height: 2.5rem;\n padding: ${spacing};\n &:not(:last-child) {\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `;\n});\n\nStyledTaskSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyleTaskName = styled.span(() => {\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `;\n});\n\nexport const StyledTaskStatus = styled(Status)(({ theme }) => {\n return css`\n margin-block-start: calc(0.25 * ${theme.base.spacing});\n `;\n});\n\nStyleTaskName.defaultProps = defaultThemeProp;\nStyledTaskStatus.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerTab = styled.li<TaskManagerTabProps>(({ active = false, theme }) => {\n const hoverColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n return css`\n min-width: max-content;\n white-space: nowrap;\n border-inline-end: 0.065rem solid ${theme.base.palette['border-line']};\n text-align: start;\n outline: none;\n overflow: hidden;\n display: flex;\n align-items: center;\n position: relative;\n min-height: 2.5rem;\n cursor: pointer;\n padding-block: calc(0.5 * ${theme.base.spacing});\n padding-inline: calc(2 * ${theme.base.spacing});\n background-color: ${active &&\n css`\n ${theme.base.palette['primary-background']};\n `};\n\n & + & {\n margin-inline-start: 0;\n }\n\n > ${StyledTaskManagerTabsSummaryItem} {\n overflow-x: hidden;\n }\n\n > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n ${active &&\n css`\n background: ${theme.base.palette.interactive};\n color: ${theme.base.colors.white};\n `}\n }\n ${active &&\n css`\n ::after {\n position: absolute;\n content: '';\n height: 0.0625rem;\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n inset-inline-start: 0;\n inset-block-end: 0;\n }\n `}\n\n &:hover,\n &:focus {\n background-color: ${hoverColor};\n ::after {\n background-color: ${hoverColor};\n }\n box-shadow: none;\n }\n &:focus {\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n\n > ${StyledFlex} {\n max-width: 100%;\n }\n `;\n});\n\nStyledTaskManagerTab.defaultProps = defaultThemeProp;\n\nexport const StyledTasksTabList = styled.ul(({ theme }) => {\n const primaryColor = theme.base.palette.interactive;\n const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n return css`\n position: relative;\n display: flex;\n flex-grow: 1;\n overflow: scroll;\n -ms-overflow-style: none;\n &::-webkit-scrollbar {\n display: none;\n }\n scrollbar-width: none;\n ${StyledTaskManagerTab} {\n margin-inline-start: 0;\n &:hover,\n &:focus {\n ::before {\n display: block;\n background-color: ${lightenedColor};\n }\n }\n }\n `;\n});\n\nStyledTasksTabList.defaultProps = defaultThemeProp;\n\nexport const StyledStickyCardHeader = styled(StyledCardHeader)(({ theme }) => {\n const primaryBackgroundColor = theme.base.palette['primary-background'];\n return css`\n inset-block-start: 0;\n inset-inline-start: 0;\n background: ${primaryBackgroundColor};\n height: calc(3.5rem - 0.0625rem);\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n `;\n});\nexport const StyledOverflowTabMenu = styled(MenuButton)(() => {\n return css`\n align-self: center;\n `;\n});\n\nStyledStickyCardHeader.defaultProps = defaultThemeProp;\nStyledOverflowTabMenu.defaultProps = defaultThemeProp;\n\ninterface StyledTaskManagerProps {\n hasDrawer?: boolean;\n}\n\nexport const StyledTaskManager = styled.div<StyledTaskManagerProps>(\n ({\n theme: {\n base: { shadow, spacing, palette, 'border-radius': borderRadius }\n },\n hasDrawer\n }) => {\n const primaryBackgroundColor = palette['primary-background'];\n return css`\n background: ${primaryBackgroundColor};\n position: relative;\n border-radius: ${borderRadius};\n ${hasDrawer &&\n css`\n box-shadow: ${shadow.low};\n `}\n\n ${StyledStatus} {\n line-height: calc(${spacing} * 2);\n height: calc(${spacing} * 2);\n font-size: 0.7rem;\n }\n\n && > ${StyledCard} > ${StyledCardContent} {\n padding: 0;\n }\n ${StyledTaskMain} {\n padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n ${StyledCardHeader} {\n padding: calc(2 * ${spacing}) 0 ${spacing};\n margin-block-end: ${spacing};\n border-block-end: none;\n }\n }\n ${StyledEmptyState} {\n padding: calc(2 * ${spacing});\n }\n ${StyledTaskManagerTabs} {\n position: relative;\n }\n ${StyledTaskManagerTab} {\n > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n margin: 0 calc(2 * ${spacing});\n }\n }\n `;\n }\n);\n\nStyledTaskManager.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerBanner = styled.div(({ theme }) => {\n return css`\n padding: calc(1.5 * ${theme.base.spacing});\n border-radius: ${theme.base['border-radius']} ${theme.base['border-radius']} 0 0;\n background-color: ${theme.base.palette['secondary-background']};\n gap: ${theme.base.spacing};\n min-height: calc(7 * ${theme.base.spacing});\n color: ${theme.base.palette.warn};\n font-weight: ${theme.base['font-weight'].bold};\n & + ${StyledTaskManager} {\n margin-block-start: 0;\n }\n `;\n});\n\nStyledTaskManagerBanner.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled(Popover)(({ theme }) => {\n return css`\n border-radius: ${theme.base['border-radius']};\n `;\n});\n\nStyledPopover.defaultProps = defaultThemeProp;\n\nexport const StyledAgentScriptIcon = styled(Icon)``;\n\nexport const StyledSymbol = styled.div<{\n verbatimStatus?: DialogueProps['verbatimStatus'];\n}>(\n ({\n theme: {\n base: {\n spacing,\n palette,\n animation: { speed, timing }\n }\n },\n verbatimStatus\n }) => {\n const backgroundColor = verbatimStatus === 'pending' ? palette.urgent : palette.success;\n return css`\n color: ${palette['primary-background']};\n border-radius: 50%;\n border: 0.0625rem solid ${palette['primary-background']};\n inset-block-start: calc(-1 * ${spacing});\n inset-inline-end: calc(-1 * ${spacing});\n position: absolute;\n height: 1.25rem;\n width: 1.25rem;\n background-color: ${backgroundColor};\n transition: background-color ${speed} ${timing.ease};\n user-select: none;\n -webkit-user-select: none;\n `;\n }\n);\n\nStyledSymbol.defaultProps = defaultThemeProp;\n\nexport const StyledIconWrap = styled.div<{\n verbatimStatus?: DialogueProps['verbatimStatus'];\n}>(\n ({\n theme: {\n base: {\n colors,\n animation: { speed, timing }\n }\n },\n verbatimStatus\n }) => {\n const backgroundColor =\n verbatimStatus === 'pending' ? colors.red['extra-light'] : colors.slate.medium;\n const scriptIconColor = tryCatch(() => readableColor(backgroundColor));\n return css`\n height: 2rem;\n width: 2rem;\n border-radius: 50%;\n background-color: ${backgroundColor};\n transition: background-color ${speed} ${timing.ease};\n\n ${StyledAgentScriptIcon} {\n width: 1.5rem;\n height: 1.5rem;\n color: ${scriptIconColor};\n transition: color ${speed} ${timing.ease};\n }\n\n ${verbatimStatus &&\n css`\n position: relative;\n `}\n `;\n }\n);\n\nStyledIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledCountBadge = styled(Count)<{\n count: number;\n}>(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n position: absolute;\n inset-inline-start: calc(2 * ${spacing});\n inset-block-start: calc(-1 * ${spacing});\n padding: 0 calc(0.5 * ${spacing});\n\n @media (pointer: coarse) {\n inset-inline-start: calc(2.5 * ${spacing});\n inset-block-start: calc(1 * ${spacing});\n }\n `;\n }\n);\n\nStyledCountBadge.defaultProps = defaultThemeProp;\n\nexport const StyledEntityPopover = styled(Popover)(\n ({\n theme: {\n base: { 'content-width': contentWidth }\n }\n }) => {\n return css`\n width: ${contentWidth.sm};\n `;\n }\n);\n\nStyledEntityPopover.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n return css`\n max-height: 18rem;\n overflow: auto;\n ${StyledCard} {\n ${StyledCardContent} {\n padding: 0 calc(${theme.components.card.padding} * 2) calc(1.5 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n\nexport default StyledTaskManager;\n"]}
|
|
1
|
+
{"version":3,"file":"TaskManager.styles.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix, readableColor, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n MenuButton,\n Popover,\n tryCatch,\n StyledCard,\n StyledEmptyState,\n StyledFlex,\n Icon,\n Count,\n CardHeader\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledVisual } from '@pega/cosmos-react-core/lib/components/SummaryItem/SummaryItem';\n\nimport { TaskManagerTabProps, DialogueProps } from './TaskManager.types';\n\nexport const StyledTaskMain = styled.div``;\nexport const StyledTaskManagerTabsSummaryItem = styled.div``;\nexport const StyledHeader = styled(CardHeader)``;\n\nexport const StyledTaskManagerTabs = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['secondary-background']};\n padding-inline-end: calc(2 * ${theme.base.spacing});\n\n ::before {\n content: '';\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n height: 0.0625rem;\n width: 100%;\n position: absolute;\n inset-block-end: 0;\n }\n `;\n});\n\nStyledTaskManagerTabs.defaultProps = defaultThemeProp;\n\nexport const StyledTaskSummaryItem = styled.li(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n return css`\n min-height: 2.5rem;\n padding: ${spacing};\n &:not(:last-child) {\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `;\n});\n\nStyledTaskSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyleTaskName = styled.span(() => {\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `;\n});\n\nStyleTaskName.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerTab = styled.li<TaskManagerTabProps>(({ active = false, theme }) => {\n const hoverColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n return css`\n min-width: max-content;\n white-space: nowrap;\n border-inline-end: 0.065rem solid ${theme.base.palette['border-line']};\n text-align: start;\n outline: none;\n overflow: hidden;\n display: flex;\n align-items: center;\n position: relative;\n min-height: 2.5rem;\n cursor: pointer;\n padding-block: calc(0.5 * ${theme.base.spacing});\n padding-inline: calc(2 * ${theme.base.spacing});\n background-color: ${active &&\n css`\n ${theme.base.palette['primary-background']};\n `};\n\n & + & {\n margin-inline-start: 0;\n }\n\n > ${StyledTaskManagerTabsSummaryItem} {\n overflow-x: hidden;\n }\n\n > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n ${active &&\n css`\n background: ${theme.base.palette.interactive};\n color: ${theme.base.colors.white};\n `}\n }\n ${active &&\n css`\n ::after {\n position: absolute;\n content: '';\n height: 0.0625rem;\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n inset-inline-start: 0;\n inset-block-end: 0;\n }\n `}\n\n &:hover,\n &:focus {\n background-color: ${hoverColor};\n ::after {\n background-color: ${hoverColor};\n }\n box-shadow: none;\n }\n &:focus {\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n\n > ${StyledFlex} {\n max-width: 100%;\n }\n `;\n});\n\nStyledTaskManagerTab.defaultProps = defaultThemeProp;\n\nexport const StyledTasksTabList = styled.ul(({ theme }) => {\n const primaryColor = theme.base.palette.interactive;\n const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n return css`\n position: relative;\n display: flex;\n flex-grow: 1;\n overflow: scroll;\n -ms-overflow-style: none;\n &::-webkit-scrollbar {\n display: none;\n }\n scrollbar-width: none;\n ${StyledTaskManagerTab} {\n margin-inline-start: 0;\n &:hover,\n &:focus {\n ::before {\n display: block;\n background-color: ${lightenedColor};\n }\n }\n }\n `;\n});\n\nStyledTasksTabList.defaultProps = defaultThemeProp;\n\nexport const StyledStickyCardHeader = styled(StyledCardHeader)(({ theme }) => {\n const primaryBackgroundColor = theme.base.palette['primary-background'];\n return css`\n inset-block-start: 0;\n inset-inline-start: 0;\n background: ${primaryBackgroundColor};\n height: calc(3.5rem - 0.0625rem);\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n `;\n});\nexport const StyledOverflowTabMenu = styled(MenuButton)(() => {\n return css`\n align-self: center;\n `;\n});\n\nStyledStickyCardHeader.defaultProps = defaultThemeProp;\nStyledOverflowTabMenu.defaultProps = defaultThemeProp;\n\ninterface StyledTaskManagerProps {\n hasDrawer?: boolean;\n}\n\nexport const StyledTaskManager = styled.div<StyledTaskManagerProps>(\n ({\n theme: {\n base: { shadow, spacing, palette, 'border-radius': borderRadius }\n },\n hasDrawer\n }) => {\n const primaryBackgroundColor = palette['primary-background'];\n return css`\n background: ${primaryBackgroundColor};\n position: relative;\n border-radius: ${borderRadius};\n ${hasDrawer &&\n css`\n box-shadow: ${shadow.low};\n `}\n\n ${StyledStatus} {\n line-height: calc(${spacing} * 2);\n height: calc(${spacing} * 2);\n font-size: 0.7rem;\n }\n\n && > ${StyledCard} > ${StyledCardContent} {\n padding: 0;\n }\n ${StyledTaskMain} {\n padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n ${StyledCardHeader} {\n padding: calc(2 * ${spacing}) 0 ${spacing};\n margin-block-end: ${spacing};\n border-block-end: none;\n }\n }\n ${StyledEmptyState} {\n padding: calc(2 * ${spacing});\n }\n ${StyledTaskManagerTabs} {\n position: relative;\n }\n ${StyledTaskManagerTab} {\n > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n margin: 0 calc(2 * ${spacing});\n }\n }\n `;\n }\n);\n\nStyledTaskManager.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerBanner = styled.div(({ theme }) => {\n return css`\n padding: calc(1.5 * ${theme.base.spacing});\n border-radius: ${theme.base['border-radius']} ${theme.base['border-radius']} 0 0;\n background-color: ${theme.base.palette['secondary-background']};\n gap: ${theme.base.spacing};\n min-height: calc(7 * ${theme.base.spacing});\n color: ${theme.base.palette.warn};\n font-weight: ${theme.base['font-weight'].bold};\n & + ${StyledTaskManager} {\n margin-block-start: 0;\n }\n `;\n});\n\nStyledTaskManagerBanner.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled(Popover)(({ theme }) => {\n return css`\n border-radius: ${theme.base['border-radius']};\n `;\n});\n\nStyledPopover.defaultProps = defaultThemeProp;\n\nexport const StyledAgentScriptIcon = styled(Icon)``;\n\nexport const StyledSymbol = styled.div<{\n verbatimStatus?: DialogueProps['verbatimStatus'];\n}>(\n ({\n theme: {\n base: {\n spacing,\n palette,\n animation: { speed, timing }\n }\n },\n verbatimStatus\n }) => {\n const backgroundColor = verbatimStatus === 'pending' ? palette.urgent : palette.success;\n return css`\n color: ${palette['primary-background']};\n border-radius: 50%;\n border: 0.0625rem solid ${palette['primary-background']};\n inset-block-start: calc(-1 * ${spacing});\n inset-inline-end: calc(-1 * ${spacing});\n position: absolute;\n height: 1.25rem;\n width: 1.25rem;\n background-color: ${backgroundColor};\n transition: background-color ${speed} ${timing.ease};\n user-select: none;\n -webkit-user-select: none;\n `;\n }\n);\n\nStyledSymbol.defaultProps = defaultThemeProp;\n\nexport const StyledIconWrap = styled.div<{\n verbatimStatus?: DialogueProps['verbatimStatus'];\n}>(\n ({\n theme: {\n base: {\n colors,\n animation: { speed, timing }\n }\n },\n verbatimStatus\n }) => {\n const backgroundColor =\n verbatimStatus === 'pending' ? colors.red['extra-light'] : colors.slate.medium;\n const scriptIconColor = tryCatch(() => readableColor(backgroundColor));\n return css`\n height: 2rem;\n width: 2rem;\n border-radius: 50%;\n background-color: ${backgroundColor};\n transition: background-color ${speed} ${timing.ease};\n\n ${StyledAgentScriptIcon} {\n width: 1.5rem;\n height: 1.5rem;\n color: ${scriptIconColor};\n transition: color ${speed} ${timing.ease};\n }\n\n ${verbatimStatus &&\n css`\n position: relative;\n `}\n `;\n }\n);\n\nStyledIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledCountBadge = styled(Count)<{\n count: number;\n}>(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n position: absolute;\n inset-inline-start: calc(2 * ${spacing});\n inset-block-start: calc(-1 * ${spacing});\n padding: 0 calc(0.5 * ${spacing});\n\n @media (pointer: coarse) {\n inset-inline-start: calc(2.5 * ${spacing});\n inset-block-start: calc(1 * ${spacing});\n }\n `;\n }\n);\n\nStyledCountBadge.defaultProps = defaultThemeProp;\n\nexport const StyledEntityPopover = styled(Popover)(\n ({\n theme: {\n base: { 'content-width': contentWidth }\n }\n }) => {\n return css`\n width: ${contentWidth.sm};\n `;\n }\n);\n\nStyledEntityPopover.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n return css`\n max-height: 18rem;\n overflow: auto;\n ${StyledCard} {\n ${StyledCardContent} {\n padding: 0 calc(${theme.components.card.padding} * 2) calc(1.5 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n\nexport default StyledTaskManager;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskManagerTabs.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAYlB,MAAM,OAAO,CAAC;AAEf,OAAO,
|
|
1
|
+
{"version":3,"file":"TaskManagerTabs.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAYlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,YAAY,EAA4B,MAAM,yBAAyB,CAAC;AAW5F,OAAO,EAAE,oBAAoB,EAAa,MAAM,qBAAqB,CAAC;AAEtE,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqP3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { createElement as _createElement } from "react";
|
|
3
3
|
import { forwardRef, useContext, createRef, useMemo, useRef, useEffect, useState, useLayoutEffect } from 'react';
|
|
4
|
-
import { Flex } from '@pega/cosmos-react-core';
|
|
4
|
+
import { cap, Flex } from '@pega/cosmos-react-core';
|
|
5
5
|
import { useDirection, useI18n } from '@pega/cosmos-react-core/lib/hooks';
|
|
6
6
|
import { StyledTaskManagerTabs, StyleTaskName, StyledTasksTabList, StyledTaskManagerTab, StyledOverflowTabMenu } from './TaskManager.styles';
|
|
7
7
|
import TaskManagerContext from './TaskManager.context';
|
|
@@ -13,7 +13,7 @@ const TaskManagerTabs = forwardRef((props, ref) => {
|
|
|
13
13
|
const tabRefs = tasks.map(() => createRef());
|
|
14
14
|
const wrapUpRef = useRef(null);
|
|
15
15
|
const tabListRef = useRef(null);
|
|
16
|
-
const { rtl } = useDirection();
|
|
16
|
+
const { rtl, end: endDirection, start: startDirection } = useDirection();
|
|
17
17
|
const t = useI18n();
|
|
18
18
|
const tasksMenu = useMemo(() => {
|
|
19
19
|
const openTasks = tasks.filter(task => !task.isResolved);
|
|
@@ -106,37 +106,37 @@ const TaskManagerTabs = forwardRef((props, ref) => {
|
|
|
106
106
|
}, [tasks, wrapUp]);
|
|
107
107
|
const changeTabFocus = (event, index) => {
|
|
108
108
|
let activeIndex = index;
|
|
109
|
-
if (
|
|
109
|
+
if (tabs.length) {
|
|
110
110
|
const { key } = event;
|
|
111
|
-
if (key ===
|
|
111
|
+
if (key === `Arrow${cap(endDirection)}`) {
|
|
112
112
|
event.preventDefault();
|
|
113
113
|
let nextIndex;
|
|
114
114
|
if (wrapUpRef?.current === event.currentTarget) {
|
|
115
115
|
nextIndex = 0;
|
|
116
116
|
}
|
|
117
117
|
else {
|
|
118
|
-
if (index ===
|
|
118
|
+
if (index === tabs.length - 1 && wrapUp?.showTab) {
|
|
119
119
|
wrapUpRef?.current?.focus();
|
|
120
120
|
return;
|
|
121
121
|
}
|
|
122
|
-
nextIndex = index + 1 <
|
|
122
|
+
nextIndex = index + 1 < tabs.length ? index + 1 : 0;
|
|
123
123
|
}
|
|
124
124
|
activeIndex = nextIndex;
|
|
125
125
|
const nextTab = tabRefs[nextIndex]?.current;
|
|
126
126
|
nextTab?.focus();
|
|
127
127
|
}
|
|
128
|
-
else if (key ===
|
|
128
|
+
else if (key === `Arrow${cap(startDirection)}`) {
|
|
129
129
|
event.preventDefault();
|
|
130
130
|
let prevIndex;
|
|
131
131
|
if (wrapUpRef?.current === event.currentTarget) {
|
|
132
|
-
prevIndex =
|
|
132
|
+
prevIndex = tabs.length - 1;
|
|
133
133
|
}
|
|
134
134
|
else {
|
|
135
135
|
if (index === 0 && wrapUp?.showTab) {
|
|
136
136
|
wrapUpRef?.current?.focus();
|
|
137
137
|
return;
|
|
138
138
|
}
|
|
139
|
-
prevIndex = index === 0 ?
|
|
139
|
+
prevIndex = index === 0 ? tabs.length - 1 : index - 1;
|
|
140
140
|
}
|
|
141
141
|
const prevTab = tabRefs[prevIndex]?.current;
|
|
142
142
|
activeIndex = prevIndex;
|
|
@@ -148,7 +148,7 @@ const TaskManagerTabs = forwardRef((props, ref) => {
|
|
|
148
148
|
wrapUp?.onClick();
|
|
149
149
|
return;
|
|
150
150
|
}
|
|
151
|
-
onTaskLaunch?.(
|
|
151
|
+
onTaskLaunch?.(tabs[activeIndex].id);
|
|
152
152
|
}
|
|
153
153
|
}
|
|
154
154
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskManagerTabs.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAEL,UAAU,EACV,UAAU,EACV,SAAS,EAGT,OAAO,EAEP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EAChB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAA0C,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,EACL,qBAAqB,EACrB,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAGvD,MAAM,eAAe,GAA2D,UAAU,CACxF,CAAC,KAA4C,EAAE,GAAgC,EAAE,EAAE;IACjF,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAE5E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAc,KAAK,CAAC,CAAC;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,iFAAiF;IACjF,MAAM,OAAO,GAA+B,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,SAAS,EAAiB,CAAC,CAAC;IACxF,MAAM,SAAS,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,MAAM,kBAAkB,GAAoB,SAAS,CAAC,GAAG,CACvD,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;YAClC,OAAO;gBACL,OAAO,EAAE,IAAI;gBACb,SAAS;gBACT,EAAE;gBACF,QAAQ,EAAE,CAAC,CAAC,MAAM;gBAClB,OAAO,EAAE,GAAG,CAAC,EAAE;oBACb,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC;gBACtB,CAAC;aACF,CAAC;QACJ,CAAC,CACF,CAAC;QACF,IAAI,MAAM,EAAE,OAAO,EAAE;YACnB,kBAAkB,CAAC,IAAI,CAAC;gBACtB,OAAO,EAAE,CAAC,CAAC,sBAAsB,CAAC;gBAClC,SAAS,EAAE,EAAE;gBACb,EAAE,EAAE,EAAE;gBACN,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM;gBACzB,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,EAAE,OAAO,EAAE,CAAC;gBACpB,CAAC;aACF,CAAC,CAAC;SACJ;QAED,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5D,MAAM,sBAAsB,GAAoB,aAAa,CAAC,GAAG,CAC/D,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;YAClC,OAAO;gBACL,OAAO,EAAE,IAAI;gBACb,SAAS;gBACT,EAAE;gBACF,QAAQ,EAAE,CAAC,CAAC,MAAM;gBAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;gBACrB,CAAC;aACF,CAAC;QACJ,CAAC,CACF,CAAC;QACF,MAAM,cAAc,GAAuB,EAAE,CAAC;QAC9C,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;YACjC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YAC7E,cAAc;iBACX,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,YAAY,CAAC;gBAC/C,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,kBAAkB,CAAC,CAAC;SACxC;QACD,IAAI,sBAAsB,CAAC,MAAM,GAAG,CAAC,EAAE;YACrC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YACrF,cAAc;iBACX,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,gBAAgB,CAAC;gBACnD,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,sBAAsB,CAAC,CAAC;SAC5C;QACD,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,2BAA2B,GAAG,GAAG,EAAE;QACvC,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC;YAC9E,IAAI,KAAK,KAAK,aAAa,EAAE;gBAC3B,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,OAAO,KAAK,CAAC;aACd;SACF;QACD,OAAO,aAAa,CAAC;IACvB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7C,2BAA2B,EAAE,CAAC;QAChC,CAAC,CAAC,CAAC;QACH,IAAI,UAAU,EAAE,OAAO;YAAE,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,OAAkB,CAAC,CAAC;QAChF,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC,CAAC;IAElC,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,2BAA2B,EAAE;YAAE,OAAO;QAC3C,MAAM,YAAY,GAAG,CAAC,GAAG,OAAO,EAAE,SAAS,CAAC,CAAC,IAAI,CAC/C,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAC9D,CAAC;QAEF,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE;YAC9D,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACnE,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC;YAEpD,6BAA6B;YAC7B,IAAI,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,aAAa,CAAC,KAAK,IAAI,YAAY,EAAE;gBAClE,UAAU,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG;oBACjC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;oBAC3E,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC;aACrC;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpB,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,KAAc,EAAQ,EAAE;QACpE,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,KAAK,CAAC,MAAM,EAAE;YAChB,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YACtB,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,WAAW,EAAE;gBAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,SAAS,CAAC;gBACd,IAAI,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE;oBAC9C,SAAS,GAAG,CAAC,CAAC;iBACf;qBAAM;oBACL,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,EAAE,OAAO,EAAE;wBACjD,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC5B,OAAO;qBACR;oBACD,SAAS,GAAG,KAAM,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBACxD;gBACD,WAAW,GAAG,SAAS,CAAC;gBACxB,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;gBAC5C,OAAO,EAAE,KAAK,EAAE,CAAC;aAClB;iBAAM,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,SAAS,EAAE;gBACnD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,SAAS,CAAC;gBACd,IAAI,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE;oBAC9C,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC9B;qBAAM;oBACL,IAAI,KAAK,KAAK,CAAC,IAAI,MAAM,EAAE,OAAO,EAAE;wBAClC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC5B,OAAO;qBACR;oBACD,SAAS,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAM,GAAG,CAAC,CAAC;iBACzD;gBACD,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;gBAC5C,WAAW,GAAG,SAAS,CAAC;gBACxB,OAAO,EAAE,KAAK,EAAE,CAAC;aAClB;iBAAM,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,GAAG,EAAE;gBACzC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE;oBAC9C,MAAM,EAAE,OAAO,EAAE,CAAC;oBAClB,OAAO;iBACR;gBACD,YAAY,EAAE,CAAC,KAAK,CAAC,WAAY,CAAC,CAAC,EAAE,CAAC,CAAC;aACxC;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,qBAAqB,EAAE,GAAG,EAAE,GAAG,YAChD,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,EAAE,OAAO,CAAC,IAAI,CACxC,8BACE,MAAC,kBAAkB,IAAC,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,UAAU,aAC/C,IAAI,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,CAAC,EAAE,EAAE;4BAC/B,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,IAAI,CAAC;4BAC9D,OAAO,CACL,eAAC,oBAAoB,OACf,SAAS,EACb,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,EACf,GAAG,EAAE,EAAE,EACP,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC,mBAClB,MAAM,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzB,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE;oCAC5B,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gCACvB,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oCAC9B,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;oCAClB,IACE,GAAG,KAAK,YAAY;wCACpB,GAAG,KAAK,WAAW;wCACnB,GAAG,KAAK,WAAW;wCACnB,GAAG,KAAK,SAAS;wCACjB,GAAG,KAAK,OAAO;wCACf,GAAG,KAAK,GAAG,EACX;wCACA,CAAC,CAAC,cAAc,EAAE,CAAC;qCACpB;gCACH,CAAC,EACD,MAAM,EAAE,MAAM;gCAEd,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,YACjE,KAAC,aAAa,cAAE,IAAI,CAAC,IAAI,GAAiB,GACrC,CACc,CACxB,CAAC;wBACJ,CAAC,CAAC,EACD,MAAM,EAAE,OAAO,IAAI,CAClB,KAAC,oBAAoB,IACnB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,OAAO,EAAC,SAAS,mBACF,MAAM,CAAC,MAAM,EAC5B,IAAI,EAAC,KAAK,EACV,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE;gCAC5B,cAAc,CAAC,CAAC,CAAC,CAAC;4BACpB,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;gCAC9B,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gCAClB,IACE,GAAG,KAAK,YAAY;oCACpB,GAAG,KAAK,WAAW;oCACnB,GAAG,KAAK,WAAW;oCACnB,GAAG,KAAK,SAAS,EACjB;oCACA,CAAC,CAAC,cAAc,EAAE,CAAC;iCACpB;4BACH,CAAC,EACD,GAAG,EAAE,SAAS,YAEd,yBAAO,CAAC,CAAC,sBAAsB,CAAC,GAAQ,GACnB,CACxB,IACkB,EACrB,KAAC,qBAAqB,IACpB,IAAI,EAAE;wBACJ,KAAK,EAAE,SAAS;wBAChB,IAAI,EAAE,eAAe;qBACtB,EACD,IAAI,EAAC,YAAY,EACjB,QAAQ,QACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,CAAC,CAAC,4BAA4B,CAAC,GACrC,IACD,CACJ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n useContext,\n createRef,\n RefObject,\n KeyboardEvent,\n useMemo,\n PropsWithoutRef,\n useRef,\n useEffect,\n useState,\n useLayoutEffect\n} from 'react';\n\nimport { Flex, ForwardProps, MenuItemProps, MenuProps } from '@pega/cosmos-react-core';\nimport { useDirection, useI18n } from '@pega/cosmos-react-core/lib/hooks';\n\nimport {\n StyledTaskManagerTabs,\n StyleTaskName,\n StyledTasksTabList,\n StyledTaskManagerTab,\n StyledOverflowTabMenu\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport { TaskManagerTabsProps, TaskProps } from './TaskManager.types';\n\nconst TaskManagerTabs: FunctionComponent<TaskManagerTabsProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TaskManagerTabsProps>, ref: TaskManagerTabsProps['ref']) => {\n const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);\n\n const [tabs, setTabs] = useState<TaskProps[]>(tasks);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n // Used to keep a reference for every tab in order to focus them with key presses\n const tabRefs: RefObject<HTMLLIElement>[] = tasks.map(() => createRef<HTMLLIElement>());\n const wrapUpRef = useRef<HTMLLIElement>(null);\n const tabListRef = useRef<HTMLUListElement>(null);\n\n const { rtl } = useDirection();\n const t = useI18n();\n\n const tasksMenu = useMemo(() => {\n const openTasks = tasks.filter(task => !task.isResolved);\n const openTasksMenuItems: MenuItemProps[] = openTasks.map(\n ({ name, secondary, id, active }) => {\n return {\n primary: name,\n secondary,\n id,\n selected: !!active,\n onClick: idx => {\n onTaskLaunch?.(idx);\n }\n };\n }\n );\n if (wrapUp?.showTab) {\n openTasksMenuItems.push({\n primary: t('task_manager_wrap_up'),\n secondary: [],\n id: '',\n selected: !!wrapUp.active,\n onClick: () => {\n wrapUp?.onClick();\n }\n });\n }\n\n const resolvedTasks = tasks.filter(task => task.isResolved);\n const resolvedTasksMenuItems: MenuItemProps[] = resolvedTasks.map(\n ({ id, name, secondary, active }) => {\n return {\n primary: name,\n secondary,\n id,\n selected: !!active,\n onClick: () => {\n onTaskLaunch?.(id);\n }\n };\n }\n );\n const taskCategories: MenuProps['items'] = [];\n if (openTasksMenuItems.length > 0) {\n taskCategories.push({ id: 'open_tasks', label: t('open_tasks'), items: [] });\n taskCategories\n .find(category => category.id === 'open_tasks')\n ?.items?.push(...openTasksMenuItems);\n }\n if (resolvedTasksMenuItems.length > 0) {\n taskCategories.push({ id: 'resolved_tasks', label: t('resolved_tasks'), items: [] });\n taskCategories\n .find(category => category.id === 'resolved_tasks')\n ?.items?.push(...resolvedTasksMenuItems);\n }\n return taskCategories;\n }, [tasks]);\n\n const checkAndUpdateIsOverflowing = () => {\n if (tabListRef.current) {\n const value = tabListRef.current.scrollWidth > tabListRef.current.clientWidth;\n if (value !== isOverflowing) {\n setIsOverflowing(value);\n return value;\n }\n }\n return isOverflowing;\n };\n\n useEffect(() => {\n setTabs(tasks.filter(task => !task.hideFromTab));\n }, [tasks]);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n checkAndUpdateIsOverflowing();\n });\n if (tabListRef?.current) resizeObserver.observe(tabListRef?.current as Element);\n return () => {\n resizeObserver.disconnect();\n };\n }, [checkAndUpdateIsOverflowing]);\n\n useLayoutEffect(() => {\n if (!checkAndUpdateIsOverflowing()) return;\n const activeTabRef = [...tabRefs, wrapUpRef].find(\n tab => tab?.current?.getAttribute('aria-selected') === 'true'\n );\n\n if (activeTabRef && activeTabRef.current && tabListRef.current) {\n const activeTabRect = activeTabRef.current.getBoundingClientRect();\n const tabListWidth = tabListRef.current.clientWidth;\n\n // Check if it is not in view\n if (activeTabRect.left <= 0 || activeTabRect.right >= tabListWidth) {\n tabListRef.current.scrollLeft = rtl\n ? -(tabListWidth - (activeTabRef.current.offsetLeft + activeTabRect.width))\n : activeTabRef.current.offsetLeft;\n }\n }\n }, [tasks, wrapUp]);\n\n const changeTabFocus = (event: KeyboardEvent, index?: number): void => {\n let activeIndex = index;\n if (tasks.length) {\n const { key } = event;\n if (key === 'ArrowRight' || key === 'ArrowDown') {\n event.preventDefault();\n let nextIndex;\n if (wrapUpRef?.current === event.currentTarget) {\n nextIndex = 0;\n } else {\n if (index === tasks.length - 1 && wrapUp?.showTab) {\n wrapUpRef?.current?.focus();\n return;\n }\n nextIndex = index! + 1 < tasks.length ? index! + 1 : 0;\n }\n activeIndex = nextIndex;\n const nextTab = tabRefs[nextIndex]?.current;\n nextTab?.focus();\n } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n event.preventDefault();\n let prevIndex;\n if (wrapUpRef?.current === event.currentTarget) {\n prevIndex = tasks.length - 1;\n } else {\n if (index === 0 && wrapUp?.showTab) {\n wrapUpRef?.current?.focus();\n return;\n }\n prevIndex = index === 0 ? tasks.length - 1 : index! - 1;\n }\n const prevTab = tabRefs[prevIndex]?.current;\n activeIndex = prevIndex;\n prevTab?.focus();\n } else if (key === 'Enter' || key === ' ') {\n event.preventDefault();\n if (wrapUpRef?.current === event.currentTarget) {\n wrapUp?.onClick();\n return;\n }\n onTaskLaunch?.(tasks[activeIndex!].id);\n }\n }\n };\n\n return (\n <Flex container as={StyledTaskManagerTabs} ref={ref}>\n {(tasks.length > 0 || wrapUp?.showTab) && (\n <>\n <StyledTasksTabList role='tablist' ref={tabListRef}>\n {tabs.map((task: TaskProps, i) => {\n const { id, active = false, icon, meta, ...restProps } = task;\n return (\n <StyledTaskManagerTab\n {...restProps}\n ref={tabRefs[i]}\n key={id}\n onClick={() => onTaskLaunch?.(id)}\n aria-selected={active}\n role='tab'\n tabIndex={active ? 0 : -1}\n onKeyUp={(e: KeyboardEvent) => {\n changeTabFocus(e, i);\n }}\n onKeyDown={(e: KeyboardEvent) => {\n const { key } = e;\n if (\n key === 'ArrowRight' ||\n key === 'ArrowDown' ||\n key === 'ArrowLeft' ||\n key === 'ArrowUp' ||\n key === 'Enter' ||\n key === ' '\n ) {\n e.preventDefault();\n }\n }}\n active={active}\n >\n <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n <StyleTaskName>{task.name}</StyleTaskName>\n </Flex>\n </StyledTaskManagerTab>\n );\n })}\n {wrapUp?.showTab && (\n <StyledTaskManagerTab\n onClick={wrapUp.onClick}\n variant='wrap-up'\n aria-selected={wrapUp.active}\n role='tab'\n active={wrapUp.active}\n tabIndex={wrapUp.active ? 0 : -1}\n onKeyUp={(e: KeyboardEvent) => {\n changeTabFocus(e);\n }}\n onKeyDown={(e: KeyboardEvent) => {\n const { key } = e;\n if (\n key === 'ArrowRight' ||\n key === 'ArrowDown' ||\n key === 'ArrowLeft' ||\n key === 'ArrowUp'\n ) {\n e.preventDefault();\n }\n }}\n ref={wrapUpRef}\n >\n <span>{t('task_manager_wrap_up')}</span>\n </StyledTaskManagerTab>\n )}\n </StyledTasksTabList>\n <StyledOverflowTabMenu\n menu={{\n items: tasksMenu,\n mode: 'single-select'\n }}\n icon='caret-down'\n iconOnly\n variant='simple'\n text={t('task_manager_overflow_menu')}\n />\n </>\n )}\n </Flex>\n );\n }\n);\n\nexport default TaskManagerTabs;\n"]}
|
|
1
|
+
{"version":3,"file":"TaskManagerTabs.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAEL,UAAU,EACV,UAAU,EACV,SAAS,EAGT,OAAO,EAEP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EAChB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,GAAG,EAAE,IAAI,EAA0C,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,EACL,qBAAqB,EACrB,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAGvD,MAAM,eAAe,GAA2D,UAAU,CACxF,CAAC,KAA4C,EAAE,GAAgC,EAAE,EAAE;IACjF,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAE5E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAc,KAAK,CAAC,CAAC;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,iFAAiF;IACjF,MAAM,OAAO,GAA+B,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,SAAS,EAAiB,CAAC,CAAC;IACxF,MAAM,SAAS,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IACzE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,MAAM,kBAAkB,GAAoB,SAAS,CAAC,GAAG,CACvD,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;YAClC,OAAO;gBACL,OAAO,EAAE,IAAI;gBACb,SAAS;gBACT,EAAE;gBACF,QAAQ,EAAE,CAAC,CAAC,MAAM;gBAClB,OAAO,EAAE,GAAG,CAAC,EAAE;oBACb,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC;gBACtB,CAAC;aACF,CAAC;QACJ,CAAC,CACF,CAAC;QACF,IAAI,MAAM,EAAE,OAAO,EAAE;YACnB,kBAAkB,CAAC,IAAI,CAAC;gBACtB,OAAO,EAAE,CAAC,CAAC,sBAAsB,CAAC;gBAClC,SAAS,EAAE,EAAE;gBACb,EAAE,EAAE,EAAE;gBACN,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM;gBACzB,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,EAAE,OAAO,EAAE,CAAC;gBACpB,CAAC;aACF,CAAC,CAAC;SACJ;QAED,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5D,MAAM,sBAAsB,GAAoB,aAAa,CAAC,GAAG,CAC/D,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;YAClC,OAAO;gBACL,OAAO,EAAE,IAAI;gBACb,SAAS;gBACT,EAAE;gBACF,QAAQ,EAAE,CAAC,CAAC,MAAM;gBAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;gBACrB,CAAC;aACF,CAAC;QACJ,CAAC,CACF,CAAC;QACF,MAAM,cAAc,GAAuB,EAAE,CAAC;QAC9C,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;YACjC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YAC7E,cAAc;iBACX,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,YAAY,CAAC;gBAC/C,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,kBAAkB,CAAC,CAAC;SACxC;QACD,IAAI,sBAAsB,CAAC,MAAM,GAAG,CAAC,EAAE;YACrC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YACrF,cAAc;iBACX,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,gBAAgB,CAAC;gBACnD,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,sBAAsB,CAAC,CAAC;SAC5C;QACD,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,2BAA2B,GAAG,GAAG,EAAE;QACvC,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC;YAC9E,IAAI,KAAK,KAAK,aAAa,EAAE;gBAC3B,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,OAAO,KAAK,CAAC;aACd;SACF;QACD,OAAO,aAAa,CAAC;IACvB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7C,2BAA2B,EAAE,CAAC;QAChC,CAAC,CAAC,CAAC;QACH,IAAI,UAAU,EAAE,OAAO;YAAE,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,OAAkB,CAAC,CAAC;QAChF,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC,CAAC;IAElC,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,2BAA2B,EAAE;YAAE,OAAO;QAC3C,MAAM,YAAY,GAAG,CAAC,GAAG,OAAO,EAAE,SAAS,CAAC,CAAC,IAAI,CAC/C,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAC9D,CAAC;QAEF,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE;YAC9D,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACnE,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC;YAEpD,6BAA6B;YAC7B,IAAI,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,aAAa,CAAC,KAAK,IAAI,YAAY,EAAE;gBAClE,UAAU,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG;oBACjC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;oBAC3E,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC;aACrC;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpB,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,KAAc,EAAQ,EAAE;QACpE,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YAEtB,IAAI,GAAG,KAAK,QAAQ,GAAG,CAAC,YAAY,CAAC,EAAE,EAAE;gBACvC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,SAAS,CAAC;gBACd,IAAI,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE;oBAC9C,SAAS,GAAG,CAAC,CAAC;iBACf;qBAAM;oBACL,IAAI,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,EAAE,OAAO,EAAE;wBAChD,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC5B,OAAO;qBACR;oBACD,SAAS,GAAG,KAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBACvD;gBACD,WAAW,GAAG,SAAS,CAAC;gBACxB,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;gBAC5C,OAAO,EAAE,KAAK,EAAE,CAAC;aAClB;iBAAM,IAAI,GAAG,KAAK,QAAQ,GAAG,CAAC,cAAc,CAAC,EAAE,EAAE;gBAChD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,SAAS,CAAC;gBACd,IAAI,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE;oBAC9C,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC7B;qBAAM;oBACL,IAAI,KAAK,KAAK,CAAC,IAAI,MAAM,EAAE,OAAO,EAAE;wBAClC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC5B,OAAO;qBACR;oBACD,SAAS,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAM,GAAG,CAAC,CAAC;iBACxD;gBACD,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;gBAC5C,WAAW,GAAG,SAAS,CAAC;gBACxB,OAAO,EAAE,KAAK,EAAE,CAAC;aAClB;iBAAM,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,GAAG,EAAE;gBACzC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE;oBAC9C,MAAM,EAAE,OAAO,EAAE,CAAC;oBAClB,OAAO;iBACR;gBACD,YAAY,EAAE,CAAC,IAAI,CAAC,WAAY,CAAC,CAAC,EAAE,CAAC,CAAC;aACvC;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,qBAAqB,EAAE,GAAG,EAAE,GAAG,YAChD,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,EAAE,OAAO,CAAC,IAAI,CACxC,8BACE,MAAC,kBAAkB,IAAC,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,UAAU,aAC/C,IAAI,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,CAAC,EAAE,EAAE;4BAC/B,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,IAAI,CAAC;4BAC9D,OAAO,CACL,eAAC,oBAAoB,OACf,SAAS,EACb,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,EACf,GAAG,EAAE,EAAE,EACP,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC,mBAClB,MAAM,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzB,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE;oCAC5B,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gCACvB,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oCAC9B,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;oCAClB,IACE,GAAG,KAAK,YAAY;wCACpB,GAAG,KAAK,WAAW;wCACnB,GAAG,KAAK,WAAW;wCACnB,GAAG,KAAK,SAAS;wCACjB,GAAG,KAAK,OAAO;wCACf,GAAG,KAAK,GAAG,EACX;wCACA,CAAC,CAAC,cAAc,EAAE,CAAC;qCACpB;gCACH,CAAC,EACD,MAAM,EAAE,MAAM;gCAEd,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,YACjE,KAAC,aAAa,cAAE,IAAI,CAAC,IAAI,GAAiB,GACrC,CACc,CACxB,CAAC;wBACJ,CAAC,CAAC,EACD,MAAM,EAAE,OAAO,IAAI,CAClB,KAAC,oBAAoB,IACnB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,OAAO,EAAC,SAAS,mBACF,MAAM,CAAC,MAAM,EAC5B,IAAI,EAAC,KAAK,EACV,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE;gCAC5B,cAAc,CAAC,CAAC,CAAC,CAAC;4BACpB,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;gCAC9B,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gCAClB,IACE,GAAG,KAAK,YAAY;oCACpB,GAAG,KAAK,WAAW;oCACnB,GAAG,KAAK,WAAW;oCACnB,GAAG,KAAK,SAAS,EACjB;oCACA,CAAC,CAAC,cAAc,EAAE,CAAC;iCACpB;4BACH,CAAC,EACD,GAAG,EAAE,SAAS,YAEd,yBAAO,CAAC,CAAC,sBAAsB,CAAC,GAAQ,GACnB,CACxB,IACkB,EACrB,KAAC,qBAAqB,IACpB,IAAI,EAAE;wBACJ,KAAK,EAAE,SAAS;wBAChB,IAAI,EAAE,eAAe;qBACtB,EACD,IAAI,EAAC,YAAY,EACjB,QAAQ,QACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,CAAC,CAAC,4BAA4B,CAAC,GACrC,IACD,CACJ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n useContext,\n createRef,\n RefObject,\n KeyboardEvent,\n useMemo,\n PropsWithoutRef,\n useRef,\n useEffect,\n useState,\n useLayoutEffect\n} from 'react';\n\nimport { cap, Flex, ForwardProps, MenuItemProps, MenuProps } from '@pega/cosmos-react-core';\nimport { useDirection, useI18n } from '@pega/cosmos-react-core/lib/hooks';\n\nimport {\n StyledTaskManagerTabs,\n StyleTaskName,\n StyledTasksTabList,\n StyledTaskManagerTab,\n StyledOverflowTabMenu\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport { TaskManagerTabsProps, TaskProps } from './TaskManager.types';\n\nconst TaskManagerTabs: FunctionComponent<TaskManagerTabsProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TaskManagerTabsProps>, ref: TaskManagerTabsProps['ref']) => {\n const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);\n\n const [tabs, setTabs] = useState<TaskProps[]>(tasks);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n // Used to keep a reference for every tab in order to focus them with key presses\n const tabRefs: RefObject<HTMLLIElement>[] = tasks.map(() => createRef<HTMLLIElement>());\n const wrapUpRef = useRef<HTMLLIElement>(null);\n const tabListRef = useRef<HTMLUListElement>(null);\n\n const { rtl, end: endDirection, start: startDirection } = useDirection();\n const t = useI18n();\n\n const tasksMenu = useMemo(() => {\n const openTasks = tasks.filter(task => !task.isResolved);\n const openTasksMenuItems: MenuItemProps[] = openTasks.map(\n ({ name, secondary, id, active }) => {\n return {\n primary: name,\n secondary,\n id,\n selected: !!active,\n onClick: idx => {\n onTaskLaunch?.(idx);\n }\n };\n }\n );\n if (wrapUp?.showTab) {\n openTasksMenuItems.push({\n primary: t('task_manager_wrap_up'),\n secondary: [],\n id: '',\n selected: !!wrapUp.active,\n onClick: () => {\n wrapUp?.onClick();\n }\n });\n }\n\n const resolvedTasks = tasks.filter(task => task.isResolved);\n const resolvedTasksMenuItems: MenuItemProps[] = resolvedTasks.map(\n ({ id, name, secondary, active }) => {\n return {\n primary: name,\n secondary,\n id,\n selected: !!active,\n onClick: () => {\n onTaskLaunch?.(id);\n }\n };\n }\n );\n const taskCategories: MenuProps['items'] = [];\n if (openTasksMenuItems.length > 0) {\n taskCategories.push({ id: 'open_tasks', label: t('open_tasks'), items: [] });\n taskCategories\n .find(category => category.id === 'open_tasks')\n ?.items?.push(...openTasksMenuItems);\n }\n if (resolvedTasksMenuItems.length > 0) {\n taskCategories.push({ id: 'resolved_tasks', label: t('resolved_tasks'), items: [] });\n taskCategories\n .find(category => category.id === 'resolved_tasks')\n ?.items?.push(...resolvedTasksMenuItems);\n }\n return taskCategories;\n }, [tasks]);\n\n const checkAndUpdateIsOverflowing = () => {\n if (tabListRef.current) {\n const value = tabListRef.current.scrollWidth > tabListRef.current.clientWidth;\n if (value !== isOverflowing) {\n setIsOverflowing(value);\n return value;\n }\n }\n return isOverflowing;\n };\n\n useEffect(() => {\n setTabs(tasks.filter(task => !task.hideFromTab));\n }, [tasks]);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n checkAndUpdateIsOverflowing();\n });\n if (tabListRef?.current) resizeObserver.observe(tabListRef?.current as Element);\n return () => {\n resizeObserver.disconnect();\n };\n }, [checkAndUpdateIsOverflowing]);\n\n useLayoutEffect(() => {\n if (!checkAndUpdateIsOverflowing()) return;\n const activeTabRef = [...tabRefs, wrapUpRef].find(\n tab => tab?.current?.getAttribute('aria-selected') === 'true'\n );\n\n if (activeTabRef && activeTabRef.current && tabListRef.current) {\n const activeTabRect = activeTabRef.current.getBoundingClientRect();\n const tabListWidth = tabListRef.current.clientWidth;\n\n // Check if it is not in view\n if (activeTabRect.left <= 0 || activeTabRect.right >= tabListWidth) {\n tabListRef.current.scrollLeft = rtl\n ? -(tabListWidth - (activeTabRef.current.offsetLeft + activeTabRect.width))\n : activeTabRef.current.offsetLeft;\n }\n }\n }, [tasks, wrapUp]);\n\n const changeTabFocus = (event: KeyboardEvent, index?: number): void => {\n let activeIndex = index;\n if (tabs.length) {\n const { key } = event;\n\n if (key === `Arrow${cap(endDirection)}`) {\n event.preventDefault();\n let nextIndex;\n if (wrapUpRef?.current === event.currentTarget) {\n nextIndex = 0;\n } else {\n if (index === tabs.length - 1 && wrapUp?.showTab) {\n wrapUpRef?.current?.focus();\n return;\n }\n nextIndex = index! + 1 < tabs.length ? index! + 1 : 0;\n }\n activeIndex = nextIndex;\n const nextTab = tabRefs[nextIndex]?.current;\n nextTab?.focus();\n } else if (key === `Arrow${cap(startDirection)}`) {\n event.preventDefault();\n let prevIndex;\n if (wrapUpRef?.current === event.currentTarget) {\n prevIndex = tabs.length - 1;\n } else {\n if (index === 0 && wrapUp?.showTab) {\n wrapUpRef?.current?.focus();\n return;\n }\n prevIndex = index === 0 ? tabs.length - 1 : index! - 1;\n }\n const prevTab = tabRefs[prevIndex]?.current;\n activeIndex = prevIndex;\n prevTab?.focus();\n } else if (key === 'Enter' || key === ' ') {\n event.preventDefault();\n if (wrapUpRef?.current === event.currentTarget) {\n wrapUp?.onClick();\n return;\n }\n onTaskLaunch?.(tabs[activeIndex!].id);\n }\n }\n };\n\n return (\n <Flex container as={StyledTaskManagerTabs} ref={ref}>\n {(tasks.length > 0 || wrapUp?.showTab) && (\n <>\n <StyledTasksTabList role='tablist' ref={tabListRef}>\n {tabs.map((task: TaskProps, i) => {\n const { id, active = false, icon, meta, ...restProps } = task;\n return (\n <StyledTaskManagerTab\n {...restProps}\n ref={tabRefs[i]}\n key={id}\n onClick={() => onTaskLaunch?.(id)}\n aria-selected={active}\n role='tab'\n tabIndex={active ? 0 : -1}\n onKeyUp={(e: KeyboardEvent) => {\n changeTabFocus(e, i);\n }}\n onKeyDown={(e: KeyboardEvent) => {\n const { key } = e;\n if (\n key === 'ArrowRight' ||\n key === 'ArrowDown' ||\n key === 'ArrowLeft' ||\n key === 'ArrowUp' ||\n key === 'Enter' ||\n key === ' '\n ) {\n e.preventDefault();\n }\n }}\n active={active}\n >\n <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n <StyleTaskName>{task.name}</StyleTaskName>\n </Flex>\n </StyledTaskManagerTab>\n );\n })}\n {wrapUp?.showTab && (\n <StyledTaskManagerTab\n onClick={wrapUp.onClick}\n variant='wrap-up'\n aria-selected={wrapUp.active}\n role='tab'\n active={wrapUp.active}\n tabIndex={wrapUp.active ? 0 : -1}\n onKeyUp={(e: KeyboardEvent) => {\n changeTabFocus(e);\n }}\n onKeyDown={(e: KeyboardEvent) => {\n const { key } = e;\n if (\n key === 'ArrowRight' ||\n key === 'ArrowDown' ||\n key === 'ArrowLeft' ||\n key === 'ArrowUp'\n ) {\n e.preventDefault();\n }\n }}\n ref={wrapUpRef}\n >\n <span>{t('task_manager_wrap_up')}</span>\n </StyledTaskManagerTab>\n )}\n </StyledTasksTabList>\n <StyledOverflowTabMenu\n menu={{\n items: tasksMenu,\n mode: 'single-select'\n }}\n icon='caret-down'\n iconOnly\n variant='simple'\n text={t('task_manager_overflow_menu')}\n />\n </>\n )}\n </Flex>\n );\n }\n);\n\nexport default TaskManagerTabs;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-cs",
|
|
3
|
-
"version": "4.0.0-dev.
|
|
3
|
+
"version": "4.0.0-dev.3.0",
|
|
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.
|
|
24
|
-
"@pega/cosmos-react-dnd": "4.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "4.0.0-dev.3.0",
|
|
24
|
+
"@pega/cosmos-react-dnd": "4.0.0-dev.3.0",
|
|
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",
|