npm - @pega/cosmos-react-cs - Versions diffs - 4.0.0-dev.23.1 → 4.0.0-dev.24.0 - Mend

@pega/cosmos-react-cs 4.0.0-dev.23.1 → 4.0.0-dev.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

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

@@ -12,7 +12,7 @@ import { ContactsContext } from './ContactList';
 import CalleePicker from './ContactList/CalleePicker';
 import IncomingCall from './IncomingCall';
 registerIcon(plusIcon);
-const CallControlPanel = forwardRef(({ heading, userStatus, message, draggable = false, calls, onAddCall, contactsList, onFavoriteToggle, visible, interactionTransfer, ...restProps }, ref) => {
+const CallControlPanel = forwardRef(function CallControlPanel({ heading, userStatus, message, draggable = false, calls, onAddCall, contactsList, onFavoriteToggle, visible, interactionTransfer, ...restProps }, ref) {
     const t = useI18n();
     const newCallButtonRef = useRef(null);
     const [showDialog, setShowDialog] = useState(false);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n CardContent,\n useI18n,\n registerIcon,\n Flex,\n ComboBox,\n useOuterEvent,\n ForwardProps,\n useConsolidatedRef,\n useEscape,\n Button,\n CardHeader,\n Icon,\n Text,\n Banner,\n hasProp,\n getFocusables,\n useFocusTrap\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\n\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCalleePicker, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\nimport FloatingPanel, { FloatingPanelActionProps } from './FloatingPanel';\nimport { ContactsContext } from './ContactList';\nimport CalleePicker from './ContactList/CalleePicker';\nimport IncomingCall from './IncomingCall';\n\nregisterIcon(plusIcon);\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n userStatus,\n message,\n draggable = false,\n calls,\n onAddCall,\n contactsList,\n onFavoriteToggle,\n visible,\n interactionTransfer,\n ...restProps\n }: PropsWithoutRef<CallControlPanelProps>,\n ref: CallControlPanelProps['ref']\n ) => {\n const t = useI18n();\n const newCallButtonRef = useRef<HTMLButtonElement>(null);\n const [showDialog, setShowDialog] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const dialogRef = useRef<HTMLDivElement>(null);\n\n useOuterEvent('mousedown', [dialogRef], () => {\n setShowDialog(false);\n });\n\n useEscape(() => setShowDialog(false), dialogRef);\n\n const selectedStatusOption = userStatus?.statusOptions.find(s => s.id === userStatus.status);\n\n const newCallButton: FloatingPanelActionProps = {\n id: 'new-call',\n text: t('call_panel_make_new_call'),\n onClick: () => setShowDialog(true),\n icon: 'plus',\n ref: newCallButtonRef\n };\n\n const ctx = useMemo(\n () => ({\n contacts: contactsList,\n onFavoriteToggle\n }),\n [contactsList, onFavoriteToggle]\n );\n\n useFocusTrap(dialogRef);\n\n useEffect(() => {\n if (showDialog) {\n const focusables = getFocusables(dialogRef);\n if (focusables[0]) focusables[0]?.focus();\n }\n }, [showDialog]);\n\n return (\n <ContactsContext.Provider value={ctx}>\n <FloatingPanel\n {...restProps}\n ref={containerRef}\n draggable={draggable}\n visible={visible}\n heading={heading}\n actions={onAddCall ? [newCallButton] : undefined}\n >\n <CardContent container={{ itemGap: 2 }}>\n {message && <Banner {...message} />}\n {interactionTransfer && (\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4' as='span'>\n {t('call_panel_interaction_transfer_heading')}\n </Text>\n <div>\n <Button variant='secondary' onClick={interactionTransfer.onCancel}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={interactionTransfer.onComplete}>\n {t('call_panel_interaction_transfer_complete_button_label')}\n </Button>\n </div>\n </Flex>\n )}\n {userStatus ? (\n <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n <Flex item={{ grow: 1 }}>\n <ComboBox\n label={t('call_panel_agent_status')}\n labelHidden\n selected={{\n items: {\n id: userStatus.status,\n text: selectedStatusOption?.label \|\| userStatus.status\n }\n }}\n menu={{\n items: userStatus.statusOptions.map(({ id, label, disabled }) => {\n return { id, primary: label, selected: id === userStatus.status, disabled };\n }),\n onItemClick: userStatus.onChange\n }}\n />\n </Flex>\n <StopWatch startTime={userStatus.inStatusSince} />\n </Flex>\n ) : undefined}\n\n {calls.map(callProps =>\n hasProp(callProps, 'onAcceptCall') ? (\n <IncomingCall key={callProps.id} {...callProps} />\n ) : (\n <Call key={callProps.id} {...callProps} />\n )\n )}\n </CardContent>\n {showDialog && newCallButtonRef.current && (\n <Dialog target={newCallButtonRef.current} ref={dialogRef} placement='bottom-end'>\n <StyledCalleePicker>\n <CardHeader\n actions={\n <Button\n icon\n variant='simple'\n aria-label={t('close')}\n onClick={() => setShowDialog(false)}\n >\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_new_call_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 2 }}>\n <CalleePicker\n variant='action'\n onSelection={phoneNumber => {\n onAddCall?.(phoneNumber);\n setShowDialog(false);\n }}\n />\n </CardContent>\n </StyledCalleePicker>\n </Dialog>\n )}\n </FloatingPanel>\n </ContactsContext.Provider>\n );\n }\n);\n\nexport default CallControlPanel;\n"]}
1	+ {"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n CardContent,\n useI18n,\n registerIcon,\n Flex,\n ComboBox,\n useOuterEvent,\n ForwardProps,\n useConsolidatedRef,\n useEscape,\n Button,\n CardHeader,\n Icon,\n Text,\n Banner,\n hasProp,\n getFocusables,\n useFocusTrap\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\n\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCalleePicker, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\nimport FloatingPanel, { FloatingPanelActionProps } from './FloatingPanel';\nimport { ContactsContext } from './ContactList';\nimport CalleePicker from './ContactList/CalleePicker';\nimport IncomingCall from './IncomingCall';\n\nregisterIcon(plusIcon);\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n function CallControlPanel(\n {\n heading,\n userStatus,\n message,\n draggable = false,\n calls,\n onAddCall,\n contactsList,\n onFavoriteToggle,\n visible,\n interactionTransfer,\n ...restProps\n }: PropsWithoutRef<CallControlPanelProps>,\n ref: CallControlPanelProps['ref']\n ) {\n const t = useI18n();\n const newCallButtonRef = useRef<HTMLButtonElement>(null);\n const [showDialog, setShowDialog] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const dialogRef = useRef<HTMLDivElement>(null);\n\n useOuterEvent('mousedown', [dialogRef], () => {\n setShowDialog(false);\n });\n\n useEscape(() => setShowDialog(false), dialogRef);\n\n const selectedStatusOption = userStatus?.statusOptions.find(s => s.id === userStatus.status);\n\n const newCallButton: FloatingPanelActionProps = {\n id: 'new-call',\n text: t('call_panel_make_new_call'),\n onClick: () => setShowDialog(true),\n icon: 'plus',\n ref: newCallButtonRef\n };\n\n const ctx = useMemo(\n () => ({\n contacts: contactsList,\n onFavoriteToggle\n }),\n [contactsList, onFavoriteToggle]\n );\n\n useFocusTrap(dialogRef);\n\n useEffect(() => {\n if (showDialog) {\n const focusables = getFocusables(dialogRef);\n if (focusables[0]) focusables[0]?.focus();\n }\n }, [showDialog]);\n\n return (\n <ContactsContext.Provider value={ctx}>\n <FloatingPanel\n {...restProps}\n ref={containerRef}\n draggable={draggable}\n visible={visible}\n heading={heading}\n actions={onAddCall ? [newCallButton] : undefined}\n >\n <CardContent container={{ itemGap: 2 }}>\n {message && <Banner {...message} />}\n {interactionTransfer && (\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4' as='span'>\n {t('call_panel_interaction_transfer_heading')}\n </Text>\n <div>\n <Button variant='secondary' onClick={interactionTransfer.onCancel}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={interactionTransfer.onComplete}>\n {t('call_panel_interaction_transfer_complete_button_label')}\n </Button>\n </div>\n </Flex>\n )}\n {userStatus ? (\n <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n <Flex item={{ grow: 1 }}>\n <ComboBox\n label={t('call_panel_agent_status')}\n labelHidden\n selected={{\n items: {\n id: userStatus.status,\n text: selectedStatusOption?.label \|\| userStatus.status\n }\n }}\n menu={{\n items: userStatus.statusOptions.map(({ id, label, disabled }) => {\n return { id, primary: label, selected: id === userStatus.status, disabled };\n }),\n onItemClick: userStatus.onChange\n }}\n />\n </Flex>\n <StopWatch startTime={userStatus.inStatusSince} />\n </Flex>\n ) : undefined}\n\n {calls.map(callProps =>\n hasProp(callProps, 'onAcceptCall') ? (\n <IncomingCall key={callProps.id} {...callProps} />\n ) : (\n <Call key={callProps.id} {...callProps} />\n )\n )}\n </CardContent>\n {showDialog && newCallButtonRef.current && (\n <Dialog target={newCallButtonRef.current} ref={dialogRef} placement='bottom-end'>\n <StyledCalleePicker>\n <CardHeader\n actions={\n <Button\n icon\n variant='simple'\n aria-label={t('close')}\n onClick={() => setShowDialog(false)}\n >\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_new_call_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 2 }}>\n <CalleePicker\n variant='action'\n onSelection={phoneNumber => {\n onAddCall?.(phoneNumber);\n setShowDialog(false);\n }}\n />\n </CardContent>\n </StyledCalleePicker>\n </Dialog>\n )}\n </FloatingPanel>\n </ContactsContext.Provider>\n );\n }\n);\n\nexport default CallControlPanel;\n"]}

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

@@ -14,7 +14,7 @@ export const StyledCallHandoverForm = styled(Form) `
   }
 `;
 StyledCallHandoverForm.defaultProps = defaultThemeProp;
-const CallHandoverForm = forwardRef(({ onCancel, onSubmit, transferOptions, variant, submitButtonText, interactionOptions, defaultTransfer, defaultInteraction }, ref) => {
+const CallHandoverForm = forwardRef(function CallHandoverForm({ onCancel, onSubmit, transferOptions, variant, submitButtonText, interactionOptions, defaultTransfer, defaultInteraction }, ref) {
     const t = useI18n();
     const [selectedContact, setSelectedContact] = useState();
     const initialReason = transferOptions.find(reason => reason.id === defaultTransfer);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CallHandoverForm.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,QAAQ,EAAe,UAAU,EAAmB,MAAM,OAAO,CAAC;AACnG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,YAAY,MAAM,6BAA6B,CAAC;AAIvD,YAAY,CAAC,SAAS,CAAC,CAAC;AA0BxB,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;IAG9C,cAAc;;;CAGjB,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,gBAAgB,GAA6C,UAAU,CAC3E,~~CACE~~,EACE,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EACqB,EACzC,GAAiC~~,EACjC,EAAE~~;~~IACF~~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","sourcesContent":["import { FunctionComponent, Ref, useState, ChangeEvent, forwardRef, PropsWithoutRef } 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 /* Current selected transfer reason /\n defaultTransfer?: TransferReasonOption['id'];\n /* Current selected interaction /\n defaultInteraction?: TransferReasonOption['id'];\n /* Transfer reason options. /\n transferOptions: Readonly<TransferReasonOption[]>;\n /* Interaction options. /\n interactionOptions?: Readonly<TransferReasonOption[]>;\n /* Reference to the root component. /\n ref?: Ref<HTMLFormElement>;\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> = forwardRef(\n (\n {\n onCancel,\n onSubmit,\n transferOptions,\n variant,\n submitButtonText,\n interactionOptions,\n defaultTransfer,\n defaultInteraction\n }: PropsWithoutRef<CallHandoverFormProps>,\n ref: CallHandoverFormProps['ref']\n ) => {\n const t = useI18n();\n\n const [selectedContact, setSelectedContact] = useState<Contact['phoneNumber']>();\n const initialReason = transferOptions.find(reason => reason.id === defaultTransfer);\n const initialInteraction = interactionOptions?.find(\n interaction => interaction.id === defaultInteraction\n );\n const [selectedReason, setSelectedReason] = useState<TransferReasonOption \| undefined>(\n initialReason\n );\n const [selectedInteraction, setSelectedInteraction] = useState<\n TransferReasonOption \| undefined\n >(initialInteraction);\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 ref={ref}\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 =>\n 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);\n\nexport default CallHandoverForm;\n"]}
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, forwardRef, PropsWithoutRef } 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 /* Current selected transfer reason /\n defaultTransfer?: TransferReasonOption['id'];\n /* Current selected interaction /\n defaultInteraction?: TransferReasonOption['id'];\n /* Transfer reason options. /\n transferOptions: Readonly<TransferReasonOption[]>;\n /* Interaction options. /\n interactionOptions?: Readonly<TransferReasonOption[]>;\n /* Reference to the root component. /\n ref?: Ref<HTMLFormElement>;\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> = forwardRef(\n function CallHandoverForm(\n {\n onCancel,\n onSubmit,\n transferOptions,\n variant,\n submitButtonText,\n interactionOptions,\n defaultTransfer,\n defaultInteraction\n }: PropsWithoutRef<CallHandoverFormProps>,\n ref: CallHandoverFormProps['ref']\n ) {\n const t = useI18n();\n\n const [selectedContact, setSelectedContact] = useState<Contact['phoneNumber']>();\n const initialReason = transferOptions.find(reason => reason.id === defaultTransfer);\n const initialInteraction = interactionOptions?.find(\n interaction => interaction.id === defaultInteraction\n );\n const [selectedReason, setSelectedReason] = useState<TransferReasonOption \| undefined>(\n initialReason\n );\n const [selectedInteraction, setSelectedInteraction] = useState<\n TransferReasonOption \| undefined\n >(initialInteraction);\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 ref={ref}\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 =>\n 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);\n\nexport default CallHandoverForm;\n"]}

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

@@ -15,7 +15,7 @@ const StyledCalleePicker = styled.div(() => {
   `;
 });
 StyledCalleePicker.defaultProps = defaultThemeProp;
-const CalleePicker = forwardRef(({ selectedContact, onSelection, variant }, ref) => {
+const CalleePicker = forwardRef(function CalleePicker({ selectedContact, onSelection, variant }, ref) {
     const t = useI18n();
     const [currentTab, setCurrentTab] = useState('all');
     const tabsRef = useRef(null);

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

	@@ -1 +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,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,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,KAAK,EAAE,WAAW;wBAClB,QAAQ,EAAE,cAAc;wBACxB,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC;qBAC5C;oBACH,CAAC,CAAC;wBACE,KAAK,EAAE,eAAe,IAAI,EAAE;wBAC5B,QAAQ,EAAE,WAAW;qBACtB,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 [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"]}
1	+ {"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 function CalleePicker(\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/ContactList/ContactList.js CHANGED Viewed

@@ -77,7 +77,7 @@ const SelectableContactItem = ({ id, primary, secondary, checked, container, onC
 const CallableContactItem = ({ visual, primary, secondary, onClick, container }) => {
     return (_jsx("li", { children: _jsx(BareRoleButton, { onClick: onClick, children: _jsx(SummaryItem, { visual: visual, primary: primary, secondary: secondary, container: container, actions: _jsx(Icon, { name: 'phone-solid' }) }) }) }));
 };
-const ContactList = forwardRef(({ contacts: items, onItemClick, onFavoriteToggle, variant }, ref) => {
+const ContactList = forwardRef(function ContactList({ contacts: items, onItemClick, onFavoriteToggle, variant }, ref) {
     const t = useI18n();
     const [searchText, setSearchText] = useState('');
     const containerRef = useConsolidatedRef(ref);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContactList.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n forwardRef,\n FunctionComponent,\n MouseEvent,\n PropsWithoutRef,\n useCallback,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n defaultThemeProp,\n ForwardProps,\n Icon,\n registerIcon,\n Text,\n useI18n,\n ViewAll,\n StyledSummaryItemActions,\n StyledPrimary,\n StyledSecondary,\n useArrows,\n useConsolidatedRef,\n StyledCard,\n RadioButton,\n RadioButtonProps,\n SummaryItemProps,\n SummaryItem,\n StyledSummaryItem,\n StyledLabel\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as starSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star-solid.icon';\nimport { StyledRadioCheckCard } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport BareRoleButton, {\n BareRoleButtonProps\n} from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport type { Contact, ContactListProps, SelectableContact } from './ContactList.types';\n\nregisterIcon(starIcon, starSolidIcon);\n\nconst StyledContactList = styled.div(({ theme: { base, components } }) => {\n return css`\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0 calc(0.5 * ${base.spacing}) calc(0.5 * ${base.spacing});\n\n > ${StyledCard} > ${StyledCardContent} {\n padding: 0;\n gap: 0;\n }\n\n ul {\n list-style: none;\n }\n\n ${StyledRadioCheckCard} {\n background-color: transparent;\n border: 0;\n padding: 0 calc(0.5 * ${base.spacing});\n height: ${components.button.height};\n align-items: center;\n border-radius: 0;\n\n > ${StyledLabel} {\n max-width: 100%;\n width: 100%;\n margin: 0;\n }\n }\n\n li {\n padding: 0;\n height: calc(${components.button.height} + 0.125rem);\n\n :not(:last-child) {\n border-bottom: 0.0625rem solid ${base.palette['border-line']};\n }\n }\n\n ${StyledSummaryItem} {\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n font-weight: ${base['font-weight'].normal};\n }\n }\n\n ${StyledSummaryItemActions} {\n color: ${base.palette.interactive};\n }\n\n @media (pointer: 'coarse') {\n li {\n height: ${components.button.touch.height};\n }\n }\n `;\n});\n\nStyledContactList.defaultProps = defaultThemeProp;\n\nexport const ContactsContext = createContext<{\n contacts: Contact[];\n onFavoriteToggle: ContactListProps['onFavoriteToggle'];\n}>({\n contacts: [],\n onFavoriteToggle: () => {}\n});\n\nconst SelectableContactItem = ({\n id,\n primary,\n secondary,\n checked,\n container,\n onChange\n}: SummaryItemProps & RadioButtonProps) => {\n return (\n <li key={id}>\n <RadioButton\n card\n variant='card'\n label={\n <SummaryItem id={id} primary={primary} secondary={secondary} container={container} />\n }\n checked={checked}\n onChange={onChange}\n name={`${id}-contact`}\n />\n </li>\n );\n};\n\nconst CallableContactItem = ({\n visual,\n primary,\n secondary,\n onClick,\n container\n}: SummaryItemProps & { onClick: BareRoleButtonProps['onClick'] }) => {\n return (\n <li>\n <BareRoleButton onClick={onClick}>\n <SummaryItem\n visual={visual}\n primary={primary}\n secondary={secondary}\n container={container}\n actions={<Icon name='phone-solid' />}\n />\n </BareRoleButton>\n </li>\n );\n};\n\nconst ContactList: FunctionComponent<ContactListProps & ForwardProps> = forwardRef(\n (\n { contacts: items, onItemClick, onFavoriteToggle, variant }: PropsWithoutRef<ContactListProps>,\n ref: ContactListProps['ref']\n ) => {\n const t = useI18n();\n const [searchText, setSearchText] = useState('');\n const containerRef = useConsolidatedRef(ref);\n\n const onSearchChange = useCallback((value: string) => {\n setSearchText(value.trim());\n }, []);\n\n const favoriteButton = useCallback(\n (phoneNumber: string, favorite: boolean) => (\n <Button\n variant='simple'\n icon\n onClick={(e: MouseEvent) => {\n e.stopPropagation();\n onFavoriteToggle(phoneNumber, favorite);\n }}\n aria-label={\n favorite\n ? t('call_panel_contacts_add_to_favorites')\n : t('call_panel_contacts_remove_from_favorites')\n }\n >\n <Icon name={favorite ? 'star-solid' : 'star'} />\n </Button>\n ),\n [onFavoriteToggle]\n );\n\n const createList = (list: SelectableContact[]) => {\n return list.map(item => {\n const commonOpts = {\n id: item.phoneNumber,\n primary: item.primary,\n secondary: <Text variant='secondary'>{item.secondary}</Text>,\n container: {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'\n }\n };\n return variant === 'select'\n ? {\n ...commonOpts,\n as: SelectableContactItem,\n checked: item.selected,\n onChange: () => onItemClick(item.phoneNumber)\n }\n : {\n ...commonOpts,\n as: CallableContactItem,\n visual: favoriteButton(item.phoneNumber, item.favorite),\n onClick: () => onItemClick(item.phoneNumber)\n };\n });\n };\n\n useArrows(containerRef, { selector: ':scope ul [role=\"button\"]' });\n\n return (\n <ViewAll\n as={StyledContactList}\n ref={containerRef}\n items={\n searchText\n ? createList(\n items.filter(({ phoneNumber, primary, secondary }) => {\n return (\n primary.toLowerCase().includes(searchText.toLowerCase()) \|\|\n secondary.toLowerCase().includes(searchText.toLowerCase()) \|\|\n phoneNumber.toLowerCase().includes(searchText.toLowerCase())\n );\n })\n )\n : createList(items)\n }\n searchInputProps={{ onSearchChange }}\n />\n );\n }\n);\n\nexport default ContactList;\n"]}
1	+ {"version":3,"file":"ContactList.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n forwardRef,\n FunctionComponent,\n MouseEvent,\n PropsWithoutRef,\n useCallback,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n defaultThemeProp,\n ForwardProps,\n Icon,\n registerIcon,\n Text,\n useI18n,\n ViewAll,\n StyledSummaryItemActions,\n StyledPrimary,\n StyledSecondary,\n useArrows,\n useConsolidatedRef,\n StyledCard,\n RadioButton,\n RadioButtonProps,\n SummaryItemProps,\n SummaryItem,\n StyledSummaryItem,\n StyledLabel\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as starSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star-solid.icon';\nimport { StyledRadioCheckCard } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport BareRoleButton, {\n BareRoleButtonProps\n} from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport type { Contact, ContactListProps, SelectableContact } from './ContactList.types';\n\nregisterIcon(starIcon, starSolidIcon);\n\nconst StyledContactList = styled.div(({ theme: { base, components } }) => {\n return css`\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0 calc(0.5 * ${base.spacing}) calc(0.5 * ${base.spacing});\n\n > ${StyledCard} > ${StyledCardContent} {\n padding: 0;\n gap: 0;\n }\n\n ul {\n list-style: none;\n }\n\n ${StyledRadioCheckCard} {\n background-color: transparent;\n border: 0;\n padding: 0 calc(0.5 * ${base.spacing});\n height: ${components.button.height};\n align-items: center;\n border-radius: 0;\n\n > ${StyledLabel} {\n max-width: 100%;\n width: 100%;\n margin: 0;\n }\n }\n\n li {\n padding: 0;\n height: calc(${components.button.height} + 0.125rem);\n\n :not(:last-child) {\n border-bottom: 0.0625rem solid ${base.palette['border-line']};\n }\n }\n\n ${StyledSummaryItem} {\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n font-weight: ${base['font-weight'].normal};\n }\n }\n\n ${StyledSummaryItemActions} {\n color: ${base.palette.interactive};\n }\n\n @media (pointer: 'coarse') {\n li {\n height: ${components.button.touch.height};\n }\n }\n `;\n});\n\nStyledContactList.defaultProps = defaultThemeProp;\n\nexport const ContactsContext = createContext<{\n contacts: Contact[];\n onFavoriteToggle: ContactListProps['onFavoriteToggle'];\n}>({\n contacts: [],\n onFavoriteToggle: () => {}\n});\n\nconst SelectableContactItem = ({\n id,\n primary,\n secondary,\n checked,\n container,\n onChange\n}: SummaryItemProps & RadioButtonProps) => {\n return (\n <li key={id}>\n <RadioButton\n card\n variant='card'\n label={\n <SummaryItem id={id} primary={primary} secondary={secondary} container={container} />\n }\n checked={checked}\n onChange={onChange}\n name={`${id}-contact`}\n />\n </li>\n );\n};\n\nconst CallableContactItem = ({\n visual,\n primary,\n secondary,\n onClick,\n container\n}: SummaryItemProps & { onClick: BareRoleButtonProps['onClick'] }) => {\n return (\n <li>\n <BareRoleButton onClick={onClick}>\n <SummaryItem\n visual={visual}\n primary={primary}\n secondary={secondary}\n container={container}\n actions={<Icon name='phone-solid' />}\n />\n </BareRoleButton>\n </li>\n );\n};\n\nconst ContactList: FunctionComponent<ContactListProps & ForwardProps> = forwardRef(\n function ContactList(\n { contacts: items, onItemClick, onFavoriteToggle, variant }: PropsWithoutRef<ContactListProps>,\n ref: ContactListProps['ref']\n ) {\n const t = useI18n();\n const [searchText, setSearchText] = useState('');\n const containerRef = useConsolidatedRef(ref);\n\n const onSearchChange = useCallback((value: string) => {\n setSearchText(value.trim());\n }, []);\n\n const favoriteButton = useCallback(\n (phoneNumber: string, favorite: boolean) => (\n <Button\n variant='simple'\n icon\n onClick={(e: MouseEvent) => {\n e.stopPropagation();\n onFavoriteToggle(phoneNumber, favorite);\n }}\n aria-label={\n favorite\n ? t('call_panel_contacts_add_to_favorites')\n : t('call_panel_contacts_remove_from_favorites')\n }\n >\n <Icon name={favorite ? 'star-solid' : 'star'} />\n </Button>\n ),\n [onFavoriteToggle]\n );\n\n const createList = (list: SelectableContact[]) => {\n return list.map(item => {\n const commonOpts = {\n id: item.phoneNumber,\n primary: item.primary,\n secondary: <Text variant='secondary'>{item.secondary}</Text>,\n container: {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'\n }\n };\n return variant === 'select'\n ? {\n ...commonOpts,\n as: SelectableContactItem,\n checked: item.selected,\n onChange: () => onItemClick(item.phoneNumber)\n }\n : {\n ...commonOpts,\n as: CallableContactItem,\n visual: favoriteButton(item.phoneNumber, item.favorite),\n onClick: () => onItemClick(item.phoneNumber)\n };\n });\n };\n\n useArrows(containerRef, { selector: ':scope ul [role=\"button\"]' });\n\n return (\n <ViewAll\n as={StyledContactList}\n ref={containerRef}\n items={\n searchText\n ? createList(\n items.filter(({ phoneNumber, primary, secondary }) => {\n return (\n primary.toLowerCase().includes(searchText.toLowerCase()) \|\|\n secondary.toLowerCase().includes(searchText.toLowerCase()) \|\|\n phoneNumber.toLowerCase().includes(searchText.toLowerCase())\n );\n })\n )\n : createList(items)\n }\n searchInputProps={{ onSearchChange }}\n />\n );\n }\n);\n\nexport default ContactList;\n"]}

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

@@ -22,7 +22,7 @@ const StyledCTIContainer = styled.div `
   overflow-y: auto;
 `;
 StyledCTIContainer.defaultProps = defaultThemeProp;
-const ExternalCTI = forwardRef(({ heading, draggable = false, visible = true, size, attachInteractionProps }, ref) => {
+const ExternalCTI = forwardRef(function ExternalCTI({ heading, draggable = false, visible = true, size, attachInteractionProps }, ref) {
     const [dialogTarget, setDialogTarget] = useState(null);
     return (_jsxs(StyledExternalCTIPanel, { heading: heading, draggable: draggable, visible: visible, actions: attachInteractionProps
             ? [

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAiC,MAAM,yBAAyB,CAAC;AAE1F,OAAO,uBAAwD,MAAM,2BAA2B,CAAC;AACjG,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAoBpE,MAAM,sBAAsB,GAAyB,MAAM,CAAC,aAAa,CAAC,CACxE,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,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAmC,IAAI,CAAC,CAAC;IAEzF,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,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;wBACjB,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;oBACnC,CAAC;iBACF;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,YAAY,IAAI,CACzC,KAAC,uBAAuB,OAClB,sBAAsB,EAC1B,KAAK,EAAE,GAAG,EAAE;oBACV,eAAe,CAAC,IAAI,CAAC,CAAC;gBACxB,CAAC,EACD,MAAM,EAAE,YAAY,GACpB,CACH,IACsB,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n CSSProperties,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, FormDialogProps, ForwardProps } 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 /* Attach intraction popup options. */\n attachInteractionProps?: AttachInteractionProps;\n}\n\nconst StyledExternalCTIPanel: typeof FloatingPanel = 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 [dialogTarget, setDialogTarget] = useState<FormDialogProps['target'] \| null>(null);\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 onClick: (id, e) => {\n setDialogTarget(e.currentTarget);\n }\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 && dialogTarget && (\n <AttachInteractionDialog\n {...attachInteractionProps}\n close={() => {\n setDialogTarget(null);\n }}\n target={dialogTarget}\n />\n )}\n </StyledExternalCTIPanel>\n );\n }\n);\n\nexport default ExternalCTI;\n"]}
1	+ {"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAiC,MAAM,yBAAyB,CAAC;AAE1F,OAAO,uBAAwD,MAAM,2BAA2B,CAAC;AACjG,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAoBpE,MAAM,sBAAsB,GAAyB,MAAM,CAAC,aAAa,CAAC,CACxE,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,SAAS,WAAW,CAClB,EACE,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,sBAAsB,EACY,EACpC,GAA4B;IAE5B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAmC,IAAI,CAAC,CAAC;IAEzF,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,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;wBACjB,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;oBACnC,CAAC;iBACF;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,YAAY,IAAI,CACzC,KAAC,uBAAuB,OAClB,sBAAsB,EAC1B,KAAK,EAAE,GAAG,EAAE;oBACV,eAAe,CAAC,IAAI,CAAC,CAAC;gBACxB,CAAC,EACD,MAAM,EAAE,YAAY,GACpB,CACH,IACsB,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n CSSProperties,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, FormDialogProps, ForwardProps } 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 /* Attach intraction popup options. */\n attachInteractionProps?: AttachInteractionProps;\n}\n\nconst StyledExternalCTIPanel: typeof FloatingPanel = 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 function ExternalCTI(\n {\n heading,\n draggable = false,\n visible = true,\n size,\n attachInteractionProps\n }: PropsWithoutRef<ExternalCTIProps>,\n ref: ExternalCTIProps['ref']\n ) {\n const [dialogTarget, setDialogTarget] = useState<FormDialogProps['target'] \| null>(null);\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 onClick: (id, e) => {\n setDialogTarget(e.currentTarget);\n }\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 && dialogTarget && (\n <AttachInteractionDialog\n {...attachInteractionProps}\n close={() => {\n setDialogTarget(null);\n }}\n target={dialogTarget}\n />\n )}\n </StyledExternalCTIPanel>\n );\n }\n);\n\nexport default ExternalCTI;\n"]}

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

@@ -48,7 +48,7 @@ export const StyledFloatingPanel = styled(StyledCard)(({ theme, isCollapsed, isD
   `;
 });
 StyledFloatingPanel.defaultProps = defaultThemeProp;
-const FloatingPanel = forwardRef(({ heading, actions = [], draggable, children, visible = true, ...restProps }, ref) => {
+const FloatingPanel = forwardRef(function FloatingPanel({ heading, actions = [], draggable, children, visible = true, ...restProps }, ref) {
     const t = useI18n();
     const [collapsed, setCollapsed] = useState(false);
     const containerRef = useConsolidatedRef(ref);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAEL,UAAU,EAOV,eAAe,EACf,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,UAAU,EACV,MAAM,EACN,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,IAAI,EAEJ,kBAAkB,EAClB,YAAY,EAGZ,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAC9F,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAE1F,YAAY,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEzC,MAAM,6BAA6B,GAAG,CAAC,YAAuC,EAAQ,EAAE;IACtF,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO;QACtC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,qBAAqB,CAAC;AACjE,CAAC,CAAC;AA8BF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,UAAU,CAAC,CAIlD,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,GAAG,IAAI,EAAE,EAAE,EAAE;IAC3D,OAAO,GAAG,CAAA;;;oBAGQ,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;;sBAE5B,KAAK,CAAC,IAAI,CAAC,OAAO;uBACjB,KAAK,CAAC,IAAI,CAAC,OAAO;kBACvB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;MAElC,CAAC,SAAS;QACZ,GAAG,CAAA;;KAEF;;MAEC,WAAW;QACb,GAAG,CAAA;;qDAE8C,KAAK,CAAC,IAAI,CAAC,OAAO;;KAElE;;MAEC,gBAAgB;QACd,CAAC,WAAW;QACd,WAAW;QACX,GAAG,CAAA;;OAEF;;MAED,gBAAgB,IAAI,YAAY;uCACC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;UACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;mBACvB,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;;GAE7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,aAAa,GAAyD,UAAU,CACpF,~~CACE~~,EACE,OAAO,EACP,OAAO,GAAG,EAAE,EACZ,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,IAAI,EACd,GAAG,SAAS,EACwB,EACtC,GAA8B~~,EAC9B,EAAE~~;~~IACF~~,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,YAAY,CAAC,YAAY,EAAE,OAAO,EAAE,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC;IAE7D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC;SAClF;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,MAAC,mBAAmB,OACd,SAAS,EACb,GAAG,EAAE,YAAY,EACjB,WAAW,EAAE,SAAS,EACtB,WAAW,EAAE,SAAS,EACtB,SAAS,EAAE,OAAO,2BAElB,KAAK,EAAE,EAAE,gBAAgB,EAAE,GAAG,YAAY,IAAI,EAAmB,aAEjE,KAAC,UAAU,IACT,GAAG,EAAE,OAAO,EACZ,OAAO,EACL,8BACG,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE,CAAC,CAC3D,eAAC,MAAM,OACD,UAAU,EACd,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,GAAG,EAAE,EAAE,EACP,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;gCAC5C,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BACnB,CAAC;4BAED,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CACb,CACV,CAAC,EACF,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAEhB,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,CAAC,EACjE,OAAO,EAAE,GAAG,EAAE;gCACZ,6BAA6B,CAAC,YAAY,CAAC,CAAC;gCAC5C,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;4BAChC,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,IAPtB,iBAAiB,CAQd,IACR,YAGL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aACnD,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,EACvB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAQ,IAC9B,GACI,EACZ,QAAQ,IACW,CACvB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n CSSProperties,\n forwardRef,\n FunctionComponent,\n MouseEvent,\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 data-app-region\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader\n ref={dragRef}\n actions={\n <>\n {actions.map(({ id, icon, text, onClick, ...restAction }) => (\n <Button\n {...restAction}\n icon\n variant='simple'\n key={id}\n label={text}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onClick?.(id, e);\n }}\n >\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"]}
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 MouseEvent,\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 function FloatingPanel(\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 data-app-region\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader\n ref={dragRef}\n actions={\n <>\n {actions.map(({ id, icon, text, onClick, ...restAction }) => (\n <Button\n {...restAction}\n icon\n variant='simple'\n key={id}\n label={text}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onClick?.(id, e);\n }}\n >\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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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,CAoC1D,CAAC;AAEH,eAAe,OAAO,CAAC"}

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

@@ -16,7 +16,7 @@ const StyledDialPad = styled.div(({ theme: { base } }) => {
   `;
 });
 StyledDialPad.defaultProps = defaultThemeProp;
-const DialPad = forwardRef(({ value, onCallClick, onChange, mode }, ref) => {
+const DialPad = forwardRef(function DialPad({ value, onCallClick, onChange, mode }, ref) {
     const t = useI18n();
     const onDialButtonClick = (charCode) => {
         const newValue = charCode === 127 ? value.slice(0, -1) : value + String.fromCharCode(charCode);

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

	@@ -1 +1 @@
1	- {"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"]}
1	+ {"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,CAAC,SAAS,OAAO,CACzF,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAiC,EACrE,GAAwB;IAExB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,MAAM,QAAQ,GAAG,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;QAC/F,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,CAAC,CAAC;AAEH,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(function DialPad(\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 = 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\nexport default DialPad;\n"]}

package/lib/components/DialPad/DialPadKeyboard.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { StyledDialButton, StyledDialPadKeyboard, StyledSpecial } from './DialPa
 import { dtmfGraph, defaultGraph, defaultButtonGrid, dtmfButtonGrid } from './KeyboardNavigation';
 import { getDialButtonIndex, isNavigationEvent } from './utils';
 registerIcon(backspaceIcon);
-const DialPadKeyboard = forwardRef(({ onDialButtonClick, mode = 'default' }, ref) => {
+const DialPadKeyboard = forwardRef(function DialPadKeyboard({ onDialButtonClick, mode = 'default' }, ref) {
     const buttonNavGraph = mode === 'DTMF' ? dtmfGraph : defaultGraph;
     const buttonGrid = mode === 'DTMF' ? dtmfButtonGrid : defaultButtonGrid;
     const t = useI18n();

package/lib/components/DialPad/DialPadKeyboard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialPadKeyboard.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n KeyboardEvent,\n forwardRef,\n useRef,\n useCallback\n} from 'react';\n\nimport {\n ForwardProps,\n Icon,\n NoChildrenProp,\n registerIcon,\n useI18n,\n useLongPress\n} from '@pega/cosmos-react-core';\nimport * as backspaceIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/backspace.icon';\n\nimport { StyledDialButton, StyledDialPadKeyboard, StyledSpecial } from './DialPadKeyboard.styles';\nimport { dtmfGraph, defaultGraph, defaultButtonGrid, dtmfButtonGrid } from './KeyboardNavigation';\nimport { Index, NavigationGraphElement } from './DialPad.types';\nimport { getDialButtonIndex, isNavigationEvent } from './utils';\n\nregisterIcon(backspaceIcon);\n\nexport type DialPadKeyboardMode = 'default' \| 'DTMF';\n\nexport interface DialPadKeyboardProps extends NoChildrenProp {\n /** Callback fired on dial button click /\n onDialButtonClick: (charCode: number) => void;\n /* Dial Pad Keyboard mode */\n mode?: DialPadKeyboardMode;\n}\n\nconst DialPadKeyboard: FunctionComponent<DialPadKeyboardProps & ForwardProps> = forwardRef(\n (\n { onDialButtonClick, mode = 'default' }: PropsWithoutRef<DialPadKeyboardProps>,\n ref: Ref<HTMLElement>\n ) => {\n const buttonNavGraph = mode === 'DTMF' ? dtmfGraph : defaultGraph;\n const buttonGrid = mode === 'DTMF' ? dtmfButtonGrid : defaultButtonGrid;\n\n const t = useI18n();\n const zeroButtonLongPress = useLongPress<HTMLButtonElement>(\n () => onDialButtonClick(buttonNavGraph[10].altKeyCode \|\| 43),\n () => onDialButtonClick(buttonNavGraph[10].keyCode)\n );\n // This is not a violation of the rules, as the array length is constant and order the always the same.\n buttonNavGraph.forEach(element => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n element.ref = useRef<HTMLButtonElement>(null);\n });\n\n const handleDialButtonEvent = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n e.preventDefault();\n e.stopPropagation();\n const buttonEl = buttonNavGraph[index];\n if (!buttonEl \|\| (mode === 'DTMF' && index === 12)) return;\n buttonEl.ref?.current?.focus();\n onDialButtonClick(buttonEl.keyCode);\n };\n\n const handlePlusDialButton = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n const buttonEl = buttonNavGraph[10];\n if (!buttonEl \|\| !buttonEl.altKeyCode) return;\n buttonEl.ref?.current?.focus();\n onDialButtonClick(buttonEl.altKeyCode);\n };\n\n const handleEnterEvent = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n onDialButtonClick(Number((e.target as HTMLButtonElement).value));\n }\n },\n [onDialButtonClick]\n );\n\n const findButtonInGraph = (e: React.KeyboardEvent<HTMLElement>) => {\n return buttonNavGraph.find(\n el => el.keyCode === Number((e.target as HTMLButtonElement).value)\n );\n };\n\n const getTargetIndexOnNavigationEvent = (\n btnEl: NavigationGraphElement,\n e: React.KeyboardEvent<HTMLButtonElement>\n ): Index \| undefined => {\n return {\n ArrowUp: btnEl.up,\n ArrowLeft: btnEl.left,\n ArrowDown: btnEl.down,\n ArrowRight: btnEl.right\n }[e.key];\n };\n\n const handleNavigationEvent = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n e.preventDefault();\n const btnEl = findButtonInGraph(e);\n if (!btnEl) return;\n const targetIndex = getTargetIndexOnNavigationEvent(btnEl, e);\n if (targetIndex !== undefined) buttonNavGraph[targetIndex].ref?.current?.focus();\n };\n\n const handleKeyboardNavigation = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n const index = getDialButtonIndex(e);\n if (index !== -1) {\n handleDialButtonEvent(e, index);\n } else if (e.key === '+') {\n handlePlusDialButton(e);\n } else if (isNavigationEvent(e)) {\n handleNavigationEvent(e);\n }\n },\n [onDialButtonClick]\n );\n\n return (\n <StyledDialPadKeyboard\n ref={ref}\n onKeyDown={handleKeyboardNavigation}\n dir='ltr'\n role='grid'\n aria-label={t('dial_pad_keyboard')}\n container={{\n cols: '1fr',\n rowGap: 1,\n justifyItems: 'center'\n }}\n >\n {buttonGrid.map((row: NavigationGraphElement[], index: number) => {\n if (mode === 'default' \|\| (mode === 'DTMF' && index < 4)) {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <div role='row' key={`row-${index}`}>\n {row.map((dialButton: NavigationGraphElement) =>\n dialButton.alt === '+' ? (\n <StyledDialButton\n key={dialButton.keyCode}\n type='button'\n role='gridcell'\n tabIndex={-1}\n ref={dialButton.ref}\n value={dialButton.keyCode}\n {...zeroButtonLongPress}\n >\n {dialButton.sign && <span>{dialButton.sign}</span>}\n {dialButton.alt && <span>{dialButton.alt}</span>}\n </StyledDialButton>\n ) : (\n <StyledDialButton\n key={dialButton.keyCode}\n type='button'\n role='gridcell'\n onClick={() => onDialButtonClick(dialButton.keyCode)}\n onKeyDown={handleEnterEvent}\n tabIndex={dialButton.sign === '1' ? 0 : -1}\n aria-label={dialButton.icon ? dialButton.icon : undefined}\n ref={dialButton.ref}\n value={dialButton.keyCode}\n >\n {dialButton.sign && <span>{dialButton.sign}</span>}\n {dialButton.alt && <span>{dialButton.alt}</span>}\n {dialButton.special && <StyledSpecial>{dialButton.special}</StyledSpecial>}\n {dialButton.icon && <Icon name={dialButton.icon} />}\n </StyledDialButton>\n )\n )}\n </div>\n );\n }\n return undefined;\n })}\n </StyledDialPadKeyboard>\n );\n }\n);\n\nexport default DialPadKeyboard;\n"]}
1	+ {"version":3,"file":"DialPadKeyboard.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAKL,UAAU,EACV,MAAM,EACN,WAAW,EACZ,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,IAAI,EAEJ,YAAY,EACZ,OAAO,EACP,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,kEAAkE,CAAC;AAElG,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAClG,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAElG,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEhE,YAAY,CAAC,aAAa,CAAC,CAAC;AAW5B,MAAM,eAAe,GAA2D,UAAU,CACxF,SAAS,eAAe,CACtB,EAAE,iBAAiB,EAAE,IAAI,GAAG,SAAS,EAAyC,EAC9E,GAAqB;IAErB,MAAM,cAAc,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC;IAClE,MAAM,UAAU,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAExE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,mBAAmB,GAAG,YAAY,CACtC,GAAG,EAAE,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,UAAU,IAAI,EAAE,CAAC,EAC5D,GAAG,EAAE,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CACpD,CAAC;IACF,uGAAuG;IACvG,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QAC/B,sDAAsD;QACtD,OAAO,CAAC,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,MAAM,qBAAqB,GAAG,CAAC,CAAyC,EAAE,KAAa,EAAE,EAAE;QACzF,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,KAAK,EAAE,CAAC;YAAE,OAAO;QAC3D,QAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QAC/B,iBAAiB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,CAAyC,EAAE,EAAE;QACzE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,QAAQ,GAAG,cAAc,CAAC,EAAE,CAAC,CAAC;QACpC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,UAAU;YAAE,OAAO;QAC9C,QAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QAC/B,iBAAiB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,CAAyC,EAAE,EAAE;QAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,iBAAiB,CAAC,MAAM,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC,CAAC,CAAC;SAClE;IACH,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAmC,EAAE,EAAE;QAChE,OAAO,cAAc,CAAC,IAAI,CACxB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,KAAK,MAAM,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC,CACnE,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,+BAA+B,GAAG,CACtC,KAA6B,EAC7B,CAAyC,EACtB,EAAE;QACrB,OAAO;YACL,OAAO,EAAE,KAAK,CAAC,EAAE;YACjB,SAAS,EAAE,KAAK,CAAC,IAAI;YACrB,SAAS,EAAE,KAAK,CAAC,IAAI;YACrB,UAAU,EAAE,KAAK,CAAC,KAAK;SACxB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAAC,CAAyC,EAAE,EAAE;QAC1E,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACnC,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,MAAM,WAAW,GAAG,+BAA+B,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC9D,IAAI,WAAW,KAAK,SAAS;YAAE,cAAc,CAAC,WAAW,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IACnF,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,CAAmC,EAAE,EAAE;QACtC,MAAM,KAAK,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC;QACpC,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,qBAAqB,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;SACjC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;YACxB,oBAAoB,CAAC,CAAC,CAAC,CAAC;SACzB;aAAM,IAAI,iBAAiB,CAAC,CAAC,CAAC,EAAE;YAC/B,qBAAqB,CAAC,CAAC,CAAC,CAAC;SAC1B;IACH,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,OAAO,CACL,KAAC,qBAAqB,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,wBAAwB,EACnC,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,MAAM,gBACC,CAAC,CAAC,mBAAmB,CAAC,EAClC,SAAS,EAAE;YACT,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,CAAC;YACT,YAAY,EAAE,QAAQ;SACvB,YAEA,UAAU,CAAC,GAAG,CAAC,CAAC,GAA6B,EAAE,KAAa,EAAE,EAAE;YAC/D,IAAI,IAAI,KAAK,SAAS,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;gBACxD,OAAO;gBACL,oDAAoD;gBACpD,cAAK,IAAI,EAAC,KAAK,YACZ,GAAG,CAAC,GAAG,CAAC,CAAC,UAAkC,EAAE,EAAE,CAC9C,UAAU,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CACvB,MAAC,gBAAgB,IAEf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,UAAU,CAAC,GAAG,EACnB,KAAK,EAAE,UAAU,CAAC,OAAO,KACrB,mBAAmB,aAEtB,UAAU,CAAC,IAAI,IAAI,yBAAO,UAAU,CAAC,IAAI,GAAQ,EACjD,UAAU,CAAC,GAAG,IAAI,yBAAO,UAAU,CAAC,GAAG,GAAQ,KAT3C,UAAU,CAAC,OAAO,CAUN,CACpB,CAAC,CAAC,CAAC,CACF,MAAC,gBAAgB,IAEf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,UAAU,CAAC,OAAO,CAAC,EACpD,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,UAAU,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAC9B,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACzD,GAAG,EAAE,UAAU,CAAC,GAAG,EACnB,KAAK,EAAE,UAAU,CAAC,OAAO,aAExB,UAAU,CAAC,IAAI,IAAI,yBAAO,UAAU,CAAC,IAAI,GAAQ,EACjD,UAAU,CAAC,GAAG,IAAI,yBAAO,UAAU,CAAC,GAAG,GAAQ,EAC/C,UAAU,CAAC,OAAO,IAAI,KAAC,aAAa,cAAE,UAAU,CAAC,OAAO,GAAiB,EACzE,UAAU,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,GAAI,KAb9C,UAAU,CAAC,OAAO,CAcN,CACpB,CACF,IAjCkB,OAAO,KAAK,EAAE,CAkC7B,CACP,CAAC;aACH;YACD,OAAO,SAAS,CAAC;QACnB,CAAC,CAAC,GACoB,CACzB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n KeyboardEvent,\n forwardRef,\n useRef,\n useCallback\n} from 'react';\n\nimport {\n ForwardProps,\n Icon,\n NoChildrenProp,\n registerIcon,\n useI18n,\n useLongPress\n} from '@pega/cosmos-react-core';\nimport * as backspaceIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/backspace.icon';\n\nimport { StyledDialButton, StyledDialPadKeyboard, StyledSpecial } from './DialPadKeyboard.styles';\nimport { dtmfGraph, defaultGraph, defaultButtonGrid, dtmfButtonGrid } from './KeyboardNavigation';\nimport { Index, NavigationGraphElement } from './DialPad.types';\nimport { getDialButtonIndex, isNavigationEvent } from './utils';\n\nregisterIcon(backspaceIcon);\n\nexport type DialPadKeyboardMode = 'default' \| 'DTMF';\n\nexport interface DialPadKeyboardProps extends NoChildrenProp {\n /** Callback fired on dial button click /\n onDialButtonClick: (charCode: number) => void;\n /* Dial Pad Keyboard mode */\n mode?: DialPadKeyboardMode;\n}\n\nconst DialPadKeyboard: FunctionComponent<DialPadKeyboardProps & ForwardProps> = forwardRef(\n function DialPadKeyboard(\n { onDialButtonClick, mode = 'default' }: PropsWithoutRef<DialPadKeyboardProps>,\n ref: Ref<HTMLElement>\n ) {\n const buttonNavGraph = mode === 'DTMF' ? dtmfGraph : defaultGraph;\n const buttonGrid = mode === 'DTMF' ? dtmfButtonGrid : defaultButtonGrid;\n\n const t = useI18n();\n const zeroButtonLongPress = useLongPress<HTMLButtonElement>(\n () => onDialButtonClick(buttonNavGraph[10].altKeyCode \|\| 43),\n () => onDialButtonClick(buttonNavGraph[10].keyCode)\n );\n // This is not a violation of the rules, as the array length is constant and order the always the same.\n buttonNavGraph.forEach(element => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n element.ref = useRef<HTMLButtonElement>(null);\n });\n\n const handleDialButtonEvent = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n e.preventDefault();\n e.stopPropagation();\n const buttonEl = buttonNavGraph[index];\n if (!buttonEl \|\| (mode === 'DTMF' && index === 12)) return;\n buttonEl.ref?.current?.focus();\n onDialButtonClick(buttonEl.keyCode);\n };\n\n const handlePlusDialButton = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n const buttonEl = buttonNavGraph[10];\n if (!buttonEl \|\| !buttonEl.altKeyCode) return;\n buttonEl.ref?.current?.focus();\n onDialButtonClick(buttonEl.altKeyCode);\n };\n\n const handleEnterEvent = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n onDialButtonClick(Number((e.target as HTMLButtonElement).value));\n }\n },\n [onDialButtonClick]\n );\n\n const findButtonInGraph = (e: React.KeyboardEvent<HTMLElement>) => {\n return buttonNavGraph.find(\n el => el.keyCode === Number((e.target as HTMLButtonElement).value)\n );\n };\n\n const getTargetIndexOnNavigationEvent = (\n btnEl: NavigationGraphElement,\n e: React.KeyboardEvent<HTMLButtonElement>\n ): Index \| undefined => {\n return {\n ArrowUp: btnEl.up,\n ArrowLeft: btnEl.left,\n ArrowDown: btnEl.down,\n ArrowRight: btnEl.right\n }[e.key];\n };\n\n const handleNavigationEvent = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n e.preventDefault();\n const btnEl = findButtonInGraph(e);\n if (!btnEl) return;\n const targetIndex = getTargetIndexOnNavigationEvent(btnEl, e);\n if (targetIndex !== undefined) buttonNavGraph[targetIndex].ref?.current?.focus();\n };\n\n const handleKeyboardNavigation = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n const index = getDialButtonIndex(e);\n if (index !== -1) {\n handleDialButtonEvent(e, index);\n } else if (e.key === '+') {\n handlePlusDialButton(e);\n } else if (isNavigationEvent(e)) {\n handleNavigationEvent(e);\n }\n },\n [onDialButtonClick]\n );\n\n return (\n <StyledDialPadKeyboard\n ref={ref}\n onKeyDown={handleKeyboardNavigation}\n dir='ltr'\n role='grid'\n aria-label={t('dial_pad_keyboard')}\n container={{\n cols: '1fr',\n rowGap: 1,\n justifyItems: 'center'\n }}\n >\n {buttonGrid.map((row: NavigationGraphElement[], index: number) => {\n if (mode === 'default' \|\| (mode === 'DTMF' && index < 4)) {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <div role='row' key={`row-${index}`}>\n {row.map((dialButton: NavigationGraphElement) =>\n dialButton.alt === '+' ? (\n <StyledDialButton\n key={dialButton.keyCode}\n type='button'\n role='gridcell'\n tabIndex={-1}\n ref={dialButton.ref}\n value={dialButton.keyCode}\n {...zeroButtonLongPress}\n >\n {dialButton.sign && <span>{dialButton.sign}</span>}\n {dialButton.alt && <span>{dialButton.alt}</span>}\n </StyledDialButton>\n ) : (\n <StyledDialButton\n key={dialButton.keyCode}\n type='button'\n role='gridcell'\n onClick={() => onDialButtonClick(dialButton.keyCode)}\n onKeyDown={handleEnterEvent}\n tabIndex={dialButton.sign === '1' ? 0 : -1}\n aria-label={dialButton.icon ? dialButton.icon : undefined}\n ref={dialButton.ref}\n value={dialButton.keyCode}\n >\n {dialButton.sign && <span>{dialButton.sign}</span>}\n {dialButton.alt && <span>{dialButton.alt}</span>}\n {dialButton.special && <StyledSpecial>{dialButton.special}</StyledSpecial>}\n {dialButton.icon && <Icon name={dialButton.icon} />}\n </StyledDialButton>\n )\n )}\n </div>\n );\n }\n return undefined;\n })}\n </StyledDialPadKeyboard>\n );\n }\n);\n\nexport default DialPadKeyboard;\n"]}

package/lib/components/InteractionNotification/CountdownButton.js CHANGED Viewed

@@ -7,7 +7,7 @@ const StyledAcceptButton = styled(Button)(({ theme }) => css `
     gap: ${theme.base.spacing};
   `);
 StyledAcceptButton.defaultProps = defaultThemeProp;
-const CountdownButton = forwardRef(({ startTime, timeout, onTimerEnd, children, ...restProps }, ref) => {
+const CountdownButton = forwardRef(function CountdownButton({ startTime, timeout, onTimerEnd, children, ...restProps }, ref) {
     const timeoutMs = timeout * 1000;
     const start = Number(startTime);
     const endTime = start + timeoutMs;

package/lib/components/InteractionNotification/CountdownButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CountdownButton.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAqC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,OAAO,EACP,IAAI,EACJ,kBAAkB,EAClB,MAAM,EACN,MAAM,EACN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAa3D,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;WACT,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1B,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,eAAe,GAA2D,UAAU,CACxF,~~CACE~~,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAuC,EAC/F,GAA2B~~,EAC3B,EAAE~~;~~IACF~~,MAAM,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;IACjC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAE3E,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAExD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,SAAS,CACP,GAAG,EAAE;QACH,IAAI,SAAiB,CAAC;QAEtB,IAAI,WAAW,GAAG,CAAC,EAAE;YACnB,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACjC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YACvC,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;aAAM;YACL,UAAU,EAAE,EAAE,CAAC;SAChB;QAED,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC;IACD,uDAAuD;IACvD,4FAA4F;IAC5F,mFAAmF;IACnF,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAErE,OAAO,CACL,8BACE,MAAC,kBAAkB,OAAK,SAAS,sBAAoB,aAAa,EAAE,GAAG,EAAE,GAAG,aACzE,QAAQ,EACT,KAAC,IAAI,mBAAa,MAAM,YAAE,KAAK,GAAQ,IACpB,EACrB,KAAC,kBAAkB,mBAAa,MAAM,EAAC,EAAE,EAAE,aAAa,YACrD,WAAW,GAAG,CAAC;oBACd,CAAC,CAAC,CAAC,CAAC,4BAA4B,EAAE,CAAC,gBAAgB,CAAC,EAAE;wBAClD,KAAK,EAAE,gBAAgB;qBACxB,CAAC;oBACJ,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,GACd,IACpB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useI18n,\n Text,\n VisuallyHiddenText,\n useUID,\n Button,\n defaultThemeProp,\n ButtonProps,\n ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport { formatDuration } from '../CallControlPanel/utils';\n\nexport interface CountdownButtonProps extends ButtonProps {\n /** Text or content for the Button. /\n children: ReactNode;\n /* Start time of incoming Interaction. /\n startTime: Date \| number;\n /* The time the user has to accept the call in seconds. /\n timeout: number;\n /* Callback invoked when timeout ends. /\n onTimerEnd?: () => void;\n}\n\nconst StyledAcceptButton = styled(Button)(\n ({ theme }) => css`\n gap: ${theme.base.spacing};\n `\n);\n\nStyledAcceptButton.defaultProps = defaultThemeProp;\n\nconst CountdownButton: FunctionComponent<CountdownButtonProps & ForwardProps> = forwardRef(\n (\n { startTime, timeout, onTimerEnd, children, ...restProps }: CountdownButtonProps & ForwardProps,\n ref: Ref<HTMLButtonElement>\n ) => {\n const timeoutMs = timeout 1000;\n const start = Number(startTime);\n const endTime = start + timeoutMs;\n const [msRemaining, setMsRemaining] = useState(() => endTime - Date.now());\n\n const secondsRemaining = Math.round(msRemaining / 1000);\n\n const t = useI18n();\n const descriptionId = useUID();\n\n useEffect(\n () => {\n let timeoutId: number;\n\n if (msRemaining > 0) {\n timeoutId = window.setTimeout(() => {\n setMsRemaining(endTime - Date.now());\n }, 1000);\n } else {\n onTimerEnd?.();\n }\n\n return () => clearTimeout(timeoutId);\n },\n // Omitting onTimerEnd as an effect trigger on purpose.\n // An unstable function definition in the prop causes the effect to run more than necessary.\n // The proper definition will be captured and used with any changes to msRemaining.\n [msRemaining]\n );\n\n const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';\n\n return (\n <>\n <StyledAcceptButton {...restProps} aria-describedby={descriptionId} ref={ref}>\n {children}\n <Text aria-hidden='true'>{timer}</Text>\n </StyledAcceptButton>\n <VisuallyHiddenText aria-hidden='true' id={descriptionId}>\n {msRemaining > 0\n ? t('interaction_time_remaining', [secondsRemaining], {\n count: secondsRemaining\n })\n : t('interaction_time_expired')}\n </VisuallyHiddenText>\n </>\n );\n }\n);\n\nexport default CountdownButton;\n"]}
1	+ {"version":3,"file":"CountdownButton.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAqC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,OAAO,EACP,IAAI,EACJ,kBAAkB,EAClB,MAAM,EACN,MAAM,EACN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAa3D,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;WACT,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1B,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,eAAe,GAA2D,UAAU,CACxF,SAAS,eAAe,CACtB,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAuC,EAC/F,GAA2B;IAE3B,MAAM,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;IACjC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAE3E,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAExD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,SAAS,CACP,GAAG,EAAE;QACH,IAAI,SAAiB,CAAC;QAEtB,IAAI,WAAW,GAAG,CAAC,EAAE;YACnB,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACjC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YACvC,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;aAAM;YACL,UAAU,EAAE,EAAE,CAAC;SAChB;QAED,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC;IACD,uDAAuD;IACvD,4FAA4F;IAC5F,mFAAmF;IACnF,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAErE,OAAO,CACL,8BACE,MAAC,kBAAkB,OAAK,SAAS,sBAAoB,aAAa,EAAE,GAAG,EAAE,GAAG,aACzE,QAAQ,EACT,KAAC,IAAI,mBAAa,MAAM,YAAE,KAAK,GAAQ,IACpB,EACrB,KAAC,kBAAkB,mBAAa,MAAM,EAAC,EAAE,EAAE,aAAa,YACrD,WAAW,GAAG,CAAC;oBACd,CAAC,CAAC,CAAC,CAAC,4BAA4B,EAAE,CAAC,gBAAgB,CAAC,EAAE;wBAClD,KAAK,EAAE,gBAAgB;qBACxB,CAAC;oBACJ,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,GACd,IACpB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useI18n,\n Text,\n VisuallyHiddenText,\n useUID,\n Button,\n defaultThemeProp,\n ButtonProps,\n ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport { formatDuration } from '../CallControlPanel/utils';\n\nexport interface CountdownButtonProps extends ButtonProps {\n /** Text or content for the Button. /\n children: ReactNode;\n /* Start time of incoming Interaction. /\n startTime: Date \| number;\n /* The time the user has to accept the call in seconds. /\n timeout: number;\n /* Callback invoked when timeout ends. /\n onTimerEnd?: () => void;\n}\n\nconst StyledAcceptButton = styled(Button)(\n ({ theme }) => css`\n gap: ${theme.base.spacing};\n `\n);\n\nStyledAcceptButton.defaultProps = defaultThemeProp;\n\nconst CountdownButton: FunctionComponent<CountdownButtonProps & ForwardProps> = forwardRef(\n function CountdownButton(\n { startTime, timeout, onTimerEnd, children, ...restProps }: CountdownButtonProps & ForwardProps,\n ref: Ref<HTMLButtonElement>\n ) {\n const timeoutMs = timeout 1000;\n const start = Number(startTime);\n const endTime = start + timeoutMs;\n const [msRemaining, setMsRemaining] = useState(() => endTime - Date.now());\n\n const secondsRemaining = Math.round(msRemaining / 1000);\n\n const t = useI18n();\n const descriptionId = useUID();\n\n useEffect(\n () => {\n let timeoutId: number;\n\n if (msRemaining > 0) {\n timeoutId = window.setTimeout(() => {\n setMsRemaining(endTime - Date.now());\n }, 1000);\n } else {\n onTimerEnd?.();\n }\n\n return () => clearTimeout(timeoutId);\n },\n // Omitting onTimerEnd as an effect trigger on purpose.\n // An unstable function definition in the prop causes the effect to run more than necessary.\n // The proper definition will be captured and used with any changes to msRemaining.\n [msRemaining]\n );\n\n const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';\n\n return (\n <>\n <StyledAcceptButton {...restProps} aria-describedby={descriptionId} ref={ref}>\n {children}\n <Text aria-hidden='true'>{timer}</Text>\n </StyledAcceptButton>\n <VisuallyHiddenText aria-hidden='true' id={descriptionId}>\n {msRemaining > 0\n ? t('interaction_time_remaining', [secondsRemaining], {\n count: secondsRemaining\n })\n : t('interaction_time_expired')}\n </VisuallyHiddenText>\n </>\n );\n }\n);\n\nexport default CountdownButton;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAqB,MAAM,OAAO,CAAC;AAG/F,OAAO,EAOL,WAAW,EACX,YAAY,EAOZ,mBAAmB,EAEnB,cAAc,EASf,MAAM,yBAAyB,CAAC;AAGjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,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,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAC7C,aAAa,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;KACjD,CAAC;IACF,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAgFD,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,~~CAqGzF~~,CAAC;~~AAEJ~~,eAAe,uBAAuB,CAAC"}
1	+ {"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAqB,MAAM,OAAO,CAAC;AAG/F,OAAO,EAOL,WAAW,EACX,YAAY,EAOZ,mBAAmB,EAEnB,cAAc,EASf,MAAM,yBAAyB,CAAC;AAGjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,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,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAC7C,aAAa,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;KACjD,CAAC;IACF,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAgFD,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CAmGxF,CAAC;AAEL,eAAe,uBAAuB,CAAC"}

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

@@ -76,7 +76,7 @@ registerAction({
     id: 'DismissIncomingInteraction',
     defaultKeyBinding: 'Alt+Q'
 });
-const InteractionNotification = forwardRef(({ icon, title, primaryText, secondaryText, status, fields, incomingNotificationTimeout, onAccept, onDecline }, ref) => {
+const InteractionNotification = forwardRef(function InteractionNotification({ icon, title, primaryText, secondaryText, status, fields, incomingNotificationTimeout, onAccept, onDecline }, ref) {
     const t = useI18n();
     const { announceAssertive } = useLiveLog();
     const containerRef = useConsolidatedRef(ref);

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

	@@ -1 +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, useEffect, useRef } 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 StyledFieldValueList,\n useI18n,\n FieldValueListProps,\n useDirection,\n NoChildrenProp,\n Icon,\n StyledLabel,\n useLiveLog,\n registerAction,\n useShortcut,\n useConsolidatedRef,\n useEscape,\n CardFooter\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton, { CountdownButtonProps } from './CountdownButton';\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 /* Timeout definition /\n incomingNotificationTimeout?: {\n startTime: CountdownButtonProps['startTime'];\n answerTimeout: CountdownButtonProps['timeout'];\n onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n };\n /* Callback when accept button is clicked. /\n onAccept: () => void;\n /* Callback when decline button is clicked. /\n onDecline?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n const { rtl } = useDirection();\n return css`\n position: fixed;\n inset-block-start: calc(2 ${base.spacing});\n inset-inline-end: calc(2 * ${base.spacing});\n width: min(calc(100% - 2rem), ${base['content-width'].md});\n max-height: calc(100vh - 2rem);\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 box-shadow: ${base.shadow.low};\n\n &&& {\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 ${StyledCardContent} {\n margin: calc(2 * ${base.spacing}) 0;\n overflow: auto;\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 ${StyledFieldValueList} {\n border-block-start: solid 0.0625rem ${base.palette['border-line']};\n padding-block-start: calc(2 * ${base.spacing});\n color: ${base.colors.white};\n\n ${StyledLabel} {\n color: ${base.colors.white};\n }\n }\n\n @media (min-width: calc(${base.breakpoints.md})) {\n inset-block-start: calc(8 * ${base.spacing});\n max-height: initial;\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n {\n id: 'GoToIncomingInteraction',\n defaultKeyBinding: 'Alt+Enter'\n },\n {\n id: 'DismissIncomingInteraction',\n defaultKeyBinding: 'Alt+Q'\n }\n);\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n forwardRef(\n (\n {\n icon,\n title,\n primaryText,\n secondaryText,\n status,\n fields,\n incomingNotificationTimeout,\n onAccept,\n onDecline\n }: PropsWithoutRef<InteractionNotificationProps>,\n ref: InteractionNotificationProps['ref']\n ) => {\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const containerRef = useConsolidatedRef(ref);\n const returnRef = useRef<HTMLElement>();\n const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n if (containerRef.current) {\n returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n acceptButtonRef.current?.focus();\n }\n });\n const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n onDecline?.();\n });\n\n useEscape(\n () => {\n returnRef.current?.focus();\n onDecline?.();\n },\n containerRef.current,\n [onDecline]\n );\n\n useEffect(() => {\n announceAssertive({\n message: `${title} ${primaryText} ${t('status')} ${status.text}. ${\n goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n }${\n dismissBinding && onDecline\n ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n : ''\n }`,\n type: 'alert'\n });\n }, []);\n\n const acceptButton = incomingNotificationTimeout ? (\n <CountdownButton\n variant='primary'\n onClick={onAccept}\n startTime={incomingNotificationTimeout.startTime}\n timeout={incomingNotificationTimeout.answerTimeout}\n onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDecline}\n ref={acceptButtonRef}\n >\n {t('accept')}\n </CountdownButton>\n ) : (\n <Button variant='primary' onClick={onAccept} ref={acceptButtonRef}>\n {t('accept')}\n </Button>\n );\n\n return (\n <StyledInteractionNotification ref={containerRef} data-app-region>\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name={icon} />\n <Text variant='h2'>{title}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ gap: 2 }}>\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n <Text variant='h1' as='span'>\n {primaryText}\n </Text>\n {secondaryText && (\n <Text variant='h5' as='span'>\n {secondaryText}\n </Text>\n )}\n <Status variant={status.variant}>{status.text}</Status>\n </Flex>\n {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n </CardContent>\n\n <CardFooter justify={onDecline ? 'between' : 'end'}>\n {onDecline && <Button onClick={onDecline}>{t('decline')}</Button>}\n {acceptButton}\n </CardFooter>\n </StyledInteractionNotification>\n );\n }\n );\n\nexport default InteractionNotification;\n"]}
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, useEffect, useRef } 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 StyledFieldValueList,\n useI18n,\n FieldValueListProps,\n useDirection,\n NoChildrenProp,\n Icon,\n StyledLabel,\n useLiveLog,\n registerAction,\n useShortcut,\n useConsolidatedRef,\n useEscape,\n CardFooter\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton, { CountdownButtonProps } from './CountdownButton';\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 /* Timeout definition /\n incomingNotificationTimeout?: {\n startTime: CountdownButtonProps['startTime'];\n answerTimeout: CountdownButtonProps['timeout'];\n onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n };\n /* Callback when accept button is clicked. /\n onAccept: () => void;\n /* Callback when decline button is clicked. /\n onDecline?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n const { rtl } = useDirection();\n return css`\n position: fixed;\n inset-block-start: calc(2 ${base.spacing});\n inset-inline-end: calc(2 * ${base.spacing});\n width: min(calc(100% - 2rem), ${base['content-width'].md});\n max-height: calc(100vh - 2rem);\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 box-shadow: ${base.shadow.low};\n\n &&& {\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 ${StyledCardContent} {\n margin: calc(2 * ${base.spacing}) 0;\n overflow: auto;\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 ${StyledFieldValueList} {\n border-block-start: solid 0.0625rem ${base.palette['border-line']};\n padding-block-start: calc(2 * ${base.spacing});\n color: ${base.colors.white};\n\n ${StyledLabel} {\n color: ${base.colors.white};\n }\n }\n\n @media (min-width: calc(${base.breakpoints.md})) {\n inset-block-start: calc(8 * ${base.spacing});\n max-height: initial;\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n {\n id: 'GoToIncomingInteraction',\n defaultKeyBinding: 'Alt+Enter'\n },\n {\n id: 'DismissIncomingInteraction',\n defaultKeyBinding: 'Alt+Q'\n }\n);\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n forwardRef(function InteractionNotification(\n {\n icon,\n title,\n primaryText,\n secondaryText,\n status,\n fields,\n incomingNotificationTimeout,\n onAccept,\n onDecline\n }: PropsWithoutRef<InteractionNotificationProps>,\n ref: InteractionNotificationProps['ref']\n ) {\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const containerRef = useConsolidatedRef(ref);\n const returnRef = useRef<HTMLElement>();\n const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n if (containerRef.current) {\n returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n acceptButtonRef.current?.focus();\n }\n });\n const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n onDecline?.();\n });\n\n useEscape(\n () => {\n returnRef.current?.focus();\n onDecline?.();\n },\n containerRef.current,\n [onDecline]\n );\n\n useEffect(() => {\n announceAssertive({\n message: `${title} ${primaryText} ${t('status')} ${status.text}. ${\n goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n }${\n dismissBinding && onDecline\n ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n : ''\n }`,\n type: 'alert'\n });\n }, []);\n\n const acceptButton = incomingNotificationTimeout ? (\n <CountdownButton\n variant='primary'\n onClick={onAccept}\n startTime={incomingNotificationTimeout.startTime}\n timeout={incomingNotificationTimeout.answerTimeout}\n onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDecline}\n ref={acceptButtonRef}\n >\n {t('accept')}\n </CountdownButton>\n ) : (\n <Button variant='primary' onClick={onAccept} ref={acceptButtonRef}>\n {t('accept')}\n </Button>\n );\n\n return (\n <StyledInteractionNotification ref={containerRef} data-app-region>\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name={icon} />\n <Text variant='h2'>{title}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ gap: 2 }}>\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n <Text variant='h1' as='span'>\n {primaryText}\n </Text>\n {secondaryText && (\n <Text variant='h5' as='span'>\n {secondaryText}\n </Text>\n )}\n <Status variant={status.variant}>{status.text}</Status>\n </Flex>\n {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n </CardContent>\n\n <CardFooter justify={onDecline ? 'between' : 'end'}>\n {onDecline && <Button onClick={onDecline}>{t('decline')}</Button>}\n {acceptButton}\n </CardFooter>\n </StyledInteractionNotification>\n );\n });\n\nexport default InteractionNotification;\n"]}

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

@@ -62,7 +62,7 @@ export const StyledInteractionTimer = styled.div(({ sla, hasNotifications, theme
     `;
 });
 StyledInteractionTimer.defaultProps = defaultThemeProp;
-const InteractionTimer = forwardRef(({ icon, progress = 0, hasNotifications = false, meta, sla, ariaLabel, ...restProps }, ref) => {
+const InteractionTimer = forwardRef(function InteractionTimer({ icon, progress = 0, hasNotifications = false, meta, sla, ariaLabel, ...restProps }, ref) {
     const [currentTimeLabel, setCurrentTimeLabel] = useState('');
     const containerRef = useConsolidatedRef(ref);
     const labelRef = useRef('');