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

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

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

package/lib/components/CallControlPanel/AttachInteractionDialog.js

@@ -1,12 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { defaultThemeProp, Flex, useI18n, Form, Banner, ComboBox, TextArea, FormDialog } from '@pega/cosmos-react-core';
-export const StyledInteractionForm = styled(Form)(({ theme: { base: { 'content-width': contentWidth } } }) => {
-    return css `
-      min-width: ${contentWidth.sm};
-    `;
-});
+export const StyledInteractionForm = styled(Form) ``;
 StyledInteractionForm.defaultProps = defaultThemeProp;
 const AttachInteractionDialog = ({ heading, defaultReason, reasonOptions, defaultInteraction, interactionOptions, message, onAddInteraction, onClose, target, close }) => {
     const t = useI18n();

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

@@ -1 +1 @@
-{"version":3,"file":"AttachInteractionDialog.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/AttachInteractionDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState, ChangeEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  useI18n,\n  Form,\n  Banner,\n  ComboBox,\n  TextArea,\n  BannerProps,\n  FormDialog,\n  FormDialogProps\n} from '@pega/cosmos-react-core';\n\nexport interface MenuOption {\n  id: string;\n  label: string;\n}\n\nexport interface AttachInteractionData {\n  /** Selected reason option identifier. */\n  reasonId?: MenuOption['id'];\n  /** Interaction comments. */\n  comments?: string;\n  /** Selected interaction option identifier. */\n  interactionOptionId?: MenuOption['id'];\n}\n\nexport interface AttachInteractionProps {\n  /** The heading of the dialog. */\n  heading: string;\n  /**\n   * Callback invoked when 'Submit' action has been clicked.\n   * Must call given 'close' function on success.\n   */\n  onAddInteraction: (data: AttachInteractionData, arg: { close: () => void }) => void;\n  /** Callback invoked when closing the dialog. */\n  onClose?: () => void;\n  /** Current selected reason */\n  defaultReason?: MenuOption['id'];\n  /** Reason options. The field will be hidden if not passed. */\n  reasonOptions: Readonly<MenuOption[]>;\n  /** Current selected interaction */\n  defaultInteraction?: MenuOption['id'];\n  /** Interaction options. The fill will be hidden if not passed. */\n  interactionOptions?: Readonly<MenuOption[]>;\n  /** Region for messages: errors, notifications, etc. */\n  message?: Pick<BannerProps, 'variant' | 'messages' | 'onDismiss'>;\n}\n\nexport interface AttachInteractionDialogProps\n  extends AttachInteractionProps,\n    Pick<FormDialogProps, 'target'> {\n  /** When invoked, sets the dialog target to null to close. Maintains interface support where onSubmit receives close arg. */\n  close: () => void;\n}\n\nexport const StyledInteractionForm = styled(Form)(\n  ({\n    theme: {\n      base: { 'content-width': contentWidth }\n    }\n  }) => {\n    return css`\n      min-width: ${contentWidth.sm};\n    `;\n  }\n);\n\nStyledInteractionForm.defaultProps = defaultThemeProp;\n\nconst AttachInteractionDialog: FunctionComponent<AttachInteractionDialogProps> = ({\n  heading,\n  defaultReason,\n  reasonOptions,\n  defaultInteraction,\n  interactionOptions,\n  message,\n  onAddInteraction,\n  onClose,\n  target,\n  close\n}: AttachInteractionDialogProps) => {\n  const t = useI18n();\n\n  const initialReason = reasonOptions.find(reason => reason.id === defaultReason);\n  const initialInteraction = interactionOptions?.find(\n    interaction => interaction.id === defaultInteraction\n  );\n\n  const [selectedReason, setSelectedReason] = useState<MenuOption | undefined>(initialReason);\n  const [selectedInteraction, setSelectedInteraction] = useState<MenuOption | undefined>(\n    initialInteraction\n  );\n  const [comments, setComments] = useState('');\n\n  const resetForm = () => {\n    setComments('');\n    setSelectedInteraction(initialInteraction);\n    setSelectedReason(initialReason);\n  };\n\n  return (\n    <FormDialog\n      target={target}\n      heading={heading}\n      onCancel={() => {\n        close();\n        onClose?.();\n        resetForm();\n      }}\n      onSubmit={() => {\n        onAddInteraction(\n          {\n            reasonId: selectedReason?.id,\n            comments,\n            interactionOptionId: selectedInteraction?.id\n          },\n          { close }\n        );\n      }}\n    >\n      <StyledInteractionForm>\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          {message && <Banner {...message} />}\n\n          {interactionOptions && (\n            <ComboBox\n              label={t('call_panel_handover_interaction_label')}\n              selected={{\n                items: selectedInteraction\n                  ? { id: selectedInteraction.id, text: selectedInteraction.label }\n                  : undefined\n              }}\n              menu={{\n                items: interactionOptions.map(({ id, label }) => ({\n                  id,\n                  primary: label,\n                  selected: id === selectedInteraction?.id\n                })),\n                onItemClick: id =>\n                  setSelectedInteraction(interactionOptions?.find(option => option.id === id))\n              }}\n            />\n          )}\n\n          {reasonOptions && (\n            <ComboBox\n              label={t('call_panel_handover_reason_label')}\n              selected={{\n                items: selectedReason\n                  ? { id: selectedReason.id, text: selectedReason.label }\n                  : undefined\n              }}\n              menu={{\n                items: reasonOptions?.map(({ id, label }) => ({\n                  id,\n                  primary: label,\n                  selected: id === selectedReason?.id\n                })),\n                onItemClick: id =>\n                  setSelectedReason(reasonOptions?.find(option => option.id === id))\n              }}\n            />\n          )}\n\n          <TextArea\n            label={t('call_panel_handover_comments_label')}\n            displayCharCount\n            maxLength={300}\n            value={comments}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n          />\n        </Flex>\n      </StyledInteractionForm>\n    </FormDialog>\n  );\n};\n\nexport default AttachInteractionDialog;\n"]}
+{"version":3,"file":"AttachInteractionDialog.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/AttachInteractionDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState, ChangeEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  useI18n,\n  Form,\n  Banner,\n  ComboBox,\n  TextArea,\n  BannerProps,\n  FormDialog,\n  FormDialogProps\n} from '@pega/cosmos-react-core';\n\nexport interface MenuOption {\n  id: string;\n  label: string;\n}\n\nexport interface AttachInteractionData {\n  /** Selected reason option identifier. */\n  reasonId?: MenuOption['id'];\n  /** Interaction comments. */\n  comments?: string;\n  /** Selected interaction option identifier. */\n  interactionOptionId?: MenuOption['id'];\n}\n\nexport interface AttachInteractionProps {\n  /** The heading of the dialog. */\n  heading: string;\n  /**\n   * Callback invoked when 'Submit' action has been clicked.\n   * Must call given 'close' function on success.\n   */\n  onAddInteraction: (data: AttachInteractionData, arg: { close: () => void }) => void;\n  /** Callback invoked when closing the dialog. */\n  onClose?: () => void;\n  /** Current selected reason */\n  defaultReason?: MenuOption['id'];\n  /** Reason options. The field will be hidden if not passed. */\n  reasonOptions: Readonly<MenuOption[]>;\n  /** Current selected interaction */\n  defaultInteraction?: MenuOption['id'];\n  /** Interaction options. The fill will be hidden if not passed. */\n  interactionOptions?: Readonly<MenuOption[]>;\n  /** Region for messages: errors, notifications, etc. */\n  message?: Pick<BannerProps, 'variant' | 'messages' | 'onDismiss'>;\n}\n\nexport interface AttachInteractionDialogProps\n  extends AttachInteractionProps,\n    Pick<FormDialogProps, 'target'> {\n  /** When invoked, sets the dialog target to null to close. Maintains interface support where onSubmit receives close arg. */\n  close: () => void;\n}\n\nexport const StyledInteractionForm = styled(Form)``;\n\nStyledInteractionForm.defaultProps = defaultThemeProp;\n\nconst AttachInteractionDialog: FunctionComponent<AttachInteractionDialogProps> = ({\n  heading,\n  defaultReason,\n  reasonOptions,\n  defaultInteraction,\n  interactionOptions,\n  message,\n  onAddInteraction,\n  onClose,\n  target,\n  close\n}: AttachInteractionDialogProps) => {\n  const t = useI18n();\n\n  const initialReason = reasonOptions.find(reason => reason.id === defaultReason);\n  const initialInteraction = interactionOptions?.find(\n    interaction => interaction.id === defaultInteraction\n  );\n\n  const [selectedReason, setSelectedReason] = useState<MenuOption | undefined>(initialReason);\n  const [selectedInteraction, setSelectedInteraction] = useState<MenuOption | undefined>(\n    initialInteraction\n  );\n  const [comments, setComments] = useState('');\n\n  const resetForm = () => {\n    setComments('');\n    setSelectedInteraction(initialInteraction);\n    setSelectedReason(initialReason);\n  };\n\n  return (\n    <FormDialog\n      target={target}\n      heading={heading}\n      onCancel={() => {\n        close();\n        onClose?.();\n        resetForm();\n      }}\n      onSubmit={() => {\n        onAddInteraction(\n          {\n            reasonId: selectedReason?.id,\n            comments,\n            interactionOptionId: selectedInteraction?.id\n          },\n          { close }\n        );\n      }}\n    >\n      <StyledInteractionForm>\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          {message && <Banner {...message} />}\n\n          {interactionOptions && (\n            <ComboBox\n              label={t('call_panel_handover_interaction_label')}\n              selected={{\n                items: selectedInteraction\n                  ? { id: selectedInteraction.id, text: selectedInteraction.label }\n                  : undefined\n              }}\n              menu={{\n                items: interactionOptions.map(({ id, label }) => ({\n                  id,\n                  primary: label,\n                  selected: id === selectedInteraction?.id\n                })),\n                onItemClick: id =>\n                  setSelectedInteraction(interactionOptions?.find(option => option.id === id))\n              }}\n            />\n          )}\n\n          {reasonOptions && (\n            <ComboBox\n              label={t('call_panel_handover_reason_label')}\n              selected={{\n                items: selectedReason\n                  ? { id: selectedReason.id, text: selectedReason.label }\n                  : undefined\n              }}\n              menu={{\n                items: reasonOptions?.map(({ id, label }) => ({\n                  id,\n                  primary: label,\n                  selected: id === selectedReason?.id\n                })),\n                onItemClick: id =>\n                  setSelectedReason(reasonOptions?.find(option => option.id === id))\n              }}\n            />\n          )}\n\n          <TextArea\n            label={t('call_panel_handover_comments_label')}\n            displayCharCount\n            maxLength={300}\n            value={comments}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n          />\n        </Flex>\n      </StyledInteractionForm>\n    </FormDialog>\n  );\n};\n\nexport default AttachInteractionDialog;\n"]}

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

@@ -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,CAiSrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"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,CAmSrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/CallControlPanel/Call.js

@@ -6,16 +6,16 @@ import * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons
 import * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';
 import * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';
 import * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';
-import * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';
 import * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';
 import * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';
+import * as phoneMergeSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-merge-solid.icon';
 import { DialPadDialog } from '../DialPad';
 import { StyledHoldInfo, StyledCallContainer, StyledSLAProgress } from './CallControlPanel.styles';
 import StopWatch from './StopWatch';
 import { calculateSla } from './utils';
 import CallHandoverDialog from './CallHandover';
-registerIcon(arrowUpIcon, micSolidIcon, micOffSolidIcon, playSoldIcon, pauseSolidIcon, phoneSplitSolidIcon, phoneOutSolidIcon, phoneHangupSolidIcon);
-const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onPauseToggle, muted, onMuteToggle, onDTMFPress, onConsultAction, onConferenceAction, onTransferAction, onMergeCall, onHandOffCall, onEndCall, transferOptions, interactionOptions }) => {
+registerIcon(arrowUpIcon, micSolidIcon, micOffSolidIcon, playSoldIcon, pauseSolidIcon, phoneOutSolidIcon, phoneHangupSolidIcon, phoneMergeSolidIcon);
+const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onPauseToggle, muted, onMuteToggle, onDTMFPress, onConsultAction, onConferenceAction, onTransferAction, onMergeCall, onHandOffCall, onEndCall, defaultTransfer, transferOptions, defaultInteraction, interactionOptions }) => {
     const t = useI18n();
     const moreActionsButtonRef = useRef(null);
     const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;
@@ -36,17 +36,19 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
         return () => clearTimeout(timer);
     }, [inCallSince, slaLevel]);
     return (_jsxs(StyledCallContainer, { children: [_jsx(StyledSLAProgress, { determinate: true, placement: 'local', slaDuration: slaDuration, slaLevel: slaLevel }), participants.map((item, index) => {
-                return (_jsx(SummaryItem, { container: index === 0
-                        ? {
-                            areas: '"primary secondary actions"',
-                            cols: 'auto minmax(0, 2fr) auto'
-                        }
-                        : {
-                            areas: '"visual primary secondary actions"',
-                            cols: 'auto auto minmax(0, 2fr) auto'
-                        }, overflowStrategy: 'ellipsis', visual: index !== 0 && _jsx(Icon, { name: 'arrow-up' }), primary: item.name, secondary: item.info && _jsx(Text, { variant: 'secondary', children: item.info }), actions: index === 0 ? (_jsxs(Flex, { container: { wrap: 'nowrap' }, children: [slaConfig && (_jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(StopWatch, { startTime: startedAt, timeout: slaTimeout }) })), _jsx(Button, { icon: true, variant: 'simple', disabled: onHoldSince !== undefined, onClick: () => onMuteToggle(callId), label: t(muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'), children: _jsx(Icon, { name: muted ? 'mic-solid' : 'mic-off-solid' }) }), _jsx(Button, { icon: true, variant: 'simple', disabled: !onPauseToggle, onClick: () => onPauseToggle?.(callId), label: t(onHoldSince !== undefined
+                return (_jsx(SummaryItem, { overflowStrategy: 'ellipsis', visual: index !== 0 && _jsx(Icon, { name: 'arrow-up' }), primary: item.name, secondary: item.info && _jsx(Text, { variant: 'secondary', children: item.info }), actions: index === 0 ? (_jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(StopWatch, { startTime: startedAt, timeout: slaConfig ? slaTimeout : undefined }) }), _jsx(Button, { icon: true, variant: 'simple', disabled: onHoldSince !== undefined, onClick: () => onMuteToggle(callId), label: t(muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'), children: _jsx(Icon, { name: muted ? 'mic-solid' : 'mic-off-solid' }) }), _jsx(Button, { icon: true, variant: 'simple', disabled: !onPauseToggle, onClick: () => onPauseToggle?.(callId), label: t(onHoldSince !== undefined
                                     ? 'call_panel_resume_call_menu_item'
-                                    : 'call_panel_pause_call_menu_item'), children: _jsx(Icon, { name: onHoldSince !== undefined ? 'play-solid' : 'pause-solid' }) }), onHoldSince ? (_jsxs(_Fragment, { children: [onMergeCall && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onMergeCall(callId), label: t('call_panel_merge_call_menu_item'), children: _jsx(Icon, { name: 'phone-split-solid' }) })), onHandOffCall && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onHandOffCall(callId), label: t('call_panel_handoff_call_menu_item'), children: _jsx(Icon, { name: 'phone-out-solid' }) })), _jsx(Button, { icon: true, variant: 'simple', disabled: !onEndCall, onClick: () => onEndCall?.(callId), label: t('call_panel_hangup_call_menu_item'), children: _jsx(Icon, { name: 'phone-hangup-solid' }) }, 'hang_up')] })) : (_jsx(MenuButton, { ref: moreActionsButtonRef, text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', menu: {
+                                    : 'call_panel_pause_call_menu_item'), children: _jsx(Icon, { name: onHoldSince !== undefined ? 'play-solid' : 'pause-solid' }) }), onHoldSince ? (_jsxs(_Fragment, { children: [onMergeCall && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onMergeCall(callId), label: t('call_panel_merge_call_menu_item'), children: _jsx(Icon, { name: 'phone-merge-solid' }) })), onHandOffCall && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onHandOffCall(callId), label: t('call_panel_handoff_call_menu_item'), children: _jsx(Icon, { name: 'phone-out-solid' }) })), _jsx(Button, { icon: true, variant: 'simple', disabled: !onEndCall, onClick: () => onEndCall?.(callId), label: t('call_panel_hangup_call_menu_item'), children: _jsx(Icon, { name: 'phone-hangup-solid' }) }, 'hang_up')] })) : (_jsx(MenuButton, { ref: moreActionsButtonRef, text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', popover: {
+                                    modifiers: [
+                                        {
+                                            name: 'flip',
+                                            enabled: true,
+                                            options: {
+                                                fallbackPlacements: ['bottom-end', 'left', 'right']
+                                            }
+                                        }
+                                    ]
+                                }, menu: {
                                     variant: 'flyout',
                                     items: [
                                         {
@@ -116,7 +118,7 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
                                 } }))] })) : (_jsx(Button, { icon: true, variant: 'simple', disabled: !item.onHangUp, onClick: () => item.onHangUp?.(callId, item.id), label: t('call_panel_hangup_call_menu_item'), children: _jsx(Icon, { name: 'phone-hangup-solid' }) }, 'hang_up')) }, item.id));
             }), onHoldSince !== undefined && (_jsx(Status, { as: StyledHoldInfo, variant: 'pending', children: t('call_panel_call_on_hold', [
                     _jsx(StopWatch, { startTime: onHoldSince })
-                ]) })), dialogType && (_jsx(CallHandoverDialog, { target: moreActionsButtonRef.current, type: dialogType, transferOptions: transferOptions, interactionOptions: interactionOptions, onCancel: () => {
+                ]) })), dialogType && (_jsx(CallHandoverDialog, { target: moreActionsButtonRef.current, type: dialogType, defaultTransfer: defaultTransfer, transferOptions: transferOptions, defaultInteraction: defaultInteraction, interactionOptions: interactionOptions, onCancel: () => {
                     setDialogType(undefined);
                     moreActionsButtonRef.current?.focus();
                 }, onSubmit: transferData => {

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

@@ -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    | '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"]}
+{"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 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';\nimport * as phoneMergeSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-merge-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  phoneOutSolidIcon,\n  phoneHangupSolidIcon,\n  phoneMergeSolidIcon\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  defaultTransfer,\n  transferOptions,\n  defaultInteraction,\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            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                  <Flex container={{ alignItems: 'center' }}>\n                    <StopWatch startTime={startedAt} timeout={slaConfig ? slaTimeout : undefined} />\n                  </Flex>\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-merge-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                      popover={{\n                        modifiers: [\n                          {\n                            name: 'flip',\n                            enabled: true,\n                            options: {\n                              fallbackPlacements: ['bottom-end', 'left', 'right']\n                            }\n                          }\n                        ]\n                      }}\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          defaultTransfer={defaultTransfer}\n          transferOptions={transferOptions}\n          defaultInteraction={defaultInteraction}\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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"CallControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAEzF,OAAO,EAQL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAYtE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAuJ7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CallControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAOL,YAAY,EAWb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAYtE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAuJ7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CallControlPanel/CallControlPanel.js

@@ -1,7 +1,8 @@
 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 { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { CardContent, useI18n, registerIcon, Flex, ComboBox, useOuterEvent, useConsolidatedRef, useEscape, Button, CardHeader, Icon, Text, Banner, hasProp, getFocusables, useFocusTrap } from '@pega/cosmos-react-core';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
 import Call from './Call';
 import StopWatch from './StopWatch';
 import { StyledCalleePicker, StyledStatusRow } from './CallControlPanel.styles';
@@ -11,28 +12,37 @@ 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 CallControlPanel = forwardRef(function CallControlPanel({ heading, userStatus, message, draggable = false, calls, onAddCall, contactsList, onFavoriteToggle, visible, interactionTransfer, ...restProps }, ref) {
     const t = useI18n();
     const newCallButtonRef = useRef(null);
-    const [showPopover, setShowPopover] = useState(false);
+    const [showDialog, setShowDialog] = useState(false);
     const containerRef = useConsolidatedRef(ref);
-    const popoverRef = useRef(null);
-    useOuterEvent('mousedown', [popoverRef], () => {
-        setShowPopover(false);
+    const dialogRef = useRef(null);
+    useOuterEvent('mousedown', [dialogRef], () => {
+        setShowDialog(false);
     });
-    useEscape(() => setShowPopover(false), popoverRef);
+    useEscape(() => setShowDialog(false), dialogRef);
     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),
+        onClick: () => setShowDialog(true),
         icon: 'plus',
         ref: newCallButtonRef
     };
-    return (_jsx(ContactsContext.Provider, { value: {
-            contacts: contactsList,
-            onFavoriteToggle
-        }, 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 && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', as: 'span', children: t('call_panel_interaction_transfer_heading') }), _jsxs("div", { children: [_jsx(Button, { variant: 'secondary', 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: {
+    const ctx = useMemo(() => ({
+        contacts: contactsList,
+        onFavoriteToggle
+    }), [contactsList, onFavoriteToggle]);
+    useFocusTrap(dialogRef);
+    useEffect(() => {
+        if (showDialog) {
+            const focusables = getFocusables(dialogRef);
+            if (focusables[0])
+                focusables[0]?.focus();
+        }
+    }, [showDialog]);
+    return (_jsx(ContactsContext.Provider, { value: ctx, 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 && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', as: 'span', children: t('call_panel_interaction_transfer_heading') }), _jsxs("div", { children: [_jsx(Button, { variant: 'secondary', 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: userStatus.status,
                                                 text: selectedStatusOption?.label || userStatus.status
@@ -42,16 +52,9 @@ const CallControlPanel = forwardRef(({ heading, userStatus, message, draggable =
                                                 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 => {
+                                        } }) }), _jsx(StopWatch, { startTime: userStatus.inStatusSince })] })) : undefined, calls.map(callProps => hasProp(callProps, 'onAcceptCall') ? (_jsx(IncomingCall, { ...callProps }, callProps.id)) : (_jsx(Call, { ...callProps }, callProps.id)))] }), showDialog && newCallButtonRef.current && (_jsx(Dialog, { target: newCallButtonRef.current, ref: dialogRef, placement: 'bottom-end', children: _jsxs(StyledCalleePicker, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: () => setShowDialog(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);
+                                        setShowDialog(false);
                                     } }) })] }) }))] }) }));
 });
 export default CallControlPanel;

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

@@ -1 +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              <Flex container={{ direction: 'column', gap: 1 }}>\n                <Text variant='h4' as='span'>\n                  {t('call_panel_interaction_transfer_heading')}\n                </Text>\n                <div>\n                  <Button variant='secondary' 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                </div>\n              </Flex>\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"]}
+{"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  CardContent,\n  useI18n,\n  registerIcon,\n  Flex,\n  ComboBox,\n  useOuterEvent,\n  ForwardProps,\n  useConsolidatedRef,\n  useEscape,\n  Button,\n  CardHeader,\n  Icon,\n  Text,\n  Banner,\n  hasProp,\n  getFocusables,\n  useFocusTrap\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\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  function CallControlPanel(\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 [showDialog, setShowDialog] = useState(false);\n    const containerRef = useConsolidatedRef(ref);\n    const dialogRef = useRef<HTMLDivElement>(null);\n\n    useOuterEvent('mousedown', [dialogRef], () => {\n      setShowDialog(false);\n    });\n\n    useEscape(() => setShowDialog(false), dialogRef);\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: () => setShowDialog(true),\n      icon: 'plus',\n      ref: newCallButtonRef\n    };\n\n    const ctx = useMemo(\n      () => ({\n        contacts: contactsList,\n        onFavoriteToggle\n      }),\n      [contactsList, onFavoriteToggle]\n    );\n\n    useFocusTrap(dialogRef);\n\n    useEffect(() => {\n      if (showDialog) {\n        const focusables = getFocusables(dialogRef);\n        if (focusables[0]) focusables[0]?.focus();\n      }\n    }, [showDialog]);\n\n    return (\n      <ContactsContext.Provider value={ctx}>\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              <Flex container={{ direction: 'column', gap: 1 }}>\n                <Text variant='h4' as='span'>\n                  {t('call_panel_interaction_transfer_heading')}\n                </Text>\n                <div>\n                  <Button variant='secondary' 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                </div>\n              </Flex>\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          {showDialog && newCallButtonRef.current && (\n            <Dialog target={newCallButtonRef.current} ref={dialogRef} placement='bottom-end'>\n              <StyledCalleePicker>\n                <CardHeader\n                  actions={\n                    <Button\n                      icon\n                      variant='simple'\n                      aria-label={t('close')}\n                      onClick={() => setShowDialog(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                      setShowDialog(false);\n                    }}\n                  />\n                </CardContent>\n              </StyledCalleePicker>\n            </Dialog>\n          )}\n        </FloatingPanel>\n      </ContactsContext.Provider>\n    );\n  }\n);\n\nexport default CallControlPanel;\n"]}

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

@@ -36,7 +36,7 @@ export const StyledCallContainer = styled.div(({ theme: { base: { spacing }, com
 StyledCallContainer.defaultProps = defaultThemeProp;
 export const StyledIncomingContainer = styled(StyledCallContainer)(({ theme }) => {
     return css `
-    background-color: ${theme.base.colors.gray['extra-light']};
+    background-color: ${theme.base.palette['secondary-background']};
     border-radius: calc(0.5 * ${theme.base['border-radius']});
 
     > ${StyledSummaryItem} {

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

@@ -1 +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"]}
+{"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.palette['secondary-background']};\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

@@ -46,13 +46,13 @@ export interface CallProps {
     onHandOffCall?: (id: CallProps['id']) => void;
     /** Callback fired when the user ends the call. */
     onEndCall?: (id: CallProps['id']) => void;
-    /**
-     * Transfer reason options
-     */
+    /** Initial selected transfer reason */
+    defaultTransfer?: TransferReasonOption['id'];
+    /** Transfer reason options */
     transferOptions: Readonly<TransferReasonOption[]>;
-    /**
-     * Interaction options
-     */
+    /** Initial selected interaction */
+    defaultInteraction?: TransferReasonOption['id'];
+    /** Interaction options */
     interactionOptions?: Readonly<TransferReasonOption[]>;
 }
 export interface IncomingCallProps {
@@ -65,7 +65,7 @@ export interface IncomingCallProps {
     /** Callback fired when the user accept the call. */
     onAcceptCall: (id: CallProps['id']) => void;
 }
-export declare type UserAvailabilityStatus = 'available' | 'unavailable' | 'busy' | 'after_work' | 'logout';
+export type UserAvailabilityStatus = 'available' | 'unavailable' | 'busy' | 'after_work' | 'logout';
 export interface UserAvailabilityStatusOption {
     readonly id: string;
     readonly label: string;
@@ -79,9 +79,7 @@ export interface InteractionTransferData {
 export interface CallControlPanelProps extends BaseProps, NoChildrenProp {
     /** The heading rendered. */
     heading: string;
-    /**
-     * User availability statuses.
-     */
+    /** User availability statuses. */
     userStatus?: {
         statusOptions: Readonly<UserAvailabilityStatusOption[]>;
         /** User current status. */
@@ -96,9 +94,7 @@ export interface CallControlPanelProps extends BaseProps, NoChildrenProp {
     };
     /** If true, the component will be draggable */
     draggable?: boolean;
-    /**
-     * Region for messages: errors, notifications, etc.
-     */
+    /** Region for messages: errors, notifications, etc. */
     message?: Pick<BannerProps, 'variant' | 'messages' | 'onDismiss'>;
     /**
      * List of current calls. Having two or more not declared as "on hold" (onHoldSince defined) means there's
@@ -110,9 +106,7 @@ export interface CallControlPanelProps extends BaseProps, NoChildrenProp {
      * @param phoneNumber the number chosen.
      */
     onAddCall?: (phoneNumber: string) => void;
-    /**
-     * Intraction transfer popup options.
-     */
+    /** Intraction transfer popup options. */
     interactionTransfer?: InteractionTransferData;
     /** An array of contacts objects. */
     contactsList: Contact[];

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

@@ -1 +1 @@
-{"version":3,"file":"CallControlPanel.types.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"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"}
+{"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

@@ -1 +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, 'variant' | '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"]}
+{"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  /** Initial selected transfer reason */\n  defaultTransfer?: TransferReasonOption['id'];\n  /** Transfer reason options */\n  transferOptions: Readonly<TransferReasonOption[]>;\n  /** Initial selected interaction */\n  defaultInteraction?: TransferReasonOption['id'];\n  /** Interaction options */\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  /** User availability statuses. */\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  /** Region for messages: errors, notifications, etc. */\n  message?: Pick<BannerProps, 'variant' | '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  /** Intraction transfer popup options. */\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/CallHandover/CallHandoverDialog.d.ts

@@ -1,11 +1,13 @@
 import { FunctionComponent } from 'react';
 import type { TransferData, TransferReasonOption } from './CallHandover.types';
-export declare type HandoverType = 'conferenceWithInteractions' | 'conferenceCallOnly' | 'transferWithInteractions' | 'transferCallOnly' | 'consultWithInteractions' | 'consultCallOnly';
+export type HandoverType = 'conferenceWithInteractions' | 'conferenceCallOnly' | 'transferWithInteractions' | 'transferCallOnly' | 'consultWithInteractions' | 'consultCallOnly';
 export interface CallHandoverDialogProps {
     target: HTMLElement | null;
     type: HandoverType;
     onCancel: () => void;
     onSubmit: (data: TransferData) => void;
+    defaultTransfer?: TransferReasonOption['id'];
+    defaultInteraction?: TransferReasonOption['id'];
     transferOptions: Readonly<TransferReasonOption[]>;
     interactionOptions?: Readonly<TransferReasonOption[]>;
 }

package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.d.ts.map

@@ -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,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"}
+{"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,MAAM,MAAM,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,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC7C,kBAAkB,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAChD,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,CAoJlE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}