@azure/communication-react 1.2.3-alpha-202206160013.0 → 1.2.3-alpha-202206210013.0

package/dist/communication-react.d.ts

@@ -410,7 +410,7 @@ export declare interface CallAdapterCallManagement {
      *
      * @public
      */
-    startCall(participants: string[]): Call | undefined;
+    startCall(participants: string[], options?: StartCallOptions): Call | undefined;
     /**
      * Start sharing the screen during a call.
      *
@@ -1530,7 +1530,7 @@ export declare interface CallWithChatAdapterManagement {
      *
      * @public
      */
-    startCall(participants: string[]): Call | undefined;
+    startCall(participants: string[], options?: StartCallOptions): Call | undefined;
     /**
      * Start sharing the screen during a call.
      *
@@ -5557,6 +5557,8 @@ export declare interface ParticipantItemProps {
      * Optional callback when component is clicked
      */
     onClick?: (props?: ParticipantItemProps) => void;
+    /** prop to determine if we should show tooltip for participants or not */
+    showParticipantOverflowTooltip?: boolean;
 }
 
 /**
@@ -5654,6 +5656,8 @@ export declare type ParticipantListProps = {
     onParticipantClick?: (participant?: ParticipantListParticipant) => void;
     /** Styles for the {@link ParticipantList} */
     styles?: ParticipantListStyles;
+    /** prop to determine if we should show tooltip for participants or not */
+    showParticipantOverflowTooltip?: boolean;
 };
 
 /**
@@ -5788,6 +5792,8 @@ export declare interface ParticipantsButtonProps extends ControlBarButtonProps {
      * Optional strings to override in component
      */
     strings?: Partial<ParticipantsButtonStrings>;
+    /** prop to determine if we should show tooltip for participants or not */
+    showParticipantOverflowTooltip?: boolean;
 }
 
 /**

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-202206160013.0';
+var telemetryVersion = '1.2.3-alpha-202206210013.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -2990,6 +2990,7 @@ const ChatMessageActionFlyout = (props) => {
             hidePersonaDetails: true,
             size: react.PersonaSize.size24,
             text: person.displayName,
+            showOverflowTooltip: false,
             styles: {
                 root: {
                     margin: '0.25rem'
@@ -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);
@@ -4172,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);
@@ -4185,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.
@@ -4254,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) {
@@ -4272,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) {
@@ -4295,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(() => {
@@ -4324,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))));
 };
 
 /**
@@ -4580,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%' } };
 /**
@@ -6659,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(() => {
@@ -6669,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,
@@ -6678,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) {
@@ -7859,7 +7863,7 @@ const useSelector$4 = (selector, selectorProps) => {
  * @public
  */
 const errorBarSelector$1 = reselect.createSelector([getLatestErrors$1, getDiagnostics, getDeviceManager$1], (latestErrors, diagnostics, deviceManager) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     // The order in which the errors are returned is significant: The `ErrorBar` shows errors on the UI in that order.
     // There are several options for the ordering:
     //   - Sorted by when the errors happened (latest first / oldest first).
@@ -7873,33 +7877,34 @@ const errorBarSelector$1 = reselect.createSelector([getLatestErrors$1, getDiagno
         ((_b = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.network.latest.networkReceiveQuality) === null || _b === void 0 ? void 0 : _b.value) === communicationCalling.DiagnosticQuality.Poor) {
         activeErrorMessages.push({ type: 'callNetworkQualityLow' });
     }
-    if (diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.noSpeakerDevicesEnumerated) {
+    if (((_c = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.noSpeakerDevicesEnumerated) === null || _c === void 0 ? void 0 : _c.value) === true) {
         activeErrorMessages.push({ type: 'callNoSpeakerFound' });
     }
-    if (diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.noMicrophoneDevicesEnumerated) {
+    if (((_d = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.noMicrophoneDevicesEnumerated) === null || _d === void 0 ? void 0 : _d.value) === true) {
         activeErrorMessages.push({ type: 'callNoMicrophoneFound' });
     }
-    if (((_c = deviceManager.deviceAccess) === null || _c === void 0 ? void 0 : _c.audio) === false || (diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.microphoneNotFunctioning)) {
+    if (((_e = deviceManager.deviceAccess) === null || _e === void 0 ? void 0 : _e.audio) === false ||
+        ((_f = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.microphoneNotFunctioning) === null || _f === void 0 ? void 0 : _f.value) === true) {
         activeErrorMessages.push({ type: 'callMicrophoneAccessDenied' });
     }
-    if (diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.microphoneMuteUnexpectedly) {
+    if (((_g = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.microphoneMuteUnexpectedly) === null || _g === void 0 ? void 0 : _g.value) === true) {
         activeErrorMessages.push({ type: 'callMicrophoneMutedBySystem' });
     }
-    if (diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.microphonePermissionDenied) {
+    if (((_h = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.microphonePermissionDenied) === null || _h === void 0 ? void 0 : _h.value) === true) {
         activeErrorMessages.push({ type: 'callMacOsMicrophoneAccessDenied' });
     }
-    if (((_d = deviceManager.deviceAccess) === null || _d === void 0 ? void 0 : _d.video) === false) {
+    if (((_j = deviceManager.deviceAccess) === null || _j === void 0 ? void 0 : _j.video) === false) {
         activeErrorMessages.push({ type: 'callCameraAccessDenied' });
     }
     else {
-        if (diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.cameraFreeze) {
+        if (((_k = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.cameraFreeze) === null || _k === void 0 ? void 0 : _k.value) === true) {
             activeErrorMessages.push({ type: 'callCameraAlreadyInUse' });
         }
     }
-    if (diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.cameraPermissionDenied) {
+    if (((_l = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.cameraPermissionDenied) === null || _l === void 0 ? void 0 : _l.value) === true) {
         activeErrorMessages.push({ type: 'callMacOsCameraAccessDenied' });
     }
-    if (diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.screenshareRecordingDisabled) {
+    if (((_m = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.screenshareRecordingDisabled) === null || _m === void 0 ? void 0 : _m.value) === true) {
         activeErrorMessages.push({ type: 'callMacOsScreenShareAccessDenied' });
     }
     // Prefer to show errors with privacy implications.
@@ -7908,7 +7913,7 @@ const errorBarSelector$1 = reselect.createSelector([getLatestErrors$1, getDiagno
     appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.stopScreenSharing', 'stopScreenShareGeneric');
     appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.startVideo', 'startVideoGeneric');
     appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.unmute', 'unmuteGeneric');
-    if (((_e = latestErrors['CallAgent.join']) === null || _e === void 0 ? void 0 : _e.message) === 'CallAgent.join: Invalid meeting link') {
+    if (((_o = latestErrors['CallAgent.join']) === null || _o === void 0 ? void 0 : _o.message) === 'CallAgent.join: Invalid meeting link') {
         appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'CallAgent.join', 'failedToJoinCallInvalidMeetingLink');
     }
     else {
@@ -13290,12 +13295,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.
@@ -13556,7 +13563,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.
@@ -13564,11 +13571,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 }));
 };
 
 /**
@@ -13688,7 +13695,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.
@@ -13982,9 +13989,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();
@@ -14293,7 +14300,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) {
@@ -14334,7 +14341,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 })))));
@@ -14482,7 +14489,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.
@@ -15882,8 +15889,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.');
@@ -15892,9 +15898,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.');
         }
@@ -16658,8 +16673,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); });
@@ -17807,8 +17822,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.