@azure/communication-react 1.2.3-alpha-202206140015.0 → 1.2.3-alpha-202206170013.0

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

@@ -191,7 +191,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.2.3-alpha-202206140015.0';
+var telemetryVersion = '1.2.3-alpha-202206170013.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -364,7 +364,7 @@ const getCallState = (state, props) => { var _a; return (_a = state.calls[props.
 
 // 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); } }
@@ -402,7 +402,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$r(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$s(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -506,7 +506,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 
 // 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); } }
@@ -530,7 +530,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @public
  */
 const createDefaultCallingHandlers = memoizeOne__default['default']((callClient, callAgent, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$r(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?
@@ -550,7 +550,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$r(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -563,7 +563,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             });
         }
     });
-    const onToggleCamera = (options) => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$r(void 0, void 0, void 0, function* () {
         if (call && _isInCall(call.state)) {
             const stream = call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
             if (stream) {
@@ -593,19 +593,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
     const onStartCall = (participants, options) => {
         return callAgent ? callAgent.startCall(participants, options) : undefined;
     };
-    const onSelectMicrophone = (device) => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$r(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$r(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$r(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -628,19 +628,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$r(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$q(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$q(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$q(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = () => __awaiter$q(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
+    const onStartScreenShare = () => __awaiter$r(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$r(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$r(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = () => __awaiter$r(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$q(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$q(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$r(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$r(void 0, void 0, void 0, function* () {
         var _a;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -656,7 +656,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$q(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$r(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -684,7 +684,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$q(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$r(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -705,7 +705,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$r(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');
@@ -717,11 +717,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$q(void 0, void 0, void 0, function* () {
+    const onRemoveParticipant = (userId) => __awaiter$r(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$q(void 0, void 0, void 0, function* () {
+    const onAddParticipant = (participant, options) => __awaiter$r(void 0, void 0, void 0, function* () {
         if (communicationCommon.isPhoneNumberIdentifier(participant)) {
             yield (call === null || call === void 0 ? void 0 : call.addParticipant(participant, options));
         }
@@ -730,7 +730,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
     });
     /* @conditional-compile-remove(dialpad) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$q(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$r(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) */
@@ -2990,6 +2990,7 @@ const ChatMessageActionFlyout = (props) => {
             hidePersonaDetails: true,
             size: react.PersonaSize.size24,
             text: person.displayName,
+            showOverflowTooltip: false,
             styles: {
                 root: {
                     margin: '0.25rem'
@@ -3209,7 +3210,7 @@ const chatMessageActionMenuProps = (menuProps) => {
     return actionMenuProps;
 };
 
-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); } }
@@ -3228,7 +3229,7 @@ const actionIconStyle = { height: '1rem' };
 const _FileDownloadCards = (props) => {
     const { userId, fileMetadata } = props;
     const [showSpinner, setShowSpinner] = React.useState(false);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$p(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$q(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -3348,7 +3349,7 @@ const ChatMessageComponentAsMessageBubble = React__default['default'].memo(Messa
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+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); } }
@@ -3382,7 +3383,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$o(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$p(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     props.message.messageId &&
                     (yield props.onUpdateMessage(props.message.messageId, text, metadata, options));
@@ -3492,7 +3493,7 @@ const getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$o = (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); } }
@@ -3610,7 +3611,8 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
             const personaOptions = {
                 hidePersonaDetails: true,
                 size: react.PersonaSize.size32,
-                text: message.senderDisplayName
+                text: message.senderDisplayName,
+                showOverflowTooltip: false
             };
             const chatItemMessageStyle = (message.mine ? styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer : styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) ||
                 defaultChatItemMessageContainer(shouldOverlapAvatarAndMessage);
@@ -3718,7 +3720,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$n(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -3769,7 +3771,7 @@ const MessageThread = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$n(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$o(void 0, void 0, void 0, function* () {
         if (chatScrollDivRef.current && !isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -4009,8 +4011,6 @@ const linkStyles = (theme) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-// Height and width of the loading spinner
-const LOADING_SPINNER_SIZE_REM = 5;
 /**
  * @private
  */
@@ -4022,8 +4022,7 @@ const container = () => react.mergeStyles({
  * @private
  */
 const loadingSpinnerContainer = () => react.mergeStyles({
-    width: `${LOADING_SPINNER_SIZE_REM}rem`,
-    height: `${LOADING_SPINNER_SIZE_REM}rem`,
+    // Position centrally on top of content. Parent must have position: relative.
     position: 'absolute',
     top: '50%',
     bottom: '0',
@@ -4035,7 +4034,16 @@ const loadingSpinnerContainer = () => react.mergeStyles({
  * @private
  */
 const loadSpinnerStyles = {
-    circle: { height: `${LOADING_SPINNER_SIZE_REM}rem`, width: `${LOADING_SPINNER_SIZE_REM}rem`, borderWidth: '0.25em' }
+    root: {
+        height: '100%' // ensure height fills container
+    },
+    circle: {
+        maxHeight: '5rem',
+        height: '50%',
+        width: 'unset',
+        aspectRatio: '1 / 1',
+        borderWidth: '0.25em'
+    }
 };
 /**
  * @private
@@ -4166,7 +4174,7 @@ const meContainerStyle = {
  */
 const ParticipantItem = (props) => {
     var _a, _b, _c, _d;
-    const { userId, displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles, me, onClick } = props;
+    const { userId, displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles, me, onClick, showParticipantOverflowTooltip } = props;
     const [itemHovered, setItemHovered] = React.useState(false);
     const [menuHidden, setMenuHidden] = React.useState(true);
     const containerRef = React.useRef(null);
@@ -4179,7 +4187,8 @@ const ParticipantItem = (props) => {
         text: displayName,
         size: react.PersonaSize.size32,
         presence: presence,
-        initialsTextColor: 'white'
+        initialsTextColor: 'white',
+        showOverflowTooltip: showParticipantOverflowTooltip
     };
     const avatar = onRenderAvatar ? (onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', avatarOptions)) : (React__default['default'].createElement(react.Persona, Object.assign({ className: react.mergeStyles({
             // Prevents persona text from being vertically truncated if a global line height is less than 1.15.
@@ -4248,7 +4257,7 @@ const iconStyles$1 = react.mergeStyles({
 });
 
 // Copyright (c) Microsoft Corporation.
-const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, styles, onParticipantClick) => {
+const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, styles, onParticipantClick, showParticipantOverflowTooltip) => {
     const callingParticipant = participant;
     let presence = undefined;
     if (callingParticipant) {
@@ -4266,7 +4275,7 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
             callingParticipant.isMuted && (React__default['default'].createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$1, ariaLabel: strings.mutedIconLabel }))))
         : () => null;
     const displayName = !participant.displayName ? strings.displayNamePlaceholder : participant.displayName;
-    return (React__default['default'].createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatar, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant) }));
+    return (React__default['default'].createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatar, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant), showParticipantOverflowTooltip: showParticipantOverflowTooltip }));
 };
 const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
     if (!excludeMe || !myUserId) {
@@ -4289,7 +4298,7 @@ const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
  */
 const ParticipantList = (props) => {
     var _a, _b;
-    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems } = props;
+    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip } = props;
     const ids = useIdentifiers();
     const strings = useLocale$1().strings.participantItem;
     const displayedParticipants = React.useMemo(() => {
@@ -4318,7 +4327,7 @@ const ParticipantList = (props) => {
     const participantItemStyles = react.merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles);
     return (React__default['default'].createElement(react.Stack, { "data-ui-id": ids.participantList, className: react.mergeStyles(participantListStyle$1, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root) }, displayedParticipants.map((participant) => onRenderParticipant
         ? onRenderParticipant(participant)
-        : onRenderParticipantDefault(participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick))));
+        : onRenderParticipantDefault(participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip))));
 };
 
 /**
@@ -4574,7 +4583,7 @@ const DEFAULT_PERSONA_MIN_SIZE_PX = 32;
 const DefaultPlaceholder = (props) => {
     const { text, noVideoAvailableAriaLabel, coinSize, styles, hidePersonaDetails } = props;
     return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
-        React__default['default'].createElement(react.Persona, { styles: styles, coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '' })));
+        React__default['default'].createElement(react.Persona, { styles: styles, coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false })));
 };
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 /**
@@ -6418,7 +6427,7 @@ const announcerStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$n = (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); } }
@@ -6455,7 +6464,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$m(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$n(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -6587,7 +6596,7 @@ const lightThemeCallButtonStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$m = (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); } }
@@ -6620,7 +6629,7 @@ const MicrophoneButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$l(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$m(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -6653,7 +6662,7 @@ const MicrophoneButton = (props) => {
  */
 const ParticipantsButton = (props) => {
     var _a, _b, _c, _d;
-    const { callInvitationURL, styles, onMuteAll, onRenderIcon, onRenderParticipantList, participants, myUserId, excludeMe, onRenderParticipant, onRenderAvatar, onRemoveParticipant, onFetchParticipantMenuItems } = props;
+    const { callInvitationURL, styles, onMuteAll, onRenderIcon, onRenderParticipantList, participants, myUserId, excludeMe, onRenderParticipant, onRenderAvatar, onRemoveParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip } = props;
     const onRenderPeopleIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonParticipants" }));
     const ids = useIdentifiers();
     const onMuteAllCallback = React.useCallback(() => {
@@ -6663,7 +6672,7 @@ const ParticipantsButton = (props) => {
     }, [onMuteAll]);
     const defaultParticipantList = React.useCallback(() => {
         var _a;
-        return (React__default['default'].createElement(ParticipantList, { participants: participants, myUserId: myUserId, excludeMe: excludeMe, onRenderParticipant: onRenderParticipant, onRenderAvatar: onRenderAvatar, onRemoveParticipant: onRemoveParticipant, onFetchParticipantMenuItems: onFetchParticipantMenuItems, styles: react.merge(defaultParticipantListContainerStyle, (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.participantListStyles) }));
+        return (React__default['default'].createElement(ParticipantList, { participants: participants, myUserId: myUserId, excludeMe: excludeMe, onRenderParticipant: onRenderParticipant, onRenderAvatar: onRenderAvatar, onRemoveParticipant: onRemoveParticipant, onFetchParticipantMenuItems: onFetchParticipantMenuItems, styles: react.merge(defaultParticipantListContainerStyle, (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.participantListStyles), showParticipantOverflowTooltip: showParticipantOverflowTooltip }));
     }, [
         excludeMe,
         myUserId,
@@ -6672,7 +6681,8 @@ const ParticipantsButton = (props) => {
         onRenderParticipant,
         participants,
         (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.participantListStyles,
-        onFetchParticipantMenuItems
+        onFetchParticipantMenuItems,
+        showParticipantOverflowTooltip
     ]);
     const onCopyCallback = React.useCallback(() => {
         if (callInvitationURL) {
@@ -7472,14 +7482,17 @@ const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
     const [textValue, setTextValue] = React.useState('');
-    const { onSendDtmfTone, onClickDialpadButton, onDisplayDialpadInput } = props;
+    const { onSendDtmfTone, onClickDialpadButton, onDisplayDialpadInput, onChange } = props;
     const onClickDialpad = (input, index) => {
         setTextValue(textValue + input);
         if (onSendDtmfTone) {
             onSendDtmfTone(DtmfTones[index]);
         }
         if (onClickDialpadButton) {
-            onClickDialpadButton();
+            onClickDialpadButton(input, index);
+        }
+        if (onChange) {
+            onChange(onDisplayDialpadInput ? onDisplayDialpadInput(textValue + input) : formatPhoneNumber(textValue + input));
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7489,7 +7502,14 @@ const DialpadContainer = (props) => {
     // comment out the following line for now to disable customization for dialpad content
     // const dialpadButtonsContent = props.dialpadButtons ?? dialPadButtonsDefault;
     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" },
-        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), onChange: setText, placeholder: props.placeholderText, "data-test-id": "dialpad-input" }),
+        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), 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onChange: (e) => {
+                setText(e);
+                if (onChange) {
+                    onChange(onDisplayDialpadInput ? onDisplayDialpadInput(e.target.value) : formatPhoneNumber(e.target.value));
+                }
+            }, placeholder: props.placeholderText, "data-test-id": "dialpad-input" }),
         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}`, 
                 /* row index = 0
@@ -7969,7 +7989,7 @@ const findConditionalCompiledSelector = (component) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$l = (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); } }
@@ -7992,35 +8012,35 @@ const createDefaultChatHandlers = memoizeOne__default['default']((chatClient, ch
     let messageIterator = undefined;
     let readReceiptIterator = undefined;
     return {
-        onSendMessage: (content, options) => __awaiter$k(void 0, void 0, void 0, function* () {
+        onSendMessage: (content, options) => __awaiter$l(void 0, void 0, void 0, function* () {
             const sendMessageRequest = {
                 content,
                 senderDisplayName: chatClient.getState().displayName
             };
             yield chatThreadClient.sendMessage(sendMessageRequest, options);
         }),
-        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$k(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$l(void 0, void 0, void 0, function* () {
             const updatedMetadata = metadata ? Object.assign({}, metadata) : {};
             updatedMetadata['fileSharingMetadata'] = JSON.stringify((options === null || options === void 0 ? void 0 : options.attachedFilesMetadata) || []);
             yield chatThreadClient.updateMessage(messageId, { content, metadata: updatedMetadata });
         }),
-        onDeleteMessage: (messageId) => __awaiter$k(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$l(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$k(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$l(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$k(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$l(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$k(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$l(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$k(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$l(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$k(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$l(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
             if (messageIterator === undefined) {
                 // Lazy definition so that errors in the method call are reported correctly.
@@ -8711,7 +8731,7 @@ const findSelector = (component) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$k = (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); } }
@@ -8760,10 +8780,10 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$j(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$k(this, void 0, void 0, function* () {
             this._context.setDeviceManagerCameras(dedupeById(yield this._deviceManager.getCameras()));
         });
-        this.audioDevicesUpdated = () => __awaiter$j(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$k(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -8960,7 +8980,7 @@ class CallIdHistory {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$j = (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); } }
@@ -9443,7 +9463,7 @@ class CallContext$1 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$i(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$j(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -9507,7 +9527,7 @@ const findOldestCallEnded = (calls) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$i = (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); } }
@@ -9527,63 +9547,63 @@ class ProxyCall {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         return yield target.resume(...args);
                     });
                 }, 'Call.resume');
             }
             case 'addParticipant': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'Call.addParticipant');
@@ -9791,7 +9811,7 @@ class RemoteVideoStreamSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$h = (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); } }
@@ -9801,7 +9821,7 @@ var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewRemoteVideo(context, internalContext, callId, participantId, stream, options) {
-    return __awaiter$g(this, void 0, void 0, function* () {
+    return __awaiter$h(this, void 0, void 0, function* () {
         // Render RemoteVideoStream that is part of a Call
         const streamId = stream.id;
         let participantKey;
@@ -9909,7 +9929,7 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
     });
 }
 function createViewLocalVideo(context, internalContext, callId, options) {
-    return __awaiter$g(this, void 0, void 0, function* () {
+    return __awaiter$h(this, void 0, void 0, function* () {
         _logEvent(callingStatefulLogger, {
             name: EventNames.START_LOCAL_STREAM_RENDERING,
             level: 'info',
@@ -10025,7 +10045,7 @@ function createViewLocalVideo(context, internalContext, callId, options) {
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$g(this, void 0, void 0, function* () {
+    return __awaiter$h(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -10583,6 +10603,55 @@ class CallSubscriber {
     }
 }
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$g = (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());
+    });
+};
+/**
+ * @private
+ */
+class ProxyIncomingCall {
+    constructor(context) {
+        this._context = context;
+    }
+    get(target, prop) {
+        switch (prop) {
+            case 'accept': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$g(this, void 0, void 0, function* () {
+                        return yield target.accept(...args);
+                    });
+                }, 'IncomingCall.accept');
+            }
+            case 'reject': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$g(this, void 0, void 0, function* () {
+                        return yield target.reject(...args);
+                    });
+                }, 'IncomingCall.reject');
+            }
+            default:
+                return Reflect.get(target, prop);
+        }
+    }
+}
+/**
+ * Creates a declarative Incoming Call by proxying IncomingCall using ProxyIncomingCall.
+ * @param incomingCall - IncomingCall from SDK
+ * @returns proxied IncomingCall
+ */
+const incomingCallDeclaratify = (incomingCall, context) => {
+    const proxyIncomingCall = new ProxyIncomingCall(context);
+    return new Proxy(incomingCall, proxyIncomingCall);
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -10640,6 +10709,7 @@ class ProxyCallAgent {
                 incomingCallSubscriber.unsubscribe();
             }
             this._incomingCallSubscribers.clear();
+            this._declarativeIncomingCalls.clear();
             for (const [_, declarativeCall] of this._declarativeCalls.entries()) {
                 declarativeCall.unsubscribe();
             }
@@ -10680,14 +10750,16 @@ class ProxyCallAgent {
                 incomingCallSubscriber.unsubscribe();
                 this._incomingCallSubscribers.delete(incomingCallId);
             }
+            this._declarativeIncomingCalls.delete(incomingCallId);
             this._context.setIncomingCallEnded(incomingCallId, callEndReason);
         };
-        this.incomingCall = (event) => {
+        this.incomingCall = ({ incomingCall }) => {
             // Make sure to not subscribe to the incoming call if we are already subscribed to it.
-            if (!this._incomingCallSubscribers.has(event.incomingCall.id)) {
-                this._incomingCallSubscribers.set(event.incomingCall.id, new IncomingCallSubscriber(event.incomingCall, this.setIncomingCallEnded));
+            if (!this._incomingCallSubscribers.has(incomingCall.id)) {
+                this._incomingCallSubscribers.set(incomingCall.id, new IncomingCallSubscriber(incomingCall, this.setIncomingCallEnded));
             }
-            this._context.setIncomingCall(convertSdkIncomingCallToDeclarativeIncomingCall(event.incomingCall));
+            this._declarativeIncomingCalls.set(incomingCall.id, incomingCallDeclaratify(incomingCall, this._context));
+            this._context.setIncomingCall(convertSdkIncomingCallToDeclarativeIncomingCall(incomingCall));
         };
         this.addCall = (call) => {
             var _a;
@@ -10712,6 +10784,7 @@ class ProxyCallAgent {
         this._internalContext = internalContext;
         this._callSubscribers = new Map();
         this._incomingCallSubscribers = new Map();
+        this._declarativeIncomingCalls = new Map();
         this._declarativeCalls = new Map();
         this._externalCallsUpdatedListeners = new Set();
         this.subscribe();
@@ -10766,6 +10839,18 @@ class ProxyCallAgent {
                     });
                 };
             }
+            /**
+             * This attribute is a special case and doesn't exist on the CallAgent interface.
+             * We need this to be able to return a declarative incoming call object using the call agent.
+             * In a standard headless SDK usage, the right way to get an incoming call is to use the `incomingCall` event.
+             * However, using the declarative layer, the ideal usage would be to:
+             * 1. subscribe to the `onStateChange` event
+             * 2. Get the incoming call from the new state and it's ID
+             * 3. Use `callAgent.incomingCalls` and filter an incoming call ID to get a declarative incoming call object
+             */
+            case 'incomingCalls': {
+                return this._declarativeIncomingCalls;
+            }
             default:
                 return Reflect.get(target, prop);
         }
@@ -13209,12 +13294,14 @@ const avatarDeepDifferenceCheck = (currentData, newData) => {
  */
 const AvatarPersona = (props) => {
     var _a, _b, _c, _d, _e, _f;
-    const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor } = props;
+    const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const userIds = React.useMemo(() => {
         return [userId];
     }, [userId]);
     const [data] = useCustomAvatarPersonaData(userIds, dataProvider);
-    return (React__default['default'].createElement(react.Persona, Object.assign({}, props, { text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white' })));
+    return (React__default['default'].createElement(react.Persona, Object.assign({}, props, { text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
+        // default disable tooltip unless specified
+        showOverflowTooltip: showOverflowTooltip !== null && showOverflowTooltip !== void 0 ? showOverflowTooltip : false })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -13475,7 +13562,7 @@ const ParticipantListWithHeading = (props) => {
     return (React__default['default'].createElement(react.Stack, { className: participantListStack },
         React__default['default'].createElement(react.Stack.Item, { styles: subheadingStyleThemed }, title),
         React__default['default'].createElement(react.FocusZone, { className: participantListContainerStyle },
-            React__default['default'].createElement(ParticipantList, Object.assign({}, participantListProps, { styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React__default['default'].createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { dataProvider: onFetchAvatarPersonaData }))), onFetchParticipantMenuItems: onFetchParticipantMenuItems })))));
+            React__default['default'].createElement(ParticipantList, Object.assign({}, participantListProps, { styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React__default['default'].createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { dataProvider: onFetchAvatarPersonaData }))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile })))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -13483,11 +13570,11 @@ const ParticipantListWithHeading = (props) => {
  * @private
  */
 const ChatScreenPeoplePane = (props) => {
-    const { onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;
+    const { onFetchAvatarPersonaData, onFetchParticipantMenuItems, isMobile } = props;
     const locale = useLocale();
     const chatListHeader = locale.strings.chat.chatListHeader;
     const participantListProps = usePropsFor$2(ParticipantList);
-    return (React__default['default'].createElement(ParticipantContainer, { participantListProps: participantListProps, title: chatListHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems }));
+    return (React__default['default'].createElement(ParticipantContainer, { participantListProps: participantListProps, title: chatListHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, isMobile: isMobile }));
 };
 
 /**
@@ -13607,7 +13694,7 @@ const ChatScreen = (props) => {
                                 onCancelFileUpload: adapter.cancelFileUpload }))),
                         formFactor !== 'mobile' && React__default['default'].createElement(AttachFileButton, null)))),
             /* @conditional-compile-remove(chat-composite-participant-pane) */
-            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems })))));
+            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' })))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -13901,9 +13988,9 @@ const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
     onSelectSpeaker: (deviceInfo) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.setSpeaker(deviceInfo);
     }),
-    onStartCall: (participants) => {
+    onStartCall: (participants, options) => {
         const rawIds = participants.map((participant) => toFlatCommunicationIdentifier(participant));
-        return adapter.startCall(rawIds);
+        return adapter.startCall(rawIds, options);
     },
     onStartScreenShare: () => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.startScreenShare();
@@ -14212,7 +14299,7 @@ const Participants = (props) => {
         var _a;
         return concatButtonBaseStyles(props.increaseFlyoutItemSize ? participantButtonWithIncreasedTouchTargets : {}, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.increaseFlyoutItemSize, props.styles]);
-    return (React__default['default'].createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: props.displayType !== 'compact', callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, disabled: isDisabled$1(props.option), styles: participantsButtonStyles })));
+    return (React__default['default'].createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: props.displayType !== 'compact', callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, disabled: isDisabled$1(props.option), styles: participantsButtonStyles, showParticipantOverflowTooltip: !props.isMobile })));
 };
 const isDisabled$1 = (option) => {
     if (option === undefined || option === true || option === false) {
@@ -14253,7 +14340,7 @@ const CallControls = (props) => {
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) && React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType }),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) && React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType }),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize })),
                 customButtons['primary'],
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton) && React__default['default'].createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
@@ -14401,7 +14488,7 @@ const CallArrangement = (props) => {
                 !!props.mutedNotificationProps && React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps))),
             React__default['default'].createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true }, props.onRenderGalleryContent && (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: mediaGalleryContainerStyles }, props.onRenderGalleryContent()))),
             ((_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.options) !== false && (React__default['default'].createElement(react.Stack.Item, { className: callControlsContainerStyles },
-                React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight })))))));
+                React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView })))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -15801,8 +15888,7 @@ class AzureCommunicationCallAdapter {
             }));
         });
     }
-    //TODO: a better way to expose option parameter
-    startCall(participants) {
+    startCall(participants, options) {
         var _a, _b;
         if (_isInCall((_b = (_a = this.getState().call) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : 'None')) {
             throw new Error('You are already in the call.');
@@ -15811,9 +15897,18 @@ class AzureCommunicationCallAdapter {
             // FIXME: `onStartCall` does not allow a Teams user.
             // Need some way to return an error if a Teams user is provided.
             const backendId = fromFlatCommunicationIdentifier(participant);
+            if (communicationCommon.isPhoneNumberIdentifier(backendId)) {
+                if ((options === null || options === void 0 ? void 0 : options.alternateCallerId) === undefined) {
+                    throw new Error('unable to start call, PSTN user present with no alternativeCallerID.');
+                }
+                return backendId;
+            }
+            else if (communicationCommon.isCommunicationUserIdentifier(backendId)) {
+                return backendId;
+            }
             return backendId;
         });
-        const call = this.handlers.onStartCall(idsToAdd);
+        const call = this.handlers.onStartCall(idsToAdd, options);
         if (!call) {
             throw new Error('Unable to start call.');
         }
@@ -16577,8 +16672,8 @@ class CallWithChatBackedCallAdapter {
             return this.callWithChatAdapter.joinCall(microphoneOn);
         };
         this.leaveCall = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.leaveCall(); });
-        this.startCall = (participants) => {
-            return this.callWithChatAdapter.startCall(participants);
+        this.startCall = (participants, options) => {
+            return this.callWithChatAdapter.startCall(participants, options);
         };
         this.setCamera = (sourceId, options) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.setCamera(sourceId, options); });
         this.setMicrophone = (sourceId) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.setMicrophone(sourceId); });
@@ -17726,8 +17821,8 @@ class AzureCommunicationCallWithChatAdapter {
         });
     }
     /** Start a new Call. */
-    startCall(participants) {
-        return this.callAdapter.startCall(participants);
+    startCall(participants, options) {
+        return this.callAdapter.startCall(participants, options);
     }
     /**
      * Subscribe to state change events.