@pega/cosmos-react-cs 3.0.0-rc.6 → 3.0.0-rc.8

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":"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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  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/CallHandover/CallHandover.types.d.ts

@@ -11,7 +11,7 @@ export interface TransferData {
     interaction: boolean;
     /** Phone number to transfer the call to. */
     phoneNumber: string;
-    /** Selected transferred interation option identifier. */
+    /** Selected transferred interaction option identifier. */
     transferredInteractionId?: TransferReasonOption['id'];
 }
 //# sourceMappingURL=CallHandover.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CallHandover.types.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandover.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,yCAAyC;IACzC,MAAM,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IACpC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,WAAW,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,wBAAwB,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;CACvD"}
+{"version":3,"file":"CallHandover.types.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandover.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,yCAAyC;IACzC,MAAM,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IACpC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,WAAW,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,wBAAwB,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;CACvD"}

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

@@ -1 +1 @@
-{"version":3,"file":"CallHandover.types.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandover.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface TransferReasonOption {\n  id: string;\n  label: string;\n}\n\nexport interface TransferData {\n  /** Selected reason option identifier. */\n  reason?: TransferReasonOption['id'];\n  /** Transfer comments. */\n  comments?: string;\n  /** Flag determining where interaction should be transferred along the call. */\n  interaction: boolean;\n  /** Phone number to transfer the call to. */\n  phoneNumber: string;\n  /** Selected transferred interation option identifier. */\n  transferredInteractionId?: TransferReasonOption['id'];\n}\n"]}
+{"version":3,"file":"CallHandover.types.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandover.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface TransferReasonOption {\n  id: string;\n  label: string;\n}\n\nexport interface TransferData {\n  /** Selected reason option identifier. */\n  reason?: TransferReasonOption['id'];\n  /** Transfer comments. */\n  comments?: string;\n  /** Flag determining where interaction should be transferred along the call. */\n  interaction: boolean;\n  /** Phone number to transfer the call to. */\n  phoneNumber: string;\n  /** Selected transferred interaction option identifier. */\n  transferredInteractionId?: TransferReasonOption['id'];\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"CallHandoverForm.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAyB,MAAM,OAAO,CAAC;AAmBtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAI/E,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,gDAAgD;IAChD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+BAA+B;IAC/B,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IACtD,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC;IACtC,kCAAkC;IAClC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,oNAMlC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAwG9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CallHandoverForm.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAyB,MAAM,OAAO,CAAC;AAmBtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAI/E,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,gDAAgD;IAChD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+BAA+B;IAC/B,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IACtD,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC;IACtC,kCAAkC;IAClC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,oNAMlC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAkG9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js

@@ -20,8 +20,7 @@ const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submit
     const [selectedContact, setSelectedContact] = useState();
     const [selectedInteraction, setSelectedInteraction] = useState();
     const [comments, setComments] = useState('');
-    return (_jsxs(StyledCallHandoverForm, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onClick: onCancel, children: t('cancel') }), _jsx(Button, { variant: 'primary', disabled: !(selectedContact &&
-                        (variant === 'call+interaction' ? selectedReason && comments : true)), onClick: () => {
+    return (_jsxs(StyledCallHandoverForm, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onClick: onCancel, children: t('cancel') }), _jsx(Button, { variant: 'primary', disabled: !(selectedContact && (variant === 'call+interaction' ? comments : true)), onClick: () => {
                         if (!selectedContact)
                             return;
                         onSubmit({
@@ -31,7 +30,7 @@ const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submit
                             phoneNumber: selectedContact,
                             transferredInteractionId: selectedInteraction?.id
                         });
-                    }, children: submitButtonText })] }), children: [variant === 'call+interaction' && (_jsxs(Flex, { container: { direction: 'column', itemGap: 1 }, children: [interactionOptions && (_jsx(ComboBox, { label: t('call_panel_handover_interaction_label'), selected: {
+                    }, children: submitButtonText })] }), children: [variant === 'call+interaction' && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [interactionOptions && (_jsx(ComboBox, { label: t('call_panel_handover_interaction_label'), selected: {
                             items: selectedInteraction
                                 ? { id: selectedInteraction.id, text: selectedInteraction.label }
                                 : undefined
@@ -42,7 +41,7 @@ const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submit
                                 selected: id === selectedInteraction?.id
                             })),
                             onItemClick: id => setSelectedInteraction(interactionOptions.find(option => option.id === id))
-                        } })), _jsx(ComboBox, { label: t('call_panel_handover_reason_label'), required: true, selected: {
+                        } })), _jsx(ComboBox, { label: t('call_panel_handover_reason_label'), selected: {
                             items: selectedReason
                                 ? { id: selectedReason.id, text: selectedReason.label }
                                 : undefined

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

@@ -1 +1 @@
-{"version":3,"file":"CallHandoverForm.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, Ref, useState, ChangeEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  registerIcon,\n  defaultThemeProp,\n  useI18n,\n  TextArea,\n  ComboBox,\n  Form,\n  Flex\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { Contact } from '../ContactList';\nimport CalleePicker from '../ContactList/CalleePicker';\n\nimport type { TransferReasonOption, TransferData } from './CallHandover.types';\n\nregisterIcon(timesIcon);\n\nexport interface CallHandoverFormProps {\n  /**\n   * Callback fired on handover submission.\n   * @param data the transfer parameters.\n   */\n  onSubmit: (data: TransferData) => void;\n  /** Callback fired on clicking Cancel button. */\n  onCancel: () => void;\n  /** Transfer reason options. */\n  transferOptions: Readonly<TransferReasonOption[]>;\n  /** Interaction options. */\n  interactionOptions?: Readonly<TransferReasonOption[]>;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Variant of component. */\n  variant?: 'call' | 'call+interaction';\n  /** Label of the submit button. */\n  submitButtonText: string;\n}\n\nexport const StyledCallHandoverForm = styled(Form)`\n  min-width: 50ch;\n\n  ${StyledTabPanel} {\n    height: 24rem;\n  }\n`;\n\nStyledCallHandoverForm.defaultProps = defaultThemeProp;\n\nconst CallHandoverForm: FunctionComponent<CallHandoverFormProps> = ({\n  onCancel,\n  onSubmit,\n  transferOptions,\n  variant,\n  submitButtonText,\n  interactionOptions\n}: CallHandoverFormProps) => {\n  const t = useI18n();\n\n  const [selectedReason, setSelectedReason] = useState<TransferReasonOption>();\n  const [selectedContact, setSelectedContact] = useState<Contact['phoneNumber']>();\n  const [selectedInteraction, setSelectedInteraction] = useState<TransferReasonOption>();\n  const [comments, setComments] = useState('');\n\n  return (\n    <StyledCallHandoverForm\n      actions={\n        <>\n          <Button variant='secondary' onClick={onCancel}>\n            {t('cancel')}\n          </Button>\n          <Button\n            variant='primary'\n            disabled={\n              !(\n                selectedContact &&\n                (variant === 'call+interaction' ? selectedReason && comments : true)\n              )\n            }\n            onClick={() => {\n              if (!selectedContact) return;\n              onSubmit({\n                reason: selectedReason?.id,\n                comments,\n                interaction: variant === 'call+interaction',\n                phoneNumber: selectedContact,\n                transferredInteractionId: selectedInteraction?.id\n              });\n            }}\n          >\n            {submitButtonText}\n          </Button>\n        </>\n      }\n    >\n      {variant === 'call+interaction' && (\n        <Flex container={{ direction: 'column', itemGap: 1 }}>\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          <ComboBox\n            label={t('call_panel_handover_reason_label')}\n            required\n            selected={{\n              items: selectedReason\n                ? { id: selectedReason.id, text: selectedReason.label }\n                : undefined\n            }}\n            menu={{\n              items: transferOptions.map(({ id, label }) => ({\n                id,\n                primary: label,\n                selected: id === selectedReason?.id\n              })),\n              onItemClick: id => setSelectedReason(transferOptions.find(option => option.id === id))\n            }}\n          />\n\n          <TextArea\n            name='comments'\n            required\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      )}\n      <CalleePicker\n        selectedContact={selectedContact}\n        onSelection={setSelectedContact}\n        variant='select'\n      />\n    </StyledCallHandoverForm>\n  );\n};\n\nexport default CallHandoverForm;\n"]}
+{"version":3,"file":"CallHandoverForm.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, Ref, useState, ChangeEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  registerIcon,\n  defaultThemeProp,\n  useI18n,\n  TextArea,\n  ComboBox,\n  Form,\n  Flex\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { Contact } from '../ContactList';\nimport CalleePicker from '../ContactList/CalleePicker';\n\nimport type { TransferReasonOption, TransferData } from './CallHandover.types';\n\nregisterIcon(timesIcon);\n\nexport interface CallHandoverFormProps {\n  /**\n   * Callback fired on handover submission.\n   * @param data the transfer parameters.\n   */\n  onSubmit: (data: TransferData) => void;\n  /** Callback fired on clicking Cancel button. */\n  onCancel: () => void;\n  /** Transfer reason options. */\n  transferOptions: Readonly<TransferReasonOption[]>;\n  /** Interaction options. */\n  interactionOptions?: Readonly<TransferReasonOption[]>;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Variant of component. */\n  variant?: 'call' | 'call+interaction';\n  /** Label of the submit button. */\n  submitButtonText: string;\n}\n\nexport const StyledCallHandoverForm = styled(Form)`\n  min-width: 50ch;\n\n  ${StyledTabPanel} {\n    height: 24rem;\n  }\n`;\n\nStyledCallHandoverForm.defaultProps = defaultThemeProp;\n\nconst CallHandoverForm: FunctionComponent<CallHandoverFormProps> = ({\n  onCancel,\n  onSubmit,\n  transferOptions,\n  variant,\n  submitButtonText,\n  interactionOptions\n}: CallHandoverFormProps) => {\n  const t = useI18n();\n\n  const [selectedReason, setSelectedReason] = useState<TransferReasonOption>();\n  const [selectedContact, setSelectedContact] = useState<Contact['phoneNumber']>();\n  const [selectedInteraction, setSelectedInteraction] = useState<TransferReasonOption>();\n  const [comments, setComments] = useState('');\n\n  return (\n    <StyledCallHandoverForm\n      actions={\n        <>\n          <Button variant='secondary' onClick={onCancel}>\n            {t('cancel')}\n          </Button>\n          <Button\n            variant='primary'\n            disabled={!(selectedContact && (variant === 'call+interaction' ? comments : true))}\n            onClick={() => {\n              if (!selectedContact) return;\n              onSubmit({\n                reason: selectedReason?.id,\n                comments,\n                interaction: variant === 'call+interaction',\n                phoneNumber: selectedContact,\n                transferredInteractionId: selectedInteraction?.id\n              });\n            }}\n          >\n            {submitButtonText}\n          </Button>\n        </>\n      }\n    >\n      {variant === 'call+interaction' && (\n        <Flex container={{ direction: 'column', gap: 1 }}>\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          <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: transferOptions.map(({ id, label }) => ({\n                id,\n                primary: label,\n                selected: id === selectedReason?.id\n              })),\n              onItemClick: id => setSelectedReason(transferOptions.find(option => option.id === id))\n            }}\n          />\n\n          <TextArea\n            name='comments'\n            required\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      )}\n      <CalleePicker\n        selectedContact={selectedContact}\n        onSelection={setSelectedContact}\n        variant='select'\n      />\n    </StyledCallHandoverForm>\n  );\n};\n\nexport default CallHandoverForm;\n"]}

package/lib/components/CallControlPanel/ContactList/CalleePicker.js

@@ -30,16 +30,18 @@ const CalleePicker = forwardRef(({ selectedContact, onSelection, variant }, ref)
         },
         { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }
     ];
+    const [phoneNumber, setPhoneNumber] = useState('');
     const tabContent = (tabId) => {
         if (tabId === 'dial-pad')
             return (_jsx(DialPad, { mode: 'default', ...(variant === 'action'
                     ? {
-                        onCallButtonClick: onSelection
+                        value: phoneNumber,
+                        onChange: setPhoneNumber,
+                        onCallClick: () => onSelection(phoneNumber)
                     }
                     : {
-                        onDialButtonClick: charCode => onSelection(charCode === 127
-                            ? selectedContact?.slice(0, -1) ?? ''
-                            : (selectedContact ?? '') + String.fromCharCode(charCode))
+                        value: selectedContact ?? '',
+                        onChange: onSelection
                     }) }));
         return (_jsx(ContactList, { contacts: (tabId === 'favorites' ? favorites : contacts).map(contact => ({
                 ...contact,

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

@@ -1 +1 @@
-{"version":3,"file":"CalleePicker.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/CalleePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,UAAU,EAIV,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,YAAY,EACZ,QAAQ,EACR,IAAI,EAEJ,gBAAgB,EAChB,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAE5C,OAAO,WAAW,EAAE,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE7D,YAAY,CAAC,SAAS,CAAC,CAAC;AAgBxB,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACzC,OAAO,GAAG,CAAA;MACN,cAAc;;;GAGjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,eAAe,EAAE,WAAW,EAAE,OAAO,EAAsC,EAC7E,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC1C,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEzD,MAAM,IAAI,GAAG;QACX,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE;QAClF;YACE,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,CAAC,CAAC,uCAAuC,CAAC;YAChD,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM;SACrD;QACD,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,sCAAsC,CAAC,EAAE;KACpE,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,EAAE;QACnC,IAAI,KAAK,KAAK,UAAU;YACtB,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAC,SAAS,KACV,CAAC,OAAO,KAAK,QAAQ;oBACvB,CAAC,CAAC;wBACE,iBAAiB,EAAE,WAAW;qBAC/B;oBACH,CAAC,CAAC;wBACE,iBAAiB,EAAE,QAAQ,CAAC,EAAE,CAC5B,WAAW,CACT,QAAQ,KAAK,GAAG;4BACd,CAAC,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;4BACrC,CAAC,CAAC,CAAC,eAAe,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAC5D;qBACJ,CAAC,GACN,CACH,CAAC;QACJ,OAAO,CACL,KAAC,WAAW,IACV,QAAQ,EAAE,CAAC,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;gBACvE,GAAG,OAAO;gBACV,QAAQ,EAAE,OAAO,CAAC,WAAW,KAAK,eAAe;aAClD,CAAC,CAAC,EACH,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,aAC1B,KAAC,IAAI,IACH,GAAG,EAAE,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,YAAY,EACjB,UAAU,EAAE,aAAa,EACzB,YAAY,EAAE,UAAU,GACxB,EACF,KAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAAG,UAAU,CAAC,UAAU,CAAC,GAAY,IAC7C,CACtB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  useContext,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  registerIcon,\n  TabPanel,\n  Tabs,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad from '../../DialPad/DialPad';\n\nimport ContactList, { ContactsContext } from './ContactList';\n\nregisterIcon(timesIcon);\n\nexport interface CalleePickerProps {\n  /** Currently selected number. */\n  selectedContact?: string;\n  /**\n   * Callback fired on new call made by the user.\n   * @param phoneNumber the number chosen.\n   */\n  onSelection: (phoneNumber: string) => void;\n  /** Variant of the list. */\n  variant: 'action' | 'select';\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledCalleePicker = styled.div(() => {\n  return css`\n    ${StyledTabPanel} {\n      height: 24rem;\n    }\n  `;\n});\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n\nconst CalleePicker: FunctionComponent<CalleePickerProps & ForwardProps> = forwardRef(\n  (\n    { selectedContact, onSelection, variant }: PropsWithoutRef<CalleePickerProps>,\n    ref: CalleePickerProps['ref']\n  ) => {\n    const t = useI18n();\n    const [currentTab, setCurrentTab] = useState('all');\n    const tabsRef = useRef<HTMLElement>(null);\n    const { contacts, onFavoriteToggle } = useContext(ContactsContext);\n    const favorites = contacts.filter(item => item.favorite);\n\n    const tabs = [\n      { id: 'all', name: t('call_panel_contacts_list_heading'), count: contacts.length },\n      {\n        id: 'favorites',\n        name: t('call_panel_contacts_favorites_heading'),\n        count: contacts.filter(item => item.favorite).length\n      },\n      { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }\n    ];\n\n    const tabContent = (tabId: string) => {\n      if (tabId === 'dial-pad')\n        return (\n          <DialPad\n            mode='default'\n            {...(variant === 'action'\n              ? {\n                  onCallButtonClick: onSelection\n                }\n              : {\n                  onDialButtonClick: charCode =>\n                    onSelection(\n                      charCode === 127\n                        ? selectedContact?.slice(0, -1) ?? ''\n                        : (selectedContact ?? '') + String.fromCharCode(charCode)\n                    )\n                })}\n          />\n        );\n      return (\n        <ContactList\n          contacts={(tabId === 'favorites' ? favorites : contacts).map(contact => ({\n            ...contact,\n            selected: contact.phoneNumber === selectedContact\n          }))}\n          onFavoriteToggle={onFavoriteToggle}\n          onItemClick={onSelection}\n          variant={variant}\n        />\n      );\n    };\n\n    return (\n      <StyledCalleePicker ref={ref}>\n        <Tabs\n          ref={tabsRef}\n          tabs={tabs}\n          type='horizontal'\n          onTabClick={setCurrentTab}\n          currentTabId={currentTab}\n        />\n        <TabPanel tabId={currentTab}>{tabContent(currentTab)}</TabPanel>\n      </StyledCalleePicker>\n    );\n  }\n);\n\nexport default CalleePicker;\n"]}
+{"version":3,"file":"CalleePicker.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/CalleePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useContext,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  registerIcon,\n  TabPanel,\n  Tabs,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad from '../../DialPad/DialPad';\n\nimport ContactList, { ContactsContext } from './ContactList';\n\nregisterIcon(timesIcon);\n\nexport interface CalleePickerProps {\n  /** Currently selected number. */\n  selectedContact?: string;\n  /**\n   * Callback fired on new call made by the user.\n   * @param phoneNumber the number chosen.\n   */\n  onSelection: (phoneNumber: string) => void;\n  /** Variant of the list. */\n  variant: 'action' | 'select';\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledCalleePicker = styled.div(() => {\n  return css`\n    ${StyledTabPanel} {\n      height: 24rem;\n    }\n  `;\n});\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n\nconst CalleePicker: FunctionComponent<CalleePickerProps & ForwardProps> = forwardRef(\n  (\n    { selectedContact, onSelection, variant }: PropsWithoutRef<CalleePickerProps>,\n    ref: CalleePickerProps['ref']\n  ) => {\n    const t = useI18n();\n    const [currentTab, setCurrentTab] = useState('all');\n    const tabsRef = useRef<HTMLElement>(null);\n    const { contacts, onFavoriteToggle } = useContext(ContactsContext);\n    const favorites = contacts.filter(item => item.favorite);\n\n    const tabs = [\n      { id: 'all', name: t('call_panel_contacts_list_heading'), count: contacts.length },\n      {\n        id: 'favorites',\n        name: t('call_panel_contacts_favorites_heading'),\n        count: contacts.filter(item => item.favorite).length\n      },\n      { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }\n    ];\n\n    const [phoneNumber, setPhoneNumber] = useState('');\n\n    const tabContent = (tabId: string) => {\n      if (tabId === 'dial-pad')\n        return (\n          <DialPad\n            mode='default'\n            {...(variant === 'action'\n              ? {\n                  value: phoneNumber,\n                  onChange: setPhoneNumber,\n                  onCallClick: () => onSelection(phoneNumber)\n                }\n              : {\n                  value: selectedContact ?? '',\n                  onChange: onSelection\n                })}\n          />\n        );\n      return (\n        <ContactList\n          contacts={(tabId === 'favorites' ? favorites : contacts).map(contact => ({\n            ...contact,\n            selected: contact.phoneNumber === selectedContact\n          }))}\n          onFavoriteToggle={onFavoriteToggle}\n          onItemClick={onSelection}\n          variant={variant}\n        />\n      );\n    };\n\n    return (\n      <StyledCalleePicker ref={ref}>\n        <Tabs\n          ref={tabsRef}\n          tabs={tabs}\n          type='horizontal'\n          onTabClick={setCurrentTab}\n          currentTabId={currentTab}\n        />\n        <TabPanel tabId={currentTab}>{tabContent(currentTab)}</TabPanel>\n      </StyledCalleePicker>\n    );\n  }\n);\n\nexport default CalleePicker;\n"]}

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

@@ -1,34 +1,7 @@
 import { FunctionComponent, Ref } from 'react';
-import { BannerProps, ForwardProps } from '@pega/cosmos-react-core';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { type AttachInteractionProps } from './AttachInteractionDialog';
 import { FloatingPanelProps } from './FloatingPanel';
-export interface InteractionOption {
-    id: string;
-    label: string;
-}
-export interface AttachInteractionData {
-    /** Selected reason option identifier. */
-    reason?: InteractionOption['id'];
-    /** Interaction comments. */
-    comments?: string;
-    /** Selected interation option identifier. */
-    interactionOption?: InteractionOption['id'];
-}
-export interface AttachInteractionFormProps {
-    /** The heading rendered. */
-    heading: string;
-    /** Callback fired when 'Submit' interaction action has been clicked. */
-    onAddInteraction: (data: AttachInteractionData) => void;
-    /** Callback fired when 'Cancel' interaction action has been clicked. */
-    onCancel: () => void;
-    /** Reason options. */
-    reasonOptions: Readonly<InteractionOption[]>;
-    /** Interaction options. */
-    interactionOptions?: Readonly<InteractionOption[]>;
-    /**
-     * Region for messages: errors, notifications, etc.
-     */
-    message?: Pick<BannerProps, 'id' | 'variant' | 'heading' | 'messages' | 'onDismiss'>;
-}
 export interface ExternalCTIProps {
     /** The heading rendered. */
     heading: string;
@@ -46,9 +19,8 @@ export interface ExternalCTIProps {
     /**
      * Attach intraction popup options.
      */
-    attachInteractionProps?: AttachInteractionFormProps;
+    attachInteractionProps?: AttachInteractionProps;
 }
-export declare const StyledInteractionForm: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").FormProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 declare const ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps>;
 export default ExternalCTI;
 //# sourceMappingURL=ExternalCTI.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExternalCTI.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAEjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,WAAW,EAGX,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAEjC,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,MAAM,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACjC,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,0BAA0B;IACzC,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,gBAAgB,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD,wEAAwE;IACxE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB;IACtB,aAAa,EAAE,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAC7C,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC,CAAC;CACtF;AAED,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,oCAAoC;IACpC,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,0BAA0B,CAAC;CACrD;AAgCD,eAAO,MAAM,qBAAqB,kLAUjC,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAgInE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ExternalCTI.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,iBAAiB,EAAmB,GAAG,EAAU,MAAM,OAAO,CAAC;AAGnG,OAAO,EAAoB,YAAY,EAAa,MAAM,yBAAyB,CAAC;AAEpF,OAAgC,EAAE,KAAK,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACjG,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,oCAAoC;IACpC,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;CACjD;AAgCD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAkDnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/CallControlPanel/ExternalCTI.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useState } from 'react';
+import { forwardRef, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, Flex, useI18n, Dialog, useDialog, Form, Banner, ComboBox, TextArea } from '@pega/cosmos-react-core';
+import { defaultThemeProp, useDialog } from '@pega/cosmos-react-core';
+import AttachInteractionDialog from './AttachInteractionDialog';
 import FloatingPanel from './FloatingPanel';
 const StyledExternalCTIPanel = styled(FloatingPanel)(({ theme: { components: { card: { 'border-radius': borderRadius } } } }) => {
     return css `
@@ -21,19 +22,9 @@ const StyledCTIContainer = styled.div `
   overflow-y: auto;
 `;
 StyledCTIContainer.defaultProps = defaultThemeProp;
-export const StyledInteractionForm = styled(Form)(({ theme: { base: { 'content-width': contentWidth } } }) => {
-    return css `
-      min-width: ${contentWidth.sm};
-    `;
-});
-StyledInteractionForm.defaultProps = defaultThemeProp;
 const ExternalCTI = forwardRef(({ heading, draggable = false, visible = true, size, attachInteractionProps }, ref) => {
-    const t = useI18n();
     const interactionButtonRef = useRef(null);
-    const [selectedReason, setSelectedReason] = useState();
-    const [selectedInteraction, setSelectedInteraction] = useState();
-    const [comments, setComments] = useState('');
-    const { target, events } = useDialog();
+    const { events, target } = useDialog();
     return (_jsxs(StyledExternalCTIPanel, { heading: heading, draggable: draggable, visible: visible, actions: attachInteractionProps
             ? [
                 {
@@ -49,36 +40,7 @@ const ExternalCTI = forwardRef(({ heading, draggable = false, visible = true, si
                         '--cti-container-width': `${size.width}px`,
                         '--cti-container-height': `${size.height}px`
                     }
-                    : undefined, ref: ref }), attachInteractionProps && (_jsx(Dialog, { target: target, heading: attachInteractionProps.heading, placement: 'top-end', onClose: attachInteractionProps.onCancel, onSubmit: ({ close }) => {
-                    attachInteractionProps.onAddInteraction({
-                        reason: selectedReason?.id,
-                        comments,
-                        interactionOption: selectedInteraction?.id
-                    });
-                    close();
-                }, children: _jsx(StyledInteractionForm, { children: _jsxs(Flex, { container: { direction: 'column', itemGap: 1 }, children: [attachInteractionProps.message && _jsx(Banner, { ...attachInteractionProps.message }), attachInteractionProps.interactionOptions && (_jsx(ComboBox, { label: t('call_panel_handover_interaction_label'), selected: {
-                                    items: selectedInteraction
-                                        ? { id: selectedInteraction.id, text: selectedInteraction.label }
-                                        : undefined
-                                }, menu: {
-                                    items: attachInteractionProps.interactionOptions.map(({ id, label }) => ({
-                                        id,
-                                        primary: label,
-                                        selected: id === selectedInteraction?.id
-                                    })),
-                                    onItemClick: id => setSelectedInteraction(attachInteractionProps.interactionOptions?.find(option => option.id === id))
-                                } })), attachInteractionProps.reasonOptions && (_jsx(ComboBox, { label: t('call_panel_handover_reason_label'), required: true, selected: {
-                                    items: selectedReason
-                                        ? { id: selectedReason.id, text: selectedReason.label }
-                                        : undefined
-                                }, menu: {
-                                    items: attachInteractionProps.reasonOptions?.map(({ id, label }) => ({
-                                        id,
-                                        primary: label,
-                                        selected: id === selectedReason?.id
-                                    })),
-                                    onItemClick: id => setSelectedReason(attachInteractionProps.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) })] }) }) }))] }));
+                    : undefined, ref: ref }), attachInteractionProps && (_jsx(AttachInteractionDialog, { ...attachInteractionProps, target: target }))] }));
 });
 export default ExternalCTI;
 //# sourceMappingURL=ExternalCTI.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  CSSProperties,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BannerProps,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  useI18n,\n  Dialog,\n  useDialog,\n  Form,\n  Banner,\n  ComboBox,\n  TextArea\n} from '@pega/cosmos-react-core';\n\nimport FloatingPanel, { FloatingPanelProps } from './FloatingPanel';\n\nexport interface InteractionOption {\n  id: string;\n  label: string;\n}\n\nexport interface AttachInteractionData {\n  /** Selected reason option identifier. */\n  reason?: InteractionOption['id'];\n  /** Interaction comments. */\n  comments?: string;\n  /** Selected interation option identifier. */\n  interactionOption?: InteractionOption['id'];\n}\n\nexport interface AttachInteractionFormProps {\n  /** The heading rendered. */\n  heading: string;\n  /** Callback fired when 'Submit' interaction action has been clicked. */\n  onAddInteraction: (data: AttachInteractionData) => void;\n  /** Callback fired when 'Cancel' interaction action has been clicked. */\n  onCancel: () => void;\n  /** Reason options. */\n  reasonOptions: Readonly<InteractionOption[]>;\n  /** Interaction options. */\n  interactionOptions?: Readonly<InteractionOption[]>;\n  /**\n   * Region for messages: errors, notifications, etc.\n   */\n  message?: Pick<BannerProps, 'id' | 'variant' | 'heading' | 'messages' | 'onDismiss'>;\n}\n\nexport interface ExternalCTIProps {\n  /** The heading rendered. */\n  heading: string;\n  /** If true, the component will be draggable. */\n  draggable?: boolean;\n  /** If true, the component will be visible. */\n  visible?: FloatingPanelProps['visible'];\n  /** Container element size in px. */\n  size?: {\n    width: number;\n    height: number;\n  };\n  /** Reference to the container. */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Attach intraction popup options.\n   */\n  attachInteractionProps?: AttachInteractionFormProps;\n}\n\nconst StyledExternalCTIPanel = styled(FloatingPanel)(\n  ({\n    theme: {\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    }\n  }) => {\n    return css`\n      width: auto;\n      iframe {\n        border: transparent;\n        display: block;\n        border-end-start-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n      }\n    `;\n  }\n);\n\nStyledExternalCTIPanel.defaultProps = defaultThemeProp;\n\nconst StyledCTIContainer = styled.div`\n  width: var(--cti-container-width, auto);\n  height: var(--cti-container-height, auto);\n  overflow-y: auto;\n`;\n\nStyledCTIContainer.defaultProps = defaultThemeProp;\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 ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      draggable = false,\n      visible = true,\n      size,\n      attachInteractionProps\n    }: PropsWithoutRef<ExternalCTIProps>,\n    ref: ExternalCTIProps['ref']\n  ) => {\n    const t = useI18n();\n    const interactionButtonRef = useRef<HTMLButtonElement>(null);\n    const [selectedReason, setSelectedReason] = useState<InteractionOption>();\n    const [selectedInteraction, setSelectedInteraction] = useState<InteractionOption>();\n    const [comments, setComments] = useState('');\n    const { target, events } = useDialog();\n\n    return (\n      <StyledExternalCTIPanel\n        heading={heading}\n        draggable={draggable}\n        visible={visible}\n        actions={\n          attachInteractionProps\n            ? [\n                {\n                  id: 'add-interaction',\n                  text: attachInteractionProps.heading,\n                  icon: 'paper-clip',\n                  ref: interactionButtonRef,\n                  ...events\n                }\n              ]\n            : undefined\n        }\n      >\n        <StyledCTIContainer\n          style={\n            size\n              ? ({\n                  '--cti-container-width': `${size.width}px`,\n                  '--cti-container-height': `${size.height}px`\n                } as CSSProperties)\n              : undefined\n          }\n          ref={ref}\n        />\n        {attachInteractionProps && (\n          <Dialog\n            target={target}\n            heading={attachInteractionProps.heading}\n            placement='top-end'\n            onClose={attachInteractionProps.onCancel}\n            onSubmit={({ close }) => {\n              attachInteractionProps.onAddInteraction({\n                reason: selectedReason?.id,\n                comments,\n                interactionOption: selectedInteraction?.id\n              });\n              close();\n            }}\n          >\n            <StyledInteractionForm>\n              <Flex container={{ direction: 'column', itemGap: 1 }}>\n                {attachInteractionProps.message && <Banner {...attachInteractionProps.message} />}\n\n                {attachInteractionProps.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: attachInteractionProps.interactionOptions.map(({ id, label }) => ({\n                        id,\n                        primary: label,\n                        selected: id === selectedInteraction?.id\n                      })),\n                      onItemClick: id =>\n                        setSelectedInteraction(\n                          attachInteractionProps.interactionOptions?.find(\n                            option => option.id === id\n                          )\n                        )\n                    }}\n                  />\n                )}\n\n                {attachInteractionProps.reasonOptions && (\n                  <ComboBox\n                    label={t('call_panel_handover_reason_label')}\n                    required\n                    selected={{\n                      items: selectedReason\n                        ? { id: selectedReason.id, text: selectedReason.label }\n                        : undefined\n                    }}\n                    menu={{\n                      items: attachInteractionProps.reasonOptions?.map(({ id, label }) => ({\n                        id,\n                        primary: label,\n                        selected: id === selectedReason?.id\n                      })),\n                      onItemClick: id =>\n                        setSelectedReason(\n                          attachInteractionProps.reasonOptions?.find(option => option.id === id)\n                        )\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      </StyledExternalCTIPanel>\n    );\n  }\n);\n\nexport default ExternalCTI;\n"]}
+{"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,UAAU,EAA2C,MAAM,EAAE,MAAM,OAAO,CAAC;AACnG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAgB,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpF,OAAO,uBAAwD,MAAM,2BAA2B,CAAC;AACjG,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAsBpE,MAAM,sBAAsB,GAAG,MAAM,CAAC,aAAa,CAAC,CAClD,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;mCAKqB,YAAY;iCACd,YAAY;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EACE,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,sBAAsB,EACY,EACpC,GAA4B,EAC5B,EAAE;IACF,MAAM,oBAAoB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC7D,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IAEvC,OAAO,CACL,MAAC,sBAAsB,IACrB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EACL,sBAAsB;YACpB,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,iBAAiB;oBACrB,IAAI,EAAE,sBAAsB,CAAC,OAAO;oBACpC,IAAI,EAAE,YAAY;oBAClB,GAAG,EAAE,oBAAoB;oBACzB,GAAG,MAAM;iBACV;aACF;YACH,CAAC,CAAC,SAAS,aAGf,KAAC,kBAAkB,IACjB,KAAK,EACH,IAAI;oBACF,CAAC,CAAE;wBACC,uBAAuB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;wBAC1C,wBAAwB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;qBAC3B;oBACrB,CAAC,CAAC,SAAS,EAEf,GAAG,EAAE,GAAG,GACR,EACD,sBAAsB,IAAI,CACzB,KAAC,uBAAuB,OAAK,sBAAsB,EAAE,MAAM,EAAE,MAAM,GAAI,CACxE,IACsB,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { CSSProperties, forwardRef, FunctionComponent, PropsWithoutRef, Ref, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, ForwardProps, useDialog } from '@pega/cosmos-react-core';\n\nimport AttachInteractionDialog, { type AttachInteractionProps } from './AttachInteractionDialog';\nimport FloatingPanel, { FloatingPanelProps } from './FloatingPanel';\n\nexport interface ExternalCTIProps {\n  /** The heading rendered. */\n  heading: string;\n  /** If true, the component will be draggable. */\n  draggable?: boolean;\n  /** If true, the component will be visible. */\n  visible?: FloatingPanelProps['visible'];\n  /** Container element size in px. */\n  size?: {\n    width: number;\n    height: number;\n  };\n  /** Reference to the container. */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Attach intraction popup options.\n   */\n  attachInteractionProps?: AttachInteractionProps;\n}\n\nconst StyledExternalCTIPanel = styled(FloatingPanel)(\n  ({\n    theme: {\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    }\n  }) => {\n    return css`\n      width: auto;\n      iframe {\n        border: transparent;\n        display: block;\n        border-end-start-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n      }\n    `;\n  }\n);\n\nStyledExternalCTIPanel.defaultProps = defaultThemeProp;\n\nconst StyledCTIContainer = styled.div`\n  width: var(--cti-container-width, auto);\n  height: var(--cti-container-height, auto);\n  overflow-y: auto;\n`;\n\nStyledCTIContainer.defaultProps = defaultThemeProp;\n\nconst ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      draggable = false,\n      visible = true,\n      size,\n      attachInteractionProps\n    }: PropsWithoutRef<ExternalCTIProps>,\n    ref: ExternalCTIProps['ref']\n  ) => {\n    const interactionButtonRef = useRef<HTMLButtonElement>(null);\n    const { events, target } = useDialog();\n\n    return (\n      <StyledExternalCTIPanel\n        heading={heading}\n        draggable={draggable}\n        visible={visible}\n        actions={\n          attachInteractionProps\n            ? [\n                {\n                  id: 'add-interaction',\n                  text: attachInteractionProps.heading,\n                  icon: 'paper-clip',\n                  ref: interactionButtonRef,\n                  ...events\n                }\n              ]\n            : undefined\n        }\n      >\n        <StyledCTIContainer\n          style={\n            size\n              ? ({\n                  '--cti-container-width': `${size.width}px`,\n                  '--cti-container-height': `${size.height}px`\n                } as CSSProperties)\n              : undefined\n          }\n          ref={ref}\n        />\n        {attachInteractionProps && (\n          <AttachInteractionDialog {...attachInteractionProps} target={target} />\n        )}\n      </StyledExternalCTIPanel>\n    );\n  }\n);\n\nexport default ExternalCTI;\n"]}

package/lib/components/CallControlPanel/FloatingPanel.js

@@ -15,7 +15,7 @@ export const StyledFloatingPanel = styled(StyledCard)(({ theme, isCollapsed, isD
     return css `
     max-height: calc(100% - 2rem);
     position: fixed;
-    z-index: ${theme.base['z-index'].modal};
+    z-index: calc(${theme.base['z-index'].backdrop} - 1);
     width: 25rem;
     right: calc(2 * ${theme.base.spacing});
     bottom: calc(2 * ${theme.base.spacing});

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  RefObject,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  CardHeader,\n  Button,\n  useI18n,\n  Icon,\n  registerIcon,\n  Flex,\n  Text,\n  ForwardProps,\n  useConsolidatedRef,\n  useDraggable,\n  Action,\n  IconName,\n  defaultThemeProp,\n  StyledButton,\n  StyledCard\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nregisterIcon(caretDownIcon, headsetIcon);\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n  if (containerRef && containerRef.current)\n    containerRef.current.style.transform = 'translate(0px, 0px)';\n};\n\nexport interface FloatingPanelActionProps extends ForwardProps {\n  /** A string to uniquely identify this Action within the onClick handler. */\n  id: Action['id'];\n  /** The text content of the Action. */\n  text: Action['text'];\n  /** Name of the icon from the cosmos set. */\n  icon: IconName;\n  /** Determines if the Action will be disabled. */\n  disabled?: Action['disabled'];\n  /** Called when the Action is clicked. */\n  onClick: NonNullable<Action['onClick']>;\n}\n\nexport interface FloatingPanelProps {\n  /** The heading rendered. */\n  heading: string;\n  /** Content of the panel */\n  children: ReactNode;\n  /** Action button to be rendered in header */\n  actions?: FloatingPanelActionProps[];\n  /** If true, the component will be draggable */\n  draggable?: boolean;\n  /** If true, the panel is visible. */\n  visible?: boolean;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledFloatingPanel = styled(StyledCard)<{\n  isCollapsed: boolean;\n  isDraggable?: boolean;\n  isVisible?: boolean;\n}>(({ theme, isCollapsed, isDraggable, isVisible = true }) => {\n  return css`\n    max-height: calc(100% - 2rem);\n    position: fixed;\n    z-index: ${theme.base['z-index'].modal};\n    width: 25rem;\n    right: calc(2 * ${theme.base.spacing});\n    bottom: calc(2 * ${theme.base.spacing});\n    box-shadow: ${theme.base.shadow.high};\n\n    ${!isVisible &&\n    css`\n      display: none;\n    `}\n\n    ${isCollapsed &&\n    css`\n      transform: translateY(\n        calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))\n      ) !important;\n    `}\n\n    ${StyledCardHeader} {\n      ${!isCollapsed &&\n      isDraggable &&\n      css`\n        cursor: all-scroll;\n      `}\n    }\n    ${StyledCardHeader} ${StyledButton}:last-child {\n      transition: transform calc(2 * ${theme.base.animation.speed})\n        ${theme.base.animation.timing.ease};\n      transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n    }\n  `;\n});\n\nStyledFloatingPanel.defaultProps = defaultThemeProp;\n\nconst FloatingPanel: FunctionComponent<FloatingPanelProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      actions = [],\n      draggable,\n      children,\n      visible = true,\n      ...restProps\n    }: PropsWithoutRef<FloatingPanelProps>,\n    ref: FloatingPanelProps['ref']\n  ) => {\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(false);\n    const containerRef = useConsolidatedRef(ref);\n    const dragRef = useRef<HTMLDivElement>(null);\n    useDraggable(containerRef, dragRef, !collapsed && draggable);\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (containerRef.current) {\n        setHeaderHeight(containerRef.current.querySelector('header')?.offsetHeight || 0);\n      }\n    }, [collapsed]);\n\n    return (\n      <StyledFloatingPanel\n        {...restProps}\n        ref={containerRef}\n        isCollapsed={collapsed}\n        isDraggable={draggable}\n        isVisible={visible}\n        style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n      >\n        <CardHeader\n          ref={dragRef}\n          actions={\n            <>\n              {actions.map(({ id, icon, text, ...restAction }) => (\n                <Button {...restAction} icon variant='simple' key={id} label={text}>\n                  <Icon name={icon} />\n                </Button>\n              ))}\n              <Button\n                icon\n                variant='simple'\n                key='expand-collapse'\n                label={t(collapsed ? 'call_panel_expand' : 'call_panel_collapse')}\n                onClick={() => {\n                  resetPopoverToDefaultPosition(containerRef);\n                  setCollapsed(state => !state);\n                }}\n              >\n                <Icon name='caret-down' />\n              </Button>\n            </>\n          }\n        >\n          <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n            <Icon name='headset' />\n            <Text variant='h3'>{heading}</Text>\n          </Flex>\n        </CardHeader>\n        {children}\n      </StyledFloatingPanel>\n    );\n  }\n);\n\nexport default FloatingPanel;\n"]}
+{"version":3,"file":"FloatingPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  RefObject,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  CardHeader,\n  Button,\n  useI18n,\n  Icon,\n  registerIcon,\n  Flex,\n  Text,\n  ForwardProps,\n  useConsolidatedRef,\n  useDraggable,\n  Action,\n  IconName,\n  defaultThemeProp,\n  StyledButton,\n  StyledCard\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nregisterIcon(caretDownIcon, headsetIcon);\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n  if (containerRef && containerRef.current)\n    containerRef.current.style.transform = 'translate(0px, 0px)';\n};\n\nexport interface FloatingPanelActionProps extends ForwardProps {\n  /** A string to uniquely identify this Action within the onClick handler. */\n  id: Action['id'];\n  /** The text content of the Action. */\n  text: Action['text'];\n  /** Name of the icon from the cosmos set. */\n  icon: IconName;\n  /** Determines if the Action will be disabled. */\n  disabled?: Action['disabled'];\n  /** Called when the Action is clicked. */\n  onClick: NonNullable<Action['onClick']>;\n}\n\nexport interface FloatingPanelProps {\n  /** The heading rendered. */\n  heading: string;\n  /** Content of the panel */\n  children: ReactNode;\n  /** Action button to be rendered in header */\n  actions?: FloatingPanelActionProps[];\n  /** If true, the component will be draggable */\n  draggable?: boolean;\n  /** If true, the panel is visible. */\n  visible?: boolean;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledFloatingPanel = styled(StyledCard)<{\n  isCollapsed: boolean;\n  isDraggable?: boolean;\n  isVisible?: boolean;\n}>(({ theme, isCollapsed, isDraggable, isVisible = true }) => {\n  return css`\n    max-height: calc(100% - 2rem);\n    position: fixed;\n    z-index: calc(${theme.base['z-index'].backdrop} - 1);\n    width: 25rem;\n    right: calc(2 * ${theme.base.spacing});\n    bottom: calc(2 * ${theme.base.spacing});\n    box-shadow: ${theme.base.shadow.high};\n\n    ${!isVisible &&\n    css`\n      display: none;\n    `}\n\n    ${isCollapsed &&\n    css`\n      transform: translateY(\n        calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))\n      ) !important;\n    `}\n\n    ${StyledCardHeader} {\n      ${!isCollapsed &&\n      isDraggable &&\n      css`\n        cursor: all-scroll;\n      `}\n    }\n    ${StyledCardHeader} ${StyledButton}:last-child {\n      transition: transform calc(2 * ${theme.base.animation.speed})\n        ${theme.base.animation.timing.ease};\n      transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n    }\n  `;\n});\n\nStyledFloatingPanel.defaultProps = defaultThemeProp;\n\nconst FloatingPanel: FunctionComponent<FloatingPanelProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      actions = [],\n      draggable,\n      children,\n      visible = true,\n      ...restProps\n    }: PropsWithoutRef<FloatingPanelProps>,\n    ref: FloatingPanelProps['ref']\n  ) => {\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(false);\n    const containerRef = useConsolidatedRef(ref);\n    const dragRef = useRef<HTMLDivElement>(null);\n    useDraggable(containerRef, dragRef, !collapsed && draggable);\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (containerRef.current) {\n        setHeaderHeight(containerRef.current.querySelector('header')?.offsetHeight || 0);\n      }\n    }, [collapsed]);\n\n    return (\n      <StyledFloatingPanel\n        {...restProps}\n        ref={containerRef}\n        isCollapsed={collapsed}\n        isDraggable={draggable}\n        isVisible={visible}\n        style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n      >\n        <CardHeader\n          ref={dragRef}\n          actions={\n            <>\n              {actions.map(({ id, icon, text, ...restAction }) => (\n                <Button {...restAction} icon variant='simple' key={id} label={text}>\n                  <Icon name={icon} />\n                </Button>\n              ))}\n              <Button\n                icon\n                variant='simple'\n                key='expand-collapse'\n                label={t(collapsed ? 'call_panel_expand' : 'call_panel_collapse')}\n                onClick={() => {\n                  resetPopoverToDefaultPosition(containerRef);\n                  setCollapsed(state => !state);\n                }}\n              >\n                <Icon name='caret-down' />\n              </Button>\n            </>\n          }\n        >\n          <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n            <Icon name='headset' />\n            <Text variant='h3'>{heading}</Text>\n          </Flex>\n        </CardHeader>\n        {children}\n      </StyledFloatingPanel>\n    );\n  }\n);\n\nexport default FloatingPanel;\n"]}

package/lib/components/DialPad/DialPad.d.ts

@@ -2,10 +2,12 @@ import { FunctionComponent, Ref } from 'react';
 import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
 import { DialPadKeyboardProps } from './DialPadKeyboard';
 export interface DialPadProps extends NoChildrenProp {
-    /** Callback fired on call button click */
-    onCallButtonClick?: (phoneNumber: string) => void;
-    /** On keypad button press callback */
-    onDialButtonClick?: (charCode: number) => void;
+    /** Entered number. */
+    value: string;
+    /** Callback fired when user types in the input or clicks on dialpad. */
+    onChange: (value: string) => void;
+    /** Callback fired when user clicks call button. */
+    onCallClick?: () => void;
     /** Keypad mode, regular or DTMF. */
     mode: DialPadKeyboardProps['mode'];
     /** Ref for the wrapping element. */

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

@@ -1 +1 @@
-{"version":3,"file":"DialPad.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,YAAY,EAQZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,oCAAoC;IACpC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACnC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA+C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"DialPad.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGzF,OAAO,EACL,YAAY,EAQZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,oCAAoC;IACpC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACnC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAuC3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/DialPad/DialPad.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useState } from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp, Input, Button, useI18n, Flex, StyledIcon, StyledFlex } from '@pega/cosmos-react-core';
 import DialPadKeyboard from './DialPadKeyboard';
@@ -16,18 +16,15 @@ const StyledDialPad = styled.div(({ theme: { base } }) => {
   `;
 });
 StyledDialPad.defaultProps = defaultThemeProp;
-const DialPad = forwardRef(({ onCallButtonClick, onDialButtonClick: onDialButtonClickProp, mode }, ref) => {
+const DialPad = forwardRef(({ value, onCallClick, onChange, mode }, ref) => {
     const t = useI18n();
-    const [number, setNumber] = useState('');
-    const onDialButtonClick = useCallback((charCode) => {
-        setNumber((prevNumber) => {
-            if (charCode === 127)
-                return prevNumber.slice(0, -1);
-            return prevNumber + String.fromCharCode(charCode);
-        });
-        onDialButtonClickProp?.(charCode);
-    }, [onDialButtonClickProp]);
-    return (_jsxs(StyledDialPad, { ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'center', itemGap: 1 }, children: [_jsx(Input, { value: number, onChange: (e) => setNumber(e.target.value), "aria-label": t('dial_pad_phone_number_input_label'), readOnly: mode === 'DTMF' }), mode !== 'DTMF' && onCallButtonClick && (_jsx(Button, { variant: 'primary', onClick: () => onCallButtonClick?.(number), "aria-label": t('dial_pad_call_button_label', [number]), disabled: number.length === 0, children: t('dial_pad_call_button_label') }))] }), _jsx(DialPadKeyboard, { onDialButtonClick: onDialButtonClick, mode: mode })] }));
+    const onDialButtonClick = (charCode) => {
+        const newValue = charCode === 127 ? value.slice(0, -1) : value + String.fromCharCode(charCode);
+        onChange(newValue);
+    };
+    return (_jsxs(StyledDialPad, { ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'center', itemGap: 1 }, children: [_jsx(Input, { value: value, onChange: (e) => {
+                            onChange(e.target.value);
+                        }, "aria-label": t('dial_pad_phone_number_input_label'), readOnly: mode === 'DTMF' }), mode !== 'DTMF' && onCallClick && (_jsx(Button, { variant: 'primary', onClick: onCallClick, "aria-label": t('dial_pad_call_button_label', [value]), disabled: value.length === 0, children: t('dial_pad_call_button_label') }))] }), _jsx(DialPadKeyboard, { onDialButtonClick: onDialButtonClick, mode: mode })] }));
 });
 export default DialPad;
 //# sourceMappingURL=DialPad.js.map

package/lib/components/DialPad/DialPad.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialPad.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,WAAW,EACX,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,UAAU,EACV,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,eAAyC,MAAM,mBAAmB,CAAC;AAa1E,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;MACN,UAAU;uBACO,IAAI,CAAC,OAAO;iBAClB,IAAI,CAAC,OAAO;;;MAGvB,UAAU,IAAI,UAAU;eACf,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EACE,iBAAiB,EACjB,iBAAiB,EAAE,qBAAqB,EACxC,IAAI,EAC0B,EAChC,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzC,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,QAAgB,EAAE,EAAE;QACnB,SAAS,CAAC,CAAC,UAAkB,EAAE,EAAE;YAC/B,IAAI,QAAQ,KAAK,GAAG;gBAAE,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YACrD,OAAO,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;QACH,qBAAqB,EAAE,CAAC,QAAQ,CAAC,CAAC;IACpC,CAAC,EACD,CAAC,qBAAqB,CAAC,CACxB,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aACtE,KAAC,KAAK,IACJ,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,gBAC7D,CAAC,CAAC,mCAAmC,CAAC,EAClD,QAAQ,EAAE,IAAI,KAAK,MAAM,GACzB,EACD,IAAI,KAAK,MAAM,IAAI,iBAAiB,IAAI,CACvC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,MAAM,CAAC,gBAC9B,CAAC,CAAC,4BAA4B,EAAE,CAAC,MAAM,CAAC,CAAC,EACrD,QAAQ,EAAE,MAAM,CAAC,MAAM,KAAK,CAAC,YAE5B,CAAC,CAAC,4BAA4B,CAAC,GACzB,CACV,IACI,EACP,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IACvD,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  defaultThemeProp,\n  Input,\n  Button,\n  useI18n,\n  Flex,\n  StyledIcon,\n  StyledFlex,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport DialPadKeyboard, { DialPadKeyboardProps } from './DialPadKeyboard';\n\nexport interface DialPadProps extends NoChildrenProp {\n  /** Callback fired on call button click */\n  onCallButtonClick?: (phoneNumber: string) => void;\n  /** On keypad button press callback */\n  onDialButtonClick?: (charCode: number) => void;\n  /** Keypad mode, regular or DTMF. */\n  mode: DialPadKeyboardProps['mode'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialPad = styled.div(({ theme: { base } }) => {\n  return css`\n    ${StyledFlex} {\n      margin: 0 auto ${base.spacing} auto;\n      padding: ${base.spacing} 0;\n    }\n\n    ${StyledFlex} ${StyledIcon} {\n      color: ${base.palette.interactive};\n    }\n  `;\n});\n\nStyledDialPad.defaultProps = defaultThemeProp;\n\nconst DialPad: FunctionComponent<DialPadProps & ForwardProps> = forwardRef(\n  (\n    {\n      onCallButtonClick,\n      onDialButtonClick: onDialButtonClickProp,\n      mode\n    }: PropsWithoutRef<DialPadProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n    const [number, setNumber] = useState('');\n\n    const onDialButtonClick = useCallback(\n      (charCode: number) => {\n        setNumber((prevNumber: string) => {\n          if (charCode === 127) return prevNumber.slice(0, -1);\n          return prevNumber + String.fromCharCode(charCode);\n        });\n        onDialButtonClickProp?.(charCode);\n      },\n      [onDialButtonClickProp]\n    );\n\n    return (\n      <StyledDialPad ref={ref}>\n        <Flex container={{ alignItems: 'center', justify: 'center', itemGap: 1 }}>\n          <Input\n            value={number}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => setNumber(e.target.value)}\n            aria-label={t('dial_pad_phone_number_input_label')}\n            readOnly={mode === 'DTMF'}\n          />\n          {mode !== 'DTMF' && onCallButtonClick && (\n            <Button\n              variant='primary'\n              onClick={() => onCallButtonClick?.(number)}\n              aria-label={t('dial_pad_call_button_label', [number])}\n              disabled={number.length === 0}\n            >\n              {t('dial_pad_call_button_label')}\n            </Button>\n          )}\n        </Flex>\n        <DialPadKeyboard onDialButtonClick={onDialButtonClick} mode={mode} />\n      </StyledDialPad>\n    );\n  }\n);\n\nexport default DialPad;\n"]}
+{"version":3,"file":"DialPad.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,UAAU,EAA2C,MAAM,OAAO,CAAC;AACzF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,UAAU,EACV,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,eAAyC,MAAM,mBAAmB,CAAC;AAe1E,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;MACN,UAAU;uBACO,IAAI,CAAC,OAAO;iBAClB,IAAI,CAAC,OAAO;;;MAGvB,UAAU,IAAI,UAAU;eACf,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAiC,EACrE,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,MAAM,QAAQ,GACZ,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAChF,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aACtE,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC7C,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAC3B,CAAC,gBACW,CAAC,CAAC,mCAAmC,CAAC,EAClD,QAAQ,EAAE,IAAI,KAAK,MAAM,GACzB,EACD,IAAI,KAAK,MAAM,IAAI,WAAW,IAAI,CACjC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,WAAW,gBACR,CAAC,CAAC,4BAA4B,EAAE,CAAC,KAAK,CAAC,CAAC,EACpD,QAAQ,EAAE,KAAK,CAAC,MAAM,KAAK,CAAC,YAE3B,CAAC,CAAC,4BAA4B,CAAC,GACzB,CACV,IACI,EACP,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IACvD,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { ChangeEvent, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  defaultThemeProp,\n  Input,\n  Button,\n  useI18n,\n  Flex,\n  StyledIcon,\n  StyledFlex,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport DialPadKeyboard, { DialPadKeyboardProps } from './DialPadKeyboard';\n\nexport interface DialPadProps extends NoChildrenProp {\n  /** Entered number. */\n  value: string;\n  /** Callback fired when user types in the input or clicks on dialpad. */\n  onChange: (value: string) => void;\n  /** Callback fired when user clicks call button. */\n  onCallClick?: () => void;\n  /** Keypad mode, regular or DTMF. */\n  mode: DialPadKeyboardProps['mode'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialPad = styled.div(({ theme: { base } }) => {\n  return css`\n    ${StyledFlex} {\n      margin: 0 auto ${base.spacing} auto;\n      padding: ${base.spacing} 0;\n    }\n\n    ${StyledFlex} ${StyledIcon} {\n      color: ${base.palette.interactive};\n    }\n  `;\n});\n\nStyledDialPad.defaultProps = defaultThemeProp;\n\nconst DialPad: FunctionComponent<DialPadProps & ForwardProps> = forwardRef(\n  (\n    { value, onCallClick, onChange, mode }: PropsWithoutRef<DialPadProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n\n    const onDialButtonClick = (charCode: number) => {\n      const newValue =\n        charCode === 127 ? value.slice(0, -1) : value + String.fromCharCode(charCode);\n      onChange(newValue);\n    };\n\n    return (\n      <StyledDialPad ref={ref}>\n        <Flex container={{ alignItems: 'center', justify: 'center', itemGap: 1 }}>\n          <Input\n            value={value}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => {\n              onChange(e.target.value);\n            }}\n            aria-label={t('dial_pad_phone_number_input_label')}\n            readOnly={mode === 'DTMF'}\n          />\n          {mode !== 'DTMF' && onCallClick && (\n            <Button\n              variant='primary'\n              onClick={onCallClick}\n              aria-label={t('dial_pad_call_button_label', [value])}\n              disabled={value.length === 0}\n            >\n              {t('dial_pad_call_button_label')}\n            </Button>\n          )}\n        </Flex>\n        <DialPadKeyboard onDialButtonClick={onDialButtonClick} mode={mode} />\n      </StyledDialPad>\n    );\n  }\n);\n\nexport default DialPad;\n"]}

package/lib/components/DialPad/DialPadDialog.d.ts

@@ -1,9 +1,8 @@
 import { FunctionComponent } from 'react';
-import { DialPadProps } from './DialPad';
 interface DialPadDialogProps {
     target: HTMLElement | null;
     onClose: () => void;
-    onDialButtonClick: DialPadProps['onDialButtonClick'];
+    onDialButtonClick: (charCode: number) => void;
 }
 declare const DialPadDialog: FunctionComponent<DialPadDialogProps>;
 export default DialPadDialog;

package/lib/components/DialPad/DialPadDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialPadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAiB7D,OAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,EAAE,YAAY,CAAC,mBAAmB,CAAC,CAAC;CACtD;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAoDxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DialPadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAmBvE,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CA+DxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/DialPad/DialPadDialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { Button, Card, CardContent, CardHeader, getFocusables, Icon, Popover, Text, useEscape, useFocusTrap, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
 import DialPad from './DialPad';
 const DialPadDialog = ({ target, onClose: onCloseProp, onDialButtonClick }) => {
@@ -15,6 +15,7 @@ const DialPadDialog = ({ target, onClose: onCloseProp, onDialButtonClick }) => {
     useEffect(() => {
         getFocusables(popoverRef)[0]?.focus();
     }, []);
+    const [phoneNumber, setPhoneNumber] = useState('');
     return (_jsx(Popover, { target: target, ref: popoverRef, placement: 'top-end', modifiers: [
             {
                 name: 'flip',
@@ -22,7 +23,12 @@ const DialPadDialog = ({ target, onClose: onCloseProp, onDialButtonClick }) => {
                     fallbackPlacements: ['bottom-end', 'left', 'right']
                 }
             }
-        ], heading: t('call_panel_send_dtmf_heading'), children: _jsxs(Card, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Text, { variant: 'h3', children: t('call_panel_send_dtmf_heading') }) }), _jsx(CardContent, { children: _jsx(DialPad, { onDialButtonClick: onDialButtonClick, mode: 'DTMF' }) })] }) }));
+        ], heading: t('call_panel_send_dtmf_heading'), children: _jsxs(Card, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Text, { variant: 'h3', children: t('call_panel_send_dtmf_heading') }) }), _jsx(CardContent, { children: _jsx(DialPad, { value: phoneNumber, onChange: inputText => {
+                            setPhoneNumber(inputText);
+                            // In DTMF mode only dialpad can be used for input without possibility to delete,
+                            // so always last character can be send to the parent component.
+                            onDialButtonClick(inputText.charCodeAt(inputText.length - 1));
+                        }, mode: 'DTMF' }) })] }) }));
 };
 export default DialPadDialog;
 //# sourceMappingURL=DialPadDialog.js.map

package/lib/components/DialPad/DialPadDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialPadDialog.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,OAAyB,MAAM,WAAW,CAAC;AAQlD,MAAM,aAAa,GAA0C,CAAC,EAC5D,MAAM,EACN,OAAO,EAAE,WAAW,EACpB,iBAAiB,EACE,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,WAAW,EAAE,CAAC;QACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;IAClD,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/B,YAAY,CAAC,UAAU,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE;oBACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;iBACpD;aACF;SACF,EACD,OAAO,EAAE,CAAC,CAAC,8BAA8B,CAAC,YAE1C,MAAC,IAAI,eACH,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,GAAQ,GAClD,EACb,KAAC,WAAW,cACV,KAAC,OAAO,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAC,MAAM,GAAG,GACjD,IACT,GACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, useRef, useEffect } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  getFocusables,\n  Icon,\n  Popover,\n  Text,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport DialPad, { DialPadProps } from './DialPad';\n\ninterface DialPadDialogProps {\n  target: HTMLElement | null;\n  onClose: () => void;\n  onDialButtonClick: DialPadProps['onDialButtonClick'];\n}\n\nconst DialPadDialog: FunctionComponent<DialPadDialogProps> = ({\n  target,\n  onClose: onCloseProp,\n  onDialButtonClick\n}: DialPadDialogProps) => {\n  const t = useI18n();\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  const onClose = () => {\n    onCloseProp();\n    target?.focus();\n  };\n\n  useOuterEvent('mousedown', [popoverRef], onClose);\n  useEscape(onClose, popoverRef);\n  useFocusTrap(popoverRef);\n\n  useEffect(() => {\n    getFocusables(popoverRef)[0]?.focus();\n  }, []);\n\n  return (\n    <Popover\n      target={target}\n      ref={popoverRef}\n      placement='top-end'\n      modifiers={[\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['bottom-end', 'left', 'right']\n          }\n        }\n      ]}\n      heading={t('call_panel_send_dtmf_heading')}\n    >\n      <Card>\n        <CardHeader\n          actions={\n            <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n              <Icon name='times' />\n            </Button>\n          }\n        >\n          <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n        </CardHeader>\n        <CardContent>\n          <DialPad onDialButtonClick={onDialButtonClick} mode='DTMF' />\n        </CardContent>\n      </Card>\n    </Popover>\n  );\n};\n\nexport default DialPadDialog;\n"]}
+{"version":3,"file":"DialPadDialog.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,OAAO,MAAM,WAAW,CAAC;AAQhC,MAAM,aAAa,GAA0C,CAAC,EAC5D,MAAM,EACN,OAAO,EAAE,WAAW,EACpB,iBAAiB,EACE,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,WAAW,EAAE,CAAC;QACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;IAClD,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/B,YAAY,CAAC,UAAU,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE;oBACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;iBACpD;aACF;SACF,EACD,OAAO,EAAE,CAAC,CAAC,8BAA8B,CAAC,YAE1C,MAAC,IAAI,eACH,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,GAAQ,GAClD,EACb,KAAC,WAAW,cACV,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,SAAS,CAAC,EAAE;4BACpB,cAAc,CAAC,SAAS,CAAC,CAAC;4BAC1B,iFAAiF;4BACjF,gEAAgE;4BAChE,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;wBAChE,CAAC,EACD,IAAI,EAAC,MAAM,GACX,GACU,IACT,GACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, useRef, useEffect, useState } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  getFocusables,\n  Icon,\n  Popover,\n  Text,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport DialPad from './DialPad';\n\ninterface DialPadDialogProps {\n  target: HTMLElement | null;\n  onClose: () => void;\n  onDialButtonClick: (charCode: number) => void;\n}\n\nconst DialPadDialog: FunctionComponent<DialPadDialogProps> = ({\n  target,\n  onClose: onCloseProp,\n  onDialButtonClick\n}: DialPadDialogProps) => {\n  const t = useI18n();\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  const onClose = () => {\n    onCloseProp();\n    target?.focus();\n  };\n\n  useOuterEvent('mousedown', [popoverRef], onClose);\n  useEscape(onClose, popoverRef);\n  useFocusTrap(popoverRef);\n\n  useEffect(() => {\n    getFocusables(popoverRef)[0]?.focus();\n  }, []);\n\n  const [phoneNumber, setPhoneNumber] = useState('');\n\n  return (\n    <Popover\n      target={target}\n      ref={popoverRef}\n      placement='top-end'\n      modifiers={[\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['bottom-end', 'left', 'right']\n          }\n        }\n      ]}\n      heading={t('call_panel_send_dtmf_heading')}\n    >\n      <Card>\n        <CardHeader\n          actions={\n            <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n              <Icon name='times' />\n            </Button>\n          }\n        >\n          <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n        </CardHeader>\n        <CardContent>\n          <DialPad\n            value={phoneNumber}\n            onChange={inputText => {\n              setPhoneNumber(inputText);\n              // In DTMF mode only dialpad can be used for input without possibility to delete,\n              // so always last character can be send to the parent component.\n              onDialButtonClick(inputText.charCodeAt(inputText.length - 1));\n            }}\n            mode='DTMF'\n          />\n        </CardContent>\n      </Card>\n    </Popover>\n  );\n};\n\nexport default DialPadDialog;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAQL,WAAW,EACX,YAAY,EAWZ,mBAAmB,EAEnB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAqED,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CA+CzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAOL,WAAW,EACX,YAAY,EAUZ,mBAAmB,EAEnB,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAqED,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CAiDzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}

package/lib/components/InteractionNotification/InteractionNotification.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Card, CardContent, CardHeader, Status, Text, SummaryItem, defaultThemeProp, Flex, StyledText, Avatar, FieldValueList, StyledFieldName, CardFooter, StyledFieldValueList, StyledButton, useI18n, useDirection } from '@pega/cosmos-react-core';
+import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldName, CardFooter, StyledFieldValueList, StyledButton, useI18n, useDirection, Icon } from '@pega/cosmos-react-core';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
@@ -72,7 +72,7 @@ const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
 StyledInteractionNotification.defaultProps = defaultThemeProp;
 const InteractionNotification = forwardRef(({ icon, title, primaryText, secondaryText, status, fields, onAccept }, ref) => {
     const t = useI18n();
-    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { actions: onAccept ? (_jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') })) : undefined, children: _jsx(SummaryItem, { visual: _jsx(Avatar, { shape: 'circle', size: 'm', name: title, icon: icon }), primary: title }) }), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: primaryText }), secondaryText && _jsx(Text, { variant: 'secondary', children: secondaryText }), _jsx(Status, { variant: status.variant, children: status.text })] }) }), fields && fields.length !== 0 && (_jsx(CardFooter, { children: _jsx(FieldValueList, { variant: 'inline', fields: fields }) }))] }));
+    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { actions: onAccept ? (_jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') })) : undefined, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', children: title })] }) }), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', as: 'span', children: primaryText }), secondaryText && _jsx(Text, { variant: 'secondary', children: secondaryText }), _jsx(Status, { variant: status.variant, children: status.text })] }) }), fields && fields.length !== 0 && (_jsx(CardFooter, { children: _jsx(FieldValueList, { variant: 'inline', fields: fields }) }))] }));
 });
 export default InteractionNotification;
 //# sourceMappingURL=InteractionNotification.js.map

package/lib/components/InteractionNotification/InteractionNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  SummaryItem,\n  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  Avatar,\n  FieldValueList,\n  StyledFieldName,\n  CardFooter,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface InteractionNotificationProps extends NoChildrenProp {\n  /** Ref to Component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Name of the icon used in header. */\n  icon: string;\n  /** Interaction title. */\n  title: string;\n  /** Primary information of the notification. For example caller name . */\n  primaryText: string;\n  /** Secondary information of the notification. For example phone number of the caller */\n  secondaryText?: string;\n  /** Represents the current status of interaction. */\n  status: { variant: StatusProps['variant']; text: string };\n  /** Information structured as field values to be displayed below main section. */\n  fields?: FieldValueListProps['fields'];\n  /** Callback when accept button is clicked. */\n  onAccept?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-inline-end: 1rem;\n    inset-block-start: 4rem;\n    width: clamp(21.5rem, calc(100% - 2rem), 25rem);\n    z-index: ${base['z-index'].modal};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n\n    &:not(& &) {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardHeader} {\n      ${StyledButton} {\n        margin-inline-start: calc(2 * ${base.spacing});\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n\n      ${StyledText} {\n        color: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledCardFooter} {\n      ${StyledFieldValueList} {\n        border-top: solid 0.0625rem ${base.colors.gray.medium};\n        padding-top: calc(2 * ${base.spacing});\n        color: ${base.colors.white};\n\n        ${StyledFieldName} {\n          color: ${base.colors.white};\n        }\n      }\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        icon,\n        title,\n        primaryText,\n        secondaryText,\n        status,\n        fields,\n        onAccept\n      }: PropsWithoutRef<InteractionNotificationProps>,\n      ref: InteractionNotificationProps['ref']\n    ) => {\n      const t = useI18n();\n\n      return (\n        <StyledInteractionNotification ref={ref}>\n          <CardHeader\n            actions={\n              onAccept ? (\n                <Button variant='primary' onClick={onAccept}>\n                  {t('accept')}\n                </Button>\n              ) : undefined\n            }\n          >\n            <SummaryItem\n              visual={<Avatar shape='circle' size='m' name={title} icon={icon} />}\n              primary={title}\n            />\n          </CardHeader>\n          <CardContent>\n            <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n              <Text variant='h1'>{primaryText}</Text>\n              {secondaryText && <Text variant='secondary'>{secondaryText}</Text>}\n              <Status variant={status.variant}>{status.text}</Status>\n            </Flex>\n          </CardContent>\n          {fields && fields.length !== 0 && (\n            <CardFooter>\n              <FieldValueList variant='inline' fields={fields} />\n            </CardFooter>\n          )}\n        </StyledInteractionNotification>\n      );\n    }\n  );\n\nexport default InteractionNotification;\n"]}
+{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  FieldValueList,\n  StyledFieldName,\n  CardFooter,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp,\n  Icon\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface InteractionNotificationProps extends NoChildrenProp {\n  /** Ref to Component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Name of the icon used in header. */\n  icon: string;\n  /** Interaction title. */\n  title: string;\n  /** Primary information of the notification. For example caller name . */\n  primaryText: string;\n  /** Secondary information of the notification. For example phone number of the caller */\n  secondaryText?: string;\n  /** Represents the current status of interaction. */\n  status: { variant: StatusProps['variant']; text: string };\n  /** Information structured as field values to be displayed below main section. */\n  fields?: FieldValueListProps['fields'];\n  /** Callback when accept button is clicked. */\n  onAccept?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-inline-end: 1rem;\n    inset-block-start: 4rem;\n    width: clamp(21.5rem, calc(100% - 2rem), 25rem);\n    z-index: ${base['z-index'].modal};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n\n    &:not(& &) {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardHeader} {\n      ${StyledButton} {\n        margin-inline-start: calc(2 * ${base.spacing});\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n\n      ${StyledText} {\n        color: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledCardFooter} {\n      ${StyledFieldValueList} {\n        border-top: solid 0.0625rem ${base.colors.gray.medium};\n        padding-top: calc(2 * ${base.spacing});\n        color: ${base.colors.white};\n\n        ${StyledFieldName} {\n          color: ${base.colors.white};\n        }\n      }\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        icon,\n        title,\n        primaryText,\n        secondaryText,\n        status,\n        fields,\n        onAccept\n      }: PropsWithoutRef<InteractionNotificationProps>,\n      ref: InteractionNotificationProps['ref']\n    ) => {\n      const t = useI18n();\n\n      return (\n        <StyledInteractionNotification ref={ref}>\n          <CardHeader\n            actions={\n              onAccept ? (\n                <Button variant='primary' onClick={onAccept}>\n                  {t('accept')}\n                </Button>\n              ) : undefined\n            }\n          >\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              <Icon name={icon} />\n              <Text variant='h2'>{title}</Text>\n            </Flex>\n          </CardHeader>\n          <CardContent>\n            <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n              <Text variant='h1' as='span'>\n                {primaryText}\n              </Text>\n              {secondaryText && <Text variant='secondary'>{secondaryText}</Text>}\n              <Status variant={status.variant}>{status.text}</Status>\n            </Flex>\n          </CardContent>\n          {fields && fields.length !== 0 && (\n            <CardFooter>\n              <FieldValueList variant='inline' fields={fields} />\n            </CardFooter>\n          )}\n        </StyledInteractionNotification>\n      );\n    }\n  );\n\nexport default InteractionNotification;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "3.0.0-rc.6",
+  "version": "3.0.0-rc.8",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,11 +20,11 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-rc.6",
-    "@pega/cosmos-react-dnd": "3.0.0-rc.6",
+    "@pega/cosmos-react-core": "3.0.0-rc.8",
+    "@pega/cosmos-react-dnd": "3.0.0-rc.8",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
-    "@types/styled-components": "^5.1.7",
+    "@types/styled-components": "^5.1.26",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",
@@ -37,6 +37,7 @@
     "@storybook/addon-toolbars": "^6.4.19",
     "@storybook/addons": "^6.4.19",
     "@storybook/react": "^6.4.19",
+    "@storybook/testing-react": "^1.2.4",
     "@storybook/theming": "^6.4.19",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",