@azure/communication-react 1.3.3-alpha-202208260016.0 → 1.3.3-alpha-202208300017.0

package/dist/dist-cjs/communication-react/index.js

@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.3-alpha-202208260016.0';
+var telemetryVersion = '1.3.3-alpha-202208300017.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -391,7 +391,7 @@ const getCallState = (state, props) => { var _a; return (_a = state.calls[props.
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -429,7 +429,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$v(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$w(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -536,7 +536,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -560,7 +560,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @public
  */
 const createDefaultCallingHandlers = memoizeOne__default['default']((callClient, callAgent, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$v(void 0, void 0, void 0, function* () {
         // Before the call object creates a stream, dispose of any local preview streams.
         // @TODO: is there any way to parent the unparented view to the call object instead
         // of disposing and creating a new stream?
@@ -580,7 +580,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$v(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -593,7 +593,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             });
         }
     });
-    const onToggleCamera = (options) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (call && _isInCall(call.state)) {
             const stream = call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
             if (stream) {
@@ -623,19 +623,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
     const onStartCall = (participants, options) => {
         return callAgent ? callAgent.startCall(participants, options) : undefined;
     };
-    const onSelectMicrophone = (device) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -658,19 +658,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!call || !_isInCall(call.state)) {
             throw new Error(`Please invoke onToggleMicrophone after call is started`);
         }
         return call.isMuted ? yield call.unmute() : yield call.mute();
     });
-    const onStartScreenShare = () => __awaiter$u(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$u(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$u(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = () => __awaiter$u(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
+    const onStartScreenShare = () => __awaiter$v(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$v(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$v(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = () => __awaiter$v(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onToggleHold = () => __awaiter$u(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
-    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$v(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
+    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$v(void 0, void 0, void 0, function* () {
         var _a;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -686,7 +686,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         const { view } = (_a = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _a !== void 0 ? _a : {};
         return view ? { view } : undefined;
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -714,7 +714,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
         return (createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view) ? { view: createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view } : undefined;
     });
-    const onDisposeRemoteStreamView = (userId) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -735,7 +735,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$v(void 0, void 0, void 0, function* () {
         // If the user is currently in a call, dispose of the local stream view attached to that call.
         const callState = call && callClient.getState().calls[call.id];
         const localStream = callState === null || callState === void 0 ? void 0 : callState.localVideoStreams.find((item) => item.mediaStreamType === 'Video');
@@ -747,11 +747,11 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         // TODO: we need to remember which LocalVideoStream was used for LocalPreview and dispose that one.
         yield disposeAllLocalPreviewViews(callClient);
     });
-    const onRemoveParticipant = (userId) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onRemoveParticipant = (userId) => __awaiter$v(void 0, void 0, void 0, function* () {
         yield (call === null || call === void 0 ? void 0 : call.removeParticipant(fromFlatCommunicationIdentifier(userId)));
     });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onAddParticipant = (participant, options) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onAddParticipant = (participant, options) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (communicationCommon.isPhoneNumberIdentifier(participant)) {
             yield (call === null || call === void 0 ? void 0 : call.addParticipant(participant, options));
         }
@@ -760,7 +760,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
     });
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$u(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$v(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
     return {
         onHangUp,
         /* @conditional-compile-remove(PSTN-calls) */
@@ -1899,6 +1899,8 @@ const DEFAULT_COMPONENT_ICONS = {
     ControlButtonMicOn: React__default['default'].createElement(reactIcons.MicOn20Filled, null),
     ControlButtonOptions: React__default['default'].createElement(reactIcons.Settings20Filled, null),
     ControlButtonParticipants: React__default['default'].createElement(reactIcons.People20Filled, null),
+    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
+    ControlButtonParticipantsContextualMenuItem: React__default['default'].createElement(reactIcons.People20Regular, null),
     ControlButtonScreenShareStart: React__default['default'].createElement(reactIcons.ShareScreenStart20Filled, null),
     ControlButtonScreenShareStop: React__default['default'].createElement(reactIcons.ShareScreenStop20Filled, null),
     /* @conditional-compile-remove(file-sharing) */
@@ -1938,7 +1940,9 @@ const DEFAULT_COMPONENT_ICONS = {
     ParticipantItemOptionsHovered: React__default['default'].createElement(reactIcons.MoreHorizontal20Filled, null),
     ParticipantItemScreenShareStart: React__default['default'].createElement(reactIcons.ShareScreenStart20Filled, null),
     /* @conditional-compile-remove(PSTN-calls) */
-    HoldCall: React__default['default'].createElement(reactIcons.Pause20Regular, null),
+    HoldCallContextualMenuItem: React__default['default'].createElement(reactIcons.CallPause20Regular, null),
+    /* @conditional-compile-remove(PSTN-calls) */
+    HoldCallButton: React__default['default'].createElement(reactIcons.CallPause20Filled, null),
     /* @conditional-compile-remove(PSTN-calls) */
     ResumeCall: React__default['default'].createElement(reactIcons.Play20Regular, null),
     SendBoxSend: React__default['default'].createElement(reactIcons.Send20Regular, null),
@@ -3392,7 +3396,7 @@ const chatMessageActionMenuProps = (menuProps) => {
     return actionMenuProps;
 };
 
-var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3417,7 +3421,7 @@ const _FileDownloadCards = (props) => {
         var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$t(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$u(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -3565,7 +3569,7 @@ const ChatMessageComponentAsMessageBubble = React__default['default'].memo(Messa
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3599,7 +3603,7 @@ const ChatMessageComponent = (props) => {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     else if (isEditing) {
-        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$s(void 0, void 0, void 0, function* () {
+        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$t(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     props.message.messageId &&
                     (yield props.onUpdateMessage(props.message.messageId, text, metadata, options));
@@ -3698,7 +3702,7 @@ const getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3925,7 +3929,7 @@ const MessageThread = (props) => {
         setChatMessagesInitialized(chatMessagesInitialized);
     };
     // we try to only send those message status if user is scrolled to the bottom.
-    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -3976,7 +3980,7 @@ const MessageThread = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
         if (chatScrollDivRef.current && !isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -4428,7 +4432,7 @@ const ParticipantItem = (props) => {
         setMenuHidden(true);
     };
     const participantStateString = participantStateStringTrampoline$1(props, strings);
-    return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, className: react.mergeStyles(participantItemContainerStyle({ localparticipant: me, clickable: !!menuItems }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
+    return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, "data-ui-id": "participant-item", className: react.mergeStyles(participantItemContainerStyle({ localparticipant: me, clickable: !!menuItems }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             if (!participantStateString) {
                 setItemHovered(true);
                 setMenuHidden(false);
@@ -6789,7 +6793,7 @@ const DevicesButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -6831,7 +6835,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -6963,7 +6967,7 @@ const lightThemeCallButtonStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7006,7 +7010,7 @@ const MicrophoneButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -7718,7 +7722,7 @@ const buttonStyles = (theme) => ({
 /**
  * @private
  */
-const primaryContentStyles = (theme) => {
+const digitStyles = (theme) => {
     return {
         fontSize: '1.25rem',
         fontWeight: theme.fonts.medium.fontWeight,
@@ -7754,7 +7758,7 @@ const textFieldStyles = (theme) => ({
 /**
  * @private
  */
-const secondaryContentStyles = (theme) => {
+const letterStyles = (theme) => {
     return {
         fontSize: '0.625rem',
         color: `${theme.palette.neutralSecondary}`,
@@ -7817,33 +7821,92 @@ const formatPhoneNumber = (phoneNumber) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-const DialpadButton = (props) => {
-    var _a, _b, _c, _d;
-    const theme = react.useTheme();
-    return (React__default['default'].createElement(react.DefaultButton, { "data-test-id": `dialpad-button-${props.index}`, onClick: () => {
-            props.onClick(props.primaryContent, props.index);
-        }, styles: react.concatStyleSets(buttonStyles(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) },
-        React__default['default'].createElement(react.Stack, null,
-            React__default['default'].createElement(react.Text, { className: react.mergeStyles(primaryContentStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.primaryContent) }, props.primaryContent),
-            React__default['default'].createElement(react.Text, { className: react.mergeStyles(secondaryContentStyles(theme), (_c = props.styles) === null || _c === void 0 ? void 0 : _c.secondaryContent) }, (_d = props.secondaryContent) !== null && _d !== void 0 ? _d : ' '))));
+/**
+ * @private
+ */
+function useLongPress(onClick, onLongPress, isMobile) {
+    const timerRef = React.useRef();
+    const [isLongPress, setIsLongPress] = React.useState(false);
+    const [action, setAction] = React.useState(false);
+    function startPressTimer() {
+        setIsLongPress(false);
+        timerRef.current = setTimeout(() => {
+            setIsLongPress(true);
+        }, 500);
+    }
+    function handleOnClick() {
+        // when it's mobile use ontouchstart and ontouchend to fire onclick and onlongpress event
+        if (isMobile) {
+            return;
+        }
+        onClick();
+        if (isLongPress) {
+            onLongPress();
+            return;
+        }
+    }
+    function handleOnKeyDown() {
+        if (action) {
+            setAction(false);
+            startPressTimer();
+        }
+    }
+    function handleOnKeyUp() {
+        setAction(true);
+        timerRef.current && clearTimeout(timerRef.current);
+    }
+    function handleOnMouseDown() {
+        startPressTimer();
+    }
+    function handleOnMouseUp() {
+        timerRef.current && clearTimeout(timerRef.current);
+    }
+    function handleOnTouchStart() {
+        startPressTimer();
+    }
+    function handleOnTouchEnd() {
+        if (isMobile) {
+            isLongPress ? onLongPress() : onClick();
+        }
+        timerRef.current && clearTimeout(timerRef.current);
+    }
+    return {
+        handlers: {
+            onClick: handleOnClick,
+            onMouseDown: handleOnMouseDown,
+            onMouseUp: handleOnMouseUp,
+            onTouchStart: handleOnTouchStart,
+            onTouchEnd: handleOnTouchEnd,
+            onKeyDown: handleOnKeyDown,
+            onKeyUp: handleOnKeyUp
+        }
+    };
+}
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
 };
 const dialPadButtonsDefault = [
+    [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],
     [
-        { primaryContent: '1' },
-        { primaryContent: '2', secondaryContent: 'ABC' },
-        { primaryContent: '3', secondaryContent: 'DEF' }
-    ],
-    [
-        { primaryContent: '4', secondaryContent: 'GHI' },
-        { primaryContent: '5', secondaryContent: 'JKL' },
-        { primaryContent: '6', secondaryContent: 'MNO' }
+        { digit: '4', letter: 'GHI' },
+        { digit: '5', letter: 'JKL' },
+        { digit: '6', letter: 'MNO' }
     ],
     [
-        { primaryContent: '7', secondaryContent: 'PQRS' },
-        { primaryContent: '8', secondaryContent: 'TUV' },
-        { primaryContent: '9', secondaryContent: 'WXYZ' }
+        { digit: '7', letter: 'PQRS' },
+        { digit: '8', letter: 'TUV' },
+        { digit: '9', letter: 'WXYZ' }
     ],
-    [{ primaryContent: '*' }, { primaryContent: '0', secondaryContent: '+' }, { primaryContent: '#' }]
+    [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]
 ];
 const DtmfTones = [
     'Num1',
@@ -7859,58 +7922,76 @@ const DtmfTones = [
     'Num0',
     'Pound'
 ];
+const DialpadButton = (props) => {
+    var _a, _b, _c, _d;
+    const theme = react.useTheme();
+    const { digit, index, onClick, onLongPress, isMobile = false } = props;
+    const clickFunction = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
+        onClick(digit, index);
+    }), [digit, index, onClick]);
+    const longPressFunction = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
+        onLongPress(digit, index);
+    }), [digit, index, onLongPress]);
+    const { handlers } = useLongPress(clickFunction, longPressFunction, isMobile);
+    return (React__default['default'].createElement(react.DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: react.concatStyleSets(buttonStyles(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, handlers),
+        React__default['default'].createElement(react.Stack, null,
+            React__default['default'].createElement(react.Text, { className: react.mergeStyles(digitStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.digit) }, props.digit),
+            React__default['default'].createElement(react.Text, { className: react.mergeStyles(letterStyles(theme), (_c = props.styles) === null || _c === void 0 ? void 0 : _c.letter) }, (_d = props.letter) !== null && _d !== void 0 ? _d : ' '))));
+};
 const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
-    const [textValue, setTextValue] = React.useState('');
-    const { onSendDtmfTone, onClickDialpadButton, onDisplayDialpadInput, onChange, showDeleteButton = true } = props;
-    const sanitizeInput = (input) => {
-        // remove non-valid characters from input: letters,special characters excluding +, *,#
-        return input.replace(/[^\d*#+]/g, '');
-    };
+    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false } = props;
+    const [plainTextValue, setPlainTextValue] = React.useState(textFieldValue !== null && textFieldValue !== void 0 ? textFieldValue : '');
+    React.useEffect(() => {
+        if (onChange) {
+            onChange(plainTextValue);
+        }
+    }, [plainTextValue, onChange]);
+    React.useEffect(() => {
+        setText(textFieldValue !== null && textFieldValue !== void 0 ? textFieldValue : '');
+    }, [textFieldValue]);
     const onClickDialpad = (input, index) => {
-        // remove non-valid characters from input: letters,special characters excluding +, *,#
-        const value = sanitizeInput(textValue + input);
-        setTextValue(value);
+        setText(plainTextValue + input);
         if (onSendDtmfTone) {
             onSendDtmfTone(DtmfTones[index]);
         }
         if (onClickDialpadButton) {
             onClickDialpadButton(input, index);
         }
-        if (onChange) {
-            onChange(onDisplayDialpadInput ? onDisplayDialpadInput(value) : formatPhoneNumber(value));
+    };
+    const onLongPressDialpad = (input, index) => {
+        if (input === '0' && index === 10) {
+            setText(plainTextValue + '+');
+        }
+        else {
+            setText(plainTextValue + input);
+        }
+        if (onSendDtmfTone) {
+            onSendDtmfTone(DtmfTones[index]);
+        }
+        if (onClickDialpadButton) {
+            onClickDialpadButton(input, index);
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const setText = (e) => {
+    const setText = (input) => {
         // remove non-valid characters from input: letters,special characters excluding +, *,#
-        const input = sanitizeInput(e.target.value);
-        setTextValue(input);
+        const plainInput = sanitizeInput(input);
+        setPlainTextValue(plainInput);
     };
-    // Potential Improvement:
-    // comment out the following line for now to disable customization for dialpad content
-    // const dialpadButtonsContent = props.dialpadButtons ?? dialPadButtonsDefault;
     const deleteNumbers = () => {
-        const modifiedInput = textValue.substring(0, textValue.length - 1);
-        setTextValue(modifiedInput);
-        if (onChange) {
-            onChange(onDisplayDialpadInput ? onDisplayDialpadInput(modifiedInput) : formatPhoneNumber(modifiedInput));
-        }
+        const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);
+        setText(modifiedInput);
     };
     return (React__default['default'].createElement("div", { className: react.mergeStyles(containerStyles$1(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer" },
-        React__default['default'].createElement(react.TextField, { styles: react.concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: onDisplayDialpadInput ? onDisplayDialpadInput(textValue) : formatPhoneNumber(textValue), 
+        React__default['default'].createElement(react.TextField, { styles: react.concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue), 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange: (e) => {
-                setText(e);
-                // remove non-valid characters from input: letters,special characters excluding +, *,#
-                const input = sanitizeInput(e.target.value);
-                if (onChange) {
-                    onChange(onDisplayDialpadInput ? onDisplayDialpadInput(input) : formatPhoneNumber(input));
-                }
+                setText(e.target.value);
             }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
                 var _a;
-                return (React__default['default'].createElement(React__default['default'].Fragment, null, showDeleteButton && textValue.length !== 0 && (React__default['default'].createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'BackSpace' } }))));
+                return (React__default['default'].createElement(React__default['default'].Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React__default['default'].createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'BackSpace' } }))));
             } }),
         React__default['default'].createElement(react.FocusZone, null, dialPadButtonsDefault.map((rows, rowIndex) => {
             return (React__default['default'].createElement(react.Stack, { horizontal: true, key: `row_${rowIndex}`, horizontalAlign: "stretch" }, rows.map((button, columnIndex) => (React__default['default'].createElement(DialpadButton, { key: `button_${columnIndex}`, 
@@ -7931,7 +8012,7 @@ const DialpadContainer = (props) => {
                 then use this index to locate the corresponding dtmf tones
                 DtmfTones[index]
                 */
-                index: columnIndex + rowIndex * rows.length, primaryContent: button.primaryContent, secondaryContent: button.secondaryContent, styles: props.styles, onClick: onClickDialpad })))));
+                index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, isMobile: isMobile })))));
         }))));
 };
 /**
@@ -7950,6 +8031,10 @@ const Dialpad = (props) => {
     const strings = Object.assign(Object.assign({}, dialpadLocaleStringsTrampoline()), props.strings);
     return React__default['default'].createElement(DialpadContainer, Object.assign({ strings: strings }, props));
 };
+const sanitizeInput = (input) => {
+    // remove non-valid characters from input: letters,special characters excluding +, *,#
+    return input.replace(/[^\d*#+]/g, '');
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7964,7 +8049,7 @@ const Dialpad = (props) => {
 const HoldButton = (props) => {
     const { onToggleHold, strings } = props;
     const onRenderHoldIcon = () => {
-        return React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "HoldCall" });
+        return React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "HoldCallButton" });
     };
     const onRenderResumeIcon = () => {
         return React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "ResumeCall" });
@@ -14675,7 +14760,8 @@ const buttonFlyoutIncreasedSizeStyles = {
         maxHeight: 'unset'
     },
     icon: {
-        maxHeight: 'unset'
+        maxHeight: 'unset',
+        textAlign: 'center'
     }
 };
 /**
@@ -14977,14 +15063,13 @@ const themedDialpadStyle$1 = (isMobile, theme) => ({
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
             padding: '0 0.5rem ',
-            direction: 'rtl',
             textAlign: 'center',
             ':active': {
                 padding: '0 0.5rem'
             }
         }
     },
-    primaryContent: {
+    digit: {
         color: theme.palette.themeDarkAlt
     }
 });
@@ -15046,13 +15131,13 @@ const SendDtmfDialpad = (props) => {
         return (React__default['default'].createElement(react.Stack, null, showDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
             React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered },
                 React__default['default'].createElement(react.Stack, { style: { padding: '1rem' } },
-                    React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))))));
+                    React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings, isMobile: isMobile }))))))));
     }
     return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle },
         React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "center" },
             React__default['default'].createElement(react.IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
         React__default['default'].createElement(react.Stack, { style: { overflow: 'hidden' } },
-            React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))));
+            React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings, isMobile: isMobile }))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -15084,6 +15169,8 @@ const CallControls = (props) => {
     }), [localeStrings]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const alternateCallerId = useAdapter().getState().alternateCallerId;
     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
     const moreButtonContextualMenuItems = () => {
         const items = [];
@@ -15096,7 +15183,7 @@ const CallControls = (props) => {
                         props.onPeopleButtonClicked();
                     }
                 },
-                iconProps: { iconName: 'ControlButtonParticipants', styles: { root: { lineHeight: 0 } } },
+                iconProps: { iconName: 'ControlButtonParticipantsContextualMenuItem', styles: { root: { lineHeight: 0 } } },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
                 },
@@ -15109,7 +15196,7 @@ const CallControls = (props) => {
             onClick: () => {
                 holdButtonProps.onToggleHold();
             },
-            iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } },
+            iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             },
@@ -15117,17 +15204,20 @@ const CallControls = (props) => {
             ['data-ui-id']: 'hold-button'
         });
         /* @conditional-compile-remove(PSTN-calls) */
-        items.push({
-            key: 'showDialpadKey',
-            text: localeStrings.strings.call.openDtmfDialpadLabel,
-            onClick: () => {
-                setShowDialpad(true);
-            },
-            iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
-            itemProps: {
-                styles: buttonFlyoutIncreasedSizeStyles
-            }
-        });
+        // dtmf tone sending only works for 1:1 PSTN call
+        if (alternateCallerId) {
+            items.push({
+                key: 'showDialpadKey',
+                text: localeStrings.strings.call.openDtmfDialpadLabel,
+                onClick: () => {
+                    setShowDialpad(true);
+                },
+                iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },
+                itemProps: {
+                    styles: buttonFlyoutIncreasedSizeStyles
+                }
+            });
+        }
         return items;
     };
     /* @conditional-compile-remove(PSTN-calls) */
@@ -15652,14 +15742,13 @@ const themedDialpadStyle = (isMobile, theme) => ({
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
             padding: '0 0.5rem',
-            direction: 'rtl',
             textAlign: isMobile ? 'center' : 'left',
             ':active': {
                 padding: '0 0.5rem'
             }
         }
     },
-    primaryContent: {
+    digit: {
         color: theme.palette.themeDarkAlt
     }
 });
@@ -15706,7 +15795,7 @@ const CallingDialpad = (props) => {
     const callButtonStyle = React.useMemo(() => themedCallButtonStyle(theme), [theme]);
     const dialpadComponent = () => {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput }),
+            React__default['default'].createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, isMobile: isMobile }),
             React__default['default'].createElement(react.PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => DialpadStartCallIconTrampoline(), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' })));
     };
     if (isMobile) {
@@ -15866,10 +15955,11 @@ var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments,
 const PeoplePaneContent = (props) => {
     const { inviteLink, onFetchParticipantMenuItems, setDrawerMenuItems, strings, onRemoveParticipant } = props;
     const participantListDefaultProps = usePropsFor$1(ParticipantList);
+    const disableRemoveButton = !hasRemoveParticipantsPermissionTrampoline();
     const setDrawerMenuItemsForParticipant = React.useMemo(() => {
         return (participant) => {
             if (participant) {
-                let contextualMenuItems = createDefaultContextualMenuItems(participant, strings, participantListDefaultProps.onRemoveParticipant, participantListDefaultProps.myUserId);
+                let contextualMenuItems = createDefaultContextualMenuItems(participant, strings, participantListDefaultProps.onRemoveParticipant, participantListDefaultProps.myUserId, disableRemoveButton);
                 if (onFetchParticipantMenuItems) {
                     contextualMenuItems = onFetchParticipantMenuItems(participant.userId, participantListDefaultProps.myUserId, contextualMenuItems);
                 }
@@ -15881,6 +15971,7 @@ const PeoplePaneContent = (props) => {
         strings,
         participantListDefaultProps.onRemoveParticipant,
         participantListDefaultProps.myUserId,
+        disableRemoveButton,
         onFetchParticipantMenuItems,
         setDrawerMenuItems
     ]);
@@ -15916,7 +16007,11 @@ const PeoplePaneContent = (props) => {
  * @param localParticipantUserId - Local participant user id
  * @returns - IContextualMenuItem[]
  */
-const createDefaultContextualMenuItems = (participant, strings, onRemoveParticipant, localParticipantUserId) => {
+const createDefaultContextualMenuItems = (participant, strings, onRemoveParticipant, localParticipantUserId, disableRemoveButton) => {
+    let disabled = !participant.isRemovable;
+    if (disableRemoveButton) {
+        disabled = disabled || disableRemoveButton;
+    }
     const menuItems = [];
     if ((participant === null || participant === void 0 ? void 0 : participant.userId) !== localParticipantUserId) {
         menuItems.push({
@@ -15930,11 +16025,18 @@ const createDefaultContextualMenuItems = (participant, strings, onRemoveParticip
             iconProps: {
                 iconName: 'UserRemove'
             },
-            disabled: !participant.isRemovable
+            disabled: disabled
         });
     }
     return menuItems;
 };
+/**
+ * @private
+ */
+const hasRemoveParticipantsPermissionTrampoline = () => {
+    /* @conditional-compile-remove(rooms) */
+    return _usePermissions().removeParticipantButton;
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -18441,7 +18543,7 @@ const DesktopMoreButton = (props) => {
             onClick: () => {
                 holdButtonProps.onToggleHold();
             },
-            iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } },
+            iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             },
@@ -18972,10 +19074,11 @@ const MoreDrawer = (props) => {
             onItemClick: () => {
                 holdButtonProps.onToggleHold();
             },
-            iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } }
+            iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } }
         });
     }
     /*@conditional-compile-remove(PSTN-calls) */
+    // dtmf tone sending only works for 1:1 PSTN call
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton) && props.onClickShowDialpad) {
         drawerMenuItems.push({
             itemKey: 'showDialpadKey',
@@ -19218,6 +19321,8 @@ const CallWithChatScreen = (props) => {
         dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,
         placeholderText: callWithChatStrings.dtmfDialpadPlaceHolderText
     }), [callWithChatStrings]);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const alternateCallerId = callAdapter.getState().alternateCallerId;
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles) },
         React__default['default'].createElement(react.Stack, { verticalFill: true, grow: true, styles: compositeOuterContainerStyles, id: compositeParentDivId },
             React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
@@ -19234,13 +19339,13 @@ const CallWithChatScreen = (props) => {
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                         disableButtonsForHoldScreen: isInLocalHold, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth, 
                         /* @conditional-compile-remove(PSTN-calls) */
-                        onClickShowDialpad: onClickShowDialpad })))),
+                        onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
                     React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
                         React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControls, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                             /* @conditional-compile-remove(PSTN-calls) */
-                            onClickShowDialpad: onClickShowDialpad, 
+                            onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
                             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                             disableButtonsForHoldScreen: isInLocalHold }))))),
             /* @conditional-compile-remove(PSTN-calls) */