npm - @pega/cosmos-react-cs - Versions diffs - 3.0.0-dev.9.1 → 3.0.0-rc.10 - Mend

@pega/cosmos-react-cs 3.0.0-dev.9.1 → 3.0.0-rc.10

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.

Files changed (176) hide show

package/lib/components/CallControlPanel/CallControlPanel.js CHANGED Viewed

@@ -1,68 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { CardHeader, CardContent, Button, useI18n, Icon, registerIcon, Flex, ComboBox, Text, Popover, useOuterEvent, useElement, useConsolidatedRef, useDraggable } from '@pega/cosmos-react-core';
-import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
-import * as phoneSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-solid.icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from 'react';
+import { CardContent, useI18n, registerIcon, Flex, ComboBox, Popover, useOuterEvent, useConsolidatedRef, useEscape, Button, CardHeader, Icon, Text, Banner, hasProp } from '@pega/cosmos-react-core';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
-import CalleePicker, { ContactsContext } from './CalleePicker';
 import Call from './Call';
 import StopWatch from './StopWatch';
-import { StyledCallControlPanel, StyledStatusRow } from './CallControlPanel.styles';
+import { StyledCalleePicker, StyledStatusRow } from './CallControlPanel.styles';
 import { UserStatusIcon } from './CallControlPanelIcon';
-registerIcon(plusIcon, caretDownIcon, phoneSolidIcon);
-const resetPopoverToDefaultPosition = (containerRef) => {
-    if (containerRef && containerRef.current)
-        containerRef.current.style.transform = 'translate(0px, 0px)';
-};
-const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusChange, inStatusSince, message, draggable = false, calls, onAddCall, contactsList, onFavoriteToggle, ...restProps }, ref) => {
+import FloatingPanel from './FloatingPanel';
+import { ContactsContext } from './ContactList';
+import CalleePicker from './ContactList/CalleePicker';
+import IncomingCall from './IncomingCall';
+registerIcon(plusIcon);
+const CallControlPanel = forwardRef(({ heading, userStatus, message, draggable = false, calls, onAddCall, contactsList, onFavoriteToggle, visible, interactionTransfer, ...restProps }, ref) => {
     const t = useI18n();
-    const addButtonRef = useRef(null);
+    const newCallButtonRef = useRef(null);
     const [showPopover, setShowPopover] = useState(false);
-    const [collapsed, setCollapsed] = useState(false);
     const containerRef = useConsolidatedRef(ref);
-    const [popoverEl, setPopoverRef] = useElement();
-    const dragRef = useRef(null);
-    useDraggable(containerRef, dragRef);
-    const actionItems = useMemo(() => {
-        return statusOptions.map(({ id, label }) => {
-            return { id, primary: label, selected: id === status };
-        });
-    }, [status, statusOptions]);
-    useOuterEvent('mousedown', [popoverEl], () => {
+    const popoverRef = useRef(null);
+    useOuterEvent('mousedown', [popoverRef], () => {
         setShowPopover(false);
     });
-    const onKeyDown = ({ key }) => {
-        if (key === 'Escape')
-            setShowPopover(false);
+    useEscape(() => setShowPopover(false), popoverRef);
+    const selectedStatusOption = userStatus?.statusOptions.find(s => s.id === userStatus.status);
+    const newCallButton = {
+        id: 'new-call',
+        text: t('call_panel_make_new_call'),
+        onClick: () => setShowPopover(true),
+        icon: 'plus',
+        ref: newCallButtonRef
     };
-    useEffect(() => {
-        document.addEventListener('keydown', onKeyDown);
-        return () => {
-            document.removeEventListener('keydown', onKeyDown);
-        };
-    }, [popoverEl]);
-    const headerHeight = containerRef.current?.querySelector('header')?.offsetHeight || 0;
-    const selectedStatusOption = statusOptions.find(s => s.id === status);
     return (_jsx(ContactsContext.Provider, { value: {
             contacts: contactsList,
             onFavoriteToggle
-        }, children: _jsxs(StyledCallControlPanel, { ref: containerRef, ...restProps, isCollapsed: collapsed, isDraggable: draggable, style: { '--headerHeight': `${headerHeight}px` }, children: [_jsx(CardHeader, { ref: !collapsed && draggable ? dragRef : undefined, actions: _jsxs(_Fragment, { children: [_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('call_panel_make_new_call'), ref: addButtonRef, onClick: () => {
-                                    setShowPopover(true);
-                                }, children: _jsx(Icon, { name: 'plus' }) }, 'new-call'), _jsx(Button, { icon: true, variant: 'simple', "aria-label": t(collapsed ? 'call_panel_expand' : 'call_panel_collapse'), onClick: () => {
-                                    resetPopoverToDefaultPosition(containerRef);
-                                    setCollapsed(state => !state);
-                                }, children: _jsx(Icon, { name: 'caret-down' }) }, 'expand-collapse')] }), children: _jsxs(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: [_jsx(Icon, { name: 'phone-solid' }), _jsx(Text, { variant: 'h3', children: heading })] }) }), _jsxs(CardContent, { container: { itemGap: 2 }, children: [_jsxs(Flex, { as: StyledStatusRow, container: { alignItems: 'start', itemGap: 1 }, children: [_jsx(UserStatusIcon, { variant: 'dot', status: selectedStatusOption?.status }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(ComboBox, { label: t('call_panel_agent_status'), labelHidden: true, selected: {
+        }, children: _jsxs(FloatingPanel, { ...restProps, ref: containerRef, draggable: draggable, visible: visible, heading: heading, actions: onAddCall ? [newCallButton] : undefined, children: [_jsxs(CardContent, { container: { itemGap: 2 }, children: [message && _jsx(Banner, { ...message }), interactionTransfer && (_jsx(Banner, { id: 'interaction-transfer', variant: 'info', heading: t('call_panel_interaction_transfer_heading'), onDismiss: interactionTransfer.onCancel, messages: [], action: _jsxs(Flex, { container: true, children: [_jsx(Button, { variant: 'simple', onClick: interactionTransfer.onCancel, children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: interactionTransfer.onComplete, children: t('call_panel_interaction_transfer_complete_button_label') })] }) })), userStatus ? (_jsxs(Flex, { as: StyledStatusRow, container: { alignItems: 'start', itemGap: 1 }, children: [_jsx(UserStatusIcon, { variant: 'dot', status: selectedStatusOption?.status }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(ComboBox, { label: t('call_panel_agent_status'), labelHidden: true, selected: {
                                             items: {
-                                                id: status,
-                                                text: selectedStatusOption?.label || ''
+                                                id: userStatus.status,
+                                                text: selectedStatusOption?.label || userStatus.status
                                             }
                                         }, menu: {
-                                            items: actionItems,
-                                            onItemClick: id => onStatusChange(id)
-                                        }, info: message }) }), _jsx(StopWatch, { startTime: inStatusSince })] }), calls.map(callProps => (_jsx(Call, { ...callProps }, callProps.id)))] }), showPopover && (_jsx(Popover, { target: addButtonRef.current, ref: setPopoverRef, placement: 'top-end', children: _jsx(CalleePicker, { heading: t('call_panel_new_call_heading'), onClose: () => setShowPopover(false), onCall: phoneNumber => {
-                            onAddCall(phoneNumber);
-                            setShowPopover(false);
-                        } }) }))] }) }));
+                                            items: userStatus.statusOptions.map(({ id, label, disabled }) => {
+                                                return { id, primary: label, selected: id === userStatus.status, disabled };
+                                            }),
+                                            onItemClick: userStatus.onChange
+                                        } }) }), _jsx(StopWatch, { startTime: userStatus.inStatusSince })] })) : undefined, calls.map(callProps => hasProp(callProps, 'onAcceptCall') ? (_jsx(IncomingCall, { ...callProps }, callProps.id)) : (_jsx(Call, { ...callProps }, callProps.id)))] }), showPopover && (_jsx(Popover, { target: newCallButtonRef.current, ref: popoverRef, placement: 'top-end', modifiers: [
+                        {
+                            name: 'flip',
+                            options: {
+                                fallbackPlacements: ['bottom-end', 'left', 'right']
+                            }
+                        }
+                    ], children: _jsxs(StyledCalleePicker, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: () => setShowPopover(false), children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_new_call_heading') }) }) }), _jsx(CardContent, { container: { itemGap: 2 }, children: _jsx(CalleePicker, { variant: 'action', onSelection: phoneNumber => {
+                                        onAddCall?.(phoneNumber);
+                                        setShowPopover(false);
+                                    } }) })] }) }))] }) }));
 });
 export default CallControlPanel;
 //# sourceMappingURL=CallControlPanel.js.map

package/lib/components/CallControlPanel/CallControlPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n CSSProperties,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n RefObject,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n CardHeader,\n CardContent,\n Button,\n useI18n,\n Icon,\n registerIcon,\n Flex,\n ComboBox,\n Text,\n Popover,\n useOuterEvent,\n useElement,\n ForwardProps,\n useConsolidatedRef,\n useDraggable\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as phoneSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-solid.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport CalleePicker, { ContactsContext } from './CalleePicker';\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCallControlPanel, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\n\nregisterIcon(plusIcon, caretDownIcon, phoneSolidIcon);\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n if (containerRef && containerRef.current)\n containerRef.current.style.transform = 'translate(0px, 0px)';\n};\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n status,\n statusOptions,\n onStatusChange,\n inStatusSince,\n message,\n draggable = false,\n calls,\n onAddCall,\n contactsList,\n onFavoriteToggle,\n ...restProps\n }: PropsWithoutRef<CallControlPanelProps>,\n ref: CallControlPanelProps['ref']\n ) => {\n const t = useI18n();\n const addButtonRef = useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = useState(false);\n const [collapsed, setCollapsed] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n const dragRef = useRef<HTMLDivElement>(null);\n useDraggable(containerRef, dragRef);\n\n const actionItems = useMemo(() => {\n return statusOptions.map(({ id, label }) => {\n return { id, primary: label, selected: id === status };\n });\n }, [status, statusOptions]);\n\n useOuterEvent('mousedown', [popoverEl], () => {\n setShowPopover(false);\n });\n\n const onKeyDown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape') setShowPopover(false);\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyDown);\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [popoverEl]);\n\n const headerHeight = containerRef.current?.querySelector('header')?.offsetHeight \|\| 0;\n\n const selectedStatusOption = statusOptions.find(s => s.id === status);\n\n return (\n <ContactsContext.Provider\n value={{\n contacts: contactsList,\n onFavoriteToggle\n }}\n >\n <StyledCallControlPanel\n ref={containerRef}\n {...restProps}\n isCollapsed={collapsed}\n isDraggable={draggable}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader\n ref={!collapsed && draggable ? dragRef : undefined}\n actions={\n <>\n <Button\n icon\n variant='simple'\n key='new-call'\n aria-label={t('call_panel_make_new_call')}\n ref={addButtonRef}\n onClick={() => {\n setShowPopover(true);\n }}\n >\n <Icon name='plus' />\n </Button>\n <Button\n icon\n variant='simple'\n key='expand-collapse'\n aria-label={t(collapsed ? 'call_panel_expand' : 'call_panel_collapse')}\n onClick={() => {\n resetPopoverToDefaultPosition(containerRef);\n setCollapsed(state => !state);\n }}\n >\n <Icon name='caret-down' />\n </Button>\n </>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Icon name='phone-solid' />\n <Text variant='h3'>{heading}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 2 }}>\n <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n <Flex item={{ grow: 1 }}>\n <ComboBox\n label={t('call_panel_agent_status')}\n labelHidden\n selected={{\n items: {\n id: status,\n text: selectedStatusOption?.label \|\| ''\n }\n }}\n menu={{\n items: actionItems,\n onItemClick: id => onStatusChange(id)\n }}\n info={message}\n />\n </Flex>\n <StopWatch startTime={inStatusSince} />\n </Flex>\n {calls.map(callProps => (\n <Call key={callProps.id} {...callProps} />\n ))}\n </CardContent>\n {showPopover && (\n <Popover target={addButtonRef.current} ref={setPopoverRef} placement='top-end'>\n <CalleePicker\n heading={t('call_panel_new_call_heading')}\n onClose={() => setShowPopover(false)}\n onCall={phoneNumber => {\n onAddCall(phoneNumber);\n setShowPopover(false);\n }}\n />\n </Popover>\n )}\n </StyledCallControlPanel>\n </ContactsContext.Provider>\n );\n }\n);\n\nexport default CallControlPanel;\n"]}
1	+ {"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState } from 'react';\n\nimport {\n CardContent,\n useI18n,\n registerIcon,\n Flex,\n ComboBox,\n Popover,\n useOuterEvent,\n ForwardProps,\n useConsolidatedRef,\n useEscape,\n Button,\n CardHeader,\n Icon,\n Text,\n Banner,\n hasProp\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCalleePicker, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\nimport FloatingPanel, { FloatingPanelActionProps } from './FloatingPanel';\nimport { ContactsContext } from './ContactList';\nimport CalleePicker from './ContactList/CalleePicker';\nimport IncomingCall from './IncomingCall';\n\nregisterIcon(plusIcon);\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n userStatus,\n message,\n draggable = false,\n calls,\n onAddCall,\n contactsList,\n onFavoriteToggle,\n visible,\n interactionTransfer,\n ...restProps\n }: PropsWithoutRef<CallControlPanelProps>,\n ref: CallControlPanelProps['ref']\n ) => {\n const t = useI18n();\n const newCallButtonRef = useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const popoverRef = useRef<HTMLDivElement>(null);\n\n useOuterEvent('mousedown', [popoverRef], () => {\n setShowPopover(false);\n });\n\n useEscape(() => setShowPopover(false), popoverRef);\n\n const selectedStatusOption = userStatus?.statusOptions.find(s => s.id === userStatus.status);\n\n const newCallButton: FloatingPanelActionProps = {\n id: 'new-call',\n text: t('call_panel_make_new_call'),\n onClick: () => setShowPopover(true),\n icon: 'plus',\n ref: newCallButtonRef\n };\n\n return (\n <ContactsContext.Provider\n value={{\n contacts: contactsList,\n onFavoriteToggle\n }}\n >\n <FloatingPanel\n {...restProps}\n ref={containerRef}\n draggable={draggable}\n visible={visible}\n heading={heading}\n actions={onAddCall ? [newCallButton] : undefined}\n >\n <CardContent container={{ itemGap: 2 }}>\n {message && <Banner {...message} />}\n {interactionTransfer && (\n <Banner\n id='interaction-transfer'\n variant='info'\n heading={t('call_panel_interaction_transfer_heading')}\n onDismiss={interactionTransfer.onCancel}\n messages={[]}\n action={\n <Flex container>\n <Button variant='simple' onClick={interactionTransfer.onCancel}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={interactionTransfer.onComplete}>\n {t('call_panel_interaction_transfer_complete_button_label')}\n </Button>\n </Flex>\n }\n />\n )}\n {userStatus ? (\n <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n <Flex item={{ grow: 1 }}>\n <ComboBox\n label={t('call_panel_agent_status')}\n labelHidden\n selected={{\n items: {\n id: userStatus.status,\n text: selectedStatusOption?.label \|\| userStatus.status\n }\n }}\n menu={{\n items: userStatus.statusOptions.map(({ id, label, disabled }) => {\n return { id, primary: label, selected: id === userStatus.status, disabled };\n }),\n onItemClick: userStatus.onChange\n }}\n />\n </Flex>\n <StopWatch startTime={userStatus.inStatusSince} />\n </Flex>\n ) : undefined}\n\n {calls.map(callProps =>\n hasProp(callProps, 'onAcceptCall') ? (\n <IncomingCall key={callProps.id} {...callProps} />\n ) : (\n <Call key={callProps.id} {...callProps} />\n )\n )}\n </CardContent>\n {showPopover && (\n <Popover\n target={newCallButtonRef.current}\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 <StyledCalleePicker>\n <CardHeader\n actions={\n <Button\n icon\n variant='simple'\n aria-label={t('close')}\n onClick={() => setShowPopover(false)}\n >\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_new_call_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 2 }}>\n <CalleePicker\n variant='action'\n onSelection={phoneNumber => {\n onAddCall?.(phoneNumber);\n setShowPopover(false);\n }}\n />\n </CardContent>\n </StyledCalleePicker>\n </Popover>\n )}\n </FloatingPanel>\n </ContactsContext.Provider>\n );\n }\n);\n\nexport default CallControlPanel;\n"]}

package/lib/components/CallControlPanel/CallControlPanel.styles.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import { ProgressProps } from '@pega/cosmos-react-core';
-export declare const StyledProgressContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCallContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledIncomingContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledHoldInfo: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").StatusProps, never>;
 export declare const StyledStatusRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSLAProgress: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ProgressProps & {
@@ -8,8 +10,5 @@ export declare const StyledSLAProgress: import("styled-components").StyledCompon
     slaDuration?: number | undefined;
     slaLevel?: number | undefined;
 }, never>;
-export declare const StyledCallControlPanel: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("@pega/cosmos-react-core").CardProps> & {
-    isCollapsed: boolean;
-    isDraggable?: boolean | undefined;
-}, never>;
+export declare const StyledCalleePicker: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=CallControlPanel.styles.d.ts.map

package/lib/components/CallControlPanel/CallControlPanel.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAQL,aAAa,EAKd,MAAM,yBAAyB,CAAC;AAMjC,eAAO,MAAM,~~uBAAuB~~,~~yGAoCnC~~,CAAC;AAIF,eAAO,MAAM,cAAc,qJAI1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAiB3B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;SAwC5B,CAAC;AAIH,eAAO,MAAM,~~sBAAsB;iBACpB~~,~~OAAO;;SA6BpB~~,CAAC"}
1	+ {"version":3,"file":"CallControlPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAQL,aAAa,EAKd,MAAM,yBAAyB,CAAC;AAMjC,eAAO,MAAM,mBAAmB,yGAoC/B,CAAC;AAIF,eAAO,MAAM,uBAAuB,yGASlC,CAAC;AAIH,eAAO,MAAM,cAAc,qJAI1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAiB3B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;SAwC5B,CAAC;AAIH,eAAO,MAAM,kBAAkB,mOAI9B,CAAC"}

package/lib/components/CallControlPanel/CallControlPanel.styles.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, StyledBackdrop, StyledButton, StyledFlex, StyledProgressBar, StyledSummaryItemActions, StyledVisual, StyledSummaryItem, StyledCard, StyledPrimary, StyledSecondary } from '@pega/cosmos-react-core';
+import { defaultThemeProp, StyledBackdrop, StyledButton, StyledFlex, StyledProgressBar, StyledSummaryItemActions, StyledVisual, StyledSummaryItem, StyledPrimary, StyledSecondary, Card } from '@pega/cosmos-react-core';
 import { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';
-import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
+import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
 import { StyledStopWatch } from './StopWatch';
-export const StyledProgressContainer = styled.div(({ theme: { base: { spacing }, components: { card } } }) => {
+export const StyledCallContainer = styled.div(({ theme: { base: { spacing }, components: { card } } }) => {
     return css `
       position: relative;
       > ${StyledBackdrop} {
@@ -18,7 +18,7 @@ export const StyledProgressContainer = styled.div(({ theme: { base: { spacing },
         box-sizing: content-box;
         position: relative;
         height: 2rem;
-        padding: 0 1rem;
+        padding-inline: calc(2 * ${spacing});
         border-top: 0;
         > ${StyledVisual} {
           transform: rotate(50deg);
@@ -33,7 +33,18 @@ export const StyledProgressContainer = styled.div(({ theme: { base: { spacing },
       }
     `;
 });
-StyledProgressContainer.defaultProps = defaultThemeProp;
+StyledCallContainer.defaultProps = defaultThemeProp;
+export const StyledIncomingContainer = styled(StyledCallContainer)(({ theme }) => {
+    return css `
+    background-color: ${theme.base.colors.gray['extra-light']};
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    > ${StyledSummaryItem} {
+      height: 3rem;
+    }
+  `;
+});
+StyledIncomingContainer.defaultProps = defaultThemeProp;
 export const StyledHoldInfo = styled(StyledStatus) `
   position: absolute;
   top: 0;
@@ -86,33 +97,10 @@ export const StyledSLAProgress = styled(StyledProgressBar)(({ theme, slaDuration
   `;
 });
 StyledSLAProgress.defaultProps = defaultThemeProp;
-export const StyledCallControlPanel = styled(StyledCard)(({ theme, isCollapsed, isDraggable }) => {
-    return css `
-    position: fixed;
-    z-index: ${theme.base['z-index'].modal};
-    width: 25rem;
-    inset-inline-end: calc(2 * ${theme.base.spacing});
-    bottom: calc(2 * ${theme.base.spacing});
-    box-shadow: ${theme.base.shadow.high};
-    ${isCollapsed &&
-        css `
-      transform: translateY(
-        calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))
-      ) !important;
-    `}
-    ${StyledCardHeader} {
-      ${!isCollapsed &&
-        isDraggable &&
-        css `
-        cursor: all-scroll;
-      `}
-    }
-    ${StyledCardHeader} ${StyledButton}:last-child {
-      transition: transform calc(2 * ${theme.base.animation.speed})
-        ${theme.base.animation.timing.ease};
-      transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};
-    }
-  `;
-});
-StyledCallControlPanel.defaultProps = defaultThemeProp;
+export const StyledCalleePicker = styled(Card) `
+  ${StyledTabPanel} {
+    height: 24rem;
+  }
+`;
+StyledCalleePicker.defaultProps = defaultThemeProp;
 //# sourceMappingURL=CallControlPanel.styles.js.map

package/lib/components/CallControlPanel/CallControlPanel.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EAEZ,iBAAiB,EACjB,~~UAAU,EACV,~~aAAa,EACb,eAAe,~~EAChB~~,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AACpF,OAAO,EAAE,~~gBAAgB~~,EAAE,MAAM,~~wDAAwD~~,CAAC;~~AAE1F~~,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,CAAC,MAAM,~~uBAAuB~~,GAAG,MAAM,CAAC,GAAG,~~CAC/C~~,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;UAEJ,cAAc;;;;QAIhB,wBAAwB,IAAI,UAAU,MAAM,YAAY;+BACjC,OAAO;;;UAG5B,iBAAiB~~;;;;;;YAMf~~,YAAY;;;YAGZ,aAAa,OAAO,eAAe;;;;;UAKrC,iBAAiB,MAAM,iBAAiB;qCACb,IAAI,CAAC,UAAU;;KAE/C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;sBAEQ,MAAM;;UAElB,eAAe;uBACF,MAAM;;KAExB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAExD,CAAC,EAAE,KAAK,EAAE,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzC,MAAM,EACJ,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,GACvE,QAAQ,KAAK,SAAS;QACpB,CAAC,CAAC;YACE,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE;YACrE,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;YACvE,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE;SAClE,CAAC,QAAQ,CAAC;QACb,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IAEnE,OAAO,GAAG,CAAA;;;;wBAIY,OAAO;gCACC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;wBAGnC,QAAQ;;;;;;;;;;;0BAWN,OAAO;;0BAEP,QAAQ,IAAI,WAAW;;GAE9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,~~sBAAsB~~,GAAG,MAAM,CAAC,~~UAAU,CAAC,CAGrD,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,EAAE;IACzC,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,~~IAAI,CAAC,~~SAAS,CAAC,CAAC,KAAK;;iCAET,KAAK,CAAC,IAAI,CAAC,OAAO;uBAC5B,KAAK,CAAC,IAAI,CAAC,OAAO;kBACvB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;MAClC,WAAW;QACb,GAAG,~~CAAA~~;;qDAE8C,KAAK,CAAC,IAAI,CAAC,OAAO;;KAElE~~;~~MACC~~,~~gBAAgB;QACd~~,CAAC~~,WAAW~~;~~QACd~~,~~WAAW;QACX~~,~~GAAG,CAAA;;OAEF;;MAED,gBAAgB,IAAI,YAAY;uCACC,KAAK,~~CAAC,~~IAAI,CAAC,SAAS,CAAC,KAAK;UACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;mBACvB,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;;GAE7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,~~YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n StyledBackdrop,\n StyledButton,\n StyledFlex,\n StyledProgressBar,\n StyledSummaryItemActions,\n StyledVisual,\n ProgressProps,\n StyledSummaryItem,\n ~~StyledCard~~,\n ~~StyledPrimary~~,\n ~~StyledSecondary~~\n} from '@pega/cosmos-react-core';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { ~~StyledCardHeader~~ } from '@pega/cosmos-react-core/lib/components/~~Card~~/~~CardHeader~~';\n\nimport { StyledStopWatch } from './StopWatch';\n\nexport const ~~StyledProgressContainer~~ = styled.div(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n position: relative;\n > ${StyledBackdrop} {\n z-index: 0;\n }\n\n ${StyledSummaryItemActions} ${StyledFlex} + ${StyledButton} {\n margin-inline-start: ${spacing};\n }\n\n > ${StyledSummaryItem} {\n box-sizing: content-box;\n position: relative;\n height: 2rem;\n padding: 0 ~~1rem~~;\n border-top: 0;\n > ${StyledVisual} {\n transform: rotate(50deg);\n }\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n }\n }\n\n > ${StyledSummaryItem} ~ ${StyledSummaryItem} {\n border-top: 0.125rem solid ${card.background};\n }\n `;\n }\n);\n\~~nStyledProgressContainer~~.defaultProps = defaultThemeProp;\n\nexport const StyledHoldInfo = styled(StyledStatus)`\n position: absolute;\n top: 0;\n transform: translateY(-50%);\n`;\n\nStyledHoldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledStatusRow = styled.div(\n ({\n theme: {\n components: {\n input: { height }\n }\n }\n }) => {\n return css`\n > * {\n min-height: ${height};\n }\n > ${StyledStopWatch} {\n line-height: ${height};\n }\n `;\n }\n);\n\nStyledStatusRow.defaultProps = defaultThemeProp;\n\nexport const StyledSLAProgress = styled(StyledProgressBar)<\n ProgressProps & { slaDuration?: number; slaLevel?: number }\n>(({ theme, slaDuration = 0, slaLevel }) => {\n const {\n base: { colors }\n } = theme;\n\n const { bgColor = colors.red['extra-light'], fgColor = colors.red.light } =\n slaLevel !== undefined\n ? [\n { bgColor: colors.green['extra-light'], fgColor: colors.green.light },\n { bgColor: colors.orange['extra-light'], fgColor: colors.orange.light },\n { bgColor: colors.red['extra-light'], fgColor: colors.red.light }\n ][slaLevel]\n : { bgColor: colors.slate.light, fgColor: colors.slate.light };\n\n return css`\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: ${bgColor};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n /* Fancy way to restart the animation by changing it's name. /\n @keyframes FillIn-${slaLevel} {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n &::before {\n background-color: ${fgColor};\n border-radius: 0;\n animation: FillIn-${slaLevel} ${slaDuration}s linear;\n }\n `;\n});\n\nStyledSLAProgress.defaultProps = defaultThemeProp;\n\nexport const ~~StyledCallControlPanel~~ = styled(~~StyledCard~~)~~<{\~~n ~~isCollapsed: boolean;\n isDraggable?: boolean;\n}>(({ theme, isCollapsed, isDraggable }) => {\n return css`\n position: fixed;\n z-index:~~ ${~~theme.base['z-index'].modal~~}~~;\n width:~~ ~~25rem;\n inset-inline-end: calc(2 $~~{~~theme.base.spacing});\n bottom: calc(2 * ${theme.base.spacing});\n box-shadow: ${theme.base.shadow.high};\n ${isCollapsed &&\n css`\n transform: translateY(~~\n ~~calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))\n ) !important;\n~~ ~~`}\n ${StyledCardHeader} {\n ${!isCollapsed &&\n isDraggable &&\n css`\n cursor~~: ~~all-scroll~~;\n `}\n }\n ${StyledCardHeader} ${StyledButton}:last-child {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n }\n `;\n~~});\n~~\~~nStyledCallControlPanel~~.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n StyledBackdrop,\n StyledButton,\n StyledFlex,\n StyledProgressBar,\n StyledSummaryItemActions,\n StyledVisual,\n ProgressProps,\n StyledSummaryItem,\n StyledPrimary,\n StyledSecondary,\n Card\n} from '@pega/cosmos-react-core';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { StyledStopWatch } from './StopWatch';\n\nexport const StyledCallContainer = styled.div(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n position: relative;\n > ${StyledBackdrop} {\n z-index: 0;\n }\n\n ${StyledSummaryItemActions} ${StyledFlex} + ${StyledButton} {\n margin-inline-start: ${spacing};\n }\n\n > ${StyledSummaryItem} {\n box-sizing: content-box;\n position: relative;\n height: 2rem;\n padding-inline: calc(2 * ${spacing});\n border-top: 0;\n > ${StyledVisual} {\n transform: rotate(50deg);\n }\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n }\n }\n\n > ${StyledSummaryItem} ~ ${StyledSummaryItem} {\n border-top: 0.125rem solid ${card.background};\n }\n `;\n }\n);\n\nStyledCallContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIncomingContainer = styled(StyledCallContainer)(({ theme }) => {\n return css`\n background-color: ${theme.base.colors.gray['extra-light']};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n > ${StyledSummaryItem} {\n height: 3rem;\n }\n `;\n});\n\nStyledIncomingContainer.defaultProps = defaultThemeProp;\n\nexport const StyledHoldInfo = styled(StyledStatus)`\n position: absolute;\n top: 0;\n transform: translateY(-50%);\n`;\n\nStyledHoldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledStatusRow = styled.div(\n ({\n theme: {\n components: {\n input: { height }\n }\n }\n }) => {\n return css`\n > * {\n min-height: ${height};\n }\n > ${StyledStopWatch} {\n line-height: ${height};\n }\n `;\n }\n);\n\nStyledStatusRow.defaultProps = defaultThemeProp;\n\nexport const StyledSLAProgress = styled(StyledProgressBar)<\n ProgressProps & { slaDuration?: number; slaLevel?: number }\n>(({ theme, slaDuration = 0, slaLevel }) => {\n const {\n base: { colors }\n } = theme;\n\n const { bgColor = colors.red['extra-light'], fgColor = colors.red.light } =\n slaLevel !== undefined\n ? [\n { bgColor: colors.green['extra-light'], fgColor: colors.green.light },\n { bgColor: colors.orange['extra-light'], fgColor: colors.orange.light },\n { bgColor: colors.red['extra-light'], fgColor: colors.red.light }\n ][slaLevel]\n : { bgColor: colors.slate.light, fgColor: colors.slate.light };\n\n return css`\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: ${bgColor};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n /* Fancy way to restart the animation by changing it's name. */\n @keyframes FillIn-${slaLevel} {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n &::before {\n background-color: ${fgColor};\n border-radius: 0;\n animation: FillIn-${slaLevel} ${slaDuration}s linear;\n }\n `;\n});\n\nStyledSLAProgress.defaultProps = defaultThemeProp;\n\nexport const StyledCalleePicker = styled(Card)`\n ${StyledTabPanel} {\n height: 24rem;\n }\n`;\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n"]}

package/lib/components/CallControlPanel/CallControlPanel.types.d.ts CHANGED Viewed

@@ -1,15 +1,8 @@
-import { ReactNode, Ref } from 'react';
-import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
-export declare type Contact = {
-    /** Contact phone number */
-    phoneNumber: string;
-    /** Contact name  */
-    primary: string;
-    /** Additional contact information */
-    secondary: string;
-    /** Determines if contact is favorite */
-    favorite: boolean;
-};
+import type { Ref } from 'react';
+import type { BannerProps, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { FloatingPanelProps } from './FloatingPanel';
+import { Contact } from './ContactList/ContactList.types';
+import type { TransferData, TransferReasonOption } from './CallHandover';
 export interface CallParticipant {
     /** Caller id. */
     id: string;
@@ -18,18 +11,8 @@ export interface CallParticipant {
     /** Additional caller's info. */
     info?: string;
     /** Callback fired when the user ends the call. */
-    onEndCall?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;
+    onHangUp?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;
 }
-export interface TransferReasonOption {
-    readonly id: string;
-    readonly label: string;
-}
-export declare type TransferData = {
-    reason: TransferReasonOption['id'];
-    comments: string;
-    interaction: boolean;
-    phoneNumber: string;
-};
 export interface CallProps {
     /** Call identifier. */
     id: string;
@@ -46,29 +29,52 @@ export interface CallProps {
     /** The flag whether the mic is muted on this call. */
     muted?: boolean;
     /** Callback fired when 'pause' icon has been clicked. */
-    onPauseToggle: (id: CallProps['id']) => void;
+    onPauseToggle?: (id: CallProps['id']) => void;
     /** Callback fired when 'mute' icon has been clicked. */
     onMuteToggle: (id: CallProps['id']) => void;
     /** Callback fired when 'Consult' action has been clicked. */
-    onConsultAction?: (id: CallProps['id'], phoneNumber: string) => void;
+    onConsultAction?: (id: CallProps['id'], transferData: TransferData) => void;
     /** Callback fired when 'Conference' action has been clicked. */
-    onConferenceAction?: (id: CallProps['id'], phoneNumber: string) => void;
+    onConferenceAction?: (id: CallProps['id'], transferData: TransferData) => void;
     /** Callback fired when 'Merge call' action has been chosen. */
     onMergeCall?: (id: CallProps['id']) => void;
     /** Callback fired for every dial pad key press. */
     onDTMFPress?: (id: CallProps['id'], key: string) => void;
     /** Callback fired when 'Transfer' action has been clicked. */
     onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;
+    /** Callback fired when 'Transfer' action has been clicked. */
+    onHandOffCall?: (id: CallProps['id']) => void;
+    /** Callback fired when the user ends the call. */
+    onEndCall?: (id: CallProps['id']) => void;
     /**
      * Transfer reason options
      */
     transferOptions: Readonly<TransferReasonOption[]>;
+    /**
+     * Interaction options
+     */
+    interactionOptions?: Readonly<TransferReasonOption[]>;
 }
-export declare type UserAvailabilityStatus = 'offline' | 'available' | 'busy' | 'away' | 'not_available';
+export interface IncomingCallProps {
+    /** Call identifier. */
+    id: string;
+    /** Call participants. */
+    participant: CallParticipant;
+    /** Callback fired when the user ends the call. */
+    onRejectCall?: (id: CallProps['id']) => void;
+    /** Callback fired when the user accept the call. */
+    onAcceptCall: (id: CallProps['id']) => void;
+}
+export declare type UserAvailabilityStatus = 'available' | 'unavailable' | 'busy' | 'after_work' | 'logout';
 export interface UserAvailabilityStatusOption {
     readonly id: string;
     readonly label: string;
     readonly status: UserAvailabilityStatus;
+    readonly disabled?: boolean;
+}
+export interface InteractionTransferData {
+    onCancel: () => void;
+    onComplete: () => void;
 }
 export interface CallControlPanelProps extends BaseProps, NoChildrenProp {
     /** The heading rendered. */
@@ -76,36 +82,44 @@ export interface CallControlPanelProps extends BaseProps, NoChildrenProp {
     /**
      * User availability statuses.
      */
-    statusOptions: Readonly<UserAvailabilityStatusOption[]>;
-    /** User current status. */
-    status: UserAvailabilityStatusOption['id'];
-    /** Timestamp since the user is in the current status. */
-    inStatusSince: number | Date;
+    userStatus?: {
+        statusOptions: Readonly<UserAvailabilityStatusOption[]>;
+        /** User current status. */
+        status: UserAvailabilityStatusOption['id'];
+        /** Timestamp since the user is in the current status. */
+        inStatusSince: number | Date;
+        /**
+         * Callback fired when user changes their status.
+         * @param value new chosen status.
+         */
+        onChange: (value: UserAvailabilityStatusOption['id']) => void;
+    };
     /** If true, the component will be draggable */
     draggable?: boolean;
     /**
      * Region for messages: errors, notifications, etc.
      */
-    message?: ReactNode;
-    /**
-     * Callback fired when user changes their status.
-     * @param value new chosen status.
-     */
-    onStatusChange: (value: UserAvailabilityStatusOption['id']) => void;
+    message?: Pick<BannerProps, 'id' | 'variant' | 'heading' | 'messages' | 'onDismiss'>;
     /**
      * List of current calls. Having two or more not declared as "on hold" (onHoldSince defined) means there's
      * a conference call.
      */
-    calls: CallProps[];
+    calls: (CallProps | IncomingCallProps)[];
     /**
-     * Callback fired on new call made by the user.
+     * Callback fired on new call made by the user. 'Add call' button is not present if callback is not passed.
      * @param phoneNumber the number chosen.
      */
-    onAddCall: (phoneNumber: string) => void;
+    onAddCall?: (phoneNumber: string) => void;
+    /**
+     * Intraction transfer popup options.
+     */
+    interactionTransfer?: InteractionTransferData;
     /** An array of contacts objects. */
     contactsList: Contact[];
     /** Callback fired on adding/removing contact to/from favorites */
     onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;
+    /** Flag driving panel visibility. */
+    visible?: FloatingPanelProps['visible'];
     /** Reference to the root component. */
     ref?: Ref<HTMLDivElement>;
 }

package/lib/components/CallControlPanel/CallControlPanel.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.types.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,~~SAAS,~~EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;~~AAEvC~~,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;~~AAEpE~~,~~oBAAY,~~OAAO,~~GAAG;IACpB~~,~~2BAA2B;IAC3B~~,~~WAAW~~,EAAE,MAAM,CAAC;~~IACpB~~,~~oBAAoB;IACpB~~,OAAO,EAAE,MAAM,CAAC;~~IAChB~~,~~qCAAqC;IACrC~~,~~SAAS~~,EAAE,~~MAAM~~,~~CAAC;IAClB~~,~~wCAAwC;IACxC~~,~~QAAQ,~~EAAE,~~OAAO~~,~~CAAC;CACnB~~,CAAC;~~AAEF~~,MAAM,WAAW,eAAe;IAC9B,iBAAiB;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,~~SAAS~~,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;~~CACjF~~;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,oBAAY,YAAY,GAAG;IACzB,MAAM,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,uBAAuB;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,yBAAyB;IACzB,YAAY,EAAE,eAAe,EAAE,CAAC;IAChC,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,aAAa,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;~~IAC7C~~,wDAAwD;IACxD,YAAY,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,6DAA6D;IAC7D,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,~~WAAW~~,EAAE,~~MAAM~~,KAAK,IAAI,CAAC;~~IACrE~~,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,~~WAAW~~,EAAE,~~MAAM~~,KAAK,IAAI,CAAC;~~IACxE~~,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,mDAAmD;IACnD,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7E;;OAEG;IACH,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;~~CACnD~~;AAED,oBAAY,sBAAsB,GAAG,~~SAAS~~,GAAG,~~WAAW~~,GAAG,MAAM,GAAG,~~MAAM~~,GAAG,~~eAAe~~,CAAC;~~AAEjG~~,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,sBAAsB,CAAC;~~CACzC~~;AAED,MAAM,WAAW,qBAAsB,SAAQ,SAAS,EAAE,cAAc;IACtE,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,aAAa,EAAE,QAAQ,CAAC,4BAA4B,EAAE,CAAC,CAAC;~~IACxD~~,2BAA2B;~~IAC3B~~,MAAM,EAAE,4BAA4B,CAAC,IAAI,CAAC,CAAC;~~IAC3C~~,yDAAyD;~~IACzD~~,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;~~IAC7B~~,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,~~SAAS~~,CAAC~~;IACpB;;;OAGG;IACH~~,~~cAAc~~,EAAE,~~CAAC~~,~~KAAK~~,~~EAAE~~,~~4BAA4B~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~KAAK~~,~~IAAI~~,CAAC;~~IACpE~~;;;OAGG;IACH,KAAK,EAAE,SAAS,EAAE,CAAC;~~IACnB~~;;;OAGG;IACH,SAAS,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;~~IACzC~~,oCAAoC;IACpC,YAAY,EAAE,OAAO,EAAE,CAAC;IACxB,kEAAkE;IAClE,gBAAgB,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACnE,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
1	+ {"version":3,"file":"CallControlPanel.types.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"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"}

package/lib/components/CallControlPanel/CallControlPanel.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.types.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ~~ReactNode,~~ Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\~~nexport~~ type ~~Contact =~~ {\n /** ~~Contact~~ ~~phone~~ ~~number~~ /\n phoneNumber: string;\n /* Contact ~~name /\n primary:~~ string;\n /* ~~Additional contact information /\n secondary: string~~;\n /* ~~Determines~~ if ~~contact~~ is ~~favorite~~ /\n favorite: ~~boolean~~;\n~~};\n~~\nexport interface CallParticipant {\n /* Caller id. /\n id: string;\n /* Caller's name. /\n name: string;\n /* Additional caller's info. /\n info?: string;\n /* Callback fired when the user ends the call. /\n ~~onEndCall~~?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;\n}\n\nexport interface TransferReasonOption {\n readonly id: string;\n readonly label: string;\n}\n\nexport type TransferData = {\n reason: TransferReasonOption['id'];\n comments: string;\n interaction: boolean;\n phoneNumber: string;\n};\n\nexport interface CallProps {\n /* Call identifier. /\n id: string;\n /* Timestamp when the call has begun. /\n startedAt: number \| Date;\n /* Timestamp when the call has been put on hold. /\n onHoldSince?: number \| Date;\n /* SLA configuration timeups. Array of numbers of seconds after which the particular SLA level\n * time is up.\n /\n slaConfig?: number[];\n /* Call participants. /\n participants: CallParticipant[];\n /* The flag whether the mic is muted on this call. /\n muted?: boolean;\n /* Callback fired when 'pause' icon has been clicked. /\n onPauseToggle: (id: CallProps['id']) => void;\n /* Callback fired when 'mute' icon has been clicked. /\n onMuteToggle: (id: CallProps['id']) => void;\n /* Callback fired when 'Consult' action has been clicked. /\n onConsultAction?: (id: CallProps['id'], ~~phoneNumber~~: ~~string~~) => void;\n /* Callback fired when 'Conference' action has been clicked. /\n onConferenceAction?: (id: CallProps['id'], ~~phoneNumber~~: ~~string~~) => void;\n /* Callback fired when 'Merge call' action has been chosen. /\n onMergeCall?: (id: CallProps['id']) => void;\n /* Callback fired for every dial pad key press. /\n onDTMFPress?: (id: CallProps['id'], key: string) => void;\n /* Callback fired when 'Transfer' action has been clicked. /\n onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /\n Transfer reason options\n /\n transferOptions: Readonly<TransferReasonOption[]>;\n}\n\nexport type UserAvailabilityStatus = '~~offline~~' \| '~~available~~' \| 'busy' \| '~~away~~' \| '~~not_available~~';\n\nexport interface UserAvailabilityStatusOption {\n readonly id: string;\n readonly label: string;\n readonly status: UserAvailabilityStatus;\n}\n\nexport interface CallControlPanelProps extends BaseProps, NoChildrenProp {\n /* The heading rendered. /\n heading: string;\n /\n User availability statuses.\n /\n statusOptions: Readonly<UserAvailabilityStatusOption[]>;\n /* User current status. /\n status: UserAvailabilityStatusOption['id'];\n /* Timestamp since the user is in the current status. /\n inStatusSince: number \| Date;\n /* If true, the component will be draggable /\n draggable?: boolean;\n /\n Region for messages: errors, notifications, etc.\n /\n message?: ReactNode;\n /\n ~~Callback~~ ~~fired~~ ~~when~~ ~~user~~ ~~changes~~ ~~their~~ status.\n * ~~@param~~ ~~value new chosen status.\n /\n onStatusChange: (value: UserAvailabilityStatusOption[~~'id'~~]) => void;\~~n /\n List of current calls. Having two or more not declared as \"on hold\" (onHoldSince defined) means there's\n * a conference call.\n /\n calls: CallProps[];\n /\n Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n /\n onAddCall: (phoneNumber: string) => void;\n /* An array of contacts objects. /\n contactsList: Contact[];\n /* Callback fired on adding/removing contact to/from favorites /\n onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;\n /* Reference to the root component. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
1	+ {"version":3,"file":"CallControlPanel.types.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { BannerProps, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport type { FloatingPanelProps } from './FloatingPanel';\nimport { Contact } from './ContactList/ContactList.types';\nimport type { TransferData, TransferReasonOption } from './CallHandover';\n\nexport interface CallParticipant {\n /** Caller id. /\n id: string;\n /* Caller's name. /\n name: string;\n /* Additional caller's info. /\n info?: string;\n /* Callback fired when the user ends the call. /\n onHangUp?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;\n}\n\nexport interface CallProps {\n /* Call identifier. /\n id: string;\n /* Timestamp when the call has begun. /\n startedAt: number \| Date;\n /* Timestamp when the call has been put on hold. /\n onHoldSince?: number \| Date;\n /* SLA configuration timeups. Array of numbers of seconds after which the particular SLA level\n * time is up.\n /\n slaConfig?: number[];\n /* Call participants. /\n participants: CallParticipant[];\n /* The flag whether the mic is muted on this call. /\n muted?: boolean;\n /* Callback fired when 'pause' icon has been clicked. /\n onPauseToggle?: (id: CallProps['id']) => void;\n /* Callback fired when 'mute' icon has been clicked. /\n onMuteToggle: (id: CallProps['id']) => void;\n /* Callback fired when 'Consult' action has been clicked. /\n onConsultAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /* Callback fired when 'Conference' action has been clicked. /\n onConferenceAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /* Callback fired when 'Merge call' action has been chosen. /\n onMergeCall?: (id: CallProps['id']) => void;\n /* Callback fired for every dial pad key press. /\n onDTMFPress?: (id: CallProps['id'], key: string) => void;\n /* Callback fired when 'Transfer' action has been clicked. /\n onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /* Callback fired when 'Transfer' action has been clicked. /\n onHandOffCall?: (id: CallProps['id']) => void;\n /* Callback fired when the user ends the call. /\n onEndCall?: (id: CallProps['id']) => void;\n /\n Transfer reason options\n /\n transferOptions: Readonly<TransferReasonOption[]>;\n /\n Interaction options\n /\n interactionOptions?: Readonly<TransferReasonOption[]>;\n}\n\nexport interface IncomingCallProps {\n /* Call identifier. /\n id: string;\n /* Call participants. /\n participant: CallParticipant;\n /* Callback fired when the user ends the call. /\n onRejectCall?: (id: CallProps['id']) => void;\n /* Callback fired when the user accept the call. /\n onAcceptCall: (id: CallProps['id']) => void;\n}\n\nexport type UserAvailabilityStatus = 'available' \| 'unavailable' \| 'busy' \| 'after_work' \| 'logout';\n\nexport interface UserAvailabilityStatusOption {\n readonly id: string;\n readonly label: string;\n readonly status: UserAvailabilityStatus;\n readonly disabled?: boolean;\n}\n\nexport interface InteractionTransferData {\n onCancel: () => void;\n onComplete: () => void;\n}\n\nexport interface CallControlPanelProps extends BaseProps, NoChildrenProp {\n /* The heading rendered. /\n heading: string;\n /\n User availability statuses.\n /\n userStatus?: {\n statusOptions: Readonly<UserAvailabilityStatusOption[]>;\n /* User current status. /\n status: UserAvailabilityStatusOption['id'];\n /* Timestamp since the user is in the current status. /\n inStatusSince: number \| Date;\n /\n Callback fired when user changes their status.\n * @param value new chosen status.\n /\n onChange: (value: UserAvailabilityStatusOption['id']) => void;\n };\n /* If true, the component will be draggable /\n draggable?: boolean;\n /\n Region for messages: errors, notifications, etc.\n /\n message?: Pick<BannerProps, 'id' \| 'variant' \| 'heading' \| 'messages' \| 'onDismiss'>;\n /\n List of current calls. Having two or more not declared as \"on hold\" (onHoldSince defined) means there's\n * a conference call.\n /\n calls: (CallProps \| IncomingCallProps)[];\n /\n Callback fired on new call made by the user. 'Add call' button is not present if callback is not passed.\n * @param phoneNumber the number chosen.\n /\n onAddCall?: (phoneNumber: string) => void;\n /\n Intraction transfer popup options.\n /\n interactionTransfer?: InteractionTransferData;\n /* An array of contacts objects. /\n contactsList: Contact[];\n /* Callback fired on adding/removing contact to/from favorites /\n onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;\n /* Flag driving panel visibility. /\n visible?: FloatingPanelProps['visible'];\n /* Reference to the root component. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/CallControlPanel/CallControlPanelIcon.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { FunctionComponent } from 'react';
-import { DefaultTheme } from 'styled-components';
 import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
 import type { UserAvailabilityStatus } from './CallControlPanel.types';
 interface CallControlPanelIconProps extends NoChildrenProp {
@@ -10,9 +9,6 @@ interface CallControlPanelIconProps extends NoChildrenProp {
 interface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {
     variant: 'icon' | 'dot';
 }
-export declare const StyledCallControlPanelIcon: import("styled-components").StyledComponent<"div", DefaultTheme, {
-    userStatus: UserAvailabilityStatus;
-}, never>;
 export declare const UserStatusIcon: FunctionComponent<UserStatusIconProps>;
 declare const CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps>;
 export default CallControlPanelIcon;

package/lib/components/CallControlPanel/CallControlPanelIcon.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanelIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,MAAM,OAAO,CAAC;~~AAChD~~,~~OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,~~OAAO,EAEL,YAAY,EAGZ,cAAc,~~EAKf~~,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAOvE,UAAU,yBAA0B,SAAQ,cAAc;IACxD,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IAC7E,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB;~~AA2DD~~,eAAO,MAAM,~~0BAA0B;gBAzCW,sBAAsB;SAmDvE,CAAC;AAIF,eAAO,MAAM,~~cAAc,EAAE,iBAAiB,CAAC,mBAAmB,~~CA6BjE~~,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,~~CAkBrF~~,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
1	+ {"version":3,"file":"CallControlPanelIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,MAAM,OAAO,CAAC;AAIhD,OAAO,EAEL,YAAY,EAGZ,cAAc,EAMf,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAOvE,UAAU,yBAA0B,SAAQ,cAAc;IACxD,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IAC7E,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB;AAgFD,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CA4BjE,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAWrF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}