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

package/lib/components/ArticleList/ArticleListHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG7F,OAAO,EAKL,WAAW,EAEX,SAAS,EACT,MAAM,EACN,MAAM,EACN,IAAI,EAIL,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,MAAM;IAC/D,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,OAAO,EAAE;QACP,MAAM,EAAE,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;QACzC,cAAc,CAAC,EAAE,YAAY,CAAC;QAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,+CAA+C;IAC/C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CACrC;AA2DD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CAqDhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ArticleListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG7F,OAAO,EAKL,WAAW,EAEX,SAAS,EACT,MAAM,EACN,MAAM,EACN,IAAI,EAIL,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,MAAM;IAC/D,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,OAAO,EAAE;QACP,MAAM,EAAE,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;QACzC,cAAc,CAAC,EAAE,YAAY,CAAC;QAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,+CAA+C;IAC/C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CACrC;AA2DD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CAuDhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ArticleList/ArticleListHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
 import { Button, Flex, Form, MenuButton, useI18n, Text, defaultThemeProp, Count } from '@pega/cosmos-react-core';
-import { StyledFormContent } from '@pega/cosmos-react-core/lib/components/Form/Form';
+import { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
 const StyledArticleHeader = styled.div(({ theme }) => {
     return css `
     width: 100%;
@@ -60,9 +60,9 @@ const ArticleListHeader = (props) => {
             ev.preventDefault();
             if (onSubmit)
                 onSubmit(ev);
-        }, ...restProps, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [icon, _jsx(StyledArticleListHeaderText, { variant: 'h2', children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [headerText, typeof count === 'number' && _jsx(Count, { children: count })] }) }), primary.actions && (_jsx(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
+        }, ...restProps, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1, pad: [0, 0, 1] }, children: [icon, _jsx(StyledArticleListHeaderText, { variant: 'h2', children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [headerText, typeof count === 'number' && _jsx(Count, { children: count })] }) }), primary.actions && (_jsx(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
                             items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))
-                        } }))] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Flex, { item: { grow: 1 }, children: primary.search }), _jsx(Flex, { container: true, as: StyledHeaderActions, children: primary.followedFilter })] }), secondary && (_jsx(StyledSecondaryContainer, { container: { gap: 1 }, children: secondary }))] }));
+                        } }))] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1, pad: [0.5, 0] }, children: [_jsx(Flex, { item: { grow: 1 }, children: primary.search }), primary.followedFilter && (_jsx(Flex, { container: true, as: StyledHeaderActions, children: primary.followedFilter }))] }), secondary && (_jsx(StyledSecondaryContainer, { container: { gap: 1 }, children: secondary }))] }));
 };
 export default ArticleListHeader;
 //# sourceMappingURL=ArticleListHeader.js.map

package/lib/components/ArticleList/ArticleListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleListHeader.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, EventHandler, MouseEvent, ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Form,\n  MenuButton,\n  SearchInput,\n  useI18n,\n  BaseProps,\n  AsProp,\n  Action,\n  Icon,\n  Text,\n  defaultThemeProp,\n  Count\n} from '@pega/cosmos-react-core';\nimport { StyledFormContent } from '@pega/cosmos-react-core/lib/components/Form/Form';\n\nexport interface ArticleListHeaderProps extends BaseProps, AsProp {\n  /** Header Icon and Text */\n  icon?: ReactElement<typeof Icon>;\n  headerText: string;\n  /* Integer representing the total count of articles */\n  count?: number;\n  /** Primary data: Drop in elements related to search or filtering of articles */\n  primary: {\n    search: ReactElement<typeof SearchInput>;\n    followedFilter?: ReactElement;\n    actions?: Action[];\n  };\n  /** Any other filter components to be passed */\n  secondary?: ReactNode;\n  /** Callback that triggers on enter */\n  onSubmit?: EventHandler<MouseEvent>;\n}\n\nconst StyledArticleHeader = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    gap: 0;\n\n    button[type='submit'] {\n      height: 0;\n      min-height: 0;\n      width: 0.0625rem;\n      clip-path: inset(50%);\n      clip: rect(0, 0, 0, 0);\n      margin: 0;\n      overflow: hidden;\n      padding: 0;\n      border: 0;\n    }\n    > div:last-child {\n      margin: 0;\n    }\n\n    ${StyledFormContent} {\n      gap: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nconst StyledSecondaryContainer = styled(Flex)`\n  margin: 0.5rem 0;\n  & > * {\n    flex-grow: 1;\n  }\n`;\n\n/* This below style will be removed once we have margin auto support from Flex\ncomponent */\nconst StyledHeaderActions = styled.div`\n  margin-left: auto;\n\n  .radio-check {\n    margin: 0;\n  }\n`;\n\nconst StyledArticleListHeaderText = styled(Text)`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  flex: 1;\n`;\n\nconst Locale = {\n  // FIXME: TR\n  moreActions: 'More actions'\n};\n\nconst ArticleListHeader: FunctionComponent<ArticleListHeaderProps> = (\n  props: ArticleListHeaderProps\n) => {\n  const { as = Form, primary, secondary, onSubmit, icon, headerText, count, ...restProps } = props;\n  const t = useI18n();\n\n  return (\n    <StyledArticleHeader\n      as={as}\n      actions={\n        <Button type='submit' aria-hidden='true' tabIndex='-1'>\n          {t('article_list_header_submit_label')}\n        </Button>\n      }\n      role='search'\n      onSubmit={(ev: MouseEvent) => {\n        ev.preventDefault();\n        if (onSubmit) onSubmit(ev);\n      }}\n      {...restProps}\n    >\n      <Flex container={{ alignItems: 'center', gap: 1 }}>\n        {icon}\n        <StyledArticleListHeaderText variant='h2'>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            {headerText}\n            {typeof count === 'number' && <Count>{count}</Count>}\n          </Flex>\n        </StyledArticleListHeaderText>\n\n        {primary.actions && (\n          <MenuButton\n            variant='simple'\n            text={Locale.moreActions}\n            icon='more'\n            iconOnly\n            menu={{\n              items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))\n            }}\n          />\n        )}\n      </Flex>\n      <Flex container={{ alignItems: 'center', gap: 1 }}>\n        <Flex item={{ grow: 1 }}>{primary.search}</Flex>\n        <Flex container as={StyledHeaderActions}>\n          {primary.followedFilter}\n        </Flex>\n      </Flex>\n      {secondary && (\n        <StyledSecondaryContainer container={{ gap: 1 }}>{secondary}</StyledSecondaryContainer>\n      )}\n    </StyledArticleHeader>\n  );\n};\n\nexport default ArticleListHeader;\n"]}
+{"version":3,"file":"ArticleListHeader.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, EventHandler, MouseEvent, ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Form,\n  MenuButton,\n  SearchInput,\n  useI18n,\n  BaseProps,\n  AsProp,\n  Action,\n  Icon,\n  Text,\n  defaultThemeProp,\n  Count\n} from '@pega/cosmos-react-core';\nimport { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\n\nexport interface ArticleListHeaderProps extends BaseProps, AsProp {\n  /** Header Icon and Text */\n  icon?: ReactElement<typeof Icon>;\n  headerText: string;\n  /* Integer representing the total count of articles */\n  count?: number;\n  /** Primary data: Drop in elements related to search or filtering of articles */\n  primary: {\n    search: ReactElement<typeof SearchInput>;\n    followedFilter?: ReactElement;\n    actions?: Action[];\n  };\n  /** Any other filter components to be passed */\n  secondary?: ReactNode;\n  /** Callback that triggers on enter */\n  onSubmit?: EventHandler<MouseEvent>;\n}\n\nconst StyledArticleHeader = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    gap: 0;\n\n    button[type='submit'] {\n      height: 0;\n      min-height: 0;\n      width: 0.0625rem;\n      clip-path: inset(50%);\n      clip: rect(0, 0, 0, 0);\n      margin: 0;\n      overflow: hidden;\n      padding: 0;\n      border: 0;\n    }\n    > div:last-child {\n      margin: 0;\n    }\n\n    ${StyledFormContent} {\n      gap: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nconst StyledSecondaryContainer = styled(Flex)`\n  margin: 0.5rem 0;\n  & > * {\n    flex-grow: 1;\n  }\n`;\n\n/* This below style will be removed once we have margin auto support from Flex\ncomponent */\nconst StyledHeaderActions = styled.div`\n  margin-left: auto;\n\n  .radio-check {\n    margin: 0;\n  }\n`;\n\nconst StyledArticleListHeaderText = styled(Text)`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  flex: 1;\n`;\n\nconst Locale = {\n  // FIXME: TR\n  moreActions: 'More actions'\n};\n\nconst ArticleListHeader: FunctionComponent<ArticleListHeaderProps> = (\n  props: ArticleListHeaderProps\n) => {\n  const { as = Form, primary, secondary, onSubmit, icon, headerText, count, ...restProps } = props;\n  const t = useI18n();\n\n  return (\n    <StyledArticleHeader\n      as={as}\n      actions={\n        <Button type='submit' aria-hidden='true' tabIndex='-1'>\n          {t('article_list_header_submit_label')}\n        </Button>\n      }\n      role='search'\n      onSubmit={(ev: MouseEvent) => {\n        ev.preventDefault();\n        if (onSubmit) onSubmit(ev);\n      }}\n      {...restProps}\n    >\n      <Flex container={{ alignItems: 'center', gap: 1, pad: [0, 0, 1] }}>\n        {icon}\n        <StyledArticleListHeaderText variant='h2'>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            {headerText}\n            {typeof count === 'number' && <Count>{count}</Count>}\n          </Flex>\n        </StyledArticleListHeaderText>\n\n        {primary.actions && (\n          <MenuButton\n            variant='simple'\n            text={Locale.moreActions}\n            icon='more'\n            iconOnly\n            menu={{\n              items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))\n            }}\n          />\n        )}\n      </Flex>\n      <Flex container={{ alignItems: 'center', gap: 1, pad: [0.5, 0] }}>\n        <Flex item={{ grow: 1 }}>{primary.search}</Flex>\n        {primary.followedFilter && (\n          <Flex container as={StyledHeaderActions}>\n            {primary.followedFilter}\n          </Flex>\n        )}\n      </Flex>\n      {secondary && (\n        <StyledSecondaryContainer container={{ gap: 1 }}>{secondary}</StyledSecondaryContainer>\n      )}\n    </StyledArticleHeader>\n  );\n};\n\nexport default ArticleListHeader;\n"]}

package/lib/components/CTIPanel/CTIPanel.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent, ReactElement } from 'react';
+import { NavListItemProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';
+import { CallControlPanelProps, UserAvailabilityStatusOption } from '../CallControlPanel/CallControlPanel.types';
+import { ExternalCTIProps } from '../CallControlPanel/ExternalCTI';
+export interface CTIPanelProps {
+    status: UserAvailabilityStatusOption;
+    visible: boolean;
+    children: ReactElement<CallControlPanelProps | ExternalCTIProps>;
+    onClick?: NavListItemProps['onClick'];
+}
+declare const CTIPanel: FunctionComponent<CTIPanelProps>;
+export default CTIPanel;
+//# sourceMappingURL=CTIPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CTIPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CTIPanel/CTIPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gEAAgE,CAAC;AAIlG,OAAO,EACL,qBAAqB,EACrB,4BAA4B,EAC7B,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,4BAA4B,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,YAAY,CAAC,qBAAqB,GAAG,gBAAgB,CAAC,CAAC;IACjE,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;CACvC;AAED,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAsB9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/CTIPanel/CTIPanel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';
+import { useConfiguration, useI18n } from '@pega/cosmos-react-core';
+import CallControlPanelIcon from '../CallControlPanel/CallControlPanelIcon';
+const CTIPanel = ({ onClick, visible, status, children }) => {
+    const t = useI18n();
+    const { portalTarget } = useConfiguration();
+    return (_jsxs(_Fragment, { children: [_jsx(NavigationListItem, { primary: t('call_panel_nav_label'), visual: _jsx(CallControlPanelIcon, { status: status.status, label: status.label, variant: 'icon', panelVisible: visible }), onClick: onClick }), portalTarget && createPortal(children, portalTarget)] }));
+};
+export default CTIPanel;
+//# sourceMappingURL=CTIPanel.js.map

package/lib/components/CTIPanel/CTIPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTIPanel.js","sourceRoot":"","sources":["../../../src/components/CTIPanel/CTIPanel.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAC;AAEpG,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEpE,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAc5E,MAAM,QAAQ,GAAqC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,kBAAkB,IACjB,OAAO,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAClC,MAAM,EACJ,KAAC,oBAAoB,IACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAC,MAAM,EACd,YAAY,EAAE,OAAO,GACrB,EAEJ,OAAO,EAAE,OAAO,GAChB,EACD,YAAY,IAAI,YAAY,CAAC,QAAQ,EAAE,YAAY,CAAC,IACpD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, ReactElement } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';\nimport { NavListItemProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\nimport { useConfiguration, useI18n } from '@pega/cosmos-react-core';\n\nimport CallControlPanelIcon from '../CallControlPanel/CallControlPanelIcon';\nimport {\n  CallControlPanelProps,\n  UserAvailabilityStatusOption\n} from '../CallControlPanel/CallControlPanel.types';\nimport { ExternalCTIProps } from '../CallControlPanel/ExternalCTI';\n\nexport interface CTIPanelProps {\n  status: UserAvailabilityStatusOption;\n  visible: boolean;\n  children: ReactElement<CallControlPanelProps | ExternalCTIProps>;\n  onClick?: NavListItemProps['onClick'];\n}\n\nconst CTIPanel: FunctionComponent<CTIPanelProps> = ({ onClick, visible, status, children }) => {\n  const t = useI18n();\n\n  const { portalTarget } = useConfiguration();\n\n  return (\n    <>\n      <NavigationListItem\n        primary={t('call_panel_nav_label')}\n        visual={\n          <CallControlPanelIcon\n            status={status.status}\n            label={status.label}\n            variant='icon'\n            panelVisible={visible}\n          />\n        }\n        onClick={onClick}\n      />\n      {portalTarget && createPortal(children, portalTarget)}\n    </>\n  );\n};\n\nexport default CTIPanel;\n"]}

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

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

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

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

package/lib/components/CTIPanel/index.js

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

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

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

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

@@ -0,0 +1,40 @@
+import { FunctionComponent } from 'react';
+import { BannerProps, DialogProps } from '@pega/cosmos-react-core';
+export interface MenuOption {
+    id: string;
+    label: string;
+}
+export interface AttachInteractionData {
+    /** Selected reason option identifier. */
+    reasonId?: MenuOption['id'];
+    /** Interaction comments. */
+    comments?: string;
+    /** Selected interaction option identifier. */
+    interactionOptionId?: MenuOption['id'];
+}
+export interface AttachInteractionProps {
+    /** The heading of the dialog. */
+    heading: string;
+    /**
+     * Callback invoked when 'Submit' action has been clicked.
+     * Must call given 'close' function on success.
+     */
+    onAddInteraction: (data: AttachInteractionData, arg: {
+        close: () => void;
+    }) => void;
+    /** Callback invoked when closing the dialog. */
+    onClose?: () => void;
+    /** Reason options. The field will be hidden if not passed. */
+    reasonOptions: Readonly<MenuOption[]>;
+    /** Interaction options. The fill will be hidden if not passed. */
+    interactionOptions?: Readonly<MenuOption[]>;
+    /** Region for messages: errors, notifications, etc. */
+    message?: Pick<BannerProps, 'id' | 'variant' | 'heading' | 'messages' | 'onDismiss'>;
+}
+export interface AttachInteractionDialogProps extends AttachInteractionProps {
+    target: DialogProps['target'];
+}
+export declare const StyledInteractionForm: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").FormProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const AttachInteractionDialog: FunctionComponent<AttachInteractionDialogProps>;
+export default AttachInteractionDialog;
+//# sourceMappingURL=AttachInteractionDialog.d.ts.map

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

@@ -0,0 +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,EASL,WAAW,EACX,WAAW,EACZ,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,8DAA8D;IAC9D,aAAa,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;IACtC,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;IAC5C,uDAAuD;IACvD,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC,CAAC;CACtF;AAED,MAAM,WAAW,4BAA6B,SAAQ,sBAAsB;IAC1E,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,qBAAqB,oNAUjC,CAAC;AAIF,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,CAgG5E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/lib/components/CallControlPanel/AttachInteractionDialog.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Flex, useI18n, Dialog, Form, Banner, ComboBox, TextArea } from '@pega/cosmos-react-core';
+export const StyledInteractionForm = styled(Form)(({ theme: { base: { 'content-width': contentWidth } } }) => {
+    return css `
+      min-width: ${contentWidth.sm};
+    `;
+});
+StyledInteractionForm.defaultProps = defaultThemeProp;
+const AttachInteractionDialog = ({ heading, reasonOptions, interactionOptions, message, onAddInteraction, onClose, target }) => {
+    const t = useI18n();
+    const [selectedReason, setSelectedReason] = useState();
+    const [selectedInteraction, setSelectedInteraction] = useState();
+    const [comments, setComments] = useState('');
+    const clearForm = () => {
+        setComments('');
+        setSelectedInteraction(undefined);
+        setSelectedReason(undefined);
+    };
+    return (_jsx(Dialog, { target: target, heading: heading, placement: 'top-end', onClose: () => {
+            onClose?.();
+            clearForm();
+        }, onSubmit: ({ close }) => {
+            onAddInteraction({
+                reasonId: selectedReason?.id,
+                comments,
+                interactionOptionId: selectedInteraction?.id
+            }, { close });
+        }, children: _jsx(StyledInteractionForm, { children: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [message && _jsx(Banner, { ...message }), interactionOptions && (_jsx(ComboBox, { label: t('call_panel_handover_interaction_label'), selected: {
+                            items: selectedInteraction
+                                ? { id: selectedInteraction.id, text: selectedInteraction.label }
+                                : undefined
+                        }, menu: {
+                            items: interactionOptions.map(({ id, label }) => ({
+                                id,
+                                primary: label,
+                                selected: id === selectedInteraction?.id
+                            })),
+                            onItemClick: id => setSelectedInteraction(interactionOptions?.find(option => option.id === id))
+                        } })), reasonOptions && (_jsx(ComboBox, { label: t('call_panel_handover_reason_label'), selected: {
+                            items: selectedReason
+                                ? { id: selectedReason.id, text: selectedReason.label }
+                                : undefined
+                        }, menu: {
+                            items: reasonOptions?.map(({ id, label }) => ({
+                                id,
+                                primary: label,
+                                selected: id === selectedReason?.id
+                            })),
+                            onItemClick: id => setSelectedReason(reasonOptions?.find(option => option.id === id))
+                        } })), _jsx(TextArea, { label: t('call_panel_handover_comments_label'), displayCharCount: true, maxLength: 300, value: comments, onChange: (e) => setComments(e.target.value) })] }) }) }));
+};
+export default AttachInteractionDialog;
+//# sourceMappingURL=AttachInteractionDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachInteractionDialog.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/AttachInteractionDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAe,MAAM,OAAO,CAAC;AACjE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,OAAO,EACP,MAAM,EACN,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EAGT,MAAM,yBAAyB,CAAC;AAsCjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC/C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;mBACK,YAAY,CAAC,EAAE;KAC7B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,uBAAuB,GAAoD,CAAC,EAChF,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,MAAM,EACuB,EAAE,EAAE;IACjC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAAc,CAAC;IACnE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,EAAc,CAAC;IAC7E,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,WAAW,CAAC,EAAE,CAAC,CAAC;QAChB,sBAAsB,CAAC,SAAS,CAAC,CAAC;QAClC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,MAAM,IACL,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,SAAS,EACnB,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,EAAE,EAAE,CAAC;YACZ,SAAS,EAAE,CAAC;QACd,CAAC,EACD,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;YACtB,gBAAgB,CACd;gBACE,QAAQ,EAAE,cAAc,EAAE,EAAE;gBAC5B,QAAQ;gBACR,mBAAmB,EAAE,mBAAmB,EAAE,EAAE;aAC7C,EACD,EAAE,KAAK,EAAE,CACV,CAAC;QACJ,CAAC,YAED,KAAC,qBAAqB,cACpB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,OAAO,IAAI,KAAC,MAAM,OAAK,OAAO,GAAI,EAElC,kBAAkB,IAAI,CACrB,KAAC,QAAQ,IACP,KAAK,EAAE,CAAC,CAAC,uCAAuC,CAAC,EACjD,QAAQ,EAAE;4BACR,KAAK,EAAE,mBAAmB;gCACxB,CAAC,CAAC,EAAE,EAAE,EAAE,mBAAmB,CAAC,EAAE,EAAE,IAAI,EAAE,mBAAmB,CAAC,KAAK,EAAE;gCACjE,CAAC,CAAC,SAAS;yBACd,EACD,IAAI,EAAE;4BACJ,KAAK,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;gCAChD,EAAE;gCACF,OAAO,EAAE,KAAK;gCACd,QAAQ,EAAE,EAAE,KAAK,mBAAmB,EAAE,EAAE;6BACzC,CAAC,CAAC;4BACH,WAAW,EAAE,EAAE,CAAC,EAAE,CAChB,sBAAsB,CAAC,kBAAkB,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;yBAC/E,GACD,CACH,EAEA,aAAa,IAAI,CAChB,KAAC,QAAQ,IACP,KAAK,EAAE,CAAC,CAAC,kCAAkC,CAAC,EAC5C,QAAQ,EAAE;4BACR,KAAK,EAAE,cAAc;gCACnB,CAAC,CAAC,EAAE,EAAE,EAAE,cAAc,CAAC,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,KAAK,EAAE;gCACvD,CAAC,CAAC,SAAS;yBACd,EACD,IAAI,EAAE;4BACJ,KAAK,EAAE,aAAa,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;gCAC5C,EAAE;gCACF,OAAO,EAAE,KAAK;gCACd,QAAQ,EAAE,EAAE,KAAK,cAAc,EAAE,EAAE;6BACpC,CAAC,CAAC;4BACH,WAAW,EAAE,EAAE,CAAC,EAAE,CAChB,iBAAiB,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;yBACrE,GACD,CACH,EAED,KAAC,QAAQ,IACP,KAAK,EAAE,CAAC,CAAC,oCAAoC,CAAC,EAC9C,gBAAgB,QAChB,SAAS,EAAE,GAAG,EACd,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAmC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAC9E,IACG,GACe,GACjB,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC","sourcesContent":["import { FunctionComponent, useState, ChangeEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  useI18n,\n  Dialog,\n  Form,\n  Banner,\n  ComboBox,\n  TextArea,\n  BannerProps,\n  DialogProps\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  /** Reason options. The field will be hidden if not passed. */\n  reasonOptions: Readonly<MenuOption[]>;\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, 'id' | 'variant' | 'heading' | 'messages' | 'onDismiss'>;\n}\n\nexport interface AttachInteractionDialogProps extends AttachInteractionProps {\n  target: DialogProps['target'];\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  reasonOptions,\n  interactionOptions,\n  message,\n  onAddInteraction,\n  onClose,\n  target\n}: AttachInteractionDialogProps) => {\n  const t = useI18n();\n\n  const [selectedReason, setSelectedReason] = useState<MenuOption>();\n  const [selectedInteraction, setSelectedInteraction] = useState<MenuOption>();\n  const [comments, setComments] = useState('');\n\n  const clearForm = () => {\n    setComments('');\n    setSelectedInteraction(undefined);\n    setSelectedReason(undefined);\n  };\n\n  return (\n    <Dialog\n      target={target}\n      heading={heading}\n      placement='top-end'\n      onClose={() => {\n        onClose?.();\n        clearForm();\n      }}\n      onSubmit={({ close }) => {\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    </Dialog>\n  );\n};\n\nexport default AttachInteractionDialog;\n"]}

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

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

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,EAA2D,MAAM,OAAO,CAAC;AAEnG,OAAO,EAKL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAcjC,OAAO,EAAmB,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAiBtE,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAyQrD,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,CAwRrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/CallControlPanel/Call.js

@@ -1,74 +1,32 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { Actions, Button, Flex, Icon, registerIcon, Popover, Status, SummaryItem, Text, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { Button, Flex, Icon, registerIcon, Status, SummaryItem, Text, useI18n, MenuButton } from '@pega/cosmos-react-core';
 import * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';
 import * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';
 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 { StyledHoldInfo, StyledProgressContainer, StyledSLAProgress } from './CallControlPanel.styles';
-import CalleePicker from './CalleePicker';
-import CallTransfer from './CallTransfer';
-import DTMFKeypad from './DTMFKeypad';
+import { DialPadDialog } from '../DialPad';
+import { StyledHoldInfo, StyledCallContainer, StyledSLAProgress } from './CallControlPanel.styles';
 import StopWatch from './StopWatch';
 import { calculateSla } from './utils';
-registerIcon(arrowUpIcon, micSolidIcon, micOffSolidIcon, playSoldIcon, pauseSolidIcon, phoneSplitSolidIcon, phoneHangupSolidIcon);
-const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onPauseToggle, muted, onMuteToggle, onDTMFPress, onConsultAction, onConferenceAction, onTransferAction, onMergeCall, transferOptions }) => {
+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 }) => {
     const t = useI18n();
     const moreActionsButtonRef = useRef(null);
     const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;
-    const [popoverEl, setPopoverRef] = useElement();
     const [slaLevel, setSlaLevel] = useState(undefined);
-    const [showConsultPopover, setShowConsultPopover] = useState(false);
-    const [showConferencePopover, setShowConferencePopover] = useState(false);
-    const [showTransferPopover, setShowTransferPopover] = useState(false);
-    const [showSendDTMF, setShowSendDTMF] = useState(false);
+    const [dialogType, setDialogType] = useState();
+    const [showDTMF, setShowDTMF] = useState(false);
     const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);
-    const appendConferenceAction = (actionItems) => {
-        actionItems.splice(1, 0, {
-            id: 'conference',
-            text: t('call_panel_conference_call_menu_item'),
-            onClick: () => setShowConferencePopover(true)
-        });
-    };
     const calculateCurrentSlaLevel = () => {
         const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);
         setSlaLevel(currentSlaLevel);
     };
-    const getActionItems = (item) => {
-        const actionItems = [
-            {
-                id: 'consult',
-                text: t('call_panel_consult_call_menu_item'),
-                onClick: () => setShowConsultPopover(true)
-            },
-            {
-                id: 'transfer',
-                text: t('call_panel_transfer_call_menu_item'),
-                onClick: () => setShowTransferPopover(true)
-            },
-            {
-                id: 'dtmf',
-                text: t('call_panel_send_dtmf_menu_item'),
-                onClick: () => setShowSendDTMF(true)
-            },
-            {
-                id: 'hang_up',
-                text: t('call_panel_hangup_call_menu_item'),
-                disabled: !item.onEndCall,
-                onClick: () => {
-                    if (item.onEndCall)
-                        item.onEndCall(callId, item.id);
-                }
-            }
-        ];
-        if (onConferenceAction) {
-            appendConferenceAction(actionItems);
-        }
-        return actionItems;
-    };
     useLayoutEffect(() => {
         calculateCurrentSlaLevel();
         const slaDurationInMillis = slaDuration && slaDuration * 1000;
@@ -77,49 +35,7 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
         }, slaDurationInMillis);
         return () => clearTimeout(timer);
     }, [inCallSince, slaLevel]);
-    useOuterEvent('mousedown', [popoverEl], () => {
-        setShowConsultPopover(false);
-        setShowTransferPopover(false);
-        setShowConferencePopover(false);
-        setShowSendDTMF(false);
-    });
-    const onKeyDown = ({ key }) => {
-        if (key === 'Escape') {
-            setShowConsultPopover(false);
-            setShowTransferPopover(false);
-            setShowConferencePopover(false);
-            setShowSendDTMF(false);
-        }
-    };
-    useEffect(() => {
-        document.addEventListener('keydown', onKeyDown);
-        return () => {
-            document.removeEventListener('keydown', onKeyDown);
-        };
-    }, [popoverEl]);
-    let popoverContent = null;
-    if (showConsultPopover) {
-        popoverContent = (_jsx(CalleePicker, { heading: t('call_panel_consult_with_heading'), onClose: () => setShowConsultPopover(false), onCall: phoneNumber => {
-                onConsultAction?.(callId, phoneNumber);
-                setShowConsultPopover(false);
-            } }));
-    }
-    else if (showConferencePopover) {
-        popoverContent = (_jsx(CalleePicker, { heading: t('call_panel_conference_heading'), onClose: () => setShowConferencePopover(false), onCall: phoneNumber => {
-                onConferenceAction?.(callId, phoneNumber);
-                setShowConferencePopover(false);
-            } }));
-    }
-    else if (showTransferPopover) {
-        popoverContent = (_jsx(CallTransfer, { onClose: () => setShowTransferPopover(false), onTransferCall: transferData => {
-                onTransferAction?.(callId, transferData);
-                setShowTransferPopover(false);
-            }, transferOptions: transferOptions }));
-    }
-    else if (showSendDTMF) {
-        popoverContent = (_jsx(DTMFKeypad, { onClose: () => setShowSendDTMF(false), onDialButtonClick: (key) => onDTMFPress?.(callId, String.fromCharCode(key)) }));
-    }
-    return (_jsxs(StyledProgressContainer, { children: [_jsx(StyledSLAProgress, { determinate: true, placement: 'local', slaDuration: slaDuration, slaLevel: slaLevel }), participants.map((item, index) => {
+    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"',
@@ -128,15 +44,92 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
                         : {
                             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: _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [slaConfig && index === 0 && (_jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(StopWatch, { startTime: startedAt, timeout: slaTimeout }) })), index === 0 && (_jsxs(_Fragment, { children: [_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', 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' }) })] })), index === 0 && slaConfig && (_jsx(Actions, { ref: moreActionsButtonRef, items: getActionItems(item) })), 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' }) }, 'merge')), (!slaConfig || index !== 0) && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => {
-                                    if (item.onEndCall)
-                                        item.onEndCall(callId, item.id);
-                                }, label: t('call_panel_hangup_call_menu_item'), children: _jsx(Icon, { name: 'phone-hangup-solid' }) }, 'hang_up'))] }) }, item.id));
+                        }, 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
+                                    ? '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: {
+                                    variant: 'flyout',
+                                    items: [
+                                        {
+                                            id: 'conference',
+                                            primary: t('call_panel_conference_call_menu_item'),
+                                            disabled: !onConferenceAction,
+                                            onClick: () => setDialogType('conference')
+                                        },
+                                        {
+                                            id: 'consult',
+                                            primary: t('call_panel_consult_call_menu_item'),
+                                            disabled: !onConsultAction,
+                                            items: [
+                                                {
+                                                    id: 'consultCallWithInteraction',
+                                                    primary: t('call_panel_menu_item_call_with_interaction'),
+                                                    disabled: !onTransferAction,
+                                                    onClick: () => setDialogType('consultWithInteractions')
+                                                },
+                                                {
+                                                    id: 'consultCallOnly',
+                                                    primary: t('call_panel_menu_item_call_only'),
+                                                    disabled: !onTransferAction,
+                                                    onClick: () => setDialogType('consultCallOnly')
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            id: 'transfer',
+                                            primary: t('call_panel_transfer_call_menu_item'),
+                                            disabled: !onTransferAction,
+                                            items: [
+                                                {
+                                                    id: 'transferCallWithInteraction',
+                                                    primary: t('call_panel_menu_item_call_with_interaction'),
+                                                    disabled: !onTransferAction,
+                                                    onClick: () => setDialogType('transferWithInteractions')
+                                                },
+                                                {
+                                                    id: 'transferCallOnly',
+                                                    primary: t('call_panel_menu_item_call_only'),
+                                                    disabled: !onTransferAction,
+                                                    onClick: () => setDialogType('transferCallOnly')
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            id: 'dtmf',
+                                            primary: t('call_panel_send_dtmf_menu_item'),
+                                            disabled: !onDTMFPress,
+                                            onClick: () => setShowDTMF(true)
+                                        },
+                                        {
+                                            id: 'hang_up',
+                                            primary: t('call_panel_hangup_call_menu_item'),
+                                            disabled: !onEndCall,
+                                            onClick: () => onEndCall?.(callId)
+                                        }
+                                    ]
+                                } }))] })) : (_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 })
-                ]) })), _jsx(Popover, { target: moreActionsButtonRef.current, ref: setPopoverRef, placement: 'top-end', show: showConsultPopover || showTransferPopover || showSendDTMF || showConferencePopover, children: popoverContent })] }));
+                ]) })), dialogType && (_jsx(CallHandoverDialog, { target: moreActionsButtonRef.current, type: dialogType, transferOptions: transferOptions, interactionOptions: interactionOptions, onCancel: () => {
+                    setDialogType(undefined);
+                    moreActionsButtonRef.current?.focus();
+                }, onSubmit: transferData => {
+                    switch (dialogType) {
+                        case 'conference':
+                            onConferenceAction?.(callId, transferData);
+                            break;
+                        case 'consultCallOnly':
+                        case 'consultWithInteractions':
+                            onConsultAction?.(callId, transferData);
+                            break;
+                        case 'transferCallOnly':
+                        case 'transferWithInteractions':
+                            onTransferAction?.(callId, transferData);
+                            break;
+                        default:
+                    }
+                    setDialogType(undefined);
+                    moreActionsButtonRef.current?.focus();
+                } })), showDTMF && (_jsx(DialPadDialog, { target: moreActionsButtonRef.current, onClose: () => setShowDTMF(false), onDialButtonClick: (key) => onDTMFPress?.(callId, String.fromCharCode(key)) }))] }));
 };
 export default Call;
 //# sourceMappingURL=Call.js.map

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, ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n  Action,\n  Actions,\n  Button,\n  Flex,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  Popover,\n  Status,\n  SummaryItem,\n  Text,\n  useElement,\n  useI18n,\n  useOuterEvent\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 phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';\n\nimport {\n  StyledHoldInfo,\n  StyledProgressContainer,\n  StyledSLAProgress\n} from './CallControlPanel.styles';\nimport { CallParticipant, CallProps } from './CallControlPanel.types';\nimport CalleePicker from './CalleePicker';\nimport CallTransfer from './CallTransfer';\nimport DTMFKeypad from './DTMFKeypad';\nimport StopWatch from './StopWatch';\nimport { calculateSla } from './utils';\n\nregisterIcon(\n  arrowUpIcon,\n  micSolidIcon,\n  micOffSolidIcon,\n  playSoldIcon,\n  pauseSolidIcon,\n  phoneSplitSolidIcon,\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  transferOptions\n}: CallProps & ForwardProps) => {\n  const t = useI18n();\n  const moreActionsButtonRef = useRef<HTMLButtonElement>(null);\n  const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [slaLevel, setSlaLevel] = useState<number | undefined>(undefined);\n  const [showConsultPopover, setShowConsultPopover] = useState(false);\n  const [showConferencePopover, setShowConferencePopover] = useState(false);\n  const [showTransferPopover, setShowTransferPopover] = useState(false);\n  const [showSendDTMF, setShowSendDTMF] = useState(false);\n  const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);\n\n  const appendConferenceAction = (actionItems: Action[]) => {\n    actionItems.splice(1, 0, {\n      id: 'conference',\n      text: t('call_panel_conference_call_menu_item'),\n      onClick: () => setShowConferencePopover(true)\n    });\n  };\n\n  const calculateCurrentSlaLevel = (): void => {\n    const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);\n    setSlaLevel(currentSlaLevel);\n  };\n\n  const getActionItems = (item: CallParticipant): Action[] => {\n    const actionItems = [\n      {\n        id: 'consult',\n        text: t('call_panel_consult_call_menu_item'),\n        onClick: () => setShowConsultPopover(true)\n      },\n\n      {\n        id: 'transfer',\n        text: t('call_panel_transfer_call_menu_item'),\n        onClick: () => setShowTransferPopover(true)\n      },\n      {\n        id: 'dtmf',\n        text: t('call_panel_send_dtmf_menu_item'),\n        onClick: () => setShowSendDTMF(true)\n      },\n      {\n        id: 'hang_up',\n        text: t('call_panel_hangup_call_menu_item'),\n        disabled: !item.onEndCall,\n        onClick: () => {\n          if (item.onEndCall) item.onEndCall(callId, item.id);\n        }\n      }\n    ];\n    if (onConferenceAction) {\n      appendConferenceAction(actionItems);\n    }\n    return actionItems;\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  useOuterEvent('mousedown', [popoverEl], () => {\n    setShowConsultPopover(false);\n    setShowTransferPopover(false);\n    setShowConferencePopover(false);\n    setShowSendDTMF(false);\n  });\n\n  const onKeyDown = ({ key }: KeyboardEvent) => {\n    if (key === 'Escape') {\n      setShowConsultPopover(false);\n      setShowTransferPopover(false);\n      setShowConferencePopover(false);\n      setShowSendDTMF(false);\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [popoverEl]);\n\n  let popoverContent: ReactNode = null;\n  if (showConsultPopover) {\n    popoverContent = (\n      <CalleePicker\n        heading={t('call_panel_consult_with_heading')}\n        onClose={() => setShowConsultPopover(false)}\n        onCall={phoneNumber => {\n          onConsultAction?.(callId, phoneNumber);\n          setShowConsultPopover(false);\n        }}\n      />\n    );\n  } else if (showConferencePopover) {\n    popoverContent = (\n      <CalleePicker\n        heading={t('call_panel_conference_heading')}\n        onClose={() => setShowConferencePopover(false)}\n        onCall={phoneNumber => {\n          onConferenceAction?.(callId, phoneNumber);\n          setShowConferencePopover(false);\n        }}\n      />\n    );\n  } else if (showTransferPopover) {\n    popoverContent = (\n      <CallTransfer\n        onClose={() => setShowTransferPopover(false)}\n        onTransferCall={transferData => {\n          onTransferAction?.(callId, transferData);\n          setShowTransferPopover(false);\n        }}\n        transferOptions={transferOptions}\n      />\n    );\n  } else if (showSendDTMF) {\n    popoverContent = (\n      <DTMFKeypad\n        onClose={() => setShowSendDTMF(false)}\n        onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n      />\n    );\n  }\n\n  return (\n    <StyledProgressContainer>\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              <Flex container={{ wrap: 'nowrap' }}>\n                {slaConfig && index === 0 && (\n                  <Flex container={{ alignItems: 'center' }}>\n                    <StopWatch startTime={startedAt} timeout={slaTimeout} />\n                  </Flex>\n                )}\n                {index === 0 && (\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                    <Button\n                      icon\n                      variant='simple'\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                  </>\n                )}\n                {index === 0 && slaConfig && (\n                  <Actions ref={moreActionsButtonRef} items={getActionItems(item)} />\n                )}\n\n                {onMergeCall && (\n                  <Button\n                    icon\n                    variant='simple'\n                    key='merge'\n                    onClick={() => onMergeCall(callId)}\n                    label={t('call_panel_merge_call_menu_item')}\n                  >\n                    <Icon name='phone-split-solid' />\n                  </Button>\n                )}\n\n                {(!slaConfig || index !== 0) && (\n                  <Button\n                    icon\n                    variant='simple'\n                    key='hang_up'\n                    onClick={() => {\n                      if (item.onEndCall) item.onEndCall(callId, item.id);\n                    }}\n                    label={t('call_panel_hangup_call_menu_item')}\n                  >\n                    <Icon name='phone-hangup-solid' />\n                  </Button>\n                )}\n              </Flex>\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\n      <Popover\n        target={moreActionsButtonRef.current}\n        ref={setPopoverRef}\n        placement='top-end'\n        show={showConsultPopover || showTransferPopover || showSendDTMF || showConferencePopover}\n      >\n        {popoverContent}\n      </Popover>\n    </StyledProgressContainer>\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 phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';\nimport * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';\nimport * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';\n\nimport { DialPadDialog } from '../DialPad';\n\nimport { StyledHoldInfo, StyledCallContainer, StyledSLAProgress } from './CallControlPanel.styles';\nimport type { CallProps } from './CallControlPanel.types';\nimport StopWatch from './StopWatch';\nimport { calculateSla } from './utils';\nimport CallHandoverDialog from './CallHandover';\n\nregisterIcon(\n  arrowUpIcon,\n  micSolidIcon,\n  micOffSolidIcon,\n  playSoldIcon,\n  pauseSolidIcon,\n  phoneSplitSolidIcon,\n  phoneOutSolidIcon,\n  phoneHangupSolidIcon\n);\n\nconst Call: FunctionComponent<CallProps & ForwardProps> = ({\n  id: callId,\n  startedAt,\n  onHoldSince,\n  slaConfig,\n  participants,\n  onPauseToggle,\n  muted,\n  onMuteToggle,\n  onDTMFPress,\n  onConsultAction,\n  onConferenceAction,\n  onTransferAction,\n  onMergeCall,\n  onHandOffCall,\n  onEndCall,\n  transferOptions,\n  interactionOptions\n}: CallProps & ForwardProps) => {\n  const t = useI18n();\n  const moreActionsButtonRef = useRef<HTMLButtonElement>(null);\n  const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;\n  const [slaLevel, setSlaLevel] = useState<number | undefined>(undefined);\n  const [dialogType, setDialogType] = useState<\n    | 'conference'\n    | 'transferWithInteractions'\n    | 'transferCallOnly'\n    | 'consultWithInteractions'\n    | 'consultCallOnly'\n    | undefined\n  >();\n  const [showDTMF, setShowDTMF] = useState(false);\n\n  const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);\n\n  const calculateCurrentSlaLevel = (): void => {\n    const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);\n    setSlaLevel(currentSlaLevel);\n  };\n\n  useLayoutEffect(() => {\n    calculateCurrentSlaLevel();\n    const slaDurationInMillis = slaDuration && slaDuration * 1000;\n\n    const timer = setTimeout(() => {\n      calculateCurrentSlaLevel();\n    }, slaDurationInMillis);\n\n    return () => clearTimeout(timer);\n  }, [inCallSince, slaLevel]);\n\n  return (\n    <StyledCallContainer>\n      <StyledSLAProgress\n        determinate\n        placement='local'\n        slaDuration={slaDuration}\n        slaLevel={slaLevel}\n      />\n      {participants.map((item, index) => {\n        return (\n          <SummaryItem\n            container={\n              index === 0\n                ? {\n                    areas: '\"primary secondary actions\"',\n                    cols: 'auto minmax(0, 2fr) auto'\n                  }\n                : {\n                    areas: '\"visual primary secondary actions\"',\n                    cols: 'auto auto minmax(0, 2fr) auto'\n                  }\n            }\n            overflowStrategy='ellipsis'\n            visual={index !== 0 && <Icon name='arrow-up' />}\n            primary={item.name}\n            secondary={item.info && <Text variant='secondary'>{item.info}</Text>}\n            key={item.id}\n            actions={\n              index === 0 ? (\n                <Flex container={{ wrap: 'nowrap' }}>\n                  {slaConfig && (\n                    <Flex container={{ alignItems: 'center' }}>\n                      <StopWatch startTime={startedAt} timeout={slaTimeout} />\n                    </Flex>\n                  )}\n\n                  <Button\n                    icon\n                    variant='simple'\n                    disabled={onHoldSince !== undefined}\n                    onClick={() => onMuteToggle(callId)}\n                    label={t(\n                      muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'\n                    )}\n                  >\n                    <Icon name={muted ? 'mic-solid' : 'mic-off-solid'} />\n                  </Button>\n\n                  <Button\n                    icon\n                    variant='simple'\n                    disabled={!onPauseToggle}\n                    onClick={() => onPauseToggle?.(callId)}\n                    label={t(\n                      onHoldSince !== undefined\n                        ? 'call_panel_resume_call_menu_item'\n                        : 'call_panel_pause_call_menu_item'\n                    )}\n                  >\n                    <Icon name={onHoldSince !== undefined ? 'play-solid' : 'pause-solid'} />\n                  </Button>\n                  {onHoldSince ? (\n                    <>\n                      {onMergeCall && (\n                        <Button\n                          icon\n                          variant='simple'\n                          onClick={() => onMergeCall(callId)}\n                          label={t('call_panel_merge_call_menu_item')}\n                        >\n                          <Icon name='phone-split-solid' />\n                        </Button>\n                      )}\n                      {onHandOffCall && (\n                        <Button\n                          icon\n                          variant='simple'\n                          onClick={() => onHandOffCall(callId)}\n                          label={t('call_panel_handoff_call_menu_item')}\n                        >\n                          <Icon name='phone-out-solid' />\n                        </Button>\n                      )}\n                      <Button\n                        icon\n                        variant='simple'\n                        key='hang_up'\n                        disabled={!onEndCall}\n                        onClick={() => onEndCall?.(callId)}\n                        label={t('call_panel_hangup_call_menu_item')}\n                      >\n                        <Icon name='phone-hangup-solid' />\n                      </Button>\n                    </>\n                  ) : (\n                    <MenuButton\n                      ref={moreActionsButtonRef}\n                      text={t('actions')}\n                      iconOnly\n                      icon='more'\n                      variant='simple'\n                      menu={{\n                        variant: 'flyout',\n                        items: [\n                          {\n                            id: 'conference',\n                            primary: t('call_panel_conference_call_menu_item'),\n                            disabled: !onConferenceAction,\n                            onClick: () => setDialogType('conference')\n                          },\n                          {\n                            id: 'consult',\n                            primary: t('call_panel_consult_call_menu_item'),\n                            disabled: !onConsultAction,\n                            items: [\n                              {\n                                id: 'consultCallWithInteraction',\n                                primary: t('call_panel_menu_item_call_with_interaction'),\n                                disabled: !onTransferAction,\n                                onClick: () => setDialogType('consultWithInteractions')\n                              },\n                              {\n                                id: 'consultCallOnly',\n                                primary: t('call_panel_menu_item_call_only'),\n                                disabled: !onTransferAction,\n                                onClick: () => setDialogType('consultCallOnly')\n                              }\n                            ]\n                          },\n                          {\n                            id: 'transfer',\n                            primary: t('call_panel_transfer_call_menu_item'),\n                            disabled: !onTransferAction,\n                            items: [\n                              {\n                                id: 'transferCallWithInteraction',\n                                primary: t('call_panel_menu_item_call_with_interaction'),\n                                disabled: !onTransferAction,\n                                onClick: () => setDialogType('transferWithInteractions')\n                              },\n                              {\n                                id: 'transferCallOnly',\n                                primary: t('call_panel_menu_item_call_only'),\n                                disabled: !onTransferAction,\n                                onClick: () => setDialogType('transferCallOnly')\n                              }\n                            ]\n                          },\n                          {\n                            id: 'dtmf',\n                            primary: t('call_panel_send_dtmf_menu_item'),\n                            disabled: !onDTMFPress,\n                            onClick: () => setShowDTMF(true)\n                          },\n                          {\n                            id: 'hang_up',\n                            primary: t('call_panel_hangup_call_menu_item'),\n                            disabled: !onEndCall,\n                            onClick: () => onEndCall?.(callId)\n                          }\n                        ]\n                      }}\n                    />\n                  )}\n                </Flex>\n              ) : (\n                <Button\n                  icon\n                  variant='simple'\n                  key='hang_up'\n                  disabled={!item.onHangUp}\n                  onClick={() => item.onHangUp?.(callId, item.id)}\n                  label={t('call_panel_hangup_call_menu_item')}\n                >\n                  <Icon name='phone-hangup-solid' />\n                </Button>\n              )\n            }\n          />\n        );\n      })}\n      {onHoldSince !== undefined && (\n        <Status as={StyledHoldInfo} variant='pending'>\n          {\n            t('call_panel_call_on_hold', [\n              <StopWatch startTime={onHoldSince} />\n            ]) as unknown as string\n          }\n        </Status>\n      )}\n      {dialogType && (\n        <CallHandoverDialog\n          target={moreActionsButtonRef.current}\n          type={dialogType}\n          transferOptions={transferOptions}\n          interactionOptions={interactionOptions}\n          onCancel={() => {\n            setDialogType(undefined);\n            moreActionsButtonRef.current?.focus();\n          }}\n          onSubmit={transferData => {\n            switch (dialogType) {\n              case 'conference':\n                onConferenceAction?.(callId, transferData);\n                break;\n              case 'consultCallOnly':\n              case 'consultWithInteractions':\n                onConsultAction?.(callId, transferData);\n                break;\n              case 'transferCallOnly':\n              case 'transferWithInteractions':\n                onTransferAction?.(callId, transferData);\n                break;\n              default:\n            }\n            setDialogType(undefined);\n            moreActionsButtonRef.current?.focus();\n          }}\n        />\n      )}\n      {showDTMF && (\n        <DialPadDialog\n          target={moreActionsButtonRef.current}\n          onClose={() => setShowDTMF(false)}\n          onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n        />\n      )}\n    </StyledCallContainer>\n  );\n};\n\nexport default Call;\n"]}

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,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAaL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAatE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAgJ7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"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,CA2J7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}