@pega/cosmos-react-cs 4.0.0-dev.14.1 → 4.0.0-dev.15.0

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

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

package/lib/components/CallControlPanel/CallControlPanel.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useRef, useState } from 'react';
-import { CardContent, useI18n, registerIcon, Flex, ComboBox, Popover, useOuterEvent, useConsolidatedRef, useEscape, Button, CardHeader, Icon, Text, Banner, hasProp } from '@pega/cosmos-react-core';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { CardContent, useI18n, registerIcon, Flex, ComboBox, useOuterEvent, useConsolidatedRef, useEscape, Button, CardHeader, Icon, Text, Banner, hasProp, getFocusables, useFocusTrap } from '@pega/cosmos-react-core';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
 import Call from './Call';
 import StopWatch from './StopWatch';
 import { StyledCalleePicker, StyledStatusRow } from './CallControlPanel.styles';
@@ -14,18 +15,18 @@ registerIcon(plusIcon);
 const CallControlPanel = forwardRef(({ heading, userStatus, message, draggable = false, calls, onAddCall, contactsList, onFavoriteToggle, visible, interactionTransfer, ...restProps }, ref) => {
     const t = useI18n();
     const newCallButtonRef = useRef(null);
-    const [showPopover, setShowPopover] = useState(false);
+    const [showDialog, setShowDialog] = useState(false);
     const containerRef = useConsolidatedRef(ref);
-    const popoverRef = useRef(null);
-    useOuterEvent('mousedown', [popoverRef], () => {
-        setShowPopover(false);
+    const dialogRef = useRef(null);
+    useOuterEvent('mousedown', [dialogRef], () => {
+        setShowDialog(false);
     });
-    useEscape(() => setShowPopover(false), popoverRef);
+    useEscape(() => setShowDialog(false), dialogRef);
     const selectedStatusOption = userStatus?.statusOptions.find(s => s.id === userStatus.status);
     const newCallButton = {
         id: 'new-call',
         text: t('call_panel_make_new_call'),
-        onClick: () => setShowPopover(true),
+        onClick: () => setShowDialog(true),
         icon: 'plus',
         ref: newCallButtonRef
     };
@@ -33,6 +34,14 @@ const CallControlPanel = forwardRef(({ heading, userStatus, message, draggable =
         contacts: contactsList,
         onFavoriteToggle
     }), [contactsList, onFavoriteToggle]);
+    useFocusTrap(dialogRef);
+    useEffect(() => {
+        if (showDialog) {
+            const focusables = getFocusables(dialogRef);
+            if (focusables[0])
+                focusables[0]?.focus();
+        }
+    }, [showDialog]);
     return (_jsx(ContactsContext.Provider, { value: ctx, children: _jsxs(FloatingPanel, { ...restProps, ref: containerRef, draggable: draggable, visible: visible, heading: heading, actions: onAddCall ? [newCallButton] : undefined, children: [_jsxs(CardContent, { container: { itemGap: 2 }, children: [message && _jsx(Banner, { ...message }), interactionTransfer && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', as: 'span', children: t('call_panel_interaction_transfer_heading') }), _jsxs("div", { children: [_jsx(Button, { variant: 'secondary', onClick: interactionTransfer.onCancel, children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: interactionTransfer.onComplete, children: t('call_panel_interaction_transfer_complete_button_label') })] })] })), userStatus ? (_jsxs(Flex, { as: StyledStatusRow, container: { alignItems: 'start', itemGap: 1 }, children: [_jsx(UserStatusIcon, { variant: 'dot', status: selectedStatusOption?.status }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(ComboBox, { label: t('call_panel_agent_status'), labelHidden: true, selected: {
                                             items: {
                                                 id: userStatus.status,
@@ -43,17 +52,9 @@ const CallControlPanel = forwardRef(({ heading, userStatus, message, draggable =
                                                 return { id, primary: label, selected: id === userStatus.status, disabled };
                                             }),
                                             onItemClick: userStatus.onChange
-                                        } }) }), _jsx(StopWatch, { startTime: userStatus.inStatusSince })] })) : undefined, calls.map(callProps => hasProp(callProps, 'onAcceptCall') ? (_jsx(IncomingCall, { ...callProps }, callProps.id)) : (_jsx(Call, { ...callProps }, callProps.id)))] }), showPopover && (_jsx(Popover, { target: newCallButtonRef.current, ref: popoverRef, placement: 'top-end', modifiers: [
-                        {
-                            name: 'flip',
-                            enabled: true,
-                            options: {
-                                fallbackPlacements: ['bottom-end', 'left', 'right']
-                            }
-                        }
-                    ], children: _jsxs(StyledCalleePicker, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: () => setShowPopover(false), children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_new_call_heading') }) }) }), _jsx(CardContent, { container: { itemGap: 2 }, children: _jsx(CalleePicker, { variant: 'action', onSelection: phoneNumber => {
+                                        } }) }), _jsx(StopWatch, { startTime: userStatus.inStatusSince })] })) : undefined, calls.map(callProps => hasProp(callProps, 'onAcceptCall') ? (_jsx(IncomingCall, { ...callProps }, callProps.id)) : (_jsx(Call, { ...callProps }, callProps.id)))] }), showDialog && newCallButtonRef.current && (_jsx(Dialog, { target: newCallButtonRef.current, ref: dialogRef, placement: 'bottom-end', children: _jsxs(StyledCalleePicker, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: () => setShowDialog(false), children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: t('call_panel_new_call_heading') }) }) }), _jsx(CardContent, { container: { itemGap: 2 }, children: _jsx(CalleePicker, { variant: 'action', onSelection: phoneNumber => {
                                         onAddCall?.(phoneNumber);
-                                        setShowPopover(false);
+                                        setShowDialog(false);
                                     } }) })] }) }))] }) }));
 });
 export default CallControlPanel;

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

@@ -1 +1 @@
-{"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAElG,OAAO,EACL,WAAW,EACX,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,aAAa,EAEb,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAGxF,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,aAA2C,MAAM,iBAAiB,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,OAAO,EACP,UAAU,EACV,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,OAAO,EACP,mBAAmB,EACnB,GAAG,SAAS,EAC2B,EACzC,GAAiC,EACjC,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,gBAAgB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE;QAC5C,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;IAEnD,MAAM,oBAAoB,GAAG,UAAU,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,UAAU,CAAC,MAAM,CAAC,CAAC;IAE7F,MAAM,aAAa,GAA6B;QAC9C,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,CAAC,CAAC,0BAA0B,CAAC;QACnC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC;QACnC,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,gBAAgB;KACtB,CAAC;IAEF,MAAM,GAAG,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,YAAY;QACtB,gBAAgB;KACjB,CAAC,EACF,CAAC,YAAY,EAAE,gBAAgB,CAAC,CACjC,CAAC;IAEF,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YAClC,MAAC,aAAa,OACR,SAAS,EACb,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,aAEhD,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,aACnC,OAAO,IAAI,KAAC,MAAM,OAAK,OAAO,GAAI,EAClC,mBAAmB,IAAI,CACtB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,CAAC,CAAC,yCAAyC,CAAC,GACxC,EACP,0BACE,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,mBAAmB,CAAC,QAAQ,YAC9D,CAAC,CAAC,QAAQ,CAAC,GACL,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,YAC9D,CAAC,CAAC,uDAAuD,CAAC,GACpD,IACL,IACD,CACR,EACA,UAAU,CAAC,CAAC,CAAC,CACZ,MAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,aACvE,KAAC,cAAc,IAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAE,oBAAoB,EAAE,MAAM,GAAI,EACtE,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,QAAQ,IACP,KAAK,EAAE,CAAC,CAAC,yBAAyB,CAAC,EACnC,WAAW,QACX,QAAQ,EAAE;4CACR,KAAK,EAAE;gDACL,EAAE,EAAE,UAAU,CAAC,MAAM;gDACrB,IAAI,EAAE,oBAAoB,EAAE,KAAK,IAAI,UAAU,CAAC,MAAM;6CACvD;yCACF,EACD,IAAI,EAAE;4CACJ,KAAK,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;gDAC9D,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,UAAU,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC;4CAC9E,CAAC,CAAC;4CACF,WAAW,EAAE,UAAU,CAAC,QAAQ;yCACjC,GACD,GACG,EACP,KAAC,SAAS,IAAC,SAAS,EAAE,UAAU,CAAC,aAAa,GAAI,IAC7C,CACR,CAAC,CAAC,CAAC,SAAS,EAEZ,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CACrB,OAAO,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CACnC,KAAC,YAAY,OAAwB,SAAS,IAA3B,SAAS,CAAC,EAAE,CAAmB,CACnD,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OAAwB,SAAS,IAA3B,SAAS,CAAC,EAAE,CAAmB,CAC3C,CACF,IACW,EACb,WAAW,IAAI,CACd,KAAC,OAAO,IACN,MAAM,EAAE,gBAAgB,CAAC,OAAO,EAChC,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;wBACT;4BACE,IAAI,EAAE,MAAM;4BACZ,OAAO,EAAE,IAAI;4BACb,OAAO,EAAE;gCACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;6BACpD;yBACF;qBACF,YAED,MAAC,kBAAkB,eACjB,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,gBACJ,CAAC,CAAC,OAAO,CAAC,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,YAEpC,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,6BAA6B,CAAC,GAAQ,GACvD,GACI,EACb,KAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,YACpC,KAAC,YAAY,IACX,OAAO,EAAC,QAAQ,EAChB,WAAW,EAAE,WAAW,CAAC,EAAE;wCACzB,SAAS,EAAE,CAAC,WAAW,CAAC,CAAC;wCACzB,cAAc,CAAC,KAAK,CAAC,CAAC;oCACxB,CAAC,GACD,GACU,IACK,GACb,CACX,IACa,GACS,CAC5B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useMemo, useRef, useState } from 'react';\n\nimport {\n  CardContent,\n  useI18n,\n  registerIcon,\n  Flex,\n  ComboBox,\n  Popover,\n  useOuterEvent,\n  ForwardProps,\n  useConsolidatedRef,\n  useEscape,\n  Button,\n  CardHeader,\n  Icon,\n  Text,\n  Banner,\n  hasProp\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCalleePicker, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\nimport FloatingPanel, { FloatingPanelActionProps } from './FloatingPanel';\nimport { ContactsContext } from './ContactList';\nimport CalleePicker from './ContactList/CalleePicker';\nimport IncomingCall from './IncomingCall';\n\nregisterIcon(plusIcon);\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      userStatus,\n      message,\n      draggable = false,\n      calls,\n      onAddCall,\n      contactsList,\n      onFavoriteToggle,\n      visible,\n      interactionTransfer,\n      ...restProps\n    }: PropsWithoutRef<CallControlPanelProps>,\n    ref: CallControlPanelProps['ref']\n  ) => {\n    const t = useI18n();\n    const newCallButtonRef = useRef<HTMLButtonElement>(null);\n    const [showPopover, setShowPopover] = useState(false);\n    const containerRef = useConsolidatedRef(ref);\n    const popoverRef = useRef<HTMLDivElement>(null);\n\n    useOuterEvent('mousedown', [popoverRef], () => {\n      setShowPopover(false);\n    });\n\n    useEscape(() => setShowPopover(false), popoverRef);\n\n    const selectedStatusOption = userStatus?.statusOptions.find(s => s.id === userStatus.status);\n\n    const newCallButton: FloatingPanelActionProps = {\n      id: 'new-call',\n      text: t('call_panel_make_new_call'),\n      onClick: () => setShowPopover(true),\n      icon: 'plus',\n      ref: newCallButtonRef\n    };\n\n    const ctx = useMemo(\n      () => ({\n        contacts: contactsList,\n        onFavoriteToggle\n      }),\n      [contactsList, onFavoriteToggle]\n    );\n\n    return (\n      <ContactsContext.Provider value={ctx}>\n        <FloatingPanel\n          {...restProps}\n          ref={containerRef}\n          draggable={draggable}\n          visible={visible}\n          heading={heading}\n          actions={onAddCall ? [newCallButton] : undefined}\n        >\n          <CardContent container={{ itemGap: 2 }}>\n            {message && <Banner {...message} />}\n            {interactionTransfer && (\n              <Flex container={{ direction: 'column', gap: 1 }}>\n                <Text variant='h4' as='span'>\n                  {t('call_panel_interaction_transfer_heading')}\n                </Text>\n                <div>\n                  <Button variant='secondary' onClick={interactionTransfer.onCancel}>\n                    {t('cancel')}\n                  </Button>\n                  <Button variant='primary' onClick={interactionTransfer.onComplete}>\n                    {t('call_panel_interaction_transfer_complete_button_label')}\n                  </Button>\n                </div>\n              </Flex>\n            )}\n            {userStatus ? (\n              <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n                <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n                <Flex item={{ grow: 1 }}>\n                  <ComboBox\n                    label={t('call_panel_agent_status')}\n                    labelHidden\n                    selected={{\n                      items: {\n                        id: userStatus.status,\n                        text: selectedStatusOption?.label || userStatus.status\n                      }\n                    }}\n                    menu={{\n                      items: userStatus.statusOptions.map(({ id, label, disabled }) => {\n                        return { id, primary: label, selected: id === userStatus.status, disabled };\n                      }),\n                      onItemClick: userStatus.onChange\n                    }}\n                  />\n                </Flex>\n                <StopWatch startTime={userStatus.inStatusSince} />\n              </Flex>\n            ) : undefined}\n\n            {calls.map(callProps =>\n              hasProp(callProps, 'onAcceptCall') ? (\n                <IncomingCall key={callProps.id} {...callProps} />\n              ) : (\n                <Call key={callProps.id} {...callProps} />\n              )\n            )}\n          </CardContent>\n          {showPopover && (\n            <Popover\n              target={newCallButtonRef.current}\n              ref={popoverRef}\n              placement='top-end'\n              modifiers={[\n                {\n                  name: 'flip',\n                  enabled: true,\n                  options: {\n                    fallbackPlacements: ['bottom-end', 'left', 'right']\n                  }\n                }\n              ]}\n            >\n              <StyledCalleePicker>\n                <CardHeader\n                  actions={\n                    <Button\n                      icon\n                      variant='simple'\n                      aria-label={t('close')}\n                      onClick={() => setShowPopover(false)}\n                    >\n                      <Icon name='times' />\n                    </Button>\n                  }\n                >\n                  <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n                    <Text variant='h3'>{t('call_panel_new_call_heading')}</Text>\n                  </Flex>\n                </CardHeader>\n                <CardContent container={{ itemGap: 2 }}>\n                  <CalleePicker\n                    variant='action'\n                    onSelection={phoneNumber => {\n                      onAddCall?.(phoneNumber);\n                      setShowPopover(false);\n                    }}\n                  />\n                </CardContent>\n              </StyledCalleePicker>\n            </Popover>\n          )}\n        </FloatingPanel>\n      </ContactsContext.Provider>\n    );\n  }\n);\n\nexport default CallControlPanel;\n"]}
+{"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  CardContent,\n  useI18n,\n  registerIcon,\n  Flex,\n  ComboBox,\n  useOuterEvent,\n  ForwardProps,\n  useConsolidatedRef,\n  useEscape,\n  Button,\n  CardHeader,\n  Icon,\n  Text,\n  Banner,\n  hasProp,\n  getFocusables,\n  useFocusTrap\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\n\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCalleePicker, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\nimport FloatingPanel, { FloatingPanelActionProps } from './FloatingPanel';\nimport { ContactsContext } from './ContactList';\nimport CalleePicker from './ContactList/CalleePicker';\nimport IncomingCall from './IncomingCall';\n\nregisterIcon(plusIcon);\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      userStatus,\n      message,\n      draggable = false,\n      calls,\n      onAddCall,\n      contactsList,\n      onFavoriteToggle,\n      visible,\n      interactionTransfer,\n      ...restProps\n    }: PropsWithoutRef<CallControlPanelProps>,\n    ref: CallControlPanelProps['ref']\n  ) => {\n    const t = useI18n();\n    const newCallButtonRef = useRef<HTMLButtonElement>(null);\n    const [showDialog, setShowDialog] = useState(false);\n    const containerRef = useConsolidatedRef(ref);\n    const dialogRef = useRef<HTMLDivElement>(null);\n\n    useOuterEvent('mousedown', [dialogRef], () => {\n      setShowDialog(false);\n    });\n\n    useEscape(() => setShowDialog(false), dialogRef);\n\n    const selectedStatusOption = userStatus?.statusOptions.find(s => s.id === userStatus.status);\n\n    const newCallButton: FloatingPanelActionProps = {\n      id: 'new-call',\n      text: t('call_panel_make_new_call'),\n      onClick: () => setShowDialog(true),\n      icon: 'plus',\n      ref: newCallButtonRef\n    };\n\n    const ctx = useMemo(\n      () => ({\n        contacts: contactsList,\n        onFavoriteToggle\n      }),\n      [contactsList, onFavoriteToggle]\n    );\n\n    useFocusTrap(dialogRef);\n\n    useEffect(() => {\n      if (showDialog) {\n        const focusables = getFocusables(dialogRef);\n        if (focusables[0]) focusables[0]?.focus();\n      }\n    }, [showDialog]);\n\n    return (\n      <ContactsContext.Provider value={ctx}>\n        <FloatingPanel\n          {...restProps}\n          ref={containerRef}\n          draggable={draggable}\n          visible={visible}\n          heading={heading}\n          actions={onAddCall ? [newCallButton] : undefined}\n        >\n          <CardContent container={{ itemGap: 2 }}>\n            {message && <Banner {...message} />}\n            {interactionTransfer && (\n              <Flex container={{ direction: 'column', gap: 1 }}>\n                <Text variant='h4' as='span'>\n                  {t('call_panel_interaction_transfer_heading')}\n                </Text>\n                <div>\n                  <Button variant='secondary' onClick={interactionTransfer.onCancel}>\n                    {t('cancel')}\n                  </Button>\n                  <Button variant='primary' onClick={interactionTransfer.onComplete}>\n                    {t('call_panel_interaction_transfer_complete_button_label')}\n                  </Button>\n                </div>\n              </Flex>\n            )}\n            {userStatus ? (\n              <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n                <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n                <Flex item={{ grow: 1 }}>\n                  <ComboBox\n                    label={t('call_panel_agent_status')}\n                    labelHidden\n                    selected={{\n                      items: {\n                        id: userStatus.status,\n                        text: selectedStatusOption?.label || userStatus.status\n                      }\n                    }}\n                    menu={{\n                      items: userStatus.statusOptions.map(({ id, label, disabled }) => {\n                        return { id, primary: label, selected: id === userStatus.status, disabled };\n                      }),\n                      onItemClick: userStatus.onChange\n                    }}\n                  />\n                </Flex>\n                <StopWatch startTime={userStatus.inStatusSince} />\n              </Flex>\n            ) : undefined}\n\n            {calls.map(callProps =>\n              hasProp(callProps, 'onAcceptCall') ? (\n                <IncomingCall key={callProps.id} {...callProps} />\n              ) : (\n                <Call key={callProps.id} {...callProps} />\n              )\n            )}\n          </CardContent>\n          {showDialog && newCallButtonRef.current && (\n            <Dialog target={newCallButtonRef.current} ref={dialogRef} placement='bottom-end'>\n              <StyledCalleePicker>\n                <CardHeader\n                  actions={\n                    <Button\n                      icon\n                      variant='simple'\n                      aria-label={t('close')}\n                      onClick={() => setShowDialog(false)}\n                    >\n                      <Icon name='times' />\n                    </Button>\n                  }\n                >\n                  <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n                    <Text variant='h3'>{t('call_panel_new_call_heading')}</Text>\n                  </Flex>\n                </CardHeader>\n                <CardContent container={{ itemGap: 2 }}>\n                  <CalleePicker\n                    variant='action'\n                    onSelection={phoneNumber => {\n                      onAddCall?.(phoneNumber);\n                      setShowDialog(false);\n                    }}\n                  />\n                </CardContent>\n              </StyledCalleePicker>\n            </Dialog>\n          )}\n        </FloatingPanel>\n      </ContactsContext.Provider>\n    );\n  }\n);\n\nexport default CallControlPanel;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAGjB,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAQL,YAAY,EAGZ,MAAM,EACN,QAAQ,EAIT,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACjB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,4CAA4C;IAC5C,IAAI,EAAE,QAAQ,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,yCAAyC;IACzC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACrC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB;iBACjB,OAAO;;;SAsCpB,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA6EvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FloatingPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAGjB,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAQL,YAAY,EAGZ,MAAM,EACN,QAAQ,EAIT,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACjB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,4CAA4C;IAC5C,IAAI,EAAE,QAAQ,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,yCAAyC;IACzC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACrC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB;iBACjB,OAAO;;;SAsCpB,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA8EvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/CallControlPanel/FloatingPanel.js

@@ -60,7 +60,7 @@ const FloatingPanel = forwardRef(({ heading, actions = [], draggable, children,
             setHeaderHeight(containerRef.current.querySelector('header')?.offsetHeight || 0);
         }
     }, [collapsed]);
-    return (_jsxs(StyledFloatingPanel, { ...restProps, ref: containerRef, isCollapsed: collapsed, isDraggable: draggable, isVisible: visible, style: { '--headerHeight': `${headerHeight}px` }, children: [_jsx(CardHeader, { ref: dragRef, actions: _jsxs(_Fragment, { children: [actions.map(({ id, icon, text, onClick, ...restAction }) => (_createElement(Button, { ...restAction, icon: true, variant: 'simple', key: id, label: text, onClick: (e) => {
+    return (_jsxs(StyledFloatingPanel, { ...restProps, ref: containerRef, isCollapsed: collapsed, isDraggable: draggable, isVisible: visible, "data-app-region": true, style: { '--headerHeight': `${headerHeight}px` }, children: [_jsx(CardHeader, { ref: dragRef, actions: _jsxs(_Fragment, { children: [actions.map(({ id, icon, text, onClick, ...restAction }) => (_createElement(Button, { ...restAction, icon: true, variant: 'simple', key: id, label: text, onClick: (e) => {
                                 onClick?.(id, e);
                             } },
                             _jsx(Icon, { name: icon })))), _jsx(Button, { icon: true, variant: 'simple', label: t(collapsed ? 'call_panel_expand' : 'call_panel_collapse'), onClick: () => {

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

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

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

@@ -0,0 +1,15 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { ButtonProps, ForwardProps } from '@pega/cosmos-react-core';
+export interface CountdownButtonProps extends ButtonProps {
+    /** Text or content for the Button. */
+    children: ReactNode;
+    /** Start time of incoming Interaction. */
+    startTime: Date | number;
+    /** The time the user has to accept the call in seconds. */
+    timeout: number;
+    /** Callback invoked when timeout ends. */
+    onTimerEnd?: () => void;
+}
+declare const CountdownButton: FunctionComponent<CountdownButtonProps & ForwardProps>;
+export default CountdownButton;
+//# sourceMappingURL=CountdownButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,SAAS,EAAuB,MAAM,OAAO,CAAC;AAGhF,OAAO,EAOL,WAAW,EACX,YAAY,EACb,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAUD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAwD3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/InteractionNotification/{AcceptButton.js → CountdownButton.js}

@@ -7,7 +7,7 @@ const StyledAcceptButton = styled(Button)(({ theme }) => css `
     gap: ${theme.base.spacing};
   `);
 StyledAcceptButton.defaultProps = defaultThemeProp;
-const AcceptButton = memo(({ startTime, timeout, onTimerEnd, onClick }) => {
+const CountdownButton = memo(({ startTime, timeout, onTimerEnd, children, ...restProps }) => {
     const timeoutMs = timeout * 1000;
     const start = Number(startTime);
     const endTime = start + timeoutMs;
@@ -32,11 +32,11 @@ const AcceptButton = memo(({ startTime, timeout, onTimerEnd, onClick }) => {
     // The proper definition will be captured and used with any changes to msRemaining.
     [msRemaining]);
     const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';
-    return (_jsxs(_Fragment, { children: [_jsxs(StyledAcceptButton, { variant: 'primary', "aria-describedby": descriptionId, onClick: onClick, children: [t('accept'), _jsx(Text, { "aria-hidden": 'true', children: timer })] }), _jsx(VisuallyHiddenText, { "aria-hidden": 'true', id: descriptionId, children: msRemaining > 0
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledAcceptButton, { ...restProps, "aria-describedby": descriptionId, children: [children, _jsx(Text, { "aria-hidden": 'true', children: timer })] }), _jsx(VisuallyHiddenText, { "aria-hidden": 'true', id: descriptionId, children: msRemaining > 0
                     ? t('interaction_time_remaining', [secondsRemaining], {
                         count: secondsRemaining
                     })
                     : t('interaction_time_expired') })] }));
 });
-export default AcceptButton;
-//# sourceMappingURL=AcceptButton.js.map
+export default CountdownButton;
+//# sourceMappingURL=CountdownButton.js.map

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

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

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

@@ -1,6 +1,6 @@
 import { FunctionComponent, Ref } from 'react';
 import { StatusProps, ForwardProps, FieldValueListProps, NoChildrenProp } from '@pega/cosmos-react-core';
-import { AcceptButtonProps } from './AcceptButton';
+import { CountdownButtonProps } from './CountdownButton';
 export interface InteractionNotificationProps extends NoChildrenProp {
     /** Ref to Component. */
     ref?: Ref<HTMLDivElement>;
@@ -21,9 +21,9 @@ export interface InteractionNotificationProps extends NoChildrenProp {
     fields?: FieldValueListProps['fields'];
     /** Timeout definition */
     incomingNotificationTimeout?: {
-        startTime: AcceptButtonProps['startTime'];
-        answerTimeout: AcceptButtonProps['timeout'];
-        onTimerEnd?: AcceptButtonProps['onTimerEnd'];
+        startTime: CountdownButtonProps['startTime'];
+        answerTimeout: CountdownButtonProps['timeout'];
+        onTimerEnd?: CountdownButtonProps['onTimerEnd'];
     };
     /** Callback when accept button is clicked. */
     onAccept: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAa,MAAM,OAAO,CAAC;AAGvF,OAAO,EAOL,WAAW,EACX,YAAY,EASZ,mBAAmB,EAEnB,cAAc,EAIf,MAAM,yBAAyB,CAAC;AAKjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC1C,aAAa,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAC5C,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;KAC9C,CAAC;IACF,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAmED,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CA8EzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAqB,MAAM,OAAO,CAAC;AAG/F,OAAO,EAOL,WAAW,EACX,YAAY,EAQZ,mBAAmB,EAEnB,cAAc,EASf,MAAM,yBAAyB,CAAC;AAMjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAC7C,aAAa,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;KACjD,CAAC;IACF,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAgGD,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CAyGzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}

package/lib/components/InteractionNotification/InteractionNotification.js

@@ -1,18 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, CardFooter, StyledFieldValueList, StyledButton, useI18n, useDirection, Icon, StyledLabel, useLiveLog } from '@pega/cosmos-react-core';
+import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldValueList, StyledButton, useI18n, useDirection, Icon, StyledLabel, useLiveLog, registerAction, useShortcut, focusHeadingOrContainer, useConsolidatedRef, useEscape } from '@pega/cosmos-react-core';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
-import AcceptButton from './AcceptButton';
+import { StyledKeyboard } from '@pega/cosmos-react-core/lib/components/Badges/Keyboard';
+import CountdownButton from './CountdownButton';
 const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
     const { rtl } = useDirection();
     return css `
     position: fixed;
-    inset-inline-end: 1rem;
-    inset-block-start: 4rem;
-    width: clamp(21.5rem, calc(100% - 2rem), 25rem);
+    inset-block-start: calc(2 * ${base.spacing});
+    inset-inline-end: calc(2 * ${base.spacing});
+    width: min(calc(100% - 2rem), ${base['content-width'].md});
+    max-height: calc(100vh - 2rem);
     z-index: ${base['z-index'].modal};
     color: ${base.colors.white};
     animation: SlideIn calc(4 * ${base.animation.speed});
@@ -46,6 +48,7 @@ const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
 
     ${StyledCardContent} {
       margin: calc(2 * ${base.spacing}) 0;
+      overflow: auto;
 
       ${StyledText} {
         color: ${base.colors.white};
@@ -66,20 +69,60 @@ const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
         color: ${base.colors.white};
       }
     }
+
+    @media (min-width: calc(${base.breakpoints.md})) {
+      inset-block-start: calc(8 * ${base.spacing});
+      max-height: initial;
+    }
+
+    ${StyledCardFooter} {
+      ${StyledKeyboard} {
+        border-color: ${base.colors.gray.medium};
+        inset-block-start: unset;
+
+        &:first-of-type {
+          margin-inline: ${base.spacing};
+        }
+      }
+    }
   `;
 });
 StyledInteractionNotification.defaultProps = defaultThemeProp;
+registerAction({
+    id: 'GoToIncomingInteraction',
+    defaultKeyBinding: 'Alt+Enter'
+}, {
+    id: 'DismissIncomingInteraction',
+    defaultKeyBinding: 'Alt+Q'
+});
 const InteractionNotification = forwardRef(({ icon, title, primaryText, secondaryText, status, fields, incomingNotificationTimeout, onAccept, onDecline }, ref) => {
     const t = useI18n();
     const { announceAssertive } = useLiveLog();
+    const containerRef = useConsolidatedRef(ref);
+    const returnRef = useRef();
+    const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {
+        if (containerRef.current) {
+            returnRef.current = document.activeElement ?? undefined;
+            focusHeadingOrContainer(containerRef.current, title);
+        }
+    });
+    const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {
+        onDecline?.();
+    });
+    useEscape(() => {
+        returnRef.current?.focus();
+        onDecline?.();
+    }, containerRef.current, [onDecline]);
     useEffect(() => {
         announceAssertive({
-            message: `${title} ${primaryText} ${t('status')} ${status.text}`,
+            message: `${title} ${primaryText} ${t('status')} ${status.text}. ${goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''}${dismissBinding && onDecline
+                ? t('interaction_shortcut_dismiss_info', [dismissBinding])
+                : ''}`,
             type: 'alert'
         });
     }, []);
-    const acceptButton = incomingNotificationTimeout ? (_jsx(AcceptButton, { startTime: incomingNotificationTimeout.startTime, timeout: incomingNotificationTimeout.answerTimeout, onTimerEnd: incomingNotificationTimeout.onTimerEnd ?? onDecline, onClick: onAccept })) : (_jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') }));
-    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', children: title })] }) }), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', as: 'span', children: primaryText }), secondaryText && (_jsx(Text, { variant: 'h5', as: 'span', children: secondaryText })), _jsx(Status, { variant: status.variant, children: status.text })] }) }), fields && fields.length !== 0 && (_jsx(CardFooter, { justify: 'between', children: _jsx(FieldValueList, { variant: 'inline', fields: fields }) })), onDecline ? (_jsxs(Flex, { as: StyledCardFooter, container: { direction: 'row', justify: 'between' }, children: [_jsx(Button, { onClick: onDecline, children: t('decline') }), acceptButton] })) : (_jsx(Flex, { as: StyledCardFooter, container: { direction: 'row-reverse' }, children: acceptButton }))] }));
+    const acceptButton = incomingNotificationTimeout ? (_jsx(CountdownButton, { variant: 'primary', onClick: onAccept, startTime: incomingNotificationTimeout.startTime, timeout: incomingNotificationTimeout.answerTimeout, onTimerEnd: incomingNotificationTimeout.onTimerEnd ?? onDecline, children: t('accept') })) : (_jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') }));
+    return (_jsxs(StyledInteractionNotification, { ref: containerRef, "data-app-region": true, children: [_jsx(CardHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', children: title })] }) }), _jsxs(CardContent, { container: { gap: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', as: 'span', children: primaryText }), secondaryText && (_jsx(Text, { variant: 'h5', as: 'span', children: secondaryText })), _jsx(Status, { variant: status.variant, children: status.text })] }), fields && fields.length !== 0 && _jsx(FieldValueList, { variant: 'inline', fields: fields })] }), onDecline ? (_jsxs(Flex, { as: StyledCardFooter, container: { direction: 'row', justify: 'between' }, children: [_jsx(Button, { onClick: onDecline, children: t('decline') }), acceptButton] })) : (_jsx(Flex, { as: StyledCardFooter, container: { direction: 'row-reverse' }, children: acceptButton }))] }));
 });
 export default InteractionNotification;
 //# sourceMappingURL=InteractionNotification.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  FieldValueList,\n  CardFooter,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp,\n  Icon,\n  StyledLabel,\n  useLiveLog\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nimport AcceptButton, { AcceptButtonProps } from './AcceptButton';\n\nexport interface InteractionNotificationProps extends NoChildrenProp {\n  /** Ref to Component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Name of the icon used in header. */\n  icon: string;\n  /** Interaction title. */\n  title: string;\n  /** Primary information of the notification. For example caller name . */\n  primaryText: string;\n  /** Secondary information of the notification. For example phone number of the caller */\n  secondaryText?: string;\n  /** Represents the current status of interaction. */\n  status: { variant: StatusProps['variant']; text: string };\n  /** Information structured as field values to be displayed below main section. */\n  fields?: FieldValueListProps['fields'];\n  /** Timeout definition */\n  incomingNotificationTimeout?: {\n    startTime: AcceptButtonProps['startTime'];\n    answerTimeout: AcceptButtonProps['timeout'];\n    onTimerEnd?: AcceptButtonProps['onTimerEnd'];\n  };\n  /** Callback when accept button is clicked. */\n  onAccept: () => void;\n  /** Callback when decline button is clicked. */\n  onDecline?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-inline-end: 1rem;\n    inset-block-start: 4rem;\n    width: clamp(21.5rem, calc(100% - 2rem), 25rem);\n    z-index: ${base['z-index'].modal};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n\n    &:not(& &) {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardHeader} {\n      ${StyledButton} {\n        margin-inline-start: calc(2 * ${base.spacing});\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n\n      ${StyledText} {\n        color: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledFieldValueList} {\n      border-top: solid 0.0625rem ${base.colors.gray.medium};\n      padding-top: calc(2 * ${base.spacing});\n      color: ${base.colors.white};\n\n      ${StyledLabel} {\n        color: ${base.colors.white};\n      }\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        icon,\n        title,\n        primaryText,\n        secondaryText,\n        status,\n        fields,\n        incomingNotificationTimeout,\n        onAccept,\n        onDecline\n      }: PropsWithoutRef<InteractionNotificationProps>,\n      ref: InteractionNotificationProps['ref']\n    ) => {\n      const t = useI18n();\n      const { announceAssertive } = useLiveLog();\n\n      useEffect(() => {\n        announceAssertive({\n          message: `${title} ${primaryText} ${t('status')} ${status.text}`,\n          type: 'alert'\n        });\n      }, []);\n\n      const acceptButton = incomingNotificationTimeout ? (\n        <AcceptButton\n          startTime={incomingNotificationTimeout.startTime}\n          timeout={incomingNotificationTimeout.answerTimeout}\n          onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDecline}\n          onClick={onAccept}\n        />\n      ) : (\n        <Button variant='primary' onClick={onAccept}>\n          {t('accept')}\n        </Button>\n      );\n\n      return (\n        <StyledInteractionNotification ref={ref}>\n          <CardHeader>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              <Icon name={icon} />\n              <Text variant='h2'>{title}</Text>\n            </Flex>\n          </CardHeader>\n          <CardContent>\n            <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n              <Text variant='h1' as='span'>\n                {primaryText}\n              </Text>\n              {secondaryText && (\n                <Text variant='h5' as='span'>\n                  {secondaryText}\n                </Text>\n              )}\n              <Status variant={status.variant}>{status.text}</Status>\n            </Flex>\n          </CardContent>\n          {fields && fields.length !== 0 && (\n            <CardFooter justify='between'>\n              <FieldValueList variant='inline' fields={fields} />\n            </CardFooter>\n          )}\n          {onDecline ? (\n            <Flex as={StyledCardFooter} container={{ direction: 'row', justify: 'between' }}>\n              <Button onClick={onDecline}>{t('decline')}</Button>\n              {acceptButton}\n            </Flex>\n          ) : (\n            <Flex as={StyledCardFooter} container={{ direction: 'row-reverse' }}>\n              {acceptButton}\n            </Flex>\n          )}\n        </StyledInteractionNotification>\n      );\n    }\n  );\n\nexport default InteractionNotification;\n"]}
+{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useEffect, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  FieldValueList,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp,\n  Icon,\n  StyledLabel,\n  useLiveLog,\n  registerAction,\n  useShortcut,\n  focusHeadingOrContainer,\n  useConsolidatedRef,\n  useEscape\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\nimport { StyledKeyboard } from '@pega/cosmos-react-core/lib/components/Badges/Keyboard';\n\nimport CountdownButton, { CountdownButtonProps } from './CountdownButton';\n\nexport interface InteractionNotificationProps extends NoChildrenProp {\n  /** Ref to Component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Name of the icon used in header. */\n  icon: string;\n  /** Interaction title. */\n  title: string;\n  /** Primary information of the notification. For example caller name . */\n  primaryText: string;\n  /** Secondary information of the notification. For example phone number of the caller */\n  secondaryText?: string;\n  /** Represents the current status of interaction. */\n  status: { variant: StatusProps['variant']; text: string };\n  /** Information structured as field values to be displayed below main section. */\n  fields?: FieldValueListProps['fields'];\n  /** Timeout definition */\n  incomingNotificationTimeout?: {\n    startTime: CountdownButtonProps['startTime'];\n    answerTimeout: CountdownButtonProps['timeout'];\n    onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n  };\n  /** Callback when accept button is clicked. */\n  onAccept: () => void;\n  /** Callback when decline button is clicked. */\n  onDecline?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-block-start: calc(2 * ${base.spacing});\n    inset-inline-end: calc(2 * ${base.spacing});\n    width: min(calc(100% - 2rem), ${base['content-width'].md});\n    max-height: calc(100vh - 2rem);\n    z-index: ${base['z-index'].modal};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n\n    &:not(& &) {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardHeader} {\n      ${StyledButton} {\n        margin-inline-start: calc(2 * ${base.spacing});\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n      overflow: auto;\n\n      ${StyledText} {\n        color: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledFieldValueList} {\n      border-top: solid 0.0625rem ${base.colors.gray.medium};\n      padding-top: calc(2 * ${base.spacing});\n      color: ${base.colors.white};\n\n      ${StyledLabel} {\n        color: ${base.colors.white};\n      }\n    }\n\n    @media (min-width: calc(${base.breakpoints.md})) {\n      inset-block-start: calc(8 * ${base.spacing});\n      max-height: initial;\n    }\n\n    ${StyledCardFooter} {\n      ${StyledKeyboard} {\n        border-color: ${base.colors.gray.medium};\n        inset-block-start: unset;\n\n        &:first-of-type {\n          margin-inline: ${base.spacing};\n        }\n      }\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n  {\n    id: 'GoToIncomingInteraction',\n    defaultKeyBinding: 'Alt+Enter'\n  },\n  {\n    id: 'DismissIncomingInteraction',\n    defaultKeyBinding: 'Alt+Q'\n  }\n);\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        icon,\n        title,\n        primaryText,\n        secondaryText,\n        status,\n        fields,\n        incomingNotificationTimeout,\n        onAccept,\n        onDecline\n      }: PropsWithoutRef<InteractionNotificationProps>,\n      ref: InteractionNotificationProps['ref']\n    ) => {\n      const t = useI18n();\n      const { announceAssertive } = useLiveLog();\n      const containerRef = useConsolidatedRef(ref);\n      const returnRef = useRef<HTMLElement>();\n\n      const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n        if (containerRef.current) {\n          returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n          focusHeadingOrContainer(containerRef.current, title);\n        }\n      });\n      const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n        onDecline?.();\n      });\n\n      useEscape(\n        () => {\n          returnRef.current?.focus();\n          onDecline?.();\n        },\n        containerRef.current,\n        [onDecline]\n      );\n\n      useEffect(() => {\n        announceAssertive({\n          message: `${title} ${primaryText} ${t('status')} ${status.text}. ${\n            goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n          }${\n            dismissBinding && onDecline\n              ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n              : ''\n          }`,\n          type: 'alert'\n        });\n      }, []);\n\n      const acceptButton = incomingNotificationTimeout ? (\n        <CountdownButton\n          variant='primary'\n          onClick={onAccept}\n          startTime={incomingNotificationTimeout.startTime}\n          timeout={incomingNotificationTimeout.answerTimeout}\n          onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDecline}\n        >\n          {t('accept')}\n        </CountdownButton>\n      ) : (\n        <Button variant='primary' onClick={onAccept}>\n          {t('accept')}\n        </Button>\n      );\n\n      return (\n        <StyledInteractionNotification ref={containerRef} data-app-region>\n          <CardHeader>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              <Icon name={icon} />\n              <Text variant='h2'>{title}</Text>\n            </Flex>\n          </CardHeader>\n          <CardContent container={{ gap: 2 }}>\n            <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n              <Text variant='h1' as='span'>\n                {primaryText}\n              </Text>\n              {secondaryText && (\n                <Text variant='h5' as='span'>\n                  {secondaryText}\n                </Text>\n              )}\n              <Status variant={status.variant}>{status.text}</Status>\n            </Flex>\n            {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n          </CardContent>\n\n          {onDecline ? (\n            <Flex as={StyledCardFooter} container={{ direction: 'row', justify: 'between' }}>\n              <Button onClick={onDecline}>{t('decline')}</Button>\n              {acceptButton}\n            </Flex>\n          ) : (\n            <Flex as={StyledCardFooter} container={{ direction: 'row-reverse' }}>\n              {acceptButton}\n            </Flex>\n          )}\n        </StyledInteractionNotification>\n      );\n    }\n  );\n\nexport default InteractionNotification;\n"]}

package/lib/components/Picker/Picker.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAcL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAqF5F,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAmMzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Picker/Picker.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Button, Flex, Icon, Menu, menuHelpers, EmptyState, SearchInput, Text, useI18n, Switch, useArrows, registerIcon, getFocusables, createStringMatcher, Grid } from '@pega/cosmos-react-core';
+import { DragDropList, DragDropManager } from '@pega/cosmos-react-dnd';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import * as dragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';
+import * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';
+import { StyledSelectedItemsWrapper, StyledSummaryItem, StyledDragHandle, StyledPickerContent, StyledSelectedItems } from './Picker.styles';
+registerIcon(timesIcon, dragIcon, trashIcon);
+const SelectedItem = ({ previewRef, dragRef, onRemoveSelection, id, primary, secondary }) => {
+    const t = useI18n();
+    return (_jsx("li", { children: _jsx(StyledSummaryItem, { ...(previewRef && { ref: previewRef }), visual: dragRef ? (_jsx(StyledDragHandle, { ref: dragRef, children: _jsx(Icon, { name: 'drag' }) })) : undefined, primary: primary, secondary: secondary, actions: _jsx(Button, { variant: 'simple', icon: true, "aria-label": t('delete_noun', [primary]), label: t('delete'), onClick: () => onRemoveSelection?.(id), children: _jsx(Icon, { name: 'trash' }) }) }) }));
+};
+const selectedItemRenderer = ({ dragRef, previewRef, data, onRemoveSelection }) => (_jsx(SelectedItem, { dragRef: dragRef, previewRef: previewRef, onRemoveSelection: onRemoveSelection, ...data }));
+const DraggableSelectedList = ({ selectedItems, onChange, itemRenderer }) => {
+    return (_jsx(DragDropManager, { children: _jsx(DragDropList, { as: StyledSelectedItems, accept: 'picker-selection', items: selectedItems.map(item => ({
+                id: item.id,
+                type: 'picker-selection',
+                data: item
+            })), itemRenderer: itemRenderer, onChange: onChange }) }));
+};
+const Picker = forwardRef(({ items, multiSelect = false, onModeToggle, contextualLabel, reorderSelections = false, selections, onSelectionChange, handle }, ref) => {
+    const t = useI18n();
+    const [searchInput, setSearchInput] = useState('');
+    const filterRegex = createStringMatcher(searchInput);
+    const searchEleRef = useRef(null);
+    const selectedItemsWrapperRef = useRef(null);
+    const switchRef = useRef(null);
+    useImperativeHandle(handle, () => ({
+        focusToggleSwitch: () => {
+            switchRef.current?.focus();
+        }
+    }));
+    const renderItems = useMemo(() => {
+        return menuHelpers.mapTree(searchInput
+            ? menuHelpers.flatten(items).filter(({ primary, items: childItems }) => {
+                return filterRegex.test(primary) && !childItems?.length;
+            })
+            : items, item => {
+            let selectable = false;
+            if (!item.items) {
+                selectable = true;
+            }
+            return {
+                ...item,
+                selected: selectable ? !!menuHelpers.getItem(selections, item.id) : undefined
+            };
+        });
+    }, [selections, searchInput, items, filterRegex]);
+    const removeSelectedItem = useCallback((uid) => {
+        const itemToRemove = menuHelpers.getItem(selections, uid);
+        onSelectionChange(selections.filter(item => item.id !== itemToRemove?.id));
+        // 0 second timeout added because DOM needs to be up to date after list is updated before running query
+        // setting the focus to the first element in the list on deletion and if empty then to search input
+        setTimeout(() => {
+            const focusable = getFocusables(selectedItemsWrapperRef);
+            if (focusable.length > 0)
+                focusable[0].focus();
+            else
+                searchEleRef.current?.focus();
+        }, 0);
+    }, [selections]);
+    useArrows(selectedItemsWrapperRef, {
+        selector: 'button',
+        dir: 'up-down'
+    }, [selections.length]);
+    const selectedItems = useMemo(() => {
+        return reorderSelections ? (_jsx(DraggableSelectedList, { selectedItems: selections, onChange: newItems => {
+                onSelectionChange(newItems.map(({ type, data }) => ({
+                    ...data,
+                    type
+                })));
+            }, itemRenderer: props => selectedItemRenderer({ ...props, onRemoveSelection: removeSelectedItem }) })) : (_jsx(StyledSelectedItems, { children: selections.map(({ id, primary, secondary }) => (_jsx(SelectedItem, { id: id, primary: primary, secondary: secondary, onRemoveSelection: removeSelectedItem }, id))) }));
+    }, [selections, reorderSelections, removeSelectedItem]);
+    const searchAndSwitch = (_jsxs(Flex, { container: { direction: 'column', gap: 1, pad: [0.5, 1] }, children: [_jsx(SearchInput, { ref: searchEleRef, value: searchInput, onSearchChange: setSearchInput, placeholder: t('search_picker_items', [contextualLabel]), autoFocus: true }), onModeToggle && (_jsx(Switch, { label: t('select_multiple'), on: multiSelect, onChange: onModeToggle, ref: switchRef }))] }));
+    const availableItems = (_jsx(Menu, { items: renderItems, role: 'listbox', onItemClick: (uid) => {
+            const clickedItem = menuHelpers.getItem(renderItems, uid);
+            const parentItem = clickedItem?.ancestors
+                ? clickedItem.ancestors[0]
+                : menuHelpers.getParentItem(renderItems, uid);
+            if (!clickedItem)
+                return;
+            if (multiSelect) {
+                searchEleRef.current?.focus();
+                if (selections.find(item => item.id === uid)) {
+                    onSelectionChange(selections.filter(item => item.id !== clickedItem?.id));
+                }
+                else {
+                    let secondary;
+                    if (parentItem)
+                        secondary = menuHelpers.isItem(parentItem) ? parentItem.primary : parentItem.label;
+                    onSelectionChange([
+                        ...selections,
+                        {
+                            ...clickedItem,
+                            secondary
+                        }
+                    ]);
+                }
+                setSearchInput('');
+            }
+            else {
+                onSelectionChange([clickedItem]);
+            }
+        }, focusControlEl: searchEleRef.current ?? undefined, emptyText: t('no_picker_items', [contextualLabel]), accent: filterRegex, mode: multiSelect ? 'multi-select' : 'action', arrowNavigationUnsupported: true, scrollAt: Infinity }));
+    return (_jsxs(Grid, { as: StyledPickerContent, ref: ref, container: { autoFlow: 'column', autoCols: 'minmax(0, 1fr)' }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [searchAndSwitch, availableItems] }), multiSelect && (_jsxs(Flex, { as: StyledSelectedItemsWrapper, container: { direction: 'column' }, ref: selectedItemsWrapperRef, children: [_jsx(Text, { variant: 'h3', children: t('selected_picker_items', [contextualLabel]) }), selections.length > 0 ? (selectedItems) : (_jsx(EmptyState, { message: t('no_selected_picker_items', [contextualLabel]) }))] }))] }));
+});
+export default Picker;
+//# sourceMappingURL=Picker.js.map