npm - @pega/cosmos-react-cs - Versions diffs - 3.0.0-dev.4.0 → 3.0.0-dev.5.0 - Mend

@pega/cosmos-react-cs 3.0.0-dev.4.0 → 3.0.0-dev.5.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 (53) hide show

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

@@ -64,11 +64,11 @@ export const UserStatusIcon = memo(({ status = 'offline', variant }) => {
     const [colorName, colorVariant] = colorMapping[status].split('-', 2);
     const bgColor = colors[colorName][colorVariant];
     const iconName = iconMapping[status];
-    return variant === 'dot' ? (_jsx("svg", { role: 'img', "aria-hidden": true, height: '1rem', width: '1rem', viewBox: '0 0 10 10', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("circle", { cx: '50%', cy: '50%', r: '50%', fill: bgColor }, void 0) }, void 0)) : (_jsx(StyledStatusIcon, { as: StyledUserStatusIcon, userStatus: status, children: iconName && _jsx(Icon, { name: iconName }, void 0) }, void 0));
+    return variant === 'dot' ? (_jsx("svg", { role: 'img', "aria-hidden": true, height: '1rem', width: '1rem', viewBox: '0 0 10 10', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("circle", { cx: '50%', cy: '50%', r: '50%', fill: bgColor }) })) : (_jsx(StyledStatusIcon, { as: StyledUserStatusIcon, userStatus: status, children: iconName && _jsx(Icon, { name: iconName }) }));
 });
 const CallControlPanelIcon = memo(({ status = 'offline', label, panelVisible, ...restProps }) => {
     const iconName = iconMapping[status];
-    return (_jsxs(StyledCallControlPanelIcon, { as: StyledAvatar, ...restProps, size: 'm', userStatus: status, "aria-label": label, children: [_jsx(Icon, { name: 'headset' }, void 0), iconName && _jsx(UserStatusIcon, { variant: 'icon', status: status }, void 0), !panelVisible && _jsx(Icon, { name: 'eye-off-solid' }, void 0)] }, void 0));
+    return (_jsxs(StyledCallControlPanelIcon, { as: StyledAvatar, ...restProps, size: 'm', userStatus: status, "aria-label": label, children: [_jsx(Icon, { name: 'headset' }), iconName && _jsx(UserStatusIcon, { variant: 'icon', status: status }), !panelVisible && _jsx(Icon, { name: 'eye-off-solid' })] }));
 });
 export default CallControlPanelIcon;
 //# sourceMappingURL=CallControlPanelIcon.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"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~~WAAI~~,~~WAC~~/C,CACP,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,IAAC,EAAE,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,YAC3D,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,~~WAAI~~,~~WACpB~~,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,oBAAoB,GAAgE,IAAI,CAC5F,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IAC5D,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,OAAO,CACL,MAAC,0BAA0B,IACzB,EAAE,EAAE,YAAY,KACZ,SAAS,EACb,IAAI,EAAC,GAAG,EACR,UAAU,EAAE,MAAM,gBACN,KAAK,aAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,~~WAAG~~,EACtB,QAAQ,IAAI,KAAC,cAAc,IAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAE,MAAM,~~WAAI~~,EAC7D,CAAC,YAAY,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,~~WAAG~~,~~YACpB~~,CAC9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { FunctionComponent, memo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n defaultThemeProp,\n ForwardProps,\n Icon,\n registerIcon,\n NoChildrenProp,\n OmitStrict,\n StyledAvatar,\n StyledIcon,\n useTheme\n} from '@pega/cosmos-react-core';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\nimport * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';\n\nimport type { UserAvailabilityStatus } from './CallControlPanel.types';\n\nregisterIcon(headsetIcon, eyeOffSolidIcon);\n\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' \| 'black'>;\ntype ThemeColorVariant = 'extra-light' \| 'light' \| 'medium' \| 'dark' \| 'extra-dark';\n\ninterface CallControlPanelIconProps extends NoChildrenProp {\n status?: UserAvailabilityStatus;\n label: string;\n panelVisible: boolean;\n}\n\ninterface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {\n variant: 'icon' \| 'dot';\n}\n\nconst colorMapping: Record<UserAvailabilityStatus, `${ThemeColor}-${ThemeColorVariant}`> = {\n offline: 'slate-light',\n available: 'green-light',\n busy: 'red-medium',\n away: 'orange-light',\n not_available: 'slate-light'\n};\n\nconst iconMapping: Record<UserAvailabilityStatus, IconNames \| undefined> = {\n offline: 'times',\n available: undefined,\n busy: 'minus',\n away: 'clock',\n not_available: 'reset'\n};\n\nconst StyledStatusIcon = styled.div<{ userStatus: UserAvailabilityStatus }>(\n ({\n theme: {\n base: { colors }\n },\n userStatus\n }) => {\n const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const fgColor = readableColor(bgColor);\n return css`\n background-color: ${bgColor};\n color: ${fgColor};\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledUserStatusIcon = styled(StyledStatusIcon)`\n position: absolute;\n inset-block-start: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n border-radius: 50%;\n border: 0.0625rem solid black;\n\n ${StyledIcon} {\n display: block;\n width: 100%;\n margin: 0 auto;\n }\n`;\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCallControlPanelIcon = styled(StyledStatusIcon)`\n > ${StyledIcon}:nth-child(3) {\n position: absolute;\n inset-block-end: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n fill: ${p => p.theme.base.colors.gray.medium};\n }\n`;\n\nStyledCallControlPanelIcon.defaultProps = defaultThemeProp;\n\nexport const UserStatusIcon: FunctionComponent<UserStatusIconProps> = memo(\n ({ status = 'offline', variant }) => {\n const {\n base: { colors }\n } = useTheme();\n const [colorName, colorVariant] = colorMapping[status].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const iconName = iconMapping[status];\n\n return variant === 'dot' ? (\n <svg\n role='img'\n aria-hidden\n height='1rem'\n width='1rem'\n viewBox='0 0 10 10'\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle cx='50%' cy='50%' r='50%' fill={bgColor} />\n </svg>\n ) : (\n <StyledStatusIcon as={StyledUserStatusIcon} userStatus={status}>\n {iconName && <Icon name={iconName} />}\n </StyledStatusIcon>\n );\n }\n);\n\nconst CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps> = memo(\n ({ status = 'offline', label, panelVisible, ...restProps }) => {\n const iconName = iconMapping[status];\n\n return (\n <StyledCallControlPanelIcon\n as={StyledAvatar}\n {...restProps}\n size='m'\n userStatus={status}\n aria-label={label}\n >\n <Icon name='headset' />\n {iconName && <UserStatusIcon variant='icon' status={status} />}\n {!panelVisible && <Icon name='eye-off-solid' />}\n </StyledCallControlPanelIcon>\n );\n }\n);\n\nexport default CallControlPanelIcon;\n"]}
1	+ {"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, memo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n defaultThemeProp,\n ForwardProps,\n Icon,\n registerIcon,\n NoChildrenProp,\n OmitStrict,\n StyledAvatar,\n StyledIcon,\n useTheme\n} from '@pega/cosmos-react-core';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\nimport * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';\n\nimport type { UserAvailabilityStatus } from './CallControlPanel.types';\n\nregisterIcon(headsetIcon, eyeOffSolidIcon);\n\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' \| 'black'>;\ntype ThemeColorVariant = 'extra-light' \| 'light' \| 'medium' \| 'dark' \| 'extra-dark';\n\ninterface CallControlPanelIconProps extends NoChildrenProp {\n status?: UserAvailabilityStatus;\n label: string;\n panelVisible: boolean;\n}\n\ninterface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {\n variant: 'icon' \| 'dot';\n}\n\nconst colorMapping: Record<UserAvailabilityStatus, `${ThemeColor}-${ThemeColorVariant}`> = {\n offline: 'slate-light',\n available: 'green-light',\n busy: 'red-medium',\n away: 'orange-light',\n not_available: 'slate-light'\n};\n\nconst iconMapping: Record<UserAvailabilityStatus, IconNames \| undefined> = {\n offline: 'times',\n available: undefined,\n busy: 'minus',\n away: 'clock',\n not_available: 'reset'\n};\n\nconst StyledStatusIcon = styled.div<{ userStatus: UserAvailabilityStatus }>(\n ({\n theme: {\n base: { colors }\n },\n userStatus\n }) => {\n const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const fgColor = readableColor(bgColor);\n return css`\n background-color: ${bgColor};\n color: ${fgColor};\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledUserStatusIcon = styled(StyledStatusIcon)`\n position: absolute;\n inset-block-start: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n border-radius: 50%;\n border: 0.0625rem solid black;\n\n ${StyledIcon} {\n display: block;\n width: 100%;\n margin: 0 auto;\n }\n`;\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCallControlPanelIcon = styled(StyledStatusIcon)`\n > ${StyledIcon}:nth-child(3) {\n position: absolute;\n inset-block-end: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n fill: ${p => p.theme.base.colors.gray.medium};\n }\n`;\n\nStyledCallControlPanelIcon.defaultProps = defaultThemeProp;\n\nexport const UserStatusIcon: FunctionComponent<UserStatusIconProps> = memo(\n ({ status = 'offline', variant }) => {\n const {\n base: { colors }\n } = useTheme();\n const [colorName, colorVariant] = colorMapping[status].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const iconName = iconMapping[status];\n\n return variant === 'dot' ? (\n <svg\n role='img'\n aria-hidden\n height='1rem'\n width='1rem'\n viewBox='0 0 10 10'\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle cx='50%' cy='50%' r='50%' fill={bgColor} />\n </svg>\n ) : (\n <StyledStatusIcon as={StyledUserStatusIcon} userStatus={status}>\n {iconName && <Icon name={iconName} />}\n </StyledStatusIcon>\n );\n }\n);\n\nconst CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps> = memo(\n ({ status = 'offline', label, panelVisible, ...restProps }) => {\n const iconName = iconMapping[status];\n\n return (\n <StyledCallControlPanelIcon\n as={StyledAvatar}\n {...restProps}\n size='m'\n userStatus={status}\n aria-label={label}\n >\n <Icon name='headset' />\n {iconName && <UserStatusIcon variant='icon' status={status} />}\n {!panelVisible && <Icon name='eye-off-solid' />}\n </StyledCallControlPanelIcon>\n );\n }\n);\n\nexport default CallControlPanelIcon;\n"]}

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

@@ -77,7 +77,7 @@ const CallTransfer = forwardRef(({ onClose, onTransferCall, transferOptions }, r
     };
     const [comments, setComments] = useState('');
     const [interaction, setInteraction] = useState(true);
-    return (_jsxs(StyledTransfer, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_transfer_call_heading') }, void 0) }, void 0) }, void 0), _jsxs(CardContent, { container: { itemGap: 1, justify: 'start' }, children: [_jsxs(RadioButtonGroup, { name: t('call_panel_transfer_call_option_label'), children: [_jsx(RadioButton, { label: t('call_panel_transfer_call_and_interaction_option'), id: useUID(), defaultChecked: true, onChange: () => setInteraction(true) }, void 0), _jsx(RadioButton, { label: t('call_panel_transfer_call_only_option'), id: useUID(), onChange: () => setInteraction(false) }, void 0)] }, void 0), _jsx(ComboBox, { label: t('call_panel_transfer_reason_label'), required: true, selected: selectedReason
+    return (_jsxs(StyledTransfer, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_transfer_call_heading') }) }) }), _jsxs(CardContent, { container: { itemGap: 1, justify: 'start' }, children: [_jsxs(RadioButtonGroup, { name: t('call_panel_transfer_call_option_label'), children: [_jsx(RadioButton, { label: t('call_panel_transfer_call_and_interaction_option'), id: useUID(), defaultChecked: true, onChange: () => setInteraction(true) }), _jsx(RadioButton, { label: t('call_panel_transfer_call_only_option'), id: useUID(), onChange: () => setInteraction(false) })] }), _jsx(ComboBox, { label: t('call_panel_transfer_reason_label'), required: true, selected: selectedReason
                             ? {
                                 items: {
                                     id: selectedReason.id,
@@ -89,7 +89,7 @@ const CallTransfer = forwardRef(({ onClose, onTransferCall, transferOptions }, r
                             onItemClick: id => {
                                 setReasons(cur => menuHelpers.selectItem(cur, id, 'single-select'));
                             }
-                        } }, void 0), _jsx(TextArea, { name: 'comments', required: true, label: t('call_panel_transfer_comments_label'), displayCharCount: true, maxLength: 300, value: comments, onChange: (e) => setComments(e.target.value) }, void 0), _jsx(ComboBox, { label: t('call_panel_transfer_to_label'), required: true, selected: selectedContact
+                        } }), _jsx(TextArea, { name: 'comments', required: true, label: t('call_panel_transfer_comments_label'), displayCharCount: true, maxLength: 300, value: comments, onChange: (e) => setComments(e.target.value) }), _jsx(ComboBox, { label: t('call_panel_transfer_to_label'), required: true, selected: selectedContact
                             ? {
                                 items: {
                                     id: selectedContact.id,
@@ -107,7 +107,7 @@ const CallTransfer = forwardRef(({ onClose, onTransferCall, transferOptions }, r
                             onItemClick: selectItem,
                             accent: filterRegex,
                             emptyText: t('no_items')
-                        } }, void 0)] }, void 0), _jsx(CardFooter, { alignItems: 'right', justify: 'end', children: _jsx(Button, { variant: 'primary', disabled: !(selectedReason && selectedContact && comments !== ''), onClick: () => {
+                        } })] }), _jsx(CardFooter, { alignItems: 'right', justify: 'end', children: _jsx(Button, { variant: 'primary', disabled: !(selectedReason && selectedContact && comments !== ''), onClick: () => {
                         const transferParam = {
                             reason: selectedReason.id,
                             comments,
@@ -115,7 +115,7 @@ const CallTransfer = forwardRef(({ onClose, onTransferCall, transferOptions }, r
                             phoneNumber: selectedContact.id
                         };
                         onTransferCall(transferParam);
-                    }, children: t('call_panel_transfer_button_label') }, void 0) }, void 0)] }, void 0));
+                    }, children: t('call_panel_transfer_button_label') }) })] }));
 });
 export default CallTransfer;
 //# sourceMappingURL=CallTransfer.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CallTransfer.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallTransfer.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,UAAU,EAIV,QAAQ,EACR,OAAO,EAER,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,IAAI,EAEJ,gBAAgB,EAChB,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EAER,WAAW,EAEX,UAAU,EACV,MAAM,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,YAAY,CAAC,SAAS,CAAC,CAAC;AAgBxB,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CACxC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;QACN,gBAAgB,KAAK,iBAAiB,KAAK,gBAAgB;+BACpC,OAAO,UAAU,IAAI,CAAC,OAAO;;;KAGvD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAsC,EAChF,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QACxD,OAAO;YACL,EAAE;YACF,OAAO,EAAE,KAAK;SACf,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB,GAAuB,EAAE;QAClF,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,WAAW,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YACpD,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAErF,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACtC,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,WAAW;YACpB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,GAAuB,EAAE;QACvB,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,WAAW,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YACpD,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,CACF,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAC/C,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,gBAAgB,CAAC,GAAG,CAAC,EAAE,CACrB,WAAW,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE;YAC9B,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,KAAK;aAChB,CAAC;QACJ,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,uBAAuB,CAAC;IAC5C,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,EAAE;QAC5C,OAAO,IAAI,MAAM,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;IACxE,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBACvE,OAAO,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnC,CAAC,CAAC;YACJ,CAAC,CAAC,aAAa,CAAC;QAElB,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC;IAEjC,MAAM,UAAU,GAAG,CAAC,EAAuB,EAAE,EAAE;QAC7C,cAAc,CAAC,EAAE,CAAC,CAAC;QACnB,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC;IAC5E,CAAC,CAAC;IAEF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAErD,OAAO,CACL,MAAC,cAAc,IAAC,GAAG,EAAE,GAAG,aACtB,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACd,YAGX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,kCAAkC,CAAC,WAAQ,WAC5D,WACI,EACb,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,aACtD,MAAC,gBAAgB,IAAC,IAAI,EAAE,CAAC,CAAC,uCAAuC,CAAC,aAChE,KAAC,WAAW,IACV,KAAK,EAAE,CAAC,CAAC,iDAAiD,CAAC,EAC3D,EAAE,EAAE,MAAM,EAAE,EACZ,cAAc,QACd,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,WACpC,EACF,KAAC,WAAW,IACV,KAAK,EAAE,CAAC,CAAC,sCAAsC,CAAC,EAChD,EAAE,EAAE,MAAM,EAAE,EACZ,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,WACrC,YACe,EAEnB,KAAC,QAAQ,IACP,KAAK,EAAE,CAAC,CAAC,kCAAkC,CAAC,EAC5C,QAAQ,QACR,QAAQ,EACN,cAAc;4BACZ,CAAC,CAAC;gCACE,KAAK,EAAE;oCACL,EAAE,EAAE,cAAc,CAAC,EAAE;oCACrB,IAAI,EAAE,cAAc,CAAC,OAAO;iCAC7B;6BACF;4BACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAE;4BACJ,KAAK,EAAE,OAAO;4BACd,WAAW,EAAE,EAAE,CAAC,EAAE;gCAChB,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC;4BACtE,CAAC;yBACF,WACD,EAEF,KAAC,QAAQ,IACP,IAAI,EAAC,UAAU,EACf,QAAQ,QACR,KAAK,EAAE,CAAC,CAAC,oCAAoC,CAAC,EAC9C,gBAAgB,QAChB,SAAS,EAAE,GAAG,EACd,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAmC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAC9E,EAEF,KAAC,QAAQ,IACP,KAAK,EAAE,CAAC,CAAC,8BAA8B,CAAC,EACxC,QAAQ,QACR,QAAQ,EACN,eAAe;4BACb,CAAC,CAAC;gCACE,KAAK,EAAE;oCACL,EAAE,EAAE,eAAe,CAAC,EAAE;oCACtB,IAAI,EAAE,eAAe,CAAC,OAAO;iCAC9B;6BACF;4BACH,CAAC,CAAC,SAAS,EAEf,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC7C,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;gCAAE,cAAc,EAAE,CAAC;4BACtC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBACjC,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;4BACX,cAAc,CAAC,EAAE,CAAC,CAAC;wBACrB,CAAC,EACD,IAAI,EAAE;4BACJ,KAAK,EAAE,aAAa;4BACpB,WAAW,EAAE,UAAU;4BACvB,MAAM,EAAE,WAAW;4BACnB,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC;yBACzB,WACD,YACU,EACd,KAAC,UAAU,IAAC,UAAU,EAAC,OAAO,EAAC,OAAO,EAAC,KAAK,YAC1C,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,CAAC,CAAC,cAAc,IAAI,eAAe,IAAI,QAAQ,KAAK,EAAE,CAAC,EACjE,OAAO,EAAE,GAAG,EAAE;wBACZ,MAAM,aAAa,GAAG;4BACpB,MAAM,EAAE,cAAc,CAAC,EAAE;4BACzB,QAAQ;4BACR,WAAW;4BACX,WAAW,EAAE,eAAe,CAAC,EAAE;yBAChC,CAAC;wBACF,cAAc,CAAC,aAAa,CAAC,CAAC;oBAChC,CAAC,YAEA,CAAC,CAAC,kCAAkC,CAAC,WAC/B,WACE,YACE,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n useContext,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState,\n useMemo,\n ChangeEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n CardContent,\n CardHeader,\n Flex,\n Icon,\n registerIcon,\n Text,\n Card,\n ForwardProps,\n defaultThemeProp,\n useI18n,\n RadioButtonGroup,\n RadioButton,\n TextArea,\n ComboBox,\n MenuProps,\n menuHelpers,\n MenuItemProps,\n CardFooter,\n useUID\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { TransferReasonOption, TransferData } from './CallControlPanel.types';\nimport { ContactsContext } from './CalleePicker';\n\nregisterIcon(timesIcon);\n\nexport interface CallTransferProps {\n /*\n Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n /\n onTransferCall: (transferParam: TransferData) => void;\n /* Callback fired on clicking close button. /\n onClose?: () => void;\n\n transferOptions: Readonly<TransferReasonOption[]>;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTransfer = styled(Card)(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n ${StyledCardHeader}, ${StyledCardContent}, ${StyledCardFooter} {\n padding: calc(1.25 ${spacing}) calc(${card.padding} * 2);\n }\n min-width: 28rem;\n `;\n }\n);\n\nStyledTransfer.defaultProps = defaultThemeProp;\n\nconst CallTransfer: FunctionComponent<CallTransferProps & ForwardProps> = forwardRef(\n (\n { onClose, onTransferCall, transferOptions }: PropsWithoutRef<CallTransferProps>,\n ref: CallTransferProps['ref']\n ) => {\n const t = useI18n();\n const { contacts } = useContext(ContactsContext);\n\n const reasonsList = transferOptions.map(({ id, label }) => {\n return {\n id,\n primary: label\n };\n });\n\n const [reasons, setReasons] = useState<MenuProps['items']>((): MenuProps['items'] => {\n return menuHelpers.mapTree([...reasonsList], item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n });\n\n const selectedReason = useMemo(() => menuHelpers.getSelected(reasons)[0], [reasons]);\n\n const contactList = contacts.map(item => {\n return {\n id: item.phoneNumber,\n primary: item.primary\n };\n });\n\n const [itemsContacts, setItemsContacts] = useState<MenuProps['items']>(\n (): MenuProps['items'] => {\n return menuHelpers.mapTree([...contactList], item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }\n );\n\n const selectedContact = useMemo(\n () => menuHelpers.getSelected(itemsContacts)[0],\n [itemsContacts]\n );\n\n const [filterValue, setFilterValue] = useState('');\n\n const clearSelection = () => {\n setItemsContacts(cur =>\n menuHelpers.mapTree(cur, item => {\n return {\n ...item,\n selected: false\n };\n })\n );\n };\n\n const escapeChars = /[.*+\\-?^${}()\|[\\]\\\\]/g;\n const getFilterRegex = (inputValue: string) => {\n return new RegExp(`^${inputValue.replace(escapeChars, '\\\\$&')}`, 'i');\n };\n\n const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);\n\n const itemsToRender = useMemo(() => {\n const newItems = filterValue\n ? menuHelpers.flatten(itemsContacts).filter(({ primary }: MenuItemProps) => {\n return filterRegex.test(primary);\n })\n : itemsContacts;\n\n return menuHelpers.mapTree(newItems, item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }, [filterValue, itemsContacts]);\n\n const selectItem = (id: MenuItemProps['id']) => {\n setFilterValue('');\n setItemsContacts(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n };\n\n const [comments, setComments] = useState('');\n\n const [interaction, setInteraction] = useState(true);\n\n return (\n <StyledTransfer ref={ref}>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_transfer_call_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 1, justify: 'start' }}>\n <RadioButtonGroup name={t('call_panel_transfer_call_option_label')}>\n <RadioButton\n label={t('call_panel_transfer_call_and_interaction_option')}\n id={useUID()}\n defaultChecked\n onChange={() => setInteraction(true)}\n />\n <RadioButton\n label={t('call_panel_transfer_call_only_option')}\n id={useUID()}\n onChange={() => setInteraction(false)}\n />\n </RadioButtonGroup>\n\n <ComboBox\n label={t('call_panel_transfer_reason_label')}\n required\n selected={\n selectedReason\n ? {\n items: {\n id: selectedReason.id,\n text: selectedReason.primary\n }\n }\n : undefined\n }\n menu={{\n items: reasons,\n onItemClick: id => {\n setReasons(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n }\n }}\n />\n\n <TextArea\n name='comments'\n required\n label={t('call_panel_transfer_comments_label')}\n displayCharCount\n maxLength={300}\n value={comments}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n />\n\n <ComboBox\n label={t('call_panel_transfer_to_label')}\n required\n selected={\n selectedContact\n ? {\n items: {\n id: selectedContact.id,\n text: selectedContact.primary\n }\n }\n : undefined\n }\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n if (!e.target.value) clearSelection();\n setFilterValue(e.target.value);\n }}\n onBlur={() => {\n setFilterValue('');\n }}\n menu={{\n items: itemsToRender,\n onItemClick: selectItem,\n accent: filterRegex,\n emptyText: t('no_items')\n }}\n />\n </CardContent>\n <CardFooter alignItems='right' justify='end'>\n <Button\n variant='primary'\n disabled={!(selectedReason && selectedContact && comments !== '')}\n onClick={() => {\n const transferParam = {\n reason: selectedReason.id,\n comments,\n interaction,\n phoneNumber: selectedContact.id\n };\n onTransferCall(transferParam);\n }}\n >\n {t('call_panel_transfer_button_label')}\n </Button>\n </CardFooter>\n </StyledTransfer>\n );\n }\n);\n\nexport default CallTransfer;\n"]}
1	+ {"version":3,"file":"CallTransfer.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallTransfer.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,UAAU,EAIV,QAAQ,EACR,OAAO,EAER,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,IAAI,EAEJ,gBAAgB,EAChB,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EAER,WAAW,EAEX,UAAU,EACV,MAAM,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,YAAY,CAAC,SAAS,CAAC,CAAC;AAgBxB,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CACxC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;QACN,gBAAgB,KAAK,iBAAiB,KAAK,gBAAgB;+BACpC,OAAO,UAAU,IAAI,CAAC,OAAO;;;KAGvD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAsC,EAChF,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QACxD,OAAO;YACL,EAAE;YACF,OAAO,EAAE,KAAK;SACf,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB,GAAuB,EAAE;QAClF,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,WAAW,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YACpD,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAErF,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACtC,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,WAAW;YACpB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,GAAuB,EAAE;QACvB,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,WAAW,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YACpD,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,CACF,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAC/C,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,gBAAgB,CAAC,GAAG,CAAC,EAAE,CACrB,WAAW,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE;YAC9B,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,KAAK;aAChB,CAAC;QACJ,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,uBAAuB,CAAC;IAC5C,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,EAAE;QAC5C,OAAO,IAAI,MAAM,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;IACxE,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBACvE,OAAO,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnC,CAAC,CAAC;YACJ,CAAC,CAAC,aAAa,CAAC;QAElB,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC;IAEjC,MAAM,UAAU,GAAG,CAAC,EAAuB,EAAE,EAAE;QAC7C,cAAc,CAAC,EAAE,CAAC,CAAC;QACnB,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC;IAC5E,CAAC,CAAC;IAEF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAErD,OAAO,CACL,MAAC,cAAc,IAAC,GAAG,EAAE,GAAG,aACtB,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,kCAAkC,CAAC,GAAQ,GAC5D,GACI,EACb,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,aACtD,MAAC,gBAAgB,IAAC,IAAI,EAAE,CAAC,CAAC,uCAAuC,CAAC,aAChE,KAAC,WAAW,IACV,KAAK,EAAE,CAAC,CAAC,iDAAiD,CAAC,EAC3D,EAAE,EAAE,MAAM,EAAE,EACZ,cAAc,QACd,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,GACpC,EACF,KAAC,WAAW,IACV,KAAK,EAAE,CAAC,CAAC,sCAAsC,CAAC,EAChD,EAAE,EAAE,MAAM,EAAE,EACZ,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,GACrC,IACe,EAEnB,KAAC,QAAQ,IACP,KAAK,EAAE,CAAC,CAAC,kCAAkC,CAAC,EAC5C,QAAQ,QACR,QAAQ,EACN,cAAc;4BACZ,CAAC,CAAC;gCACE,KAAK,EAAE;oCACL,EAAE,EAAE,cAAc,CAAC,EAAE;oCACrB,IAAI,EAAE,cAAc,CAAC,OAAO;iCAC7B;6BACF;4BACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAE;4BACJ,KAAK,EAAE,OAAO;4BACd,WAAW,EAAE,EAAE,CAAC,EAAE;gCAChB,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC;4BACtE,CAAC;yBACF,GACD,EAEF,KAAC,QAAQ,IACP,IAAI,EAAC,UAAU,EACf,QAAQ,QACR,KAAK,EAAE,CAAC,CAAC,oCAAoC,CAAC,EAC9C,gBAAgB,QAChB,SAAS,EAAE,GAAG,EACd,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAmC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAC9E,EAEF,KAAC,QAAQ,IACP,KAAK,EAAE,CAAC,CAAC,8BAA8B,CAAC,EACxC,QAAQ,QACR,QAAQ,EACN,eAAe;4BACb,CAAC,CAAC;gCACE,KAAK,EAAE;oCACL,EAAE,EAAE,eAAe,CAAC,EAAE;oCACtB,IAAI,EAAE,eAAe,CAAC,OAAO;iCAC9B;6BACF;4BACH,CAAC,CAAC,SAAS,EAEf,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC7C,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;gCAAE,cAAc,EAAE,CAAC;4BACtC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBACjC,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;4BACX,cAAc,CAAC,EAAE,CAAC,CAAC;wBACrB,CAAC,EACD,IAAI,EAAE;4BACJ,KAAK,EAAE,aAAa;4BACpB,WAAW,EAAE,UAAU;4BACvB,MAAM,EAAE,WAAW;4BACnB,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC;yBACzB,GACD,IACU,EACd,KAAC,UAAU,IAAC,UAAU,EAAC,OAAO,EAAC,OAAO,EAAC,KAAK,YAC1C,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,CAAC,CAAC,cAAc,IAAI,eAAe,IAAI,QAAQ,KAAK,EAAE,CAAC,EACjE,OAAO,EAAE,GAAG,EAAE;wBACZ,MAAM,aAAa,GAAG;4BACpB,MAAM,EAAE,cAAc,CAAC,EAAE;4BACzB,QAAQ;4BACR,WAAW;4BACX,WAAW,EAAE,eAAe,CAAC,EAAE;yBAChC,CAAC;wBACF,cAAc,CAAC,aAAa,CAAC,CAAC;oBAChC,CAAC,YAEA,CAAC,CAAC,kCAAkC,CAAC,GAC/B,GACE,IACE,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n useContext,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState,\n useMemo,\n ChangeEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n CardContent,\n CardHeader,\n Flex,\n Icon,\n registerIcon,\n Text,\n Card,\n ForwardProps,\n defaultThemeProp,\n useI18n,\n RadioButtonGroup,\n RadioButton,\n TextArea,\n ComboBox,\n MenuProps,\n menuHelpers,\n MenuItemProps,\n CardFooter,\n useUID\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { TransferReasonOption, TransferData } from './CallControlPanel.types';\nimport { ContactsContext } from './CalleePicker';\n\nregisterIcon(timesIcon);\n\nexport interface CallTransferProps {\n /*\n Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n /\n onTransferCall: (transferParam: TransferData) => void;\n /* Callback fired on clicking close button. /\n onClose?: () => void;\n\n transferOptions: Readonly<TransferReasonOption[]>;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTransfer = styled(Card)(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n ${StyledCardHeader}, ${StyledCardContent}, ${StyledCardFooter} {\n padding: calc(1.25 ${spacing}) calc(${card.padding} * 2);\n }\n min-width: 28rem;\n `;\n }\n);\n\nStyledTransfer.defaultProps = defaultThemeProp;\n\nconst CallTransfer: FunctionComponent<CallTransferProps & ForwardProps> = forwardRef(\n (\n { onClose, onTransferCall, transferOptions }: PropsWithoutRef<CallTransferProps>,\n ref: CallTransferProps['ref']\n ) => {\n const t = useI18n();\n const { contacts } = useContext(ContactsContext);\n\n const reasonsList = transferOptions.map(({ id, label }) => {\n return {\n id,\n primary: label\n };\n });\n\n const [reasons, setReasons] = useState<MenuProps['items']>((): MenuProps['items'] => {\n return menuHelpers.mapTree([...reasonsList], item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n });\n\n const selectedReason = useMemo(() => menuHelpers.getSelected(reasons)[0], [reasons]);\n\n const contactList = contacts.map(item => {\n return {\n id: item.phoneNumber,\n primary: item.primary\n };\n });\n\n const [itemsContacts, setItemsContacts] = useState<MenuProps['items']>(\n (): MenuProps['items'] => {\n return menuHelpers.mapTree([...contactList], item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }\n );\n\n const selectedContact = useMemo(\n () => menuHelpers.getSelected(itemsContacts)[0],\n [itemsContacts]\n );\n\n const [filterValue, setFilterValue] = useState('');\n\n const clearSelection = () => {\n setItemsContacts(cur =>\n menuHelpers.mapTree(cur, item => {\n return {\n ...item,\n selected: false\n };\n })\n );\n };\n\n const escapeChars = /[.*+\\-?^${}()\|[\\]\\\\]/g;\n const getFilterRegex = (inputValue: string) => {\n return new RegExp(`^${inputValue.replace(escapeChars, '\\\\$&')}`, 'i');\n };\n\n const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);\n\n const itemsToRender = useMemo(() => {\n const newItems = filterValue\n ? menuHelpers.flatten(itemsContacts).filter(({ primary }: MenuItemProps) => {\n return filterRegex.test(primary);\n })\n : itemsContacts;\n\n return menuHelpers.mapTree(newItems, item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }, [filterValue, itemsContacts]);\n\n const selectItem = (id: MenuItemProps['id']) => {\n setFilterValue('');\n setItemsContacts(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n };\n\n const [comments, setComments] = useState('');\n\n const [interaction, setInteraction] = useState(true);\n\n return (\n <StyledTransfer ref={ref}>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_transfer_call_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 1, justify: 'start' }}>\n <RadioButtonGroup name={t('call_panel_transfer_call_option_label')}>\n <RadioButton\n label={t('call_panel_transfer_call_and_interaction_option')}\n id={useUID()}\n defaultChecked\n onChange={() => setInteraction(true)}\n />\n <RadioButton\n label={t('call_panel_transfer_call_only_option')}\n id={useUID()}\n onChange={() => setInteraction(false)}\n />\n </RadioButtonGroup>\n\n <ComboBox\n label={t('call_panel_transfer_reason_label')}\n required\n selected={\n selectedReason\n ? {\n items: {\n id: selectedReason.id,\n text: selectedReason.primary\n }\n }\n : undefined\n }\n menu={{\n items: reasons,\n onItemClick: id => {\n setReasons(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n }\n }}\n />\n\n <TextArea\n name='comments'\n required\n label={t('call_panel_transfer_comments_label')}\n displayCharCount\n maxLength={300}\n value={comments}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n />\n\n <ComboBox\n label={t('call_panel_transfer_to_label')}\n required\n selected={\n selectedContact\n ? {\n items: {\n id: selectedContact.id,\n text: selectedContact.primary\n }\n }\n : undefined\n }\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n if (!e.target.value) clearSelection();\n setFilterValue(e.target.value);\n }}\n onBlur={() => {\n setFilterValue('');\n }}\n menu={{\n items: itemsToRender,\n onItemClick: selectItem,\n accent: filterRegex,\n emptyText: t('no_items')\n }}\n />\n </CardContent>\n <CardFooter alignItems='right' justify='end'>\n <Button\n variant='primary'\n disabled={!(selectedReason && selectedContact && comments !== '')}\n onClick={() => {\n const transferParam = {\n reason: selectedReason.id,\n comments,\n interaction,\n phoneNumber: selectedContact.id\n };\n onTransferCall(transferParam);\n }}\n >\n {t('call_panel_transfer_button_label')}\n </Button>\n </CardFooter>\n </StyledTransfer>\n );\n }\n);\n\nexport default CallTransfer;\n"]}

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

@@ -45,17 +45,17 @@ const CalleePicker = forwardRef(({ heading, onClose, onCall }, ref) => {
     ];
     const tabContent = (tabId) => {
         if (tabId === 'dial-pad')
-            return _jsx(DialPad, { onCallButtonClick: onCall, mode: 'default' }, void 0);
+            return _jsx(DialPad, { onCallButtonClick: onCall, mode: 'default' });
         return (_jsx(ContactsList, { contacts: tabId === 'favorites' ? favorites : contacts, onFavoriteToggle: onFavoriteToggle, action: {
                 label: t('call_panel_contacts_call_button_label'),
                 icon: 'phone-solid',
                 callback: onCall
-            } }, void 0));
+            } }));
     };
     useEffect(() => {
         tabsRef.current?.firstChild.focus();
     }, []);
-    return (_jsxs(StyledCalleePicker, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: heading }, void 0) }, void 0) }, void 0), _jsxs(CardContent, { container: { itemGap: 2 }, children: [_jsx(Tabs, { ref: tabsRef, tabs: tabsHeaders, type: 'horizontal', onTabClick: handleTabChange, currentTabId: currentTab }, void 0), _jsx(TabPanel, { tabId: currentTab, children: tabContent(currentTab) }, void 0)] }, void 0)] }, void 0));
+    return (_jsxs(StyledCalleePicker, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: heading }) }) }), _jsxs(CardContent, { container: { itemGap: 2 }, children: [_jsx(Tabs, { ref: tabsRef, tabs: tabsHeaders, type: 'horizontal', onTabClick: handleTabChange, currentTabId: currentTab }), _jsx(TabPanel, { tabId: currentTab, children: tabContent(currentTab) })] })] }));
 });
 export default CalleePicker;
 //# sourceMappingURL=CalleePicker.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CalleePicker.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CalleePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,UAAU,EAIV,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EAEJ,gBAAgB,EAChB,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,YAAmC,MAAM,gBAAgB,CAAC;AAEjE,YAAY,CAAC,SAAS,CAAC,CAAC;AAgBxB,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAE1C;IACA,QAAQ,EAAE,EAAE;IACZ,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,iBAAiB;6BACf,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;;MAGhF,cAAc;;;GAGjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAsC,EAChE,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,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,aAAa,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE;QAClF;YACE,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,CAAC,CAAC,uCAAuC,CAAC;YAChD,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM;SACrD;QACD,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,sCAAsC,CAAC,EAAE;KACpE,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,EAAE;QACnC,IAAI,KAAK,KAAK,UAAU;YAAE,OAAO,KAAC,OAAO,IAAC,iBAAiB,EAAE,MAAM,EAAE,IAAI,EAAC,SAAS,~~WAAG~~,CAAC;QACvF,OAAO,CACL,KAAC,YAAY,IACX,QAAQ,EAAE,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACtD,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE;gBACN,KAAK,EAAE,CAAC,CAAC,uCAAuC,CAAC;gBACjD,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,MAAM;aACjB,~~WACD~~,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACZ,OAAO,CAAC,OAAO,EAAE,UAAgC,CAAC,KAAK,EAAE,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,aAC1B,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,~~WAAG~~,~~WACd~~,YAGX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,~~WAAQ~~,~~WAC9B~~,~~WACI~~,EACb,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,aACpC,KAAC,IAAI,IACH,GAAG,EAAE,OAAO,EACZ,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,YAAY,EACjB,UAAU,EAAE,eAAe,EAC3B,YAAY,EAAE,UAAU,~~WACxB~~,EACF,KAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAAG,UAAU,CAAC,UAAU,CAAC,~~WAAY~~,~~YACpD~~,~~YACK~~,CACtB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n createContext,\n useContext,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n CardContent,\n CardHeader,\n Flex,\n Icon,\n registerIcon,\n Text,\n TabPanel,\n Tabs,\n Card,\n ForwardProps,\n defaultThemeProp,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\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 ContactsList, { ContactsListProps } from './ContactsList';\n\nregisterIcon(timesIcon);\n\nexport interface CalleePickerProps {\n /** Heading for the new call. /\n heading: string;\n /\n Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n /\n onCall: (phoneNumber: string) => void;\n /* Callback fired on clicking close button. /\n onClose?: () => void;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const ContactsContext = createContext<\n Pick<ContactsListProps, 'contacts' \| 'onFavoriteToggle'>\n>({\n contacts: [],\n onFavoriteToggle: () => {}\n});\n\nconst StyledCalleePicker = styled(Card)(({ theme }) => {\n return css`\n ${StyledCardHeader}, ${StyledCardContent} {\n padding: calc(1.25 ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n }\n\n ${StyledTabPanel} {\n height: 24rem;\n }\n `;\n});\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n\nconst CalleePicker: FunctionComponent<CalleePickerProps & ForwardProps> = forwardRef(\n (\n { heading, onClose, onCall }: 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 handleTabChange = (id: string) => {\n setCurrentTab(id);\n };\n\n const tabsHeaders = [\n { id: 'all', name: t('call_panel_contacts_list_heading'), count: contacts.length },\n {\n id: 'favorites',\n name: t('call_panel_contacts_favorites_heading'),\n count: contacts.filter(item => item.favorite).length\n },\n { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }\n ];\n\n const tabContent = (tabId: string) => {\n if (tabId === 'dial-pad') return <DialPad onCallButtonClick={onCall} mode='default' />;\n return (\n <ContactsList\n contacts={tabId === 'favorites' ? favorites : contacts}\n onFavoriteToggle={onFavoriteToggle}\n action={{\n label: t('call_panel_contacts_call_button_label'),\n icon: 'phone-solid',\n callback: onCall\n }}\n />\n );\n };\n\n useEffect(() => {\n (tabsRef.current?.firstChild as HTMLButtonElement).focus();\n }, []);\n\n return (\n <StyledCalleePicker ref={ref}>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{heading}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 2 }}>\n <Tabs\n ref={tabsRef}\n tabs={tabsHeaders}\n type='horizontal'\n onTabClick={handleTabChange}\n currentTabId={currentTab}\n />\n <TabPanel tabId={currentTab}>{tabContent(currentTab)}</TabPanel>\n </CardContent>\n </StyledCalleePicker>\n );\n }\n);\n\nexport default CalleePicker;\n"]}
1	+ {"version":3,"file":"CalleePicker.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CalleePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,UAAU,EAIV,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EAEJ,gBAAgB,EAChB,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,YAAmC,MAAM,gBAAgB,CAAC;AAEjE,YAAY,CAAC,SAAS,CAAC,CAAC;AAgBxB,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAE1C;IACA,QAAQ,EAAE,EAAE;IACZ,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,iBAAiB;6BACf,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;;MAGhF,cAAc;;;GAGjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAsC,EAChE,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,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,aAAa,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE;QAClF;YACE,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,CAAC,CAAC,uCAAuC,CAAC;YAChD,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM;SACrD;QACD,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,sCAAsC,CAAC,EAAE;KACpE,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,EAAE;QACnC,IAAI,KAAK,KAAK,UAAU;YAAE,OAAO,KAAC,OAAO,IAAC,iBAAiB,EAAE,MAAM,EAAE,IAAI,EAAC,SAAS,GAAG,CAAC;QACvF,OAAO,CACL,KAAC,YAAY,IACX,QAAQ,EAAE,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACtD,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE;gBACN,KAAK,EAAE,CAAC,CAAC,uCAAuC,CAAC;gBACjD,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,MAAM;aACjB,GACD,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACZ,OAAO,CAAC,OAAO,EAAE,UAAgC,CAAC,KAAK,EAAE,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,aAC1B,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAQ,GAC9B,GACI,EACb,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,aACpC,KAAC,IAAI,IACH,GAAG,EAAE,OAAO,EACZ,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,YAAY,EACjB,UAAU,EAAE,eAAe,EAC3B,YAAY,EAAE,UAAU,GACxB,EACF,KAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAAG,UAAU,CAAC,UAAU,CAAC,GAAY,IACpD,IACK,CACtB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n createContext,\n useContext,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n CardContent,\n CardHeader,\n Flex,\n Icon,\n registerIcon,\n Text,\n TabPanel,\n Tabs,\n Card,\n ForwardProps,\n defaultThemeProp,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\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 ContactsList, { ContactsListProps } from './ContactsList';\n\nregisterIcon(timesIcon);\n\nexport interface CalleePickerProps {\n /** Heading for the new call. /\n heading: string;\n /\n Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n /\n onCall: (phoneNumber: string) => void;\n /* Callback fired on clicking close button. /\n onClose?: () => void;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const ContactsContext = createContext<\n Pick<ContactsListProps, 'contacts' \| 'onFavoriteToggle'>\n>({\n contacts: [],\n onFavoriteToggle: () => {}\n});\n\nconst StyledCalleePicker = styled(Card)(({ theme }) => {\n return css`\n ${StyledCardHeader}, ${StyledCardContent} {\n padding: calc(1.25 ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n }\n\n ${StyledTabPanel} {\n height: 24rem;\n }\n `;\n});\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n\nconst CalleePicker: FunctionComponent<CalleePickerProps & ForwardProps> = forwardRef(\n (\n { heading, onClose, onCall }: 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 handleTabChange = (id: string) => {\n setCurrentTab(id);\n };\n\n const tabsHeaders = [\n { id: 'all', name: t('call_panel_contacts_list_heading'), count: contacts.length },\n {\n id: 'favorites',\n name: t('call_panel_contacts_favorites_heading'),\n count: contacts.filter(item => item.favorite).length\n },\n { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }\n ];\n\n const tabContent = (tabId: string) => {\n if (tabId === 'dial-pad') return <DialPad onCallButtonClick={onCall} mode='default' />;\n return (\n <ContactsList\n contacts={tabId === 'favorites' ? favorites : contacts}\n onFavoriteToggle={onFavoriteToggle}\n action={{\n label: t('call_panel_contacts_call_button_label'),\n icon: 'phone-solid',\n callback: onCall\n }}\n />\n );\n };\n\n useEffect(() => {\n (tabsRef.current?.firstChild as HTMLButtonElement).focus();\n }, []);\n\n return (\n <StyledCalleePicker ref={ref}>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{heading}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 2 }}>\n <Tabs\n ref={tabsRef}\n tabs={tabsHeaders}\n type='horizontal'\n onTabClick={handleTabChange}\n currentTabId={currentTab}\n />\n <TabPanel tabId={currentTab}>{tabContent(currentTab)}</TabPanel>\n </CardContent>\n </StyledCalleePicker>\n );\n }\n);\n\nexport default CalleePicker;\n"]}

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

@@ -50,13 +50,13 @@ const ContactsList = forwardRef(({ contacts: items, action, onFavoriteToggle },
             onFavoriteToggle(phoneNumber, favorite);
         }, "aria-label": favorite
             ? t('call_panel_contacts_add_to_favorites')
-            : t('call_panel_contacts_remove_from_favorites'), children: _jsx(Icon, { name: favorite ? 'star-solid' : 'star' }, void 0) }, void 0)), [onFavoriteToggle]);
+            : t('call_panel_contacts_remove_from_favorites'), children: _jsx(Icon, { name: favorite ? 'star-solid' : 'star' }) })), [onFavoriteToggle]);
     const createList = (list) => {
         return list.map(item => {
             return {
                 id: item.phoneNumber,
                 primary: item.primary,
-                secondary: _jsx(Text, { variant: 'secondary', children: item.secondary }, void 0),
+                secondary: _jsx(Text, { variant: 'secondary', children: item.secondary }),
                 visual: favoriteButton(item.phoneNumber, item.favorite),
                 actions: [
                     {
@@ -82,7 +82,7 @@ const ContactsList = forwardRef(({ contacts: items, action, onFavoriteToggle },
                 return (primary.toLowerCase().includes(searchText.toLowerCase()) ||
                     secondary.toLowerCase().includes(searchText.toLowerCase()));
             }))
-            : createList(items), searchInputProps: { onSearchChange } }, void 0));
+            : createList(items), searchInputProps: { onSearchChange } }));
 });
 export default ContactsList;
 //# sourceMappingURL=ContactsList.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContactsList.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ContactsList.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAKV,WAAW,EACX,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,gBAAgB,EAEhB,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,OAAO,EACP,OAAO,EACP,wBAAwB,EACxB,aAAa,EACb,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAInG,YAAY,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AAoBtC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;;;;;;;MAON,UAAU;uBACO,IAAI,CAAC,OAAO;wBACX,IAAI,CAAC,OAAO;;UAE1B,iBAAiB;;;;;;QAMnB,UAAU;uCACqB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;UAExD,aAAa,OAAO,eAAe;;uBAEtB,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;;MAG3C,wBAAwB;eACf,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAsC,EACjF,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE7C,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACnD,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,WAAmB,EAAE,QAAiB,EAAE,EAAE,CAAC,CAC1C,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QAC1C,CAAC,gBAEC,QAAQ;YACN,CAAC,CAAC,CAAC,CAAC,sCAAsC,CAAC;YAC3C,CAAC,CAAC,CAAC,CAAC,2CAA2C,CAAC,YAGpD,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,~~WAAI~~,~~WACzC~~,CACV,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,IAAe,EAAE,EAAE;QACrC,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACrB,OAAO;gBACL,EAAE,EAAE,IAAI,CAAC,WAAW;gBACpB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,SAAS,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,IAAI,CAAC,SAAS,~~WAAQ~~;gBAC5D,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC;gBACvD,OAAO,EAAE;oBACP;wBACE,IAAI,EAAE,MAAM,CAAC,KAAK;wBAClB,EAAE,EAAE,SAAS;wBACb,IAAI,EAAE,MAAM,CAAC,IAAI;qBAClB;iBACF;gBACD,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACpC,CAAC;gBACD,SAAS,EAAE;oBACT,KAAK,EAAE,oCAAoC;oBAC3C,IAAI,EAAE,yCAAyC;iBAChD;gBACD,QAAQ,EAAE,CAAC;aACZ,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAExD,OAAO,CACL,KAAC,OAAO,IACN,EAAE,EAAE,kBAAkB,EACtB,GAAG,EAAE,YAAY,EACjB,KAAK,EACH,UAAU;YACR,CAAC,CAAC,UAAU,CACR,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;gBACtC,OAAO,CACL,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;oBACxD,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAC3D,CAAC;YACJ,CAAC,CAAC,CACH;YACH,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,EAEvB,gBAAgB,EAAE,EAAE,cAAc,EAAE,~~WACpC~~,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MouseEvent,\n PropsWithoutRef,\n Ref,\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 StyledGrid,\n useI18n,\n ViewAll,\n StyledSummaryItemActions,\n StyledPrimary,\n StyledSecondary,\n useArrows,\n useConsolidatedRef,\n StyledCard\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';\n\nimport type { Contact } from './CallControlPanel.types';\n\nregisterIcon(starIcon, starSolidIcon);\n\nexport interface ContactsListProps {\n /** An array of contacts objects. /\n contacts: Contact[];\n /\n Primary action the user may select.\n * @param phoneNumber the number chosen.\n /\n action: {\n label: string;\n icon: string;\n callback: (phoneNumber: string) => void;\n };\n /* Callback fired on adding/removing contact to/from favorites /\n onFavoriteToggle: (phoneNumber: string, favorites: boolean) => void;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledContactsList = styled.div(({ theme: { base } }) => {\n return css`\n display: flex;\n flex-flow: column;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n\n ${StyledCard} {\n margin: 0 calc(${base.spacing} -2);\n padding: 0 calc(${base.spacing} * 2);\n\n > ${StyledCardContent} {\n padding: 0;\n gap: 0;\n }\n }\n\n li${StyledGrid} {\n border-bottom: 0.0625rem solid ${base.palette['border-line']};\n padding: 0;\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n font-weight: ${base['font-weight'].normal};\n }\n }\n ${StyledSummaryItemActions} {\n color: ${base.palette.interactive};\n }\n `;\n});\n\nStyledContactsList.defaultProps = defaultThemeProp;\n\nconst ContactsList: FunctionComponent<ContactsListProps & ForwardProps> = forwardRef(\n (\n { contacts: items, action, onFavoriteToggle }: PropsWithoutRef<ContactsListProps>,\n ref: ContactsListProps['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: Contact[]) => {\n return list.map(item => {\n return {\n id: item.phoneNumber,\n primary: item.primary,\n secondary: <Text variant='secondary'>{item.secondary}</Text>,\n visual: favoriteButton(item.phoneNumber, item.favorite),\n actions: [\n {\n text: action.label,\n id: 'primary',\n icon: action.icon\n }\n ],\n onClick: () => {\n action.callback(item.phoneNumber);\n },\n container: {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'\n },\n tabIndex: 0\n };\n });\n };\n\n useArrows(containerRef, { selector: ':scope ul > li' });\n\n return (\n <ViewAll\n as={StyledContactsList}\n ref={containerRef}\n items={\n searchText\n ? createList(\n items.filter(({ primary, secondary }) => {\n return (\n primary.toLowerCase().includes(searchText.toLowerCase()) \|\|\n secondary.toLowerCase().includes(searchText.toLowerCase())\n );\n })\n )\n : createList(items)\n }\n searchInputProps={{ onSearchChange }}\n />\n );\n }\n);\n\nexport default ContactsList;\n"]}
1	+ {"version":3,"file":"ContactsList.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ContactsList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MouseEvent,\n PropsWithoutRef,\n Ref,\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 StyledGrid,\n useI18n,\n ViewAll,\n StyledSummaryItemActions,\n StyledPrimary,\n StyledSecondary,\n useArrows,\n useConsolidatedRef,\n StyledCard\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';\n\nimport type { Contact } from './CallControlPanel.types';\n\nregisterIcon(starIcon, starSolidIcon);\n\nexport interface ContactsListProps {\n /** An array of contacts objects. /\n contacts: Contact[];\n /\n Primary action the user may select.\n * @param phoneNumber the number chosen.\n /\n action: {\n label: string;\n icon: string;\n callback: (phoneNumber: string) => void;\n };\n /* Callback fired on adding/removing contact to/from favorites /\n onFavoriteToggle: (phoneNumber: string, favorites: boolean) => void;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledContactsList = styled.div(({ theme: { base } }) => {\n return css`\n display: flex;\n flex-flow: column;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n\n ${StyledCard} {\n margin: 0 calc(${base.spacing} -2);\n padding: 0 calc(${base.spacing} * 2);\n\n > ${StyledCardContent} {\n padding: 0;\n gap: 0;\n }\n }\n\n li${StyledGrid} {\n border-bottom: 0.0625rem solid ${base.palette['border-line']};\n padding: 0;\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n font-weight: ${base['font-weight'].normal};\n }\n }\n ${StyledSummaryItemActions} {\n color: ${base.palette.interactive};\n }\n `;\n});\n\nStyledContactsList.defaultProps = defaultThemeProp;\n\nconst ContactsList: FunctionComponent<ContactsListProps & ForwardProps> = forwardRef(\n (\n { contacts: items, action, onFavoriteToggle }: PropsWithoutRef<ContactsListProps>,\n ref: ContactsListProps['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: Contact[]) => {\n return list.map(item => {\n return {\n id: item.phoneNumber,\n primary: item.primary,\n secondary: <Text variant='secondary'>{item.secondary}</Text>,\n visual: favoriteButton(item.phoneNumber, item.favorite),\n actions: [\n {\n text: action.label,\n id: 'primary',\n icon: action.icon\n }\n ],\n onClick: () => {\n action.callback(item.phoneNumber);\n },\n container: {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'\n },\n tabIndex: 0\n };\n });\n };\n\n useArrows(containerRef, { selector: ':scope ul > li' });\n\n return (\n <ViewAll\n as={StyledContactsList}\n ref={containerRef}\n items={\n searchText\n ? createList(\n items.filter(({ primary, secondary }) => {\n return (\n primary.toLowerCase().includes(searchText.toLowerCase()) \|\|\n secondary.toLowerCase().includes(searchText.toLowerCase())\n );\n })\n )\n : createList(items)\n }\n searchInputProps={{ onSearchChange }}\n />\n );\n }\n);\n\nexport default ContactsList;\n"]}

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

@@ -17,7 +17,7 @@ export const StyledDTMFKeypad = styled(Card)(({ theme: { base: { spacing }, comp
 StyledDTMFKeypad.defaultProps = defaultThemeProp;
 const DTMFKeypad = ({ onClose, onDialButtonClick }) => {
     const t = useI18n();
-    return (_jsxs(StyledDTMFKeypad, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_send_dtmf_heading') }, void 0) }, void 0) }, void 0), _jsx(CardContent, { container: { itemGap: 1, justify: 'start' }, children: _jsx(DialPad, { onDialButtonClick: onDialButtonClick, mode: 'DTMF' }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(StyledDTMFKeypad, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_send_dtmf_heading') }) }) }), _jsx(CardContent, { container: { itemGap: 1, justify: 'start' }, children: _jsx(DialPad, { onDialButtonClick: onDialButtonClick, mode: 'DTMF' }) })] }));
 };
 export default DTMFKeypad;
 //# sourceMappingURL=DTMFKeypad.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DTMFKeypad.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/DTMFKeypad.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,OAAyB,MAAM,oBAAoB,CAAC;AAE3D,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;QAEN,gBAAgB,KAAK,iBAAiB;+BACf,OAAO,UAAU,IAAI,CAAC,OAAO;;KAEvD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAOjD,MAAM,UAAU,GAAwB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAE;IACzE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,gBAAgB,eACf,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,~~WAAG~~,~~WACd~~,YAGX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,~~WAAQ~~,~~WACxD~~,~~WACI~~,EACb,KAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,YACtD,KAAC,OAAO,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAC,MAAM,~~WAAG~~,~~WACjD~~,~~YACG~~,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n Button,\n Icon,\n registerIcon,\n Flex,\n Text,\n useI18n,\n CardContent,\n defaultThemeProp,\n OmitStrict\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad, { DialPadProps } from '../DialPad/DialPad';\n\nregisterIcon(timesIcon);\n\nexport const StyledDTMFKeypad = styled(Card)(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n min-width: 15rem;\n ${StyledCardHeader}, ${StyledCardContent} {\n padding: calc(1.25 * ${spacing}) calc(${card.padding} * 2);\n }\n `;\n }\n);\n\nStyledDTMFKeypad.defaultProps = defaultThemeProp;\n\nexport interface DTMFKeypadProps extends OmitStrict<DialPadProps, 'mode'> {\n /** Callback fired on clicking close button. */\n onClose?: () => void;\n}\n\nconst DTMFKeypad: FC<DTMFKeypadProps> = ({ onClose, onDialButtonClick }) => {\n const t = useI18n();\n\n return (\n <StyledDTMFKeypad>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 1, justify: 'start' }}>\n <DialPad onDialButtonClick={onDialButtonClick} mode='DTMF' />\n </CardContent>\n </StyledDTMFKeypad>\n );\n};\n\nexport default DTMFKeypad;\n"]}
1	+ {"version":3,"file":"DTMFKeypad.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/DTMFKeypad.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,OAAyB,MAAM,oBAAoB,CAAC;AAE3D,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;QAEN,gBAAgB,KAAK,iBAAiB;+BACf,OAAO,UAAU,IAAI,CAAC,OAAO;;KAEvD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAOjD,MAAM,UAAU,GAAwB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAE;IACzE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,gBAAgB,eACf,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,GAAQ,GACxD,GACI,EACb,KAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,YACtD,KAAC,OAAO,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAC,MAAM,GAAG,GACjD,IACG,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n Button,\n Icon,\n registerIcon,\n Flex,\n Text,\n useI18n,\n CardContent,\n defaultThemeProp,\n OmitStrict\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad, { DialPadProps } from '../DialPad/DialPad';\n\nregisterIcon(timesIcon);\n\nexport const StyledDTMFKeypad = styled(Card)(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n min-width: 15rem;\n ${StyledCardHeader}, ${StyledCardContent} {\n padding: calc(1.25 * ${spacing}) calc(${card.padding} * 2);\n }\n `;\n }\n);\n\nStyledDTMFKeypad.defaultProps = defaultThemeProp;\n\nexport interface DTMFKeypadProps extends OmitStrict<DialPadProps, 'mode'> {\n /** Callback fired on clicking close button. */\n onClose?: () => void;\n}\n\nconst DTMFKeypad: FC<DTMFKeypadProps> = ({ onClose, onDialButtonClick }) => {\n const t = useI18n();\n\n return (\n <StyledDTMFKeypad>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 1, justify: 'start' }}>\n <DialPad onDialButtonClick={onDialButtonClick} mode='DTMF' />\n </CardContent>\n </StyledDTMFKeypad>\n );\n};\n\nexport default DTMFKeypad;\n"]}

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

@@ -22,7 +22,7 @@ const StopWatch = memo(({ startTime, timeout }) => {
         }, 1000);
         return () => clearInterval(timer);
     }, [startTime, timeoutMillis]);
-    return (_jsxs(Text, { as: StyledStopWatch, ref: clockRef, children: [formatDuration(Date.now() - millis), timeoutMillis && ` / ${formatDuration(timeoutMillis)}`] }, void 0));
+    return (_jsxs(Text, { as: StyledStopWatch, ref: clockRef, children: [formatDuration(Date.now() - millis), timeoutMillis && ` / ${formatDuration(timeoutMillis)}`] }));
 });
 export default StopWatch;
 //# sourceMappingURL=StopWatch.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StopWatch.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/StopWatch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAOzC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;;CAGhD,CAAC;AAEF,MAAM,SAAS,GAAsC,IAAI,CACvD,CAAC,EAAE,SAAS,EAAE,OAAO,EAAkB,EAAE,EAAE;IACzC,MAAM,QAAQ,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,SAAS,YAAY,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IACtF,MAAM,aAAa,GAAG,OAAO,YAAY,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IAEvF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,CAAC;gBAClD,IAAI,aAAa;oBAAE,OAAO,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;gBACpE,QAAQ,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC;aACxC;QACH,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,GAAG,EAAE,QAAQ,aACrC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,EACnC,aAAa,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,~~YAClD~~,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FunctionComponent, memo, useRef, useLayoutEffect } from 'react';\nimport styled from 'styled-components';\n\nimport { StyledText, Text } from '@pega/cosmos-react-core';\n\nimport { formatDuration } from './utils';\n\ninterface StopWatchProps {\n startTime: number \| Date;\n timeout?: number \| Date;\n}\n\nexport const StyledStopWatch = styled(StyledText)`\n min-width: 8ch;\n text-align: end;\n`;\n\nconst StopWatch: FunctionComponent<StopWatchProps> = memo(\n ({ startTime, timeout }: StopWatchProps) => {\n const clockRef = useRef<HTMLSpanElement>(null);\n const millis = startTime instanceof Date ? startTime.getUTCMilliseconds() : startTime;\n const timeoutMillis = timeout instanceof Date ? timeout.getUTCMilliseconds() : timeout;\n\n useLayoutEffect(() => {\n const timer = setInterval(() => {\n if (clockRef.current) {\n let content = formatDuration(Date.now() - millis);\n if (timeoutMillis) content += ` / ${formatDuration(timeoutMillis)}`;\n clockRef.current.textContent = content;\n }\n }, 1000);\n return () => clearInterval(timer);\n }, [startTime, timeoutMillis]);\n\n return (\n <Text as={StyledStopWatch} ref={clockRef}>\n {formatDuration(Date.now() - millis)}\n {timeoutMillis && ` / ${formatDuration(timeoutMillis)}`}\n </Text>\n );\n }\n);\n\nexport default StopWatch;\n"]}
1	+ {"version":3,"file":"StopWatch.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/StopWatch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAOzC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;;CAGhD,CAAC;AAEF,MAAM,SAAS,GAAsC,IAAI,CACvD,CAAC,EAAE,SAAS,EAAE,OAAO,EAAkB,EAAE,EAAE;IACzC,MAAM,QAAQ,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,SAAS,YAAY,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IACtF,MAAM,aAAa,GAAG,OAAO,YAAY,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IAEvF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,CAAC;gBAClD,IAAI,aAAa;oBAAE,OAAO,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;gBACpE,QAAQ,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC;aACxC;QACH,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,GAAG,EAAE,QAAQ,aACrC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,EACnC,aAAa,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,IAClD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FunctionComponent, memo, useRef, useLayoutEffect } from 'react';\nimport styled from 'styled-components';\n\nimport { StyledText, Text } from '@pega/cosmos-react-core';\n\nimport { formatDuration } from './utils';\n\ninterface StopWatchProps {\n startTime: number \| Date;\n timeout?: number \| Date;\n}\n\nexport const StyledStopWatch = styled(StyledText)`\n min-width: 8ch;\n text-align: end;\n`;\n\nconst StopWatch: FunctionComponent<StopWatchProps> = memo(\n ({ startTime, timeout }: StopWatchProps) => {\n const clockRef = useRef<HTMLSpanElement>(null);\n const millis = startTime instanceof Date ? startTime.getUTCMilliseconds() : startTime;\n const timeoutMillis = timeout instanceof Date ? timeout.getUTCMilliseconds() : timeout;\n\n useLayoutEffect(() => {\n const timer = setInterval(() => {\n if (clockRef.current) {\n let content = formatDuration(Date.now() - millis);\n if (timeoutMillis) content += ` / ${formatDuration(timeoutMillis)}`;\n clockRef.current.textContent = content;\n }\n }, 1000);\n return () => clearInterval(timer);\n }, [startTime, timeoutMillis]);\n\n return (\n <Text as={StyledStopWatch} ref={clockRef}>\n {formatDuration(Date.now() - millis)}\n {timeoutMillis && ` / ${formatDuration(timeoutMillis)}`}\n </Text>\n );\n }\n);\n\nexport default StopWatch;\n"]}

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

@@ -27,7 +27,7 @@ const DialPad = forwardRef(({ onCallButtonClick, onDialButtonClick: onDialButton
         });
         onDialButtonClickProp?.(charCode);
     }, [onDialButtonClickProp]);
-    return (_jsxs(StyledDialPad, { ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'center', itemGap: 1 }, children: [_jsx(Input, { value: number, onChange: (e) => setNumber(e.target.value), "aria-label": t('dial_pad_phone_number_input_label'), readOnly: mode === 'DTMF' }, void 0), mode !== 'DTMF' && (_jsx(Button, { variant: 'primary', onClick: () => onCallButtonClick?.(number), "aria-label": t('dial_pad_call_button_label', [number]), disabled: number.length === 0, children: t('dial_pad_call_button_label') }, void 0))] }, void 0), _jsx(DialPadKeyboard, { onDialButtonClick: onDialButtonClick, mode: mode }, void 0)] }, void 0));
+    return (_jsxs(StyledDialPad, { ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'center', itemGap: 1 }, children: [_jsx(Input, { value: number, onChange: (e) => setNumber(e.target.value), "aria-label": t('dial_pad_phone_number_input_label'), readOnly: mode === 'DTMF' }), mode !== 'DTMF' && (_jsx(Button, { variant: 'primary', onClick: () => onCallButtonClick?.(number), "aria-label": t('dial_pad_call_button_label', [number]), disabled: number.length === 0, children: t('dial_pad_call_button_label') }))] }), _jsx(DialPadKeyboard, { onDialButtonClick: onDialButtonClick, mode: mode })] }));
 });
 export default DialPad;
 //# sourceMappingURL=DialPad.js.map

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

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

@@ -78,10 +78,10 @@ const DialPadKeyboard = forwardRef(({ onDialButtonClick, mode = 'default' }, ref
             if (mode === 'default' || (mode === 'DTMF' && index < 4)) {
                 return (
                 // eslint-disable-next-line react/no-array-index-key
-                _jsx("div", { role: 'row', children: row.map((dialButton) => dialButton.alt === '+' ? (_jsxs(StyledDialButton, { role: 'gridcell', tabIndex: -1, ref: dialButton.ref, value: dialButton.keyCode, ...zeroButtonLongPress, children: [dialButton.sign && _jsx("span", { children: dialButton.sign }, void 0), dialButton.alt && _jsx("span", { children: dialButton.alt }, void 0)] }, dialButton.keyCode)) : (_jsxs(StyledDialButton, { role: 'gridcell', onClick: () => onDialButtonClick(dialButton.keyCode), onKeyDown: handleEnterEvent, tabIndex: dialButton.sign === '1' ? 0 : -1, "aria-label": dialButton.icon ? dialButton.icon : undefined, ref: dialButton.ref, value: dialButton.keyCode, children: [dialButton.sign && _jsx("span", { children: dialButton.sign }, void 0), dialButton.alt && _jsx("span", { children: dialButton.alt }, void 0), dialButton.special && _jsx(StyledSpecial, { children: dialButton.special }, void 0), dialButton.icon && _jsx(Icon, { name: dialButton.icon }, void 0)] }, dialButton.keyCode))) }, `row-${index}`));
+                _jsx("div", { role: 'row', children: row.map((dialButton) => dialButton.alt === '+' ? (_jsxs(StyledDialButton, { role: 'gridcell', tabIndex: -1, ref: dialButton.ref, value: dialButton.keyCode, ...zeroButtonLongPress, children: [dialButton.sign && _jsx("span", { children: dialButton.sign }), dialButton.alt && _jsx("span", { children: dialButton.alt })] }, dialButton.keyCode)) : (_jsxs(StyledDialButton, { role: 'gridcell', onClick: () => onDialButtonClick(dialButton.keyCode), onKeyDown: handleEnterEvent, tabIndex: dialButton.sign === '1' ? 0 : -1, "aria-label": dialButton.icon ? dialButton.icon : undefined, ref: dialButton.ref, value: dialButton.keyCode, children: [dialButton.sign && _jsx("span", { children: dialButton.sign }), dialButton.alt && _jsx("span", { children: dialButton.alt }), dialButton.special && _jsx(StyledSpecial, { children: dialButton.special }), dialButton.icon && _jsx(Icon, { name: dialButton.icon })] }, dialButton.keyCode))) }, `row-${index}`));
             }
             return undefined;
-        }) }, void 0));
+        }) }));
 });
 export default DialPadKeyboard;
 //# sourceMappingURL=DialPadKeyboard.js.map

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 { ForwardProps, Icon, NoChildrenProp, useI18n, useLongPress } from '@pega/cosmos-react-core';\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\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 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 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":"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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 { ForwardProps, Icon, NoChildrenProp, useI18n, useLongPress } from '@pega/cosmos-react-core';\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\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 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 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/IntelligentGuidance/IntelligentGuidance.js CHANGED Viewed

@@ -22,7 +22,7 @@ const IntelligentGuidance = forwardRef(({ items, heading, ...restProps }, ref) =
     const listItems = items.map(item => {
         return {
             id: item.id,
-            visual: _jsx(Icon, { name: item.icon }, void 0),
+            visual: _jsx(Icon, { name: item.icon }),
             primary: item.label,
             secondary: item.type,
             actions: item.onDismiss
@@ -67,9 +67,9 @@ const IntelligentGuidance = forwardRef(({ items, heading, ...restProps }, ref) =
                         setIsCollapsed(prevState => !prevState);
                     }
                 }
-            ], EmptyStateText: t('no_recommendations'), style: { '--headerHeight': `${headerHeight}px` } }, void 0)) : (_jsxs(StyledIntelligentGuidanceButton, { variant: 'simple', "aria-label": t('expand_intelligent_guidance_button_a11y'), icon: true, onClick: () => {
+            ], EmptyStateText: t('no_recommendations'), style: { '--headerHeight': `${headerHeight}px` } })) : (_jsxs(StyledIntelligentGuidanceButton, { variant: 'simple', "aria-label": t('expand_intelligent_guidance_button_a11y'), icon: true, onClick: () => {
                 setIsCollapsed(false);
-            }, children: [_jsx(Icon, { name: 'polaris-solid' }, void 0), _jsx(Count, { children: items.length }, void 0)] }, void 0)) }, void 0));
+            }, children: [_jsx(Icon, { name: 'polaris-solid' }), _jsx(Count, { children: items.length })] })) }));
 });
 export default IntelligentGuidance;
 //# sourceMappingURL=IntelligentGuidance.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAIV,SAAS,EACT,eAAe,EACf,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,IAAI,EACJ,YAAY,EAEZ,OAAO,EACP,KAAK,EACL,aAAa,EACb,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,gBAAgB,MAAM,sEAAsE,CAAC;AAEzG,OAAO,EACL,6BAA6B,EAC7B,yBAAyB,EACzB,+BAA+B,EAChC,MAAM,8BAA8B,CAAC;AAGtC,YAAY,CAAC,gBAAgB,CAAC,CAAC;AAE/B,MAAM,mBAAmB,GAA+D,UAAU,CAChG,CACE,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAA6C,EAC3E,GAAoC,EACpC,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,cAAc,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,aAAa,EAAE,MAAM,IAAI,CAAC,CAAC;QACtD,IAAI,kBAAkB,GAAG,KAAK,CAAC,MAAM,EAAE;YACrC,cAAc,CAAC,KAAK,CAAC,CAAC;SACvB;aAAM,IAAI,kBAAkB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YAC9C,cAAc,CAAC,IAAI,CAAC,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAsB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACpD,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,~~WAAI~~;YACjC,OAAO,EAAE,IAAI,CAAC,KAAK;YACnB,SAAS,EAAE,IAAI,CAAC,IAAI;YACpB,OAAO,EAAE,IAAI,CAAC,SAAS;gBACrB,CAAC,CAAC;oBACE;wBACE,IAAI,EAAE,CAAC,CAAC,oBAAoB,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;wBAC3C,EAAE,EAAE,IAAI,CAAC,EAAE;wBACX,IAAI,EAAE,OAAO;wBACb,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;4BACjB,CAAC,CAAC,eAAe,EAAE,CAAC;4BACpB,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;wBAC1B,CAAC;qBACF;iBACF;gBACH,CAAC,CAAC,SAAS;YACb,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YACxB,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,CAAC;YACX,YAAY,EAAE,CAAC,CAAC,qBAAqB,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACpD,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;gBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACrB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;iBACjB;YACH,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,cAAc,CAAC,OAAO,EAAE;YAC1B,eAAe,CAAC,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC;SACpF;IACH,CAAC,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,KAAC,yBAAyB,OACpB,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,eACH,QAAQ,mBACJ,KAAK,EACnB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,YAEvB,eAAe,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACjC,KAAC,6BAA6B,IAC5B,GAAG,EAAE,cAAc,EACnB,IAAI,EAAC,eAAe,EACpB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,KAAK,CAAC,MAAM,EACnB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,CAAC,CACL,WAAW;wBACT,CAAC,CAAC,yCAAyC;wBAC3C,CAAC,CAAC,2CAA2C,CAChD;oBACD,EAAE,EAAE,2BAA2B;oBAC/B,IAAI,EAAE,YAAY;oBAClB,OAAO;wBACL,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;oBAC1C,CAAC;iBACF;aACF,EACD,cAAc,EAAE,CAAC,CAAC,oBAAoB,CAAC,EACvC,KAAK,EAAE,EAAE,gBAAgB,EAAE,GAAG,YAAY,IAAI,EAAE,~~WAChD~~,CACH,CAAC,CAAC,CAAC,CACF,MAAC,+BAA+B,IAC9B,OAAO,EAAC,QAAQ,gBACJ,CAAC,CAAC,yCAAyC,CAAC,EACxD,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE;gBACZ,cAAc,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,~~WAAG~~,EAC7B,KAAC,KAAK,cAAE,KAAK,CAAC,MAAM,~~WAAS~~,~~YACG~~,CACnC,~~WACyB~~,CAC7B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useEffect,\n useLayoutEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n ForwardProps,\n Icon,\n registerIcon,\n SummaryListItem,\n useI18n,\n Count,\n useBreakpoint,\n usePrevious\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\n\nimport {\n StyledIntelligentGuidanceList,\n StyledIntelligentGuidance,\n StyledIntelligentGuidanceButton\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nregisterIcon(polarisSolidIcon);\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n (\n { items, heading, ...restProps }: PropsWithoutRef<IntelligentGuidanceProps>,\n ref: IntelligentGuidanceProps['ref']\n ) => {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n const [isCollapsed, setIsCollapsed] = useState(true);\n const previousItems = usePrevious(items);\n const summaryListRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const previousItemsCount = previousItems?.length \|\| 0;\n if (previousItemsCount < items.length) {\n setIsCollapsed(false);\n } else if (previousItemsCount && !items.length) {\n setIsCollapsed(true);\n }\n }, [previousItems, items]);\n\n const listItems: SummaryListItem[] = items.map(item => {\n return {\n id: item.id,\n visual: <Icon name={item.icon} />,\n primary: item.label,\n secondary: item.type,\n actions: item.onDismiss\n ? [\n {\n text: t('dismiss_label_a11y', [item.label]),\n id: item.id,\n icon: 'times',\n onClick: (id, e) => {\n e.stopPropagation();\n item.onDismiss?.(id, e);\n }\n }\n ]\n : undefined,\n container: { colGap: 1 },\n role: 'button',\n tabIndex: 0,\n 'aria-label': t('continue_label_a11y', [item.label]),\n onClick: item.onClick,\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n item.onClick(e);\n }\n }\n };\n });\n\n const [headerHeight, setHeaderHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (summaryListRef.current) {\n setHeaderHeight(summaryListRef.current.querySelector('header')?.offsetHeight \|\| 0);\n }\n }, [summaryListRef.current]);\n\n return (\n <StyledIntelligentGuidance\n {...restProps}\n ref={ref}\n role='region'\n aria-live='polite'\n aria-relevant='all'\n isCollapsed={isCollapsed}\n hasItems={!!items.length}\n >\n {isMediumOrAbove \|\| !isCollapsed ? (\n <StyledIntelligentGuidanceList\n ref={summaryListRef}\n icon='polaris-solid'\n name={heading}\n count={items.length}\n items={listItems}\n actions={[\n {\n text: t(\n isCollapsed\n ? 'expand_intelligent_guidance_button_a11y'\n : 'collapse_intelligent_guidance_button_a11y'\n ),\n id: 'IntelligentGuidanceButton',\n icon: 'caret-down',\n onClick() {\n setIsCollapsed(prevState => !prevState);\n }\n }\n ]}\n EmptyStateText={t('no_recommendations')}\n style={{ '--headerHeight': `${headerHeight}px` }}\n />\n ) : (\n <StyledIntelligentGuidanceButton\n variant='simple'\n aria-label={t('expand_intelligent_guidance_button_a11y')}\n icon\n onClick={() => {\n setIsCollapsed(false);\n }}\n >\n <Icon name='polaris-solid' />\n <Count>{items.length}</Count>\n </StyledIntelligentGuidanceButton>\n )}\n </StyledIntelligentGuidance>\n );\n }\n);\n\nexport default IntelligentGuidance;\n"]}
1	+ {"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useEffect,\n useLayoutEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n ForwardProps,\n Icon,\n registerIcon,\n SummaryListItem,\n useI18n,\n Count,\n useBreakpoint,\n usePrevious\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\n\nimport {\n StyledIntelligentGuidanceList,\n StyledIntelligentGuidance,\n StyledIntelligentGuidanceButton\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nregisterIcon(polarisSolidIcon);\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n (\n { items, heading, ...restProps }: PropsWithoutRef<IntelligentGuidanceProps>,\n ref: IntelligentGuidanceProps['ref']\n ) => {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n const [isCollapsed, setIsCollapsed] = useState(true);\n const previousItems = usePrevious(items);\n const summaryListRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const previousItemsCount = previousItems?.length \|\| 0;\n if (previousItemsCount < items.length) {\n setIsCollapsed(false);\n } else if (previousItemsCount && !items.length) {\n setIsCollapsed(true);\n }\n }, [previousItems, items]);\n\n const listItems: SummaryListItem[] = items.map(item => {\n return {\n id: item.id,\n visual: <Icon name={item.icon} />,\n primary: item.label,\n secondary: item.type,\n actions: item.onDismiss\n ? [\n {\n text: t('dismiss_label_a11y', [item.label]),\n id: item.id,\n icon: 'times',\n onClick: (id, e) => {\n e.stopPropagation();\n item.onDismiss?.(id, e);\n }\n }\n ]\n : undefined,\n container: { colGap: 1 },\n role: 'button',\n tabIndex: 0,\n 'aria-label': t('continue_label_a11y', [item.label]),\n onClick: item.onClick,\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n item.onClick(e);\n }\n }\n };\n });\n\n const [headerHeight, setHeaderHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (summaryListRef.current) {\n setHeaderHeight(summaryListRef.current.querySelector('header')?.offsetHeight \|\| 0);\n }\n }, [summaryListRef.current]);\n\n return (\n <StyledIntelligentGuidance\n {...restProps}\n ref={ref}\n role='region'\n aria-live='polite'\n aria-relevant='all'\n isCollapsed={isCollapsed}\n hasItems={!!items.length}\n >\n {isMediumOrAbove \|\| !isCollapsed ? (\n <StyledIntelligentGuidanceList\n ref={summaryListRef}\n icon='polaris-solid'\n name={heading}\n count={items.length}\n items={listItems}\n actions={[\n {\n text: t(\n isCollapsed\n ? 'expand_intelligent_guidance_button_a11y'\n : 'collapse_intelligent_guidance_button_a11y'\n ),\n id: 'IntelligentGuidanceButton',\n icon: 'caret-down',\n onClick() {\n setIsCollapsed(prevState => !prevState);\n }\n }\n ]}\n EmptyStateText={t('no_recommendations')}\n style={{ '--headerHeight': `${headerHeight}px` }}\n />\n ) : (\n <StyledIntelligentGuidanceButton\n variant='simple'\n aria-label={t('expand_intelligent_guidance_button_a11y')}\n icon\n onClick={() => {\n setIsCollapsed(false);\n }}\n >\n <Icon name='polaris-solid' />\n <Count>{items.length}</Count>\n </StyledIntelligentGuidanceButton>\n )}\n </StyledIntelligentGuidance>\n );\n }\n);\n\nexport default IntelligentGuidance;\n"]}

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

@@ -72,7 +72,7 @@ const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
 StyledInteractionNotification.defaultProps = defaultThemeProp;
 const InteractionNotification = forwardRef(({ icon, title, primaryText, secondaryText, status, fields, onAccept }, ref) => {
     const t = useI18n();
-    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') }, void 0), children: _jsx(SummaryItem, { visual: _jsx(Avatar, { shape: 'circle', size: 'm', name: title, icon: icon }, void 0), primary: title }, void 0) }, void 0), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: primaryText }, void 0), secondaryText && _jsx(Text, { variant: 'secondary', children: secondaryText }, void 0), _jsx(Status, { variant: status.variant, children: status.text }, void 0)] }, void 0) }, void 0), fields && fields.length !== 0 && (_jsx(CardFooter, { children: _jsx(FieldValueList, { variant: 'inline', fields: fields }, void 0) }, void 0))] }, void 0));
+    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') }), children: _jsx(SummaryItem, { visual: _jsx(Avatar, { shape: 'circle', size: 'm', name: title, icon: icon }), primary: title }) }), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: primaryText }), secondaryText && _jsx(Text, { variant: 'secondary', children: secondaryText }), _jsx(Status, { variant: status.variant, children: status.text })] }) }), fields && fields.length !== 0 && (_jsx(CardFooter, { children: _jsx(FieldValueList, { variant: 'inline', fields: fields }) }))] }));
 });
 export default InteractionNotification;
 //# sourceMappingURL=InteractionNotification.js.map